/*
  GPork — Sistema de Gestión Porcícola
  Sistema de diseño v4 · «Tierra cálida»
  ─────────────────────────────────────────────────────────────────────
  Color   : teja (acción y marca) · oliva (lo bueno) · maíz (atención,
            aretes) · carmín (peligro) · añil (información) sobre cal y
            tierra. En oscuro, «noche de campo»: cafés profundos, no negro.
  Letra   : Archivo (variable de ancho y peso, alojada en static/fonts):
            títulos anchos, texto normal, cabeceras de tabla angostas,
            cifras tabulares.
  Íconos  : Tabler Icons en static/icons/gpork.svg → {{ icon('pig') }} en
            Jinja e ico('pig') en JS (base.html).
  Firma   : el arete (logo y chip .arete de los códigos de animal).
  Reglas  : el color siempre significa algo; nada de degradados de adorno
            ni rótulos en mayúsculas; las tablas y las cifras mandan.
  ─────────────────────────────────────────────────────────────────────
  Los nombres de clase viejos se conservan (las plantillas los usan) y los
  tokens antiguos (--card-bg, --text-muted-color…) siguen como alias.
*/

/* ═══════════════════════════════════════════════════════════════
   TIPOGRAFÍA (alojada en el propio servidor: no depende de terceros)
   ═══════════════════════════════════════════════════════════════ */
