/* ───────────────────────────────────────────────────────────────────────
   0 · TIPOGRAFÍA
   Inter, alojada en el propio servidor: nada se pide a Google ni a nadie.
   Licencia SIL Open Font 1.1 (copia en fuentes/LICENCIA-INTER.txt): se puede
   usar y alojar en un producto comercial sin pagar ni pedir permiso.

   Tres caras recortadas a los signos que la interfaz usa de verdad, 95 KB en
   total. Cubren todo el español y también ·, →, ↗, ✓, ✗ y ⚠, que la interfaz
   usa a menudo; los emoji siguen saliendo, como siempre, de la fuente del
   sistema.
   ─────────────────────────────────────────────────────────────────────── */
@font-face{
  font-family:'Inter Kausa'; src:url('fuentes/inter-300.woff2') format('woff2');
  font-weight:300; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Inter Kausa'; src:url('fuentes/inter-400.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Inter Kausa'; src:url('fuentes/inter-700.woff2') format('woff2');
  font-weight:700; font-style:normal; font-display:swap;
}

/* ═══════════════════════════════════════════════════════════════════════
   KAUSA · SISTEMA DE DISEÑO
   Basado en el tema "Aéreo Zen" — traducido de Tailwind a CSS propio.
   Sin librerías, sin frameworks, sin fuentes de iconos externas.

   Reglas del tema que se respetan al pie de la letra:
     · Base negro puro. Los grises son NEUTROS, sin tinte azul ni verde,
       para que el cian neón sea el único color con carga cromática.
     · La jerarquía se hace con vidrio y capas tonales, no con sombras.
     · En vez de sombra, resplandor cian de baja opacidad y radio amplio.
     · Nada tiene forma de píldora salvo las etiquetas de estado.
     · Radio 8px en controles, 12px en paneles grandes.

   Todo lo ajustable está en :root. Cambia un valor ahí y cambia en toda
   la aplicación.
   ═══════════════════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────────────────────────────────
   1 · TOKENS
   ─────────────────────────────────────────────────────────────────────── */
:root{

  /* ── Superficies (escala neutra de Aéreo Zen) ─────────────────────── */
  --k-negro:            #000000;   /* lienzo de la página */
  --k-nivel-0:          #0A0A0A;   /* contenedor de segundo nivel */
  --k-nivel-1:          #131313;   /* superficie */
  --k-nivel-2:          #1C1B1B;
  --k-nivel-3:          #201F1F;
  --k-nivel-4:          #2A2A2A;   /* contenedor alto: campos, avatares */
  --k-nivel-5:          #353534;

  /* ── Vidrio: relleno translúcido + desenfoque + borde de luz ─────── */
  --k-vidrio:           rgba(26,26,26,.40);
  --k-vidrio-solido:    rgba(26,26,26,.72);
  --k-vidrio-borde:     rgba(255,255,255,.10);
  --k-vidrio-borde-alto:rgba(255,255,255,.20);
  --k-desenfoque:       20px;
  --k-desenfoque-suave: 12px;

  /* ── Texto ────────────────────────────────────────────────────────── */
  --k-texto:            #E5E2E1;
  --k-texto-suave:      #B9CAC6;   /* on-surface-variant */
  --k-texto-tenue:      #849490;   /* outline */

  /* ── Neones de estado (identidad de Kausa) ────────────────────────── */
  --k-cian:             #00E5D0;   /* activo · Kausa */
  --k-cian-claro:       #71FFEC;   /* primary del tema, para texto sobre negro */
  --k-verde:            #39FF9A;   /* causado */
  --k-ambar:            #FFC24B;   /* revisar */
  --k-magenta:          #FF3D9A;   /* error · falta detalle */
  --k-violeta:          #9B6BFF;   /* totales y periodo */
  --k-salmon:           #FFB4AB;   /* tendencia · "error" del tema */
  --k-sobre-cian:       #00201C;   /* texto sobre relleno cian */

  --k-cian-rgb:         0,229,208;
  --k-verde-rgb:        57,255,154;
  --k-ambar-rgb:        255,194,75;
  --k-magenta-rgb:      255,61,154;
  --k-violeta-rgb:      155,107,255;

  /* ── Líneas (opacidades del tema: 5% separadores, 10% bordes) ─────── */
  --k-linea:            rgba(255,255,255,.05);
  --k-linea-media:      rgba(255,255,255,.10);
  --k-linea-viva:       rgba(255,255,255,.20);

  /* ── Tipografía (identidad corporativa) ───────────────────────────── */
  --k-fuente:      'Inter Kausa', ui-sans-serif, system-ui, -apple-system,
                   'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --k-fuente-dato: ui-monospace, SFMono-Regular, Menlo, Consolas,
                   'Liberation Mono', monospace;

  /* Jerarquía por peso — la misma que usa la plantilla:
       ligero  · lo que se lee: cuerpo, celdas, descripciones, opciones
       normal  · lo pequeño, donde el ligero se deshilacha sobre negro
       fuerte  · lo que titula o remata: títulos, encabezados, cifras, acciones
     Regla: nunca ligero por debajo de 13px. */
  --k-peso-ligero: 300;
  --k-peso-normal: 400;
  --k-peso-fuerte: 700;

  --k-titular-xl:  64px;   /* cifra grande de indicador */
  --k-titular-lg:  40px;   /* título de sección */
  --k-titular-md:  24px;   /* título de la barra superior */
  --k-cuerpo-lg:   18px;
  --k-cuerpo-md:   16px;
  --k-etiqueta-md: 14px;
  --k-etiqueta-sm: 12px;
  --k-etiqueta-xs: 10px;

  /* ── Ritmo lineal de 8 ────────────────────────────────────────────── */
  --k-e1: 4px;  --k-e2: 8px;  --k-e3: 12px; --k-e4: 16px;
  --k-e5: 20px; --k-e6: 24px; --k-e8: 32px; --k-e10: 40px; --k-e16: 64px;

  /* ── Formas ───────────────────────────────────────────────────────── */
  --k-r-sm:    4px;
  --k-r:       8px;    /* botones, campos, tarjetas pequeñas */
  --k-r-md:   12px;    /* paneles de vidrio grandes */
  --k-r-lg:   16px;
  --k-r-pill: 9999px;  /* SOLO etiquetas de estado */

  /* ── Profundidad: resplandor en vez de sombra ─────────────────────── */
  --k-luz:        0 0 30px 0 rgba(var(--k-cian-rgb), .15);
  --k-luz-activa: 0 0 30px 0 rgba(var(--k-cian-rgb), .25);
  --k-sombra-modal: 0 0 30px rgba(var(--k-cian-rgb), .20);


  /* ── Modo sereno ────────────────────────────────────────────────────
     El lenguaje de toda la aplicación: negro profundo, superficies que
     apenas se separan del fondo, bordes que casi no se ven y un solo
     acento, reservado para lo activo, el foco y las confirmaciones.
     Todo lo demás son grados de gris. */
  --z-fondo:           #090909;
  --z-fondo-2:         #0D0D0D;
  --z-fondo-3:         #111111;
  --z-superficie:      rgba(255,255,255,.025);
  --z-superficie-alta: rgba(255,255,255,.045);
  --z-borde:           rgba(255,255,255,.05);
  --z-borde-vivo:      rgba(255,255,255,.09);
  --z-texto:           #F3F3F3;
  --z-texto-2:         #A0A0A0;
  --z-texto-3:         #6E6E6E;
  --z-acento:          #16E3C6;
  --z-acento-rgb:      22,227,198;
  --z-vel:             .15s;
  --z-vel-lenta:       .22s;
  --z-curva:           cubic-bezier(.4,0,.2,1);
  --z-r:               10px;
  --z-r-lg:            14px;

  /* ── Movimiento ───────────────────────────────────────────────────── */
  --k-vel:       .2s;
  --k-vel-lenta: .3s;
  --k-curva:     cubic-bezier(.4, 0, .2, 1);

  /* ── Medidas del armazón ──────────────────────────────────────────── */
  --k-menu:      80px;    /* menú contraído */
  --k-menu-open: 256px;   /* menú desplegado */
  --k-barra:     64px;    /* alto de la barra superior */
  --k-lienzo:    1280px;  /* ancho máximo del contenido */

  /* ── Nombres heredados ────────────────────────────────────────────
     La app tiene estilos dentro del JavaScript que usan estos nombres.
     Quedan como atajos para no tener que tocar el JS. */
  --bg:var(--z-fondo); --surface:var(--z-superficie); --surfaceHi:var(--z-superficie-alta);
  --line:var(--z-borde); --lineHi:var(--z-borde-vivo);
  --text:var(--z-texto); --muted:var(--z-texto-2); --faint:var(--z-texto-3);
  --cyan:var(--z-acento); --green:var(--z-acento); --amber:var(--k-ambar);
  --magenta:var(--k-magenta); --violet:var(--k-violeta);
}

/* ───────────────────────────────────────────────────────────────────────
   2 · BASE
   ─────────────────────────────────────────────────────────────────────── */
*{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100% }
body{
  margin:0; min-height:100vh; overflow-x:hidden;
  background:var(--z-fondo); color:var(--z-texto);
  font-family:var(--k-fuente); font-size:var(--k-cuerpo-md); line-height:1.6;
  font-weight:var(--k-peso-ligero);
  -webkit-font-smoothing:antialiased;
}
/* Lo que titula va en fuerte y con el tracking cerrado */
h1,h2,h3,h4{ margin:0; font-weight:var(--k-peso-fuerte); letter-spacing:-.01em }
/* Por debajo de 13px el ligero se deshilacha sobre negro: sube a normal */
.hint, .lbl-sec, .cal-dias span, .ren-n, .conns .lbl, .c-baja,
.tabla-pie, .sel-vacio{ font-weight:var(--k-peso-normal) }
strong, b{ font-weight:var(--k-peso-fuerte) }
::selection{ background:rgba(var(--z-acento-rgb),.25); color:var(--z-texto) }

::-webkit-scrollbar{ width:6px; height:6px }
::-webkit-scrollbar-track{ background:transparent }
::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.10); border-radius:var(--k-r-sm) }
::-webkit-scrollbar-thumb:hover{ background:rgba(255,255,255,.20) }

:focus-visible{ outline:1px solid rgba(var(--z-acento-rgb),.5); outline-offset:2px;
  border-radius:var(--z-r) }

@keyframes k-pulso{ 0%,100%{opacity:1} 50%{opacity:.4} }
@keyframes k-entra{ from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none} }
@keyframes k-ventana{ from{opacity:0; transform:translateY(16px) scale(.985)} to{opacity:1; transform:none} }

/* ───────────────────────────────────────────────────────────────────────
   3 · UTILIDADES
   ─────────────────────────────────────────────────────────────────────── */
/* Cifras alineadas: los dígitos ocupan lo mismo, así las columnas de pesos
   quedan a plomo. La maqueta usa la fuente de texto para las cifras de
   pantalla; la monoespaciada del sistema queda para lo técnico (tokens,
   CUFE, códigos), donde importa distinguir un cero de una O. */
.tabular, .num, td.num, .bento-card .cifra{
  font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1;
}
.mono{
  font-family:var(--k-fuente-dato);
  font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1;
}
.hidden{ display:none !important }
.spacer{ flex:1 }

/* La receta de vidrio del tema, en una clase */
.vidrio{
  background:var(--k-vidrio);
  backdrop-filter:blur(var(--k-desenfoque));
  -webkit-backdrop-filter:blur(var(--k-desenfoque));
  border:1px solid var(--k-vidrio-borde);
}
.luz{ box-shadow:var(--k-luz) }

/* Iconos: SVG de trazo, heredan color y tamaño del contenedor */
.ico{ width:24px; height:24px; flex:none; stroke:currentColor; fill:none;
  stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round }
.ico-sm{ width:18px; height:18px }
.ico-xs{ width:16px; height:16px }

/* Etiqueta técnica: mayúsculas con tracking, como instrumentación */
.etiqueta{
  font-size:var(--k-etiqueta-md); font-weight:var(--k-peso-ligero); letter-spacing:.05em;
  text-transform:uppercase; color:var(--k-texto-suave);
}

