/* ============================================================================
   BPO Control — Sistema de diseño
   ----------------------------------------------------------------------------
   Fuente única de verdad para color, tipografía, espaciado y componentes.
   Se carga DESPUÉS de Bootstrap para poder redefinir sus primitivas.

   Estructura:
     1. Tokens              — color, tipo, espaciado, radio, sombra
     2. Alias de compatibilidad — nombres viejos que las plantillas ya usan
     3. Base                — reset, tipografía, foco
     4. Primitivas          — botón, input, select, check, radio, switch, textarea
     5. Superficies         — card, tabla, badge, separador
     6. Sobrecapas          — drawer, dialog, dropdown, tooltip, toast
     7. Navegación          — sidebar, topbar, tabs
     8. Puente con Bootstrap — .btn, .form-control, .modal… heredan el sistema
     9. Utilidades e impresión
   ========================================================================== */

/* ── 1. TOKENS ───────────────────────────────────────────────────────────── */
:root {
  /* Superficies y texto */
  --background:            #f8fafa;
  --foreground:            #0d1614;
  --card:                  #ffffff;
  --card-foreground:       #0d1614;
  --popover:               #ffffff;
  --popover-foreground:    #0d1614;

  /* Marca — el jade de BPO Control, contenido al rol de acento */
  --primary:               #0f7355;
  --primary-hover:         #0c5f46;
  --primary-foreground:    #ffffff;
  --primary-subtle:        #e6f4ef;
  --primary-border:        #b8ddd0;

  --secondary:             #f1f5f4;
  --secondary-hover:       #e6ecea;
  --secondary-foreground:  #1a2724;

  --muted:                 #f4f7f6;
  --muted-foreground:      #64756f;

  --accent:                #f1f5f4;
  --accent-foreground:     #0d1614;

  /* Semánticos — independientes del acento de marca */
  --destructive:           #b4232f;
  --destructive-hover:     #971c27;
  --destructive-foreground:#ffffff;
  --destructive-subtle:    #fdecec;
  --destructive-border:    #f2c4c6;

  --warning:               #8a5106;
  --warning-foreground:    #ffffff;
  --warning-subtle:        #fdf2e2;
  --warning-border:        #edd3ab;

  --success:               #1a6b4c;
  --success-foreground:    #ffffff;
  --success-subtle:        #e4f2eb;
  --success-border:        #b5dbc9;

  --info:                  #1857a8;
  --info-foreground:       #ffffff;
  --info-subtle:           #e8f0fb;
  --info-border:           #bcd3ee;

  /* Colores de PILAR — el punto de cada sección del menú. Estaban escritos a
     mano dentro de `shell.css`; viven aquí porque también los usan los
     distintivos de rol. */
  /* Un paso más oscuros de lo que pide un punto de 6 px, porque estos mismos
     tonos se usan como TEXTO en los distintivos de rol: a 11 px sobre blanco,
     el ámbar de 600 se queda en 3,4:1 y no pasa. En un cuadrado de 6 px la
     diferencia no se ve; en una palabra, sí. */
  --pilar-operations:   #1d4ed8;
  --pilar-workforce:    #047857;
  --pilar-intelligence: #b45309;
  --pilar-ai:           #6d28d9;

  /* Colores de IDENTIDAD — identifican a una PERSONA, nunca un estado. Por eso
     no son los semánticos: un avatar en rojo no significa que algo vaya mal, y
     mezclar las dos escalas haría que el rojo dejara de querer decir nada. El
     color de cada quien sale de su id, así que es el mismo en toda la
     aplicación y en la pantalla de todos. */
  /* Los ocho pasan 4,5:1 sobre la tarjeta blanca: el nombre de quien escribe
     va en su color y es texto de 14 px, no un adorno. */
  --persona-1: #1d4ed8;
  --persona-2: #047857;
  --persona-3: #b45309;
  --persona-4: #6d28d9;
  --persona-5: #0e7490;
  --persona-6: #be185d;
  --persona-7: #c2410c;
  --persona-8: #4338ca;

  /* Líneas y foco */
  --border:                #e2e8e6;
  --border-strong:         #cbd6d3;
  --input:                 #d7e0dd;
  --ring:                  #0f7355;

  /* Radio */
  --radius:                0.5rem;
  --radius-sm:             calc(var(--radius) - 2px);
  --radius-lg:             calc(var(--radius) + 2px);
  --radius-xl:             calc(var(--radius) + 6px);
  --radius-full:           9999px;

  /* Sombra */
  --shadow-xs:  0 1px 2px 0 rgb(13 22 20 / .05);
  --shadow-sm:  0 1px 3px 0 rgb(13 22 20 / .07), 0 1px 2px -1px rgb(13 22 20 / .07);
  --shadow-md:  0 4px 10px -2px rgb(13 22 20 / .08), 0 2px 6px -2px rgb(13 22 20 / .06);
  --shadow-lg:  0 12px 26px -6px rgb(13 22 20 / .12), 0 4px 10px -4px rgb(13 22 20 / .08);
  --shadow-xl:  0 24px 48px -12px rgb(13 22 20 / .18);

  /* Tipografía — una sola escala, ocho pasos */
  --font-sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;

  --text-2xs:  0.75rem;    /* 12px — etiquetas en versal */
  --text-xs:   0.8125rem;  /* 13px — metadatos */
  --text-sm:   0.875rem;   /* 14px — texto denso, tablas */
  --text-base: 0.9375rem;  /* 15px — base de la interfaz */
  --text-md:   1rem;       /* 16px — texto corrido */
  --text-lg:   1.0625rem;  /* 17px — título de tarjeta */
  --text-xl:   1.3125rem;  /* 21px — título de sección */
  --text-2xl:  1.625rem;   /* 26px — título de página */
  --text-3xl:  2rem;       /* 32px — cifras grandes */

  --leading-tight:  1.25;
  --leading-normal: 1.5;
  --leading-relax:  1.65;

  --tracking-tight: -0.014em;
  --tracking-wide:  0.08em;

  /* Espaciado — seis pasos, múltiplos de 4 */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;

  /* Altura de controles — todo lo interactivo se alinea a esta rejilla */
  --control-sm: 1.75rem;   /* 28px */
  --control:    2rem;      /* 32px */
  --control-lg: 2.375rem;  /* 38px */

  /* Densidad — relleno de las piezas que se repiten muchas veces en pantalla.
     Estos son los valores CÓMODOS, los de una pantalla normal. La compresión
     vive en una consulta de medios por ALTO de ventana: lo que no cabe en un
     1366×768 son filas, y eso depende del alto, no del ancho. */
  --pad-card-x: 1.25rem;
  --pad-card-y: 0.875rem;
  --pad-cell-x: 0.875rem;
  --pad-cell-y: 0.625rem;
  --gap-section: var(--space-5);
  --stat-size:  1.875rem;

  --ease:      cubic-bezier(0.16, 1, 0.3, 1);
  --duration:  0.18s;

  --z-sticky:  100;
  --z-overlay: 900;    /* el velo, siempre por debajo de lo que cubre */
  --z-drawer:  1000;
  --z-dialog:  1100;
  --z-toast:   1200;
}

[data-theme="dark"] {
  --background:            #0a0f0e;
  --foreground:            #e8efed;
  --card:                  #121a19;
  --card-foreground:       #e8efed;
  --popover:               #16201e;
  --popover-foreground:    #e8efed;

  --primary:               #2fbd8f;
  --primary-hover:         #43cfa1;
  --primary-foreground:    #04120d;
  --primary-subtle:        #0f2a22;
  --primary-border:        #1e4a3c;

  --secondary:             #1b2523;
  --secondary-hover:       #232e2c;
  --secondary-foreground:  #dbe5e2;

  --muted:                 #161f1e;
  --muted-foreground:      #8a9c98;

  --accent:                #1b2523;
  --accent-foreground:     #e8efed;

  --destructive:           #f2646f;
  --destructive-hover:     #ff7c85;
  --destructive-foreground:#180608;
  --destructive-subtle:    #2a1315;
  --destructive-border:    #4d2226;

  --warning:               #e0a047;
  --warning-foreground:    #1a1004;
  --warning-subtle:        #271b0c;
  --warning-border:        #4a3618;

  --success:               #45c98f;
  --success-foreground:    #04150e;
  --success-subtle:        #10261d;
  --success-border:        #1f4736;

  --info:                  #5b9df0;
  --info-foreground:       #04101f;
  --info-subtle:           #101e2f;
  --info-border:           #23385a;

  /* Sobre oscuro los mismos tonos se apagan: se suben dos pasos de
     luminosidad. Es la regla de siempre — el tono se conserva, la luz cambia. */
  --pilar-operations:   #60a5fa;
  --pilar-workforce:    #34d399;
  --pilar-intelligence: #fbbf24;
  --pilar-ai:           #c084fc;

  --persona-1: #60a5fa;
  --persona-2: #34d399;
  --persona-3: #fbbf24;
  --persona-4: #c084fc;
  --persona-5: #22d3ee;
  --persona-6: #f472b6;
  --persona-7: #fb923c;
  --persona-8: #818cf8;

  --border:                #232e2c;
  --border-strong:         #33413e;
  --input:                 #2b3735;
  --ring:                  #2fbd8f;

  --shadow-xs:  0 1px 2px 0 rgb(0 0 0 / .4);
  --shadow-sm:  0 1px 3px 0 rgb(0 0 0 / .5);
  --shadow-md:  0 4px 12px -2px rgb(0 0 0 / .55);
  --shadow-lg:  0 12px 28px -6px rgb(0 0 0 / .65);
  --shadow-xl:  0 24px 52px -12px rgb(0 0 0 / .75);
}