@font-face {
  font-family: 'Archivo';
  src: url('../fonts/archivo-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo';
  src: url('../fonts/archivo-latin-ext.woff2') format('woff2');
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ═══════════════════════════════════════════════════════════════
   TOKENS — MODO CLARO
   ═══════════════════════════════════════════════════════════════ */
:root {
  color-scheme: light;

  --font: 'Archivo', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --ancho-titulo: 116%;   /* font-stretch de títulos (rotulación ancha) */
  --ancho-angosto: 90%;   /* cabeceras de tabla y datos densos */

  /* Marca: teja */
  --primary:         #A9461F;
  --primary-hover:   #8F3A19;
  --primary-press:   #7A3115;
  --primary-soft:    #F6E6DC;
  --primary-line:    #E8C3AE;
  --primary-strong:  #7E3315;
  --on-primary:      #FFFFFF;

  /* Maíz: atención y aretes */
  --accent:          #D99A2B;
  --accent-soft:     #FBF0D9;
  --arete-bg:        #F1C232;
  --arete-ink:       #3B2A0A;

  /* Semánticos (base · fondo suave · borde suave · texto sobre suave) */
  --success:        #56662A;  --success-soft: #ECEFDA;  --success-line: #CDD5A9;  --success-strong: #3F4B1C;
  --warning:        #A86A10;  --warning-soft: #FBF0D9;  --warning-line: #EDD29A;  --warning-strong: #7A4F06;
  --danger:         #A8243B;  --danger-soft:  #F8E4E6;  --danger-line:  #EDBCC3;  --danger-strong:  #861B2E;
  --info:           #3D5E7A;  --info-soft:    #E3EBF2;  --info-line:    #BFD0DF;  --info-strong:    #2B4660;

  /* Acentos para series y categorías (gráficas, etapas) */
  --acc-rose:   #B5577A;  /* rosa cerdo: lechones */
  --acc-teal:   #2F7068;
  --acc-violet: #7A5372;  /* ciruela */
  --acc-blue:   #3D5E7A;
  --acc-rose-soft: #F6E3EA;  --acc-teal-soft: #DFEEEB;  --acc-violet-soft: #F0E6EE;

  /* Superficies */
  --bg:             #F7F5F0;  /* cal */
  --surface:        #FFFFFF;
  --surface-2:      #F2EEE6;  /* arena */
  --surface-3:      #E9E3D7;
  --border:         #E3DCCF;
  --border-strong:  #CFC5B4;

  /* Texto */
  --text:    #2A2018;  /* tierra */
  --text-2:  #5C5044;
  --text-3:  #75685A;

  --focus: #D99A2B;
  --link:  #A9461F;

  /* Barra lateral: tierra oscura en ambos temas */
  --sidebar-w:          248px;
  --sidebar-bg:         #2A211A;
  --sidebar-bg-2:       #33291F;
  --sidebar-border:     rgba(255, 238, 220, .09);
  --sidebar-text:       #CDBFAE;
  --sidebar-text-hi:    #F5EEE4;
  --sidebar-label:      #9C8D7B;
  --sidebar-hover-bg:   rgba(255, 238, 220, .06);
  --sidebar-active-bg:  rgba(255, 238, 220, .10);
  --sidebar-active-bar: #E58A5F;
  --marca-arete:        #C55A2D;
  --marca-hocico:       #F6E9DC;

  /* Sombras: solo para lo que flota (menús, modales, avisos) */
  --shadow-sm: 0 1px 2px rgba(42, 32, 24, .06);
  --shadow-md: 0 4px 14px rgba(42, 32, 24, .10);
  --shadow-lg: 0 16px 40px rgba(42, 32, 24, .18), 0 2px 8px rgba(42, 32, 24, .08);

  /* Radios: jerarquía, no uno para todo */
  --r-xs: 4px;  --r-sm: 6px;  --r-md: 8px;  --r-lg: 12px;  --r-xl: 16px;  --r-full: 9999px;

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

  /* Tablas */
  --table-head-bg:   #F2EEE6;
  --table-stripe-bg: #FAF8F4;
  --table-border:    #ECE6DB;
  --table-hover:     #FBF5EE;

  /* ── Alias de compatibilidad (las plantillas los usan) ── */
  --primary-dark:    var(--primary-hover);
  --primary-light:   var(--primary);
  --primary-xlight:  var(--primary-soft);
  --gold:            var(--accent);
  --gold-dim:        var(--warning);
  --gold-bg:         var(--accent-soft);
  --danger-bg:       var(--danger-soft);
  --warning-bg:      var(--warning-soft);
  --success-bg:      var(--success-soft);
  --info-bg:         var(--info-soft);
  --border-hi:       var(--border-strong);
  --card-bg:         var(--surface);
  --bg-alt:          var(--surface-2);
  --input-bg:        var(--surface);
  --white:           var(--surface);
  --bg-white-alt:    var(--surface);
  --text-main:       var(--text);
  --text-muted-color: var(--text-3);
  --text-label:      var(--text-2);
  --border-color:    var(--border);
  --text-primary:    var(--text);
  --text-secondary:  var(--text-2);
  --bg-subtle:       var(--surface-2);
  --accent-warm:     var(--accent);
  --accent-warm-lt:  var(--accent-soft);
  --shadow-color:    rgba(42, 32, 24, .08);
  --footer-color:    var(--text-3);
  --footer-border:   var(--border);
  --ventajas-bg:     var(--surface);
  --ventajas-border: var(--border);
  --auth-bg:         var(--surface);
  --auth-shadow:     rgba(42, 32, 24, .14);
  --badge-light-bg:  var(--surface-2);
  --badge-light-color: var(--text-2);
  --alert-warning-bg:     var(--warning-soft);
  --alert-warning-border: var(--warning-line);
  --alert-warning-color:  var(--warning-strong);
  --alert-light-bg:  var(--surface-2);
  --kpi-icon-bg:     var(--primary-soft);
  --hero-overlay-start: var(--surface-2);
  --sidebar-active-line: var(--sidebar-active-bar);
  --sidebar-active-text: var(--sidebar-text-hi);
  --sidebar-label-color: var(--sidebar-label);
  --sidebar-btn-color:   var(--sidebar-text);
  --sidebar-btn-hover:   var(--sidebar-text-hi);
  --sidebar-hover-btn-bg: var(--sidebar-hover-bg);
  --sidebar-footer-color: var(--sidebar-label);
}

/* ═══════════════════════════════════════════════════════════════
   TOKENS — MODO OSCURO («noche de campo»)
   ═══════════════════════════════════════════════════════════════ */
[data-theme="dark"] {
  color-scheme: dark;

  --primary:         #B9532A;
  --primary-hover:   #CC6335;
  --primary-press:   #A4461F;
  --primary-soft:    rgba(238, 147, 106, .14);
  --primary-line:    rgba(238, 147, 106, .32);
  --primary-strong:  #EE936A;
  --on-primary:      #FFFFFF;

  --accent:          #E8B44E;
  --accent-soft:     rgba(232, 180, 78, .13);
  --arete-bg:        #E9B92C;
  --arete-ink:       #3B2A0A;

  --success: #A9BD62;  --success-soft: rgba(169, 189, 98, .13);  --success-line: rgba(169, 189, 98, .32);  --success-strong: #BDD075;
  --warning: #E8B44E;  --warning-soft: rgba(232, 180, 78, .13);  --warning-line: rgba(232, 180, 78, .32);  --warning-strong: #F0C66E;
  --danger:  #F07A8C;  --danger-soft:  rgba(240, 122, 140, .13); --danger-line:  rgba(240, 122, 140, .32); --danger-strong:  #F59AA8;
  --info:    #93B8DA;  --info-soft:    rgba(147, 184, 218, .13); --info-line:    rgba(147, 184, 218, .32); --info-strong:    #AECBE6;

  --acc-rose:   #E59AB6;
  --acc-teal:   #7CC0B6;
  --acc-violet: #C49BBE;
  --acc-blue:   #93B8DA;
  --acc-rose-soft: rgba(229, 154, 182, .13);  --acc-teal-soft: rgba(124, 192, 182, .13);  --acc-violet-soft: rgba(196, 155, 190, .13);

  --bg:            #1A1511;
  --surface:       #231D18;
  --surface-2:     #2B241E;
  --surface-3:     #342C24;
  --border:        #3A3129;
  --border-strong: #4D4237;

  --text:   #EFE7DC;
  --text-2: #C2B5A4;
  --text-3: #9A8C7B;

  --focus: #E8B44E;
  --link:  #EE936A;

  --sidebar-bg:         #14100D;
  --sidebar-bg-2:       #1D1713;
  --sidebar-border:     rgba(255, 238, 220, .07);
  --marca-arete:        #CC6335;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .35);
  --shadow-md: 0 6px 18px rgba(0, 0, 0, .40);
  --shadow-lg: 0 18px 48px rgba(0, 0, 0, .55), 0 2px 8px rgba(0, 0, 0, .35);

  --table-head-bg:   #2B241E;
  --table-stripe-bg: #201A16;
  --table-border:    #332B24;
  --table-hover:     #2A221C;

  --input-bg:        #1E1915;
  --shadow-color:    rgba(0, 0, 0, .45);
  --auth-shadow:     rgba(0, 0, 0, .55);
}

/* ═══════════════════════════════════════════════════════════════
   BASE
   ═══════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.55;
  padding-left: var(--sidebar-w);
  min-height: 100vh;
  transition: padding-left .3s cubic-bezier(.4, 0, .2, 1);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "kern" 1;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font);
  font-stretch: var(--ancho-titulo);
  font-weight: 750;
  line-height: 1.18;
  letter-spacing: -.012em;
  color: var(--text);
}
h1 { font-size: 1.85rem; font-weight: 800; }
h2 { font-size: 1.45rem; }
h3 { font-size: 1.17rem; }
h4 { font-size: 1.02rem; }
h5 { font-size: .94rem; font-stretch: 105%; }
h6 { font-size: .86rem; font-stretch: 100%; }

/* En títulos del contenido, el ícono lleva el color de marca y el texto no */
main :is(h2, h3, h4, h5) > .ico { color: var(--primary); }

p { max-width: 78ch; }
td p, .card p, .modal p, dialog p { max-width: none; }

a { color: var(--link); text-underline-offset: .18em; }
a:hover { color: var(--link); text-decoration-thickness: 2px; }

strong, b { font-weight: 650; }
small { font-size: .82em; }

code, kbd, samp {
  font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace;
  font-size: .86em;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-xs);
  padding: .05em .35em;
}
hr { border: none; border-top: 1px solid var(--border); margin: 1.25rem 0; }

input, select, textarea, button { font-family: inherit; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--primary); }