/* ───────────────────────────────────────────────────────────────────────
   4 · MENÚ LATERAL  (80px contraído · 256px desplegado)
   ─────────────────────────────────────────────────────────────────────── */
/* El menú lateral y la barra superior del CLIENTE ya no se visten aquí:
   desde la sesión 11 el cascarón es el del diseño de Stitch y vive en el
   <style> de index.html (barra colapsada de 80px, SIN despliegue al pasar
   el cursor — ese despliegue de agosto se retiró porque Stitch no lo trae).
   Quedan las piezas que otras páginas sí usan: .isotipo/.logotipo (login),
   .dot (conexiones y ops), .buscador (ops). */
.isotipo{ width:32px; height:32px; flex:none; object-fit:contain; display:block;
  filter:none }
.logotipo{ height:20px; width:auto; flex:none; object-fit:contain; display:none }

.dot{ width:6px; height:6px; border-radius:50%; flex:none }
.dot.on{ background:var(--z-acento) }
.dot.off{ background:var(--z-texto-3) }

.buscador{
  position:relative; display:flex; align-items:center; width:330px;
  margin-left:16px; border-radius:12px;
  background:var(--z-superficie); border:1px solid var(--z-borde);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  transition:border-color var(--z-vel) var(--z-curva), background var(--z-vel);
}
.buscador .ico{ position:absolute; left:16px; top:50%; transform:translateY(-50%);
  color:var(--z-texto-3); pointer-events:none; stroke-width:1.6 }
.buscador input{
  width:100%; height:44px; background:transparent; border:none; outline:none;
  color:var(--z-texto); font-family:inherit; font-size:14px;
  font-weight:var(--k-peso-ligero); padding:0 54px 0 46px;
}
.buscador input::placeholder{ color:var(--z-texto-3) }
.buscador:focus-within{ border-color:rgba(var(--z-acento-rgb),.30);
  background:var(--z-superficie-alta) }
.buscador .atajo{
  position:absolute; right:12px; top:50%; transform:translateY(-50%);
  font-size:11px; color:var(--z-texto-3); letter-spacing:.04em;
  padding:3px 7px; border-radius:6px; border:1px solid var(--z-borde);
  pointer-events:none;
}

/* Señal tranquila, no alerta */
.estado-conex{
  display:flex; align-items:center; gap:8px;
  padding:7px 14px; border-radius:999px;
  background:rgba(var(--z-acento-rgb),.05);
  border:1px solid rgba(var(--z-acento-rgb),.14);
  font-size:13px; color:var(--z-acento); font-weight:var(--k-peso-ligero);
  white-space:nowrap;
}
.estado-conex.off{ background:var(--z-superficie); border-color:var(--z-borde);
  color:var(--z-texto-3) }
.estado-conex .dot.on{ background:var(--z-acento) }

.icon-btn{
  position:relative; padding:9px; border:none; background:transparent; cursor:pointer;
  color:var(--z-texto-3); border-radius:10px; display:grid; place-items:center;
  transition:color var(--z-vel) var(--z-curva), background var(--z-vel);
}
.icon-btn:hover{ color:var(--z-texto-2); background:var(--z-superficie) }
.icon-btn .ico{ stroke-width:1.6 }
.icon-btn .alerta{
  position:absolute; top:8px; right:8px; width:6px; height:6px; border-radius:50%;
  background:var(--z-acento); box-shadow:none; animation:none;
}

/* El menú de la cuenta y el buzón de actividad del cliente se visten con
   el diseño de Stitch desde la sesión 11 (en el <style> de index.html).
   Sus clases viejas (.menu-flotante, .cuenta-*, .acti*) se retiraron. */

/* ── Lienzo ── */
.content{
  flex:1; width:100%; max-width:1360px; margin:0 auto;
  padding:24px 40px 72px;
  display:flex; flex-direction:column; gap:32px;
  animation:k-entra var(--z-vel-lenta) var(--z-curva);
}

/* ── Cabecera de sección ── */
.seccion-cab{
  display:flex; flex-direction:row; justify-content:space-between;
  align-items:flex-start; gap:32px; flex-wrap:wrap; margin-bottom:8px;
}
.seccion-cab h2{ font-size:40px; font-weight:var(--k-peso-normal);
  letter-spacing:-.02em; color:var(--z-texto); line-height:1.15 }
.seccion-cab .sub{ display:block; margin-top:10px; font-size:16px;
  font-weight:var(--k-peso-ligero); color:var(--z-texto-2) }
.seccion-cab .acciones{ display:flex; align-items:center; gap:12px;
  flex-wrap:wrap; padding-top:6px }

/* ───────────────────────────────────────────────────────────────────────
   6 · BOTONES
   Todos la misma altura y el mismo peso: parecen parte del sistema, no
   piezas sueltas. Solo la acción que abre camino lleva el acento.
   ─────────────────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  height:44px; padding:0 20px; border-radius:12px; cursor:pointer;
  font-family:inherit; font-size:14px; font-weight:var(--k-peso-ligero);
  letter-spacing:0; line-height:1; text-decoration:none;
  background:var(--z-superficie); border:1px solid var(--z-borde);
  color:var(--z-texto); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  transition:background var(--z-vel) var(--z-curva), border-color var(--z-vel),
             color var(--z-vel);
}
.btn:hover{ background:var(--z-superficie-alta); border-color:var(--z-borde-vivo) }
.btn .ico{ color:var(--z-texto-3); stroke-width:1.6 }
.btn:hover .ico{ color:var(--z-texto-2) }
.btn:disabled{ opacity:.35; cursor:not-allowed }

/* Acento reservado: la acción que hace entrar documentos */
.btn-ghost{ color:var(--z-acento); border-color:rgba(var(--z-acento-rgb),.22);
  background:rgba(var(--z-acento-rgb),.04) }
.btn-ghost .ico, .btn-ghost:hover .ico{ color:var(--z-acento) }
.btn-ghost:hover{ background:rgba(var(--z-acento-rgb),.08);
  border-color:rgba(var(--z-acento-rgb),.38) }

.btn-primary{ color:var(--z-acento); border-color:rgba(var(--z-acento-rgb),.30);
  background:rgba(var(--z-acento-rgb),.05); text-transform:none;
  font-weight:var(--k-peso-normal); box-shadow:none }
.btn-primary:hover{ background:rgba(var(--z-acento-rgb),.10);
  border-color:rgba(var(--z-acento-rgb),.5); box-shadow:none }
.btn-caps{ text-transform:none; letter-spacing:0; background:var(--z-superficie);
  padding:0 20px }

.btn-sugerir{
  float:right; font-size:12px; letter-spacing:0; text-transform:none;
  color:var(--z-texto-3); cursor:pointer; padding:2px 10px;
  border:1px solid var(--z-borde); border-radius:999px;
  transition:all var(--z-vel);
}
.btn-sugerir:hover{ color:var(--z-acento);
  border-color:rgba(var(--z-acento-rgb),.30); background:none }

/* ───────────────────────────────────────────────────────────────────────
   7 · INDICADORES
   "Quiero leer información, no ver cajas": la tarjeta se retira casi del
   todo y el dato queda solo, con aire alrededor.
   ─────────────────────────────────────────────────────────────────────── */
.bento{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px }

.bento-card{
  position:relative; overflow:hidden; border-radius:var(--z-r-lg);
  padding:28px 30px; display:flex; flex-direction:column; gap:20px;
  min-height:196px;
  background:var(--z-superficie);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border:1px solid var(--z-borde);
  transition:border-color var(--z-vel) var(--z-curva), background var(--z-vel);
}
.bento-card:hover{ border-color:var(--z-borde-vivo) }
.bento-card .halo{ display:none }          /* fuera el resplandor */
.bento-card .fila{ display:flex; justify-content:space-between; align-items:flex-start;
  gap:16px }
.bento-card .fila .ico{ color:var(--z-texto-3); stroke-width:1.5 }
.bento-card .etiqueta{ font-size:12px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--z-texto-3); font-weight:var(--k-peso-normal) }
.bento-card .cifra{
  display:flex; align-items:baseline; gap:12px; flex:1;
  font-size:48px; font-weight:var(--k-peso-ligero); line-height:1;
  letter-spacing:-.03em; color:var(--z-texto); white-space:nowrap;
}
.bento-card .cifra .pequeno{ font-size:14px; font-weight:var(--k-peso-ligero);
  letter-spacing:0; color:var(--z-texto-2) }
.bento-card .cifra .decimal{ font-size:22px; color:var(--z-texto-3) }
.bento-card .nota{ display:flex; align-items:center; gap:8px; font-size:12px;
  color:var(--z-texto-3) }
.bento-card .nota .ico{ stroke-width:1.5 }

/* La tercera deja de gritar: sin filo de color ni velo, solo su barra */
.bento-card.destacada{ border-left:1px solid var(--z-borde) }
.bento-card.destacada::before{ content:none }
.bento-card.destacada .etiqueta{ color:var(--z-texto-3);
  font-weight:var(--k-peso-normal) }
.bento-card.destacada .fila .ico{ color:var(--z-acento) }

/* Barras: finas, sin resplandor, y crecen al entrar */
.progreso{ position:relative; width:100%; height:3px; border-radius:999px;
  background:rgba(255,255,255,.06); overflow:hidden }
.progreso.gruesa{ height:4px }
.progreso i{ display:block; height:100%; border-radius:999px;
  background:var(--z-acento); box-shadow:none;
  animation:z-crece .9s var(--z-curva) both }
.progreso.avance i{ background:var(--k-magenta) }
@keyframes z-crece{ from{ transform:scaleX(0); transform-origin:left } to{ transform:none } }

/* ───────────────────────────────────────────────────────────────────────
   8 · TABLA DE FACTURAS
   El corazón de la aplicación. Una lista ordenada, no una hoja de cálculo:
   filas altas, una sola línea muy tenue entre ellas y encabezados que
   apenas se anuncian.
   ─────────────────────────────────────────────────────────────────────── */
.tabla-panel{
  border-radius:var(--z-r-lg); overflow:hidden; display:flex; flex-direction:column;
  background:var(--z-superficie);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border:1px solid var(--z-borde);
}
.tabla-panel table{ width:100%; border-collapse:collapse }
.tabla-panel thead{ background:transparent; border-bottom:1px solid var(--z-borde) }
.tabla-panel tr{
  display:grid; grid-template-columns:repeat(12,1fr); gap:20px;
  padding:0 30px; align-items:center;
}
.tabla-panel thead tr{
  height:58px; font-size:11px; font-weight:var(--k-peso-normal);
  letter-spacing:.12em; text-transform:uppercase; color:var(--z-texto-3);
}
.tabla-panel th{ text-align:left; padding:0; font-weight:inherit; overflow:hidden }
.tabla-panel td{ padding:0; min-width:0; overflow:hidden;
  font-size:14px; font-weight:var(--k-peso-ligero); color:var(--z-texto) }
.tabla-panel tbody{ display:flex; flex-direction:column }
.tabla-panel tbody tr{
  height:72px; cursor:pointer;
  border-bottom:1px solid rgba(255,255,255,.035);
  transition:background var(--z-vel) var(--z-curva);
}
.tabla-panel tbody tr:hover{ background:var(--z-superficie) }
.tabla-panel tbody tr:last-child{ border-bottom:none }

.col-2{ grid-column:span 2 }
.col-3{ grid-column:span 3 }
.col-4{ grid-column:span 4 }
.der{ text-align:right }
.centro{ display:flex; justify-content:flex-start }
.con-avatar{ display:flex; align-items:center; gap:14px; min-width:0 }
.recorta{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap }

/* El NIT acompaña; el proveedor manda */
.tabla-panel td.tabular{ color:var(--z-texto-2) }

/* Avatar discreto: círculo de contorno, no una mancha de color */
.avatar{
  width:34px; height:34px; flex:none; border-radius:50%;
  display:grid; place-items:center;
  background:rgba(var(--z-acento-rgb),.04);
  border:1px solid rgba(var(--z-acento-rgb),.16);
  font-size:11px; font-weight:var(--k-peso-normal); color:var(--z-acento);
  letter-spacing:.03em;
}