/* ── 2. ALIAS DE COMPATIBILIDAD ──────────────────────────────────────────────
   Las plantillas actuales usan estos nombres. Antes apuntaban a variables que
   nunca se definieron (44 referencias muertas). Aquí quedan atadas al sistema
   para que el CSS existente empiece a pintar sin reescribir cada plantilla.
   No usar en código nuevo — usar los tokens de la sección 1.
   -------------------------------------------------------------------------- */
:root, [data-theme="dark"] {
  --bg:                 var(--background);
  --surface:            var(--card);
  --surface-card:       var(--card);
  --surface-elevated:   var(--muted);
  --surface-2:          var(--muted);          /* faltaba: 8 usos */
  --text:               var(--foreground);
  --text-main:          var(--foreground);     /* faltaba: 2 usos */
  --text-2:             var(--secondary-foreground); /* faltaba: 2 usos */
  --text-3:             var(--muted-foreground);     /* faltaba: 24 usos */
  --text-muted:         var(--muted-foreground);
  --text-faint:         var(--muted-foreground);
  --line:               var(--border);

  --brand:              var(--primary);
  --brand-2:            var(--primary-hover);
  --brand-ink:          var(--primary-foreground);
  --brand-text:         var(--primary);
  --brand-glow:         color-mix(in srgb, var(--primary) 26%, transparent);
  --brand-primary:      var(--primary);
  --brand-secondary:    var(--info);
  --primary-glow:       color-mix(in srgb, var(--primary) 24%, transparent);
  --primary-light:      var(--primary-subtle);

  --error:              var(--destructive);        /* faltaba: 2 usos */
  --error-light:        var(--destructive-subtle); /* faltaba: 1 uso  */
  --success-light:      var(--success-subtle);     /* faltaba: 2 usos */
  --warning-light:      var(--warning-subtle);     /* faltaba: 1 uso  */
  --btn-close-filter:   var(--muted-foreground);   /* faltaba: 1 uso  */

  --risk-critico:       var(--destructive);
  --risk-alto:          var(--warning);
  --risk-medio:         #8a6206;
  --risk-info:          var(--info);
  --risk-limpia:        var(--success);

  --sidebar-bg:         color-mix(in srgb, var(--card) 88%, transparent);
  --sidebar-hover:      var(--accent);
  --sidebar-active-bg:  var(--primary-subtle);
  --sidebar-active-color: var(--primary);
  --sidebar-text:       var(--muted-foreground);
  --sidebar-section:    var(--muted-foreground);

  --radius-card:        var(--radius-lg);
  --ease-out:           var(--ease);
  --spring:             cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ── 3. BASE ─────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  background-color: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-tight);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'cv11', 'ss01';
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 600;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--foreground);
  text-wrap: balance;
}
h1 { font-size: var(--text-2xl); }
h2 { font-size: var(--text-xl); }
h3 { font-size: var(--text-lg); }
h4 { font-size: var(--text-md); }
h5, h6 { font-size: var(--text-base); }

p { margin: 0 0 var(--space-3); }
p:last-child { margin-bottom: 0; }

a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Todo dígito que se lea en columna va tabular */
.ui-num, .tabular-nums, td, th, .ui-table td, .ui-table th {
  font-variant-numeric: tabular-nums;
}

.ui-mono, .font-mono { font-family: var(--font-mono); }
.ui-display { font-family: var(--font-display); font-style: italic; font-weight: 400; }

/* Foco visible y consistente en todo lo enfocable */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

::selection { background: var(--primary-subtle); color: var(--foreground); }

/* Barras de desplazamiento discretas */
* { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: var(--radius-full); }
*::-webkit-scrollbar-thumb:hover { background: var(--muted-foreground); }

/* ── 4. PRIMITIVAS ───────────────────────────────────────────────────────── */

/* 4.1 Etiqueta de campo */
.ui-label {
  display: block;
  font-size: var(--text-sm);
  font-weight: 500;
  line-height: 1.4;
  color: var(--foreground);
  margin-bottom: var(--space-2);
}
.ui-label[data-required]::after { content: ' *'; color: var(--destructive); }

.ui-hint {
  display: block;
  font-size: var(--text-xs);
  color: var(--muted-foreground);
  margin-top: var(--space-2);
  line-height: 1.45;
}
.ui-error-text {
  display: block;
  font-size: var(--text-xs);
  color: var(--destructive);
  margin-top: var(--space-2);
  font-weight: 500;
}

/* 4.2 Grupo de campo — la unidad que se repite en todo formulario */
.ui-field { display: flex; flex-direction: column; margin-bottom: var(--space-4); }
.ui-field:last-child { margin-bottom: 0; }
.ui-field-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-4);
}

/* 4.3 Caja de texto */
.ui-input,
.ui-textarea,
.ui-select {
  width: 100%;
  height: var(--control);
  padding: 0 var(--space-3);
  font-family: inherit;
  font-size: var(--text-base);
  line-height: 1.4;
  color: var(--foreground);
  background-color: var(--card);
  border: 1px solid var(--input);
  border-radius: var(--radius);
  box-shadow: var(--shadow-xs);
  transition: border-color var(--duration) var(--ease),
              box-shadow var(--duration) var(--ease);
  appearance: none;
}
.ui-input::placeholder,
.ui-textarea::placeholder { color: var(--muted-foreground); }

.ui-input:hover:not(:disabled),
.ui-textarea:hover:not(:disabled),
.ui-select:hover:not(:disabled) { border-color: var(--border-strong); }

.ui-input:focus,
.ui-textarea:focus,
.ui-select:focus {
  outline: none;
  border-color: var(--ring);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 18%, transparent);
}

.ui-input:disabled,
.ui-textarea:disabled,
.ui-select:disabled {
  background-color: var(--muted);
  color: var(--muted-foreground);
  cursor: not-allowed;
  opacity: 1;
}

.ui-input[aria-invalid="true"],
.ui-select[aria-invalid="true"],
.ui-textarea[aria-invalid="true"] {
  border-color: var(--destructive);
}
.ui-input[aria-invalid="true"]:focus,
.ui-select[aria-invalid="true"]:focus,
.ui-textarea[aria-invalid="true"]:focus {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--destructive) 18%, transparent);
}

.ui-textarea {
  height: auto;
  min-height: calc(var(--control) * 2);
  padding: var(--space-2) var(--space-3);
  resize: vertical;
  line-height: var(--leading-normal);
}

.ui-input-sm { height: var(--control-sm); font-size: var(--text-sm); padding: 0 var(--space-2); }
.ui-input-lg { height: var(--control-lg); font-size: var(--text-md); }

/* Caja de texto con icono a la izquierda */
.ui-input-group { position: relative; display: flex; align-items: center; }
.ui-input-group > .ui-input { padding-left: calc(var(--space-3) + 1.25rem); }
.ui-input-icon {
  position: absolute;
  left: var(--space-3);
  display: flex;
  color: var(--muted-foreground);
  font-size: var(--text-base);
  pointer-events: none;
}

/* 4.4 Selector */
.ui-select {
  padding-right: calc(var(--space-3) + 1.25rem);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364756f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-3) center;
  cursor: pointer;
}
[data-theme="dark"] .ui-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238a9c98' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}
.ui-select-sm { height: var(--control-sm); font-size: var(--text-sm); }

/* 4.5 Casilla de verificación */
.ui-checkbox,
.ui-radio {
  display: inline-flex;
  align-items: flex-start;
  gap: var(--space-2);
  cursor: pointer;
  font-size: var(--text-base);
  line-height: 1.35;
  color: var(--foreground);
  user-select: none;
}
.ui-checkbox input,
.ui-radio input {
  appearance: none;
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
  margin: 0.125rem 0 0;
  background-color: var(--card);
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-xs);
  cursor: pointer;
  transition: background-color var(--duration) var(--ease),
              border-color var(--duration) var(--ease);
}
.ui-checkbox input { border-radius: var(--radius-sm); }
.ui-radio input    { border-radius: var(--radius-full); }

.ui-checkbox input:hover:not(:disabled),
.ui-radio input:hover:not(:disabled) { border-color: var(--primary); }

.ui-checkbox input:checked {
  background-color: var(--primary);
  border-color: var(--primary);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-size: 0.7rem;
  background-position: center;
  background-repeat: no-repeat;
}
.ui-checkbox input:indeterminate {
  background-color: var(--primary);
  border-color: var(--primary);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3C/svg%3E");
  background-size: 0.7rem;
  background-position: center;
  background-repeat: no-repeat;
}
.ui-radio input:checked {
  border-color: var(--primary);
  border-width: 5px;
}

.ui-checkbox input:focus-visible,
.ui-radio input:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}
.ui-checkbox input:disabled,
.ui-radio input:disabled { opacity: .5; cursor: not-allowed; }
.ui-checkbox:has(input:disabled),
.ui-radio:has(input:disabled) { cursor: not-allowed; color: var(--muted-foreground); }

.ui-check-text { display: flex; flex-direction: column; gap: 2px; }
.ui-check-desc { font-size: var(--text-xs); color: var(--muted-foreground); line-height: 1.4; }

/* Grupo de radios / casillas en tarjeta seleccionable */
.ui-choice-group { display: flex; flex-direction: column; gap: var(--space-2); }
.ui-choice-group[data-inline] { flex-direction: row; flex-wrap: wrap; gap: var(--space-4); }