::selection { background: rgba(217, 154, 43, .32); }

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

/* Cifras alineadas en todo lo que se compara en columna */
table, .val, .kpi-value, .stats-value, .num, .arete, [class*="kpi"] .v { font-variant-numeric: tabular-nums; }

::-webkit-scrollbar       { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: 10px;
  border: 3px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background-color: var(--text-3); }

/* ═══════════════════════════════════════════════════════════════
   ÍCONOS Y MARCA
   ═══════════════════════════════════════════════════════════════ */
.ico {
  width: 1.15em;
  height: 1.15em;
  flex-shrink: 0;
  vertical-align: -.2em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  overflow: visible;
}
.ico-sm { width: 1em; height: 1em; vertical-align: -.14em; }
.ico-lg { width: 1.45em; height: 1.45em; vertical-align: -.32em; }
.ico-xl { width: 2.2em; height: 2.2em; stroke-width: 1.5; }
.ico-spin { animation: girar 1s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }

/* Puntos de estado (antes 🔴🟡🟢) */
.punto { display: inline-block; width: .62em; height: .62em; border-radius: 50%; background: currentColor; vertical-align: .05em; flex-shrink: 0; }

/* Tonos de texto para íconos y cifras */
.tono-primario { color: var(--primary); }
.tono-exito    { color: var(--success); }
.tono-alerta   { color: var(--warning); }
.tono-peligro  { color: var(--danger); }
.tono-info     { color: var(--info); }
.tono-suave    { color: var(--text-3); }

.marca { width: 2rem; height: 2rem; flex-shrink: 0; display: block; }
.marca .marca-arete  { fill: var(--marca-arete); }
.marca .marca-hocico { fill: var(--marca-hocico); }
.marca-lg { width: 3.25rem; height: 3.25rem; }
.marca-texto {
  font-stretch: 125%;
  font-weight: 800;
  letter-spacing: -.01em;
  line-height: 1;
}

/* Arete: código de un animal con forma de chapa amarilla */
.arete {
  display: inline-flex;
  align-items: center;
  gap: .42em;
  padding: .12em .6em .12em .45em;
  border-radius: var(--r-xs) var(--r-sm) var(--r-sm) var(--r-xs);
  background: var(--arete-bg);
  color: var(--arete-ink);
  font-size: .86em;
  font-weight: 650;
  font-stretch: var(--ancho-angosto);
  letter-spacing: .01em;
  line-height: 1.45;
  white-space: nowrap;
  box-shadow: inset 0 -1px 0 rgba(59, 42, 10, .18);
}
.arete::before {
  content: '';
  width: .42em;
  height: .42em;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: inset 0 0 0 1.5px rgba(59, 42, 10, .45);
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════
   BARRA LATERAL (el <header> de base.html)
   ═══════════════════════════════════════════════════════════════ */
header {
  position: fixed;
  top: 0; left: 0;
  width: var(--sidebar-w);
  height: 100vh;
  background: var(--sidebar-bg);
  color: var(--sidebar-text);
  display: flex;
  flex-direction: column;
  z-index: 500;
  overflow-y: auto;
  overflow-x: hidden;
  border-right: 1px solid var(--sidebar-border);
  transition: transform .3s cubic-bezier(.4, 0, .2, 1);
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 238, 220, .16) transparent;
}
header::-webkit-scrollbar-thumb { background-color: rgba(255, 238, 220, .16); }

@media (min-width: 961px) {
  html.nav-collapsed body { padding-left: 0 !important; }
  html.nav-collapsed header { transform: translateX(calc(-1 * var(--sidebar-w))) !important; }
  html.nav-collapsed .sidebar-expand-btn { display: flex !important; }
}

.sidebar-topbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 18px 14px 14px 18px;
  flex-shrink: 0;
}

/* Logo + nombre */
header h1, .sidebar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
  margin: 0;
  color: var(--sidebar-text-hi);
  font-size: 1.2rem;
  text-decoration: none;
}
header h1 .marca { width: 30px; height: 30px; }

.sidebar-icon-btn, .sidebar-collapse-btn, .mobile-menu-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  border-radius: var(--r-md);
  border: 1px solid transparent;
  background: none;
  color: var(--sidebar-label);
  cursor: pointer;
  flex-shrink: 0;
  transition: color var(--t-fast), background var(--t-fast);
}
.sidebar-icon-btn:hover, .sidebar-collapse-btn:hover, .mobile-menu-btn:hover {
  color: var(--sidebar-text-hi);
  background: var(--sidebar-hover-bg);
}
.sidebar-collapse-btn .ico, .mobile-menu-btn .ico { width: 20px; height: 20px; }
.mobile-menu-btn { display: none; }

/* Buscador de módulos (Ctrl K) */
.nav-search {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 2px 14px 10px;
  padding: 8px 10px;
  border-radius: var(--r-md);
  border: 1px solid var(--sidebar-border);
  background: var(--sidebar-bg-2);
  color: var(--sidebar-label);
  font-size: .84rem;
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color var(--t-fast), color var(--t-fast);
}
.nav-search:hover { color: var(--sidebar-text-hi); border-color: rgba(255, 238, 220, .2); }
.nav-search-ico { display: inline-flex; }
.nav-search-txt { flex: 1; text-align: left; }
.nav-search kbd {
  font-family: var(--font);
  font-size: .68rem;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: var(--r-xs);
  border: 1px solid var(--sidebar-border);
  background: transparent;
  color: var(--sidebar-label);
}

/* Selector de granja activa */
.granja-picker { padding: 0 14px 10px; flex-shrink: 0; }
.granja-picker label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .74rem;
  color: var(--sidebar-label);
  margin-bottom: 5px;
}
.granja-picker select {
  width: 100%;
  padding: 7px 10px;
  border-radius: var(--r-md);
  font-size: .84rem;
  border: 1px solid var(--sidebar-border);
  background: var(--sidebar-bg-2);
  color: var(--sidebar-text-hi);
  cursor: pointer;
}
.granja-picker select:disabled { opacity: .7; cursor: not-allowed; }
.granja-picker select option { background: var(--sidebar-bg); color: var(--sidebar-text-hi); }

