/* ==========================================================================
   NexAcount - Identidad visual
   Tokens heredados de la aplicacion de escritorio para mantener la misma
   apariencia: fondo claro, barra azul, tarjetas blancas compactas.
   ========================================================================== */

:root {
  --navy: #17395f;
  --navy-soft: #1f456e;
  --bright-blue: #2170c4;
  --soft-blue: #eef4fa;
  --line: #e6ecf3;
  --line-fuerte: #d7dce3;
  --bg: #f5f8fc;
  --panel: #ffffff;
  --text: #1f2937;
  --muted: #667085;
  --verde: #157347;
  --verde-suave: #e8f3ed;
  /* El color de "esto conviene mirarlo": avisos, distintivos y marcas de
     atencion. Era ambar y se pidio quitarlo de toda la aplicacion, asi que
     ahora es azul. El nombre dice para que sirve y no de que color es: asi
     cambiarlo otra vez es cambiar estas dos lineas, no buscar "naranja" por
     toda la hoja. */
  --atencion: #1f5f99;
  --atencion-suave: #e9f1fb;
  /* El naranja de los titulos NO se toca: es el acento de la marca, se pidio
     expresamente y no tiene nada que ver con el de los avisos. Ahi es una
     palabra suelta sobre fondo claro y tiene que resaltar. */
  --naranja-titulo: #ff6600;
  --rojo: #b42318;
  --rojo-suave: #fdeceb;
  --azul-suave: #e9f1fb;
  --shadow: 0 12px 28px rgba(31, 41, 55, 0.07);
  --shadow-sm: 0 1px 3px rgba(23, 57, 95, 0.05);
  --radio: 12px;
  --radio-sm: 5px;
  --ancho-contenido: 1720px;
  --ancho-sidebar: 232px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html { overflow-x: hidden; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  background: var(--bg);
  font-family: Inter, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--bright-blue); }

/* ==========================================================================
   Inicio de sesion
   ========================================================================== */

.login-body {
  display: grid;
  place-items: center;
  min-height: 100vh;
  padding: 24px;
  background:
    radial-gradient(circle at 14% 18%, rgba(184, 104, 24, 0.07), transparent 26%),
    radial-gradient(circle at 88% 18%, rgba(31, 95, 153, 0.10), transparent 30%),
    linear-gradient(135deg, #f5f1ea 0%, #edf2f5 100%);
}

/* --------------------------------------------------------------------------
   El fondo de la pantalla de acceso

   El arte no es una textura: lleva textos dentro —la frase de la izquierda, el
   lema de arriba a la derecha, "ORGANIZA - ANALIZA - CRECE" abajo— y estan
   pegados a los bordes. Eso manda sobre como puede escalarse.

   Antes se usaba `cover` y solo a partir de 1100px con proporcion 4/3. Dos
   problemas: en una pantalla mas alta que ancha —1280x1024, una ventana a
   media altura, una tableta— el arte DESAPARECIA entero y quedaba un degradado
   liso; y cuando aparecia, `cover` recortaba justo por donde estan los textos.

   Ahora:
     - `contain` por omision: la composicion se ve COMPLETA, nunca cortada.
     - `cover` solo cuando la ventana es al menos tan apaisada como el arte
       (16/9). Ahi llenar no cuesta nada porque apenas hay que recortar.
     - El color de alrededor es el del propio borde de la imagen (#f5fafe), asi
       que lo que sobra no se ve como una banda: parece que el arte se desvanece.

   Debajo de 820px el arte se retira. No es que no quepa: es que a ese tamano
   queda detras de la tarjeta convertido en ruido, y se lee peor.
   -------------------------------------------------------------------------- */
.login-body.login-fondo {
  min-height: 100svh;
  background:
    radial-gradient(ellipse at 0% 100%, rgba(175, 195, 218, 0.18), transparent 55%),
    radial-gradient(ellipse at 100% 0%, rgba(201, 212, 224, 0.16), transparent 50%),
    #f8fafc;
}

@media (min-width: 820px) {
  .login-body.login-fondo {
    background: #f5fafe url("/img/nexacount-fondo-acceso-20260916.png") center / contain no-repeat;
  }
}

@media (min-width: 820px) and (min-aspect-ratio: 16/9) {
  .login-body.login-fondo { background-size: cover; }
}

.login-card {
  width: 100%;
  max-width: 390px;
  padding: 30px 30px 26px;
  border: 1px solid #e4ebf6;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 24px 58px rgba(31, 41, 55, 0.14);
}

.login-marca { text-align: center; margin-bottom: 24px; }
.login-marca img { display: block; width: 200px; height: auto; margin: 0 auto; }

.acceso-nuevo {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.acceso-nuevo .btn { color: var(--navy); text-decoration: none; }

.registro-encabezado h1 {
  margin: 0 0 6px;
  color: var(--navy);
  font-size: 20px;
  line-height: 1.25;
}
.registro-paso {
  margin: 0 0 4px;
  color: var(--bright-blue);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* ==========================================================================
   Estructura de la aplicacion
   ========================================================================== */

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.app-shell { display: flex; min-height: 100vh; }

/* --- Barra lateral ----------------------------------------------------- */

.sidebar {
  position: sticky; top: 0; z-index: 45;
  display: flex; flex-direction: column;
  width: var(--ancho-sidebar); flex-shrink: 0;
  height: 100vh; padding: 16px 14px;
  background: var(--panel);
  border-right: 1px solid var(--line);
}

/* La marca comparte linea base con la barra superior: ambas miden 50px de
   alto, asi que el logo y el selector de empresa quedan a la misma altura. */
.sidebar-marca {
  display: flex; align-items: center; gap: 10px;
  height: 34px; flex-shrink: 0; padding: 0 8px; margin-bottom: 16px;
  font-size: 18px; font-weight: 750; letter-spacing: -.4px;
  color: var(--navy);
}
.sidebar-marca img { display: block; }

.nav { display: flex; flex-direction: column; gap: 3px; }

.nav-item {
  display: flex; align-items: center; gap: 13px;
  width: 100%; padding: 11px 13px;
  border: 0; border-radius: 10px;
  background: transparent; color: #48596f;
  font: inherit; font-size: 14.5px; font-weight: 550;
  text-align: left; cursor: pointer;
  transition: background .12s, color .12s;
}
.nav-item svg { width: 20px; height: 20px; flex-shrink: 0; opacity: .8; }
.nav-item:hover { background: var(--soft-blue); color: var(--navy); }
.nav-item.activo {
  background: var(--azul-suave); color: var(--navy); font-weight: 650;
}
.nav-item.activo svg { opacity: 1; color: var(--bright-blue); }

/* Bloque de marca al pie: identidad, no navegacion. */
.sidebar-pie {
  margin-top: auto; padding: 18px 10px 4px;
  text-align: center; color: var(--muted);
}
.sidebar-pie img { display: block; margin: 0 auto 8px; opacity: .95; }
.sidebar-pie strong {
  display: block; font-size: 13.5px; font-weight: 750;
  letter-spacing: -.2px; color: var(--navy);
}
.sidebar-pie p { margin: 2px 0 0; font-size: 11px; line-height: 1.35; }
.sidebar-pie small {
  display: block; margin-top: 12px;
  padding-top: 10px; border-top: 1px solid var(--line);
  font-size: 10.5px; color: #93a0b1;
}

.sidebar-velo {
  position: fixed; inset: 0; z-index: 44;
  background: rgba(18, 52, 90, 0.35);
}

/* --- Barra superior ----------------------------------------------------- */

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

.topbar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 12px;
  padding: 7px 22px; min-height: 0;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
}

.boton-menu {
  display: none; place-items: center;
  width: 34px; height: 34px; padding: 0;
  border: 1px solid var(--line-fuerte); border-radius: 8px;
  background: #fff; color: var(--navy); cursor: pointer;
}
.boton-menu svg { width: 18px; height: 18px; }

/*
 * El selector de empresa.
 *
 * No es un `<select>`: uno nativo lo dibuja el sistema operativo y no admite
 * ni buscador, ni el RTN debajo del nombre, ni marcar la activa. Con doce
 * empresas y razones sociales largas, esa lista cruda se recorre con el dedo.
 */
.selector-empresa { position: relative; flex-shrink: 0; }

.selector-empresa-boton {
  display: flex; align-items: center; gap: 8px;
  width: 100%; padding: 6px 11px;
  border: 1px solid var(--line-fuerte); border-radius: 9px;
  background: #fff; color: var(--navy);
  font: inherit; font-size: 13px; font-weight: 600;
  cursor: pointer; text-align: left;
  transition: border-color .12s, box-shadow .12s;
}
.selector-empresa-boton:hover:not(:disabled) { border-color: var(--bright-blue); }
.selector-empresa-boton:focus-visible,
.selector-empresa-boton[aria-expanded="true"] {
  outline: none;
  border-color: var(--bright-blue);
  box-shadow: 0 0 0 3px rgba(31, 95, 153, 0.12);
}
/* Con una sola empresa no hay nada que elegir: se ve, no se pulsa. */
.selector-empresa-boton:disabled { cursor: default; color: var(--navy); opacity: 1; }
.selector-empresa-boton:disabled .icono-chevron { display: none; }

.selector-empresa .icono-empresa { width: 16px; height: 16px; color: var(--bright-blue); flex-shrink: 0; }
.selector-empresa .icono-chevron { width: 15px; height: 15px; color: var(--muted); flex-shrink: 0; }
.selector-empresa-nombre {
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  max-width: 240px;
}
/* Dentro de una copia de revision, el nombre lo dice tambien aqui arriba. */
.selector-empresa-boton.es-revision { border-color: #b9a4d8; background: #f6f2fb; }

/* --- El desplegable ------------------------------------------------------ */

.selector-empresa-panel {
  position: absolute; z-index: 60; top: calc(100% + 6px); left: 0;
  width: 330px; max-width: 86vw;
  border: 1px solid var(--line); border-radius: 11px;
  background: #fff;
  box-shadow: 0 16px 38px rgba(16, 24, 40, .16);
  overflow: hidden;
}

.selector-empresa-buscar {
  display: flex; align-items: center; gap: 7px;
  padding: 9px 11px; border-bottom: 1px solid var(--line);
}
.selector-empresa-buscar svg { width: 14px; height: 14px; color: var(--muted); flex-shrink: 0; }
.selector-empresa-buscar input {
  flex: 1; min-width: 0; padding: 0;
  border: 0; background: transparent; color: var(--navy);
  font: inherit; font-size: 13px;
}
.selector-empresa-buscar input:focus { outline: none; box-shadow: none; }

.selector-empresa-lista {
  margin: 0; padding: 5px; list-style: none;
  max-height: 340px; overflow-y: auto;
}

.selector-empresa-opcion {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 9px; border-radius: 8px;
  cursor: pointer;
}
.selector-empresa-opcion:hover,
.selector-empresa-opcion.resaltada { background: var(--soft-blue); }
.selector-empresa-opcion.activa { background: var(--azul-suave); }

.selector-empresa-texto { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.selector-empresa-opcion-nombre {
  font-size: 13px; font-weight: 600; color: var(--navy);
  overflow-wrap: anywhere;
}
.selector-empresa-rtn { font-size: 11px; color: var(--muted); }
.selector-empresa-marca {
  font-size: 10.5px; font-weight: 650; letter-spacing: .03em;
  text-transform: uppercase; color: #6b4ba0;
}
.selector-empresa-aqui {
  flex-shrink: 0;
  font-size: 10.5px; font-weight: 650; letter-spacing: .03em;
  text-transform: uppercase; color: var(--bright-blue);
}

.selector-empresa-vacio {
  padding: 14px 10px; text-align: center;
  font-size: 12.5px; color: var(--muted);
}

/*
 * Marca el nombre un momento despues de cambiar de empresa.
 *
 * El aviso flotante dura unos segundos y se va; quien estaba mirando otra
 * parte de la pantalla no lo ve. Esto senala el sitio donde hay que mirar
 * siempre para saber donde se esta parado.
 *
 * Es un destello, no un parpadeo: tres segundos y se apaga. Algo que se mueve
 * sin parar en la barra superior acaba siendo invisible.
 */
.selector-empresa.recien-cambiada .selector-empresa-boton {
  animation: empresa-cambiada 3s ease-out 1;
}
@keyframes empresa-cambiada {
  0%, 60% {
    border-color: var(--naranja-titulo);
    box-shadow: 0 0 0 3px rgba(255, 102, 0, .18);
  }
  100% {
    border-color: var(--line-fuerte);
    box-shadow: 0 0 0 3px rgba(255, 102, 0, 0);
  }
}

/* Quien pide menos movimiento no lo recibe: el aviso flotante ya lo dice. */
@media (prefers-reduced-motion: reduce) {
  .selector-empresa.recien-cambiada .selector-empresa-boton { animation: none; }
}

.buscador-global { position: relative; flex: 1; max-width: 500px; margin: 0 auto; }
.buscador-global > svg {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px; color: #8b98a8; pointer-events: none;
}
.buscador-global input[type="search"] {
  width: 100%; padding: 7px 62px 7px 36px;
  border: 1px solid var(--line-fuerte); border-radius: 9px;
  background: #fbfcfe; font-size: 13px;
}
.buscador-global .buscador-atajo {
  position: absolute; right: 9px; top: 50%; z-index: 1;
  transform: translateY(-50%); margin-left: 0; pointer-events: none;
}
.buscador-global:focus-within .buscador-atajo { display: none; }
.buscador-global input::-webkit-search-cancel-button { cursor: pointer; }
.buscador-global .resultados {
  position: absolute; left: 0; right: 0; top: calc(100% + 5px); z-index: 30;
  max-height: 340px; overflow-y: auto;
  border: 1px solid var(--line-fuerte); border-radius: 10px;
  background: #fff; box-shadow: var(--shadow);
}
.buscador-global .resultados button {
  display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 9px;
  width: 100%; padding: 9px 12px;
  border: 0; border-bottom: 1px solid var(--line);
  background: transparent; text-align: left; font: inherit; font-size: 12.5px;
  cursor: pointer;
}
.buscador-global .resultados button:last-child { border-bottom: 0; }
.buscador-global .resultados button:hover,
.buscador-global .resultados button.resaltado { background: var(--soft-blue); }
.buscador-global .resultados svg { width: 16px; height: 16px; color: var(--bright-blue); }
.buscador-global .resultados .principal { font-weight: 600; color: var(--navy); }
.buscador-global .resultados .secundario { display: block; font-size: 11px; color: var(--muted); }
.buscador-global .resultados .grupo {
  padding: 6px 12px; background: #f7f8fa; border-bottom: 1px solid var(--line);
  font-size: 9.5px; font-weight: 700; letter-spacing: .5px;
  text-transform: uppercase; color: var(--muted);
}
.buscador-global .resultados .sin-resultados { padding: 14px 12px; font-size: 12px; color: var(--muted); }

.topbar-derecha { display: flex; align-items: center; gap: 6px; margin-left: auto; }

.icono-topbar {
  position: relative;
  display: grid; place-items: center;
  width: 32px; height: 32px; padding: 0;
  border: 0; border-radius: 9px;
  background: transparent; color: #5b6b80; cursor: pointer;
  transition: background .12s, color .12s;
}
.icono-topbar:hover { background: var(--soft-blue); color: var(--navy); }
.icono-topbar svg { width: 19px; height: 19px; }
.punto-aviso {
  position: absolute; top: 5px; right: 6px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--bright-blue); border: 1.5px solid #fff;
}

.sesion-usuario {
  display: flex; align-items: center; gap: 8px;
  padding-left: 9px; margin-left: 3px;
  border-left: 1px solid var(--line);
}
.sesion-avatar {
  display: grid; place-items: center;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--azul-suave); color: var(--navy);
  font-size: 13px; font-weight: 700;
}
.sesion-datos { line-height: 1.2; }
.sesion-datos strong { display: block; font-size: 12.5px; font-weight: 600; color: var(--navy); }
.sesion-datos small { font-size: 10px; color: var(--muted); }

/* ==========================================================================
   Area de trabajo
   ========================================================================== */

/*
 * Ancho del area de trabajo.
 *
 * Con solo un max-width, en una pantalla de 1920 el contenido no alcanzaba el
 * tope y se estiraba de borde a borde. Ahora el margen lateral existe siempre:
 *
 *   --ancho-contenido   tope en pantallas muy anchas
 *   100% - 350px        margen lateral en las demas
 *   1040px              piso, para que en una laptop no se angoste de mas
 *   100%                guarda: nunca desborda el espacio disponible
 */
.workspace {
  flex: 1;
  width: min(var(--ancho-contenido), 100%, max(1040px, 100% - 350px));
  margin: 0 auto;
  padding: 22px 30px 34px;
}

.page-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; margin-bottom: 22px;
}
.page-titulos { min-width: 0; }
.page-eyebrow {
  font-size: 13.5px; font-weight: 500; color: #7c8a9c;
  letter-spacing: 0; text-transform: none;
}
.page-eyebrow:empty { display: none; }
.page-header h1 { margin: 4px 0 0; font-size: 33px; font-weight: 700; letter-spacing: -1px; color: var(--navy); line-height: 1.15; }
/* La parte final del titulo, en el naranja de la marca. Lo pone `resalte` en
   fijarEncabezado; sin el, el titulo sale entero en azul como siempre. */
.page-header h1 .titulo-resalte { color: var(--naranja-titulo); }
.page-header p { margin: 4px 0 0; font-size: 14px; color: #7c8a9c; }
.page-acciones { display: flex; gap: 8px; flex-shrink: 0; align-items: center; }

/* ==========================================================================
   Tarjetas
   ========================================================================== */

.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
  margin-bottom: 16px;
}
.card-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 15px 18px; border-bottom: 1px solid var(--line);
}
.card-head h2 { margin: 0; font-size: 14px; font-weight: 650; }
.card-head p { margin: 1px 0 0; font-size: 11.5px; color: var(--muted); }
.card-body { padding: 18px; }