.ui-choice-card {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
  cursor: pointer;
  transition: border-color var(--duration) var(--ease),
              background-color var(--duration) var(--ease);
}
.ui-choice-card:hover { border-color: var(--border-strong); background: var(--muted); }
.ui-choice-card:has(input:checked) {
  border-color: var(--primary);
  background: var(--primary-subtle);
}

/* Los controles dentro de una tarjeta seleccionable heredan el mismo estilo,
   sin necesidad de envolverlos en .ui-checkbox / .ui-radio */
.ui-choice-card > input[type="radio"],
.ui-choice-card > input[type="checkbox"] {
  appearance: none;
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
  margin: 0.125rem 0 0;
  background-color: var(--card);
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-xs);
  cursor: pointer;
  transition: background-color var(--duration) var(--ease),
              border-color var(--duration) var(--ease),
              border-width var(--duration) var(--ease);
}
.ui-choice-card > input[type="checkbox"] { border-radius: var(--radius-sm); }
.ui-choice-card > input[type="radio"]    { border-radius: var(--radius-full); }
.ui-choice-card > input[type="radio"]:checked { border-color: var(--primary); border-width: 5px; }
.ui-choice-card > input[type="checkbox"]:checked {
  background-color: var(--primary);
  border-color: var(--primary);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-size: 0.7rem;
  background-position: center;
  background-repeat: no-repeat;
}
.ui-choice-card > input:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }

/* 4.6 Interruptor */
.ui-switch { display: inline-flex; align-items: center; gap: var(--space-3); cursor: pointer; font-size: var(--text-base); }
.ui-switch input {
  appearance: none;
  position: relative;
  flex-shrink: 0;
  width: 2.25rem;
  height: 1.25rem;
  margin: 0;
  background-color: var(--border-strong);
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: background-color var(--duration) var(--ease);
}
.ui-switch input::after {
  content: '';
  position: absolute;
  top: 2px; left: 2px;
  width: 1rem; height: 1rem;
  background: #fff;
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-sm);
  transition: transform var(--duration) var(--ease);
}
.ui-switch input:checked { background-color: var(--primary); }
.ui-switch input:checked::after { transform: translateX(1rem); }
.ui-switch input:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.ui-switch input:disabled { opacity: .5; cursor: not-allowed; }

/* 4.7 Botón */
.ui-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: var(--control);
  padding: 0 var(--space-4);
  font-family: inherit;
  font-size: var(--text-base);
  font-weight: 500;
  line-height: 1;
  letter-spacing: var(--tracking-tight);
  white-space: nowrap;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background-color var(--duration) var(--ease),
              border-color var(--duration) var(--ease),
              color var(--duration) var(--ease),
              box-shadow var(--duration) var(--ease);
}
.ui-btn:hover { text-decoration: none; }
.ui-btn:disabled, .ui-btn[aria-disabled="true"] {
  opacity: .5; pointer-events: none;
}
.ui-btn i, .ui-btn svg { font-size: 1em; flex-shrink: 0; }

/* Un botón se lee como vidrio por tres cosas, no por el desenfoque: un filo
   especular arriba, un degradado vertical muy leve que insinúa curvatura, y una
   pulsación que hunde en vez de mover. En una pieza de 32 px de alto un blur no
   se aprecia y cuesta compositado, así que sólo lo llevan las variantes
   translúcidas, que sí tienen algo detrás. */

.ui-btn-primary {
  background-image: linear-gradient(180deg,
      color-mix(in srgb, var(--primary) 88%, #fff) 0%,
      var(--primary) 52%,
      color-mix(in srgb, var(--primary) 94%, #000) 100%);
  background-color: var(--primary);
  color: var(--primary-foreground);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / .3),
    inset 0 -1px 0 rgb(0 0 0 / .12),
    0 1px 2px rgb(13 22 20 / .16);
}
.ui-btn-primary:hover {
  background-color: var(--primary-hover);
  color: var(--primary-foreground);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / .38),
    inset 0 -1px 0 rgb(0 0 0 / .12),
    0 2px 8px -1px color-mix(in srgb, var(--primary) 45%, transparent);
}

.ui-btn-destructive {
  background-image: linear-gradient(180deg,
      color-mix(in srgb, var(--destructive) 88%, #fff) 0%,
      var(--destructive) 52%,
      color-mix(in srgb, var(--destructive) 94%, #000) 100%);
  background-color: var(--destructive);
  color: var(--destructive-foreground);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / .28),
    inset 0 -1px 0 rgb(0 0 0 / .12),
    0 1px 2px rgb(13 22 20 / .16);
}
.ui-btn-destructive:hover {
  background-color: var(--destructive-hover);
  color: var(--destructive-foreground);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / .36),
    inset 0 -1px 0 rgb(0 0 0 / .12),
    0 2px 8px -1px color-mix(in srgb, var(--destructive) 42%, transparent);
}

.ui-btn-secondary {
  background-image: linear-gradient(180deg,
      color-mix(in srgb, var(--card) 70%, transparent) 0%,
      color-mix(in srgb, var(--secondary) 92%, transparent) 100%);
  background-color: var(--secondary);
  color: var(--secondary-foreground);
  border-color: var(--glass-border);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .7), 0 1px 2px rgb(13 22 20 / .07);
}
.ui-btn-secondary:hover { background-color: var(--secondary-hover); color: var(--secondary-foreground); }

.ui-btn-outline {
  background-image: linear-gradient(180deg,
      rgb(255 255 255 / .5) 0%,
      color-mix(in srgb, var(--card) 62%, transparent) 100%);
  background-color: color-mix(in srgb, var(--card) 62%, transparent);
  color: var(--foreground);
  border-color: var(--glass-border);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .75), 0 1px 2px rgb(13 22 20 / .07);
}
.ui-btn-outline:hover {
  background-color: color-mix(in srgb, var(--card) 88%, transparent);
  border-color: var(--border-strong);
  color: var(--foreground);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .85), 0 2px 6px -1px rgb(13 22 20 / .1);
}

.ui-btn-ghost { background-color: transparent; color: var(--foreground); }
.ui-btn-ghost:hover {
  background-image: linear-gradient(180deg, rgb(255 255 255 / .35) 0%, transparent 100%);
  background-color: color-mix(in srgb, var(--muted) 80%, transparent);
  color: var(--foreground);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .55);
}

/* Las variantes translúcidas sí desenfocan: descansan sobre vidrio o sobre el
   fondo, y ahí el efecto se nota. */
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .ui-btn-outline, .ui-btn-secondary, .ui-btn-ghost:hover {
    backdrop-filter: blur(10px) saturate(150%);
    -webkit-backdrop-filter: blur(10px) saturate(150%);
  }
}

/* Se hunde al pulsar, no se desplaza: una pieza de vidrio no se mueve de sitio */
.ui-btn:active:not(:disabled) {
  box-shadow: inset 0 2px 4px rgb(0 0 0 / .16);
  transform: translateY(0.5px);
}

[data-theme="dark"] .ui-btn-outline {
  background-image: linear-gradient(180deg, rgb(255 255 255 / .07) 0%, transparent 100%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .1), 0 1px 2px rgb(0 0 0 / .35);
}
[data-theme="dark"] .ui-btn-secondary { box-shadow: inset 0 1px 0 rgb(255 255 255 / .08), 0 1px 2px rgb(0 0 0 / .35); }
[data-theme="dark"] .ui-btn-ghost:hover { box-shadow: inset 0 1px 0 rgb(255 255 255 / .07); }

.ui-btn-link { background: none; color: var(--primary); height: auto; padding: 0; }
.ui-btn-link:hover { text-decoration: underline; }

.ui-btn-sm   { height: var(--control-sm); padding: 0 var(--space-3); font-size: var(--text-sm); }
.ui-btn-lg   { height: var(--control-lg); padding: 0 var(--space-5); font-size: var(--text-md); }
.ui-btn-icon { width: var(--control); padding: 0; }
.ui-btn-icon.ui-btn-sm { width: var(--control-sm); }
.ui-btn-icon.ui-btn-lg { width: var(--control-lg); }
.ui-btn-block { width: 100%; }

.ui-btn-group { display: inline-flex; }
.ui-btn-group > .ui-btn { border-radius: 0; margin-left: -1px; }
.ui-btn-group > .ui-btn:first-child { border-radius: var(--radius) 0 0 var(--radius); margin-left: 0; }
.ui-btn-group > .ui-btn:last-child  { border-radius: 0 var(--radius) var(--radius) 0; }
.ui-btn-group > .ui-btn:hover { position: relative; z-index: 1; }

/* ── 5. SUPERFICIES ──────────────────────────────────────────────────────── */

.ui-card {
  background-color: var(--card);
  color: var(--card-foreground);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.ui-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--pad-card-y) var(--pad-card-x);
  border-bottom: 1px solid var(--border);
}
.ui-card-title { font-size: var(--text-lg); font-weight: 600; letter-spacing: var(--tracking-tight); }
.ui-card-desc  { font-size: var(--text-sm); color: var(--muted-foreground); margin-top: 2px; line-height: 1.45; }
.ui-card-body   { padding: var(--pad-card-x); }
.ui-card-body-flush { padding: 0; }
.ui-card-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
  padding: var(--pad-card-y) var(--pad-card-x);
  border-top: 1px solid var(--border);
  background: var(--muted);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

