/*
  GPork — Sistema de Gestión Porcícola
  Design System v3.0 — "Terra Firma"
  ─────────────────────────────────────
  Layout  : Sidebar fija izquierda + área de contenido derecha
  Paleta  : Forest Black #0D1A0F · Crop Green #136F3F · Harvest Gold #C8A840
  Tipografía: Syne 800 (display) · DM Sans (body)
  ─────────────────────────────────────
*/

/* ═══════════════════════════════════════════════════════════════
   TOKENS DE DISEÑO
   ═══════════════════════════════════════════════════════════════ */
:root {
  /* Marca */
  --primary:        #136F3F;
  --primary-dark:   #0d5a2e;
  --primary-light:  #1a8f50;
  --primary-xlight: #e6f4ec;

  /* Acento dorado — harvest gold */
  --gold:           #C8A840;
  --gold-dim:       #A88C34;
  --gold-bg:        rgba(200, 168, 64, 0.1);

  /* Sidebar — modo claro */
  --sidebar-w:               240px;
  --sidebar-bg:              #FFFFFF;
  --sidebar-border:          rgba(19, 111, 63, 0.18);
  --sidebar-text:            #4A6651;
  --sidebar-text-hi:         #182B1D;
  --sidebar-active-bg:       rgba(19, 111, 63, 0.1);
  --sidebar-active-line:     #136F3F;
  --sidebar-active-text:     #182B1D;
  --sidebar-btn-color:       rgba(30, 60, 40, 0.45);
  --sidebar-btn-hover:       rgba(30, 60, 40, 0.85);
  --sidebar-hover-bg:        rgba(0, 0, 0, 0.03);
  --sidebar-hover-btn-bg:    rgba(0, 0, 0, 0.05);
  --sidebar-label-color:     rgba(30, 60, 40, 0.28);
  --sidebar-footer-color:    rgba(30, 60, 40, 0.2);

  /* Superficies — modo claro */
  --bg:          #F3F6F0;
  --surface:     #FFFFFF;
  --surface-2:   #EDF1EA;
  --border:      #D6E2D0;
  --border-hi:   #B0C8A8;

  /* Texto — modo claro */
  --text:        #182B1D;
  --text-2:      #4A6651;
  --text-3:      #8AAA90;

  /* Semánticos */
  --danger:      #CC2D22;
  --danger-bg:   rgba(204, 45, 34, 0.08);
  --warning:     #C87A0A;
  --warning-bg:  rgba(200, 122, 10, 0.09);
  --success:     #1C844A;
  --success-bg:  rgba(28, 132, 74, 0.09);
  --info:        #1068C0;
  --info-bg:     rgba(16, 104, 192, 0.08);

  /* Acentos analíticos — paleta muted para dashboards */
  --acc-rose:   #B65D7C;
  --acc-teal:   #0F7E70;
  --acc-violet: #6C5CA8;
  --acc-blue:   #2D6FA8;

  /* Alias de compatibilidad */
  --card-bg:           var(--surface);
  --bg-alt:            var(--surface-2);
  --input-bg:          #F7FAF5;
  --white:             #FFFFFF;
  --bg-white-alt:      #FFFFFF;
  --text-main:         var(--text);
  --text-muted-color:  var(--text-3);
  --text-label:        var(--text-2);
  --border-color:      var(--border);
  --accent:            var(--primary-light);
  --text-primary:      var(--text);
  --text-secondary:    var(--text-2);
  --bg-subtle:         var(--surface-2);
  --accent-warm:       var(--gold);
  --accent-warm-lt:    var(--gold-bg);
  --shadow-color:      rgba(0,0,0,0.06);

  /* Sombras */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md: 0 3px 10px rgba(0,0,0,0.08), 0 1px 4px rgba(0,0,0,0.04);
  --shadow-lg: 0 10px 36px rgba(0,0,0,0.13), 0 3px 10px rgba(0,0,0,0.06);

  /* Radios */
  --r-sm:   6px;
  --r-md:   10px;
  --r-lg:   14px;
  --r-xl:   20px;
  --r-full: 9999px;

  /* Transiciones */
  --t-fast: 120ms ease;
  --t-base: 210ms ease;
  --t-slow: 380ms cubic-bezier(.4,0,.2,1);

  /* Tabla */
  --table-head-bg:   #EBF2E7;
  --table-stripe-bg: #F7FAF5;
  --table-border:    #E2EDE0;

  /* Varios (compat) */
  --footer-color:          var(--text-3);
  --footer-border:         var(--border);
  --hero-overlay-start:    #B3E5B0;
  --ventajas-bg:           var(--surface);
  --ventajas-border:       var(--border);
  --auth-bg:               var(--surface);
  --auth-shadow:           rgba(0,0,0,0.12);
  --badge-light-bg:        #E8F4EE;
  --badge-light-color:     #18362A;
  --alert-warning-bg:      #FEF8E8;
  --alert-warning-border:  #F5D87C;
  --alert-warning-color:   #7A4E00;
  --alert-light-bg:        var(--surface-2);
  --kpi-icon-bg:           #DFF0E6;
}

/* ─── MODO OSCURO ─────────────────────────────────────────── */
[data-theme="dark"] {
  --bg:        #07100A;
  --surface:   #0E1910;
  --surface-2: #142018;
  --border:    #1C3020;
  --border-hi: #284030;

  /* Acentos analíticos — variantes más luminosas para fondo oscuro */
  --acc-rose:   #D98BA5;
  --acc-teal:   #3DAF9F;
  --acc-violet: #9C8CD8;
  --acc-blue:   #6BA3D6;

  --text:   #CCE4CC;
  --text-2: #6A9472;
  --text-3: #364E3C;

  --card-bg:          #0E1910;
  --bg-alt:           #142018;
  --input-bg:         #111E14;
  --white:            #0E1910;
  --bg-white-alt:     #0E1910;
  --text-main:        #CCE4CC;
  --text-muted-color: #6A9472;
  --text-label:       #6A9472;
  --border-color:     #1C3020;
  --shadow-color:     rgba(0,0,0,0.45);

  --shadow-sm: 0 1px 3px rgba(0,0,0,0.32);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.38);
  --shadow-lg: 0 12px 42px rgba(0,0,0,0.55);

  --table-head-bg:   #111E14;
  --table-stripe-bg: #0C1510;
  --table-border:    #192A1E;

  --footer-color:         #364E3C;
  --footer-border:        #1C3020;
  --ventajas-bg:          #0E1910;
  --ventajas-border:      #1C3020;
  --auth-bg:              #0E1910;
  --auth-shadow:          rgba(0,0,0,0.55);
  --badge-light-bg:       #112018;
  --badge-light-color:    #CCE4CC;
  --alert-warning-bg:     #180E00;
  --alert-warning-border: #362200;
  --alert-warning-color:  #F0C040;
  --alert-light-bg:       #0E1910;
  --kpi-icon-bg:          #182C20;
  --primary-xlight:       #182C20;
  --accent-warm-lt:       #180E00;

  /* Sidebar — modo oscuro */
  --sidebar-bg:           #0D1A0F;
  --sidebar-border:       rgba(19, 111, 63, 0.22);
  --sidebar-text:         #5A8060;
  --sidebar-text-hi:      #B8D4BC;
  --sidebar-active-bg:    rgba(19, 111, 63, 0.18);
  --sidebar-active-line:  #1a8f50;
  --sidebar-active-text:  #FFFFFF;
  --sidebar-btn-color:    rgba(255, 255, 255, 0.45);
  --sidebar-btn-hover:    rgba(255, 255, 255, 0.85);
  --sidebar-hover-bg:     rgba(255, 255, 255, 0.04);
  --sidebar-hover-btn-bg: rgba(255, 255, 255, 0.09);
  --sidebar-label-color:  rgba(255, 255, 255, 0.22);
  --sidebar-footer-color: rgba(255, 255, 255, 0.14);
}

/* ═══════════════════════════════════════════════════════════════
   BASE
   ═══════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'DM Sans', 'Segoe UI', system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.65;
  padding-left: var(--sidebar-w);
  min-height: 100vh;
  transition: background .3s, color .3s, padding-left .32s cubic-bezier(.4,0,.2,1);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1,h2,h3,h4,h5,h6 {
  font-family: 'Syne', sans-serif;
  line-height: 1.18;
  letter-spacing: -.4px;
  color: var(--text);
}

a { color: var(--primary); }

/* ═══════════════════════════════════════════════════════════════
   SIDEBAR  (header → sidebar via CSS puro)
   ═══════════════════════════════════════════════════════════════ */
header {
  position: fixed;
  top: 0; left: 0;
  width: var(--sidebar-w);
  height: 100vh;
  background: var(--sidebar-bg);
  display: flex;
  flex-direction: column;
  z-index: 500;
  overflow-y: auto;
  overflow-x: hidden;
  border-right: 1px solid var(--sidebar-border);
  box-shadow: var(--shadow-md);
  transition: transform .32s cubic-bezier(.4,0,.2,1), background .3s, box-shadow .3s;
}

