/* =========================================================================
   RED IMPACTO HUB — Centro de Gestión Empresarial
   Sistema de diseño de la aplicación administrativa.
   Hereda la paleta del Manual de Identidad Corporativa del sitio público.
   ========================================================================= */

/* ---------------------------------------------------------------- TOKENS */
:root {
  /* Paleta institucional */
  --verde-profundo: #003d14;
  --dorado:         #b97d13;
  --negro:          #040606;
  --verde-noche:    #082100;
  --dorado-claro:   #e4ab2a;
  --gris-claro:     #cfcfd0;
  --verde-gris:     #4d7762;
  --amarillo:       #f4d74d;
  --grafito:        #232322;

  /* Roles de superficie */
  --fondo:        #050807;
  --fondo-2:      #080d0a;
  --panel:        #0b120e;
  --panel-2:      #0f1712;
  --elevado:      #131c16;
  --borde:        rgba(207, 207, 208, .13);
  --borde-2:      rgba(207, 207, 208, .22);
  --borde-oro:    rgba(228, 171, 42, .42);

  --texto:        #f1f3ef;
  --texto-suave:  rgba(241, 243, 239, .72);
  --texto-tenue:  rgba(241, 243, 239, .48);

  /* Semaforización transversal (documento §3) */
  --leve:         #35c46a;
  --leve-fondo:   rgba(53, 196, 106, .13);
  --media:        #f4d74d;
  --media-fondo:  rgba(244, 215, 77, .13);
  --grave:        #ff5f52;
  --grave-fondo:  rgba(255, 95, 82, .13);
  --info:         #56b6ff;
  --info-fondo:   rgba(86, 182, 255, .13);

  /* Tipografía */
  --f-titulo: "Fredoka", "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
  --f-texto:  "Nunito", "Segoe UI", system-ui, -apple-system, sans-serif;
  --f-mono:   ui-monospace, "Cascadia Mono", "Consolas", monospace;

  /* Métrica */
  --lateral: 268px;
  --barra: 62px;
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 20px;
  --sombra: 0 22px 50px -26px rgba(0, 0, 0, .9);
  --sombra-2: 0 8px 26px -16px rgba(0, 0, 0, .95);
  --t: .22s cubic-bezier(.22, .61, .36, 1);
}

/* ----------------------------------------------------------------- RESET */
*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  font-family: var(--f-texto);
  font-size: 15px;
  line-height: 1.55;
  color: var(--texto);
  background: var(--fondo);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4, h5 { font-family: var(--f-titulo); font-weight: 600; line-height: 1.15; margin: 0; letter-spacing: -.01em; }
p { margin: 0; }
table { border-collapse: collapse; width: 100%; }

::selection { background: var(--dorado-claro); color: var(--negro); }

:focus-visible { outline: 2px solid var(--dorado-claro); outline-offset: 2px; border-radius: 4px; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(207, 207, 208, .16); border-radius: 8px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: rgba(207, 207, 208, .3); background-clip: content-box; }