/* ── Interruptor "Causar" ── */
.causar{
  display:inline-flex; align-items:center; gap:14px;
  background:none; border:none; padding:0; cursor:pointer; font-family:inherit;
}
.causar .via{
  position:relative; width:42px; height:22px; flex:none; border-radius:999px;
  background:rgba(255,255,255,.07); border:1px solid var(--z-borde);
  transition:background var(--z-vel) var(--z-curva), border-color var(--z-vel);
}
.causar .via::after{
  content:""; position:absolute; top:3px; left:3px; width:14px; height:14px;
  border-radius:50%; background:var(--z-texto-2); border:none;
  transition:transform var(--z-vel-lenta) var(--z-curva), background var(--z-vel);
}
.causar:hover .via{ background:rgba(255,255,255,.10); border-color:var(--z-borde-vivo) }
.causar:hover .via::after{ background:var(--z-texto) }
.causar[aria-pressed="true"] .via{ background:rgba(var(--z-acento-rgb),.20);
  border-color:rgba(var(--z-acento-rgb),.35) }
.causar[aria-pressed="true"] .via::after{ transform:translateX(20px);
  background:var(--z-acento) }
.causar .txt{ font-size:13px; font-weight:var(--k-peso-ligero);
  color:var(--z-texto-3); white-space:nowrap; transition:color var(--z-vel) }
.causar:hover .txt, .causar[aria-pressed="true"] .txt{ color:var(--z-texto-2) }
.causar:focus-visible{ outline:1px solid rgba(var(--z-acento-rgb),.5);
  outline-offset:4px; border-radius:999px }

/* ── Etiqueta de estado ── */
.marca{
  display:inline-flex; align-items:center; gap:7px;
  padding:5px 12px; border-radius:999px;
  font-size:12px; font-weight:var(--k-peso-ligero); white-space:nowrap;
  border:1px solid transparent;
}
.marca .punto{ width:5px; height:5px; border-radius:50%; flex:none }
.marca.ok{ color:var(--z-acento); background:rgba(var(--z-acento-rgb),.05);
  border-color:rgba(var(--z-acento-rgb),.14) }
.marca.ok .punto{ background:var(--z-acento); box-shadow:none }
.marca.falta{ color:var(--k-ambar); background:rgba(var(--k-ambar-rgb),.05);
  border-color:rgba(var(--k-ambar-rgb),.14) }
.marca.falta .punto{ background:var(--k-ambar); box-shadow:none }

/* ── Pie y paginación: presentes, discretos ── */
.tabla-pie{
  display:flex; justify-content:space-between; align-items:center; gap:20px;
  padding:20px 30px; border-top:1px solid var(--z-borde);
  background:none; font-size:13px; color:var(--z-texto-3);
  font-weight:var(--k-peso-ligero);
}
.paginas{ display:flex; gap:6px; flex-wrap:wrap }
.pag{
  min-width:34px; height:34px; padding:0 8px;
  display:grid; place-items:center; border-radius:9px;
  border:1px solid transparent; background:transparent; color:var(--z-texto-2);
  cursor:pointer; font-family:inherit; font-size:13px;
  font-weight:var(--k-peso-ligero);
  transition:background var(--z-vel) var(--z-curva), color var(--z-vel),
             border-color var(--z-vel);
}
.pag:hover:not(:disabled){ background:var(--z-superficie); color:var(--z-texto) }
.pag.activa{ color:var(--z-acento); border-color:rgba(var(--z-acento-rgb),.22);
  background:rgba(var(--z-acento-rgb),.05) }
.pag:disabled{ opacity:.3; cursor:not-allowed }
.pag.puntos{ border:none; cursor:default; color:var(--z-texto-3) }
.pag .ico{ stroke-width:1.6 }

/* ───────────────────────────────────────────────────────────────────────
   9 · PANEL DESPLEGABLE (Filtros, Subir factura)
   ─────────────────────────────────────────────────────────────────────── */
.desplegable{ position:relative }
.panel-flotante{
  position:absolute; right:0; top:100%; margin-top:var(--k-e2); z-index:45;
  min-width:280px; border-radius:var(--k-r-md); overflow:hidden;
  background:rgba(19,19,19,.92);
  backdrop-filter:blur(var(--k-desenfoque)); -webkit-backdrop-filter:blur(var(--k-desenfoque));
  border:1px solid rgba(var(--k-cian-rgb),.20); box-shadow:var(--k-luz);
  text-align:left;
}
.panel-flotante .cab{ padding:var(--k-e4); border-bottom:1px solid var(--k-linea);
  font-size:var(--k-etiqueta-md); font-weight:var(--k-peso-fuerte) }
.opcion{
  width:100%; display:flex; align-items:center; gap:var(--k-e3);
  padding:var(--k-e3) var(--k-e4); border:none; background:transparent;
  color:var(--k-texto); cursor:pointer; font-family:inherit;
  font-size:var(--k-etiqueta-md); text-align:left;
  border-bottom:1px solid var(--k-linea); transition:background var(--k-vel);
}
.opcion:hover{ background:rgba(255,255,255,.05) }
.opcion.activa{ background:rgba(var(--k-cian-rgb),.10); color:var(--k-cian-claro) }
.opcion .cuenta{ margin-left:auto; font-family:var(--k-fuente-dato);
  font-size:var(--k-etiqueta-sm); color:var(--k-texto-tenue) }

/* ───────────────────────────────────────────────────────────────────────
   10 · TARJETAS, FORMULARIOS Y MENSAJES (resto de pantallas)
   ─────────────────────────────────────────────────────────────────────── */
.card{
  border-radius:var(--k-r-md); padding:var(--k-e6);
  background:var(--k-vidrio);
  backdrop-filter:blur(var(--k-desenfoque)); -webkit-backdrop-filter:blur(var(--k-desenfoque));
  border:1px solid var(--k-vidrio-borde);
}
.card + .card{ margin-top:var(--k-e4) }
.card h2{ font-size:var(--k-cuerpo-lg); font-weight:var(--k-peso-fuerte); margin-bottom:var(--k-e1) }
.card p.desc{ font-size:var(--k-etiqueta-md); color:var(--k-texto-suave); margin:0 0 var(--k-e4) }

.empty{
  border:1px dashed var(--k-linea-viva); border-radius:var(--k-r-md);
  padding:var(--k-e16) var(--k-e6); text-align:center;
}
.empty h3{ font-size:var(--k-cuerpo-lg); font-weight:var(--k-peso-fuerte); margin-bottom:var(--k-e2) }
.empty p{ font-size:var(--k-etiqueta-md); color:var(--k-texto-suave);
  margin:0 auto; max-width:480px }

/* Campos: relleno oscuro con borde que se enciende en cian al enfocar */
.form{ display:flex; flex-direction:column; gap:var(--k-e4); max-width:540px }
.fld{ display:flex; flex-direction:column; gap:6px }
.fld > span{ font-size:var(--k-etiqueta-sm); color:var(--k-texto-suave);
  display:flex; align-items:center; gap:var(--k-e2) }
.fld input, .fecha, .cfg-fld select, .cfg-fld input{
  width:100%; min-width:0; height:38px;
  background:rgba(255,255,255,.05); border:1px solid var(--k-vidrio-borde);
  border-radius:var(--k-r); padding:var(--k-e2) var(--k-e3);
  color:var(--k-texto); font-family:inherit; font-size:var(--k-etiqueta-md); outline:none;
  backdrop-filter:blur(var(--k-desenfoque)); -webkit-backdrop-filter:blur(var(--k-desenfoque));
  transition:border-color var(--k-vel), box-shadow var(--k-vel);
}
.fld input::placeholder, .cfg-fld input::placeholder{ color:var(--k-texto-tenue) }
.fld input:hover, .fecha:hover, .cfg-fld select:hover, .cfg-fld input:hover{
  border-color:rgba(var(--k-cian-rgb),.50); box-shadow:0 0 10px rgba(var(--k-cian-rgb),.30) }
.fld input:focus, .fecha:focus, .cfg-fld select:focus, .cfg-fld input:focus{
  border-color:var(--k-cian); box-shadow:0 0 10px rgba(var(--k-cian-rgb),.30) }
/* Un textarea dentro de un campo NO heredaba nada: el navegador lo pintaba
   blanco y con letra de máquina, en medio del panel oscuro. jsdom no lo ve
   —es puro pintado— y lo destapó la revisión en Chrome del 23 de agosto.
   Va en regla aparte porque la altura fija de 38px no le sirve. */
.cfg-fld textarea{
  width:100%; min-width:0; min-height:96px; resize:vertical;
  background:rgba(255,255,255,.05); border:1px solid var(--k-vidrio-borde);
  border-radius:var(--k-r); padding:var(--k-e2) var(--k-e3);
  color:var(--k-texto); font-family:inherit; font-size:var(--k-etiqueta-md);
  line-height:1.55; outline:none;
  backdrop-filter:blur(var(--k-desenfoque)); -webkit-backdrop-filter:blur(var(--k-desenfoque));
  transition:border-color var(--k-vel), box-shadow var(--k-vel);
}
.cfg-fld textarea::placeholder{ color:var(--k-texto-tenue) }
.cfg-fld textarea:hover{
  border-color:rgba(var(--k-cian-rgb),.50); box-shadow:0 0 10px rgba(var(--k-cian-rgb),.30) }
.cfg-fld textarea:focus{
  border-color:var(--k-cian); box-shadow:0 0 10px rgba(var(--k-cian-rgb),.30) }

.fecha{ color-scheme:dark }
select.fecha{ cursor:pointer }

.fld em{ font-style:normal; font-size:var(--k-etiqueta-xs); padding:1px 9px;
  border-radius:var(--k-r-pill) }
.fld em.ok{ color:var(--k-verde); background:rgba(var(--k-verde-rgb),.10);
  border:1px solid rgba(var(--k-verde-rgb),.30) }
.fld em.no{ color:var(--k-magenta); background:rgba(var(--k-magenta-rgb),.10);
  border:1px solid rgba(var(--k-magenta-rgb),.30) }

.hint{ font-size:var(--k-etiqueta-sm); color:var(--k-texto-tenue); flex:1; min-width:220px }
.ej{ font-family:var(--k-fuente-dato); font-size:var(--k-etiqueta-sm) }
.lbl-sec{ display:block; font-size:var(--k-etiqueta-xs); color:var(--k-texto-tenue);
  text-transform:uppercase; letter-spacing:.14em; margin-bottom:var(--k-e2) }
.radios{ display:flex; flex-direction:column; gap:var(--k-e2) }
.radio{ display:flex; align-items:center; gap:var(--k-e2);
  font-size:var(--k-etiqueta-md); cursor:pointer }
.radio input{ accent-color:var(--k-cian) }
.steps{ margin:var(--k-e2) 0 0; padding-left:var(--k-e5);
  display:flex; flex-direction:column; gap:var(--k-e2); max-width:680px }
.steps li{ font-size:var(--k-etiqueta-md); color:var(--k-texto-suave) }
.steps li b{ color:var(--k-texto) }
.steps-det summary{ font-size:var(--k-etiqueta-md); color:var(--k-cian-claro);
  cursor:pointer; margin-top:var(--k-e2) }

/* Mensajes: filo de color a la izquierda con el significado del estado */
.aviso{
  border:1px solid rgba(var(--k-ambar-rgb),.26); border-left:2px solid var(--k-ambar);
  background:rgba(var(--k-ambar-rgb),.07); border-radius:var(--k-r);
  padding:var(--k-e3) var(--k-e4); margin:var(--k-e1) 0 6px; max-width:640px;
  font-size:var(--k-etiqueta-md); color:var(--k-ambar);
}
.aviso b{ color:var(--k-ambar) }
.result{
  display:none; margin-top:var(--k-e4); border-radius:var(--k-r);
  padding:var(--k-e3) var(--k-e4); font-size:var(--k-etiqueta-md);
  border:1px solid; border-left-width:2px; animation:k-entra var(--k-vel) var(--k-curva);
}
.result.show{ display:block }
.result.good{ color:var(--k-verde); background:rgba(var(--k-verde-rgb),.07);
  border-color:rgba(var(--k-verde-rgb),.28); border-left-color:var(--k-verde) }
