/* =============================================================================
   NÚCLEO — sistema de diseño
   Identidad de EstruAI: navy + Playfair Display (titulares) + Lato (cuerpo).
   Un ERP se mira ocho horas al día: prima la densidad legible sobre el efecto.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,500;0,600;0,700;1,500&family=Lato:ital,wght@0,400;0,700;0,900;1,400&display=swap');

:root {
  /* marca */
  --navy:        #16243F;
  --marea:       #34507A;
  --azul:        #5B83B0;
  --cielo:       #AECBE2;
  --dorado:      #E3C57E;
  --dorado-vivo: #F3C969;

  /* semánticos */
  --ok:      #1e7a4f;
  --ok-sw:   #e6f4ec;
  --aviso:   #b8860b;
  --aviso-sw:#fdf3dd;
  --mal:     #b8433a;
  --mal-sw:  #fbeceb;
  --info:    #2e6fd9;
  --info-sw: #e9f1fd;
  --morado:  #7a5bb0;

  /* superficies (claro) */
  --fondo:      #f4f7fb;
  --lienzo:     #ffffff;
  --panel:      #ffffff;
  --elevado:    #ffffff;
  --suave:      #eef3f8;
  --suave-2:    #e4ecf4;
  --borde:      #dde5ee;
  --borde-fuerte:#c6d3e2;
  --tinta:      #14233c;
  --tinta-2:    #4b5b74;
  --tinta-3:    #7b89a0;
  --sombra-s:   0 1px 2px rgba(20,35,60,.06), 0 1px 3px rgba(20,35,60,.05);
  --sombra-m:   0 4px 14px rgba(20,35,60,.09), 0 1px 3px rgba(20,35,60,.05);
  --sombra-g:   0 18px 48px rgba(20,35,60,.18), 0 2px 8px rgba(20,35,60,.08);
  --barra:      #16243F;
  --barra-txt:  #cfe0f0;
  --barra-act:  rgba(255,255,255,.12);
  --acento:     var(--marea);
  --acento-txt: #ffffff;

  --r-s: 6px; --r-m: 10px; --r-g: 16px; --r-xl: 22px;
  --t-rapida: .12s ease; --t-media: .22s cubic-bezier(.4,0,.2,1);
  --lat: 244px;
  --cabecera: 56px;

  --serif: 'Playfair Display', Georgia, serif;
  --sans: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
}

html[data-tema="oscuro"] {
  --fondo:      #0d1523;
  --lienzo:     #121c2e;
  --panel:      #16223a;
  --elevado:    #1b2942;
  --suave:      #1a2740;
  --suave-2:    #223252;
  --borde:      #26354f;
  --borde-fuerte:#35496a;
  --tinta:      #e6edf7;
  --tinta-2:    #a7b6cc;
  --tinta-3:    #74849e;
  --sombra-s:   0 1px 2px rgba(0,0,0,.4);
  --sombra-m:   0 6px 18px rgba(0,0,0,.45);
  --sombra-g:   0 20px 50px rgba(0,0,0,.6);
  --barra:      #0b1322;
  --barra-txt:  #aabdd4;
  --barra-act:  rgba(255,255,255,.09);
  --acento:     #5B83B0;
  --ok-sw:   #10291e; --aviso-sw:#2a2413; --mal-sw: #2c1614; --info-sw:#12203a;
  --ok: #4cc58c; --aviso: #e0b44a; --mal: #ef7a6f; --info: #6fa3f5;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; font-family: var(--sans); font-size: 13.5px; line-height: 1.5;
  color: var(--tinta); background: var(--fondo);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
h1,h2,h3,h4 { font-family: var(--serif); font-weight: 600; margin: 0; letter-spacing: -.01em; }
h1 { font-size: 25px; } h2 { font-size: 19px; } h3 { font-size: 16px; } h4 { font-size: 14px; }
a { color: var(--acento); text-decoration: none; }
a:hover { text-decoration: underline; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--cielo); color: var(--navy); }
:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; border-radius: 4px; }

/* barras de desplazamiento discretas */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--borde-fuerte); border-radius: 6px; border: 3px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: var(--tinta-3); background-clip: content-box; }

/* ---------------------------------------------------------------- estructura */
#app { display: flex; min-height: 100vh; }