/* Estado colapsado — !important para garantizar override de cualquier regla */
@media (min-width: 961px) {
  html.nav-collapsed body { padding-left: 0 !important; }
  html.nav-collapsed header { transform: translateX(-240px) !important; }
  html.nav-collapsed .sidebar-expand-btn { display: flex !important; }
}

/* Barra de color en la parte superior */
header::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg,
    var(--primary-dark) 0%,
    var(--primary-light) 45%,
    var(--gold) 80%,
    var(--primary-dark) 100%
  );
  flex-shrink: 0;
}

/* Barra superior del sidebar: logo + botón colapsar */
.sidebar-topbar {
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid var(--sidebar-border);
  flex-shrink: 0;
}

/* Logotipo */
header h1 {
  padding: 24px 20px 20px;
  font-family: 'Syne', sans-serif;
  font-size: 1.12rem;
  font-weight: 800;
  color: var(--sidebar-text-hi);
  letter-spacing: -.2px;
  margin: 0;
  border-bottom: none;
  display: flex;
  align-items: center;
  gap: 9px;
  flex: 1;
  white-space: nowrap;
  min-width: 0;
}

/* Badge de versión junto al logo */
header h1::after {
  content: 'PRO';
  font-size: .55rem;
  font-weight: 800;
  background: var(--gold);
  color: #0D1A0F;
  padding: 1px 5px;
  border-radius: 3px;
  letter-spacing: .8px;
  margin-left: auto;
  flex-shrink: 0;
}

/* Sección de navegación */
nav {
  display: flex;
  flex-direction: column;
  padding: 10px 0 0;
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
}

/* Etiquetas de grupo (Producción / Operación / Análisis / Administración) */
nav span.nav-sec {
  display: block;
  padding: 14px 22px 4px;
  font-size: .58rem;
  font-weight: 800;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--sidebar-label-color);
  flex-shrink: 0;
}

nav a {
  display: flex;
  align-items: center;
  gap: 2px;
  margin: 1px 10px;
  padding: 8px 12px;
  border-radius: 9px;
  color: var(--sidebar-text);
  text-decoration: none;
  font-size: .82rem;
  font-weight: 500;
  transition: color var(--t-fast), background var(--t-fast), transform var(--t-fast);
  white-space: nowrap;
  flex-shrink: 0;
  letter-spacing: -.1px;
  position: relative;
}

nav a:hover {
  color: var(--sidebar-text-hi);
  background: var(--sidebar-hover-bg);
  transform: translateX(2px);
}

nav a.nav-active {
  color: var(--sidebar-active-text);
  background: var(--sidebar-active-bg);
  font-weight: 700;
  box-shadow: inset 0 0 0 1px rgba(19,111,63,.16);
}

/* Punto indicador del módulo activo */
nav a.nav-active::after {
  content: '';
  position: absolute;
  right: 11px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 6px rgba(200,168,64,.7);
}

nav span {
  display: block;
  padding: 6px 20px;
  font-size: .73rem;
  color: var(--sidebar-label-color);
  flex-shrink: 0;
}

/* Nombre de usuario en nav */
.nav-username {
  display: block;
  padding: 6px 20px;
  font-size: .83rem;
  color: var(--sidebar-text);
  flex-shrink: 0;
}