nav {
  display: flex;
  flex-direction: column;
  padding: 4px 0 0;
  flex: 1;
}

/* Grupos del menú (Producción, Operación…) en tipo de oración */
nav span.nav-sec {
  display: block;
  padding: 16px 22px 6px;
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--sidebar-label);
  flex-shrink: 0;
}

nav a {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 1px 10px;
  padding: 8px 12px;
  border-radius: var(--r-md);
  color: var(--sidebar-text);
  text-decoration: none;
  font-size: .9rem;
  font-weight: 500;
  white-space: nowrap;
  flex-shrink: 0;
  position: relative;
  transition: color var(--t-fast), background var(--t-fast);
}
nav a .ico { width: 18px; height: 18px; color: var(--sidebar-label); transition: color var(--t-fast); }
nav a:hover { color: var(--sidebar-text-hi); background: var(--sidebar-hover-bg); }
nav a:hover .ico { color: var(--sidebar-text-hi); }

nav a.nav-active {
  color: var(--sidebar-text-hi);
  background: var(--sidebar-active-bg);
  font-weight: 600;
}
nav a.nav-active .ico { color: var(--sidebar-active-bar); }
nav a.nav-active::before {
  content: '';
  position: absolute;
  left: -10px; top: 8px; bottom: 8px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--sidebar-active-bar);
}

/* Insignia de alertas pendientes */
.nav-badge {
  margin-left: auto;
  min-width: 20px;
  padding: 0 6px;
  border-radius: var(--r-full);
  background: var(--danger);
  color: #fff;
  font-size: .72rem;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
[data-theme="dark"] .nav-badge { background: #C23A50; }

/* Tarjeta del usuario al pie */
.nav-user {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 14px 10px 6px;
  padding: 10px;
  border-radius: var(--r-lg);
  background: var(--sidebar-bg-2);
  border: 1px solid var(--sidebar-border);
  flex-shrink: 0;
}
.nav-avatar {
  width: 34px; height: 34px;
  border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center;
  font-weight: 750;
  font-stretch: 110%;
  font-size: .95rem;
  color: var(--arete-ink);
  background: var(--arete-bg);
  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: .86rem;
  font-weight: 600;
  color: var(--sidebar-text-hi);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nav-user-rol { font-size: .74rem; color: var(--sidebar-label); }
.nav-user-rol.is-admin { color: #E8B44E; }
nav a.nav-logout {
  margin: 0;
  padding: 0;
  width: 32px; height: 32px;
  justify-content: center;
  border-radius: var(--r-md);
  color: var(--sidebar-label);
}
nav a.nav-logout:hover { color: #F59AA8; background: rgba(240, 122, 140, .12); }
nav a.nav-logout .ico { color: inherit; }

/* Cambio de tema */
.theme-toggle-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 2px 10px 12px;
  padding: 8px 12px;
  border: none;
  border-radius: var(--r-md);
  background: none;
  color: var(--sidebar-label);
  font-size: .84rem;
  cursor: pointer;
  text-align: left;
  flex-shrink: 0;
  transition: color var(--t-fast), background var(--t-fast);
}
.theme-toggle-btn:hover { color: var(--sidebar-text-hi); background: var(--sidebar-hover-bg); }
.theme-toggle-btn .ico { width: 18px; height: 18px; }
.theme-toggle-btn .tt-oscuro, [data-theme="dark"] .theme-toggle-btn .tt-claro { display: none; }
[data-theme="dark"] .theme-toggle-btn .tt-oscuro { display: inline; }

/* Botón flotante para volver a abrir el menú colapsado */
.sidebar-expand-btn {
  position: fixed;
  top: 14px; left: 14px;
  z-index: 600;
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  background: var(--sidebar-bg);
  color: var(--sidebar-text-hi);
  border: 1px solid var(--sidebar-border);
  border-radius: var(--r-md);
  cursor: pointer;
  box-shadow: var(--shadow-md);
}
.sidebar-expand-btn:hover { background: var(--sidebar-bg-2); }
.sidebar-expand-btn .ico { width: 20px; height: 20px; }

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

footer {
  padding: 1rem 2.5rem;
  color: var(--text-3);
  font-size: .8rem;
  border-top: 1px solid var(--border);
  text-align: center;
}

/* Cabecera de página: título, descripción y acciones */
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 14px 20px;
  padding: 0 0 18px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--border);
  position: relative;
}
.page-header h1 {
  display: flex;
  align-items: center;
  gap: .4em;
  margin: 0;
  color: var(--text);
  font-size: 1.85rem;
}
.page-header h1 .ico { color: var(--primary); width: .95em; height: .95em; stroke-width: 2; }
.page-header p { margin-top: 6px; color: var(--text-2); font-size: .95rem; }
.page-header > div:last-child:not(:first-child) { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.page-header .header-badge, .header-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: var(--r-full);
  background: var(--accent-soft);
  color: var(--warning-strong);
  border: 1px solid var(--warning-line);
  font-size: .8rem;
  font-weight: 600;
  white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════════
   BOTONES
   ═══════════════════════════════════════════════════════════════ */
.btn, .btn-pro, .header-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 8px 15px;
  border-radius: var(--r-md);
  border: 1px solid transparent;
  font-size: .88rem;
  font-weight: 600;
  line-height: 1.25;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast), box-shadow var(--t-fast);
}
.btn .ico, .btn-pro .ico, .header-btn .ico { width: 1.1em; height: 1.1em; }
.btn:active, .btn-pro:active, .header-btn:active { transform: translateY(1px); }
.btn:disabled, .btn-pro:disabled, .header-btn:disabled, button:disabled { opacity: .55; cursor: not-allowed; transform: none; }

/* Principal: teja */
.btn-primary, .header-btn-gold, .page-header .header-btn-gold {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--on-primary);
}
.btn-primary:hover, .header-btn-gold:hover, .page-header .header-btn-gold:hover {
  background: var(--primary-hover);
  border-color: var(--primary-hover);
  color: var(--on-primary);
}