/* Tarjeta de indicador — solo cuando la cifra es el punto de la pantalla */
.ui-stat { padding: var(--pad-card-y) var(--pad-card-x); }
.ui-stat-label {
  font-size: var(--text-2xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--muted-foreground);
}
.ui-stat-value {
  font-size: var(--stat-size);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin-top: var(--space-1);
  font-variant-numeric: tabular-nums;
}
.ui-stat-meta { font-size: var(--text-xs); color: var(--muted-foreground); margin-top: var(--space-1); }

/* 5.2 Tabla */
.ui-table-wrap {
  width: 100%;
  overflow-x: auto;
  border-radius: var(--radius-lg);
}
.ui-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}
.ui-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--muted);
  padding: var(--pad-cell-y) var(--pad-cell-x);
  font-size: var(--text-2xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--muted-foreground);
  text-align: left;
  white-space: nowrap;
  border-bottom: 1px solid var(--border);
}
.ui-table tbody td {
  padding: var(--pad-cell-y) var(--pad-cell-x);
  border-bottom: 1px solid var(--border);
  color: var(--foreground);
  vertical-align: middle;
}
.ui-table tbody tr:last-child td { border-bottom: none; }
.ui-table tbody tr { transition: background-color var(--duration) var(--ease); }
.ui-table tbody tr:hover td { background-color: var(--muted); }
.ui-table .ui-td-num { text-align: right; font-variant-numeric: tabular-nums; }
.ui-table .ui-td-tight { width: 1%; white-space: nowrap; }

/* El texto que puede crecer nunca se recorta en seco */
.ui-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

/* 5.3 Distintivo */
.ui-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0.1875rem var(--space-2);
  font-size: var(--text-2xs);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0.01em;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  white-space: nowrap;
}
.ui-badge-neutral     { background: var(--muted); color: var(--muted-foreground); border-color: var(--border); }
.ui-badge-primary     { background: var(--primary-subtle); color: var(--primary); border-color: var(--primary-border); }
.ui-badge-success     { background: var(--success-subtle); color: var(--success); border-color: var(--success-border); }
.ui-badge-warning     { background: var(--warning-subtle); color: var(--warning); border-color: var(--warning-border); }
.ui-badge-destructive { background: var(--destructive-subtle); color: var(--destructive); border-color: var(--destructive-border); }
.ui-badge-info        { background: var(--info-subtle); color: var(--info); border-color: var(--info-border); }
.ui-badge-solid       { background: var(--primary); color: var(--primary-foreground); }

/* Punto de estado */
.ui-dot { width: 0.5rem; height: 0.5rem; border-radius: var(--radius-full); flex-shrink: 0; display: inline-block; }
.ui-dot-success     { background: var(--success); }
.ui-dot-warning     { background: var(--warning); }
.ui-dot-destructive { background: var(--destructive); }
.ui-dot-neutral     { background: var(--muted-foreground); }
.ui-dot-live { background: var(--success); box-shadow: 0 0 0 0 color-mix(in srgb, var(--success) 60%, transparent); animation: ui-pulse 2s var(--ease) infinite; }
@keyframes ui-pulse {
  70%  { box-shadow: 0 0 0 6px color-mix(in srgb, var(--success) 0%, transparent); }
  100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--success) 0%, transparent); }
}

/* 5.4 Separador y estado vacío */
.ui-separator { height: 1px; background: var(--border); border: 0; margin: var(--space-4) 0; }
.ui-separator-v { width: 1px; align-self: stretch; background: var(--border); }

.ui-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--space-2); padding: var(--space-7) var(--space-5); text-align: center;
}
.ui-empty i { font-size: 1.75rem; color: var(--muted-foreground); }
.ui-empty-title { font-size: var(--text-md); font-weight: 600; }
.ui-empty-desc  { font-size: var(--text-sm); color: var(--muted-foreground); max-width: 42ch; }

/* ── 6. SOBRECAPAS ───────────────────────────────────────────────────────── */

/* 6.1 Velo compartido por drawer y dialog */
.ui-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  /* El desenfoque se hace aquí. backdrop-filter trabaja sobre lo que el
     compositor ya tiene pintado, en vez de obligar a rasterizar de nuevo todo
     el DOM como hace filter, así que es bastante más barato.
     Requiere que el contenido quede por debajo en el orden de apilado
     (#wrapper va en z-index 1, el velo en 900) y que las sobrecapas cuelguen
     del body — de eso se encarga ui.js al cargar. */
  background: rgb(12 20 18 / .26);
  opacity: 0;
  visibility: hidden;
  transition: opacity .22s var(--ease), visibility .22s var(--ease);
}
.ui-overlay[data-open] { opacity: 1; visibility: visible; }

/* 6.2 Drawer (panel lateral) */
.ui-drawer {
  position: fixed;
  z-index: var(--z-drawer);
  display: flex;
  flex-direction: column;
  background: var(--popover);
  color: var(--popover-foreground);
  box-shadow: var(--shadow-xl);
  transition: transform 0.28s var(--ease), visibility 0.28s var(--ease);
  visibility: hidden;
}
.ui-drawer[data-open] { visibility: visible; }
.ui-drawer > .ui-overlay { display: none; }

.ui-drawer-right, .ui-drawer-left {
  top: 0; bottom: 0;
  width: min(30rem, 100vw);
  max-width: 100vw;
}
.ui-drawer-right { right: 0; border-left: 1px solid var(--border); transform: translateX(100%); }
.ui-drawer-left  { left: 0;  border-right: 1px solid var(--border); transform: translateX(-100%); }
.ui-drawer-top, .ui-drawer-bottom {
  left: 0; right: 0;
  max-height: 92vh;
}
.ui-drawer-top    { top: 0;    border-bottom: 1px solid var(--border); transform: translateY(-100%); border-radius: 0 0 var(--radius-xl) var(--radius-xl); }
.ui-drawer-bottom { bottom: 0; border-top: 1px solid var(--border);    transform: translateY(100%);  border-radius: var(--radius-xl) var(--radius-xl) 0 0; }
.ui-drawer[data-open] { transform: translate(0, 0); }

.ui-drawer-sm { width: min(22rem, 100vw); }
.ui-drawer-lg { width: min(44rem, 100vw); }
.ui-drawer-xl { width: min(60rem, 100vw); }

.ui-drawer-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.ui-drawer-title { font-size: var(--text-lg); font-weight: 600; letter-spacing: var(--tracking-tight); }
.ui-drawer-desc  { font-size: var(--text-sm); color: var(--muted-foreground); margin-top: var(--space-1); line-height: 1.45; }
.ui-drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--pad-card-x);
}
.ui-drawer-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--border);
  background: var(--muted);
  flex-shrink: 0;
}
/* Asa para el drawer inferior */
.ui-drawer-bottom .ui-drawer-header::before {
  content: '';
  position: absolute;
  top: var(--space-2); left: 50%;
  transform: translateX(-50%);
  width: 2.25rem; height: 4px;
  background: var(--border-strong);
  border-radius: var(--radius-full);
}
.ui-drawer-bottom .ui-drawer-header { position: relative; padding-top: var(--space-5); }

/* 6.3 Diálogo centrado */
.ui-dialog {
  position: fixed;
  z-index: var(--z-dialog);
  top: 50%; left: 50%;
  width: min(32rem, calc(100vw - 2rem));
  max-height: calc(100vh - 4rem);
  display: flex;
  flex-direction: column;
  background: var(--popover);
  color: var(--popover-foreground);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  opacity: 0;
  visibility: hidden;
  /* La posición no se anima. Un transform en movimiento hace que Chrome
     rasterice el backdrop-filter a resolución reducida, y el desenfoque sale
     escalonado. Se anima sólo la opacidad. */
  transform: translate(-50%, -50%);
  transition: opacity var(--duration) var(--ease),
              visibility var(--duration) var(--ease);
}
.ui-dialog[data-open] { opacity: 1; visibility: visible; }
.ui-dialog-sm { width: min(24rem, calc(100vw - 2rem)); }
.ui-dialog-lg { width: min(48rem, calc(100vw - 2rem)); }
.ui-dialog-xl { width: min(72rem, calc(100vw - 2rem)); }
.ui-dialog-header { padding: var(--space-5) var(--space-5) var(--space-4); }
.ui-dialog-title  { font-size: var(--text-lg); font-weight: 600; letter-spacing: var(--tracking-tight); }
.ui-dialog-desc   { font-size: var(--text-sm); color: var(--muted-foreground); margin-top: var(--space-2); line-height: var(--leading-normal); }
.ui-dialog-body   { padding: 0 var(--space-5) var(--space-5); overflow-y: auto; }
.ui-dialog-footer {
  display: flex; align-items: center; justify-content: flex-end; gap: var(--space-2);
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--border);
  background: var(--muted);
  border-radius: 0 0 var(--radius-xl) var(--radius-xl);
}
@media (max-width: 640px) {
  .ui-dialog-footer { flex-direction: column-reverse; }
  .ui-dialog-footer .ui-btn { width: 100%; }
}

/* Botón de cierre común a drawer y dialog */
.ui-close {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.75rem; height: 1.75rem;
  flex-shrink: 0;
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--muted-foreground);
  font-size: var(--text-md);
  cursor: pointer;
  transition: background-color var(--duration) var(--ease), color var(--duration) var(--ease);
}
.ui-close:hover { background: var(--muted); color: var(--foreground); }