/* Cuentas de utilidad: etiqueta, selector buscable y descripcion. */
.tabla-utilidad { display: grid; grid-template-columns: 230px minmax(220px, 1fr) minmax(180px, 1fr); }
.tabla-utilidad > div { display: contents; }
.tabla-utilidad-cabecera, .tabla-utilidad-fila { display: contents; }
.tabla-utilidad-cabecera > div {
  padding: 7px 10px; font-size: 10px; font-weight: 650;
  letter-spacing: .4px; text-transform: uppercase; color: #47536b;
  background: #f7f8fa; border-bottom: 1px solid var(--line);
}
.tabla-utilidad-seccion {
  grid-column: 1 / -1; display: flex; align-items: baseline; gap: 10px;
  padding: 14px 10px 6px; border-bottom: 1px solid var(--line);
}
.tabla-utilidad-seccion strong { font-size: 12.5px; color: var(--navy); }
.tabla-utilidad-seccion span { font-size: 11.5px; color: var(--muted); }
.tabla-utilidad-fila > div {
  padding: 7px 10px; border-bottom: 1px solid var(--line);
  display: flex; align-items: center; min-height: 44px;
}
.tabla-utilidad-etiqueta { font-size: 12.5px; }
.tabla-utilidad-cuenta .selector-auxiliar { width: 100%; }
.tabla-utilidad-descripcion { font-size: 12.5px; color: var(--navy); }

@media (max-width: 860px) {
  .tabla-utilidad { grid-template-columns: 1fr; }
  .tabla-utilidad-cabecera { display: none; }
  .tabla-utilidad-fila > div { border-bottom: 0; min-height: 0; }
  .tabla-utilidad-fila > div:last-child { border-bottom: 1px solid var(--line); padding-bottom: 12px; }
}


/* Lado derecho de la cabecera: opciones de presentacion y menu de acciones. */
.cabecera-derecha {
  display: flex; align-items: center; justify-content: flex-end;
  gap: 16px; flex-wrap: wrap;
}
/* Opciones de impresion: un boton y un panel agrupado. En fila ocupaban el
   encabezado entero y crecian con cada opcion nueva. */
.opciones-impresion { position: relative; display: inline-block; }

.opciones-impresion .contador {
  display: inline-grid; place-items: center;
  min-width: 16px; height: 16px; margin-left: 5px; padding: 0 4px;
  border-radius: 8px;
  background: var(--bright-blue); color: #fff;
  font-size: 10.5px; font-weight: 700; line-height: 1;
}

.panel-opciones {
  position: absolute; right: 0; top: calc(100% + 4px); z-index: 30;
  width: 272px; max-width: calc(100vw - 32px); padding: 11px 13px;
  border: 1px solid var(--line-fuerte); border-radius: var(--radio-sm);
  background: #fff; box-shadow: 0 10px 26px rgba(31, 41, 55, 0.16);
  text-align: left;
}

.panel-opciones section { margin-top: 11px; }
.panel-opciones section:first-of-type { margin-top: 4px; }

.panel-opciones h4 {
  margin: 0 0 6px; padding-bottom: 4px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}

.panel-opciones label {
  display: flex; align-items: flex-start; gap: 7px;
  margin: 0 0 5px; padding: 2px 0;
  color: var(--text); font-size: 12.5px; line-height: 1.35;
  cursor: pointer; user-select: none;
}
.panel-opciones label:last-child { margin-bottom: 0; }
.panel-opciones input { margin: 2px 0 0; cursor: pointer; flex: none; }

.panel-opciones .nota {
  margin: 6px 0 0; color: var(--muted); font-size: 11px; line-height: 1.4;
}
.panel-opciones > .nota { margin: 0 0 2px; }

/* En pantalla angosta se queda anclado a la derecha, igual que en grande: el
   boton vive cerca del borde derecho, asi que el panel crece hacia dentro. El
   max-width le impide pasarse del ancho de la pantalla. */

.card-body.sin-padding { padding: 0; }
.card-foot {
  padding: 11px 15px; border-top: 1px solid var(--line);
  background: #fafbfc; border-radius: 0 0 var(--radio) var(--radio);
  display: flex; justify-content: flex-end; gap: 8px;
}

.grid-tarjetas {
  display: grid; gap: 14px; margin-bottom: 16px;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
}

.metrica { padding: 14px 16px; }
.metrica .etiqueta {
  font-size: 10.5px; font-weight: 600; letter-spacing: .5px;
  text-transform: uppercase; color: var(--muted);
}
.metrica .valor {
  margin-top: 5px; font-size: 22px; font-weight: 650;
  letter-spacing: -.4px; font-variant-numeric: tabular-nums;
}
.metrica .detalle { margin-top: 2px; font-size: 11.5px; color: var(--muted); }
.metrica.acento-azul .valor { color: var(--navy); }
.metrica.acento-verde .valor { color: var(--verde); }
.metrica.acento-rojo .valor { color: var(--rojo); }
.metrica.acento-atencion .valor { color: var(--atencion); }

/* ==========================================================================
   Formularios
   ========================================================================== */

.campo { margin-bottom: 13px; }
.campo:last-child { margin-bottom: 0; }
.campo label {
  display: block; margin-bottom: 4px;
  font-size: 11.5px; font-weight: 600; color: #364152;
}
.campo .ayuda { margin-top: 3px; font-size: 11px; color: var(--muted); }