/* Secundario: contorno */
.header-btn, .btn-gray, .btn-secondary, .btn-outline-primary {
  background: var(--surface);
  border-color: var(--border-strong);
  color: var(--text);
}
.header-btn:hover, .btn-gray:hover, .btn-secondary:hover {
  background: var(--surface-2);
  border-color: var(--text-3);
  color: var(--text);
}
.btn-outline-primary { color: var(--primary); border-color: var(--primary-line); }
.btn-outline-primary:hover { background: var(--primary-soft); color: var(--primary-strong); border-color: var(--primary); }

/* Confirmar algo bueno: oliva */
.btn-success { background: var(--success); border-color: var(--success); color: #fff; }
.btn-success:hover { background: #46561F; border-color: #46561F; color: #fff; }
[data-theme="dark"] .btn-success { background: #6B7E33; border-color: #6B7E33; }
[data-theme="dark"] .btn-success:hover { background: #7A8F3C; border-color: #7A8F3C; }

/* Peligro: carmín */
.btn-danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn-danger:hover { background: var(--danger-strong); border-color: var(--danger-strong); color: #fff; }
[data-theme="dark"] .btn-danger { background: #B23048; border-color: #B23048; }
.btn-outline-danger { background: transparent; border-color: var(--danger-line); color: var(--danger); }
.btn-outline-danger:hover { background: var(--danger-soft); border-color: var(--danger); color: var(--danger-strong); }

.btn-warning { background: var(--accent); border-color: var(--accent); color: var(--arete-ink); }
.btn-warning:hover { background: #C78A1F; border-color: #C78A1F; }
.btn-outline-warning { background: transparent; border-color: var(--warning-line); color: var(--warning-strong); }
.btn-outline-warning:hover { background: var(--warning-soft); border-color: var(--warning); }

/* Sin fondo */
.btn-ghost, .btn-link {
  background: transparent;
  border-color: transparent;
  color: var(--text-2);
}
.btn-ghost:hover { background: var(--surface-2); color: var(--text); }
.btn-link { color: var(--primary); padding-left: 4px; padding-right: 4px; }
.btn-link:hover { text-decoration: underline; color: var(--primary-hover); }

.btn-sm { padding: 5px 10px; font-size: .8rem; border-radius: var(--r-sm); gap: 5px; }
.btn-lg { padding: 11px 20px; font-size: .96rem; }

/* Botón cuadrado de solo ícono (acciones de fila): lleva title y aria-label */
.btn-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  padding: 0;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-2);
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.btn-ico:hover { background: var(--surface-2); color: var(--text); border-color: var(--border-strong); }
.btn-ico.peligro:hover { background: var(--danger-soft); color: var(--danger); border-color: var(--danger-line); }
.btn-ico .ico { width: 17px; height: 17px; }

/* ═══════════════════════════════════════════════════════════════
   TARJETAS Y PANELES
   ═══════════════════════════════════════════════════════════════ */
.card, .custom-card, .dk-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  margin-bottom: 1.25rem;
  padding: 1.4rem;
  position: relative;
}
.dk-panel { padding: 0; overflow: hidden; }
.shadow-sm { box-shadow: var(--shadow-sm); }

.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 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1rem;
  font-weight: 700;
  font-stretch: 108%;
  color: var(--text);
}
.dk-panel-title .ico { color: var(--primary); }
.dk-panel-body { padding: 16px 18px; }

.section-title, .sec-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1.02rem;
  font-weight: 700;
  font-stretch: 108%;
  color: var(--text);
  margin-bottom: 14px;
}
.section-title .ico, .sec-title .ico { color: var(--primary); }

/* Rótulo de sección (antes en mayúsculas con raya dorada) */
.sec-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: .82rem;
  font-weight: 650;
  color: var(--text-2);
  margin: 6px 0 12px;
}
.sec-label::after { content: ''; flex: 1; height: 1px; background: var(--border); }

.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;
}

/* ═══════════════════════════════════════════════════════════════
   INDICADORES (KPI)
   ═══════════════════════════════════════════════════════════════ */
.kpi-grid-gpork {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}
.kpi-card-gpork, .kpi-ink {
  --kc: var(--primary);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  position: relative;
  overflow: hidden;
}
.kpi-ink::before {
  content: '';
  position: absolute;
  left: 0; top: 14px; bottom: 14px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--kc);
}
.kpi-icon-gpork {
  width: 36px; height: 36px;
  border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center;
  background: var(--primary-soft);
  color: var(--primary);
  margin-bottom: 8px;
  flex-shrink: 0;
}
.kpi-ink .lbl, .kpi-card-gpork .lbl { font-size: .82rem; font-weight: 550; color: var(--text-2); }
.kpi-ink .val, .kpi-card-gpork .val {
  font-size: 1.6rem;
  font-weight: 750;
  font-stretch: 108%;
  letter-spacing: -.01em;
  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, .kpi-card-gpork .sub { font-size: .78rem; color: var(--text-3); }

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

table {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  font-size: .9rem;
}
thead th {
  background: var(--table-head-bg);
  color: var(--text-2);
  font-size: .8rem;
  font-weight: 650;
  font-stretch: var(--ancho-angosto);
  letter-spacing: .01em;
  text-transform: none;
  padding: 10px 14px;
  text-align: left;
  white-space: nowrap;
  border-bottom: 1px solid var(--border);
}
tbody td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--table-border);
  color: var(--text);
  vertical-align: middle;
}
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover td { background: var(--table-hover); }
tbody tr[onclick] { cursor: pointer; }
.table-wrapper thead th { position: sticky; top: 0; z-index: 2; }

.table { width: 100%; border-collapse: collapse; }
.table-sm td, .table-sm th { padding: 6px 10px; }
.table-striped tbody tr:nth-child(even) td { background: var(--table-stripe-bg); }
.table-striped tbody tr:hover td { background: var(--table-hover); }
.align-middle td, .align-middle th { vertical-align: middle; }
.table-dark th, .table-secondary th { background: var(--table-head-bg); color: var(--text-2); }