/* 6.4 Menú desplegable */
.ui-menu {
  position: absolute;
  z-index: var(--z-dialog);
  min-width: 11rem;
  padding: var(--space-1);
  background: var(--popover);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity var(--duration) var(--ease),
              transform var(--duration) var(--ease),
              visibility var(--duration) var(--ease);
}
.ui-menu[data-open] { opacity: 1; visibility: visible; transform: translateY(0); }
.ui-menu-item {
  display: flex; align-items: center; gap: var(--space-2);
  width: 100%;
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-base);
  color: var(--foreground);
  background: none; border: 0;
  border-radius: var(--radius-sm);
  text-align: left;
  cursor: pointer;
  transition: background-color var(--duration) var(--ease);
}
.ui-menu-item:hover { background: var(--muted); text-decoration: none; color: var(--foreground); }
.ui-menu-item-destructive { color: var(--destructive); }
.ui-menu-item-destructive:hover { background: var(--destructive-subtle); color: var(--destructive); }
.ui-menu-label { padding: var(--space-2) var(--space-3) var(--space-1); font-size: var(--text-2xs); font-weight: 600; text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--muted-foreground); }
.ui-menu-sep { height: 1px; background: var(--border); margin: var(--space-1) 0; }

/* 6.5 Avisos flotantes */
.ui-toaster {
  position: fixed;
  bottom: var(--space-5);
  right: var(--space-5);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-width: min(24rem, calc(100vw - 2rem));
  pointer-events: none;
}
.ui-toast {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--popover);
  border: 1px solid var(--border);
  border-left: 3px solid var(--muted-foreground);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  font-size: var(--text-base);
  color: var(--foreground);
  pointer-events: auto;
  animation: ui-toast-in 0.22s var(--ease);
}
.ui-toast[data-leaving] { animation: ui-toast-out 0.18s var(--ease) forwards; }
.ui-toast-success     { border-left-color: var(--success); }
.ui-toast-warning     { border-left-color: var(--warning); }
.ui-toast-destructive { border-left-color: var(--destructive); }
.ui-toast-info        { border-left-color: var(--info); }
.ui-toast i { font-size: var(--text-md); flex-shrink: 0; margin-top: 1px; }
.ui-toast-success i     { color: var(--success); }
.ui-toast-warning i     { color: var(--warning); }
.ui-toast-destructive i { color: var(--destructive); }
.ui-toast-info i        { color: var(--info); }
.ui-toast-content { flex: 1; min-width: 0; }
.ui-toast-title { font-weight: 600; line-height: 1.35; }
.ui-toast-desc  { font-size: var(--text-sm); color: var(--muted-foreground); margin-top: 2px; line-height: 1.4; }
@keyframes ui-toast-in  { from { opacity: 0; transform: translateY(8px) scale(.98); } }
@keyframes ui-toast-out { to   { opacity: 0; transform: translateX(12px); } }

body.ui-scroll-locked { overflow: hidden; }

/* ── Desenfoque de fondo al abrir una sobrecapa ──────────────────────────────
   Camino principal: lo desenfoca el velo con backdrop-filter. Opera sobre la
   textura ya compuesta, no re-rasteriza el DOM, y lo lleva la GPU. Lo único
   que se anima es la opacidad del propio velo, nunca el radio del desenfoque:
   animar un desenfoque obliga a recalcularlo en cada fotograma.

   Reserva, para navegadores sin backdrop-filter: se desenfoca el contenido con
   filter. Más caro, pero universal.

   En los dos casos el diálogo queda nítido por construcción, no por z-index:
   ui.js cuelga toda sobrecapa del body, así que ninguna está dentro de
   #wrapper ni detrás del velo.
   -------------------------------------------------------------------------- */
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .ui-overlay {
    backdrop-filter: blur(14px) saturate(125%);
    -webkit-backdrop-filter: blur(14px) saturate(125%);
  }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  body.ui-blur-back #wrapper,
  body.ui-blur-back .app-bg { filter: blur(10px); }
  body.ui-blur-back .app-bg::after { display: none; }
}

@media (prefers-reduced-transparency: reduce) {
  .ui-overlay { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgb(12 20 18 / .55); }
  body.ui-blur-back #wrapper,
  body.ui-blur-back .app-bg { filter: none; }
}

/* ── 7. NAVEGACIÓN ───────────────────────────────────────────────────────── */

/* 7.1 Pestañas */
.ui-tabs { display: flex; gap: var(--space-1); padding: var(--space-1); background: var(--muted); border-radius: var(--radius); }
.ui-tab {
  flex: 1;
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--muted-foreground);
  background: none; border: 0;
  border-radius: var(--radius-sm);
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--duration) var(--ease), color var(--duration) var(--ease);
}
.ui-tab:hover { color: var(--foreground); }
.ui-tab[data-active] { background: var(--card); color: var(--foreground); box-shadow: var(--shadow-xs); }
.ui-tab-panel { display: none; }
.ui-tab-panel[data-active] { display: block; }

/* Pestañas subrayadas, para navegación de página */
.ui-tabs-line { display: flex; gap: var(--space-5); border-bottom: 1px solid var(--border); padding: 0; background: none; border-radius: 0; }
.ui-tabs-line .ui-tab {
  flex: 0 0 auto;
  padding: var(--space-3) 0;
  border-radius: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.ui-tabs-line .ui-tab[data-active] { background: none; box-shadow: none; color: var(--foreground); border-bottom-color: var(--primary); }

/* 7.2 Cabecera de página */
.ui-page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: 0;
}
.ui-page-title { font-size: var(--text-2xl); font-weight: 600; letter-spacing: -0.02em; }
.ui-page-desc  { font-size: var(--text-sm); color: var(--muted-foreground); margin-top: var(--space-1); }
.ui-page-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }

/* 7.3 Barra de herramientas / filtros */
.ui-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--pad-card-x);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
}
.ui-toolbar-spacer { flex: 1; min-width: var(--space-2); }

/* ── 8. PUENTE CON BOOTSTRAP ─────────────────────────────────────────────────
   Bootstrap sigue cargado y las plantillas actuales usan sus clases. Aquí se
   le enseña a Bootstrap el sistema, para que las pantallas todavía no migradas
   mejoren solas en vez de quedarse a medio camino.
   -------------------------------------------------------------------------- */
.btn {
  --bs-btn-font-family: var(--font-sans);
  --bs-btn-font-size: var(--text-base);
  --bs-btn-font-weight: 500;
  --bs-btn-border-radius: var(--radius);
  --bs-btn-padding-y: 0;
  --bs-btn-padding-x: var(--space-4);
  height: var(--control);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  letter-spacing: var(--tracking-tight);
}
.btn-sm { height: var(--control-sm); --bs-btn-font-size: var(--text-sm); --bs-btn-padding-x: var(--space-3); }
.btn-lg { height: var(--control-lg); --bs-btn-font-size: var(--text-md); }

.btn-primary {
  --bs-btn-bg: var(--primary); --bs-btn-border-color: var(--primary);
  --bs-btn-hover-bg: var(--primary-hover); --bs-btn-hover-border-color: var(--primary-hover);
  --bs-btn-active-bg: var(--primary-hover); --bs-btn-active-border-color: var(--primary-hover);
  --bs-btn-color: var(--primary-foreground); --bs-btn-hover-color: var(--primary-foreground);
  --bs-btn-disabled-bg: var(--primary); --bs-btn-disabled-border-color: var(--primary);
}
.btn-secondary {
  --bs-btn-bg: var(--secondary); --bs-btn-border-color: var(--border);
  --bs-btn-hover-bg: var(--secondary-hover); --bs-btn-hover-border-color: var(--border-strong);
  --bs-btn-color: var(--secondary-foreground); --bs-btn-hover-color: var(--secondary-foreground);
}
.btn-danger {
  --bs-btn-bg: var(--destructive); --bs-btn-border-color: var(--destructive);
  --bs-btn-hover-bg: var(--destructive-hover); --bs-btn-hover-border-color: var(--destructive-hover);
  --bs-btn-color: var(--destructive-foreground); --bs-btn-hover-color: var(--destructive-foreground);
}
.btn-success {
  --bs-btn-bg: var(--success); --bs-btn-border-color: var(--success);
  --bs-btn-hover-bg: var(--primary-hover); --bs-btn-hover-border-color: var(--primary-hover);
  --bs-btn-color: var(--success-foreground); --bs-btn-hover-color: var(--success-foreground);
}
.btn-warning {
  --bs-btn-bg: var(--warning); --bs-btn-border-color: var(--warning);
  --bs-btn-color: var(--warning-foreground); --bs-btn-hover-color: var(--warning-foreground);
}
.btn-outline-primary, .btn-outline-secondary, .btn-outline-danger {
  --bs-btn-bg: var(--card);
  --bs-btn-border-color: var(--input);
  --bs-btn-color: var(--foreground);
  --bs-btn-hover-bg: var(--muted);
  --bs-btn-hover-border-color: var(--border-strong);
  --bs-btn-hover-color: var(--foreground);
}
.btn-outline-danger { --bs-btn-color: var(--destructive); --bs-btn-hover-bg: var(--destructive-subtle); --bs-btn-hover-color: var(--destructive); }
.btn-light { --bs-btn-bg: var(--muted); --bs-btn-border-color: var(--border); --bs-btn-color: var(--foreground); --bs-btn-hover-bg: var(--secondary-hover); --bs-btn-hover-color: var(--foreground); }

.form-control, .form-select {
  height: var(--control);
  padding: 0 var(--space-3);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  color: var(--foreground);
  background-color: var(--card);
  border: 1px solid var(--input);
  border-radius: var(--radius);
  box-shadow: var(--shadow-xs);
  transition: border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}