input[type="text"], input[type="password"], input[type="email"], input[type="date"],
input[type="number"], input[type="search"], select, textarea {
  width: 100%; padding: 7px 10px;
  border: 1px solid var(--line-fuerte); border-radius: var(--radio-sm);
  background: #fff; color: var(--text);
  font: inherit; font-size: 13px;
  transition: border-color .12s, box-shadow .12s;
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--bright-blue);
  box-shadow: 0 0 0 3px rgba(31, 95, 153, 0.13);
}
input:disabled, select:disabled, textarea:disabled {
  background: #f6f7f9; color: var(--muted); cursor: not-allowed;
}
input[readonly] { background: #f9fafb; }
textarea { resize: vertical; min-height: 62px; }
input.numerico, td input.numerico { text-align: right; font-variant-numeric: tabular-nums; }

.fila-campos { display: grid; gap: 13px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.fila-campos.dos { grid-template-columns: repeat(2, 1fr); }
.fila-campos.tres { grid-template-columns: repeat(3, 1fr); }
.fila-campos.cuatro { grid-template-columns: repeat(4, 1fr); }

.check { display: flex; align-items: center; gap: 7px; font-size: 12.5px; cursor: pointer; }

/* ==========================================================================
   Configuracion lineal de los estados financieros
   ========================================================================== */

/* Las columnas se encogen antes de romper la fila: la tabla cabe en poco mas
   de 800px, que es lo que queda util en una laptop con la barra lateral. */
.tabla-estados {
  display: grid;
  grid-template-columns:
    26px minmax(118px, 140px) minmax(140px, 1fr) minmax(170px, 1.5fr)
    minmax(136px, 158px) 100px 66px;
}
/* El contenedor de filas existe para poder redibujarlas solas; no debe
   interponerse entre la rejilla y las celdas. */
#filas-estado { display: contents; }
.fila-estado { display: contents; }
.tabla-estados .tabla-vacia { grid-column: 1 / -1; }
.fila-estado > div {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 8px; border-bottom: 1px solid var(--line); min-height: 46px;
}
.fila-estado.cabecera > div {
  min-height: 0; padding: 8px; background: #f7f8fa; color: #47536b;
  font-size: 10px; font-weight: 650; letter-spacing: .4px; text-transform: uppercase;
}
.fila-estado select, .fila-estado input[type="text"] { width: 100%; min-width: 0; margin: 0; }
.fila-estado select { font-size: 12px; padding-left: 7px; padding-right: 20px; }
.fila-estado select:disabled, .fila-estado input:disabled { background: #f7f8fa; color: var(--muted); }
.fila-estado.arrastrando > div { opacity: .45; }

.celda-arrastre { justify-content: center; color: #b4bdcb; cursor: grab; user-select: none; }
.celda-mostrar .check { font-size: 12px; }
.celda-acciones { justify-content: flex-end; gap: 4px; }
.celda-acciones .menu-acciones { display: flex; }


/* Angosto: cada linea pasa a ser una ficha con sus campos rotulados. Sin los
   rotulos, media docena de controles sueltos no dicen nada. */
@media (max-width: 820px) {
  .tabla-estados { grid-template-columns: 1fr; }
  #filas-estado { display: block; }
  .fila-estado.cabecera { display: none; }
  .fila-estado {
    display: block; padding: 12px 14px;
    border-bottom: 1px solid var(--line);
  }
  .fila-estado > div {
    display: block; padding: 5px 0; border-bottom: 0; min-height: 0;
  }
  .fila-estado > div[data-etiqueta]::before {
    content: attr(data-etiqueta);
    display: block; margin-bottom: 3px;
    font-size: 10px; font-weight: 650; letter-spacing: .4px;
    text-transform: uppercase; color: #47536b;
  }
  /* .fila-estado > div gana por especificidad: hay que igualarla. */
  .fila-estado > .celda-arrastre { display: none; }
  .fila-estado > .celda-mostrar, .fila-estado > .celda-acciones { display: flex; }
  .celda-acciones { justify-content: flex-start; padding-top: 8px; }
}
}

.check input[type="checkbox"] { width: auto; margin: 0; cursor: pointer; }

fieldset { border: 1px solid var(--line); border-radius: var(--radio-sm); padding: 13px 14px; margin: 0 0 14px; }
legend { padding: 0 6px; font-size: 11.5px; font-weight: 650; color: var(--navy); }

/* ==========================================================================
   Botones
   ========================================================================== */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 7px 14px;
  border: 1px solid var(--line-fuerte); border-radius: var(--radio-sm);
  background: #fff; color: var(--text);
  font: inherit; font-size: 12.5px; font-weight: 550;
  cursor: pointer; white-space: nowrap;
  transition: background .12s, border-color .12s, color .12s;
}
.btn:hover:not(:disabled) { background: #f6f8fa; border-color: #c2ccd9; }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn-primario { background: var(--navy); border-color: var(--navy); color: #fff; }
.btn-primario:hover:not(:disabled) { background: var(--navy-soft); border-color: var(--navy-soft); }
.btn-peligro { background: var(--rojo); border-color: var(--rojo); color: #fff; }
.btn-peligro:hover:not(:disabled) { background: #9c1f15; border-color: #9c1f15; }
.btn-sm { padding: 4px 9px; font-size: 11.5px; }
.btn-bloque { width: 100%; }

/* ==========================================================================
   Menu de tres puntos
   ========================================================================== */

.menu-acciones { position: relative; display: inline-block; }
.menu-disparador {
  display: grid; place-items: center;
  width: 26px; height: 26px; padding: 0;
  border: 1px solid transparent; border-radius: var(--radio-sm);
  background: transparent; color: var(--muted);
  font-size: 15px; line-height: 1; cursor: pointer;
}
.menu-disparador:hover { background: #eff2f6; color: var(--text); border-color: var(--line); }
.menu-lista {
  position: absolute; right: 0; top: calc(100% + 3px); z-index: 30;
  min-width: 186px; padding: 4px;
  border: 1px solid var(--line-fuerte); border-radius: var(--radio-sm);
  background: #fff; box-shadow: 0 8px 22px rgba(31, 41, 55, 0.14);
}
.menu-lista.menu-lista-flotante {
  position: fixed; right: auto; bottom: auto; z-index: 300;
  max-height: calc(100vh - 16px); overflow-y: auto;
}
.menu-lista button {
  display: block; width: 100%; padding: 6px 10px;
  border: 0; border-radius: 4px; background: transparent;
  color: var(--text); font: inherit; font-size: 12.5px; text-align: left; cursor: pointer;
}
.menu-lista button:hover { background: var(--soft-blue); }
.menu-lista button.peligro { color: var(--rojo); }
.menu-lista button.peligro:hover { background: var(--rojo-suave); }
.menu-lista button:disabled { color: #b0b7c3; cursor: not-allowed; background: transparent; }
.menu-separador { height: 1px; margin: 4px 2px; background: var(--line); }

/* ==========================================================================
   Tablas
   ========================================================================== */

.tabla-contenedor { width: 100%; overflow-x: auto; }

table.tabla { width: 100%; border-collapse: collapse; font-size: 12.5px; }
table.tabla thead th {
  position: sticky; top: 0; z-index: 1;
  padding: 8px 11px;
  background: #f7f8fa; color: #47536b;
  font-size: 10.5px; font-weight: 650; letter-spacing: .4px; text-transform: uppercase;
  text-align: left; white-space: nowrap;
  border-bottom: 1px solid var(--line-fuerte);
}
table.tabla tbody td { padding: 7px 11px; border-bottom: 1px solid #f0f2f5; vertical-align: middle; }
table.tabla tbody tr:hover { background: #fafbfd; }
table.tabla tbody tr.seleccionada { background: var(--soft-blue); }
table.tabla th.num, table.tabla td.num {
  text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap;
}
table.tabla th.centro, table.tabla td.centro { text-align: center; }
table.tabla td.acciones { text-align: right; width: 1%; white-space: nowrap; }
table.tabla tfoot td {
  padding: 9px 11px; font-weight: 700;
  background: #f7f8fa; border-top: 2px solid var(--line-fuerte);
}
table.tabla tfoot td.num { text-align: right; font-variant-numeric: tabular-nums; }
table.tabla tbody tr.fila-grupo td { background: #f2f4f7; font-weight: 650; }
table.tabla tbody tr.fila-subtotal td { font-weight: 650; border-top: 1px solid var(--line-fuerte); }
table.tabla.compacta tbody td { padding: 4px 9px; }
table.tabla .codigo { font-variant-numeric: tabular-nums; color: var(--muted); }

/* En los comparativos el color y las lineas ya distinguen cada nivel. */
.comparativo-financiero-vista .resumen-cuadre .dato .monto,
table.tabla.comparativo-financiero tbody tr td,
table.tabla.comparativo-financiero tfoot td { font-weight: 400; }
table.tabla.comparativo-financiero tbody tr.fila-comparativa-destacada td,
table.tabla.comparativo-financiero tfoot td { font-weight: 650; }

.tabla-vacia { padding: 34px 18px; text-align: center; color: var(--muted); }
.tabla-vacia strong { display: block; margin-bottom: 4px; color: var(--text); font-size: 13.5px; }
.tabla-vacia p { margin: 0 0 12px; font-size: 12.5px; }

/* ==========================================================================
   Etiquetas de estado

   Texto plano, sin caja ni fondo: el color basta para distinguir el estado y
   no compite con las cifras de la tabla.
   ========================================================================== */

.etiqueta {
  display: inline-block;
  font-size: 12px; font-weight: 600;
  white-space: nowrap;
  /* Los valores llegan en mayusculas desde la base (BORRADOR, ACTIVA...).
     Se muestran con inicial mayuscula, que en texto suelto se lee mejor. */
  text-transform: lowercase;
}
.etiqueta::first-letter { text-transform: uppercase; }

/*
 * BORRADOR se separa de los demas y va en gris.
 *
 * Compartia color con el distintivo de atencion, y ese paso de ambar a azul
 * —el mismo azul con el que se pinta CONTABILIZADO—. Dos estados de asiento
 * con dos azules casi iguales no se distinguen de un vistazo en una lista, y
 * confundir un borrador con un asiento contabilizado es de las peores
 * confusiones posibles aqui. El gris ademas dice lo que es: todavia no cuenta.
 */
.etiqueta-BORRADOR { color: var(--muted); }
.etiqueta-atencion { color: var(--atencion); }
.etiqueta-CONTABILIZADO, .etiqueta-azul { color: var(--bright-blue); }
.etiqueta-ANULADO, .etiqueta-rojo { color: var(--rojo); }
.etiqueta-verde, .etiqueta-ACTIVA, .etiqueta-ACTIVO { color: var(--verde); }
.etiqueta-gris, .etiqueta-INACTIVA, .etiqueta-INACTIVO { color: var(--muted); }
.etiqueta-REVERSADO { color: #6b3fa0; }

/* ==========================================================================
   Modales
   ========================================================================== */

.modal-fondo {
  position: fixed; inset: 0; z-index: 100;
  display: grid; place-items: center;
  padding: 22px;
  background: rgba(18, 30, 48, 0.46);
  backdrop-filter: blur(1.5px);
}

.modal {
  display: flex; flex-direction: column;
  width: 100%; max-width: 560px; max-height: calc(100vh - 44px);
  border-radius: var(--radio);
  background: #fff;
  box-shadow: 0 24px 56px rgba(16, 24, 40, 0.26);
}
.modal.ancho { max-width: 940px; }
.modal.medio { max-width: 720px; }
.modal.angosto { max-width: 430px; }

.modal-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
  padding: 14px 18px; border-bottom: 1px solid var(--line);
}
.modal-head h2 { margin: 0; font-size: 15.5px; font-weight: 650; }
.modal-head p { margin: 2px 0 0; font-size: 11.5px; color: var(--muted); }
.modal-cerrar {
  border: 0; background: transparent; color: var(--muted);
  font-size: 21px; line-height: 1; cursor: pointer; padding: 0 3px;
}
.modal-cerrar:hover { color: var(--text); }

.modal-body { padding: 18px; overflow-y: auto; flex: 1; }
.modal-foot {
  display: flex; align-items: center; justify-content: flex-end; gap: 8px;
  padding: 13px 18px; border-top: 1px solid var(--line);
  background: #fafbfc; border-radius: 0 0 var(--radio) var(--radio);
}
.modal-foot .izquierda { margin-right: auto; }
/*
 * El pie se parte antes que desbordar. Un boton con un texto largo empujaba
 * a Cancelar fuera del cuadro en vez de bajar de linea.
 */
.modal-foot { flex-wrap: wrap; }

/* ==========================================================================
   Cambio de empresa: de cual a cual
   ========================================================================== */

/*
 * Rotulo encima y nombre debajo, no en dos columnas.
 *
 * En dos columnas el nombre se quedaba con menos de la mitad del ancho de un
 * dialogo angosto, y una razon social hondurena entera —"GRUPOLABH - PARHAM,
 * S. DE R. L. DE C. V."— se partia en tres lineas. Apilado, el nombre se
 * lleva el ancho completo, que es lo unico que hay que leer aqui.
 */
.cambio-empresa { display: flex; flex-direction: column; gap: 4px; }

.cambio-lado {
  display: flex; flex-direction: column; gap: 1px;
  padding: 9px 12px;
  border: 1px solid var(--line); border-radius: var(--radio-sm);
  background: var(--panel);
}
.cambio-lado.destacado {
  border-color: #b9d6ee; background: var(--azul-suave);
}

.cambio-rotulo {
  font-size: 10.5px; font-weight: 650; letter-spacing: .04em;
  text-transform: uppercase; color: var(--muted);
}
.cambio-nombre {
  font-size: 13.5px; font-weight: 600; color: var(--navy);
  /* Una razon social sin espacios no puede desbordar el cuadro. */
  overflow-wrap: anywhere;
}
.cambio-lado.destacado .cambio-nombre { color: #12456f; }
.cambio-rtn { font-size: 11.5px; color: var(--muted); }

.cambio-flecha {
  display: flex; justify-content: center; color: var(--muted);
}
.cambio-flecha svg { width: 15px; height: 15px; }

/* ==========================================================================
   Mis empresas y Papelera
   ========================================================================== */

/* La fila de la empresa en la que se esta trabajando ahora mismo. */
.tabla tbody tr.fila-activa { background: var(--azul-suave); }
.tabla tbody tr.fila-activa:hover { background: var(--azul-suave); }

/*
 * Los pendientes de cada empresa: dos niveles, azul y azul claro.
 *
 * Llevan fondo propio y no son distintivos de texto como los demas. El motivo
 * es de legibilidad: se pidieron en "azul y azul claro", y un azul claro como
 * color de letra a doce pixeles sobre blanco no llega al contraste minimo. Con
 * fondo, el claro se ve claro y el texto sigue siendo legible.
 *
 * Y son clases propias de esta pantalla, no una variante mas de `.etiqueta`:
 * los distintivos de estado se usan en media aplicacion y convertirlos en
 * pildoras cambiaria sitios que nadie pidio tocar.
 */
.pendiente {
  display: inline-block;
  padding: 2px 9px; margin: 1px 3px 1px 0;
  border-radius: 999px;
  font-size: 11.5px; font-weight: 600;
  white-space: nowrap;
}
/* Azul: lo que ya deberia estar hecho. */
.pendiente--alto { background: #d8e7f6; color: #10456f; }
/* Azul claro: conviene mirarlo, pero no es un atraso. */
.pendiente--bajo { background: #eef5fc; color: #2f6899; }

/*
 * Un numero suelto dentro de la barra de filtros, donde los demas huecos
 * llevan un campo. Se alinea con ellos para que la barra no quede coja.
 */
.barra-filtros .dato-suelto {
  padding: 7px 0 0;
  font-size: 18px; font-weight: 650; color: var(--navy); line-height: 1.2;
}

/* Varias etiquetas en la misma celda necesitan respirar entre lineas. */
.tabla td .etiqueta { margin: 1px 2px 1px 0; }

/* ==========================================================================
   Avisos
   ========================================================================== */

.aviso {
  display: flex; gap: 9px; align-items: flex-start;
  padding: 9px 12px; margin-bottom: 13px;
  border: 1px solid; border-radius: var(--radio-sm);
  font-size: 12.5px;
}
.aviso:last-child { margin-bottom: 0; }
.aviso strong { font-weight: 650; }
.aviso-info { background: var(--azul-suave); border-color: #b9d6ee; color: #12456f; }
.aviso-exito { background: var(--verde-suave); border-color: #b6dcc7; color: #0f5132; }
/*
 * El aviso de atencion, en azul.
 *
 * Iba en ambar y se pidio quitarlo de toda la aplicacion. Se cambia aqui, en
 * la definicion, y no en los quince sitios que lo usan: asi ninguno se queda
 * atras, y volver atras es esta misma linea.
 *
 * Conserva una diferencia con `aviso-info`: la barra de la izquierda. Sin
 * ella los dos avisos serian identicos y "esto conviene mirarlo" se leeria
 * igual que "esto es un dato". La jerarquia se mantiene sin recurrir a un
 * segundo color.
 */
.aviso-alerta {
  background: var(--azul-suave); border-color: #b9d6ee; color: #12456f;
  border-left: 3px solid var(--bright-blue);
}
.aviso-error { background: var(--rojo-suave); border-color: #f0bdb8; color: #8c1a12; }
.aviso ul { margin: 5px 0 0; padding-left: 17px; }

/* Resumen de respaldos: es un estado de trabajo, no una alerta generica. La
   jerarquia evita que el titular y la recomendacion compitan en una sola fila. */
.aviso.aviso-respaldo {
  --respaldo-acento: var(--atencion);
  --respaldo-texto-acento: #12456f;
  --respaldo-acento-suave: #e9f1fb;
  --respaldo-borde: #ead9c6;
  position: relative;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  overflow: hidden;
  min-height: 82px;
  margin-bottom: 18px;
  padding: 15px 18px;
  border: 1px solid var(--respaldo-borde);
  border-radius: 12px;
  background: linear-gradient(105deg, #fffaf5 0%, #fff 64%);
  color: var(--text);
  box-shadow: 0 8px 24px rgba(23, 57, 95, .06);
}
.aviso.aviso-respaldo::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--respaldo-acento);
}
.aviso.aviso-respaldo.respaldo-resumen--exito {
  --respaldo-acento: var(--verde);
  --respaldo-texto-acento: #12613c;
  --respaldo-acento-suave: #e8f3ed;
  --respaldo-borde: #cfe3d7;
  background: linear-gradient(105deg, #f7fbf8 0%, #fff 64%);
}
.aviso.aviso-respaldo.respaldo-resumen--info {
  --respaldo-acento: var(--bright-blue);
  --respaldo-texto-acento: #1b5d9e;
  --respaldo-acento-suave: var(--azul-suave);
  --respaldo-borde: #cddded;
  background: linear-gradient(105deg, #f7faff 0%, #fff 64%);
}
.respaldo-resumen-marca {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--respaldo-acento-suave);
  color: var(--respaldo-acento);
}
.respaldo-resumen-marca svg {
  width: 23px;
  height: 23px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.respaldo-resumen-contenido { display: block; min-width: 0; }
.respaldo-resumen-sobrelinea {
  display: block;
  margin-bottom: 2px;
  color: var(--respaldo-texto-acento);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .075em;
  line-height: 1.3;
  text-transform: uppercase;
}
.aviso .respaldo-resumen-titulo {
  display: block;
  color: var(--navy);
  font-size: 14.5px;
  font-weight: 680;
  letter-spacing: -.01em;
  line-height: 1.35;
}
.respaldo-resumen-detalle {
  display: block;
  margin-top: 3px;
  color: #5b697c;
  font-size: 12.5px;
  line-height: 1.45;
}
.respaldo-resumen-metrica {
  display: grid;
  justify-items: end;
  min-width: 92px;
  padding-left: 18px;
  border-left: 1px solid var(--respaldo-borde);
  color: var(--respaldo-acento);
}
.respaldo-resumen-metrica strong {
  font-size: 24px;
  font-variant-numeric: tabular-nums;
  font-weight: 720;
  letter-spacing: -.04em;
  line-height: 1;
}
.respaldo-resumen-metrica small {
  margin-top: 4px;
  color: #6b7585;
  font-size: 10px;
  font-weight: 650;
  letter-spacing: .05em;
  line-height: 1;
  text-transform: uppercase;
}

@media (max-width: 640px) {
  .aviso.aviso-respaldo {
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 11px 12px;
    padding: 14px 14px 14px 16px;
  }
  .respaldo-resumen-marca { width: 40px; height: 40px; border-radius: 11px; }
  .respaldo-resumen-metrica {
    grid-column: 2;
    display: flex;
    align-items: baseline;
    justify-content: flex-start;
    gap: 7px;
    min-width: 0;
    padding: 10px 0 0;
    border-top: 1px solid var(--respaldo-borde);
    border-left: 0;
  }
  .respaldo-resumen-metrica strong { font-size: 19px; }
  .respaldo-resumen-metrica small { margin-top: 0; }
}

/* La banda de "esto es una copia de revision".
   Se distingue de los demas avisos a proposito: los otros informan de algo que
   conviene mirar, este dice DONDE esta parado quien trabaja. Por eso lleva la
   franja lateral y no desaparece al cambiar de pantalla. */
.aviso-revision {
  background: #f3ecfb; border-color: #cdb4e6; color: #4a2a6b;
  border-left-width: 4px;
}
.aviso-revision strong { letter-spacing: .01em; }
/* La salida va al otro extremo de la banda: se avisa y se ofrece irse, en el
   mismo sitio. `align-self` la centra aunque el texto ocupe dos lineas. */
.aviso-revision .aviso-accion { margin-left: auto; align-self: center; white-space: nowrap; }

.toast {
  position: fixed; right: 20px; bottom: 20px; z-index: 200;
  max-width: 400px; padding: 11px 15px;
  border-radius: var(--radio-sm);
  background: var(--navy); color: #fff;
  font-size: 13px; box-shadow: 0 12px 30px rgba(16, 24, 40, 0.26);
  opacity: 0; transform: translateY(8px);
  transition: opacity .18s, transform .18s;
  pointer-events: none;
}
.toast.visible { opacity: 1; transform: translateY(0); }
.toast.error { background: var(--rojo); }
.toast.exito { background: var(--verde); }

/* ==========================================================================
   Filtros
   ========================================================================== */

.barra-filtros {
  display: grid; gap: 11px; align-items: end;
  grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
  padding: 13px 15px;
  border: 1px solid var(--line); border-radius: var(--radio);
  background: var(--panel); margin-bottom: 15px;
  box-shadow: var(--shadow-sm);
}
.barra-filtros .campo { margin-bottom: 0; }
.barra-filtros .acciones-filtro { display: flex; gap: 7px; }

/*
 * Motivos de un clic.
 *
 * Debajo del campo del motivo de una correccion. Un campo de texto vacio con
 * un minimo de cinco caracteres se rellena con "error" o "ajuste"; estos son
 * las razones de verdad, y cuestan un clic en vez de una frase.
 */
.motivos-rapidos { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.chip {
  padding: 4px 10px;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--panel); color: #55657a;
  font: inherit; font-size: 12px; line-height: 1.5;
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
}
.chip:hover { background: var(--azul-suave); border-color: var(--bright-blue); color: var(--navy); }
.chip:focus-visible { outline: 2px solid var(--azul); outline-offset: 1px; }

/* Un boton que se lee como enlace: abre una explicacion, no cambia nada. */
.enlace-sobrio {
  padding: 0; border: 0; background: none;
  color: var(--bright-blue); font: inherit; font-size: inherit;
  text-decoration: underline; cursor: pointer;
}
.enlace-sobrio:hover { color: var(--navy); }
/*
 * Dentro de un aviso hereda su color en vez de imponer el azul de enlace.
 * Cada aviso tiene su pareja de fondo y texto pensada para leerse; meter un
 * color ajeno arriesga el contraste, y de balde: el subrayado ya dice que se
 * puede pulsar.
 */
.aviso .enlace-sobrio { color: inherit; font-weight: 600; }

/* ==========================================================================
   Editor de asientos
   ========================================================================== */

.asiento-clip {
  display: inline-flex; align-items: center; gap: 3px; vertical-align: middle;
  margin-left: 7px; padding: 2px 5px; border: 1px solid transparent;
  border-radius: 5px; background: transparent; color: var(--muted);
  font: inherit; font-size: 11px; line-height: 1; cursor: pointer;
}
.asiento-clip:hover, .asiento-clip:focus-visible {
  color: var(--navy); border-color: var(--line-fuerte); background: #f7f8fa;
}
.asiento-documentos-acceso {
  display: flex; align-items: center; gap: 8px; width: 100%; min-height: 35px;
  padding: 6px 10px; border: 1px solid var(--line-fuerte);
  border-radius: var(--radio-sm); background: #fafbfc; color: #47536b;
  font: inherit; font-size: 12px; text-align: left; cursor: pointer;
}
.asiento-documentos-acceso:hover, .asiento-documentos-acceso:focus-visible {
  border-color: #9baec6; background: #f5f8fb;
}
.asiento-documentos-acceso svg { flex: none; color: var(--muted); }
.asiento-documentos-acceso-titulo { font-weight: 600; white-space: nowrap; }
.asiento-documentos-acceso-estado { color: var(--muted); white-space: nowrap; }
.asiento-documentos-acceso-accion {
  margin-left: auto; color: var(--navy); font-weight: 600; white-space: nowrap;
}
.asiento-documentos {
  border: 1px solid var(--line-fuerte); border-radius: var(--radio-sm);
  background: #fafbfc;
}
.asiento-documentos summary {
  display: flex; align-items: center; gap: 7px; padding: 8px 11px;
  color: #47536b; font-size: 12px; font-weight: 600; cursor: pointer;
  list-style: none;
}
.asiento-documentos summary::-webkit-details-marker { display: none; }
.asiento-documentos summary::after { content: '⌄'; margin-left: auto; font-size: 15px; font-weight: 400; }
.asiento-documentos[open] summary::after { transform: rotate(180deg); }
.asiento-documentos-cantidad:not(:empty) {
  padding: 1px 5px; border-radius: 8px; background: #e9edf3;
  color: #47536b; font-size: 10px;
}
.asiento-documentos-contenido { padding: 0 11px 10px; }
.asiento-documento-fila {
  display: grid;
  grid-template-columns: 116px minmax(130px, .9fr) minmax(150px, 1.2fr) 30px;
  gap: 6px; align-items: center; margin-bottom: 7px;
}
.asiento-documento-fila input, .asiento-documento-fila select {
  min-width: 0; padding: 6px 8px; font-size: 12px;
}
.asiento-documento-quitar { padding: 4px 7px; color: var(--muted); }
.asiento-documento-lectura {
  display: flex; gap: 8px; flex-wrap: wrap; align-items: baseline;
  padding: 5px 0; border-top: 1px solid #e9edf3; font-size: 12px;
}
.asiento-documento-lectura strong { color: #47536b; }
@media (max-width: 700px) {
  .asiento-documentos-acceso-estado { display: none; }
}
@media (max-width: 540px) {
  .asiento-documento-fila {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 30px;
  }
  .asiento-documento-fila select { grid-column: 1 / 3; grid-row: 1; }
  .asiento-documento-fila [data-documento-campo="referencia"] { grid-column: 1; grid-row: 2; }
  .asiento-documento-fila [data-documento-campo="detalle"] { grid-column: 2; grid-row: 2; }
  .asiento-documento-quitar { grid-column: 3; grid-row: 1 / 3; }
}

.tabla-lineas { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.tabla-lineas thead th {
  padding: 6px 8px;
  background: #f7f8fa; color: #47536b;
  font-size: 10px; font-weight: 650; letter-spacing: .4px; text-transform: uppercase;
  text-align: left; border-bottom: 1px solid var(--line-fuerte); white-space: nowrap;
}
.tabla-lineas tbody td { padding: 3px 4px; border-bottom: 1px solid #f2f4f7; vertical-align: middle; }
.tabla-lineas tbody td input, .tabla-lineas tbody td select { padding: 5px 7px; font-size: 12.5px; }
.tabla-lineas tbody td.num { width: 128px; }
.tabla-lineas tbody td.acciones { width: 1%; white-space: nowrap; text-align: right; }
.tabla-lineas tfoot td { padding: 8px; font-weight: 700; background: #f7f8fa; border-top: 2px solid var(--line-fuerte); }
.tabla-lineas tfoot td.num { text-align: right; font-variant-numeric: tabular-nums; }

.resumen-cuadre {
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  padding: 10px 14px; margin-top: 12px;
  border: 1px solid var(--line-fuerte); border-radius: var(--radio-sm);
  background: #fafbfc;
}
.resumen-cuadre .dato { display: flex; flex-direction: column; gap: 1px; }
.resumen-cuadre .dato .etiqueta {
  font-size: 10px; font-weight: 650; letter-spacing: .4px;
  text-transform: uppercase; color: var(--muted);
}
.resumen-cuadre .dato .monto {
  font-size: 15.5px; font-weight: 650; font-variant-numeric: tabular-nums;
}
.resumen-cuadre .dato.diferencia .monto { color: var(--rojo); }
.resumen-cuadre .dato.diferencia.cuadrado .monto { color: var(--verde); }
.resumen-cuadre .indicador { margin-left: auto; }

.pastilla-auxiliar {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 1px 7px; border-radius: 10px;
  background: var(--soft-blue); color: var(--navy);
  font-size: 10.5px; font-weight: 600; white-space: nowrap;
}
.pastilla-auxiliar.sin-asignar { background: #f0f2f5; color: var(--muted); }

.buscador-cuenta { position: relative; }
.buscador-cuenta .resultados {
  position: absolute; left: 0; right: 0; top: calc(100% + 2px); z-index: 25;
  max-height: 260px; overflow-y: auto;
  border: 1px solid var(--line-fuerte); border-radius: var(--radio-sm);
  background: #fff; box-shadow: 0 8px 22px rgba(31, 41, 55, 0.14);
}
.buscador-cuenta .resultados button {
  display: block; width: 100%; padding: 6px 10px;
  border: 0; background: transparent; text-align: left;
  font: inherit; font-size: 12.5px; cursor: pointer;
}
.buscador-cuenta .resultados button:hover,
.buscador-cuenta .resultados button.resaltado { background: var(--soft-blue); }
.buscador-cuenta .resultados .codigo { font-weight: 650; margin-right: 6px; color: var(--navy); }
.buscador-cuenta .resultados .marcas { float: right; font-size: 10px; color: var(--muted); }

/* Crear el que falta sin salir: va al final y se separa de los resultados,
   porque no es una coincidencia mas sino otra cosa. */
.buscador-cuenta .resultados button.crear-auxiliar {
  position: sticky; bottom: 0;
  border-top: 1px solid var(--line);
  background: var(--panel);
  color: var(--bright-blue); font-weight: 600;
}
.buscador-cuenta .resultados button.crear-auxiliar:hover { background: var(--azul-suave); }

/* El buscador de la distribucion sale del contenedor con scroll de la tabla. */
.selector-auxiliar-flotante {
  position: fixed;
  z-index: 10;
}
.selector-auxiliar-flotante .resultados {
  position: static;
  max-height: 260px;
}

/* ==========================================================================
   Estados financieros configurables
   ========================================================================== */

.arbol-estructura { font-size: 13px; }
.nodo-estructura {
  display: flex; align-items: center; gap: 9px;
  padding: 6px 10px; margin-bottom: 3px;
  border: 1px solid var(--line); border-radius: var(--radio-sm);
  background: #fff;
}
.nodo-estructura:hover { border-color: #c2ccd9; background: #fafbfd; }
.nodo-estructura .nombre { font-weight: 600; flex: 1; }
.nodo-estructura .tipo {
  font-size: 10px; text-transform: uppercase; letter-spacing: .4px;
  color: var(--muted); padding: 1px 6px; border: 1px solid var(--line);
  border-radius: 9px; background: #f7f8fa;
}
.nodo-estructura .conteo { font-size: 11px; color: var(--muted); }
.nodo-hijos { margin-left: 22px; padding-left: 11px; border-left: 2px solid var(--line); }
.nodo-estructura.tipo-titulo { background: var(--soft-blue); border-color: #cfe0ef; }
.nodo-estructura.tipo-formula { border-style: dashed; }
.nodo-estructura.inactivo { opacity: .55; }

.documento-estado-previa {
  width: 100%; padding: 20px; overflow-x: auto; background: #eef1f5; color: #111;
  font-family: "Times New Roman", Times, serif;
}
.pagina-estado-previa {
  position: relative; width: min(100%, 900px); min-width: 720px; min-height: 1040px;
  margin: 0 auto 20px; padding: 28px 30px 24px; background: #fff;
  border: 1px solid #d8dde5; box-shadow: 0 3px 12px rgba(16, 24, 40, .08);
}
.pagina-estado-previa:last-child { margin-bottom: 0; }
.tabla-estado-previa {
  width: 100%; min-width: 680px; table-layout: fixed;
  border-collapse: collapse;
}
.tabla-estado-previa col.codigo { width: 11%; }
.tabla-estado-previa col.descripcion { width: 47%; }
.tabla-estado-previa col.importe { width: 14%; }
.documento-estado-previa.sin-codigos .tabla-estado-previa col.descripcion { width: 58%; }
.tabla-estado-previa thead th {
  position: static; padding: 0; border: 0; background: transparent; color: #111;
  font-family: inherit; text-align: left; text-transform: none; letter-spacing: 0;
}
.tabla-estado-previa .cabecera-documento th { padding-bottom: 15px; }
.cabecera-estado-previa {
  position: relative; min-height: 70px; padding: 0 120px;
  text-align: center; font-weight: 400;
}
.cabecera-estado-previa .empresa {
  font-size: 13px; font-weight: 700; text-transform: uppercase; color: #111;
}
.cabecera-estado-previa .rtn,
.cabecera-estado-previa .moneda { margin-top: 1px; font-size: 9px; color: #222; }
.cabecera-estado-previa .titulo { margin-top: 8px; font-size: 13px; font-weight: 700; }
.cabecera-estado-previa .subtitulo { margin-top: 1px; font-size: 10.5px; }
.cabecera-estado-previa .meta-pagina {
  position: absolute; right: 0; top: 0; width: 116px;
  text-align: right; font-family: Arial, Helvetica, sans-serif;
  font-size: 9px; line-height: 1.4;
}
.tabla-estado-previa .columnas-estado th {
  padding: 0 4px 4px; border-bottom: 1px solid #222;
  font-size: 10px; font-weight: 700;
}
.tabla-estado-previa .columnas-estado th:nth-last-child(-n+3) {
  border-bottom-color: transparent;
}
.tabla-estado-previa tbody td {
  padding: 1.8px 4px; border: 0; background: transparent; color: #111;
  font-size: 11px; line-height: 1.2; vertical-align: bottom;
}
.tabla-estado-previa tbody tr:hover { background: transparent; }
.tabla-estado-previa td.codigo {
  white-space: nowrap; font-variant-numeric: tabular-nums;
}
.tabla-estado-previa td.descripcion {
  padding-left: calc(4px + var(--sangria-estado, 0px));
}
.tabla-estado-previa td.importe {
  text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums;
}
.tabla-estado-previa tr.separacion-antes td { padding-top: 10px; }
.tabla-estado-previa tr.rol-seccion td,
.tabla-estado-previa tr.rol-grupo td,
.tabla-estado-previa tr.rol-grupo-configurado td,
.tabla-estado-previa tr.rol-subtotal-catalogo td,
.tabla-estado-previa tr.rol-subtotal-configurado td,
.tabla-estado-previa tr.rol-resultado td { font-weight: 700; }
.tabla-estado-previa tr.rol-nota td { font-style: italic; }
.tabla-estado-previa tr.rol-subtotal-catalogo td.importe-ocupado,
.tabla-estado-previa tr.rol-subtotal-configurado td.importe-ocupado,
.tabla-estado-previa tr.rol-resultado td.importe-ocupado {
  border-top: 1px solid #222;
}
.tabla-estado-previa tr.doble-linea td.importe-ocupado {
  border-bottom: 3px double #222;
}
.documento-estado-previa .firmas-previa {
  padding: 42px 0 8px; border-top: 0;
  font-family: Arial, Helvetica, sans-serif;
}
.documento-estado-previa .pie-previa {
  padding: 14px 0 0; border-top: 0; color: #333; text-align: left;
  font-family: Arial, Helvetica, sans-serif; font-size: 9px;
}

/* ==========================================================================
   Utilidades
   ========================================================================== */

.texto-muted { color: var(--muted); }
.texto-pequeno { font-size: 11.5px; }
.texto-derecha { text-align: right; }
.texto-centro { text-align: center; }
.negativo { color: var(--rojo); }
.positivo { color: var(--verde); }
.nowrap { white-space: nowrap; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.mt-12 { margin-top: 12px; }
.mb-12 { margin-bottom: 12px; }
.mt-16 { margin-top: 16px; }
.mb-16 { margin-bottom: 16px; }
.lista-limpia { list-style: none; margin: 0; padding: 0; }
.flex { display: flex; }
.flex-entre { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.gap-8 { gap: 8px; }
.oculto { display: none !important; }

.cargando { display: grid; place-items: center; padding: 44px 18px; color: var(--muted); font-size: 13px; }
.cargando::before {
  content: ''; width: 22px; height: 22px; margin-bottom: 10px;
  border: 2.5px solid var(--line-fuerte); border-top-color: var(--bright-blue);
  border-radius: 50%; animation: girar .7s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }

.paginacion {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 12px; padding: 11px 15px;
  border-top: 1px solid var(--line); font-size: 12.5px;
}
.paginacion .controles { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }

/* ==========================================================================
   Responsive: escritorio y tableta
   ========================================================================== */

@media (max-width: 1180px) {
  .workspace { padding: 18px; }
  .buscador-global { max-width: 320px; }
  .fila-campos.cuatro { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 980px) {
  /* La barra lateral se convierte en cajon: se abre sobre el contenido. */
  .sidebar {
    position: fixed; left: 0; top: 0;
    transform: translateX(-100%);
    transition: transform .18s ease;
    box-shadow: 0 0 40px rgba(18, 52, 90, 0.18);
  }
  .sidebar.abierta { transform: none; }
  .boton-menu { display: grid; }
  .buscador-global { max-width: none; }
  .sesion-datos { display: none; }
  .page-header { flex-direction: column; align-items: stretch; }
  .page-acciones { justify-content: flex-start; flex-wrap: wrap; }
}

@media (max-width: 720px) {
  .workspace { padding: 14px; }
  .topbar { gap: 8px; padding: 10px 14px; }
  .selector-empresa { min-width: 0; flex: 1 1 auto; }
  .selector-empresa-nombre { max-width: none; }
  /* El desplegable se ancla a la izquierda del boton y no se sale por el borde. */
  .selector-empresa-panel { width: min(330px, calc(100vw - 28px)); }
  .topbar-derecha { flex: 0 0 auto; }
  .buscador-global { display: none; }
  .page-header h1 { font-size: 22px; }
  .card-head { flex-direction: column; align-items: stretch; }
  .card-head > .flex { flex-wrap: wrap; }
  #cat-buscar { width: 100% !important; flex: 1 1 100%; }
  .fila-campos, .fila-campos.dos, .fila-campos.tres, .fila-campos.cuatro {
    grid-template-columns: 1fr;
  }
  .modal-fondo { padding: 8px; }
  .modal { max-width: none; max-height: calc(100vh - 16px); }
  .modal-body { padding: 14px; }
  .modal-foot { flex-wrap: wrap; padding: 10px 14px; }
  .modal-foot .izquierda {
    width: 100%; margin-right: 0;
    display: flex; flex-wrap: wrap; gap: 6px;
  }
  table.tabla th:last-child,
  table.tabla td.acciones {
    position: sticky; right: 0;
    background: var(--panel);
    box-shadow: -5px 0 7px rgba(16, 24, 40, 0.05);
  }
}

@media (max-width: 480px) {
  .topbar { gap: 6px; padding: 8px 10px; }
  .selector-empresa-boton { padding: 6px 8px; }
  .selector-empresa .icono-empresa,
  .selector-empresa .icono-chevron,
  #btn-ayuda { display: none; }
  .topbar-derecha { gap: 2px; margin-left: 0; }
  .sesion-usuario { gap: 4px; padding-left: 5px; margin-left: 0; }
  .sesion-avatar { width: 28px; height: 28px; }
}

@media print {
  .sidebar, .topbar, .page-acciones, .barra-filtros, .toast, .menu-acciones,
  .sidebar-velo { display: none !important; }
  body { background: #fff; }
  .workspace { max-width: none; padding: 0; }
  .card { border: 0; box-shadow: none; }
}

/* ==========================================================================
   Captura rapida de asientos
   ========================================================================== */

.tecla {
  display: inline-block;
  padding: 0 4px;
  margin-left: 4px;
  border: 1px solid var(--line-fuerte);
  border-bottom-width: 2px;
  border-radius: 3px;
  background: #f7f8fa;
  color: var(--muted);
  font-size: 9.5px;
  font-weight: 600;
  font-family: inherit;
  vertical-align: middle;
}

.editor-linea {
  padding: 12px 14px;
  border: 1px solid var(--bright-blue);
  border-radius: var(--radio-sm);
  background: var(--soft-blue);
}

.editor-linea-campos {
  display: grid;
  gap: 10px;
  align-items: end;
  /* La pista de la cuenta va fuera del flujo (ver .pista-cuenta) y su alto se
     reserva aqui: asi los cinco campos quedan alineados abajo y la fila no
     salta al elegir una cuenta. */
  padding-bottom: 19px;
  grid-template-columns: minmax(220px, 2fr) minmax(160px, 1.6fr) 118px 118px auto;
}

.campo-captura label {
  display: block;
  margin-bottom: 3px;
  font-size: 10.5px;
  font-weight: 650;
  letter-spacing: .3px;
  text-transform: uppercase;
  color: var(--navy);
}

.campo-captura input { background: #fff; }
.campo-captura.campo-cuenta { position: relative; }
.campo-captura.campo-boton { display: flex; align-items: flex-end; }
.campo-captura.campo-boton .btn { width: 100%; height: 33px; }

/* Colgada bajo el campo sin ocupar altura: si sumara al alto de su columna,
   la rejilla (align-items:end) subiria el campo de cuenta respecto del resto. */
.pista-cuenta {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 16px;
  margin-top: 3px;
  font-size: 10.5px;
  color: var(--muted);
}
.pista-cuenta .naturaleza {
  display: inline-grid;
  place-items: center;
  width: 15px; height: 15px;
  border-radius: 3px;
  background: var(--navy);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
}
.pista-cuenta .marca {
  padding: 0 5px;
  border: 1px solid #b9d6ee;
  border-radius: 8px;
  background: #fff;
  color: var(--bright-blue);
  font-weight: 600;
}
.pista-cuenta .favorita-toggle {
  margin-left: auto;
  padding: 0 3px;
  border: 0;
  background: transparent;
  color: var(--atencion);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}

.editor-linea-aviso { margin: 10px 0 0; }

/* --- Resultados del buscador de cuentas --- */

.buscador-cuenta .resultados .encabezado-lista {
  padding: 5px 10px;
  background: #f7f8fa;
  border-bottom: 1px solid var(--line);
  font-size: 9.5px;
  font-weight: 650;
  letter-spacing: .4px;
  text-transform: uppercase;
  color: var(--muted);
}

.buscador-cuenta .resultados .sin-resultados {
  padding: 9px 10px;
  font-size: 12px;
  color: var(--muted);
}

.buscador-cuenta .resultados button {
  display: grid;
  grid-template-columns: minmax(78px, auto) 1fr auto;
  gap: 8px;
  align-items: center;
}
.buscador-cuenta .resultados .nombre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.buscador-cuenta .resultados .marcas {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  float: none;
  font-size: 9.5px;
}
.buscador-cuenta .resultados .marcas .marca {
  padding: 0 4px;
  border: 1px solid var(--line-fuerte);
  border-radius: 7px;
  color: var(--muted);
}
.buscador-cuenta .resultados .marcas .favorita { color: var(--atencion); }
.buscador-cuenta .resultados .marcas .naturaleza {
  display: inline-grid;
  place-items: center;
  width: 14px; height: 14px;
  border-radius: 3px;
  background: #eef1f5;
  color: var(--navy);
  font-weight: 700;
}

/* --- Catalogo completo (F2) --- */

.catalogo-completo { max-height: 420px; overflow-y: auto; }
.catalogo-completo table { width: 100%; }
.catalogo-completo tbody tr { cursor: pointer; }
.catalogo-completo tbody tr.resaltado { background: var(--soft-blue); }

@media (max-width: 1080px) {
  .editor-linea-campos { grid-template-columns: minmax(190px, 1.6fr) minmax(140px, 1.2fr) 104px 104px auto; }
}

@media (max-width: 860px) {
  .editor-linea-campos { grid-template-columns: 1fr 1fr; padding-bottom: 0; }
  .pista-cuenta { position: static; }
  .campo-captura.campo-cuenta,
  .campo-captura.campo-descripcion { grid-column: 1 / -1; }
  .campo-captura.campo-boton { grid-column: 1 / -1; }
}

/* Menu de comandos rapidos de la descripcion ("/b", "/f 15", ...) */
.menu-comandos button {
  grid-template-columns: minmax(92px, auto) 1fr;
  align-items: baseline;
}
.menu-comandos .codigo {
  font-family: var(--mono, ui-monospace, "Cascadia Mono", Consolas, monospace);
  font-size: 11.5px;
  color: var(--navy);
}
.menu-comandos .nombre { color: var(--muted); font-size: 12px; }
.menu-comandos .nombre strong { color: var(--texto); font-weight: 650; }

/* Propuesta de repetir la composicion de un asiento anterior */
.sugerencia-asiento {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; margin-top: 8px;
}
.sugerencia-asiento > .contenido { flex: 1 1 100%; min-width: 0; }
.sugerencia-asiento .acciones {
  display: flex; gap: 8px; flex-shrink: 0; flex-wrap: wrap;
  justify-content: flex-end; margin-left: auto;
}
.sugerencia-composicion {
  margin-top: 8px; max-height: 220px; overflow: auto;
  border: 1px solid rgba(18, 69, 111, .2); border-radius: var(--radio-sm);
  background: #fff;
}
.sugerencia-composicion table { min-width: 520px; }
.sugerencia-composicion table.tabla thead th {
  position: static; padding: 5px 8px; background: #edf5fb; color: #315675;
}
.sugerencia-composicion table.tabla tbody td { padding: 5px 8px; }
.sugerencia-composicion .sugerencia-importe {
  width: 112px; min-width: 88px; padding: 5px 7px; font-size: 12px;
}
.sugerencia-composicion .cuenta-nombre { margin-left: 6px; color: var(--text); }
.sugerencia-composicion .detalle-linea {
  display: block; margin-top: 1px; font-size: 10.5px; color: var(--muted);
}

/* ==========================================================================
   Panel de inicio
   ========================================================================== */

/* Pastilla de fecha y periodo del encabezado */
.pastilla-periodo {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 16px;
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--panel); box-shadow: var(--shadow-sm);
}
.pastilla-periodo > svg { width: 19px; height: 19px; color: var(--bright-blue); flex-shrink: 0; }
.pastilla-periodo .texto { line-height: 1.35; }
.pastilla-periodo strong { display: block; font-size: 13.5px; font-weight: 600; color: var(--navy); }
.pastilla-periodo small { font-size: 11.5px; color: var(--muted); }

/* --- Tarjetas de indicador --- */

.panel-indicadores {
  display: grid; gap: 14px; margin-bottom: 14px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.indicador {
  display: flex; align-items: center; gap: 12px;
  padding: 7px 12px; margin: 0;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 14px; box-shadow: var(--shadow-sm);
}
.indicador-icono {
  display: grid; place-items: center; flex-shrink: 0;
  width: 32px; height: 32px; border-radius: 9px;
  background: var(--azul-suave); color: var(--bright-blue);
}
.indicador-icono svg { width: 17px; height: 17px; }
.indicador.verde  .indicador-icono { background: var(--verde-suave); color: var(--verde); }
.indicador.rojo   .indicador-icono { background: var(--rojo-suave); color: var(--rojo); }

/* Datos a la izquierda, variacion a la derecha, como en la referencia. */
.indicador-cuerpo {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 10px; flex: 1; min-width: 0;
}
.indicador-datos { min-width: 0; }
.indicador-titulo {
  display: flex; align-items: center; gap: 4px;
  font-size: 12px; font-weight: 500; color: #55657a; line-height: 1.25;
}
.indicador-ayuda {
  display: inline-flex; align-items: center; color: #8090a4; cursor: help;
}
.indicador-ayuda svg { width: 13px; height: 13px; }
.indicador-valor {
  margin-top: 1px; font-size: 21px; font-weight: 500; line-height: 1.2;
  letter-spacing: -.2px; color: var(--navy);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.indicador.verde .indicador-valor { color: var(--verde); }
.indicador.rojo  .indicador-valor { color: var(--rojo); }
.indicador-moneda { margin-left: 1px; font-size: 11px; font-weight: 400; color: var(--muted); }

.indicador-delta { text-align: right; flex-shrink: 0; padding-top: 1px; }
.indicador-variacion {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 12.5px; font-weight: 600;
}
.indicador-variacion svg { width: 14px; height: 14px; }
.indicador-variacion.sube  { color: var(--verde); }
.indicador-variacion.baja  { color: var(--rojo); }
.indicador-variacion.plana { color: var(--muted); }
.indicador-delta small { display: block; margin-top: 1px; font-size: 10.5px; color: var(--muted); white-space: nowrap; }

/* --- Rejilla principal --- */

/* Las dos tarjetas de cada fila empiezan y terminan a la misma altura. */
.panel-rejilla {
  display: grid; gap: 14px; margin-bottom: 14px;
  grid-template-columns: minmax(0, 1.6fr) minmax(320px, 1fr);
  align-items: stretch;
}
.panel-rejilla > .card {
  margin-bottom: 0;
  display: flex; flex-direction: column;
}
.panel-rejilla > .card > .card-body { flex: 1; padding: 14px 16px; }
.panel-rejilla > .card > .card-body.sin-padding { padding: 0; }
.panel-rejilla .card-head { padding: 12px 16px; }

/* Encabezado de tarjeta con icono redondeado, como en la referencia. */
.card-head .titulo-icono { display: flex; align-items: center; gap: 11px; }
.card-head .titulo-icono .marca {
  display: grid; place-items: center; flex-shrink: 0;
  width: 32px; height: 32px; border-radius: 9px;
  background: var(--azul-suave); color: var(--bright-blue);
}
.card-head .titulo-icono .marca svg { width: 18px; height: 18px; }
.card-head .titulo-icono h2 { font-size: 15.5px; font-weight: 650; color: var(--navy); }
.card-head .titulo-icono p { margin: 1px 0 0; font-size: 12px; color: var(--muted); }

.selector-rango {
  width: auto; padding: 7px 30px 7px 12px;
  border: 1px solid var(--line-fuerte); border-radius: 9px;
  background: #fff
    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")
    no-repeat right 10px center;
  font-size: 12.5px; font-weight: 550; color: var(--navy);
  appearance: none; cursor: pointer;
}

/* --- Grafica de ingresos contra gastos --- */

.grafica-barras { padding: 4px 0 0; }
.contenedor-grafica { display: flex; flex-direction: column; justify-content: center; height: 100%; }
.grafica-barras svg { display: block; width: 100%; height: auto; }
.grafica-barras .rejilla { stroke: #edf0f4; stroke-width: 1; }
.grafica-barras .eje-texto { fill: var(--muted); font-size: 9.5px; }
.grafica-barras .barra-ingreso { fill: #a8c8e8; }
.grafica-barras .barra-gasto   { fill: #40556e; }
.grafica-barras .columna:hover .barra-ingreso { fill: #86b2dd; }
.grafica-barras .columna:hover .barra-gasto   { fill: #2c3e53; }

.grafica-leyenda {
  display: flex; justify-content: center; gap: 26px;
  padding: 12px 0 2px; font-size: 12px; color: #55657a;
}
.grafica-leyenda span { display: inline-flex; align-items: center; gap: 7px; }
.grafica-leyenda i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.grafica-leyenda .marca-ingreso { background: #a8c8e8; }
.grafica-leyenda .marca-gasto   { background: #40556e; }

.grafica-vacia {
  display: grid; place-items: center; gap: 7px;
  padding: 36px 20px; text-align: center; color: var(--muted);
}
.grafica-vacia strong { color: var(--navy); font-size: 14px; }
.grafica-vacia p { margin: 0; font-size: 12.5px; max-width: 340px; }

/* Globo con el detalle del mes */
.contenedor-grafica { position: relative; }
.grafica-globo {
  position: absolute; z-index: 5; pointer-events: none;
  padding: 10px 13px;
  border: 1px solid var(--line-fuerte); border-radius: 10px;
  background: #fff; box-shadow: 0 8px 22px rgba(31, 41, 55, 0.14);
  font-size: 12px; white-space: nowrap;
}
.grafica-globo strong { display: block; margin-bottom: 5px; font-size: 12.5px; color: var(--navy); }
.grafica-globo span { display: flex; align-items: center; gap: 7px; color: var(--text); }
.grafica-globo i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }

/* --- Acciones rapidas --- */

.acciones-rapidas {
  display: grid; gap: 10px;
  grid-template-columns: 1fr 1fr;
  /* Las dos filas se reparten el alto para acompanar a la grafica. */
  grid-template-rows: 1fr 1fr;
  height: 100%;
}

.accion-rapida {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 12px; width: 100%;
  border: 1px solid var(--line); border-radius: 11px;
  background: #fff; text-align: left; font: inherit;
  cursor: pointer;
  transition: border-color .12s, box-shadow .12s, background .12s;
}
.accion-rapida:hover {
  border-color: #bcd8f0; background: #fbfdff;
  box-shadow: 0 4px 14px rgba(31, 95, 153, 0.09);
}
.accion-rapida:disabled { opacity: .5; cursor: not-allowed; }
.accion-rapida:disabled:hover { border-color: var(--line); background: #fff; box-shadow: none; }
.accion-rapida .icono-accion {
  display: grid; place-items: center; flex-shrink: 0;
  width: 34px; height: 34px; border-radius: 10px;
  background: var(--azul-suave); color: var(--bright-blue);
}
.accion-rapida .icono-accion svg { width: 18px; height: 18px; }
.accion-rapida .texto { flex: 1; min-width: 0; line-height: 1.35; }
.accion-rapida .texto strong { display: block; font-size: 12.5px; font-weight: 600; color: var(--navy); }
.accion-rapida .texto small { font-size: 11px; color: var(--muted); }
.accion-rapida .accion-lateral {
  display: inline-flex; align-items: center; gap: 7px; flex-shrink: 0;
}
.accion-rapida .accion-lateral .tecla { margin-left: 0; white-space: nowrap; }
.accion-rapida .flecha { color: #97a4b5; flex-shrink: 0; align-self: center; }
.accion-rapida .flecha svg { width: 15px; height: 15px; display: block; }

/* --- Estado del periodo --- */

.periodo-actual {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 10px 13px;
  border: 1px solid var(--line); border-radius: 11px;
  background: #fbfcfe; margin-bottom: 6px;
}
.periodo-actual .etiqueta-periodo {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; color: var(--muted);
}
.periodo-actual .punto {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--verde); display: inline-block; flex-shrink: 0;
}
.periodo-actual .punto.cerrado { background: var(--muted); }
.periodo-actual strong {
  display: block; margin-top: 3px;
  font-size: 19px; font-weight: 700; letter-spacing: -.4px;
  color: var(--navy); text-transform: capitalize;
}
.periodo-actual small { font-size: 12px; color: var(--muted); }

.periodo-lista { display: flex; flex-direction: column; }
.periodo-lista li {
  display: grid; grid-template-columns: auto 1fr auto auto;
  align-items: center; gap: 10px;
  padding: 7px 2px; font-size: 12.5px;
  border-bottom: 1px solid var(--line);
}
.periodo-lista li:last-child { border-bottom: 0; }
.periodo-lista .punto {
  width: 8px; height: 8px; border-radius: 50%;
  background: #d4dae2; flex-shrink: 0;
}
.periodo-lista .nombre { color: #55657a; }
.periodo-lista .valor { color: var(--navy); font-weight: 600; text-transform: capitalize; white-space: nowrap; }

.nota-periodo {
  display: flex; align-items: flex-start; gap: 10px;
  margin-top: 7px; padding: 9px 11px;
  border-radius: 10px; background: var(--soft-blue);
  font-size: 11.5px; line-height: 1.4; color: #46586e;
}
.tabla-ultimos { table-layout: fixed; width: 100%; }
.tabla-ultimos th, .tabla-ultimos td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Esta tabla vive en media tarjeta del panel de inicio, asi que se aprieta
   mas que el resto: tipografia y relleno menores para entrar entera y no
   sacar una barra de desplazamiento horizontal. */
.tabla-ultimos th, .tabla-ultimos td { padding-left: 8px; padding-right: 8px; }
.tabla-ultimos tbody td { padding-top: 6px; padding-bottom: 6px; font-size: 11.5px; }
.tabla-ultimos thead th { padding-top: 7px; padding-bottom: 7px; font-size: 9.5px; letter-spacing: .2px; }

/* Debajo de este ancho la tabla se desplaza en vez de aplastar las columnas. */
.tabla-ultimos { min-width: 640px; }

/* Las columnas de dato fijo llevan el ancho justo que necesitan; la
   descripcion y la cuenta se reparten el resto y son las unicas que se
   recortan (con el texto completo en el tooltip). */
.tabla-ultimos .col-fecha  { width: 84px; }
.tabla-ultimos .col-numero { width: 116px; }
.tabla-ultimos .col-monto  { width: 94px; }
.tabla-ultimos .col-estado { width: 108px; }
.tabla-ultimos .col-desc,
.tabla-ultimos .col-cuenta { width: auto; }

/* El panel de inicio usa la misma etiqueta de texto plano que el resto. */

.nota-periodo svg { width: 17px; height: 17px; color: var(--bright-blue); flex-shrink: 0; margin-top: 1px; }

/* Las cuatro tarjetas se mantienen en una fila mientras quepan; para eso se
   compactan antes de partirse en dos columnas. Por debajo de este ancho cada
   tarjeta baja de ~240px y el titulo ya no cabe junto a la variacion, asi que
   la variacion pasa debajo en vez de partir el titulo en dos lineas. */
@media (max-width: 1600px) {
  .indicador { padding: 9px 13px; gap: 10px; }
  .indicador-icono { width: 32px; height: 32px; border-radius: 9px; }
  .indicador-icono svg { width: 16px; height: 16px; }
  .indicador-cuerpo { flex-direction: column; gap: 0; }
  .indicador-valor { font-size: 19px; letter-spacing: -.2px; }
  .indicador-delta {
    display: flex; align-items: center; gap: 8px;
    text-align: left; padding-top: 3px;
  }
  .indicador-delta small { margin-top: 0; }
}

@media (max-width: 1080px) {
  .panel-indicadores { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* La tarjeta de la izquierda se queda sin ancho util antes de que la ventana
   sea estrecha: con la rejilla a dos columnas, a 1600px la tabla de ultimos
   asientos ya no cabe entera y sacaba una barra de desplazamiento. Apilar
   antes le devuelve el ancho completo. */
@media (max-width: 1600px) {
  .panel-rejilla { grid-template-columns: 1fr; }
}
/* En columna estrecha las cuatro acciones no caben de a dos sin partir el texto. */
@media (max-width: 1340px) {
  .acciones-rapidas { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .panel-indicadores { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Avisos y bitacora
   ========================================================================== */

/* Pestanas de la seccion */
.pestanas {
  display: flex; gap: 4px; flex-wrap: wrap;
  margin-bottom: 16px; padding: 4px;
  border: 1px solid var(--line); border-radius: 11px;
  background: var(--panel);
}
.pestana {
  padding: 8px 15px;
  border: 0; border-radius: 8px;
  background: transparent; color: #55657a;
  font: inherit; font-size: 13px; font-weight: 550;
  cursor: pointer;
  transition: background .12s, color .12s;
}
.pestana:hover { background: var(--soft-blue); color: var(--navy); }
.pestana.activa { background: var(--azul-suave); color: var(--navy); font-weight: 650; }

/* Resumen por nivel */
.resumen-avisos {
  display: grid; gap: 14px; margin-bottom: 16px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.contador-aviso {
  display: flex; align-items: baseline; gap: 10px;
  padding: 14px 17px;
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--panel); box-shadow: var(--shadow-sm);
}
.contador-aviso strong { font-size: 24px; font-weight: 700; letter-spacing: -.6px; }
.contador-aviso span { font-size: 12.5px; color: var(--muted); }
.contador-aviso.error strong  { color: var(--rojo); }
.contador-aviso.alerta strong { color: var(--atencion); }
.contador-aviso.info strong   { color: var(--bright-blue); }
/* Sin nada que contar el bloque se apaga en vez de desaparecer: la posicion
   de cada nivel se mantiene estable entre visitas. */
.contador-aviso.vacio strong { color: var(--line-fuerte); }

/* Tarjeta de aviso */
.tarjeta-aviso { border-left: 3px solid var(--line-fuerte); }
.tarjeta-aviso.error  { border-left-color: var(--rojo); }
.tarjeta-aviso.alerta { border-left-color: var(--atencion); }
.tarjeta-aviso.info   { border-left-color: var(--bright-blue); }

.aviso-cabecera { display: flex; align-items: flex-start; gap: 13px; }
.aviso-marca {
  display: grid; place-items: center; flex-shrink: 0;
  width: 38px; height: 38px; border-radius: 10px;
  background: var(--soft-blue); color: var(--muted);
}
.tarjeta-aviso.error  .aviso-marca { background: var(--rojo-suave); color: var(--rojo); }
.tarjeta-aviso.alerta .aviso-marca { background: var(--atencion-suave); color: var(--atencion); }
.tarjeta-aviso.info   .aviso-marca { background: var(--azul-suave); color: var(--bright-blue); }

.aviso-texto { flex: 1; min-width: 0; }
.aviso-nivel {
  font-size: 10px; font-weight: 700; letter-spacing: .5px;
  text-transform: uppercase; color: var(--muted);
}
.aviso-texto h3 { margin: 2px 0 0; font-size: 15px; font-weight: 650; color: var(--navy); }
.aviso-texto p { margin: 4px 0 0; font-size: 12.5px; color: #55657a; max-width: 78ch; }
.aviso-cabecera .btn { flex-shrink: 0; }

/* Detalle del aviso: los asientos o periodos que lo provocan */
.lista-elementos { margin-top: 13px; border-top: 1px solid var(--line); }
.lista-elementos li {
  display: grid; align-items: center; gap: 12px;
  grid-template-columns: minmax(110px, auto) 1fr auto auto;
  padding: 8px 2px;
  border-bottom: 1px solid #f2f4f7;
  font-size: 12.5px;
}
.lista-elementos li:last-child { border-bottom: 0; }
.lista-elementos li:hover { background: #fafbfd; }
.elemento-etiqueta { font-weight: 600; color: var(--navy); text-transform: capitalize; }
.elemento-detalle {
  color: var(--muted); min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.elemento-extra { color: var(--muted); white-space: nowrap; }
.elemento-monto { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Nada pendiente */
.sin-avisos { display: grid; place-items: center; gap: 8px; padding: 44px 20px; text-align: center; }
.sin-avisos .marca-ok {
  display: grid; place-items: center;
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--verde-suave); color: var(--verde);
}
.sin-avisos strong { font-size: 15px; color: var(--navy); }
.sin-avisos p { margin: 0; font-size: 12.5px; color: var(--muted); max-width: 420px; }

@media (max-width: 760px) {
  .resumen-avisos { grid-template-columns: 1fr; }
  .aviso-cabecera { flex-wrap: wrap; }
  .lista-elementos li { grid-template-columns: 1fr auto; }
  .elemento-detalle { grid-column: 1 / -1; }
}

/* ==========================================================================
   Editor de plantillas de asiento
   ========================================================================== */

.texto-verde { color: var(--verde); }

/* Los buscadores dentro de la tabla no llevan el margen de un campo suelto. */
#pl-tabla .selector-auxiliar { margin: 0; }
#pl-tabla input { font-size: 12.5px; padding: 5px 8px; }
#pl-tabla td { vertical-align: middle; }

/* Auxiliar que la cuenta elegida exige: se marca sin bloquear nada, porque en
   la plantilla puede quedarse en blanco y elegirse al capturar el asiento. */
.celda-exigida .selector-auxiliar input {
  border-color: #d8b57e;
  background: #fffdf8;
}
.celda-exigida .selector-auxiliar input::placeholder { color: var(--atencion); }

/* Cierre del documento en la vista previa: firmas, pie y sello de emision.
   Antes solo existian en el papel, asi que quitar "Pie de pagina" o "Fecha y
   hora" no cambiaba nada en pantalla y la casilla parecia rota. */
.firmas-previa {
  display: flex;
  justify-content: space-around;
  gap: 24px;
  padding: 34px 20px 10px;
  border-top: 1px solid var(--borde);
}
.firma-previa { flex: 1; max-width: 240px; text-align: center; }
.firma-previa .linea { border-top: 1px solid var(--navy); margin-bottom: 5px; }
.firma-previa .nombre { font-size: 12px; font-weight: 650; color: var(--navy); }
.firma-previa .cargo { font-size: 11px; color: var(--muted); }

.pie-previa {
  padding: 12px 20px 16px;
  border-top: 1px solid var(--borde);
  font-size: 11.5px;
  color: var(--muted);
  text-align: center;
}

/* ==========================================================================
   Sucursales del tercero
   ========================================================================== */

/* Casillas de clasificacion: un tercero puede ser varias cosas a la vez, y en
   fila se ve que no son excluyentes. Un desplegable sugeriria lo contrario. */
.grupo-casillas {
  display: flex; flex-wrap: wrap; gap: 8px 18px;
  padding: 7px 0 2px;
}
.grupo-casillas .check { margin: 0; font-size: 12.5px; }

.bloque-sucursales {
  margin-top: 16px; padding-top: 13px;
  border-top: 1px solid var(--line);
}
.bloque-sucursales .flex-entre { margin-bottom: 10px; }

.sucursal-fila {
  margin-bottom: 10px; padding: 11px 13px;
  border: 1px solid var(--line); border-radius: var(--radio-sm);
  background: #fafbfc;
}
.sucursal-fila:last-child { margin-bottom: 0; }

.sucursal-cabecera {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 9px;
}
.sucursal-cabecera strong { flex: 1; font-size: 12.5px; }
.sucursal-cabecera .check { margin: 0; font-size: 12px; white-space: nowrap; }

/* En angosto cada campo pasa a su propia linea: una sucursal tiene siete
   controles y en tres columnas no cabe ninguno legible. */
@media (max-width: 720px) {
  .sucursal-cabecera { flex-wrap: wrap; }
  .bloque-sucursales .fila-campos,
  .bloque-sucursales .fila-campos.dos,
  .bloque-sucursales .fila-campos.tres { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Exportar e importar auxiliares
   ========================================================================== */

/* Encabezado de un bloque dentro de una tarjeta. La tarjeta ya tiene su h2;
   esto separa sus partes sin competir con el. */
.titulo-bloque {
  margin: 0 0 9px;
  font-size: 12px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--muted);
}

hr.separador {
  margin: 20px 0 16px;
  border: 0; border-top: 1px solid var(--line);
}

.barra-intercambio { flex-wrap: wrap; }

.mt-8 { margin-top: 8px; }

/* La fila de una hoja con errores se marca en la tabla resumen: el numero rojo
   solo, en una columna de la derecha, se pasa por alto con facilidad. */
.fila-con-error > td { background: var(--rojo-suave); }

/* El detalle de cambios va plegado: interesa antes de importar, pero no debe
   empujar la tabla resumen fuera de la pantalla. */
details > summary {
  cursor: pointer; padding: 7px 0;
  font-size: 12.5px; font-weight: 600; color: var(--navy);
}
details > summary:hover { text-decoration: underline; }

@media (max-width: 720px) {
  .barra-intercambio .btn { flex: 1 1 100%; }
}

/* El nombre de una columna dentro de un aviso: se lee como lo que es, algo
   que hay que escribir tal cual en la hoja de calculo. */
.aviso code {
  padding: 1px 5px;
  border: 1px solid var(--line); border-radius: 4px;
  background: #fff;
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: .92em;
}

/* El numero dentro de la pestana: dice cuantos hay sin tener que entrar. */
.conteo-pestana {
  display: inline-block; margin-left: 7px; padding: 1px 7px;
  border-radius: 999px;
  background: rgba(0, 0, 0, .06); color: inherit;
  font-size: 11.5px; font-weight: 600;
}
.pestana.activa .conteo-pestana { background: rgba(255, 255, 255, .7); }

/* ---------------------------------------------------------------------------
   Panel de ayuda
   El buscador se queda pegado arriba mientras la lista se desplaza: quien
   escribe una palabra y no encuentra lo que busca tiene que poder corregirla
   sin volver a subir.
   --------------------------------------------------------------------------- */
.ayuda-buscador {
  position: sticky; top: -18px; z-index: 2;
  margin: -18px -18px 12px; padding: 14px 18px 12px;
  background: #fff; border-bottom: 1px solid var(--line);
}
.ayuda-buscador input {
  width: 100%; padding: 9px 12px; font-size: 13.5px;
  border: 1px solid var(--line); border-radius: var(--radio-sm);
  background: #fbfcfd; color: var(--navy);
}
.ayuda-buscador input:focus {
  outline: none; border-color: var(--azul); background: #fff;
  box-shadow: 0 0 0 3px rgba(31, 111, 176, .12);
}

.ayuda-conteo { margin: 0 0 10px; font-size: 11.5px; color: var(--muted); }

.ayuda-grupo { margin-bottom: 18px; }
.ayuda-grupo:last-child { margin-bottom: 0; }
.ayuda-grupo > h3 {
  margin: 0 0 8px; font-size: 11px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
}

.ayuda-tema {
  padding: 11px 13px; margin-bottom: 8px;
  border: 1px solid var(--line); border-radius: var(--radio-sm);
  background: #fcfdfe;
}
.ayuda-tema:last-child { margin-bottom: 0; }
.ayuda-tema > h4 {
  margin: 0 0 6px; font-size: 13.5px; font-weight: 650; color: var(--navy);
}
.ayuda-tema p { margin: 0 0 7px; font-size: 12.5px; line-height: 1.55; color: #48566a; }
.ayuda-tema p:last-child { margin-bottom: 0; }
.ayuda-tema strong { font-weight: 650; color: var(--navy); }

.ayuda-seccion {
  display: inline-block; margin-bottom: 5px;
  font-size: 10.5px; font-weight: 650; letter-spacing: .04em;
  text-transform: uppercase; color: var(--naranja-titulo);
}

.lista-ayuda { margin: 0 0 7px; padding-left: 18px; }
.lista-ayuda:last-child { margin-bottom: 0; }
.lista-ayuda li { margin-bottom: 5px; font-size: 12.5px; line-height: 1.55; color: #48566a; }
.lista-ayuda li:last-child { margin-bottom: 0; }

.ayuda-vacio { padding: 26px 16px; text-align: center; color: var(--muted); }
.ayuda-vacio strong { display: block; margin-bottom: 6px; color: var(--navy); font-size: 13.5px; }
.ayuda-vacio p { margin: 0; font-size: 12.5px; }

/* ---------------------------------------------------------------------------
   Navegacion de Configuracion, en dos niveles
   Trece secciones en una fila se parten en dos lineas y dejan de leerse como
   una lista. Arriba las familias, en forma de pestana; debajo, solo las
   secciones de la familia abierta.
   --------------------------------------------------------------------------- */
.config-nav { padding: 0 !important; }

.config-grupos {
  display: flex; gap: 2px; flex-wrap: wrap;
  padding: 0 10px; border-bottom: 1px solid var(--line);
}
.config-grupo {
  appearance: none; background: none; border: 0; cursor: pointer;
  padding: 11px 13px 9px; font: inherit; font-size: 13px; font-weight: 550;
  color: var(--muted); border-bottom: 2px solid transparent;
  margin-bottom: -1px; white-space: nowrap;
}
.config-grupo:hover { color: var(--navy); }
.config-grupo.activo { color: var(--navy); border-bottom-color: var(--naranja-titulo); }
.config-grupo:focus-visible { outline: 2px solid var(--azul); outline-offset: -2px; }

.config-secciones {
  display: flex; gap: 7px; flex-wrap: wrap;
  padding: 10px 12px;
}