td.num, th.num, .text-end { text-align: right; }

/* ═══════════════════════════════════════════════════════════════
   FORMULARIOS
   ═══════════════════════════════════════════════════════════════ */
.input-main, .form-select, .form-control,
.form-group input, .form-group select, .form-group textarea {
  width: 100%;
  padding: 8px 12px;
  border-radius: var(--r-md);
  border: 1px solid var(--border-strong);
  background: var(--input-bg);
  color: var(--text);
  font-size: .92rem;
  line-height: 1.4;
  outline: none;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.input-main:hover, .form-select:hover, .form-control:hover { border-color: var(--text-3); }
.input-main:focus, .form-select:focus, .form-control:focus,
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft);
}
.input-main::placeholder, .form-control::placeholder, input::placeholder, textarea::placeholder { color: var(--text-3); opacity: 1; }
select option { background: var(--surface); color: var(--text); }
textarea { resize: vertical; }

/* Campo de búsqueda con lupa (sin emoji en el placeholder) */
.input-buscar, input[type="search"].input-main {
  padding-left: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2375685A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10a7 7 0 1 0 14 0a7 7 0 1 0 -14 0'/%3E%3Cpath d='M21 21l-6 -6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 11px 50%;
  background-size: 16px;
}

.form-label, .form-group label {
  display: block;
  margin-bottom: 5px;
  font-size: .84rem;
  font-weight: 600;
  color: var(--text-2);
  text-transform: none;
  letter-spacing: 0;
}
.form-group { display: flex; flex-direction: column; margin-bottom: 14px; gap: 2px; }
fieldset { border: 1px solid var(--border); border-radius: var(--r-lg); padding: 12px 16px 16px; }
legend { padding: 0 6px; font-weight: 650; color: var(--text-2); font-size: .86rem; }

/* ═══════════════════════════════════════════════════════════════
   AVISOS, INSIGNIAS Y CHIPS
   ═══════════════════════════════════════════════════════════════ */
.alert {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: var(--r-md);
  margin-bottom: 1rem;
  font-size: .9rem;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
}
.alert > .ico { margin-top: .1em; }
.alert-warning { background: var(--warning-soft); border-color: var(--warning-line); color: var(--warning-strong); }
.alert-danger  { background: var(--danger-soft);  border-color: var(--danger-line);  color: var(--danger-strong); }
.alert-success { background: var(--success-soft); border-color: var(--success-line); color: var(--success-strong); }
.alert-info    { background: var(--info-soft);    border-color: var(--info-line);    color: var(--info-strong); }
.alert-light   { background: var(--surface-2);    border-color: var(--border);       color: var(--text); }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 9px;
  border-radius: var(--r-full);
  font-size: .76rem;
  font-weight: 600;
  line-height: 1.5;
  text-transform: none;
  letter-spacing: 0;
  white-space: nowrap;
  background: var(--surface-2);
  color: var(--text-2);
  border: 1px solid var(--border);
}
.badge .ico { width: 1em; height: 1em; }
.bg-primary, .badge-primario { background: var(--primary-soft); color: var(--primary-strong); border-color: var(--primary-line); }
.bg-success, .badge-exito    { background: var(--success-soft); color: var(--success-strong); border-color: var(--success-line); }
.bg-warning, .badge-alerta   { background: var(--warning-soft); color: var(--warning-strong); border-color: var(--warning-line); }
.bg-danger,  .badge-peligro  { background: var(--danger-soft);  color: var(--danger-strong);  border-color: var(--danger-line); }
.bg-info,    .badge-info     { background: var(--info-soft);    color: var(--info-strong);    border-color: var(--info-line); }
.bg-light  { background: var(--surface-2); color: var(--text-2); }
.bg-white  { background: var(--surface); color: var(--text); border: 1px solid var(--border); }

/* Chips de filtro y pestañas segmentadas */
.filter-chip, .filtro-estado, .chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: var(--r-full);
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text-2);
  font-size: .84rem;
  font-weight: 550;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.filter-chip:hover, .filtro-estado:hover, .chip:hover { border-color: var(--text-3); color: var(--text); }
.filter-chip.active, .filtro-estado.activo, .chip.active {
  background: var(--text);
  border-color: var(--text);
  color: var(--bg);
}

.seg-tabs {
  display: inline-flex;
  gap: 2px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 3px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.seg-tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: none;
  background: none;
  padding: 7px 14px;
  border-radius: var(--r-sm);
  font-size: .88rem;
  font-weight: 600;
  color: var(--text-2);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--t-fast), color var(--t-fast);
}
.seg-tab:hover:not(.active) { color: var(--text); background: var(--surface); }
.seg-tab.active { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }
.seg-tab.active .ico { color: var(--primary); }

/* Pestañas subrayadas de los módulos (gpork-tab y similares) */
.gpork-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 20px; flex-wrap: wrap; }
.gpork-tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 14px;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  background: none;
  color: var(--text-2);
  font-size: .9rem;
  font-weight: 600;
  cursor: pointer;
}
.gpork-tab:hover { color: var(--text); }
.gpork-tab.active { color: var(--text); border-bottom-color: var(--primary); }
.gpork-tab.active .ico { color: var(--primary); }

/* ═══════════════════════════════════════════════════════════════
   MODALES
   ═══════════════════════════════════════════════════════════════ */
dialog { margin: auto; }
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;
}
dialog::backdrop { background: rgba(26, 21, 17, .55); backdrop-filter: blur(3px); }
.modal-header {
  padding: 16px 22px;
  border-bottom: 1px solid var(--border);
  font-weight: 700;
  font-stretch: 108%;
  font-size: 1.05rem;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.modal-header > span { display: inline-flex; align-items: center; gap: 8px; }
.modal-header .ico { color: var(--primary); }
.modal-body   { padding: 22px; }
.modal-footer {
  padding: 14px 22px;
  border-top: 1px solid var(--border);
  display: flex; justify-content: flex-end; gap: 10px;
  background: var(--surface-2);
  border-radius: 0 0 var(--r-xl) var(--r-xl);
}

/* Botón «cerrar» (×) de modales y paneles */
.btn-cerrar, .modal-close, .close-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  border-radius: var(--r-md);
  border: none; background: none;
  color: var(--text-3);
  cursor: pointer;
  font-size: 1.25rem; line-height: 1;
}
.btn-cerrar:hover, .modal-close:hover, .close-btn:hover { background: var(--surface-2); color: var(--text); }