.oculto { display: none !important; }
.solo-lectores {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ================================================================= LOGIN */
.acceso {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 2rem 1.25rem;
  background:
    radial-gradient(900px 620px at 78% 12%, rgba(0, 61, 20, .55), transparent 62%),
    radial-gradient(760px 520px at 8% 4%, rgba(185, 125, 19, .16), transparent 60%),
    linear-gradient(180deg, #061206 0%, var(--negro) 78%);
}
.acceso-caja {
  width: min(100%, 940px);
  display: grid;
  gap: 0;
  border-radius: var(--r-lg);
  border: 1px solid var(--borde);
  background: linear-gradient(165deg, rgba(255,255,255,.05), rgba(255,255,255,.012));
  box-shadow: var(--sombra);
  overflow: hidden;
}
@media (min-width: 860px) { .acceso-caja { grid-template-columns: 1.05fr .95fr; } }

.acceso-lado {
  padding: clamp(1.8rem, 4vw, 2.8rem);
  background: linear-gradient(155deg, rgba(0, 61, 20, .58), rgba(4, 6, 6, .35));
  border-right: 1px solid var(--borde);
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}
.acceso-lado img { width: 136px; }
.acceso-lado h1 { font-size: 1.7rem; }
.acceso-lado p { color: var(--texto-suave); font-size: .94rem; }
.acceso-ciclo {
  display: flex; flex-wrap: wrap; gap: .35rem;
  font-size: .74rem; color: var(--texto-tenue);
  margin-top: auto;
}
.acceso-ciclo span {
  padding: .22rem .55rem;
  border: 1px solid var(--borde);
  border-radius: 999px;
  background: rgba(255,255,255,.03);
}

.acceso-form { padding: clamp(1.8rem, 4vw, 2.8rem); display: grid; gap: 1rem; align-content: start; }
.acceso-form h2 { font-size: 1.25rem; }
.acceso-demo {
  display: grid; gap: .45rem;
  margin-top: .4rem;
  padding-top: 1rem;
  border-top: 1px dashed var(--borde);
}
.acceso-demo-titulo { font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--dorado-claro); font-weight: 800; }
.acceso-demo button {
  display: flex; align-items: center; gap: .7rem;
  width: 100%; text-align: left;
  padding: .6rem .8rem;
  border: 1px solid var(--borde);
  border-radius: var(--r-sm);
  background: rgba(255,255,255,.03);
  cursor: pointer;
  transition: var(--t);
}
.acceso-demo button:hover { border-color: var(--borde-oro); background: rgba(228,171,42,.08); }
.acceso-demo button strong { display: block; font-size: .88rem; }
.acceso-demo button span { display: block; font-size: .76rem; color: var(--texto-tenue); }
.acceso-demo button .acceso-alcance {
  margin-top: .18rem;
  font-size: .68rem;
  line-height: 1.35;
  color: var(--dorado-claro);
  opacity: .78;
}

/* =============================================================== LAYOUT */
.app { display: none; min-height: 100vh; }
.app.activa { display: block; }

.app-lateral {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--lateral);
  z-index: 60;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border-right: 1px solid var(--borde);
  transition: transform var(--t);
}
.lateral-marca {
  display: flex; align-items: center; gap: .7rem;
  padding: 1rem 1.15rem;
  border-bottom: 1px solid var(--borde);
  min-height: var(--barra);
}
.lateral-marca img { width: 104px; }
.lateral-marca span {
  font-size: .62rem; font-weight: 800; letter-spacing: .2em;
  color: var(--dorado-claro);
  border: 1px solid var(--borde-oro);
  border-radius: 999px;
  padding: .15rem .45rem;
}
.lateral-nav { flex: 1; overflow-y: auto; padding: .8rem .7rem 1.4rem; display: grid; gap: .15rem; align-content: start; }
.nav-grupo {
  font-size: .64rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--texto-tenue); font-weight: 800;
  padding: 1rem .6rem .35rem;
}
.nav-item {
  display: flex; align-items: center; gap: .7rem;
  padding: .58rem .7rem;
  border-radius: var(--r-sm);
  font-size: .9rem; font-weight: 600;
  color: var(--texto-suave);
  cursor: pointer;
  border: 1px solid transparent;
  transition: var(--t);
}
.nav-item svg { width: 18px; height: 18px; flex: none; opacity: .8; }
.nav-item:hover { background: rgba(255,255,255,.045); color: var(--texto); }
.nav-item.activo {
  background: linear-gradient(100deg, rgba(0,61,20,.75), rgba(228,171,42,.09));
  border-color: var(--borde-oro);
  color: var(--texto);
}
.nav-item.activo svg { color: var(--dorado-claro); opacity: 1; }
.nav-item .conteo {
  margin-left: auto;
  font-size: .7rem; font-weight: 800;
  padding: .1rem .42rem;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  color: var(--texto-suave);
}
.nav-item .conteo.grave { background: var(--grave-fondo); color: var(--grave); }

.lateral-pie {
  padding: .8rem 1rem 1rem;
  border-top: 1px solid var(--borde);
  font-size: .74rem;
  color: var(--texto-tenue);
}
.lateral-pie a { color: var(--dorado-claro); }

.app-cuerpo { margin-left: var(--lateral); min-height: 100vh; display: flex; flex-direction: column; }

.app-barra {
  position: sticky; top: 0; z-index: 50;
  min-height: var(--barra);
  display: flex; align-items: center; gap: .8rem;
  padding: .6rem 1.4rem;
  background: rgba(8, 13, 10, .9);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--borde);
}
.barra-titulo { display: grid; }
.barra-titulo h1 { font-size: 1.12rem; }
.barra-titulo p { font-size: .78rem; color: var(--texto-tenue); }
.barra-acciones { margin-left: auto; display: flex; align-items: center; gap: .5rem; }

.btn-lateral { display: none; }

.buscador-global {
  position: relative;
  width: min(320px, 34vw);
}
.buscador-global input {
  width: 100%;
  padding: .48rem .8rem .48rem 2.1rem;
  border-radius: 999px;
  border: 1px solid var(--borde);
  background: rgba(255,255,255,.04);
  font-size: .86rem;
}
.buscador-global svg { position: absolute; left: .7rem; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--texto-tenue); }
.buscador-global input:focus { outline: none; border-color: var(--borde-oro); background: rgba(255,255,255,.06); }
.buscador-resultados {
  position: absolute; top: calc(100% + .4rem); left: 0; right: 0;
  max-height: 340px; overflow-y: auto;
  background: var(--elevado);
  border: 1px solid var(--borde-2);
  border-radius: var(--r-md);
  box-shadow: var(--sombra);
  padding: .3rem;
  display: none;
  z-index: 70;
}
.buscador-resultados.visible { display: block; }
.buscador-resultados button {
  display: block; width: 100%; text-align: left;
  padding: .5rem .6rem; border: 0; border-radius: var(--r-sm);
  background: transparent; cursor: pointer; font-size: .85rem;
}
.buscador-resultados button:hover { background: rgba(255,255,255,.06); }
.buscador-resultados button span { display: block; font-size: .74rem; color: var(--texto-tenue); }