/* ── Tarjeta de usuario al pie del nav ── */
.nav-user {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 14px 10px 4px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--sidebar-hover-bg);
  border: 1px solid var(--sidebar-border);
  flex-shrink: 0;
}
.nav-avatar {
  width: 34px; height: 34px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  font-size: .95rem;
  color: #fff;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
  box-shadow: 0 2px 8px rgba(19,111,63,.35);
  flex-shrink: 0;
}
.nav-user-info {
  display: flex; flex-direction: column;
  min-width: 0; flex: 1; line-height: 1.25;
}
.nav-user-info strong {
  font-size: .8rem;
  color: var(--sidebar-text-hi);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nav-user-rol {
  font-size: .62rem;
  font-weight: 700;
  color: var(--sidebar-text);
  letter-spacing: .3px;
}
.nav-user-rol.is-admin { color: var(--gold); }
.nav-logout {
  margin: 0 !important;
  padding: 6px 8px !important;
  border-radius: 8px !important;
  font-size: .95rem !important;
  color: rgba(200, 80, 70, 0.7) !important;
  flex-shrink: 0;
}
.nav-logout:hover { color: #ff9090 !important; background: rgba(255,80,80,.1) !important; transform: none !important; }

/* Auth links (compat: páginas sin sesión) */
nav a[href="/logout"]:not(.nav-logout) {
  color: rgba(200, 80, 70, 0.65);
  margin-top: 8px;
}
nav a[href="/logout"]:not(.nav-logout):hover { color: #ff9090; background: rgba(255,80,80,.07); }

nav a[href="/login-view"],
nav a[href="/register-view"] {
  color: rgba(200,168,64,.65);
}
nav a[href="/login-view"]:hover,
nav a[href="/register-view"]:hover {
  color: var(--gold);
  border-left-color: var(--gold);
  background: rgba(200,168,64,.06);
}

/* Pie de sidebar — theme toggle button */
.theme-toggle-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  border: none;
  border-top: 1px solid var(--sidebar-border);
  background: none;
  color: var(--sidebar-btn-color);
  font-family: 'DM Sans', sans-serif;
  font-size: .73rem;
  cursor: pointer;
  width: 100%;
  text-align: left;
  transition: color .2s, background .2s;
  flex-shrink: 0;
  margin-top: auto;
}
.theme-toggle-btn:hover { color: var(--sidebar-btn-hover); background: var(--sidebar-hover-bg); }

.tt-icon { font-size: 1rem; line-height: 1; }
.tt-icon::before { content: '🌙'; }
.theme-toggle-btn[data-theme-current="dark"] .tt-icon::before { content: '☀️'; }
.tt-label { letter-spacing: .2px; }

/* Botón colapsar sidebar — en la topbar junto al logo */
.sidebar-collapse-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  background: none;
  border: none;
  border-left: 1px solid var(--sidebar-border);
  color: var(--sidebar-btn-color);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
  transition: color .2s, background .2s;
  font-family: 'DM Sans', sans-serif;
}
.sidebar-collapse-btn:hover { color: var(--sidebar-btn-hover); background: var(--sidebar-hover-btn-bg); }

/* Botón flotante para expandir sidebar */
.sidebar-expand-btn {
  position: fixed;
  top: 14px;
  left: 14px;
  z-index: 600;
  display: none;
  align-items: center;
  gap: 8px;
  background: var(--sidebar-bg);
  color: var(--sidebar-btn-color);
  border: 1px solid var(--sidebar-border);
  border-radius: var(--r-md);
  padding: 8px 13px;
  font-size: 1rem;
  cursor: pointer;
  transition: color .2s, border-color .2s, box-shadow .2s;
  box-shadow: var(--shadow-md);
}
.sidebar-expand-btn:hover { color: white; border-color: var(--primary); box-shadow: var(--shadow-lg); }

/* Huella de versión */
header::after {
  content: '© 2026 GPork · UTB';
  display: block;
  padding: 10px 20px 14px;
  font-size: .62rem;
  color: var(--sidebar-footer-color);
  font-family: 'DM Sans', sans-serif;
  letter-spacing: .5px;
  border-top: 1px solid var(--sidebar-border);
  flex-shrink: 0;
  white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════════
   SIDEBAR — OVERRIDES EXPLÍCITOS MODO OSCURO / CLARO
   Estas reglas tienen mayor especificidad que las de header/nav
   y garantizan el cambio de tema sin depender solo de variables.
   ═══════════════════════════════════════════════════════════════ */

/* ── MODO CLARO (explícito) ── */
[data-theme="light"] header {
  background: #FFFFFF !important;
}
[data-theme="light"] header h1 { color: #182B1D; }
[data-theme="light"] nav a     { color: #4A6651; }
[data-theme="light"] nav a:hover { background: rgba(0,0,0,.03); color: #182B1D; }
[data-theme="light"] nav a.nav-active { color: #182B1D; background: rgba(19,111,63,.1); }
[data-theme="light"] .sidebar-collapse-btn,
[data-theme="light"] .theme-toggle-btn,
[data-theme="light"] .sidebar-expand-btn { color: rgba(30,60,40,.45); }
[data-theme="light"] .sidebar-expand-btn { background: #FFFFFF; border-color: rgba(19,111,63,.18); }

/* ── MODO OSCURO (explícito) ── */
[data-theme="dark"] header {
  background: #0D1A0F !important;
  border-right-color: rgba(19,111,63,.22);
}
[data-theme="dark"] header h1 { color: #B8D4BC; }
[data-theme="dark"] nav a     { color: #5A8060; }
[data-theme="dark"] nav a:hover { background: rgba(255,255,255,.04); color: #B8D4BC; }
[data-theme="dark"] nav a.nav-active { color: #FFFFFF; background: rgba(19,111,63,.18); }
[data-theme="dark"] .sidebar-collapse-btn,
[data-theme="dark"] .theme-toggle-btn { color: rgba(255,255,255,.45); }
[data-theme="dark"] .sidebar-expand-btn { background: #0D1A0F; border-color: rgba(19,111,63,.22); color: rgba(255,255,255,.72); }
[data-theme="dark"] .nav-username { color: #5A8060; }
[data-theme="dark"] nav::before { color: rgba(255,255,255,.22); }
[data-theme="dark"] nav span   { color: rgba(255,255,255,.22); }
[data-theme="dark"] header::after { color: rgba(255,255,255,.14); border-top-color: rgba(19,111,63,.22); }

/* ═══════════════════════════════════════════════════════════════
   LAYOUT PRINCIPAL
   ═══════════════════════════════════════════════════════════════ */
main {
  max-width: 1380px;
  margin: 0 auto;
  padding: 2.2rem 2.6rem 4rem;
  min-height: calc(100vh - 56px);
}

footer {
  padding: 1.2rem 2.6rem;
  color: var(--text-3);
  font-size: .78rem;
  border-top: 1px solid var(--border);
  background: var(--surface);
  text-align: center;
  transition: background .3s, border-color .3s;
}

/* ═══════════════════════════════════════════════════════════════
   PAGE HEADER (banner de sección)
   ═══════════════════════════════════════════════════════════════ */
.page-header {
  background:
    radial-gradient(560px 220px at 88% -40%, rgba(200,168,64,.22), transparent 65%),
    linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 60%, var(--primary-light) 100%);
  border-radius: var(--r-lg);
  padding: 22px 28px 22px 32px;
  margin-bottom: 26px;
  color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(19,111,63,.28);
  transition: background .3s;
}
[data-theme="dark"] .page-header {
  background: var(--sidebar-bg);
}

/* Borde izquierdo con gradiente dorado-verde */
.page-header::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--gold) 0%, var(--primary-light) 100%);
  border-radius: var(--r-lg) 0 0 var(--r-lg);
}

/* Patrón de cuadrícula decorativa (derecha) */
.page-header::after {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 280px;
  background:
    repeating-linear-gradient(0deg,  transparent, transparent 28px, rgba(19,111,63,.07) 28px, rgba(19,111,63,.07) 29px),
    repeating-linear-gradient(90deg, transparent, transparent 28px, rgba(19,111,63,.07) 28px, rgba(19,111,63,.07) 29px);
  pointer-events: none;
}

.page-header h1 {
  color: white !important;
  margin: 0 0 3px;
  font-size: 1.45rem;
  font-weight: 800;
  font-family: 'Syne', sans-serif;
  letter-spacing: -.5px;
}
.page-header p {
  color: rgba(255,255,255,.45);
  margin: 0;
  font-size: .84rem;
}

.page-header .header-badge {
  background: rgba(200,168,64,.14);
  color: var(--gold);
  padding: 5px 14px;
  border-radius: var(--r-full);
  font-weight: 700;
  font-size: .74rem;
  border: 1px solid rgba(200,168,64,.28);
  letter-spacing: .3px;
  z-index: 1;
}

.page-header .header-btn {
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.07);
  color: white;
  padding: 8px 18px;
  border-radius: var(--r-md);
  font-weight: 600;
  font-size: .82rem;
  cursor: pointer;
  transition: all var(--t-fast);
  font-family: 'DM Sans', sans-serif;
  z-index: 1;
}
.page-header .header-btn:hover {
  background: rgba(255,255,255,.14);
  transform: translateY(-1px);
}

/* Acción principal del header — acento dorado */
.page-header .header-btn-gold {
  background: var(--gold);
  border-color: var(--gold);
  color: #0D1A0F;
  font-weight: 700;
}
.page-header .header-btn-gold:hover {
  background: #d9bb55;
  border-color: #d9bb55;
}

/* ═══════════════════════════════════════════════════════════════
   CARDS
   ═══════════════════════════════════════════════════════════════ */
.card, .custom-card {
  background: var(--surface);
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  margin-bottom: 1.25rem;
  padding: 1.45rem;
  transition: border-color var(--t-base), box-shadow var(--t-base), background .3s;
  position: relative;
  overflow: hidden;
}

.card:hover {
  border-color: var(--border-hi);
  box-shadow: var(--shadow-md);
}

/* Barra izquierda sutil en hover */
.card::before {
  content: '';
  position: absolute;
  left: 0; top: 20px; bottom: 20px;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--gold) 0%, var(--primary) 100%);
  opacity: 0;
  transition: opacity var(--t-base);
}
.card:hover::before { opacity: 1; }

/* ═══════════════════════════════════════════════════════════════
   KPI CARDS
   ═══════════════════════════════════════════════════════════════ */
.kpi-grid-gpork {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 14px;
  margin-bottom: 26px;
}

.kpi-card-gpork {
  background: var(--surface);
  border-radius: var(--r-lg);
  padding: 18px 20px;
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 4px;
  box-shadow: var(--shadow-sm);
  transition: all var(--t-base);
  position: relative;
  overflow: hidden;
}

/* Línea superior animada */
.kpi-card-gpork::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--primary), var(--gold));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-slow);
}
.kpi-card-gpork:hover {
  border-color: var(--primary);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.kpi-card-gpork:hover::before { transform: scaleX(1); }

.kpi-icon-gpork {
  width: 38px; height: 38px;
  border-radius: var(--r-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  background: var(--kpi-icon-bg);
  flex-shrink: 0;
  margin-bottom: 6px;
}

/* ═══════════════════════════════════════════════════════════════
   TABLAS
   ═══════════════════════════════════════════════════════════════ */
.table-wrapper {
  overflow-x: auto;
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
}

table {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  font-size: .875rem;
  transition: background .3s;
}

thead th {
  background: var(--table-head-bg);
  color: var(--primary);
  font-family: 'DM Sans', sans-serif;
  font-size: .66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 12px 16px;
  text-align: left;
  white-space: nowrap;
  border-bottom: 2px solid var(--border-hi);
  transition: background .3s, color .3s;
}
[data-theme="dark"] thead th {
  background: var(--sidebar-bg);
  color: rgba(184, 212, 188, 0.85);
  border-bottom-color: rgba(19,111,63,.35);
}

/* Primera/última celda del thead con radio */
table thead tr th:first-child { border-radius: var(--r-lg) 0 0 0; }
table thead tr th:last-child  { border-radius: 0 var(--r-lg) 0 0; }

/* Tabla dentro de table-wrapper sin radios duplicados */
.table-wrapper table thead tr th:first-child { border-radius: 0; }
.table-wrapper table thead tr th:last-child  { border-radius: 0; }

tbody td {
  padding: 11px 16px;
  border-bottom: 1px solid var(--table-border);
  color: var(--text);
  vertical-align: middle;
}

tbody tr:last-child td { border-bottom: none; }
tbody tr { transition: background var(--t-fast); }
tbody tr:hover td { background: var(--surface-2); }
[data-theme="dark"] tbody tr:hover td { background: #182C1E; }

/* ═══════════════════════════════════════════════════════════════
   INPUTS
   ═══════════════════════════════════════════════════════════════ */
.input-main {
  width: 100%;
  padding: 9px 13px;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  background: var(--input-bg);
  color: var(--text);
  font-size: .9rem;
  font-family: 'DM Sans', sans-serif;
  transition: border-color var(--t-fast), box-shadow var(--t-fast), background .3s;
  outline: none;
  box-sizing: border-box;
}
.input-main:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(19,111,63,.1);
  background: var(--surface);
}
.input-main::placeholder { color: var(--text-3); }

/* ═══════════════════════════════════════════════════════════════
   BOTONES (utilidades)
   ═══════════════════════════════════════════════════════════════ */
.btn-pro {
  border-radius: var(--r-md);
  padding: 9px 18px;
  font-weight: 600;
  font-family: 'DM Sans', sans-serif;
  cursor: pointer;
  border: none;
  font-size: .86rem;
  transition: all var(--t-fast);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.btn-primary {
  background: var(--primary);
  color: white;
  box-shadow: 0 1px 4px rgba(19,111,63,.28), inset 0 1px 0 rgba(255,255,255,.09);
}
.btn-primary:hover {
  background: var(--primary-light);
  box-shadow: 0 3px 12px rgba(19,111,63,.38);
  transform: translateY(-1px);
}

.btn-success {
  background: var(--success);
  color: white;
  box-shadow: 0 1px 4px rgba(28,132,74,.28);
}
.btn-success:hover { background: #187840; transform: translateY(-1px); }

.btn-gray {
  background: var(--surface-2);
  color: var(--text-2);
  border: 1px solid var(--border);
}
.btn-gray:hover { background: var(--border); }

/* ═══════════════════════════════════════════════════════════════
   BOTONES (bootstrap compat)
   ═══════════════════════════════════════════════════════════════ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: .38rem .82rem;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  font-size: .84rem;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  transition: all var(--t-fast);
  font-family: 'DM Sans', sans-serif;
  white-space: nowrap;
}
.btn-sm { padding: .22rem .56rem; font-size: .76rem; border-radius: var(--r-sm); }

.btn-success          { background: var(--success); color: white; border-color: var(--success); }
.btn-success:hover    { background: #187840; transform: translateY(-1px); }
.btn-danger           { background: var(--danger); color: white; border-color: var(--danger); }
.btn-danger:hover     { background: #b0261D; transform: translateY(-1px); }
.btn-warning          { background: var(--warning); color: white; }
.btn-warning:hover    { background: #b06C09; }

.btn-outline-primary  { border-color: var(--primary); color: var(--primary); background: transparent; }
.btn-outline-primary:hover { background: var(--primary); color: white; }
.btn-outline-warning  { border-color: var(--warning); color: var(--warning); background: transparent; }
.btn-outline-warning:hover { background: var(--warning); color: white; }
.btn-outline-danger   { border-color: var(--danger); color: var(--danger); background: transparent; }
.btn-outline-danger:hover  { background: var(--danger); color: white; }

/* ═══════════════════════════════════════════════════════════════
   FORMULARIOS
   ═══════════════════════════════════════════════════════════════ */
.form-label {
  display: block;
  margin-bottom: .3rem;
  font-weight: 600;
  font-size: .74rem;
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: .45px;
}

.form-select, .form-control {
  width: 100%;
  padding: .48rem .78rem;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  font-size: .9rem;
  background: var(--input-bg);
  color: var(--text);
  box-sizing: border-box;
  font-family: 'DM Sans', sans-serif;
  transition: border-color var(--t-fast), box-shadow var(--t-fast), background .3s;
  outline: none;
}
.form-select:focus, .form-control:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(19,111,63,.1);
  background: var(--surface);
}
.form-select option, select option { background: var(--surface); color: var(--text); }

.form-group { display: flex; flex-direction: column; margin-bottom: 14px; gap: 5px; }
.form-group label {
  font-weight: 600;
  font-size: .74rem;
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: .4px;
}
.form-group input {
  padding: 9px 13px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  font-size: .9rem;
  background: var(--input-bg);
  color: var(--text);
  font-family: 'DM Sans', sans-serif;
  transition: border-color var(--t-fast), box-shadow var(--t-fast), background .3s;
  outline: none;
}
.form-group input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(19,111,63,.1);
  background: var(--surface);
}

/* ═══════════════════════════════════════════════════════════════
   ALERTAS
   ═══════════════════════════════════════════════════════════════ */
.alert {
  padding: .85rem 1.1rem;
  border-radius: var(--r-md);
  margin-bottom: 1rem;
  font-size: .88rem;
  border: 1px solid;
  border-left-width: 3px;
}
.alert-warning {
  background: var(--alert-warning-bg);
  border-color: var(--alert-warning-border);
  border-left-color: var(--gold);
  color: var(--alert-warning-color);
}
.alert-light   { background: var(--surface-2); border-color: var(--border); color: var(--text); }
.alert-danger  { background: var(--danger-bg); border-color: rgba(204,45,34,.25); border-left-color: var(--danger); color: #842029; }
[data-theme="dark"] .alert-danger {
  background: rgba(204,45,34,.12);
  border-color: rgba(204,45,34,.3);
  color: #f08080;
}

/* ═══════════════════════════════════════════════════════════════
   BADGES
   ═══════════════════════════════════════════════════════════════ */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: .18em .58em;
  border-radius: 4px;
  font-size: .67rem;
  font-weight: 700;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: .35px;
}
.bg-primary { background: var(--primary); color: white; }
.bg-danger  { background: var(--danger);  color: white; }
.bg-info    { background: var(--info);    color: white; }
.bg-light   { background: var(--badge-light-bg); color: var(--badge-light-color); }
.bg-white   { background: var(--surface); color: var(--text); border: 1px solid var(--border); }

/* ═══════════════════════════════════════════════════════════════
   AUTH
   ═══════════════════════════════════════════════════════════════ */
.auth-container {
  max-width: 440px;
  margin: 60px auto;
  padding: 42px;
  background: var(--surface);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border);
  position: relative;
  overflow: hidden;
  transition: background .3s, border-color .3s;
}
.auth-container::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--primary-dark) 0%, var(--primary-light) 55%, var(--gold) 100%);
}