.lateral {
  width: var(--lat); flex: 0 0 var(--lat); background: var(--barra); color: var(--barra-txt);
  display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh;
  transition: width var(--t-media), flex-basis var(--t-media); z-index: 40;
}
.lateral.plegada { --lat: 62px; }
.lateral__marca {
  height: var(--cabecera); display: flex; align-items: center; gap: 10px; padding: 0 16px;
  border-bottom: 1px solid rgba(255,255,255,.08); flex: 0 0 var(--cabecera);
}
.lateral__logo {
  width: 30px; height: 30px; flex: none; border-radius: 9px;
  background: linear-gradient(140deg, var(--azul), var(--dorado));
  display: grid; place-items: center; font-family: var(--serif); font-weight: 700;
  color: var(--navy); font-size: 16px;
}
.lateral__nombre { font-family: var(--serif); font-size: 17px; color: #fff; letter-spacing: .04em; }
.lateral__lema { font-size: 9.5px; color: rgba(255,255,255,.45); letter-spacing: .08em; text-transform: uppercase; }
.lateral.plegada .lateral__nombre, .lateral.plegada .lateral__lema,
.lateral.plegada .nav__txt, .lateral.plegada .nav__grupo, .lateral.plegada .lateral__pie-txt { display: none; }

.nav { flex: 1; overflow-y: auto; padding: 10px 8px 20px; }
.nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.14); background-clip: content-box; }
.nav__grupo {
  font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.35);
  padding: 14px 12px 6px; font-weight: 700;
}
.nav__enlace {
  display: flex; align-items: center; gap: 11px; padding: 8px 11px; border-radius: 8px;
  color: var(--barra-txt); font-size: 13px; cursor: pointer; margin-bottom: 1px;
  transition: background var(--t-rapida), color var(--t-rapida); position: relative;
  text-decoration: none; white-space: nowrap;
}
.nav__enlace:hover { background: rgba(255,255,255,.07); color: #fff; text-decoration: none; }
.nav__enlace.activo { background: var(--barra-act); color: #fff; font-weight: 700; }
.nav__enlace.activo::before {
  content: ''; position: absolute; left: -8px; top: 8px; bottom: 8px; width: 3px;
  background: var(--dorado); border-radius: 0 3px 3px 0;
}
.nav__icono { width: 17px; height: 17px; flex: none; opacity: .92; }
.nav__globo {
  margin-left: auto; background: var(--mal); color: #fff; font-size: 10px; font-weight: 700;
  min-width: 18px; height: 18px; border-radius: 9px; display: grid; place-items: center; padding: 0 5px;
}
.nav__globo.suave { background: rgba(255,255,255,.16); color: #fff; }
.lateral__pie {
  border-top: 1px solid rgba(255,255,255,.08); padding: 8px; display: flex; align-items: center; gap: 8px;
}

.principal { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.cabecera {
  height: var(--cabecera); flex: none; background: var(--lienzo); border-bottom: 1px solid var(--borde);
  display: flex; align-items: center; gap: 12px; padding: 0 18px; position: sticky; top: 0; z-index: 30;
}
.buscador {
  flex: 1; max-width: 460px; display: flex; align-items: center; gap: 8px;
  background: var(--suave); border: 1px solid transparent; border-radius: 9px; padding: 7px 11px;
  cursor: pointer; color: var(--tinta-3); font-size: 13px; transition: var(--t-rapida);
}
.buscador:hover { border-color: var(--borde-fuerte); background: var(--lienzo); }
.buscador kbd {
  margin-left: auto; font-family: var(--sans); font-size: 10.5px; background: var(--lienzo);
  border: 1px solid var(--borde); border-radius: 5px; padding: 1px 6px; color: var(--tinta-3);
}
html[data-tema="oscuro"] .buscador kbd { background: var(--elevado); }

.contenido { flex: 1; padding: 22px 26px 60px; min-width: 0; }
.contenido.ancho-completo { padding: 0; }

/* ------------------------------------------------------------------ botones */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 7px 14px; border-radius: 8px; border: 1px solid var(--borde-fuerte);
  background: var(--lienzo); color: var(--tinta); font-size: 13px; font-weight: 700;
  cursor: pointer; transition: var(--t-rapida); white-space: nowrap; line-height: 1.3;
}
.btn:hover { background: var(--suave); border-color: var(--tinta-3); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.btn--pri { background: var(--acento); border-color: var(--acento); color: var(--acento-txt); }
.btn--pri:hover { background: var(--navy); border-color: var(--navy); color: #fff; }
html[data-tema="oscuro"] .btn--pri:hover { background: var(--azul); border-color: var(--azul); }
.btn--mal { background: var(--mal); border-color: var(--mal); color: #fff; }
.btn--mal:hover { background: #96352d; border-color: #96352d; }
.btn--ok { background: var(--ok); border-color: var(--ok); color: #fff; }
.btn--ok:hover { filter: brightness(.92); }
.btn--plano { border-color: transparent; background: transparent; }
.btn--plano:hover { background: var(--suave); border-color: transparent; }
.btn--s { padding: 4px 9px; font-size: 12px; border-radius: 7px; }
.btn--xs { padding: 2px 7px; font-size: 11px; border-radius: 6px; font-weight: 400; }
.btn--icono { padding: 7px; }
.btn--icono.btn--s { padding: 4px; }
.btn svg { width: 15px; height: 15px; flex: none; }

/* ------------------------------------------------------------------- tarjetas */
.tarjeta {
  background: var(--panel); border: 1px solid var(--borde); border-radius: var(--r-m);
  box-shadow: var(--sombra-s);
}
.tarjeta__cab {
  display: flex; align-items: center; gap: 10px; padding: 13px 16px;
  border-bottom: 1px solid var(--borde);
}
.tarjeta__cab h3 { font-size: 14.5px; }
.tarjeta__cuerpo { padding: 16px; }
.tarjeta__cuerpo.sin-relleno { padding: 0; }

/* -------------------------------------------------------------------- páginas */
.pagina__cab {
  display: flex; align-items: flex-start; gap: 14px; margin-bottom: 18px; flex-wrap: wrap;
}
.pagina__titulo { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pagina__titulo h1 { line-height: 1.15; }
.pagina__sub { font-size: 12.5px; color: var(--tinta-3); }
.pagina__acciones { margin-left: auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

.rejilla { display: grid; gap: 14px; }
.rejilla > * { min-width: 0; }
.r2 { grid-template-columns: repeat(2, 1fr); }
.r3 { grid-template-columns: repeat(3, 1fr); }
.r4 { grid-template-columns: repeat(4, 1fr); }
.r5 { grid-template-columns: repeat(5, 1fr); }
.r-auto { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.r-2-1 { grid-template-columns: 2fr 1fr; }
.r-1-2 { grid-template-columns: 1fr 2fr; }
@media (max-width: 1280px) { .r5, .r4 { grid-template-columns: repeat(2, 1fr); } .r-2-1, .r-1-2 { grid-template-columns: 1fr; } }
@media (max-width: 900px)  { .r5, .r4, .r3, .r2 { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------- cifras */
.cifra { display: flex; flex-direction: column; gap: 3px; }
.cifra__valor { font-family: var(--serif); font-size: 27px; font-weight: 600; line-height: 1.05; letter-spacing: -.02em; }
.cifra__valor.s { font-size: 21px; }
.cifra__valor.xs { font-size: 17px; }
.cifra__etiqueta { font-size: 11px; color: var(--tinta-3); text-transform: uppercase; letter-spacing: .06em; font-weight: 700; }
.cifra__pie { font-size: 12px; color: var(--tinta-2); }

.tarjeta-kpi {
  background: var(--panel); border: 1px solid var(--borde); border-radius: var(--r-m);
  padding: 15px 16px; box-shadow: var(--sombra-s); position: relative; overflow: hidden;
  cursor: pointer; transition: var(--t-media); display: flex; flex-direction: column; gap: 4px;
}
.tarjeta-kpi:hover { box-shadow: var(--sombra-m); transform: translateY(-2px); border-color: var(--borde-fuerte); }
.tarjeta-kpi__icono {
  position: absolute; right: 12px; top: 12px; width: 30px; height: 30px; border-radius: 9px;
  display: grid; place-items: center; background: var(--suave); color: var(--acento);
}
.tarjeta-kpi__icono svg { width: 16px; height: 16px; }
.tarjeta-kpi__extra { display: flex; gap: 6px; align-items: baseline; margin-top: 6px;
  padding-top: 8px; border-top: 1px dashed var(--borde); font-size: 12px; color: var(--tinta-2); }
.tarjeta-kpi__extra b { font-size: 13.5px; color: var(--tinta); }

/* -------------------------------------------------------------------- píldoras */
.pil {
  display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 20px;
  font-size: 11.5px; font-weight: 700; background: var(--suave); color: var(--tinta-2);
  white-space: nowrap; line-height: 1.6;
}
.pil--ok { background: var(--ok-sw); color: var(--ok); }
.pil--aviso { background: var(--aviso-sw); color: var(--aviso); }
.pil--mal { background: var(--mal-sw); color: var(--mal); }
.pil--info { background: var(--info-sw); color: var(--info); }
.pil--neutro { background: var(--suave-2); color: var(--tinta-2); }
.pil__punto { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

.etiqueta-pequena { font-size: 10.5px; text-transform: uppercase; letter-spacing: .07em;
  color: var(--tinta-3); font-weight: 700; }

/* --------------------------------------------------------------------- tablas */
.tabla-marco { overflow-x: auto; border-radius: var(--r-m); }
table.tabla { width: 100%; border-collapse: collapse; font-size: 13px; }
.tabla th {
  text-align: left; padding: 9px 12px; font-size: 10.5px; text-transform: uppercase;
  letter-spacing: .06em; color: var(--tinta-3); font-weight: 700; border-bottom: 1px solid var(--borde);
  background: var(--panel); position: sticky; top: 0; white-space: nowrap; z-index: 2;
}
.tabla th.orden { cursor: pointer; user-select: none; }
.tabla th.orden:hover { color: var(--acento); }
.tabla td { padding: 9px 12px; border-bottom: 1px solid var(--borde); vertical-align: middle; }
.tabla tbody tr { transition: background var(--t-rapida); }
.tabla tbody tr:hover { background: var(--suave); }
.tabla tbody tr.pulsable { cursor: pointer; }
.tabla .d { text-align: right; font-variant-numeric: tabular-nums; }
.tabla .c { text-align: center; }
.tabla .num { font-variant-numeric: tabular-nums; }
.tabla tfoot td { font-weight: 700; border-top: 2px solid var(--borde-fuerte); border-bottom: none;
  background: var(--suave); }
.tabla--compacta td, .tabla--compacta th { padding: 6px 10px; font-size: 12.5px; }

.vacio { text-align: center; padding: 48px 20px; color: var(--tinta-3); }
.vacio__icono { width: 44px; height: 44px; margin: 0 auto 12px; opacity: .3; }
.vacio h3 { color: var(--tinta-2); margin-bottom: 4px; }

/* ------------------------------------------------------------------ formularios */
.campo { display: flex; flex-direction: column; gap: 5px; margin-bottom: 13px; }
.campo > label { font-size: 12px; font-weight: 700; color: var(--tinta-2); }
.campo__ayuda { font-size: 11.5px; color: var(--tinta-3); }
.entrada, select.entrada, textarea.entrada {
  width: 100%; padding: 7px 10px; border: 1px solid var(--borde-fuerte); border-radius: 8px;
  background: var(--lienzo); color: var(--tinta); font-size: 13px; transition: var(--t-rapida);
}
.entrada:hover { border-color: var(--tinta-3); }
.entrada:focus { outline: none; border-color: var(--azul); box-shadow: 0 0 0 3px rgba(91,131,176,.18); }
textarea.entrada { min-height: 78px; resize: vertical; line-height: 1.55; }
select.entrada { cursor: pointer; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237b89a0' stroke-width='3'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 9px center; padding-right: 28px; }
.entrada--d { text-align: right; font-variant-numeric: tabular-nums; }
.entrada.error { border-color: var(--mal); }
.casilla { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 13px; }
.casilla input { width: 15px; height: 15px; accent-color: var(--acento); cursor: pointer; }
.fila-campos { display: grid; gap: 12px; }
.fc2 { grid-template-columns: 1fr 1fr; }
.fc3 { grid-template-columns: repeat(3, 1fr); }
.fc4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 760px) { .fc2, .fc3, .fc4 { grid-template-columns: 1fr; } }

.grupo-entrada { display: flex; }
.grupo-entrada .entrada { border-radius: 8px 0 0 8px; }
.grupo-entrada .sufijo {
  display: grid; place-items: center; padding: 0 10px; border: 1px solid var(--borde-fuerte);
  border-left: none; border-radius: 0 8px 8px 0; background: var(--suave); color: var(--tinta-3);
  font-size: 12px;
}

.interruptores { display: flex; flex-wrap: wrap; gap: 7px; }
.interruptor {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 20px;
  border: 1px solid var(--borde-fuerte); background: var(--lienzo); cursor: pointer;
  font-size: 12.5px; transition: var(--t-rapida); user-select: none;
}
.interruptor:hover { border-color: var(--azul); }
.interruptor.on { background: var(--acento); border-color: var(--acento); color: #fff; font-weight: 700; }
.interruptor input { display: none; }

/* --------------------------------------------------------------- panel lateral */
.velo {
  position: fixed; inset: 0; background: rgba(11,19,34,.45); z-index: 90;
  animation: aparecer var(--t-media); backdrop-filter: blur(2px);
}
@keyframes aparecer { from { opacity: 0 } to { opacity: 1 } }
@keyframes entrar-dcha { from { transform: translateX(100%) } to { transform: translateX(0) } }
@keyframes subir { from { transform: translateY(14px); opacity: 0 } to { transform: translateY(0); opacity: 1 } }

.cajon {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(760px, 94vw); background: var(--lienzo);
  z-index: 91; box-shadow: var(--sombra-g); display: flex; flex-direction: column;
  animation: entrar-dcha var(--t-media);
}
.cajon--ancho { width: min(1120px, 96vw); }
.cajon--estrecho { width: min(480px, 94vw); }
.cajon__cab {
  display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--borde);
  flex: none;
}
.cajon__cuerpo { flex: 1; overflow-y: auto; padding: 18px; }
.cajon__pie {
  display: flex; gap: 8px; justify-content: flex-end; padding: 12px 18px;
  border-top: 1px solid var(--borde); background: var(--suave); flex: none;
}

.modal-marco { position: fixed; inset: 0; display: grid; place-items: center; z-index: 95; padding: 20px; }
.modal {
  background: var(--lienzo); border-radius: var(--r-g); box-shadow: var(--sombra-g);
  width: min(560px, 100%); max-height: 88vh; display: flex; flex-direction: column;
  animation: subir var(--t-media);
}
.modal--g { width: min(900px, 100%); }

/* ------------------------------------------------------------- paleta de mando */
.paleta-marco { position: fixed; inset: 0; z-index: 99; display: flex; justify-content: center;
  padding-top: 11vh; background: rgba(11,19,34,.5); backdrop-filter: blur(3px); }
.paleta {
  width: min(660px, 92vw); background: var(--lienzo); border-radius: var(--r-g);
  box-shadow: var(--sombra-g); overflow: hidden; height: fit-content; max-height: 70vh;
  display: flex; flex-direction: column; animation: subir var(--t-media);
}
.paleta__entrada {
  border: none; border-bottom: 1px solid var(--borde); padding: 16px 20px; font-size: 16px;
  background: transparent; width: 100%;
}
.paleta__entrada:focus { outline: none; }
.paleta__lista { overflow-y: auto; padding: 6px; }
.paleta__grupo { font-size: 10px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--tinta-3); padding: 10px 12px 4px; font-weight: 700; }
.paleta__opcion {
  display: flex; align-items: center; gap: 11px; padding: 8px 12px; border-radius: 8px;
  cursor: pointer; font-size: 13.5px;
}
.paleta__opcion:hover, .paleta__opcion.sel { background: var(--suave); }
.paleta__opcion.sel { box-shadow: inset 2px 0 0 var(--acento); }
.paleta__opcion .sub { margin-left: auto; font-size: 11.5px; color: var(--tinta-3); }
.paleta__icono { width: 28px; height: 28px; border-radius: 7px; background: var(--suave-2);
  display: grid; place-items: center; flex: none; color: var(--acento); }
.paleta__icono svg { width: 14px; height: 14px; }

/* ------------------------------------------------------------------- avisos */
.avisos { position: fixed; bottom: 20px; right: 20px; z-index: 100; display: flex;
  flex-direction: column; gap: 8px; max-width: 380px; }
.aviso {
  background: var(--elevado); border: 1px solid var(--borde); border-left: 3px solid var(--acento);
  border-radius: var(--r-s); padding: 11px 14px; box-shadow: var(--sombra-m);
  animation: subir var(--t-media); font-size: 13px; display: flex; gap: 10px; align-items: flex-start;
}
.aviso--ok { border-left-color: var(--ok); }
.aviso--mal { border-left-color: var(--mal); }
.aviso--aviso { border-left-color: var(--aviso); }
.aviso b { display: block; margin-bottom: 1px; }

/* ------------------------------------------------------------------- pestañas */
.pestanas { display: flex; gap: 2px; border-bottom: 1px solid var(--borde); margin-bottom: 16px;
  overflow-x: auto; scrollbar-width: none; }
.pestanas::-webkit-scrollbar { display: none; }
.pestana {
  padding: 8px 14px; border: none; background: none; cursor: pointer; font-size: 13px;
  color: var(--tinta-2); border-bottom: 2px solid transparent; margin-bottom: -1px;
  white-space: nowrap; font-weight: 700; transition: var(--t-rapida); display: flex;
  align-items: center; gap: 7px;
}
.pestana:hover { color: var(--tinta); background: var(--suave); border-radius: 8px 8px 0 0; }
.pestana.activa { color: var(--acento); border-bottom-color: var(--acento); }
.pestana__n { background: var(--suave-2); border-radius: 10px; padding: 0 6px; font-size: 11px;
  color: var(--tinta-2); font-weight: 700; }
.pestana.activa .pestana__n { background: var(--acento); color: #fff; }

/* ------------------------------------------------------------------ filtros */
.barra-filtros {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 14px;
  padding: 10px 12px; background: var(--panel); border: 1px solid var(--borde);
  border-radius: var(--r-m);
}
.busca-caja { display: flex; align-items: center; gap: 7px; background: var(--suave);
  border: 1px solid transparent; border-radius: 8px; padding: 5px 10px; min-width: 220px; flex: 1; max-width: 340px; }
.busca-caja:focus-within { background: var(--lienzo); border-color: var(--azul); }
.busca-caja input { border: none; background: none; outline: none; flex: 1; font-size: 13px; }
.busca-caja svg { width: 15px; height: 15px; color: var(--tinta-3); flex: none; }
.filtros-rapidos { display: flex; gap: 5px; flex-wrap: wrap; }
.filtro-rapido {
  padding: 4px 11px; border-radius: 20px; border: 1px solid var(--borde); background: var(--lienzo);
  font-size: 12px; cursor: pointer; transition: var(--t-rapida); display: inline-flex;
  align-items: center; gap: 6px;
}
.filtro-rapido:hover { border-color: var(--azul); }
.filtro-rapido.on { background: var(--navy); border-color: var(--navy); color: #fff; font-weight: 700; }
html[data-tema="oscuro"] .filtro-rapido.on { background: var(--azul); border-color: var(--azul); }
.filtro-rapido b { font-variant-numeric: tabular-nums; opacity: .75; }

/* -------------------------------------------------------------------- kanban */
.kanban { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 14px; align-items: flex-start; }
.kanban__col { flex: 0 0 286px; background: var(--suave); border-radius: var(--r-m); padding: 10px;
  max-height: calc(100vh - 230px); display: flex; flex-direction: column; }
.kanban__cab { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; padding: 0 2px; }
.kanban__punto { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.kanban__titulo { font-size: 12.5px; font-weight: 700; }
.kanban__n { margin-left: auto; font-size: 11px; color: var(--tinta-3); background: var(--lienzo);
  border-radius: 10px; padding: 1px 7px; font-weight: 700; }
.kanban__importe { font-size: 11.5px; color: var(--tinta-3); padding: 0 2px 8px; font-variant-numeric: tabular-nums; }
.kanban__lista { overflow-y: auto; display: flex; flex-direction: column; gap: 8px; flex: 1; min-height: 40px; }
.kanban__col.sobre { background: var(--info-sw); outline: 2px dashed var(--info); outline-offset: -4px; }
.ficha-k {
  background: var(--lienzo); border: 1px solid var(--borde); border-radius: 9px; padding: 10px 11px;
  cursor: grab; box-shadow: var(--sombra-s); transition: var(--t-rapida);
}
.ficha-k:hover { box-shadow: var(--sombra-m); border-color: var(--borde-fuerte); }
.ficha-k.arrastrando { opacity: .4; }
.ficha-k__titulo { font-weight: 700; font-size: 13px; margin-bottom: 4px; line-height: 1.3; }
.ficha-k__meta { display: flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--tinta-3); }
.ficha-k__importe { font-family: var(--serif); font-size: 15px; font-weight: 600; }

/* ------------------------------------------------------------------- avatares */
.avatar {
  width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  font-size: 11px; font-weight: 700; color: #fff; flex: none; background: var(--azul);
  text-transform: uppercase; letter-spacing: -.02em;
}
.avatar--s { width: 22px; height: 22px; font-size: 9.5px; }
.avatar--g { width: 42px; height: 42px; font-size: 16px; }
.avatar--xl { width: 60px; height: 60px; font-size: 22px; }
.pila-avatares { display: flex; }
.pila-avatares .avatar { margin-left: -7px; border: 2px solid var(--panel); }
.pila-avatares .avatar:first-child { margin-left: 0; }

/* -------------------------------------------------------------- cartera (fichas) */
.rejilla-cartera { display: grid; gap: 15px; grid-template-columns: repeat(auto-fill, minmax(272px, 1fr)); }
.ficha-inm {
  background: var(--panel); border: 1px solid var(--borde); border-radius: var(--r-m);
  overflow: hidden; cursor: pointer; transition: var(--t-media); display: flex; flex-direction: column;
  box-shadow: var(--sombra-s);
}
.ficha-inm:hover { transform: translateY(-3px); box-shadow: var(--sombra-m); border-color: var(--borde-fuerte); }
.ficha-inm__foto { aspect-ratio: 3/2; background: var(--suave-2); position: relative; overflow: hidden; }
.ficha-inm__foto img { width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .5s cubic-bezier(.2,.7,.3,1); }
.ficha-inm:hover .ficha-inm__foto img { transform: scale(1.05); }
.ficha-inm__marcas { position: absolute; top: 9px; left: 9px; display: flex; gap: 5px; flex-wrap: wrap; }
.ficha-inm__precio {
  position: absolute; bottom: 9px; right: 9px; background: rgba(13,19,32,.85); color: #fff;
  padding: 4px 11px; border-radius: 7px; font-family: var(--serif); font-size: 15.5px;
  font-weight: 600; backdrop-filter: blur(6px);
}
.ficha-inm__cuerpo { padding: 11px 13px 13px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.ficha-inm__ref { font-size: 10.5px; letter-spacing: .06em; color: var(--tinta-3); font-weight: 700; }
.ficha-inm__titulo { font-weight: 700; font-size: 13.5px; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ficha-inm__lugar { font-size: 12px; color: var(--tinta-2); }
.ficha-inm__datos { display: flex; gap: 12px; font-size: 12px; color: var(--tinta-2);
  padding-top: 8px; border-top: 1px solid var(--borde); margin-top: auto; }
.ficha-inm__datos span { display: inline-flex; align-items: center; gap: 4px; }
.ficha-inm__datos svg { width: 14px; height: 14px; opacity: .6; }
.ficha-inm__pie { display: flex; align-items: center; gap: 8px; padding: 8px 13px;
  background: var(--suave); font-size: 11.5px; color: var(--tinta-2); border-top: 1px solid var(--borde); }

/* --------------------------------------------------------------- galería ficha */
.galeria { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 6px; border-radius: var(--r-m);
  overflow: hidden; max-height: 330px; }
.galeria img { width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; display: block;
  transition: opacity var(--t-rapida); }
.galeria img:hover { opacity: .9; }
.galeria > *:first-child { grid-row: span 2; }
.galeria__mas { position: relative; display: grid; place-items: center; background: var(--navy);
  color: #fff; font-weight: 700; cursor: pointer; }

.visor { position: fixed; inset: 0; background: rgba(8,13,22,.95); z-index: 98; display: grid;
  place-items: center; animation: aparecer var(--t-rapida); }
.visor img { max-width: 92vw; max-height: 86vh; object-fit: contain; border-radius: 8px; }
.visor__barra { position: absolute; top: 18px; right: 18px; display: flex; gap: 8px; }
.visor__nav { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,.1);
  border: none; color: #fff; width: 44px; height: 68px; cursor: pointer; border-radius: 8px; }
.visor__nav:hover { background: rgba(255,255,255,.2); }
.visor__pie { position: absolute; bottom: 20px; color: #fff; font-size: 13px; opacity: .8; }

/* ------------------------------------------------------------------ cronología */
.crono { display: flex; flex-direction: column; }
.crono__fila { display: flex; gap: 12px; position: relative; padding-bottom: 16px; }
.crono__fila:not(:last-child)::before {
  content: ''; position: absolute; left: 13px; top: 28px; bottom: 0; width: 1px; background: var(--borde);
}
.crono__punto {
  width: 27px; height: 27px; border-radius: 50%; background: var(--suave); border: 1px solid var(--borde);
  display: grid; place-items: center; flex: none; z-index: 1; color: var(--tinta-2);
}
.crono__punto svg { width: 13px; height: 13px; }
.crono__cuerpo { flex: 1; min-width: 0; padding-top: 3px; }
.crono__titulo { font-size: 13px; font-weight: 700; }
.crono__detalle { font-size: 12.5px; color: var(--tinta-2); margin-top: 2px; }
.crono__meta { font-size: 11.5px; color: var(--tinta-3); margin-top: 3px; }

/* ------------------------------------------------------------------- gráficos */
.grafico { width: 100%; display: block; overflow: visible; }
.grafico text { font-family: var(--sans); font-size: 10.5px; fill: var(--tinta-3); }
.grafico .rejilla-linea { stroke: var(--borde); stroke-width: 1; }
.barra-apilada { display: flex; height: 9px; border-radius: 5px; overflow: hidden; background: var(--suave-2); }
.barra-apilada > div { height: 100%; }
.leyenda { display: flex; flex-wrap: wrap; gap: 10px; font-size: 11.5px; color: var(--tinta-2); margin-top: 8px; }
.leyenda span { display: inline-flex; align-items: center; gap: 5px; }
.leyenda i { width: 9px; height: 9px; border-radius: 3px; display: inline-block; }

.medidor { height: 7px; background: var(--suave-2); border-radius: 4px; overflow: hidden; }
.medidor > div { height: 100%; background: var(--acento); border-radius: 4px; transition: width var(--t-media); }
.medidor--ok > div { background: var(--ok); }
.medidor--aviso > div { background: var(--aviso); }
.medidor--mal > div { background: var(--mal); }

/* ------------------------------------------------------------ listas y detalles */
.lista-datos { display: grid; grid-template-columns: auto 1fr; gap: 7px 16px; font-size: 13px; align-items: baseline; }
.lista-datos dt { color: var(--tinta-3); font-size: 12px; white-space: nowrap; }
.lista-datos dd { margin: 0; font-weight: 700; }
.lista-linea { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--borde); }
.lista-linea:last-child { border-bottom: none; }
.lista-linea__txt { flex: 1; min-width: 0; }
.lista-linea__tit { font-size: 13px; font-weight: 700; }
.lista-linea__sub { font-size: 12px; color: var(--tinta-3); }

.aviso-caja {
  display: flex; gap: 10px; padding: 11px 13px; border-radius: var(--r-s); font-size: 12.5px;
  background: var(--info-sw); color: var(--tinta); border-left: 3px solid var(--info); line-height: 1.5;
}
.aviso-caja--aviso { background: var(--aviso-sw); border-left-color: var(--aviso); }
.aviso-caja--mal { background: var(--mal-sw); border-left-color: var(--mal); }
.aviso-caja--ok { background: var(--ok-sw); border-left-color: var(--ok); }
.aviso-caja svg { width: 17px; height: 17px; flex: none; margin-top: 1px; }

/* ------------------------------------------------------------------- utilidades */
.fila { display: flex; align-items: center; gap: 8px; }
.fila--sep { justify-content: space-between; }
.col { display: flex; flex-direction: column; gap: 8px; }
.crecer { flex: 1; }
.d { text-align: right; } .c { text-align: center; }
.num { font-variant-numeric: tabular-nums; }
.serif { font-family: var(--serif); }
.mono { font-family: var(--mono); font-size: 11.5px; }
.silencio { color: var(--tinta-3); }
.suave-txt { color: var(--tinta-2); }
.peq { font-size: 12px; } .xpeq { font-size: 11px; }
.grueso { font-weight: 700; }
.ok-txt { color: var(--ok); } .mal-txt { color: var(--mal); } .aviso-txt { color: var(--aviso); }
.oculto { display: none !important; }
.cortado { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m0 { margin: 0 } .mt8 { margin-top: 8px } .mt14 { margin-top: 14px } .mt20 { margin-top: 20px }
.mb8 { margin-bottom: 8px } .mb14 { margin-bottom: 14px } .mb20 { margin-bottom: 20px }
.pulsable { cursor: pointer; }
.nada { pointer-events: none; opacity: .5; }

.cargando { display: grid; place-items: center; padding: 60px; }
.girador {
  width: 26px; height: 26px; border: 2.5px solid var(--borde); border-top-color: var(--acento);
  border-radius: 50%; animation: girar .7s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg) } }
.esqueleto { background: linear-gradient(90deg, var(--suave) 25%, var(--suave-2) 50%, var(--suave) 75%);
  background-size: 200% 100%; animation: brillo 1.4s infinite; border-radius: 6px; }
@keyframes brillo { 0% { background-position: 200% 0 } 100% { background-position: -200% 0 } }

/* --------------------------------------------------------------------- acceso */
.acceso { min-height: 100vh; display: grid; grid-template-columns: 1.1fr .9fr; }
@media (max-width: 900px) { .acceso { grid-template-columns: 1fr; } .acceso__arte { display: none; } }
.acceso__arte {
  background: linear-gradient(150deg, #16243F 0%, #34507A 65%, #4a6fa0 100%);
  color: #fff; padding: 56px; display: flex; flex-direction: column; justify-content: space-between;
  position: relative; overflow: hidden;
}
.acceso__arte::after {
  content: ''; position: absolute; width: 640px; height: 640px; border-radius: 50%;
  background: radial-gradient(circle, rgba(227,197,126,.24), transparent 66%);
  right: -220px; bottom: -220px;
}
.acceso__form { display: grid; place-items: center; padding: 40px; background: var(--lienzo); }
.acceso__caja { width: min(380px, 100%); }

@media (max-width: 1000px) {
  .lateral { position: fixed; transform: translateX(-100%); }
  .lateral.abierta { transform: translateX(0); }
  .contenido { padding: 16px; }
}

@media print {
  .lateral, .cabecera, .pagina__acciones, .barra-filtros { display: none !important; }
  .contenido { padding: 0; }
  body { background: #fff; }
}

/* ------------------------------------------------------------------ móvil de verdad
   Probado a 375 px: el buscador de la cabecera y los botones se comen el ancho si no
   se recortan. En un móvil la barra sirve para abrir el menú y buscar, nada más. */
@media (max-width: 760px) {
  .cabecera { padding: 0 10px; gap: 6px; }
  .buscador { flex: 0 0 auto; max-width: none; padding: 7px 9px; }
  .buscador span, .buscador kbd { display: none; }
  .cabecera .btn--pri span, .cabecera .btn--pri { font-size: 0; padding: 7px 9px; }
  .cabecera .btn--pri svg { font-size: 13px; width: 16px; height: 16px; }
  .pagina__cab { gap: 10px; }
  .pagina__acciones { margin-left: 0; width: 100%; }
  .pagina__acciones .btn { flex: 1; justify-content: center; }
  h1 { font-size: 22px; }
  .cifra__valor { font-size: 23px; }
  .tarjeta__cuerpo { padding: 13px; }
  .contenido { padding: 14px 12px 50px; }
  .barra-filtros { padding: 9px; }
  .busca-caja { min-width: 0; max-width: none; }
  .barra-filtros select.entrada { width: 100%; }
  .kanban__col { flex-basis: 84vw; }
  .galeria { grid-template-columns: 1fr; max-height: none; }
  .galeria > *:first-child { grid-row: auto; }
  .cajon, .cajon--ancho, .cajon--estrecho { width: 100vw; }
  .fila-campos.fc2, .fila-campos.fc3, .fila-campos.fc4 { grid-template-columns: 1fr; }
  .rejilla-cartera { grid-template-columns: 1fr; }
}

/* =============================================================================
   «Hoy»: la secretaria y el asistente (2026-10-06)
   ========================================================================== */
.mt4 { margin-top: 4px; }
.entrada--s { width: 76px; padding: 5px 8px; font-size: 13px; text-align: right; }

.asistente { background: var(--panel); border: 1px solid var(--borde); border-radius: var(--r-g);
  box-shadow: var(--sombra-s); padding: 16px 18px; position: relative; overflow: hidden; }
.asistente::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, var(--marea), var(--azul), var(--dorado)); }
.asistente__cab { display: flex; gap: 12px; align-items: center; margin-bottom: 12px; }
.asistente__icono { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center;
  background: var(--navy); color: var(--dorado-vivo); flex: none; }
.asistente__fila { display: flex; gap: 8px; align-items: stretch; }
.asistente__entrada { flex: 1; resize: none; min-height: 48px; padding: 12px 14px; font: inherit; font-size: 15px;
  color: var(--tinta); background: var(--lienzo); border: 1px solid var(--borde-fuerte); border-radius: var(--r-m); }
.asistente__entrada:focus { outline: none; border-color: var(--azul); box-shadow: 0 0 0 3px rgba(91,131,176,.18); }
.asistente__fila .btn { align-self: stretch; }
.asistente__ejemplos { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 10px; }
.asistente__ejemplo { border: 1px dashed var(--borde-fuerte); background: transparent; color: var(--tinta-2);
  border-radius: 999px; padding: 4px 10px; font: inherit; font-size: 12px; cursor: pointer; }
.asistente__ejemplo:hover { border-style: solid; color: var(--tinta); background: var(--suave); }
.asistente__salida:not(:empty) { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--borde); }
.asistente__pensando { display: flex; gap: 10px; align-items: center; }
.asistente__pensando .girador { width: 18px; height: 18px; }
.asistente__burbuja { background: var(--suave); border-radius: var(--r-m); padding: 10px 14px; font-size: 14px; line-height: 1.5; }
.asistente__burbuja--ok { background: var(--ok-sw); }
.asistente__burbuja--mal { background: var(--mal-sw); color: var(--mal); }
.asistente__ok { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: var(--ok); color: #fff; }
.asistente__opciones { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; align-items: flex-start; }
.asistente__mensajes { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.btn.grabando { background: var(--mal); border-color: var(--mal); color: #fff; animation: latido 1.2s infinite; }
@keyframes latido { 50% { box-shadow: 0 0 0 6px rgba(184,67,58,.18); } }

/* mensaje de WhatsApp tal como lo vería el cliente */
.wa__cab { display: flex; gap: 6px; align-items: center; font-size: 12px; margin-bottom: 5px; flex-wrap: wrap; }
.wa__papel { color: var(--tinta-3); }
.wa__burbuja { background: #dcf8c6; color: #111b21; border-radius: 10px 10px 10px 2px; padding: 8px 10px 6px;
  font-size: 13px; line-height: 1.45; white-space: pre-wrap; word-break: break-word; box-shadow: 0 1px 1px rgba(0,0,0,.08); }
html[data-tema="oscuro"] .wa__burbuja { background: #005c4b; color: #e9edef; }
.wa__meta { font-size: 10.5px; color: rgba(17,27,33,.55); text-align: right; margin-top: 3px; }
html[data-tema="oscuro"] .wa__meta { color: rgba(233,237,239,.6); }

/* acciones de la secretaria */
.nivel__icono { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; flex: none; }
.accion { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--borde); }
.accion:last-child { border-bottom: 0; }
.accion__barra { width: 3px; border-radius: 3px; flex: none; }
.accion__cuerpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.accion__cab { display: flex; gap: 10px; align-items: baseline; justify-content: space-between; }
.accion__titulo { font-weight: 700; font-size: 14px; }
.accion__motivo { font-size: 12.5px; color: var(--tinta-2); line-height: 1.45; }
.accion__botones { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.accion__mensaje { margin-top: 6px; max-width: 560px; }

/* agenda, mandatos y registro */
.cita-hoy { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--borde); }
.cita-hoy:last-child { border-bottom: 0; }
.cita-hoy__hora { display: flex; flex-direction: column; align-items: center; min-width: 46px; font-size: 14px; }
.niveles { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--tinta-2); }
.niveles i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 7px; }
.mandato { display: flex; gap: 10px; align-items: center; justify-content: space-between; padding: 8px 0;
  border-top: 1px solid var(--borde); }
.mandato__txt { color: var(--tinta-2); line-height: 1.4; }
.mandato__valor { display: flex; gap: 5px; align-items: center; flex: none; }
.registro { display: flex; flex-direction: column; gap: 6px; max-height: 340px; overflow: auto; }
.registro__fila { display: flex; gap: 8px; align-items: baseline; font-size: 12.5px; }
.registro__hora { font-family: var(--mono); font-size: 11.5px; color: var(--tinta-3); flex: none; }
.registro__punto { width: 7px; height: 7px; border-radius: 50%; flex: none; transform: translateY(-1px); }
.registro__txt { color: var(--tinta-2); line-height: 1.4; }

@media (max-width: 760px) {
  .asistente { padding: 14px; }
  .asistente__fila { flex-wrap: wrap; }
  .asistente__entrada { flex-basis: 100%; }
}