.campana {
  position: relative;
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--borde);
  background: rgba(255,255,255,.03);
  cursor: pointer;
  transition: var(--t);
}
.campana:hover { border-color: var(--borde-oro); }
.campana svg { width: 18px; height: 18px; }
.campana .punto {
  position: absolute; top: -3px; right: -3px;
  min-width: 18px; height: 18px; padding: 0 4px;
  display: grid; place-items: center;
  border-radius: 999px;
  background: var(--grave);
  color: #fff;
  font-size: .66rem; font-weight: 800;
  border: 2px solid var(--panel);
}

.usuario-chip {
  display: flex; align-items: center; gap: .55rem;
  padding: .3rem .6rem .3rem .35rem;
  border-radius: 999px;
  border: 1px solid var(--borde);
  background: rgba(255,255,255,.03);
  cursor: pointer;
  transition: var(--t);
}
.usuario-chip:hover { border-color: var(--borde-oro); }
.usuario-chip strong { font-size: .82rem; display: block; }
.usuario-chip span { font-size: .7rem; color: var(--texto-tenue); display: block; }

.avatar-inicial {
  width: 30px; height: 30px; flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  background: linear-gradient(140deg, var(--verde-profundo), var(--grafito));
  color: var(--amarillo);
  font-family: var(--f-titulo);
  font-size: .8rem;
  border: 1px solid var(--borde-oro);
}
.avatar-inicial.g { width: 42px; height: 42px; font-size: 1rem; }

.app-vista { flex: 1; padding: 1.4rem; display: grid; gap: 1.1rem; align-content: start; }

/* Los elementos del shell que un perfil no tiene autorizados se retiran con el
   atributo `hidden`; varios de ellos declaran display propio, así que hace
   falta imponerlo. */
[hidden] { display: none !important; }

/* Perfiles con un solo módulo (Cliente): sin menú lateral, el portal ocupa
   todo el ancho. */
body.sin-lateral .app-cuerpo { margin-left: 0; }
body.sin-lateral .app-vista { max-width: 1180px; width: 100%; margin: 0 auto; }

@media (max-width: 1080px) {
  .app-lateral { transform: translateX(-100%); box-shadow: var(--sombra); }
  .app-lateral.abierta { transform: none; }
  .app-cuerpo { margin-left: 0; }
  .btn-lateral {
    display: grid; place-items: center;
    width: 38px; height: 38px;
    border-radius: var(--r-sm);
    border: 1px solid var(--borde);
    background: rgba(255,255,255,.03);
    cursor: pointer;
  }
  .btn-lateral svg { width: 18px; height: 18px; }
  .buscador-global { width: auto; flex: 1; }
}
@media (max-width: 620px) {
  .app-vista { padding: 1rem .8rem; }
  .usuario-chip .usuario-datos { display: none; }
}

.velo {
  position: fixed; inset: 0; z-index: 55;
  background: rgba(0,0,0,.6);
  backdrop-filter: blur(2px);
  display: none;
}
.velo.visible { display: block; }

/* =============================================================== PANELES */
.panel {
  border: 1px solid var(--borde);
  border-radius: var(--r-md);
  background: linear-gradient(165deg, rgba(255,255,255,.04), rgba(255,255,255,.012));
  overflow: hidden;
}
.panel-cabeza {
  display: flex; align-items: center; gap: .7rem; flex-wrap: wrap;
  padding: .85rem 1.1rem;
  border-bottom: 1px solid var(--borde);
  background: rgba(255,255,255,.02);
}
.panel-cabeza h2, .panel-cabeza h3 { font-size: .98rem; }
.panel-cabeza p { font-size: .78rem; color: var(--texto-tenue); width: 100%; }
.panel-cabeza .der { margin-left: auto; display: flex; gap: .45rem; flex-wrap: wrap; }
.panel-cuerpo { padding: 1.1rem; }
.panel-cuerpo.sin-relleno { padding: 0; }