.auth-header h2 { margin-top: 0; color: var(--primary); text-align: center; font-family: 'Syne', sans-serif; }
.auth-header p  { text-align: center; color: var(--text-2); font-size: .88rem; margin-bottom: 24px; }
.auth-form { display: flex; flex-direction: column; gap: 14px; margin-top: 20px; }

.btn-auth {
  width: 100%; padding: 12px;
  background: var(--sidebar-bg);
  color: white; border: none;
  border-radius: var(--r-md);
  cursor: pointer; font-weight: 700;
  font-family: 'DM Sans', sans-serif; font-size: .95rem;
  transition: all var(--t-fast);
  box-shadow: 0 2px 8px rgba(0,0,0,.2);
}
.btn-auth:hover { filter: brightness(1.25); transform: translateY(-1px); box-shadow: 0 5px 18px rgba(0,0,0,.28); }

.btn-register-page {
  width: 100%; padding: 12px;
  background: var(--primary);
  color: white; font-size: .95rem;
  border-radius: var(--r-md);
  margin-top: 8px; border: none; cursor: pointer;
  font-weight: 700; font-family: 'DM Sans', sans-serif;
  transition: all var(--t-fast);
}
.btn-register-page:hover { background: var(--primary-light); transform: translateY(-1px); }

.auth-footer { margin-top: 20px; text-align: center; font-size: .88rem; }
.auth-footer a { color: var(--primary); text-decoration: none; font-weight: 700; }
.auth-footer a:hover { text-decoration: underline; }

/* ═══════════════════════════════════════════════════════════════
   HERO & LANDING
   ═══════════════════════════════════════════════════════════════ */
.horizontal-search { display:flex; gap:10px; align-items:center; width:100%; }

.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:14px; }

.Ventajas-container { display:flex; gap:16px; justify-content:space-between; margin-top:20px; flex-wrap:wrap; }
.Ventajas-item {
  flex:1; min-width:220px;
  background: var(--surface);
  padding: 24px;
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  text-align: center;
  cursor: pointer;
  color: var(--text);
  transition: all var(--t-base);
}
.Ventajas-item:hover {
  transform: translateY(-5px);
  border-color: var(--primary);
  box-shadow: var(--shadow-md);
}

.hero-section.full-width {
  width: 100%; min-height: 70vh;
  position: relative;
  background:
    linear-gradient(to right, #0a1f0d 0%, #0a1f0d 22%, rgba(10,31,13,.55) 52%, rgba(10,31,13,.1) 80%),
    url('img/cerdo.jpg');
  background-size: cover; background-position: center;
  display: flex; flex-direction: column;
  border-radius: var(--r-xl);
  overflow: hidden;
  margin-bottom: 2.5rem;
  border: 1px solid rgba(19,111,63,.3);
}

.hero-container-centered {
  position: relative; z-index: 2;
  display: flex; flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  text-align: left;
  padding: 80px 64px;
  flex: 1;
}

.hero-text-full { max-width: 580px; }
.hero-text-full h1 {
  font-family: 'Syne', sans-serif;
  font-size: 3rem;
  color: white !important;
  font-weight: 800;
  margin-bottom: 16px;
  line-height: 1.06;
  letter-spacing: -1.5px;
}
.hero-text-full p { font-size: 1.05rem; color: rgba(255,255,255,.72); margin-bottom: 30px; }

/* Chip dorado sobre el título */
.hero-text-full::before {
  content: 'Sistema de Gestión Porcícola';
  display: block;
  margin-bottom: 14px;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--gold);
  font-family: 'DM Sans', sans-serif;
}

.hero-buttons { display:flex; gap:14px; flex-wrap:wrap; }

.btn-main {
  background: white;
  color: #136F3F !important;
  padding: 13px 30px;
  border-radius: var(--r-md);
  font-weight: 700;
  font-family: 'Syne', sans-serif;
  text-decoration: none;
  transition: all .22s;
  box-shadow: 0 4px 20px rgba(0,0,0,.2);
  font-size: .93rem;
}
.btn-main:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(0,0,0,.28); }