/* ═══════════════════════════════════════════════════════════════
   AVISOS FLOTANTES (toasts) Y PALETA DE COMANDOS
   ═══════════════════════════════════════════════════════════════ */
.toast-stack {
  position: fixed;
  bottom: 20px; right: 20px;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: min(420px, calc(100vw - 40px));
  pointer-events: none;
}
.toast {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 12px 12px 12px 14px;
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 4px solid var(--info);
  box-shadow: var(--shadow-lg);
  font-size: .9rem;
  color: var(--text);
  pointer-events: auto;
  animation: avisoEntra .26s cubic-bezier(.21, 1.02, .73, 1) both;
}
.toast-success { border-left-color: var(--success); }
.toast-danger  { border-left-color: var(--danger); }
.toast-warning { border-left-color: var(--accent); }
.toast-ico { display: inline-flex; margin-top: 1px; flex-shrink: 0; }
.toast-ico .ico { width: 20px; height: 20px; stroke-width: 2; }
.toast-success .toast-ico { color: var(--success); }
.toast-danger  .toast-ico { color: var(--danger); }
.toast-warning .toast-ico { color: var(--warning); }
.toast-info    .toast-ico { color: var(--info); }
.toast-msg { flex: 1; line-height: 1.45; white-space: pre-line; word-break: break-word; }
.toast-x {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px;
  border: none; border-radius: var(--r-sm);
  background: none; color: var(--text-3);
  cursor: pointer; flex-shrink: 0;
}
.toast-x:hover { background: var(--surface-2); color: var(--text); }
.toast-x .ico { width: 16px; height: 16px; }
@keyframes avisoEntra { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.toast-out { animation: avisoSale .2s ease both; }
@keyframes avisoSale { to { opacity: 0; transform: translateY(6px); } }

.cmdk-overlay[hidden] { display: none !important; }
.cmdk-overlay {
  position: fixed;
  inset: 0;
  z-index: 1900;
  background: rgba(26, 21, 17, .5);
  backdrop-filter: blur(3px);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 15vh 18px 0;
}
.cmdk {
  width: 100%;
  max-width: 500px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.cmdk-input-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}
.cmdk-ico { display: inline-flex; color: var(--text-3); }
.cmdk-input-row input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  color: var(--text);
  font-size: 1rem;
}
.cmdk-input-row kbd { font-family: var(--font); font-size: .72rem; color: var(--text-3); }
.cmdk-list { max-height: 340px; overflow-y: auto; padding: 6px; }
.cmdk-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: var(--r-md);
  font-size: .92rem;
  color: var(--text-2);
  cursor: pointer;
}
.cmdk-item .ico { color: var(--text-3); }
.cmdk-item.active { background: var(--primary-soft); color: var(--text); font-weight: 600; }
.cmdk-item.active .ico { color: var(--primary); }
.cmdk-empty { padding: 22px; text-align: center; color: var(--text-3); font-size: .88rem; }

/* ═══════════════════════════════════════════════════════════════
   ESTADOS VACÍOS Y CARGA
   ═══════════════════════════════════════════════════════════════ */
.empty-state, .estado-vacio {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 32px 16px;
  color: var(--text-3);
  text-align: center;
  font-size: .9rem;
}
.empty-state > .ico, .estado-vacio > .ico, .empty-state > span > .ico { width: 30px; height: 30px; color: var(--border-strong); stroke-width: 1.5; }
.cargando { display: inline-flex; align-items: center; gap: 8px; color: var(--text-3); }

/* ═══════════════════════════════════════════════════════════════
   INGRESO Y REGISTRO
   ═══════════════════════════════════════════════════════════════ */
.auth-container {
  max-width: 460px;
  margin: 56px auto;
  padding: 36px;
  background: var(--surface);
  border-radius: var(--r-xl);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
}
.auth-header h2 { margin-top: 0; text-align: center; }
.auth-header p  { text-align: center; color: var(--text-2); font-size: .92rem; margin: 6px auto 22px; }
.auth-form { display: flex; flex-direction: column; gap: 14px; margin-top: 18px; }
.btn-auth, .btn-register-page {
  width: 100%;
  padding: 11px;
  background: var(--primary);
  color: var(--on-primary);
  border: none;
  border-radius: var(--r-md);
  cursor: pointer;
  font-weight: 650;
  font-size: .96rem;
  transition: background var(--t-fast);
}
.btn-auth:hover, .btn-register-page:hover { background: var(--primary-hover); }
.auth-footer { margin-top: 20px; text-align: center; font-size: .9rem; }
.auth-footer a { color: var(--primary); text-decoration: none; font-weight: 650; }
.auth-footer a:hover { text-decoration: underline; }

/* ═══════════════════════════════════════════════════════════════
   PORTADA (index.html)
   ═══════════════════════════════════════════════════════════════ */
.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, .service-card {
  flex: 1; min-width: 220px;
  background: var(--surface);
  padding: 24px;
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  color: var(--text);
  transition: border-color var(--t-base);
}
.Ventajas-item:hover, .service-card:hover { border-color: var(--primary-line); }