.rejilla { display: grid; gap: 1.1rem; }
.rej-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.rej-3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.rej-4 { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.rej-12 { grid-template-columns: 1.6fr 1fr; }
@media (max-width: 980px) { .rej-12 { grid-template-columns: 1fr; } }

/* ================================================================== KPI */
.kpi {
  position: relative;
  padding: 1rem 1.1rem;
  border-radius: var(--r-md);
  border: 1px solid var(--borde);
  background: linear-gradient(160deg, rgba(255,255,255,.05), rgba(255,255,255,.012));
  display: grid; gap: .25rem;
  transition: var(--t);
}
.kpi:hover { border-color: var(--borde-oro); transform: translateY(-2px); }
.kpi-rotulo { font-size: .72rem; letter-spacing: .13em; text-transform: uppercase; color: var(--texto-tenue); font-weight: 800; }
.kpi-valor { font-family: var(--f-titulo); font-size: 1.75rem; line-height: 1.1; }
.kpi-valor.chico { font-size: 1.32rem; }
.kpi-nota { font-size: .76rem; color: var(--texto-suave); display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; }
.kpi-icono {
  position: absolute; top: .85rem; right: .95rem;
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--borde-oro);
  background: rgba(228,171,42,.08);
  color: var(--dorado-claro);
}
.kpi-icono svg { width: 15px; height: 15px; }

/* ======================================================= SEMAFORIZACIÓN */
.sem {
  display: inline-flex; align-items: center; gap: .38rem;
  padding: .16rem .55rem .16rem .4rem;
  border-radius: 999px;
  font-size: .73rem; font-weight: 800;
  letter-spacing: .04em;
  white-space: nowrap;
  border: 1px solid transparent;
}
.sem::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
.sem-leve  { color: var(--leve);  background: var(--leve-fondo);  border-color: rgba(53,196,106,.32); }
.sem-media { color: var(--media); background: var(--media-fondo); border-color: rgba(244,215,77,.32); }
.sem-grave { color: var(--grave); background: var(--grave-fondo); border-color: rgba(255,95,82,.34); }

.sem-contadores { display: flex; gap: .4rem; flex-wrap: wrap; }
.sem-contador {
  display: flex; align-items: center; gap: .5rem;
  padding: .4rem .7rem;
  border-radius: var(--r-sm);
  border: 1px solid var(--borde);
  background: rgba(255,255,255,.03);
  cursor: pointer;
  font-size: .78rem; font-weight: 700;
  transition: var(--t);
}
.sem-contador b { font-family: var(--f-titulo); font-size: 1rem; }
.sem-contador.activo { border-color: currentColor; }
.sem-contador[data-nivel="LEVE"]  { color: var(--leve); }
.sem-contador[data-nivel="MEDIA"] { color: var(--media); }
.sem-contador[data-nivel="GRAVE"] { color: var(--grave); }
.sem-contador[data-nivel="TODOS"] { color: var(--texto-suave); }
.sem-contador span { color: var(--texto-suave); font-weight: 600; }

/* ============================================================= ETIQUETAS */
.tag {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .13rem .5rem;
  border-radius: 999px;
  font-size: .72rem; font-weight: 700;
  border: 1px solid var(--borde);
  background: rgba(255,255,255,.045);
  color: var(--texto-suave);
  white-space: nowrap;
}
.tag-oro   { color: var(--dorado-claro); border-color: var(--borde-oro); background: rgba(228,171,42,.09); }
.tag-verde { color: #7fd8a4; border-color: rgba(53,196,106,.3); background: rgba(53,196,106,.09); }
.tag-info  { color: var(--info); border-color: rgba(86,182,255,.3); background: var(--info-fondo); }
.tag-rojo  { color: var(--grave); border-color: rgba(255,95,82,.3); background: var(--grave-fondo); }
.tag-linea { font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; }

.puntaje {
  display: inline-flex; align-items: center; gap: .45rem;
  font-family: var(--f-mono); font-size: .78rem; font-weight: 700;
}
.puntaje-barra { width: 46px; height: 5px; border-radius: 3px; background: rgba(255,255,255,.1); overflow: hidden; }
.puntaje-barra i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--dorado), var(--amarillo)); }

.progreso { display: flex; align-items: center; gap: .5rem; min-width: 110px; }
.progreso-barra { flex: 1; height: 6px; border-radius: 4px; background: rgba(255,255,255,.1); overflow: hidden; }
.progreso-barra i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--verde-gris), var(--leve)); transition: width var(--t); }
.progreso span { font-family: var(--f-mono); font-size: .76rem; color: var(--texto-suave); min-width: 34px; text-align: right; }