.result.bad{ color:var(--k-magenta); background:rgba(var(--k-magenta-rgb),.07);
  border-color:rgba(var(--k-magenta-rgb),.28); border-left-color:var(--k-magenta) }
.result.warn{ color:var(--k-ambar); background:rgba(var(--k-ambar-rgb),.07);
  border-color:rgba(var(--k-ambar-rgb),.28); border-left-color:var(--k-ambar) }
.result .mono{ display:block; margin-top:6px; color:var(--k-texto);
  font-size:var(--k-etiqueta-sm); word-break:break-all }

.pill, .tag{ display:inline-block; font-size:var(--k-etiqueta-sm);
  padding:2px 10px; border-radius:var(--k-r-pill); border:1px solid transparent }
.pill.ok{ color:var(--k-verde); background:rgba(var(--k-verde-rgb),.10);
  border-color:rgba(var(--k-verde-rgb),.30) }
.pill.no{ color:var(--k-magenta); background:rgba(var(--k-magenta-rgb),.10);
  border-color:rgba(var(--k-magenta-rgb),.30) }
.tag.iva{ color:var(--k-cian-claro); background:rgba(var(--k-cian-rgb),.10);
  border-color:rgba(var(--k-cian-rgb),.30) }
.tag.noiva{ color:var(--k-texto-tenue); border-color:var(--k-linea-media) }

.sem{ display:inline-block; width:8px; height:8px; border-radius:50%;
  margin-right:7px; vertical-align:middle }
.sem-verde{ background:var(--k-verde); box-shadow:0 0 8px var(--k-verde) }
.sem-ambar{ background:var(--k-ambar); box-shadow:0 0 8px var(--k-ambar) }
.sem-rojo { background:var(--k-magenta); box-shadow:0 0 8px var(--k-magenta) }
.sem-gris { background:var(--k-texto-suave); box-shadow:none }
.estado{ color:var(--k-ambar) }

.cred-row{ display:flex; align-items:center; gap:var(--k-e3);
  font-size:var(--k-etiqueta-md); padding:var(--k-e2) 0; border-bottom:1px solid var(--k-linea) }
.cred-row:last-child{ border-bottom:none }
.cred-row .k{ width:130px; color:var(--k-texto-suave) }

/* Tablas sencillas del resto de pantallas */
.card table{ width:100%; border-collapse:collapse; font-size:var(--k-etiqueta-md) }
.card th{ text-align:left; padding:var(--k-e2) var(--k-e3);
  font-size:var(--k-etiqueta-sm); font-weight:var(--k-peso-fuerte); letter-spacing:.08em;
  text-transform:uppercase; color:var(--k-texto-tenue);
  border-bottom:1px solid var(--k-linea-media) }
.card td{ padding:var(--k-e2) var(--k-e3); border-bottom:1px solid var(--k-linea) }
.card tr:hover td{ background:rgba(255,255,255,.03) }

.dropzone{
  border:1px dashed var(--k-linea-viva); border-radius:var(--k-r-md);
  padding:var(--k-e8) var(--k-e6); text-align:center; transition:all var(--k-vel);
}
.dropzone h3{ font-size:var(--k-cuerpo-md); font-weight:var(--k-peso-fuerte); margin-bottom:6px }
.dropzone p{ font-size:var(--k-etiqueta-md); color:var(--k-texto-suave);
  margin:0 auto var(--k-e3); max-width:420px }
.dropzone.over, .card.over{
  border-color:var(--k-cian); background:rgba(var(--k-cian-rgb),.07); box-shadow:var(--k-luz) }

/* ───────────────────────────────────────────────────────────────────────
   10b · DESPLEGABLES Y CALENDARIO PROPIOS
   La lista de un <select> y el calendario de un <input type="date"> los
   dibuja el sistema operativo: el CSS no llega a ellos. Aquí se construyen
   los dos con el mismo vidrio del resto, y el control original se queda
   oculto detrás como fuente de la verdad.
   ─────────────────────────────────────────────────────────────────────── */
.sel, .fecha-caja{ position:relative; min-width:0 }

/* El control original: invisible, pero sigue siendo quien guarda el valor */
.sel > select, .fecha-caja > input[type="date"]{
  position:absolute; left:0; top:0; width:100%; height:100%;
  opacity:0; pointer-events:none; z-index:-1; border:none; padding:0; margin:0;
}

.sel-trigger{
  display:flex; align-items:center; justify-content:space-between; gap:var(--k-e2);
  width:100%; height:38px; padding:0 var(--k-e3);
  background:rgba(255,255,255,.05); border:1px solid var(--k-vidrio-borde);
  border-radius:var(--k-r); color:var(--k-texto); cursor:pointer;
  font-family:inherit; font-size:var(--k-etiqueta-md); text-align:left; outline:none;
  backdrop-filter:blur(var(--k-desenfoque)); -webkit-backdrop-filter:blur(var(--k-desenfoque));
  transition:border-color var(--k-vel), box-shadow var(--k-vel);
}
.sel-trigger:hover{ border-color:rgba(var(--k-cian-rgb),.50);
  box-shadow:0 0 10px rgba(var(--k-cian-rgb),.30) }
.sel-trigger:focus-visible, .abierto > .sel-trigger{
  border-color:var(--k-cian); box-shadow:0 0 10px rgba(var(--k-cian-rgb),.30) }
.sel-val{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0 }
.sel-val.vacio{ color:var(--k-texto-tenue) }
.sel-flecha{ flex:none; color:var(--k-texto-suave);
  transition:transform var(--k-vel) var(--k-curva) }
.abierto > .sel-trigger .sel-flecha{ transform:rotate(180deg); color:var(--k-cian-claro) }

/* El panel cuelga de <body>, en posición fija. Si colgara del campo, el
   cuerpo del modal —que se desplaza— lo recortaría por abajo. Su ancho lo
   fija el guion para que coincida con el del campo.
   Tono sereno: fondo oscuro casi opaco, borde que apenas se percibe, sin
   resplandor. Entra con un fundido y un desplazamiento mínimo. */
.flotante{
  /* Por ENCIMA de cualquier velo modal (1100): un desplegable abierto desde
     un modal debe verse sobre él, o queda detrás de la interacción — pasó
     con el calendario del modal de Sincronización DIAN. */
  position:fixed; z-index:1300; border-radius:var(--z-r-lg); overflow:hidden;
  background:rgba(15,15,15,.92);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border:1px solid var(--z-borde);
  box-shadow:0 18px 48px rgba(0,0,0,.45);
  animation:z-desplega .18s var(--z-curva);
}
@keyframes z-desplega{
  from{ opacity:0; transform:translateY(-4px); filter:blur(2px) }
  to{ opacity:1; transform:none; filter:none }
}

/* ── Desplegable: una lista, no un <select> disfrazado ── */
.sel-panel{ display:block; padding:6px }
.sel-buscar-caja{ position:relative; display:flex; align-items:center }
.sel-buscar-caja .ico{ position:absolute; right:14px; color:var(--z-texto-3);
  pointer-events:none; width:16px; height:16px }
.sel-buscar{
  width:100%; height:42px; margin-bottom:4px; padding:0 40px 0 14px;
  background:none; border:none; border-bottom:1px solid var(--z-borde);
  color:var(--z-texto); font-family:inherit; font-size:14px;
  font-weight:var(--k-peso-ligero); outline:none;
}
.sel-buscar::placeholder{ color:var(--z-texto-3) }
.sel-buscar:focus-visible{ outline:none }
.sel-buscar:focus{ border-bottom-color:rgba(var(--z-acento-rgb),.35) }

.sel-lista{ max-height:288px; overflow-y:auto; padding:4px 0 }
.sel-lista::-webkit-scrollbar{ width:4px }
.sel-lista::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.08); border-radius:4px }

/* Aire entre opciones, tipografía ligera, selección discreta. La escala
   baja a 12px y SIN saltos de renglón: cada opción se lee completa en una
   línea (el panel crece hasta 560px si hace falta — 16 ago). */
.sel-op{
  position:relative; display:block; padding:10px 16px 10px 30px;
  font-size:12px; font-weight:var(--k-peso-ligero); line-height:1.4;
  color:var(--z-texto-2); cursor:pointer; border-radius:8px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  transition:background var(--z-vel) var(--z-curva), color var(--z-vel);
}
.sel-op::before{
  content:""; position:absolute; left:14px; top:50%; margin-top:-2.5px;
  width:5px; height:5px; border-radius:50%; background:transparent;
}
.sel-op:hover, .sel-op.resaltada{ background:var(--z-superficie); color:var(--z-texto) }
.sel-op.elegida{ color:var(--z-acento) }
.sel-op.elegida::before{ background:var(--z-acento) }
.sel-vacio{ padding:22px 16px; font-size:13px; color:var(--z-texto-3); text-align:center }

/* ── Calendario: sin caja por día, el aire es la retícula ── */
.cal-panel{ width:312px; padding:20px 18px 14px }
.cal-cab{ display:flex; align-items:center; justify-content:space-between;
  gap:8px; margin-bottom:18px }
.cal-mes{ flex:1; text-align:center; font-size:14px; color:var(--z-texto);
  font-weight:var(--k-peso-normal); text-transform:capitalize }
.cal-nav{ display:contents }
.cal-nav button{
  width:28px; height:28px; display:grid; place-items:center; order:0;
  background:none; border:none; border-radius:8px;
  color:var(--z-texto-3); cursor:pointer;
  transition:color var(--z-vel), background var(--z-vel);
}
.cal-nav button:hover{ color:var(--z-texto); background:var(--z-superficie) }
.cal-nav button[data-salto="1"]{ order:2 }
.cal-cab .cal-mes{ order:1 }

.cal-dias, .cal-rejilla{ display:grid; grid-template-columns:repeat(7,1fr) }
.cal-dias{ margin-bottom:6px }
.cal-dias span{ height:26px; display:grid; place-items:center;
  font-size:10px; letter-spacing:.10em; text-transform:uppercase;
  color:var(--z-texto-3); font-weight:var(--k-peso-normal) }
.cal-rejilla button{
  height:38px; display:grid; place-items:center;
  background:none; border:none; border-radius:50%; cursor:pointer;
  color:var(--z-texto); font-family:inherit; font-size:13px;
  font-weight:var(--k-peso-ligero); font-variant-numeric:tabular-nums;
  transition:background var(--z-vel) var(--z-curva), color var(--z-vel);
}
.cal-rejilla button:hover{ background:var(--z-superficie) }
.cal-rejilla button.fuera{ color:var(--z-texto-3) }
.cal-rejilla button.hoy{ color:var(--z-acento) }
/* Los días entre el inicio y el final del rango (calendario de periodo) */
.cal-rejilla button.en-rango{
  background:rgba(var(--z-acento-rgb),.08); border-radius:0;
}
.cal-rejilla button.elegido{
  background:var(--z-acento); color:#04211E; font-weight:var(--k-peso-normal);
}
.cal-rejilla button.elegido:hover{ background:var(--z-acento) }
.cal-pie{ display:flex; justify-content:center; gap:24px;
  margin-top:12px; padding-top:12px; border-top:1px solid var(--z-borde) }
.cal-pie button{ background:none; border:none; cursor:pointer; font-family:inherit;
  font-size:13px; color:var(--z-acento); padding:4px 8px; border-radius:8px;
  font-weight:var(--k-peso-ligero); transition:opacity var(--z-vel) }
.cal-pie button[data-accion="borrar"]{ color:var(--z-texto-3) }
.cal-pie button:hover{ opacity:.7 }