.btn-secondary {
  border: 1.5px solid rgba(255,255,255,.35);
  color: white !important;
  padding: 11px 26px;
  border-radius: var(--r-md);
  font-weight: 600;
  text-decoration: none;
  transition: all .22s;
  background: rgba(255,255,255,.07);
  font-size: .93rem;
}
.btn-secondary:hover { background: rgba(255,255,255,.15); transform: translateY(-2px); }

.info-section { max-width: 1200px; margin: 0 auto; padding: 60px 0; }

.service-card {
  background: var(--surface); padding: 28px;
  border-radius: var(--r-lg); border: 1px solid var(--border);
  box-shadow: var(--shadow-sm); text-align: center; cursor: pointer;
  transition: all var(--t-base);
}
.service-card:hover { transform: translateY(-5px); border-color: var(--primary); box-shadow: var(--shadow-md); }

.step-item { max-width: 200px; transition: transform var(--t-base); }
.step-item:hover { transform: translateY(-6px); }
.step-number {
  width: 48px; height: 48px;
  background: var(--sidebar-bg);
  color: var(--primary-light);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 14px;
  font-weight: 800; font-family: 'Syne', sans-serif; font-size: 1rem;
  transition: all var(--t-base);
  border: 2px solid rgba(19,111,63,.4);
}
.step-item:hover .step-number { background: var(--primary); color: white; border-color: var(--primary); }

/* ═══════════════════════════════════════════════════════════════
   MODALES / DIALOG
   ═══════════════════════════════════════════════════════════════ */
dialog { margin: auto; }  /* re-centra: el reset global * {margin:0} anula el centrado nativo */
dialog, .modal {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  color: var(--text);
  box-shadow: var(--shadow-lg);
  padding: 0;
  transition: background .3s, border-color .3s;
}
dialog::backdrop { background: rgba(0,0,0,.6); backdrop-filter: blur(4px); }

.modal-header {
  padding: 18px 24px;
  border-bottom: 1px solid var(--border);
  font-weight: 700;
  font-family: 'Syne', sans-serif;
  font-size: 1rem;
  display: flex; align-items: center; justify-content: space-between;
}
.modal-body   { padding: 24px; }
.modal-footer {
  padding: 14px 24px;
  border-top: 1px solid var(--border);
  display: flex; justify-content: flex-end; gap: 10px;
}

/* ═══════════════════════════════════════════════════════════════
   ANIMACIONES
   ═══════════════════════════════════════════════════════════════ */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

.fade-in { animation: fadeInUp .42s ease both; }
.fade-in > * { animation: fadeInUp .36s ease both; }
.fade-in > *:nth-child(1) { animation-delay: .03s; }
.fade-in > *:nth-child(2) { animation-delay: .08s; }
.fade-in > *:nth-child(3) { animation-delay: .13s; }
.fade-in > *:nth-child(4) { animation-delay: .18s; }
.fade-in > *:nth-child(5) { animation-delay: .23s; }

/* ═══════════════════════════════════════════════════════════════
   UTILIDADES (compat total con todos los templates)
   ═══════════════════════════════════════════════════════════════ */
.d-flex              { display: flex; }
.d-none              { display: none !important; }
.d-block             { display: block; }
.flex-wrap           { flex-wrap: wrap; }
.flex-grow-1         { flex: 1; }
.align-items-center  { align-items: center; }
.align-items-start   { align-items: flex-start; }
.align-self-end      { align-self: flex-end; }
.justify-content-between { justify-content: space-between; }
.justify-content-center  { justify-content: center; }
.gap-1 { gap:.25rem; } .gap-2 { gap:.5rem; } .gap-3 { gap:1rem; }
.flex-column { flex-direction: column; }

.container       { max-width: 1200px; margin: 0 auto; padding: 0 1rem; box-sizing: border-box; }
.container-fluid { width: 100%; padding: 0 1rem; box-sizing: border-box; }

.row { display: flex; flex-wrap: wrap; margin: 0 -.5rem; }
.row.g-3 > * { padding: .5rem; }
.col-md-2 { width: 16.667%; padding: 0 .5rem; box-sizing: border-box; }
.col-md-3 { width: 25%;     padding: 0 .5rem; box-sizing: border-box; }
.col-md-5 { width: 41.667%; padding: 0 .5rem; box-sizing: border-box; }

.mb-0{margin-bottom:0}    .mb-1{margin-bottom:.25rem}  .mb-2{margin-bottom:.5rem}
.mb-3{margin-bottom:1rem} .mb-4{margin-bottom:1.5rem}
.mt-1{margin-top:.25rem}  .mt-2{margin-top:.5rem}      .mt-3{margin-top:1rem}
.mt-4{margin-top:1.5rem}  .mt-5{margin-top:3rem}       .me-2{margin-right:.5rem}
.p-3{padding:1rem} .p-5{padding:3rem}
.py-2{padding-top:.5rem;padding-bottom:.5rem}
.py-3{padding-top:1rem;padding-bottom:1rem}
.py-4{padding-top:1.5rem;padding-bottom:1.5rem}
.px-5{padding-left:3rem;padding-right:3rem}

.text-center   { text-align: center; }
.text-end      { text-align: right; }
.text-muted    { color: var(--text-3); }
.text-dark     { color: var(--text); }
.text-secondary{ color: var(--text-2); }
.text-primary  { color: var(--primary); }
.text-danger   { color: var(--danger); }
.fw-bold       { font-weight: 700; }
.small         { font-size: .82rem; }
.w-100         { width: 100%; }
.border        { border: 1px solid var(--border) !important; }
.opacity-75    { opacity: .75; }
.rounded-4     { border-radius: var(--r-lg); }
.shadow-sm     { box-shadow: var(--shadow-sm); }

.table-responsive { overflow-x: auto; }
.table  { width: 100%; border-collapse: collapse; }
.table-sm td, .table-sm th { padding: .3rem .6rem; }
.table-striped tbody tr:nth-child(even) { background: var(--table-stripe-bg); }
.align-middle td, .align-middle th { vertical-align: middle; }
.table-dark      th { background: var(--sidebar-bg); color: rgba(184,212,188,.88); }
.table-secondary th { background: var(--table-head-bg); color: var(--primary); }

details > summary { cursor: pointer; user-select: none; }
details > summary::-webkit-details-marker { display: none; }

/* ═══════════════════════════════════════════════════════════════
   DARK MODE — corrección de inline styles en templates
   ═══════════════════════════════════════════════════════════════ */
[data-theme="dark"] .info-section,
[data-theme="dark"] .services-section,
[data-theme="dark"] section {
  background-color: var(--bg) !important;
  color: var(--text) !important;
}