/* =============================================================== BOTONES */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  padding: .48rem .9rem;
  border-radius: var(--r-sm);
  border: 1px solid var(--borde);
  background: rgba(255,255,255,.045);
  font-size: .84rem; font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: var(--t);
}
.btn svg { width: 15px; height: 15px; flex: none; }
.btn:hover { border-color: var(--borde-2); background: rgba(255,255,255,.08); }
.btn-oro {
  background: linear-gradient(96deg, var(--dorado-claro), var(--amarillo));
  color: var(--negro);
  border-color: transparent;
}
.btn-oro:hover { box-shadow: 0 10px 24px -12px rgba(228,171,42,.75); background: linear-gradient(96deg, var(--amarillo), var(--dorado-claro)); }
.btn-verde { background: var(--verde-profundo); border-color: rgba(77,119,98,.5); }
.btn-verde:hover { background: #005c1f; }
.btn-rojo { color: var(--grave); border-color: rgba(255,95,82,.35); background: var(--grave-fondo); }
.btn-rojo:hover { background: rgba(255,95,82,.2); }
.btn-fantasma { background: transparent; border-color: transparent; color: var(--texto-suave); }
.btn-fantasma:hover { background: rgba(255,255,255,.06); color: var(--texto); }
.btn-mini { padding: .28rem .55rem; font-size: .76rem; border-radius: 6px; }
.btn-icono { padding: .38rem; width: 30px; height: 30px; }
.btn-icono svg { width: 15px; height: 15px; }
.btn:disabled { opacity: .45; cursor: not-allowed; }

.acciones-fila { display: flex; gap: .3rem; justify-content: flex-end; }

/* ================================================================ FILTROS */
.filtros {
  display: flex; flex-wrap: wrap; gap: .5rem; align-items: flex-end;
  padding: .8rem 1.1rem;
  border-bottom: 1px solid var(--borde);
  background: rgba(255,255,255,.018);
}
.filtro { display: grid; gap: .2rem; }
.filtro label { font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--texto-tenue); font-weight: 800; }
.filtro select, .filtro input {
  padding: .38rem .6rem;
  border-radius: 6px;
  border: 1px solid var(--borde);
  background: rgba(4,6,6,.6);
  font-size: .82rem;
  min-width: 130px;
}
.filtro select:focus, .filtro input:focus { outline: none; border-color: var(--borde-oro); }
.filtro select option { background: #0b1409; }
.filtros .der { margin-left: auto; display: flex; gap: .45rem; align-items: flex-end; }

/* ================================================================ TABLAS */
.tabla-caja { overflow-x: auto; }
table.tabla { font-size: .84rem; min-width: 720px; }
table.tabla th {
  text-align: left;
  padding: .6rem .85rem;
  font-size: .68rem; letter-spacing: .11em; text-transform: uppercase;
  color: var(--texto-tenue); font-weight: 800;
  border-bottom: 1px solid var(--borde);
  background: rgba(255,255,255,.022);
  white-space: nowrap;
  position: sticky; top: 0; z-index: 2;
}
table.tabla th.orden { cursor: pointer; user-select: none; }
table.tabla th.orden:hover { color: var(--dorado-claro); }
table.tabla td {
  padding: .62rem .85rem;
  border-bottom: 1px solid rgba(207,207,208,.07);
  vertical-align: middle;
}
table.tabla tbody tr { transition: background var(--t); }
table.tabla tbody tr:hover { background: rgba(255,255,255,.035); }
table.tabla tbody tr.clicable { cursor: pointer; }
table.tabla td.num { font-family: var(--f-mono); text-align: right; white-space: nowrap; }
table.tabla td.compacta { white-space: nowrap; }
table.tabla .principal { font-weight: 700; color: var(--texto); }
table.tabla .secundaria { font-size: .76rem; color: var(--texto-tenue); }

.vacio {
  padding: 2.4rem 1.2rem;
  text-align: center;
  color: var(--texto-tenue);
  display: grid; gap: .5rem; justify-items: center;
}
.vacio svg { width: 34px; height: 34px; opacity: .5; }
.vacio strong { font-family: var(--f-titulo); font-size: 1rem; color: var(--texto-suave); }

.pie-tabla {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  padding: .6rem 1.1rem;
  border-top: 1px solid var(--borde);
  font-size: .78rem; color: var(--texto-tenue);
}
.pie-tabla .der { margin-left: auto; display: flex; gap: .35rem; align-items: center; }

/* ================================================================ KANBAN */
.kanban { display: flex; gap: .8rem; overflow-x: auto; padding: 1rem; align-items: flex-start; }
.kanban-col {
  flex: none;
  width: 262px;
  border-radius: var(--r-md);
  border: 1px solid var(--borde);
  background: rgba(255,255,255,.022);
  display: flex; flex-direction: column;
  max-height: 66vh;
}
.kanban-col.destino { border-color: var(--dorado-claro); background: rgba(228,171,42,.06); }
.kanban-cabeza {
  padding: .6rem .75rem;
  border-bottom: 1px solid var(--borde);
  display: flex; align-items: center; gap: .5rem;
}
.kanban-cabeza strong { font-size: .78rem; letter-spacing: .04em; }
.kanban-cabeza .conteo {
  margin-left: auto;
  font-size: .7rem; font-weight: 800;
  padding: .08rem .4rem;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
}
.kanban-cabeza .valor { width: 100%; font-family: var(--f-mono); font-size: .72rem; color: var(--texto-tenue); }
.kanban-lista { padding: .5rem; display: grid; gap: .5rem; overflow-y: auto; align-content: start; min-height: 60px; }

.kanban-etapa {
  font-size: .62rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--dorado-claro); font-weight: 800;
  padding: .1rem 0 .3rem;
}