/* ───────────────────────────────────────────────────────────────────────
   11 · VENTANA DE CAUSACIÓN — modo sereno
   Aquí el lenguaje cambia a propósito. La bandeja informa de un vistazo y
   por eso usa neón; esta ventana es donde alguien decide sobre la
   contabilidad de otro, y ahí lo que hace falta es calma.
   Menos contraste, menos bordes, menos cajas, más aire. El acento se
   reserva para tres cosas: el documento, el total y la acción.
   Los tokens se redefinen SOLO dentro de la ventana y de los paneles que
   cuelgan de ella, así el resto de Kausa no se entera.
   ─────────────────────────────────────────────────────────────────────── */
/* Los tokens serenos viven ahora en :root — ver la sección 1. */

/* El modal «Causar factura» viste el diseño de Stitch desde la sesión 12:
   su CSS vive en el <style> de index.html (utilidades del lienzo). Aquí
   quedan solo las piezas que el modal sigue usando: .soltar (la zona de
   carga), .cuenta-menu/.cuenta-item/.it-sug (el buscador de cuentas),
   .fld-rel, .btn-sugerir, .aviso y los campos .cfg-* compartidos. */


/* ── Campos ── */
.cfg-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px }
.cfg-fld{ display:flex; flex-direction:column; gap:10px; min-width:0 }
.cfg-fld label{ font-size:13px; color:var(--z-texto-2); font-weight:var(--k-peso-ligero);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.fld-rel{ position:relative }


/* ── Zona de carga ── */
.soltar{
  border:1px dashed var(--z-borde); border-radius:var(--z-r-lg);
  padding:56px 32px; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:10px;
  transition:border-color var(--z-vel) var(--z-curva), background var(--z-vel);
}
.soltar.over{ border-color:rgba(var(--z-acento-rgb),.35);
  background:rgba(var(--z-acento-rgb),.025) }
.soltar-ico{
  width:44px; height:44px; display:grid; place-items:center; margin-bottom:8px;
  border-radius:12px; background:var(--z-superficie); border:1px solid var(--z-borde);
  color:var(--z-texto-2);
}
.soltar-titulo{ margin:0; font-size:16px; font-weight:var(--k-peso-normal); color:var(--z-texto) }
.soltar-sub{ margin:0; font-size:12px; color:var(--z-texto-3) }
.soltar-acciones{ display:flex; gap:12px; margin-top:14px; flex-wrap:wrap; justify-content:center }
.soltar-acciones .btn{ justify-content:center; min-width:170px }
.soltar-pie{ margin:16px 0 0; font-size:12px; color:var(--z-texto-3) }
.soltar-pie a{ color:var(--z-acento); text-decoration:none;
  border-bottom:1px solid rgba(var(--z-acento-rgb),.25); padding-bottom:1px }
.soltar-pie a:hover{ border-bottom-color:rgba(var(--z-acento-rgb),.6) }





/* ── Buscador de cuentas dentro de un renglón ── */
.cuenta-menu{
  display:none; position:absolute; left:0; top:calc(100% + 6px); z-index:70;
  min-width:340px; max-height:280px; overflow-y:auto; border-radius:var(--z-r);
  background:#0F0F0F; border:1px solid var(--z-borde);
  box-shadow:0 20px 50px rgba(0,0,0,.5);
}
.cuenta-item{ padding:12px 16px; font-size:14px; font-weight:var(--k-peso-ligero);
  color:var(--z-texto-2); cursor:pointer; white-space:nowrap;
  transition:background var(--z-vel), color var(--z-vel) }
.cuenta-item:hover{ background:var(--z-superficie); color:var(--z-texto) }
.it-sug{ margin-top:8px }
.it-sug:empty{ display:none }   /* vacía no ocupa sitio: los campos se alinean */

/* ───────────────────────────────────────────────────────────────────────
   12 · PANTALLA DE ACCESO
   ─────────────────────────────────────────────────────────────────────── */
body.acceso{ display:flex; align-items:center; justify-content:center; padding:var(--k-e6) }
body.acceso .caja{ width:100%; max-width:420px; animation:k-ventana var(--k-vel-lenta) var(--k-curva) }
body.acceso .marca{ display:flex; align-items:center; gap:var(--k-e3);
  margin-bottom:var(--k-e8); background:none; border:none; padding:0 }
body.acceso .marca .isotipo{ width:44px; height:44px }
body.acceso .marca .logotipo{ display:block; height:26px }
body.acceso .marca .tag{ display:block; margin-top:4px; font-size:var(--k-etiqueta-sm);
  color:var(--k-texto-suave); background:none; border:none; padding:0 }
body.acceso .card{ padding:var(--k-e8); border-radius:var(--k-r-md); box-shadow:var(--k-luz) }
body.acceso h1{ font-size:var(--k-cuerpo-lg); font-weight:var(--k-peso-fuerte); margin-bottom:6px }
body.acceso .desc{ font-size:var(--k-etiqueta-md); color:var(--k-texto-suave);
  margin:0 0 var(--k-e5) }
body.acceso label{ display:block; font-size:var(--k-etiqueta-sm);
  color:var(--k-texto-suave); margin-bottom:6px }
body.acceso input{
  width:100%; height:42px; margin-bottom:var(--k-e3);
  background:rgba(255,255,255,.05); border:1px solid var(--k-vidrio-borde);
  border-radius:var(--k-r); padding:0 var(--k-e3); color:var(--k-texto);
  font-family:inherit; font-size:var(--k-etiqueta-md); outline:none;
  transition:border-color var(--k-vel), box-shadow var(--k-vel);
}
body.acceso input::placeholder{ color:var(--k-texto-tenue) }
body.acceso input:focus{ border-color:var(--k-cian); box-shadow:0 0 10px rgba(var(--k-cian-rgb),.30) }
body.acceso button{
  width:100%; padding:var(--k-e3); border:none; border-radius:var(--k-r);
  background:var(--k-cian); color:var(--k-sobre-cian); cursor:pointer;
  font-family:inherit; font-weight:var(--k-peso-fuerte); font-size:var(--k-etiqueta-md);
  letter-spacing:.05em; text-transform:uppercase;
  box-shadow:0 0 15px rgba(var(--k-cian-rgb),.40); transition:all var(--k-vel);
}
body.acceso button:hover:not(:disabled){ background:var(--k-cian-claro);
  box-shadow:0 0 24px rgba(var(--k-cian-rgb),.55) }
body.acceso button:disabled{ opacity:.45; cursor:not-allowed; box-shadow:none }
body.acceso .msg{ display:none; margin-top:var(--k-e3); font-size:var(--k-etiqueta-md) }
body.acceso .msg.show{ display:block }
body.acceso .msg.bad{ color:var(--k-magenta) }
body.acceso .msg.good{ color:var(--k-verde) }
body.acceso .pie{ margin-top:var(--k-e5); font-size:var(--k-etiqueta-sm);
  color:var(--k-texto-tenue); text-align:center }

/* ───────────────────────────────────────────────────────────────────────
   13 · PANTALLAS ESTRECHAS
   Escritorio > 1024px · tableta 600-1024px · móvil < 600px
   ─────────────────────────────────────────────────────────────────────── */
@media (max-width:1180px){
  .content{ padding:var(--k-e10) var(--k-e8) }
  .bento{ grid-template-columns:1fr 1fr }
  .bento-card.destacada{ grid-column:span 2 }
  .cfg-row{ grid-template-columns:1fr 1fr }
  .ren-grid{ grid-template-columns:1fr 2fr 1fr }
  .modal-bg{ padding:var(--k-e5) }
  .modal-body{ grid-template-columns:1fr; gap:var(--k-e6) }
  .mb-left{ border-right:none; border-bottom:1px solid var(--k-linea);
    padding-right:0; padding-bottom:var(--k-e6) }
  .mb-acciones{ margin-top:0; flex-direction:row }
  .modal-head h2{ font-size:var(--k-cuerpo-lg) }
}
@media (max-width:1024px){
  .buscador{ display:none }
}
@media (max-width:760px){
  .content{ padding:var(--k-e6) var(--k-e5) var(--k-e10); gap:var(--k-e6) }
  .seccion-cab h2{ font-size:32px }
  .bento, .bento-card.destacada{ grid-template-columns:1fr; grid-column:auto }
  .cfg-row, .ren-grid{ grid-template-columns:1fr }
  .modal{ max-height:none }
  .modal-head, .modal-body, .modal-foot{ padding:var(--k-e4) }
  .consec{ order:3 }
  .ren-head{ flex-direction:column; gap:var(--k-e2) }
  .ren-imp{ text-align:left }
  .modal-foot{ flex-direction:column; align-items:stretch; gap:var(--k-e3) }
  .bento-card .cifra{ font-size:44px }
  /* La tabla pasa de rejilla de 12 a tarjetas apiladas */
  .tabla-panel thead{ display:none }
  .tabla-panel tbody tr{ grid-template-columns:1fr 1fr; gap:var(--k-e2) }
  .tabla-panel td{ grid-column:span 1 !important }
  .tabla-panel td.col-4{ grid-column:span 2 !important }
  .tabla-pie{ flex-direction:column; align-items:flex-start }
  .modal-bg{ padding:var(--k-e3) }
}

/* ───────────────────────────────────────────────────────────────────────
   13b · MATERIALES
   Ni una medida cambia aquí: ni tamaños, ni espaciados, ni jerarquías.
   Lo que cambia es DE QUÉ está hecha cada capa.

   Antes todo era el mismo negro con un velo blanco encima, así que fondo,
   menú, tabla, tarjeta y control eran el mismo material a distinta opacidad
   — y el ojo los leía como un solo plano. Ahora cada nivel tiene su tono
   propio, con un punto de grafito frío que los separa sin aclararlos:

     fondo    #070809   el vacío sobre el que se apoya todo
     menú     #0A0B0D   distinto del fondo, ni más claro ni más oscuro
     tabla    #0C0E10   una pieza sólida, no un hueco en el fondo
     tarjeta  #0F1113   por encima de la tabla
     control  #121417   lo que se toca, siempre lo más cercano

   Son cinco pasos de dos o tres puntos cada uno: por separado ninguno se
   nota, juntos el ojo lee capas. Nada de esto añade brillo, desenfoque,
   sombra ni saturación — al contrario, la mayoría de los velos blancos se
   sustituyen por tono, que es menos efecto y más material.
   ─────────────────────────────────────────────────────────────────────── */
:root{
  --m-fondo:        #070809;
  --m-menu:         #0A0B0D;
  --m-tabla:        #0C0E10;
  --m-tabla-alto:   #101215;   /* la fila bajo el cursor */
  --m-tarjeta:      #0F1113;
  --m-control:      #121417;
  --m-control-alto: #16191D;
  --m-modal:        #0D0F11;
  --m-modal-panel:  #111316;

  /* El filo de luz del borde superior: no es un efecto, es el canto
     iluminado de una lámina. Se mantiene igual que antes, no sube. */
  --z-filo:   rgba(255,255,255,.045);
  --z-luz:    rgba(255,255,255,.028);
  --z-hondo:  0 18px 44px rgba(0,0,0,.30);
  --z-asiento:0 1px 2px rgba(0,0,0,.35);
}

/* ── El fondo ────────────────────────────────────────────────────────
   Luz rebotando sobre cristal negro: dos manchas enormes, blanco puro por
   debajo del 2%. No hay borde donde empiece o acabe, así que no se ve el
   degradado — solo deja de haber un negro uniforme. */
body{ background:var(--m-fondo) }
body::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(140vw 100vh at 50% -30%, rgba(255,255,255,.018), transparent 64%),
    radial-gradient(95vw 75vh at 92% 120%, rgba(255,255,255,.011), transparent 62%);
}
/* El cascarón del cliente (menú y barra superior) viste el diseño de Stitch
   desde la sesión 11: sus materiales viven en el <style> de index.html.
   El #sidebar de materiales se retiró: con la especificidad del id habría
   pisado el cristal del diseño. */
/* ── Buscador: control, es decir el material más cercano a la mano ── */
.buscador{
  background:var(--m-control);
  backdrop-filter:none; -webkit-backdrop-filter:none;
  border-color:rgba(255,255,255,.055);
  box-shadow:inset 0 1px 0 var(--z-filo), var(--z-asiento);
}
.buscador:focus-within{ background:var(--m-control-alto);
  box-shadow:inset 0 1px 0 var(--z-filo) }