[data-theme="dark"] .hero-section.full-width {
  background:
    linear-gradient(to right, #050d06 0%, #050d06 25%, rgba(5,13,6,.6) 52%, rgba(5,13,6,.1) 80%),
    url('img/cerdo.jpg');
  background-size: cover; background-position: center;
}

[data-theme="dark"] .Ventajas-item,
[data-theme="dark"] [style*="background: white"],
[data-theme="dark"] [style*="background-color: white"],
[data-theme="dark"] [style*="background:#fff"],
[data-theme="dark"] [style*="background: #fff"] {
  background-color: var(--surface) !important;
  color: var(--text) !important;
}
[data-theme="dark"] [style*="background-color: #f9fbf9"],
[data-theme="dark"] [style*="background-color:#f9fbf9"] { background-color: var(--bg) !important; }
[data-theme="dark"] [style*="color: #555"],[data-theme="dark"] [style*="color:#555"],
[data-theme="dark"] [style*="color: #666"],[data-theme="dark"] [style*="color: #777"] { color: var(--text-2) !important; }
[data-theme="dark"] [style*="color: #333"] { color: var(--text) !important; }
[data-theme="dark"] [style*="background: #b3e5b0"] { background: #112018 !important; }
[data-theme="dark"] .service-card { background: var(--surface); border-color: var(--border); color: var(--text); }
[data-theme="dark"] dialog,
[data-theme="dark"] .modal { background: var(--surface); color: var(--text); border-color: var(--border); }
[data-theme="dark"] select option { background: var(--surface); color: var(--text); }

/* ═══════════════════════════════════════════════════════════════
   DARK MODE — clases de templates con colores hardcodeados
   ═══════════════════════════════════════════════════════════════ */

/* ── salud.html / corrales.html — badges de estado ── */
[data-theme="dark"] .badge-sano,
[data-theme="dark"] .health-ok {
  background: rgba(16,185,129,.15) !important;
  color: #34d399 !important;
  border-color: rgba(16,185,129,.3) !important;
}
[data-theme="dark"] .badge-enfermo,
[data-theme="dark"] .health-error {
  background: rgba(204,45,34,.15) !important;
  color: #f87171 !important;
  border-color: rgba(204,45,34,.3) !important;
}
[data-theme="dark"] .badge-cuarentena {
  background: rgba(99,102,241,.15) !important;
  color: #818cf8 !important;
}
[data-theme="dark"] .badge-tratamiento,
[data-theme="dark"] .health-warn {
  background: rgba(200,122,10,.15) !important;
  color: #fbbf24 !important;
  border-color: rgba(200,122,10,.3) !important;
}

/* ── salud.html — alertas-wrap ── */
[data-theme="dark"] .alertas-wrap.rojo {
  background: rgba(200,0,0,.1) !important;
  border-color: rgba(239,68,68,.35) !important;
}
[data-theme="dark"] .alertas-wrap.naranja {
  background: rgba(200,100,0,.1) !important;
  border-color: rgba(249,115,22,.35) !important;
}
[data-theme="dark"] .alertas-wrap.rojo .alertas-head {
  background: rgba(200,0,0,.2) !important;
  color: #f87171 !important;
}
[data-theme="dark"] .alertas-wrap.naranja .alertas-head {
  background: rgba(200,100,0,.2) !important;
  color: #fb923c !important;
}

/* ── salud.html — ftags ── */
[data-theme="dark"] .ftag-gen { background: rgba(99,102,241,.15) !important; color: #818cf8 !important; }
[data-theme="dark"] .ftag-eta { background: rgba(16,185,129,.12) !important; color: #34d399 !important; }
[data-theme="dark"] .ftag-rza { background: rgba(100,116,139,.15) !important; color: #94a3b8 !important; }
[data-theme="dark"] .ftag-cor { background: rgba(200,168,64,.12) !important; color: #fbbf24 !important; }

/* ── salud.html — indicador de peso ── */
[data-theme="dark"] .peso-ok   { background: rgba(16,185,129,.12) !important; color: #34d399 !important; border-color: #34d399 !important; }
[data-theme="dark"] .peso-bajo { background: rgba(245,158,11,.12) !important; color: #fbbf24 !important; border-color: #fbbf24 !important; }
[data-theme="dark"] .peso-sobre{ background: rgba(139,92,246,.12) !important; color: #a78bfa !important; border-color: #a78bfa !important; }

/* ── salud.html — botones de acción ── */
[data-theme="dark"] .btn-xs-red { background: rgba(204,45,34,.15) !important; color: #f87171 !important; }
[data-theme="dark"] .btn-xs-red:hover { background: rgba(204,45,34,.25) !important; }

/* ── alertas.html — filter chips activos ── */
[data-theme="dark"] .filter-chip.chip-vencida.active   { background: rgba(239,68,68,.12) !important; }
[data-theme="dark"] .filter-chip.chip-hoy.active       { background: rgba(245,158,11,.12) !important; }
[data-theme="dark"] .filter-chip.chip-semana.active    { background: rgba(139,92,246,.12) !important; }
[data-theme="dark"] .filter-chip.chip-completada.active{ background: rgba(16,185,129,.12) !important; }

/* ── alertas.html — botones acción ── */
[data-theme="dark"] .btn-skip { background: var(--surface-2) !important; color: var(--text-2) !important; }
[data-theme="dark"] .btn-skip:hover { background: var(--border) !important; }
[data-theme="dark"] .btn-del  { background: rgba(204,45,34,.15) !important; color: #f87171 !important; }
[data-theme="dark"] .btn-del:hover { background: rgba(204,45,34,.28) !important; }

/* ── alertas.html — rb badges de etapa ── */
[data-theme="dark"] .rb-lechon { background: rgba(236,72,153,.12) !important; color: #f472b6 !important; }
[data-theme="dark"] .rb-ambos  { background: rgba(100,116,139,.15) !important; color: #94a3b8 !important; }
[data-theme="dark"] .rb-des    { background: rgba(200,168,64,.12) !important;  color: #fbbf24 !important; }
[data-theme="dark"] .rb-tra    { background: rgba(204,45,34,.15) !important;   color: #f87171 !important; }

/* ── pigs.html — custom-card ── */
[data-theme="dark"] .custom-card { background: var(--surface) !important; border-color: var(--border) !important; }

/* ── finanzas.html — cabecera de tabla y badges ── */
[data-theme="dark"] .table-finanzas th {
  background: var(--table-head-bg) !important;
  color: var(--primary-light) !important;
  border-color: var(--border) !important;
}
[data-theme="dark"] .badge-gasto   { background: rgba(204,45,34,.15) !important; color: #f87171 !important; }
[data-theme="dark"] .badge-ingreso { background: rgba(16,185,129,.12) !important; color: #34d399 !important; }

/* ── alimentacion.html — badge-alimento y tarjeta-grupo ── */
[data-theme="dark"] .badge-alimento.preiniciador { background: rgba(200,168,64,.12) !important; color: #fbbf24 !important; }
[data-theme="dark"] .badge-alimento.iniciador    { background: rgba(14,165,233,.12) !important; color: #38bdf8 !important; }
[data-theme="dark"] .badge-alimento.crecimiento  { background: rgba(16,185,129,.12) !important; color: #34d399 !important; }
[data-theme="dark"] .badge-alimento.engorde      { background: rgba(59,130,246,.12) !important; color: #60a5fa !important; }
[data-theme="dark"] .badge-alimento.finalizador  { background: rgba(204,45,34,.12) !important;  color: #f87171 !important; }
[data-theme="dark"] .badge-alimento.gestacion    { background: rgba(139,92,246,.12) !important; color: #a78bfa !important; }
[data-theme="dark"] .badge-alimento.lactancia    { background: rgba(236,72,153,.12) !important; color: #f472b6 !important; }
[data-theme="dark"] .tarjeta-grupo { background: var(--surface-2) !important; color: var(--text) !important; }
[data-theme="dark"] .tarjeta-grupo .grupo-meta { color: var(--text-2) !important; }
[data-theme="dark"] .tarjeta-grupo .grupo-total small { color: var(--text-3) !important; }

/* ── proveedores.html — badge-estado ── */
[data-theme="dark"] .badge-estado.pendiente  { background: rgba(200,168,64,.12) !important; color: #fbbf24 !important; }
[data-theme="dark"] .badge-estado.cancelado  { background: rgba(204,45,34,.15) !important;  color: #f87171 !important; }
[data-theme="dark"] .badge-estado.completado,
[data-theme="dark"] .badge-estado.recibida   { background: rgba(16,185,129,.12) !important; color: #34d399 !important; }

/* ── corrales.html — icon-wrappers con estilos inline ── */
[data-theme="dark"] .icon-wrapper[style*="#e0f2fe"] { background: rgba(14,165,233,.15) !important; color: #38bdf8 !important; }
[data-theme="dark"] .icon-wrapper[style*="#dcfce7"] { background: rgba(16,185,129,.15) !important; color: #34d399 !important; }
[data-theme="dark"] .icon-wrapper[style*="#fef9c3"] { background: rgba(200,168,64,.15) !important;  color: #fbbf24 !important; }
[data-theme="dark"] .icon-wrapper[style*="#fee2e2"] { background: rgba(204,45,34,.15) !important;   color: #f87171 !important; }
[data-theme="dark"] .icon-wrapper[style*="#fef3c7"] { background: rgba(200,122,10,.15) !important;  color: #fbbf24 !important; }

/* ── advanced.html — stat cards y tabla ── */
[data-theme="dark"] .stat-card { background: var(--surface) !important; border-color: var(--border) !important; }
[data-theme="dark"] .adv-tbl tbody tr:hover { background: #182C1E !important; }
[data-theme="dark"] #adv-root { background: var(--bg) !important; color: var(--text) !important; }
[data-theme="dark"] .form-group input,
[data-theme="dark"] .form-group select { background: var(--input-bg) !important; color: var(--text) !important; border-color: var(--border) !important; }
[data-theme="dark"] .alert-item.danger  { background: rgba(204,45,34,.12) !important; }
[data-theme="dark"] .alert-item.warning { background: rgba(200,122,10,.1) !important; }

/* ── inventario.html — cabecera inline y stock row ── */
[data-theme="dark"] thead[style*="background: #f0f8f2"],
[data-theme="dark"] thead[style*="background:#f0f8f2"] {
  background: var(--table-head-bg) !important;
}
[data-theme="dark"] [style*="background:#fff9f0"],
[data-theme="dark"] [style*="background: #fff9f0"] { background: rgba(200,122,10,.08) !important; }

/* ═══════════════════════════════════════════════════════════════
   DARK MODE — partos.html
   ═══════════════════════════════════════════════════════════════ */
[data-theme="dark"] .table-partos { background: var(--surface) !important; }
[data-theme="dark"] .table-partos th {
  background: var(--sidebar-bg) !important;
  color: rgba(184,212,188,.85) !important;
  border-bottom-color: rgba(19,111,63,.35) !important;
}
[data-theme="dark"] .table-partos td { border-bottom-color: var(--table-border) !important; }
[data-theme="dark"] .destete-box { background: var(--surface-2) !important; }
[data-theme="dark"] .destete-box input {
  background: var(--input-bg) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}
[data-theme="dark"] .gpork-tabs { border-bottom-color: var(--border) !important; }
[data-theme="dark"] .gpork-tab { color: var(--primary-light) !important; }
[data-theme="dark"] .gpork-tab.active {
  background: var(--surface) !important;
  border-color: var(--border) !important;
}
[data-theme="dark"] .gpork-tab:hover:not(.active) { background: var(--surface-2) !important; }
[data-theme="dark"] .badge-pendiente  { background: rgba(200,122,10,.15) !important; color: #fbbf24 !important; }
[data-theme="dark"] .badge-confirmada { background: rgba(16,185,129,.12) !important; color: #34d399 !important; }
[data-theme="dark"] .badge-fallida    { background: rgba(204,45,34,.15) !important;  color: #f87171 !important; }
[data-theme="dark"] .alert-rojo    { background: rgba(231,76,60,.12) !important;  color: #f87171 !important; }
[data-theme="dark"] .alert-naranja { background: rgba(230,126,34,.12) !important; color: #fb923c !important; }
[data-theme="dark"] .alert-amarillo{ background: rgba(241,196,15,.10) !important; color: #fbbf24 !important; }
/* Filas con fondo inline generadas por JS */
[data-theme="dark"] tr[style*="background:#fff9f9"],
[data-theme="dark"] tr[style*="background:#fff3f3"] { background: rgba(204,45,34,.08) !important; }
/* Input de fecha estimada parto (readonly con fondo verde claro) */
[data-theme="dark"] input[style*="background:#f0f8f2"] {
  background: var(--input-bg) !important;
  color: var(--primary-light) !important;
}
/* Cabeceras de sección con fondo #f0f8f2 (divs, no thead) */
[data-theme="dark"] div[style*="background: #f0f8f2"],
[data-theme="dark"] div[style*="background:#f0f8f2"] {
  background: var(--sidebar-bg) !important;
  border-bottom-color: rgba(19,111,63,.3) !important;
}
/* Panel de alertas de parto */
[data-theme="dark"] .card[style*="background: #fff9f9"],
[data-theme="dark"] .card[style*="background:#fff9f9"] { background: rgba(204,45,34,.08) !important; }

/* ═══════════════════════════════════════════════════════════════
   DARK MODE — proveedores.html / órdenes de compra
   ═══════════════════════════════════════════════════════════════ */
/* Modal de nueva orden — background:white sin espacio, no capturado por la regla general */
[data-theme="dark"] #modalOrden > div {
  background: var(--surface) !important;
  color: var(--text) !important;
}
/* Formulario inline de proveedor */
[data-theme="dark"] #formProveedorContainer { background: var(--surface-2) !important; }
/* Chips de filtro de estado */
[data-theme="dark"] .filtro-estado {
  background: var(--surface) !important;
  border-color: var(--border) !important;
  color: var(--primary-light) !important;
}
[data-theme="dark"] .filtro-estado.activo,
[data-theme="dark"] .filtro-estado:hover { background: var(--primary) !important; color: white !important; }
/* Tarjetas de orden */
[data-theme="dark"] .orden-card { background: var(--surface) !important; border-color: var(--border) !important; }
/* Badges de estado (clases faltantes en las reglas existentes) */
[data-theme="dark"] .badge-estado.en_camino { background: rgba(14,165,233,.12) !important; color: #38bdf8 !important; }
[data-theme="dark"] .badge-estado.recibido  { background: rgba(16,185,129,.12) !important; color: #34d399 !important; }

/* ═══════════════════════════════════════════════════════════════
   SCROLLBAR
   ═══════════════════════════════════════════════════════════════ */
::-webkit-scrollbar       { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-hi); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--primary); }

header::-webkit-scrollbar       { width: 3px; }
header::-webkit-scrollbar-track { background: transparent; }
header::-webkit-scrollbar-thumb { background: rgba(19,111,63,.3); border-radius: 2px; }

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE — sidebar colapsa a top-nav en móvil
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 960px) {
  :root { --sidebar-w: 0px; }

  body { padding-left: 0; }

  /* Topbar fija con logo + hamburguesa; el nav se abre como panel (drawer) */
  header {
    position: sticky;
    top: 0;
    width: 100%;
    height: auto;
    flex-direction: column;
    padding: 0;
    overflow: visible;
    border-right: none;
    border-bottom: 1px solid var(--sidebar-border);
  }

  header::before { height: 2px; bottom: auto; }
  header::after  { display: none; }

  .sidebar-topbar {
    border-bottom: none;
    align-items: center;
    padding: 6px 14px;
  }

  header h1 {
    border-bottom: none;
    padding: 8px 0;
    font-size: 1rem;
    flex: 1;
  }
  header h1::after { display: none; }

  .mobile-menu-btn { display: flex !important; }
  .nav-search { margin: 8px 14px; }

  nav {
    display: none;
    flex-direction: column;
    padding: 4px 0 10px;
    overflow-y: auto;
    max-height: calc(100vh - 60px);
    flex: initial;
    border-top: 1px solid var(--sidebar-border);
    animation: drawerDown .22s ease both;
  }
  html.mobile-open nav { display: flex; }
  html.mobile-open header { box-shadow: var(--shadow-lg); }

  @keyframes drawerDown {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  nav a { padding: 10px 14px; font-size: .88rem; }

  .nav-user { margin-top: 8px; }

  .theme-toggle-btn {
    border-top: none;
    padding: 10px 22px;
    margin-top: 4px;
    width: 100%;
  }

  .sidebar-collapse-btn,
  .sidebar-expand-btn { display: none !important; }

  main { padding: 1.2rem 1rem 2.5rem; }

  .col-md-2, .col-md-3, .col-md-5 { width: 100%; }
  .align-self-end { align-self: auto; }
  .hero-text-full h1 { font-size: 2.1rem; }
  .hero-container-centered { padding: 52px 28px; align-items: center; text-align: center; }
  .hero-text-full::before { text-align: center; }
  .hero-buttons { justify-content: center; }
  .page-header h1 { font-size: 1.2rem; }
  .kpi-grid-gpork { grid-template-columns: 1fr 1fr; }
  .grid-3 { grid-template-columns: 1fr; }
  .Ventajas-container { flex-direction: column; }
}

/* ═══════════════════════════════════════════════════════════════
   V4 — COMPONENTES NUEVOS (UX moderna, aditivos y retrocompatibles)
   ═══════════════════════════════════════════════════════════════ */

/* ── Botón hamburguesa (solo móvil) ── */
.mobile-menu-btn {
  display: none;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid var(--sidebar-border);
  border-radius: 9px;
  color: var(--sidebar-btn-color);
  font-size: 1.15rem;
  line-height: 1;
  padding: 7px 12px;
  cursor: pointer;
  transition: color .2s, background .2s;
}
.mobile-menu-btn:hover { color: var(--sidebar-btn-hover); background: var(--sidebar-hover-btn-bg); }

/* ── Buscador de módulos en el sidebar ── */
.nav-search {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 12px 10px 2px;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid var(--sidebar-border);
  background: var(--sidebar-hover-bg);
  color: var(--sidebar-text);
  font-family: 'DM Sans', sans-serif;
  font-size: .76rem;
  cursor: pointer;
  transition: border-color var(--t-fast), color var(--t-fast), background var(--t-fast);
  flex-shrink: 0;
}
.nav-search:hover { border-color: var(--primary); color: var(--sidebar-text-hi); }
.nav-search-ico { font-size: .95rem; opacity: .7; }
.nav-search-txt { flex: 1; text-align: left; }
.nav-search kbd {
  font-family: 'DM Sans', sans-serif;
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .4px;
  padding: 2px 6px;
  border-radius: 5px;
  border: 1px solid var(--sidebar-border);
  color: var(--sidebar-label-color);
  background: var(--surface);
}

/* ── Badge contador en el nav (alertas) ── */
.nav-badge {
  background: #ef4444;
  color: #fff;
  border-radius: 999px;
  padding: 1px 7px;
  font-size: .66rem;
  font-weight: 800;
  margin-left: auto;
  box-shadow: 0 0 0 2px rgba(239,68,68,.18);
  animation: badgePulse 2.4s ease infinite;
}
@keyframes badgePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,.35); }
  50%      { box-shadow: 0 0 0 5px rgba(239,68,68,0); }
}

/* ── Toasts (reemplazo visual de alert) ── */
.toast-stack {
  position: fixed;
  bottom: 22px;
  right: 22px;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: min(400px, calc(100vw - 44px));
  pointer-events: none;
}
.toast {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 13px 14px;
  border-radius: 13px;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  font-size: .86rem;
  color: var(--text);
  pointer-events: auto;
  animation: toastIn .28s cubic-bezier(.21,1.02,.73,1) both;
  position: relative;
  overflow: hidden;
}
.toast::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
}
.toast-success::before { background: var(--success); }
.toast-danger::before  { background: var(--danger); }
.toast-warning::before { background: var(--warning); }
.toast-info::before    { background: var(--info); }

.toast-ico {
  width: 22px; height: 22px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .72rem;
  font-weight: 800;
  flex-shrink: 0;
  color: #fff;
  margin-top: 1px;
}
.toast-success .toast-ico { background: var(--success); }
.toast-danger  .toast-ico { background: var(--danger); }
.toast-warning .toast-ico { background: var(--warning); }
.toast-info    .toast-ico { background: var(--info); }

.toast-msg { flex: 1; line-height: 1.45; white-space: pre-line; word-break: break-word; }
.toast-x {
  background: none; border: none;
  color: var(--text-3);
  font-size: 1.05rem; line-height: 1;
  cursor: pointer;
  padding: 0 2px;
  flex-shrink: 0;
  transition: color var(--t-fast);
}
.toast-x:hover { color: var(--text); }

@keyframes toastIn {
  from { opacity: 0; transform: translateX(40px) scale(.96); }
  to   { opacity: 1; transform: translateX(0) scale(1); }
}
.toast-out { animation: toastOut .24s ease both; }
@keyframes toastOut {
  to { opacity: 0; transform: translateX(40px) scale(.96); }
}

/* ── Paleta de comandos (Ctrl+K) ── */
.cmdk-overlay[hidden] { display: none !important; }
.cmdk-overlay {
  position: fixed;
  inset: 0;
  z-index: 1900;
  background: rgba(8, 18, 10, .45);
  backdrop-filter: blur(5px);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 16vh 18px 0;
  animation: fadeInUp .18s ease both;
}
.cmdk {
  width: 100%;
  max-width: 480px;
  background: var(--surface);
  border: 1px solid var(--border-hi);
  border-radius: 16px;
  box-shadow: var(--shadow-lg), 0 0 0 4px rgba(19,111,63,.08);
  overflow: hidden;
}
.cmdk-input-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}
.cmdk-ico { font-size: 1.05rem; color: var(--text-3); }
.cmdk-input-row input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  color: var(--text);
  font-family: 'DM Sans', sans-serif;
  font-size: .95rem;
}
.cmdk-input-row input::placeholder { color: var(--text-3); }
.cmdk-input-row kbd {
  font-size: .6rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 5px;
  border: 1px solid var(--border);
  color: var(--text-3);
  background: var(--surface-2);
  font-family: 'DM Sans', sans-serif;
}
.cmdk-list { max-height: 320px; overflow-y: auto; padding: 7px; }
.cmdk-item {
  padding: 9px 13px;
  border-radius: 9px;
  font-size: .88rem;
  color: var(--text-2);
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast);
}
.cmdk-item.active {
  background: var(--primary-xlight);
  color: var(--text);
  font-weight: 600;
}
.cmdk-item.active::after { content: '↵'; float: right; color: var(--text-3); font-size: .8rem; }
.cmdk-empty { padding: 22px; text-align: center; color: var(--text-3); font-size: .85rem; }

/* ── Micro-interacciones globales ── */
.btn:active, .btn-pro:active, .header-btn:active { transform: scale(.97); }

:focus-visible {
  outline: 2px solid var(--primary-light);
  outline-offset: 2px;
  border-radius: 4px;
}
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; }

::selection { background: rgba(19,111,63,.22); }

/* Cabeceras de tabla pegajosas dentro de contenedores con scroll vertical */
.table-wrapper thead th { position: sticky; top: 0; z-index: 2; }

/* Tablas: fila clicable más obvia */
tbody tr[onclick] { cursor: pointer; }

/* ═══════════════════════════════════════════════════════════════
   V5 — DASHBOARD KIT (compartido por todos los paneles analíticos)
   ═══════════════════════════════════════════════════════════════ */

/* ── Etiqueta de sección con tick dorado ── */
.sec-label {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: .64rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--text-2);
  margin: 4px 0 10px;
}
.sec-label::before {
  content: '';
  width: 20px;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--gold), var(--primary));
  flex-shrink: 0;
}
.sec-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--border), transparent);
}

/* ── Entrada escalonada para grids de KPIs/paneles ── */
@keyframes dkRise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.reveal-grid > * { animation: dkRise .45s cubic-bezier(.22,.8,.36,1) both; }
.reveal-grid > *:nth-child(1) { animation-delay: .03s; }
.reveal-grid > *:nth-child(2) { animation-delay: .08s; }
.reveal-grid > *:nth-child(3) { animation-delay: .13s; }
.reveal-grid > *:nth-child(4) { animation-delay: .18s; }
.reveal-grid > *:nth-child(5) { animation-delay: .23s; }
.reveal-grid > *:nth-child(6) { animation-delay: .28s; }
.reveal-grid > *:nth-child(7) { animation-delay: .33s; }
.reveal-grid > *:nth-child(8) { animation-delay: .38s; }

/* ── KPI unificada: tarjeta de superficie con acento --kc ──
   Reemplaza los degradados saturados; el color del módulo se
   define con la variable --kc (y opcional --kc-soft de fondo). */
.kpi-ink {
  --kc: var(--primary);
  position: relative;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  box-shadow: var(--shadow-sm);
  transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base);
}
.kpi-ink { background: var(--surface); }
@supports (background: color-mix(in srgb, red 10%, transparent)) {
  .kpi-ink {
    background:
      radial-gradient(150px 95px at 100% 0%, color-mix(in srgb, var(--kc) 12%, transparent), transparent 72%),
      var(--surface);
  }
}
.kpi-ink::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--kc);
  opacity: .9;
}
.kpi-ink:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--border-hi);
}
.kpi-ink .lbl {
  font-size: .63rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-2);
}
.kpi-ink .val {
  font-family: 'Syne', sans-serif;
  font-size: 1.45rem;
  font-weight: 800;
  letter-spacing: -.5px;
  line-height: 1.15;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kpi-ink .val.tinted { color: var(--kc); }
.kpi-ink .sub { font-size: .68rem; color: var(--text-3); }

/* ── Control segmentado (sustituye tabs subrayadas) ── */
.seg-tabs {
  display: inline-flex;
  gap: 4px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  padding: 4px;
  margin-bottom: 20px;
}
.seg-tab {
  border: none;
  background: none;
  padding: 8px 20px;
  border-radius: var(--r-full);
  font-family: 'DM Sans', sans-serif;
  font-size: .84rem;
  font-weight: 700;
  color: var(--text-2);
  cursor: pointer;
  transition: all var(--t-fast);
  white-space: nowrap;
}
.seg-tab:hover:not(.active) { color: var(--text); background: var(--surface); }
.seg-tab.active {
  background: var(--primary);
  color: #fff;
  box-shadow: 0 2px 8px rgba(19,111,63,.35);
}

/* ── Panel de gráfica/lista con cabecera ── */
.dk-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.dk-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 13px 18px;
  border-bottom: 1px solid var(--border);
}
.dk-panel-title {
  font-family: 'Syne', sans-serif;
  font-size: .92rem;
  font-weight: 800;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 8px;
}
.dk-panel-body { padding: 16px 18px; }

/* ── Barra de herramientas de filtros ── */
.dk-toolbar {
  display: flex;
  gap: 12px;
  align-items: flex-end;
  flex-wrap: wrap;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 13px 16px;
  margin-bottom: 16px;
  box-shadow: var(--shadow-sm);
}

/* ── Accesibilidad: respeta usuarios con movimiento reducido ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ── Controles interactivos no seleccionables ──
   La app de escritorio tiene la selección de texto habilitada (text_select=True
   en run_desktop.py); sin esto, arrastrar el mouse sobre botones, el menú
   lateral o las insignias selecciona sus rótulos. El contenido real (tablas,
   párrafos, inputs, burbujas del chat) sigue siendo seleccionable. */
button,
input[type="button"], input[type="submit"], input[type="reset"], input[type="checkbox"],
header, .sidebar-expand-btn,
.btn, .btn-pro, .btn-primary, .btn-secondary, .btn-success, .btn-gray, .btn-main,
.btn-auth, .btn-register-page,
.badge, .nav-badge,
details > summary {
  user-select: none;
  -webkit-user-select: none;
}
/* Etiquetas que envuelven un control (checkbox "entiendo", subir archivo).
   En regla aparte: si el navegador no soporta :has(), solo se pierde esta. */
label:has(> input[type="checkbox"]), label:has(> input[type="file"]) {
  user-select: none;
  -webkit-user-select: none;
}