textarea.form-control { height: auto; padding: var(--space-2) var(--space-3); min-height: calc(var(--control) * 2); }
.form-control:focus, .form-select:focus {
  border-color: var(--ring);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 18%, transparent);
  background-color: var(--card);
  color: var(--foreground);
}
.form-control::placeholder { color: var(--muted-foreground); }
.form-control:disabled, .form-select:disabled { background-color: var(--muted); color: var(--muted-foreground); }
.form-control-sm, .form-select-sm { height: var(--control-sm); font-size: var(--text-sm); padding: 0 var(--space-2); }
.form-control-lg, .form-select-lg { height: var(--control-lg); font-size: var(--text-md); }
.form-select {
  padding-right: calc(var(--space-3) + 1.25rem);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364756f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-position: right var(--space-3) center;
  background-size: 1rem;
}
[data-theme="dark"] .form-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238a9c98' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}
.form-label { font-size: var(--text-sm); font-weight: 500; color: var(--foreground); margin-bottom: var(--space-2); }
.form-text  { font-size: var(--text-xs); color: var(--muted-foreground); }

.form-check-input {
  width: 1rem; height: 1rem;
  margin-top: 0.2rem;
  background-color: var(--card);
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-xs);
}
.form-check-input:checked { background-color: var(--primary); border-color: var(--primary); }
.form-check-input:focus { border-color: var(--ring); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 18%, transparent); }
.form-check-input:disabled { opacity: .5; }
.form-check-label { font-size: var(--text-base); color: var(--foreground); }
.form-switch .form-check-input { width: 2.25rem; height: 1.25rem; border-radius: var(--radius-full); }

.card {
  background-color: var(--card);
  color: var(--card-foreground);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.card-header {
  background-color: var(--card);
  border-bottom: 1px solid var(--border);
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
  color: var(--foreground);
  padding: var(--pad-card-y) var(--pad-card-x);
}
.card-body   { padding: var(--pad-card-x); }
.card-footer { background-color: var(--muted); border-top: 1px solid var(--border); padding: var(--pad-card-y) var(--pad-card-x); }

.table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--foreground);
  --bs-table-border-color: var(--border);
  --bs-table-hover-bg: var(--muted);
  --bs-table-hover-color: var(--foreground);
  --bs-table-striped-bg: var(--muted);
  --bs-table-striped-color: var(--foreground);
  color: var(--foreground);
  font-size: var(--text-sm);
  margin-bottom: 0;
}
.table > thead > tr > th {
  background: var(--muted);
  padding: var(--pad-cell-y) var(--pad-cell-x);
  font-size: var(--text-2xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--muted-foreground);
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.table > tbody > tr > td {
  padding: var(--pad-cell-y) var(--pad-cell-x);
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}

.modal-content {
  background-color: var(--popover);
  color: var(--popover-foreground);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
}
.modal-header { border-bottom: 1px solid var(--border); padding: var(--space-5); }
.modal-title  { font-size: var(--text-lg); font-weight: 600; letter-spacing: var(--tracking-tight); }
.modal-body   { padding: var(--space-5); font-size: var(--text-base); }
.modal-footer { border-top: 1px solid var(--border); background: var(--muted); padding: var(--space-4) var(--space-5); border-radius: 0 0 var(--radius-xl) var(--radius-xl); }
.modal-backdrop.show { opacity: .45; }

.alert {
  font-size: var(--text-base);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  border-left-width: 3px;
  padding: var(--space-3) var(--space-4);
  color: var(--foreground);
  background: var(--card);
  box-shadow: var(--shadow-xs);
}
/* El color entra por el filo izquierdo y se apaga hacia la derecha, en vez de
   teñir el bloque entero de plano. Va en `background-image` sobre el
   `background-color` de `.alert`: así el degradado es lo único que cambia y el
   color de respaldo sigue siendo el de la tarjeta si el navegador no entiende
   `color-mix`. */
.alert-success { border-left-color: var(--success);     border-color: var(--success-border);
                 background-image: linear-gradient(100deg, var(--success-subtle) 0%,
                                   color-mix(in srgb, var(--success-subtle) 55%, var(--card)) 45%,
                                   var(--card) 100%); }
.alert-danger  { border-left-color: var(--destructive); border-color: var(--destructive-border);
                 background-image: linear-gradient(100deg, var(--destructive-subtle) 0%,
                                   color-mix(in srgb, var(--destructive-subtle) 55%, var(--card)) 45%,
                                   var(--card) 100%); }
.alert-warning { border-left-color: var(--warning);     border-color: var(--warning-border);
                 background-image: linear-gradient(100deg, var(--warning-subtle) 0%,
                                   color-mix(in srgb, var(--warning-subtle) 55%, var(--card)) 45%,
                                   var(--card) 100%); }
.alert-info    { border-left-color: var(--info);        border-color: var(--info-border);
                 background-image: linear-gradient(100deg, var(--info-subtle) 0%,
                                   color-mix(in srgb, var(--info-subtle) 55%, var(--card)) 45%,
                                   var(--card) 100%); }

.badge { font-size: var(--text-2xs); font-weight: 600; border-radius: var(--radius-sm); padding: 0.1875rem var(--space-2); }
.dropdown-menu {
  background: var(--popover); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: var(--space-1);
  font-size: var(--text-base);
}
.dropdown-item { border-radius: var(--radius-sm); padding: var(--space-2) var(--space-3); color: var(--foreground); }
.dropdown-item:hover, .dropdown-item:focus { background: var(--muted); color: var(--foreground); }

.nav-tabs { border-bottom-color: var(--border); }
.nav-tabs .nav-link { color: var(--muted-foreground); border: 0; border-bottom: 2px solid transparent; font-size: var(--text-base); font-weight: 500; }
.nav-tabs .nav-link.active { color: var(--foreground); background: none; border-bottom-color: var(--primary); }

.btn-close { filter: none; opacity: .55; }
.btn-close:hover { opacity: 1; }
[data-theme="dark"] .btn-close { filter: invert(1) grayscale(1) brightness(2); }

/* ── 9. UTILIDADES E IMPRESIÓN ───────────────────────────────────────────── */
.ui-stack   { display: flex; flex-direction: column; gap: var(--space-4); }
.ui-stack-sm{ display: flex; flex-direction: column; gap: var(--space-2); }
.ui-row     { display: flex; align-items: center; gap: var(--space-2); }
.ui-row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.ui-grid    { display: grid; gap: var(--space-4); }
.ui-grid-2  { grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.ui-grid-3  { grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); }
.ui-grid-4  { grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr)); }

.ui-text-muted { color: var(--muted-foreground); }
.ui-text-xs    { font-size: var(--text-xs); }
.ui-text-sm    { font-size: var(--text-sm); }
.ui-text-lg    { font-size: var(--text-lg); }
.ui-label-caps {
  font-size: var(--text-2xs); font-weight: 600; text-transform: uppercase;
  letter-spacing: var(--tracking-wide); color: var(--muted-foreground);
}
.ui-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@media print {
  .ui-drawer, .ui-dialog, .ui-overlay, .ui-toaster, .d-print-none { display: none !important; }
  body { background: #fff; color: #000; }
  .ui-card, .card { border: 1px solid #ccc; box-shadow: none; break-inside: avoid; }
  .ui-table thead th { position: static; background: #f0f0f0; color: #000; }
}

/* ── 10. COMPATIBILIDAD DE CLASES ────────────────────────────────────────────
   Clases que las plantillas todavía no migradas usan y que antes vivían en el
   <style> de layout.html. Aquí quedan atadas al sistema para que esas pantallas
   sigan pintando mientras se migran una por una.
   Al migrar una plantilla, cambiar por las primitivas .ui-* y borrar de aquí.
   -------------------------------------------------------------------------- */

/* Botones "liquid" → variantes del botón del sistema */
.lbtn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  height: var(--control); padding: 0 var(--space-4);
  font-family: var(--font-sans); font-size: var(--text-base); font-weight: 500;
  line-height: 1; letter-spacing: var(--tracking-tight); white-space: nowrap;
  background: var(--card); color: var(--foreground);
  border: 1px solid var(--input); border-radius: var(--radius);
  box-shadow: var(--shadow-xs); cursor: pointer; text-decoration: none;
  transition: background-color var(--duration) var(--ease),
              border-color var(--duration) var(--ease),
              color var(--duration) var(--ease);
}
.lbtn:hover { background: var(--muted); border-color: var(--border-strong); color: var(--foreground); text-decoration: none; }
.lbtn:disabled, .lbtn[disabled] { opacity: .5; pointer-events: none; }
.lbtn-primary   { background: var(--primary); border-color: var(--primary); color: var(--primary-foreground); }
.lbtn-primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); color: var(--primary-foreground); }
.lbtn-secondary { background: var(--secondary); border-color: var(--border); color: var(--secondary-foreground); }
.lbtn-secondary:hover { background: var(--secondary-hover); color: var(--secondary-foreground); }
.lbtn-dark      { background: var(--foreground); border-color: var(--foreground); color: var(--background); }
.lbtn-dark:hover { background: var(--secondary-foreground); border-color: var(--secondary-foreground); color: var(--background); }
.lbtn-danger    { background: var(--destructive); border-color: var(--destructive); color: var(--destructive-foreground); }
.lbtn-danger:hover { background: var(--destructive-hover); color: var(--destructive-foreground); }