.ficha {
  padding: .6rem .7rem;
  border-radius: var(--r-sm);
  border: 1px solid var(--borde);
  background: linear-gradient(160deg, rgba(255,255,255,.05), rgba(255,255,255,.015));
  cursor: grab;
  display: grid; gap: .35rem;
  transition: var(--t);
}
.ficha:hover { border-color: var(--borde-oro); transform: translateY(-2px); box-shadow: var(--sombra-2); }
.ficha.arrastrando { opacity: .45; }
.ficha strong { font-size: .84rem; line-height: 1.3; }
.ficha .meta { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; font-size: .72rem; color: var(--texto-tenue); }
.ficha .valor { font-family: var(--f-mono); font-size: .78rem; color: var(--dorado-claro); font-weight: 700; }

/* ================================================================ MODALES */
.modal-fondo {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(0,0,0,.66);
  backdrop-filter: blur(4px);
  display: none;
  padding: 1.2rem;
  overflow-y: auto;
}
.modal-fondo.visible { display: grid; place-items: start center; }
.modal {
  width: min(100%, 720px);
  margin: 2.2rem 0;
  border-radius: var(--r-lg);
  border: 1px solid var(--borde-2);
  background: linear-gradient(170deg, var(--elevado), var(--panel));
  box-shadow: var(--sombra);
  overflow: hidden;
  animation: subir .24s cubic-bezier(.22,.61,.36,1);
}
.modal.ancho { width: min(100%, 1020px); }
.modal.angosto { width: min(100%, 480px); }
@keyframes subir { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.modal-cabeza {
  display: flex; align-items: flex-start; gap: .8rem;
  padding: 1rem 1.2rem;
  border-bottom: 1px solid var(--borde);
  background: rgba(255,255,255,.025);
}
.modal-cabeza h2 { font-size: 1.05rem; }
.modal-cabeza p { font-size: .78rem; color: var(--texto-tenue); }
.modal-cabeza .cerrar { margin-left: auto; }
.modal-cuerpo { padding: 1.2rem; display: grid; gap: 1rem; max-height: 68vh; overflow-y: auto; }
.modal-pie {
  display: flex; gap: .5rem; justify-content: flex-end; flex-wrap: wrap;
  padding: .85rem 1.2rem;
  border-top: 1px solid var(--borde);
  background: rgba(255,255,255,.02);
}
.modal-pie .izq { margin-right: auto; }

/* ============================================================= FORMULARIOS */
.form-rejilla { display: grid; gap: .85rem; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.form-campo { display: grid; gap: .28rem; }
.form-campo.ancho { grid-column: 1 / -1; }
.form-campo label { font-size: .74rem; font-weight: 800; letter-spacing: .04em; color: var(--texto-suave); }
.form-campo label .req { color: var(--dorado-claro); }
.form-campo input, .form-campo select, .form-campo textarea {
  padding: .52rem .7rem;
  border-radius: var(--r-sm);
  border: 1px solid var(--borde);
  background: rgba(4,6,6,.62);
  font-size: .86rem;
  width: 100%;
}
.form-campo textarea { resize: vertical; min-height: 84px; line-height: 1.5; }
.form-campo select option { background: #0b1409; }
.form-campo input:focus, .form-campo select:focus, .form-campo textarea:focus {
  outline: none; border-color: var(--dorado-claro);
  background: rgba(4,6,6,.85);
  box-shadow: 0 0 0 3px rgba(228,171,42,.14);
}
.form-campo input[aria-invalid="true"], .form-campo select[aria-invalid="true"], .form-campo textarea[aria-invalid="true"] { border-color: var(--grave); }
.form-campo .ayuda { font-size: .72rem; color: var(--texto-tenue); }
.form-campo .error { font-size: .74rem; color: var(--grave); min-height: 1em; }
.form-campo input[type="checkbox"] { width: auto; accent-color: var(--dorado-claro); }
.form-check { display: flex; align-items: flex-start; gap: .5rem; font-size: .82rem; color: var(--texto-suave); }
.form-check input { margin-top: .18rem; accent-color: var(--dorado-claro); width: 17px; height: 17px; }

fieldset.form-bloque {
  border: 1px solid var(--borde);
  border-radius: var(--r-md);
  padding: .9rem 1rem 1rem;
  margin: 0;
  display: grid; gap: .8rem;
}
fieldset.form-bloque legend {
  font-size: .68rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--dorado-claro); font-weight: 800;
  padding: 0 .4rem;
}

/* ================================================================ PESTAÑAS */
.pestanas {
  display: flex; gap: .2rem; flex-wrap: wrap;
  padding: 0 1.1rem;
  border-bottom: 1px solid var(--borde);
  background: rgba(255,255,255,.018);
}
.pestana {
  padding: .6rem .8rem;
  border: 0; background: transparent;
  border-bottom: 2px solid transparent;
  font-size: .84rem; font-weight: 700;
  color: var(--texto-tenue);
  cursor: pointer;
  transition: var(--t);
}
.pestana:hover { color: var(--texto); }
.pestana.activa { color: var(--dorado-claro); border-bottom-color: var(--dorado-claro); }
.pestana .conteo {
  margin-left: .35rem;
  font-size: .68rem;
  padding: .04rem .32rem;
  border-radius: 999px;
  background: rgba(255,255,255,.09);
  color: var(--texto-suave);
}

/* ================================================================= DATOS */
.datos-lista { display: grid; gap: .5rem; }
.dato-fila {
  display: grid; grid-template-columns: 190px 1fr; gap: .8rem;
  padding: .42rem 0;
  border-bottom: 1px dashed rgba(207,207,208,.09);
  font-size: .85rem;
}
.dato-fila:last-child { border-bottom: 0; }
.dato-fila dt { color: var(--texto-tenue); font-size: .78rem; }
.dato-fila dd { margin: 0; }
@media (max-width: 640px) { .dato-fila { grid-template-columns: 1fr; gap: .1rem; } }

/* ================================================================ LÍNEA T. */
.linea-tiempo { display: grid; gap: 0; position: relative; padding-left: 1.4rem; }
.linea-tiempo::before {
  content: ""; position: absolute; left: 5px; top: .5rem; bottom: .5rem;
  width: 2px; background: linear-gradient(180deg, var(--borde-oro), transparent);
}
.hito { position: relative; padding: .55rem 0 .55rem .2rem; }
.hito::before {
  content: ""; position: absolute; left: -1.4rem; top: .85rem;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--panel); border: 2px solid var(--borde-2);
}
.hito.hecho::before { background: var(--leve); border-color: var(--leve); }
.hito.actual::before { background: var(--dorado-claro); border-color: var(--dorado-claro); box-shadow: 0 0 0 4px rgba(228,171,42,.18); }
.hito strong { font-size: .87rem; display: block; }
.hito span { font-size: .76rem; color: var(--texto-tenue); }

/* ================================================================ ALERTAS */
.alerta-fila {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: .8rem; align-items: center;
  padding: .75rem 1.1rem;
  border-bottom: 1px solid rgba(207,207,208,.07);
  transition: var(--t);
}
.alerta-fila:hover { background: rgba(255,255,255,.03); }
.alerta-fila.atendida { opacity: .5; }
.alerta-cuerpo strong { display: block; font-size: .88rem; }
.alerta-cuerpo p { font-size: .8rem; color: var(--texto-suave); }
.alerta-meta { display: flex; gap: .5rem; flex-wrap: wrap; font-size: .74rem; color: var(--texto-tenue); margin-top: .22rem; }
.alerta-acciones { display: flex; gap: .35rem; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 720px) {
  .alerta-fila { grid-template-columns: auto 1fr; }
  .alerta-acciones { grid-column: 1 / -1; justify-content: flex-start; }
}

.bandeja {
  position: fixed; top: var(--barra); right: 0; bottom: 0; z-index: 80;
  width: min(430px, 100%);
  background: linear-gradient(180deg, var(--elevado), var(--panel));
  border-left: 1px solid var(--borde-2);
  box-shadow: var(--sombra);
  transform: translateX(100%);
  transition: transform var(--t);
  display: flex; flex-direction: column;
}
.bandeja.abierta { transform: none; }
.bandeja-cabeza { padding: .9rem 1.1rem; border-bottom: 1px solid var(--borde); display: flex; align-items: center; gap: .6rem; }
.bandeja-lista { flex: 1; overflow-y: auto; }
.bandeja-pie { padding: .7rem 1.1rem; border-top: 1px solid var(--borde); display: flex; gap: .4rem; }

/* ================================================================= AVISOS */
.aviso {
  display: flex; gap: .7rem; align-items: flex-start;
  padding: .7rem .9rem;
  border-radius: var(--r-sm);
  border: 1px solid var(--borde);
  background: rgba(255,255,255,.03);
  font-size: .83rem;
}
.aviso svg { width: 17px; height: 17px; flex: none; margin-top: .12rem; }
.aviso-info  { border-color: rgba(86,182,255,.3);  background: var(--info-fondo);  color: #bfe3ff; }
.aviso-oro   { border-color: var(--borde-oro);     background: rgba(228,171,42,.08); }
.aviso-grave { border-color: rgba(255,95,82,.32);  background: var(--grave-fondo);  color: #ffc8c2; }
.aviso strong { display: block; }

.notis { position: fixed; right: 1rem; bottom: 1rem; z-index: 120; display: grid; gap: .5rem; justify-items: end; }
.noti {
  display: flex; align-items: center; gap: .6rem;
  padding: .65rem .9rem;
  border-radius: var(--r-sm);
  border: 1px solid var(--borde-2);
  background: var(--elevado);
  box-shadow: var(--sombra);
  font-size: .85rem;
  max-width: 380px;
  animation: subir .2s ease;
}
.noti svg { width: 17px; height: 17px; flex: none; }
.noti.ok    { border-color: rgba(53,196,106,.4); color: #a6ecc3; }
.noti.error { border-color: rgba(255,95,82,.4);  color: #ffc0b8; }
.noti.info  { border-color: var(--borde-oro); }

/* ================================================================= EXTRAS */
.chips-linea { display: flex; flex-wrap: wrap; gap: .35rem; }
.mini-titulo {
  font-size: .68rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--dorado-claro); font-weight: 800; margin-bottom: .5rem;
}
.separador { height: 1px; background: var(--borde); margin: .3rem 0; }
.mono { font-family: var(--f-mono); }
.tenue { color: var(--texto-tenue); }
.suave { color: var(--texto-suave); }
.chico { font-size: .8rem; }
.grave-txt { color: var(--grave); }
.leve-txt { color: var(--leve); }
.media-txt { color: var(--media); }
.oro-txt { color: var(--dorado-claro); }
.negrita { font-weight: 800; }
.centro { text-align: center; }
.derecha { text-align: right; }
.flex { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.flex-col { display: flex; flex-direction: column; gap: .5rem; }
.entre { justify-content: space-between; }
.crece { flex: 1; }

.barras { display: grid; gap: .55rem; }
.barra-fila { display: grid; grid-template-columns: 150px 1fr auto; gap: .7rem; align-items: center; font-size: .82rem; }
.barra-pista { height: 8px; border-radius: 5px; background: rgba(255,255,255,.08); overflow: hidden; }
.barra-pista i { display: block; height: 100%; border-radius: 5px; background: linear-gradient(90deg, var(--verde-gris), var(--dorado-claro)); }
@media (max-width: 560px) { .barra-fila { grid-template-columns: 1fr; gap: .2rem; } }

.tarjeta-persona {
  display: grid; gap: .7rem;
  padding: 1rem;
  border-radius: var(--r-md);
  border: 1px solid var(--borde);
  background: linear-gradient(165deg, rgba(255,255,255,.045), rgba(255,255,255,.012));
  transition: var(--t);
  cursor: pointer;
}
.tarjeta-persona:hover { border-color: var(--borde-oro); transform: translateY(-3px); box-shadow: var(--sombra-2); }
.persona-cabeza { display: flex; align-items: center; gap: .7rem; }
.persona-cabeza strong { display: block; font-size: .92rem; }
.persona-cabeza span { display: block; font-size: .76rem; color: var(--texto-tenue); }

.arbol { display: grid; gap: .3rem; }
.arbol-nodo {
  display: flex; align-items: center; gap: .6rem;
  padding: .5rem .7rem;
  border-radius: var(--r-sm);
  border: 1px solid var(--borde);
  background: rgba(255,255,255,.03);
  font-size: .84rem;
  transition: var(--t);
}
.arbol-nodo:hover { border-color: var(--borde-oro); }
.arbol-nodo svg { width: 16px; height: 16px; color: var(--dorado-claro); flex: none; }
.arbol-nodo .der { margin-left: auto; display: flex; gap: .35rem; align-items: center; }
.arbol-hijos { padding-left: 1.4rem; display: grid; gap: .3rem; border-left: 1px dashed var(--borde); margin-left: .8rem; }

.version-fila {
  display: flex; align-items: center; gap: .6rem;
  padding: .42rem .6rem;
  border-radius: 6px;
  background: rgba(255,255,255,.028);
  font-size: .8rem;
}
.version-fila.vigente { border: 1px solid var(--borde-oro); background: rgba(228,171,42,.08); }

/* ========================================================= PORTAL CLIENTE */
.portal-hero {
  padding: 1.4rem 1.5rem;
  border-radius: var(--r-md);
  border: 1px solid var(--borde-oro);
  background:
    radial-gradient(620px 320px at 88% 0%, rgba(185,125,19,.28), transparent 66%),
    linear-gradient(155deg, var(--verde-profundo) 0%, #05170a 60%, var(--negro) 100%);
  display: grid; gap: .7rem;
}
.portal-hero h2 { font-size: 1.35rem; }
.portal-hero p { color: var(--texto-suave); font-size: .9rem; max-width: 62ch; }

@media print {
  .app-lateral, .app-barra, .bandeja, .notis, .filtros, .acciones-fila { display: none !important; }
  .app-cuerpo { margin-left: 0; }
  body { background: #fff; color: #000; }
}