/* ── Tarjetas de indicador: por encima de la tabla ── */
.bento-card{
  background:var(--m-tarjeta);
  backdrop-filter:none; -webkit-backdrop-filter:none;
  border:1px solid rgba(255,255,255,.05);
  box-shadow:inset 0 1px 0 var(--z-filo), var(--z-hondo);
}
.bento-card::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:radial-gradient(120% 90% at 100% 0%, var(--z-luz), transparent 58%);
  transition:opacity var(--z-vel-lenta) var(--z-curva); opacity:.85;
}
.bento-card:hover::after{ opacity:1 }
.bento-card .fila, .bento-card .cifra,
.bento-card .nota, .bento-card .progreso{ position:relative; z-index:1 }

/* ── Tabla: una pieza sólida, no un hueco en el fondo ── */
.tabla-panel{
  background:var(--m-tabla);
  backdrop-filter:none; -webkit-backdrop-filter:none;
  box-shadow:inset 0 1px 0 var(--z-filo);
}
.tabla-panel thead{
  background:rgba(255,255,255,.012);
  border-bottom:1px solid rgba(255,255,255,.045);
}
.tabla-panel tbody tr{ border-bottom:1px solid rgba(255,255,255,.026) }
/* La fila bajo el cursor sube un peldaño de material, no se ilumina */
.tabla-panel tbody tr:hover{ background:var(--m-tabla-alto) }
.tabla-pie{ border-top:1px solid rgba(255,255,255,.036); background:rgba(0,0,0,.16) }

/* ── Tarjetas del resto de pantallas ── */
.card{ background:var(--m-tarjeta); backdrop-filter:none; -webkit-backdrop-filter:none;
  box-shadow:inset 0 1px 0 var(--z-filo) }

/* ── Controles: lo que se toca, siempre el material más cercano ────────
   Se restablecen después los que llevan acento, para que el tono no se los
   coma. */
.btn, .pag:hover:not(:disabled), .menu-btn:hover, .icon-btn:hover,
.causar .via, .modal .sel-trigger, .modal .cfg-fld input, .modal .cfg-fld select{
  background:var(--m-control);
  backdrop-filter:none; -webkit-backdrop-filter:none;
}
.btn{ box-shadow:inset 0 1px 0 var(--z-filo);
  transition:background .22s var(--z-curva), border-color .22s var(--z-curva),
             color .22s var(--z-curva), box-shadow .22s var(--z-curva) }
.btn:hover{ background:var(--m-control-alto);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.055), var(--z-asiento) }
.causar .via{ box-shadow:inset 0 1px 2px rgba(0,0,0,.45) }
.causar:hover .via{ background:var(--m-control-alto) }

/* Los de acento conservan su tinte: el material no los tapa */
.btn-ghost{ background:rgba(var(--z-acento-rgb),.04) }
.btn-ghost:hover{ background:rgba(var(--z-acento-rgb),.08) }
.btn-primary{ background:rgba(var(--z-acento-rgb),.05) }
.btn-primary:hover{ background:rgba(var(--z-acento-rgb),.10) }
.causar[aria-pressed="true"] .via{ background:rgba(var(--z-acento-rgb),.20) }
.navitem.active, .pag.activa, .menu-btn.destacado{
  box-shadow:inset 0 1px 0 var(--z-filo) }

/* ── Cápsulas: cristal tintado, mismo tamaño y mismo color ── */
.marca, .estado-conex, .avatar, .badge{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
  backdrop-filter:none; -webkit-backdrop-filter:none;
}

/* ── Piezas que flotan: un peldaño por encima de todo ── */
.flotante, .panel-flotante, .menu-flotante{
  background:var(--m-control);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  box-shadow:inset 0 1px 0 var(--z-filo), 0 24px 60px rgba(0,0,0,.5);
}

/* ── Ventana de causación: su propia pila de materiales ── */
.modal{
  background:var(--m-modal);
  box-shadow:inset 0 1px 0 var(--z-filo), 0 32px 90px rgba(0,0,0,.6);
}
.ficha, .ren, .cuadre{
  background:var(--m-modal-panel);
  backdrop-filter:none; -webkit-backdrop-filter:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
}
.modal .btn{ background:var(--m-control-alto) }
.modal .btn:hover{ background:#1A1D21 }
.ficha{ position:relative; overflow:hidden }
.ficha::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:radial-gradient(120% 80% at 100% 0%, rgba(255,255,255,.020), transparent 58%);
}
.ficha > *{ position:relative; z-index:1 }
.soltar{ background:rgba(255,255,255,.012) }

/* ── Acceso ── */
body.acceso .card{ background:var(--m-tarjeta) }

/* ───────────────────────────────────────────────────────────────────────
   13b-bis · ARRANQUE
   La aplicación no se enseña a medio construir. Mientras se comprueba la
   sesión y se piden los datos, la pantalla se queda en el negro del fondo —
   el mismo que ya se está viendo— y aparece de una vez, completa.
   Sin destellos, sin armazón vacío, sin saltos.
   ─────────────────────────────────────────────────────────────────────── */
/* El velo anti-parpadeo del cliente vive ahora en index.html
   (body.bandeja-stitch); aquí queda la animación de rescate que comparte:
   si el guion fallara y nunca marcara "listo", la aplicación aparece igual
   a los dos segundos — más vale verla imperfecta que no verla. */
@keyframes k-rescate{ to{ opacity:1 } }

/* ───────────────────────────────────────────────────────────────────────
   13c · AVISO DE SOPORTE
   Ámbar, no cian: esto no es un estado normal de la aplicación, es una
   situación excepcional que alguien debe poder leer de reojo. Ocupa el ancho
   completo por encima de todo, y no se puede cerrar.
   ─────────────────────────────────────────────────────────────────────── */
.barra-soporte{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; gap:12px; padding:10px 24px;
  background:rgba(var(--k-ambar-rgb),.10);
  border-bottom:1px solid rgba(var(--k-ambar-rgb),.28);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  color:var(--k-ambar); font-size:13px; font-weight:var(--k-peso-ligero);
}
.barra-soporte .punto{ width:7px; height:7px; border-radius:50%; flex:none;
  background:var(--k-ambar); animation:k-pulso 2.4s infinite }
.barra-soporte b{ font-weight:var(--k-peso-fuerte) }
.barra-soporte .btn{ margin-left:auto; height:32px; padding:0 14px; font-size:13px;
  color:var(--k-ambar); border-color:rgba(var(--k-ambar-rgb),.30);
  background:rgba(var(--k-ambar-rgb),.06) }
.barra-soporte .btn:hover{ background:rgba(var(--k-ambar-rgb),.12) }
/* Todo baja para dejarle sitio: nada queda tapado detrás del aviso */
body.con-soporte #sidebar{ padding-top:66px }
body.con-soporte > main > header{ top:44px }
body.con-soporte > main{ padding-top:44px }

/* ───────────────────────────────────────────────────────────────────────
   13d · PANEL DE OPERACIÓN
   El mismo material que el resto de Kausa, con dos diferencias deliberadas:
   una franja de estado permanente arriba, y las cifras en monoespaciada.
   Lo segundo no es estética: en un panel que se mira de reojo, los números
   tienen que ocupar siempre el mismo sitio para notar cuándo cambian.
   ─────────────────────────────────────────────────────────────────────── */
.ops-estado{
  position:sticky; top:0; z-index:41; height:44px;
  display:flex; align-items:center; gap:24px; padding:0 32px;
  background:var(--m-menu); border-bottom:1px solid var(--z-borde);
  font-family:var(--k-fuente-dato); font-size:11.5px; color:var(--z-texto-3);
  letter-spacing:.02em; overflow-x:auto; white-space:nowrap;
}
.ops-estado .dato{ display:flex; align-items:center; gap:8px; flex:none }
.ops-estado .punto{ width:6px; height:6px; border-radius:50%; flex:none;
  background:var(--z-acento) }
.ops-estado .punto.mal{ background:var(--k-magenta) }
.ops-estado .punto.medio{ background:var(--k-ambar) }
.ops-estado .sep{ flex:1 }
.ops-estado b{ color:var(--z-texto-2); font-weight:var(--k-peso-normal) }

.ops-saludo{ display:flex; justify-content:space-between; align-items:flex-end;
  gap:24px; flex-wrap:wrap }
.ops-saludo h2{ font-size:40px; font-weight:var(--k-peso-normal); letter-spacing:-.02em }
.ops-saludo .sub{ display:block; margin-top:8px; font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--z-texto-3) }

/* ───────────────────────────────────────────────────────────────────────
   13d-0 · ARMAZÓN DE LA CONSOLA DE OPERACIÓN
   Barra lateral con la navegación dentro, cabecera con buscador y pie de
   estado. Mismo material que el resto de Kausa: el operador debe sentir que
   está en el mismo producto, no en otra herramienta.
   ─────────────────────────────────────────────────────────────────────── */
body.ops{ display:flex; min-height:100vh; background:var(--m-fondo) }

/* ── Barra lateral ── */
.opsnav{
  position:fixed; left:0; top:0; height:100%; width:80px; z-index:60;
  display:flex; flex-direction:column; overflow:hidden;
  background:var(--m-menu); border-right:1px solid var(--z-borde);
  box-shadow:inset -1px 0 0 rgba(255,255,255,.020);
  transition:width var(--z-vel-lenta) var(--z-curva);
}
@media (hover: hover) and (pointer: fine){
  .opsnav:hover{ width:280px; box-shadow:14px 0 40px rgba(0,0,0,.45) }
  .opsnav:hover .opsnav-txt{ opacity:1 }
}
.opsnav-marca{ height:76px; flex:none; display:flex; align-items:center; gap:16px;
  padding:0 24px; border-bottom:1px solid var(--z-borde) }
.opsnav-marca img{ width:30px; height:30px; flex:none; object-fit:contain }
.opsnav-lista{ flex:1; padding:20px 12px; display:flex; flex-direction:column; gap:4px;
  overflow-y:auto; overflow-x:hidden }
.opsnav-pie{ padding:12px; border-top:1px solid var(--z-borde); flex:none }

.opsnav a{
  position:relative; display:flex; align-items:center; gap:16px;
  height:48px; padding:0 16px; border-radius:12px; cursor:pointer;
  color:var(--z-texto-3); text-decoration:none; border:1px solid transparent;
  transition:color var(--z-vel) var(--z-curva), background var(--z-vel), border-color var(--z-vel);
}
.opsnav a:hover{ color:var(--z-texto-2); background:var(--z-superficie) }
.opsnav a.activo{
  color:var(--z-acento); background:rgba(var(--z-acento-rgb),.05);
  border-color:rgba(var(--z-acento-rgb),.16);
}
.opsnav a.activo::before{
  content:""; position:absolute; left:-12px; top:50%; transform:translateY(-50%);
  width:3px; height:26px; border-radius:0 3px 3px 0; background:var(--z-acento);
}
.opsnav .ico{ width:22px; height:22px; flex:none; stroke-width:1.6 }
.opsnav-txt{ font-size:14px; font-weight:var(--k-peso-ligero); white-space:nowrap;
  opacity:0; transition:opacity var(--z-vel-lenta) var(--z-curva) }

/* ── Zona principal ── */
.opsmain{ flex:1; margin-left:80px; min-height:100vh; display:flex; flex-direction:column }

/* Cabecera ligera: está para orientar, no para pesar. Menos alto, sin
   fondo propio y con un filo que apenas se percibe. */
.opscab{
  position:sticky; top:0; z-index:50; height:60px; flex:none;
  display:flex; align-items:center; gap:14px; padding:0 28px;
  background:rgba(9,10,11,.72);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(255,255,255,.030);
}
.opsbuscar{
  position:relative; display:flex; align-items:center; width:320px;
  border-radius:10px; background:rgba(255,255,255,.028);
  border:1px solid rgba(255,255,255,.045); box-shadow:none;
  transition:border-color var(--z-vel), background var(--z-vel);
}
.opsbuscar:focus-within{ border-color:rgba(var(--z-acento-rgb),.30);
  background:var(--m-control-alto) }