/* Superficie flotante → tarjeta del sistema */
.isla {
  background: var(--card); color: var(--card-foreground);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
/* Solo lleva relleno propio si no trae cabecera/cuerpo con el suyo. */
.isla:not(:has(> .card-header, > .card-body, > .ui-card-header, > .ui-card-body)) {
  padding: var(--space-5);
}

/* Riel de color a la izquierda: codifica severidad sin depender del texto */
.riel-riesgo-limpia,
.riel-riesgo-info,
.riel-riesgo-medio,
.riel-riesgo-alto,
.riel-riesgo-critico { border-left: 3px solid var(--border-strong); }
.riel-riesgo-limpia  { border-left-color: var(--success); }
.riel-riesgo-info    { border-left-color: var(--info); }
.riel-riesgo-medio   { border-left-color: var(--warning); }
.riel-riesgo-alto    { border-left-color: var(--warning); }
.riel-riesgo-critico { border-left-color: var(--destructive); }

/* Tarjeta de indicador */
.kpi-card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
  padding: var(--space-4) var(--space-5);
}
.kpi-icon {
  display: grid; place-items: center;
  width: 2.25rem; height: 2.25rem; margin-bottom: var(--space-3);
  background: var(--muted); color: var(--muted-foreground);
  border-radius: var(--radius); font-size: var(--text-md);
}
.kpi-label {
  font-size: var(--text-2xs); font-weight: 600; text-transform: uppercase;
  letter-spacing: var(--tracking-wide); color: var(--muted-foreground);
}
.kpi-value {
  font-size: var(--text-3xl); font-weight: 600; letter-spacing: -0.02em;
  line-height: 1.1; margin-top: var(--space-1);
  font-variant-numeric: tabular-nums; color: var(--foreground);
}

/* Tipografía de cifra destacada */
.font-display { font-family: var(--font-sans); font-weight: 600; letter-spacing: -0.02em; }

/* Punto de estado heredado (.dot dentro de insignias) */
.dot { width: .5rem; height: .5rem; border-radius: var(--radius-full); display: inline-block; flex-shrink: 0; background: var(--muted-foreground); }
.dot-online, .status-dot.dot-online   { background: var(--success); }
.dot-offline, .status-dot.dot-offline { background: var(--destructive); }
.status-dot { width: .625rem; height: .625rem; border-radius: var(--radius-full); display: inline-block; }

.hover-link { color: inherit; text-decoration: none; transition: color var(--duration) var(--ease); }
.hover-link:hover { color: var(--primary); text-decoration: none; }

.transition-all { transition: all var(--duration) var(--ease); }

/* Giro de carga y parpadeo de break activo */
.spin { display: inline-block; animation: ui-spin 0.9s linear infinite; }
@keyframes ui-spin { to { transform: rotate(360deg); } }
.blink { animation: ui-blink 1.8s var(--ease) infinite; }
@keyframes ui-blink { 50% { opacity: .42; } }

/* ── 11. VIDRIO ──────────────────────────────────────────────────────────────
   El vidrio necesita tres cosas para leerse como vidrio y no como un panel
   gris: algo detrás que desenfocar, un borde especular arriba, y opacidad
   suficiente para que el texto encima siga siendo legible.
   -------------------------------------------------------------------------- */
:root {
  /* Tres niveles. El error anterior era usar 86 % en todo: con sólo un 14 %
     de transparencia el desenfoque no tiene nada que desenfocar. */
  --glass-thin:     color-mix(in srgb, var(--card) 52%, transparent);  /* decorativo */
  --glass:          color-mix(in srgb, var(--card) 64%, transparent);  /* sobrecapas */
  --glass-strong:   color-mix(in srgb, var(--card) 78%, transparent);  /* texto denso */
  --glass-blur:     blur(26px) saturate(180%);
  --glass-edge:     inset 0 1px 0 rgb(255 255 255 / .6);
  --glass-border:   color-mix(in srgb, var(--border) 55%, transparent);
}
[data-theme="dark"] {
  --glass-thin:     color-mix(in srgb, var(--card) 44%, transparent);
  --glass:          color-mix(in srgb, var(--card) 56%, transparent);
  --glass-strong:   color-mix(in srgb, var(--card) 72%, transparent);
  --glass-edge:     inset 0 1px 0 rgb(255 255 255 / .1);
  --glass-border:   color-mix(in srgb, var(--border-strong) 65%, transparent);
}

.ui-glass {
  background: var(--glass-strong);
  border-color: var(--glass-border);
  box-shadow: var(--glass-edge), var(--shadow-md);
}
.ui-glass-thin { background: var(--glass); }

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .ui-glass, .ui-glass-thin {
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
  }
  /* Las capas que flotan sobre el contenido son vidrio siempre */
  /* Sobre el velo ya desenfocado, estos dos van luminosos y nítidos: una
     superficie casi opaca con un brillo diagonal y un filo especular arriba.
     Ese contraste entre fondo borroso y panel brillante es el efecto; hacer
     translúcido el panel lo apaga. */
  .ui-drawer, .ui-dialog {
    background:
      linear-gradient(150deg,
        color-mix(in srgb, var(--card) 97%, #fff) 0%,
        var(--card) 46%,
        color-mix(in srgb, var(--card) 94%, var(--primary)) 100%);
    border-color: color-mix(in srgb, #fff 55%, var(--border));
    box-shadow:
      inset 0 1px 0 rgb(255 255 255 / .85),
      inset 0 0 0 1px rgb(255 255 255 / .28),
      var(--shadow-xl);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .ui-menu, .ui-toast {
    background: var(--glass-strong);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border-color: var(--glass-border);
    box-shadow: var(--glass-edge), var(--shadow-lg);
  }

  /* En oscuro el brillo va contenido: un filo tenue y un realce frío en la
     diagonal, en vez del blanco del tema claro. */
  [data-theme="dark"] .ui-drawer,
  [data-theme="dark"] .ui-dialog {
    background:
      linear-gradient(150deg,
        color-mix(in srgb, var(--card) 88%, #fff) 0%,
        var(--card) 48%,
        color-mix(in srgb, var(--card) 90%, var(--primary)) 100%);
    border-color: color-mix(in srgb, #fff 16%, var(--border-strong));
    box-shadow:
      inset 0 1px 0 rgb(255 255 255 / .14),
      inset 0 0 0 1px rgb(255 255 255 / .05),
      var(--shadow-xl);
  }
  [data-theme="dark"] .ui-overlay {
    background: rgb(0 0 0 / .42);
  }
  .ui-toolbar, .badge-live {
    background: var(--glass-strong);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border-color: var(--glass-border);
  }

  /* Cabeceras y pies heredan el vidrio en vez de tapar con un sólido */
  .ui-glass > .ui-card-header,
  .ui-drawer-header, .ui-dialog-header { background: transparent; }
  .ui-glass > .ui-card-footer,
  .ui-drawer-footer, .ui-dialog-footer {
    background: color-mix(in srgb, var(--muted) 55%, transparent);
  }
  /* El interior de una tabla se queda opaco: ahí manda la lectura */
  .ui-glass .ui-table thead th { background: color-mix(in srgb, var(--muted) 82%, transparent); }
}

/* Quien pida menos transparencia recibe superficies sólidas */
@media (prefers-reduced-transparency: reduce) {
  .ui-glass, .ui-glass-thin, .ui-drawer, .ui-dialog, .ui-menu, .ui-toast,
  .ui-toolbar, .badge-live, #sidebar, .top-navbar {
    background: var(--card) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}

/* ── 12. RITMO DE PÁGINA ─────────────────────────────────────────────────────
   El desorden de los paneles venía de que cada bloque traía su propio margen
   (mb-1, mb-4, mb-5, mt-4, pb-2 pt-1). Aquí el espaciado lo decide el
   contenedor, una sola vez, y los hijos no lo tocan.
   -------------------------------------------------------------------------- */
.ui-page {
  display: flex;
  flex-direction: column;
  gap: var(--gap-section);
}
.ui-page-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-bottom: var(--gap-section);
}
.ui-page-section:last-child { margin-bottom: 0; }

/* Encabezado de sección: separa grupos sin necesidad de otra tarjeta */
.ui-section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--border);
}
.ui-section-title { font-size: var(--text-lg); font-weight: 600; letter-spacing: var(--tracking-tight); }

/* ── 13. DENSIDAD SEGÚN PANTALLA ─────────────────────────────────────────────
   Los call centers trabajan en 1366×768. Lo que se pierde ahí son filas de
   tabla, así que el disparador es el ALTO de la ventana, no el ancho: en un
   portátil de 1440 px de ancho pero 900 de alto no hay nada que comprimir.
   Se comprime el cromo y nunca el texto.
   -------------------------------------------------------------------------- */
@media (max-height: 820px) {
  :root {
    --pad-card-x: 0.9375rem;
    --pad-card-y: 0.625rem;
    --pad-cell-x: 0.6875rem;
    --pad-cell-y: 0.375rem;
    --gap-section: var(--space-4);
    --control-sm: 1.75rem;
    --control:    2rem;
    --stat-size:  1.625rem;
    --text-2xl:   1.5rem;
  }
  .ui-card-desc { font-size: var(--text-xs); }
}

/* Pantallas realmente cortas: se recupera cada línea de tabla que se pueda */
@media (max-height: 720px) {
  :root {
    --pad-card-x:  0.75rem;
    --pad-card-y:  0.5rem;
    --pad-cell-y:  0.3125rem;
    --gap-section: var(--space-3);
    --stat-size:   1.5rem;
  }
  .ui-page-desc { display: none; }
}

/* ── 14. TARJETAS DE INDICADOR CON DEGRADADO ─────────────────────────────────
   Tomado de la referencia de call center: superficie con degradado, una mini
   gráfica al fondo y la cifra encima.

   Se aparta de la referencia en el color. Allí los cuatro degradados son
   magenta, azul, naranja e índigo sin relación con el dato; aquí cada tono
   significa algo (verde cumple, ámbar atención, rojo riesgo), porque en una
   herramienta de operación el color tiene que poder leerse de un vistazo.
   -------------------------------------------------------------------------- */
.ui-stat-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-xl);
  border: 1px solid transparent;
  color: #fff;
  min-height: 6.5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--pad-card-x);
  isolation: isolate;
}
.ui-stat-card > * { position: relative; z-index: 2; }