.hero-section.full-width {
  width: 100%; min-height: 64vh;
  position: relative;
  background:
    linear-gradient(90deg, rgba(42, 33, 26, .96) 0%, rgba(42, 33, 26, .9) 34%, rgba(42, 33, 26, .45) 70%, rgba(42, 33, 26, .2) 100%),
    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;
}
.hero-container-centered {
  position: relative; z-index: 2;
  display: flex; flex-direction: column;
  justify-content: center; align-items: flex-start;
  text-align: left;
  padding: 72px 60px;
  flex: 1;
}
.hero-text-full { max-width: 600px; }
.hero-text-full h1 { font-size: 3rem; color: #F5EEE4 !important; margin-bottom: 16px; line-height: 1.04; }
.hero-text-full p { font-size: 1.08rem; color: #CDBFAE; margin-bottom: 28px; }
.hero-buttons { display: flex; gap: 12px; flex-wrap: wrap; }
.btn-main {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--primary);
  color: #fff !important;
  padding: 12px 24px;
  border-radius: var(--r-md);
  font-weight: 650;
  text-decoration: none;
  font-size: .95rem;
}
.btn-main:hover { background: var(--primary-hover); }
.hero-buttons .btn-secondary {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 22px;
  border-radius: var(--r-md);
  border: 1px solid rgba(255, 238, 220, .35);
  background: transparent;
  color: #F5EEE4 !important;
  text-decoration: none;
}
.hero-buttons .btn-secondary:hover { background: rgba(255, 238, 220, .1); }
.info-section { max-width: 1200px; margin: 0 auto; padding: 56px 0; }
.step-item { max-width: 200px; }
.step-number {
  width: 46px; height: 46px;
  background: var(--primary-soft);
  color: var(--primary-strong);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 14px;
  font-weight: 750; font-size: 1rem;
}

/* ═══════════════════════════════════════════════════════════════
   UTILIDADES (compatibles con las plantillas existentes)
   ═══════════════════════════════════════════════════════════════ */
.d-flex { display: flex; }
.d-none { display: none !important; }
.d-block { display: block; }
.d-inline-flex { display: inline-flex; }
.flex-wrap { flex-wrap: wrap; }
.flex-grow-1 { flex: 1; }
.flex-column { flex-direction: column; }
.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; }

.container { max-width: 1200px; margin: 0 auto; padding: 0 1rem; }
.container-fluid { width: 100%; padding: 0 1rem; }
.row { display: flex; flex-wrap: wrap; margin: 0 -.5rem; }
.row.g-3 > * { padding: .5rem; }
.col-md-2 { width: 16.667%; padding: 0 .5rem; }
.col-md-3 { width: 25%; padding: 0 .5rem; }
.col-md-5 { width: 41.667%; padding: 0 .5rem; }

.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-muted { color: var(--text-3) !important; }
.text-dark { color: var(--text); }
.text-secondary { color: var(--text-2); }
.text-primary { color: var(--primary); }
.text-danger { color: var(--danger); }
.text-success { color: var(--success); }
.text-warning { color: var(--warning); }
.fw-bold { font-weight: 650; }
.small { font-size: .84rem; }
.w-100 { width: 100%; }
.border { border: 1px solid var(--border) !important; }
.opacity-75 { opacity: .75; }
.rounded-4 { border-radius: var(--r-lg); }

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

/* Entrada suave al cargar la página (un solo momento, no en cada tarjeta) */
@keyframes aparecer { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.fade-in > main { animation: aparecer .32s ease both; }
.reveal-grid > * { animation: aparecer .3s ease both; }

/* Paneles con la barra lateral visible en el escritorio angosto */
@media (max-width: 1200px) {
  main { padding: 1.6rem 1.6rem 3rem; }
}

/* ═══════════════════════════════════════════════════════════════
   MÓVIL — la barra lateral pasa a una barra superior con menú
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 960px) {
  :root { --sidebar-w: 0px; }
  body { padding-left: 0; }

  header {
    position: sticky;
    top: 0;
    width: 100%;
    height: auto;
    max-height: 100vh;
    border-right: none;
    border-bottom: 1px solid var(--sidebar-border);
  }
  .sidebar-topbar { padding: 10px 12px 10px 16px; }
  header h1 { font-size: 1.05rem; }
  header h1 .marca { width: 26px; height: 26px; }

  .mobile-menu-btn { display: inline-flex; }
  .sidebar-collapse-btn, .sidebar-expand-btn { display: none !important; }

  .nav-search, .granja-picker, nav { display: none; }
  html.mobile-open .nav-search { display: flex; }
  html.mobile-open .granja-picker { display: block; }
  html.mobile-open nav { display: flex; padding-bottom: 8px; }
  html.mobile-open header { overflow-y: auto; box-shadow: var(--shadow-lg); }

  main { padding: 1.2rem 1rem 2.5rem; }
  .page-header h1 { font-size: 1.45rem; }
  .col-md-2, .col-md-3, .col-md-5 { width: 100%; }
  .align-self-end { align-self: auto; }
  .kpi-grid-gpork { grid-template-columns: 1fr 1fr; }
  .grid-3 { grid-template-columns: 1fr; }
  .Ventajas-container { flex-direction: column; }
  .hero-text-full h1 { font-size: 2.1rem; }
  .hero-container-centered { padding: 48px 26px; }
}

/* ═══════════════════════════════════════════════════════════════
   IMPRESIÓN
   ═══════════════════════════════════════════════════════════════ */
@media print {
  body { padding-left: 0; background: #fff; }
  header, footer, .sidebar-expand-btn, .toast-stack, .cmdk-overlay, .no-print { display: none !important; }
  main { padding: 0; max-width: none; }
  .card, .custom-card, .dk-panel, .table-wrapper { break-inside: avoid; }
}

/* ═══════════════════════════════════════════════════════════════
   ACCESIBILIDAD Y COMODIDAD
   ═══════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Los controles no seleccionan su texto: arrastrar el mouse sobre el menú o
   un botón no selecciona su rótulo. */
button,
input[type="button"], input[type="submit"], input[type="reset"], input[type="checkbox"],
header, .sidebar-expand-btn,
.btn, .btn-pro, .btn-ico, .btn-primary, .btn-secondary, .btn-success, .btn-gray, .btn-main,
.btn-auth, .btn-register-page, .badge, .nav-badge, .chip, .filter-chip, .seg-tab, .gpork-tab,
details > summary {
  user-select: none;
  -webkit-user-select: none;
}
label:has(> input[type="checkbox"]), label:has(> input[type="file"]) {
  user-select: none;
  -webkit-user-select: none;
}