.opsbuscar .ico{ position:absolute; left:14px; color:var(--z-texto-3); pointer-events:none }
.opsbuscar input{ width:100%; height:38px; padding:0 52px 0 42px; background:none;
  border:none; outline:none; color:var(--z-texto); font-family:inherit; font-size:14px;
  font-weight:var(--k-peso-ligero) }
.opsbuscar input::placeholder{ color:var(--z-texto-3) }
.opsbuscar .atajo{ position:absolute; right:12px; font-size:11px; color:var(--z-texto-3);
  padding:3px 7px; border-radius:6px; border:1px solid var(--z-borde); pointer-events:none }

.opscuenta{ display:flex; align-items:center; gap:10px; padding:4px 10px 4px 4px;
  border-radius:999px; background:none; border:1px solid transparent;
  cursor:pointer; font-family:inherit; text-align:left;
  transition:background var(--z-vel), border-color var(--z-vel) }
.opscuenta:hover{ background:rgba(255,255,255,.028); border-color:rgba(255,255,255,.045) }
.opscuenta .inicial{ width:28px; height:28px; border-radius:50%; display:grid;
  place-items:center; font-size:11px; color:var(--z-acento);
  background:rgba(var(--z-acento-rgb),.06); border:1px solid rgba(var(--z-acento-rgb),.18) }
.opscuenta b{ display:block; font-size:13px; font-weight:var(--k-peso-normal); color:var(--z-texto) }
.opscuenta span{ display:block; font-size:11px; color:var(--z-texto-3) }
.opscuenta .flecha{ width:14px; height:14px; color:var(--z-texto-3); flex:none }

/* ── Ficha de cuenta desplegada ───────────────────────────────────────
   Cristal, esquinas redondeadas y transparencia leve. Nada de bordes
   marcados: se apoya sobre la pantalla, no la interrumpe. */
.opsmenu{
  position:absolute; right:28px; top:52px; z-index:70; width:296px;
  border-radius:16px; overflow:hidden; padding:6px;
  background:rgba(18,20,23,.72);
  backdrop-filter:blur(28px) saturate(140%); -webkit-backdrop-filter:blur(28px) saturate(140%);
  border:1px solid rgba(255,255,255,.07);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 24px 60px rgba(0,0,0,.5);
  animation:z-abre .18s var(--z-curva);
}
.opsmenu .quien{ display:flex; align-items:center; gap:14px; padding:16px 14px 14px }
.opsmenu .quien .inicial{ width:42px; height:42px; border-radius:50%; display:grid;
  place-items:center; font-size:15px; color:var(--z-acento);
  background:rgba(var(--z-acento-rgb),.07); border:1px solid rgba(var(--z-acento-rgb),.18) }
.opsmenu .quien b{ display:block; font-size:15px; font-weight:var(--k-peso-normal);
  color:var(--z-texto) }
.opsmenu .quien span{ display:block; font-size:12px; color:var(--z-texto-3); margin-top:2px }
.opsmenu .raya{ height:1px; margin:4px 12px; background:rgba(255,255,255,.055) }
.opsmenu .dato{ display:flex; align-items:center; gap:10px; padding:11px 14px;
  font-size:13px; font-weight:var(--k-peso-ligero); color:var(--z-texto-2) }
.opsmenu .dato .val{ margin-left:auto; color:var(--z-texto-3);
  font-family:var(--k-fuente-dato); font-size:12px }
.opsmenu button.accion{
  display:flex; align-items:center; gap:10px; width:100%; padding:12px 14px;
  border:none; border-radius:11px; background:none; cursor:pointer;
  color:var(--z-texto-2); font-family:inherit; font-size:13.5px;
  font-weight:var(--k-peso-ligero); text-align:left;
  transition:background var(--z-vel), color var(--z-vel);
}
.opsmenu button.accion:hover{ background:rgba(255,255,255,.04); color:var(--z-texto) }
.opsmenu button.accion .ico{ width:16px; height:16px; color:var(--z-texto-3) }

.opslienzo{ flex:1; width:100%; max-width:1600px; margin:0 auto;
  padding:32px 32px 48px; display:flex; flex-direction:column; gap:24px }

/* ── Pie de estado ── */
.opspie{
  flex:none; display:flex; align-items:center; justify-content:center; gap:32px;
  padding:16px 32px; border-top:1px solid var(--z-borde);
  background:var(--m-menu); font-family:var(--k-fuente-dato);
  font-size:11.5px; color:var(--z-texto-3); flex-wrap:wrap;
}
.opspie .dato{ display:flex; align-items:center; gap:8px }
.opspie .punto{ width:6px; height:6px; border-radius:50%; background:var(--z-acento) }
.opspie .punto.mal{ background:var(--k-magenta) }
.opspie .punto.medio{ background:var(--k-ambar) }
.opspie .punto.sin{ background:var(--z-texto-3) }
.opspie .izq{ margin-right:auto }
.opspie .der{ margin-left:auto }

/* ── Estado de integraciones ── */
.integraciones{ display:flex; flex-direction:column }
.integracion{ display:flex; align-items:center; gap:14px; padding:16px 24px;
  border-top:1px solid rgba(255,255,255,.035); font-size:14px;
  font-weight:var(--k-peso-ligero); color:var(--z-texto-2) }
.integracion .sello{ width:30px; height:30px; border-radius:8px; flex:none;
  display:grid; place-items:center; font-size:11px;
  background:var(--m-control); border:1px solid var(--z-borde); color:var(--z-texto-3) }
.integracion .estado{ margin-left:auto; display:flex; align-items:center; gap:8px;
  font-family:var(--k-fuente-dato); font-size:10.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--z-acento) }
.integracion .estado .punto{ width:6px; height:6px; border-radius:50%; background:var(--z-acento) }
.integracion.mal .estado{ color:var(--k-magenta) }
.integracion.mal .estado .punto{ background:var(--k-magenta) }
.integracion.sin .estado{ color:var(--z-texto-3) }
.integracion.sin .estado .punto{ background:var(--z-texto-3) }
.integracion .ms{ font-family:var(--k-fuente-dato); font-size:12px;
  color:var(--z-texto-3); min-width:56px; text-align:right }

/* ── Tabla de clientes ── */
.clientes th, .clientes td{ padding:16px 24px }
.clientes .num{ text-align:right; font-family:var(--k-fuente-dato);
  font-variant-numeric:tabular-nums }
.clientes .cliente{ display:flex; align-items:center; gap:14px; min-width:0 }
.clientes .cliente .avatar{ width:32px; height:32px }
.clientes .cliente b{ display:block; font-size:14px; font-weight:var(--k-peso-normal);
  color:var(--z-texto) }
.clientes .cliente span{ display:block; font-size:12px; color:var(--z-texto-3) }
.chispa{ display:flex; align-items:flex-end; gap:2px; height:26px; min-width:90px }
.chispa i{ flex:1; min-height:2px; border-radius:2px; background:rgba(var(--z-acento-rgb),.45) }
.chispa i.ult{ background:var(--z-acento) }

@media (max-width:1100px){
  .opsbuscar{ display:none }
  .opslienzo{ padding:24px 20px 40px }
}

/* ── BLOQUE 1 · SALUD ─────────────────────────────────────────────────
   Lo primero que se mira y lo más grande de la fila. Responde una sola
   pregunta —¿la plataforma está sana?— y por eso no lleva nada más. */
.ops-fila1{ display:grid; grid-template-columns:4fr 6fr; gap:24px }
.ops-fila2{ display:grid; grid-template-columns:2fr 1fr; gap:24px; align-items:start }
@media (max-width:1100px){ .ops-fila2{ grid-template-columns:1fr } }

.ops-salud{
  border-radius:var(--z-r-lg); padding:32px;
  background:var(--m-tarjeta); border:1px solid var(--z-borde);
  box-shadow:inset 0 1px 0 var(--z-filo);
  display:flex; flex-direction:column; gap:28px;
}
.salud-titular{ display:flex; align-items:center; gap:20px }
.salud-aro{ width:76px; height:76px; flex:none; position:relative }
.salud-aro svg{ width:100%; height:100%; transform:rotate(-90deg) }
.salud-aro circle{ fill:none; stroke-width:3 }
.salud-aro .pista{ stroke:rgba(255,255,255,.07) }
.salud-aro .arco{ stroke:var(--z-acento); stroke-linecap:round;
  transition:stroke-dasharray .6s var(--z-curva) }
.salud-aro .marca{ position:absolute; inset:0; display:grid; place-items:center;
  color:var(--z-acento) }
.salud-nombre{ font-size:13px; color:var(--z-texto-3); letter-spacing:.02em }
.salud-estado{ font-size:26px; font-weight:var(--k-peso-normal); color:var(--z-acento);
  line-height:1.2; text-transform:capitalize }
.salud-pct{ font-family:var(--k-fuente-dato); font-size:15px; color:var(--z-texto-2);
  margin-top:4px }
.salud-pct small{ color:var(--z-texto-3); font-family:var(--k-fuente); font-size:12px }

.ops-salud.degradado .salud-estado, .ops-salud.degradado .salud-aro .marca{ color:var(--k-ambar) }
.ops-salud.degradado .salud-aro .arco{ stroke:var(--k-ambar) }
.ops-salud.caido .salud-estado, .ops-salud.caido .salud-aro .marca{ color:var(--k-magenta) }
.ops-salud.caido .salud-aro .arco{ stroke:var(--k-magenta) }

.salud-lista{ display:flex; flex-direction:column; gap:2px; margin-top:auto }
.salud-item{ display:flex; align-items:center; gap:12px; padding:11px 0;
  border-top:1px solid rgba(255,255,255,.035); font-size:14px;
  font-weight:var(--k-peso-ligero); color:var(--z-texto-2) }
.salud-item .ico{ width:16px; height:16px; flex:none; color:var(--z-acento) }
.salud-item.mal .ico{ color:var(--k-magenta) }
.salud-item.mal{ color:var(--k-magenta) }
.salud-item.sin .ico{ color:var(--z-texto-3) }
.salud-item .dato{ margin-left:auto; font-family:var(--k-fuente-dato);
  font-size:12px; color:var(--z-texto-3) }

/* ── BLOQUE 2 · ALERTAS ───────────────────────────────────────────────
   Solo lo que pide una decisión. Si no hay nada, se dice y se calla: un
   panel que grita cuando todo va bien enseña a ignorarlo. */
.ops-alertas{
  border-radius:var(--z-r-lg); overflow:hidden; display:flex; flex-direction:column;
  background:var(--m-tarjeta); border:1px solid var(--z-borde);
  box-shadow:inset 0 1px 0 var(--z-filo);
}
.ops-alertas .cab{ display:flex; align-items:center; gap:10px; padding:20px 24px 14px }
.ops-alertas .cab .rot{ font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--z-texto-3) }
.ops-alertas .cab .n{ margin-left:auto; font-family:var(--k-fuente-dato); font-size:12px;
  color:var(--z-texto-3) }
.ops-tranquilo{ flex:1; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:10px; padding:40px 24px; text-align:center }
.ops-tranquilo .ico{ width:28px; height:28px; color:var(--z-acento); opacity:.7 }
.ops-tranquilo b{ font-size:16px; font-weight:var(--k-peso-normal); color:var(--z-texto-2) }
.ops-tranquilo span{ font-size:13px; color:var(--z-texto-3) }

.alerta{ display:flex; align-items:flex-start; gap:14px; padding:16px 24px;
  border-top:1px solid rgba(255,255,255,.035); cursor:default }
.alerta[data-ir]{ cursor:pointer }
.alerta[data-ir]:hover{ background:var(--m-tabla-alto) }
.alerta .marca-n{ width:6px; height:6px; border-radius:50%; flex:none; margin-top:7px;
  background:var(--z-texto-3) }