/* La mini gráfica vive al fondo, a media opacidad */
.ui-stat-spark {
  position: absolute;
  inset: auto 0 0 0;
  height: 62%;
  z-index: 1;
  opacity: .38;
  pointer-events: none;
}
.ui-stat-spark svg { width: 100%; height: 100%; display: block; }

.ui-stat-card .ui-stat-card-label {
  font-size: var(--text-2xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  opacity: .82;
}
.ui-stat-card .ui-stat-card-value {
  font-size: var(--stat-size);
  font-weight: 650;
  letter-spacing: -0.02em;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
.ui-stat-card .ui-stat-card-meta {
  font-size: var(--text-xs);
  opacity: .85;
  margin-top: 2px;
}
.ui-stat-card .ui-stat-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

/* Tonos — atados al significado, no a la decoración */
.ui-stat-jade   { background: linear-gradient(135deg, #0f7355 0%, #16a37a 55%, #2fbd8f 100%); }
.ui-stat-indigo { background: linear-gradient(135deg, #1e3a8a 0%, #2f52b8 55%, #4b74e0 100%); }
.ui-stat-amber  { background: linear-gradient(135deg, #92500a 0%, #c47a12 55%, #e2a13a 100%); }
.ui-stat-slate  { background: linear-gradient(135deg, #1e2a33 0%, #33454f 55%, #4a616d 100%); }
.ui-stat-rose   { background: linear-gradient(135deg, #8f1d2a 0%, #b93342 55%, #dc5566 100%); }

/* Brillo especular superior, el mismo lenguaje que el vidrio */
.ui-stat-card::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgb(255 255 255 / .16) 0%, transparent 42%);
  pointer-events: none;
}

/* ── Baldosa de icono ────────────────────────────────────────────────────── */
.ui-icon-tile {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  flex-shrink: 0;
  border-radius: var(--radius);
  font-size: var(--text-base);
  background: var(--muted);
  color: var(--muted-foreground);
}
.ui-icon-tile-on-dark { background: rgb(255 255 255 / .18); color: #fff; }
.ui-icon-tile-jade    { background: var(--primary-subtle);     color: var(--primary); }
.ui-icon-tile-indigo  { background: var(--info-subtle);        color: var(--info); }
.ui-icon-tile-amber   { background: var(--warning-subtle);     color: var(--warning); }
.ui-icon-tile-rose    { background: var(--destructive-subtle); color: var(--destructive); }

/* ── Ficha de valor (el chip con la cifra de la referencia) ──────────────── */
.ui-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0.125rem var(--space-2);
  min-width: 2.75rem;
  justify-content: center;
  font-size: var(--text-xs);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  border-radius: var(--radius-sm);
  background: var(--info-subtle);
  color: var(--info);
}
.ui-chip-jade  { background: var(--primary-subtle);     color: var(--primary); }
.ui-chip-amber { background: var(--warning-subtle);     color: var(--warning); }
.ui-chip-rose  { background: var(--destructive-subtle); color: var(--destructive); }
.ui-chip-plain { background: var(--muted);              color: var(--muted-foreground); }

/* ── Medidor fino bajo una cifra ─────────────────────────────────────────── */
.ui-meter {
  height: 3px;
  border-radius: var(--radius-full);
  background: var(--muted);
  overflow: hidden;
  margin-top: var(--space-2);
}
.ui-meter > span {
  display: block;
  height: 100%;
  border-radius: var(--radius-full);
  background: var(--primary);
  transition: width .4s var(--ease);
}
.ui-meter-on-dark            { background: rgb(255 255 255 / .22); }
.ui-meter-on-dark > span     { background: #fff; }
.ui-meter-jade  > span { background: var(--success); }
.ui-meter-amber > span { background: var(--warning); }
.ui-meter-rose  > span { background: var(--destructive); }

/* ── Fila de indicadores bajo una gráfica ───────────────────────────────── */
.ui-stat-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
  gap: var(--pad-card-x);
  padding: var(--pad-card-x);
  border-top: 1px solid var(--border);
}
.ui-stat-strip-item { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.ui-stat-strip-head { display: flex; align-items: center; gap: var(--space-2); }
.ui-stat-strip-label{ font-size: var(--text-xs); color: var(--muted-foreground); }
.ui-stat-strip-value{ font-size: var(--text-lg); font-weight: 650; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }

/* ── Cabecera de tabla rellena ──────────────────────────────────────────── */
.ui-table-filled thead th {
  background: var(--primary);
  color: var(--primary-foreground);
  border-bottom: 0;
}
.ui-table-filled thead th:first-child { border-radius: var(--radius) 0 0 var(--radius); }
.ui-table-filled thead th:last-child  { border-radius: 0 var(--radius) var(--radius) 0; }

/* ── Barras horizontales comparativas ───────────────────────────────────── */
.ui-bar-row {
  display: grid;
  grid-template-columns: minmax(6rem, 1fr) minmax(5rem, 2fr) auto;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) 0;
}
.ui-bar-row + .ui-bar-row { border-top: 1px solid var(--border); }
.ui-bar-label { font-size: var(--text-sm); color: var(--foreground); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-bar-track { height: 7px; background: var(--muted); border-radius: var(--radius-full); overflow: hidden; }
.ui-bar-track > span { display: block; height: 100%; border-radius: var(--radius-full); background: var(--primary); }
.ui-bar-value { font-size: var(--text-xs); color: var(--muted-foreground); font-variant-numeric: tabular-nums; }

/* ── Grano dentro del vidrio ─────────────────────────────────────────────────
   El desenfoque suaviza tanto que vuelve a dejar superficies planas donde el
   escalonado de color se nota. Una pizca de ruido dentro del propio panel lo
   mantiene liso a cualquier tamaño.
   -------------------------------------------------------------------------- */
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  /* Sólo las tarjetas necesitan contexto: diálogo, panel lateral y menú ya
     vienen posicionados (fixed / absolute) y ponerles relative los devuelve
     al flujo del documento. */
  .ui-glass:not(.ui-drawer):not(.ui-dialog):not(.ui-menu) { position: relative; }
  .ui-glass::before,
  .ui-menu::before {
    content: '';
    position: absolute;
    inset: 0;
    /* Negativo: pinta sobre el fondo del panel pero por debajo del contenido.
       Con z-index 0 quedaría por encima del texto. */
    z-index: -1;
    pointer-events: none;
    border-radius: inherit;
    opacity: .028;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23g)'/%3E%3C/svg%3E");
    background-size: 140px 140px;
  }
}

/* Los botones de Bootstrap que aún quedan en plantillas sin migrar reciben el
   mismo tratamiento, para que no convivan dos acabados distintos. */
.btn-primary, .btn-success {
  background-image: linear-gradient(180deg, rgb(255 255 255 / .22) 0%, transparent 55%, rgb(0 0 0 / .08) 100%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .28), 0 1px 2px rgb(13 22 20 / .16);
}
.btn-danger, .btn-warning {
  background-image: linear-gradient(180deg, rgb(255 255 255 / .2) 0%, transparent 55%, rgb(0 0 0 / .08) 100%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .26), 0 1px 2px rgb(13 22 20 / .16);
}
.btn-outline-primary, .btn-outline-secondary, .btn-outline-danger, .btn-light, .btn-secondary {
  background-image: linear-gradient(180deg, rgb(255 255 255 / .45) 0%, transparent 100%);
  border-color: var(--glass-border);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .7), 0 1px 2px rgb(13 22 20 / .07);
}
.btn:active { box-shadow: inset 0 2px 4px rgb(0 0 0 / .16); }
[data-theme="dark"] .btn-outline-primary,
[data-theme="dark"] .btn-outline-secondary,
[data-theme="dark"] .btn-outline-danger,
[data-theme="dark"] .btn-light,
[data-theme="dark"] .btn-secondary {
  background-image: linear-gradient(180deg, rgb(255 255 255 / .07) 0%, transparent 100%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .1), 0 1px 2px rgb(0 0 0 / .35);
}

/* Lo mismo para los botones heredados .lbtn */
.lbtn {
  background-image: linear-gradient(180deg, rgb(255 255 255 / .45) 0%, transparent 100%);
  border-color: var(--glass-border);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .7), 0 1px 2px rgb(13 22 20 / .07);
}
.lbtn-primary, .lbtn-danger, .lbtn-dark {
  background-image: linear-gradient(180deg, rgb(255 255 255 / .22) 0%, transparent 55%, rgb(0 0 0 / .08) 100%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .28), 0 1px 2px rgb(13 22 20 / .16);
}
.lbtn:active { box-shadow: inset 0 2px 4px rgb(0 0 0 / .16); }