.alerta.critico .marca-n{ background:var(--k-magenta) }
.alerta.aviso .marca-n{ background:var(--k-ambar) }
.alerta.info .marca-n{ background:var(--z-acento) }
.alerta b{ display:block; font-size:14px; font-weight:var(--k-peso-normal); color:var(--z-texto) }
.alerta.critico b{ color:var(--k-magenta) }
.alerta span{ display:block; font-size:12.5px; color:var(--z-texto-3); margin-top:3px }

/* ── BLOQUE 3 · ACTIVIDAD ─────────────────────────────────────────────
   Una sola franja con tres cifras. No tres tarjetas: son la misma idea
   —cuánto se movió hoy— y separarlas obliga a mirar tres veces. */
.ops-actividad{
  display:grid; grid-template-columns:repeat(4,1fr);
  border-radius:var(--z-r-lg); overflow:hidden;
  background:var(--m-tarjeta); border:1px solid var(--z-borde);
  box-shadow:inset 0 1px 0 var(--z-filo);
}
.ops-actividad > div{ padding:24px 28px; border-right:1px solid rgba(255,255,255,.035) }
.ops-actividad > div:last-child{ border-right:none }
.ops-actividad .rot{ font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--z-texto-3) }
.ops-actividad .val{ display:flex; align-items:baseline; gap:8px; margin-top:12px;
  font-family:var(--k-fuente-dato); font-size:28px; font-weight:var(--k-peso-normal);
  color:var(--z-texto); letter-spacing:-.02em; white-space:nowrap }
/* El dinero lleva el acento: es lo único de esta franja que decide algo */
.ops-actividad .dinero .val{ color:var(--z-acento) }
.ops-actividad .val small{ font-family:var(--k-fuente); font-size:13px;
  color:var(--z-texto-3); letter-spacing:0 }

/* Eventos */
.ops-eventos{ border-radius:var(--z-r-lg); overflow:hidden;
  background:var(--m-tabla); border:1px solid var(--z-borde);
  box-shadow:inset 0 1px 0 var(--z-filo) }
.ops-eventos .cab-ev{ display:flex; align-items:center; gap:12px;
  padding:20px 24px; border-bottom:1px solid var(--z-borde) }
.ops-eventos .cab-ev h3{ font-size:16px; font-weight:var(--k-peso-normal) }
.ops-eventos .cab-ev a{ margin-left:auto; font-size:13px; color:var(--z-acento);
  text-decoration:none; cursor:pointer }
.ops-eventos table{ width:100%; border-collapse:collapse; font-size:13px }
.ops-eventos th{ text-align:left; padding:12px 24px; font-size:10.5px;
  letter-spacing:.12em; text-transform:uppercase; color:var(--z-texto-3);
  font-weight:var(--k-peso-normal); border-bottom:1px solid var(--z-borde) }
.ops-eventos td{ padding:15px 24px; border-bottom:1px solid rgba(255,255,255,.026);
  color:var(--z-texto-2); font-weight:var(--k-peso-ligero) }
.ops-eventos tr:last-child td{ border-bottom:none }
.ops-eventos tr:hover td{ background:var(--m-tabla-alto) }
.ops-eventos .hora{ font-family:var(--k-fuente-dato); color:var(--z-texto-3) }
.ops-eventos .fila-mal td{ background:rgba(var(--k-magenta-rgb),.03) }

.nivel{ display:inline-block; padding:3px 10px; border-radius:6px;
  font-family:var(--k-fuente-dato); font-size:10.5px; letter-spacing:.08em;
  text-transform:uppercase; border:1px solid }
.nivel.ok{ color:var(--z-acento); background:rgba(var(--z-acento-rgb),.06);
  border-color:rgba(var(--z-acento-rgb),.20) }
.nivel.aviso{ color:var(--k-ambar); background:rgba(var(--k-ambar-rgb),.06);
  border-color:rgba(var(--k-ambar-rgb),.20) }
.nivel.error{ color:var(--k-magenta); background:rgba(var(--k-magenta-rgb),.06);
  border-color:rgba(var(--k-magenta-rgb),.20) }

/* Los eventos son la pieza más grande: es donde ocurre el trabajo real. */
.ops-eventos.grande{ min-height:520px }
.ops-eventos.grande td{ padding:17px 24px }

@media (max-width:1100px){
  .ops-fila1{ grid-template-columns:1fr }
  .ops-actividad{ grid-template-columns:1fr 1fr }
  .ops-actividad > div{ border-right:none; border-bottom:1px solid rgba(255,255,255,.035) }
}
@media (max-width:760px){
  .ops-saludo h2{ font-size:30px } .ops-estado{ padding:0 20px }
  .ops-salud{ padding:24px }
}

/* ── Ritmo de causación por empresa ─────────────────────────────────── */
.ritmo-fila{ display:grid; grid-template-columns:1.6fr 150px 1fr 130px; gap:20px;
  align-items:center; padding:18px 24px; border-bottom:1px solid rgba(255,255,255,.026) }
.ritmo-fila:last-child{ border-bottom:none }
.ritmo-fila:hover{ background:var(--m-tabla-alto) }
.ritmo-nombre b{ display:block; font-size:14px; font-weight:var(--k-peso-normal);
  color:var(--z-texto) }
.ritmo-nombre span{ display:block; font-size:12px; color:var(--z-texto-3); margin-top:2px }

/* Doce meses en doce barras. Sin ejes ni números: la forma basta para ver
   si algo cambió, y el detalle está al lado en texto. */
.ritmo-meses{ display:flex; align-items:flex-end; gap:3px; height:36px }
.ritmo-meses i{ flex:1; min-height:2px; border-radius:2px;
  background:rgba(255,255,255,.10); transition:background var(--z-vel) }
.ritmo-meses i.act{ background:rgba(var(--z-acento-rgb),.55) }
.ritmo-meses i.baja{ background:rgba(var(--k-ambar-rgb),.65) }
.ritmo-meses i.alta{ background:rgba(var(--z-acento-rgb),.85) }
.ritmo-texto{ font-size:12.5px; color:var(--z-texto-2); line-height:1.5 }
.ritmo-marca{ justify-self:end }

/* ── Alertas vivas ──────────────────────────────────────────────────── */
.icon-btn .cuenta-alertas{
  position:absolute; top:2px; right:0; min-width:16px; height:16px; padding:0 4px;
  display:grid; place-items:center; border-radius:999px;
  background:var(--k-magenta); color:#1A0410;
  font-family:var(--k-fuente-dato); font-size:10px; line-height:1;
}
.alerta-fila{ display:flex; align-items:flex-start; gap:12px; padding:14px 24px;
  border-bottom:1px solid rgba(255,255,255,.026); font-size:13px }
.alerta-fila:last-child{ border-bottom:none }
.alerta-fila .hora{ font-family:var(--k-fuente-dato); font-size:11.5px;
  color:var(--z-texto-3); flex:none; padding-top:2px }
.alerta-fila b{ font-weight:var(--k-peso-normal); color:var(--z-texto) }
.alerta-fila span{ display:block; font-size:12px; color:var(--z-texto-3); margin-top:2px }

/* ── Consola de diagnóstico ─────────────────────────────────────────── */
.consola-fondo{
  position:fixed; inset:0; z-index:120; display:flex; justify-content:center;
  align-items:flex-start; padding:12vh 24px 24px;
  background:rgba(5,5,5,.66);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  animation:k-entra var(--z-vel) var(--z-curva);
}
.consola{
  width:min(720px,100%); max-height:70vh; display:flex; flex-direction:column;
  border-radius:var(--z-r-lg); overflow:hidden;
  background:rgba(15,15,15,.94);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border:1px solid var(--z-borde);
  box-shadow:inset 0 1px 0 var(--z-filo), 0 24px 70px rgba(0,0,0,.55);
  animation:z-abre .2s var(--z-curva);
}
.consola-linea{ display:flex; align-items:center; gap:12px; padding:0 20px;
  border-bottom:1px solid var(--z-borde); flex:none }
.consola-linea .prompt{ font-family:var(--k-fuente-dato); font-size:14px;
  color:var(--z-acento); flex:none }
.consola-linea input{
  flex:1; height:56px; background:none; border:none; outline:none;
  color:var(--z-texto); font-family:var(--k-fuente-dato); font-size:14px;
}
.consola-linea input::placeholder{ color:var(--z-texto-3) }
.consola-linea .pista{ font-size:11px; color:var(--z-texto-3); flex:none;
  border:1px solid var(--z-borde); border-radius:6px; padding:3px 7px }
.consola-salida{ overflow-y:auto; padding:8px 0 }
.consola-salida .titulo{ padding:14px 20px 8px; font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--z-texto-3) }
.consola-salida .par{ display:grid; grid-template-columns:190px 1fr; gap:16px;
  padding:8px 20px; font-family:var(--k-fuente-dato); font-size:12.5px;
  color:var(--z-texto-2) }
.consola-salida .par b{ color:var(--z-acento); font-weight:var(--k-peso-normal) }
.consola-salida .texto{ padding:16px 20px; font-size:13px; color:var(--z-texto-2) }
.consola-salida .eco{ padding:12px 20px 4px; font-family:var(--k-fuente-dato);
  font-size:12px; color:var(--z-texto-3) }
.consola-aviso{ padding:14px 20px; border-top:1px solid var(--z-borde);
  font-size:11.5px; color:var(--z-texto-3); line-height:1.6; flex:none }

@media (max-width:900px){
  .ritmo-fila{ grid-template-columns:1fr; gap:10px }
  .ritmo-marca{ justify-self:start }
}

/* ── Segundo factor ──────────────────────────────────────────────────── */
.mfa-codigo{
  width:100%; height:56px; text-align:center; letter-spacing:.5em; text-indent:.5em;
  font-family:var(--k-fuente-dato); font-size:24px;
  background:var(--m-control); border:1px solid var(--z-borde); border-radius:var(--z-r);
  color:var(--z-texto); outline:none; margin-bottom:16px;
  transition:border-color var(--z-vel), box-shadow var(--z-vel);
}
.mfa-codigo:focus{ border-color:rgba(var(--z-acento-rgb),.45);
  box-shadow:0 0 0 3px rgba(var(--z-acento-rgb),.07) }

.mfa-qr{ display:flex; justify-content:center; padding:20px;
  background:#FFFFFF; border-radius:var(--z-r); margin:16px 0 }
.mfa-secreto{
  font-family:var(--k-fuente-dato); font-size:13px; letter-spacing:.08em;
  color:var(--z-acento); word-break:break-all; text-align:center;
  padding:12px 16px; border-radius:var(--z-r);
  background:rgba(var(--z-acento-rgb),.04); border:1px solid rgba(var(--z-acento-rgb),.16);
}
.mfa-rescates{
  display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:16px 0;
  font-family:var(--k-fuente-dato); font-size:14px;
}
.mfa-rescates span{ padding:10px 14px; border-radius:8px; color:var(--z-texto);
  background:var(--m-control); border:1px solid var(--z-borde); text-align:center }
.mfa-aviso{ font-size:13px; line-height:1.6; color:var(--k-ambar);
  padding:14px 16px; border-radius:var(--z-r);
  background:rgba(var(--k-ambar-rgb),.06); border:1px solid rgba(var(--k-ambar-rgb),.20) }
@media (max-width:600px){ .mfa-rescates{ grid-template-columns:1fr } }

/* ───────────────────────────────────────────────────────────────────────
   14 · MOVIMIENTO REDUCIDO
   ─────────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
}

/* ── Feedback (4 sep 2026): la caja del modal del botón «?» ─────────────
   Sin esta regla el textarea sale con la pinta del navegador —blanco y en
   letra de máquina— en medio del cristal (lección 22). Acotada al modal. */
.fb-campo label{ font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.6) }
.fb-campo textarea{ width:100%; box-sizing:border-box; background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.1); border-radius:8px; padding:12px 16px;
  color:var(--k-texto); font-family:inherit; font-size:14px; line-height:1.5; resize:vertical }
.fb-campo textarea:focus{ outline:none; border-color:rgba(113,255,236,.5) }
.fb-campo textarea::placeholder{ color:rgba(255,255,255,.35) }