/* =====================================================================
   gonzaga-finanzas — Hoja de estilos principal
   Colegio Gonzaga · Maracaibo, Venezuela
   ---------------------------------------------------------------------
   REGLA: todos los colores y tipografías salen de las variables de
   :root. Si ves un color suelto fuera de este bloque, está mal.
   ===================================================================== */

:root {
  /* ============ 🎨 COLORES ============ */
  --color-primary: #123F85;        /* Azul profundo - principal */
  --color-primary-dark: #0C2F66;   /* Versión oscura del primario */
  --color-accent: #C11734;         /* Rojo - acentos */
  --color-accent-light: #E84A66;   /* Rojo claro */
  --color-bg: #FAF7F2;             /* Crema - fondo general */
  --color-bg-alt: #F2EDE3;         /* Crema alternativo */
  --color-text: #2A2A2A;           /* Texto principal */
  --color-text-soft: #5A5A5A;      /* Texto secundario */
  --color-border: #E5DED1;         /* Bordes suaves */
  --color-success: #4A8B6F;        /* Verde para éxito */
  --color-error: #B85450;          /* Rojo para errores */

  /* ============ 📝 TIPOGRAFÍAS ============ */
  --font-display: 'Montserrat', -apple-system, sans-serif;
  --font-body: 'Montserrat', -apple-system, sans-serif;
}

/* ---------------------------------------------------------------------
   Variables de apoyo (espaciado, radios, sombras, medidas)
   --------------------------------------------------------------------- */
:root {
  --esp-1: 4px;
  --esp-2: 8px;
  --esp-3: 12px;
  --esp-4: 16px;
  --esp-5: 24px;
  --esp-6: 32px;
  --esp-7: 48px;

  --radio: 14px;          /* tarjetas */
  --radio-chico: 8px;     /* botones e inputs */

  --sombra: 0 1px 2px rgba(0, 0, 0, .04), 0 4px 16px rgba(0, 0, 0, .06);
  --sombra-alta: 0 2px 6px rgba(0, 0, 0, .06), 0 12px 32px rgba(0, 0, 0, .10);

  --ancho-sidebar: 244px;
  --alto-topbar: 62px;
  --ancho-contenido: 1240px;

  /* Superficie de las tarjetas. Única excepción a la paleta: blanco puro. */
  --superficie: #FFFFFF;
}

/* ---------------------------------------------------------------------
   ============ 📝 CAMBIAR TIPOGRAFÍA AQUÍ ============
   La familia se define arriba en --font-display y --font-body.
   Si cambias de fuente, acuérdate de cambiar también el <link> de
   Google Fonts que está en includes/header.php e index.php.

   >>> CAMBIAR LOGO: reemplaza /assets/img/logo.png <<<
   >>> CAMBIAR FAVICON: /assets/img/favicon.ico <<<
   --------------------------------------------------------------------- */

/* =====================================================================
   1. BASE
   ===================================================================== */

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

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

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--color-text);
  background-color: var(--color-bg);
  /* >>> CAMBIAR FONDO DECORATIVO AQUÍ <<< */
  background-image:
    radial-gradient(circle at 10% -8%, rgba(18, 63, 133, .07), transparent 42%),
    radial-gradient(circle at 92% 2%, rgba(193, 23, 52, .05), transparent 38%);
  background-attachment: fixed;
  background-repeat: no-repeat;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--color-text);
  margin: 0 0 var(--esp-3);
  line-height: 1.25;
}

h1 { font-size: 1.75rem; font-weight: 700; }
h2 { font-size: 1.35rem; font-weight: 600; }
h3 { font-size: 1.10rem; font-weight: 600; }

p { margin: 0 0 var(--esp-3); }

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color .18s ease;
}
a:hover { color: var(--color-primary-dark); text-decoration: underline; }

hr {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: var(--esp-5) 0;
}

small, .texto-suave {
  color: var(--color-text-soft);
  font-size: 0.85rem;
}

/* Cifras de dinero: columnas siempre alineadas */
.cifra, .tabla-datos td.monto, .tabla-datos th.monto {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* Foco visible en TODO elemento interactivo (accesibilidad) */
:focus-visible {
  outline: 3px solid var(--color-accent-light);
  outline-offset: 2px;
  border-radius: var(--radio-chico);
}

/* =====================================================================
   2. LAYOUT
   ===================================================================== */

.app { min-height: 100vh; }

/* --- Barra superior --- */
.topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--alto-topbar);
  z-index: 40;
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  padding: 0 var(--esp-4);
  background: var(--superficie);
  border-bottom: 1px solid var(--color-border);
}

.topbar__marca {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  min-width: 0;
}

/* >>> CAMBIAR LOGO: reemplaza /assets/img/logo.png <<< */
.topbar__logo {
  width: 38px;
  height: 38px;
  object-fit: contain;
  flex-shrink: 0;
}

.topbar__titulo {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  color: var(--color-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.topbar__acciones {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--esp-2);
}

.topbar__usuario {
  font-size: 0.85rem;
  color: var(--color-text-soft);
  white-space: nowrap;
}

/* Botón de icono (modo discreto, menú móvil, salir) */
.btn-icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--esp-2);
  height: 38px;
  min-width: 38px;
  padding: 0 var(--esp-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radio-chico);
  background: transparent;
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 0.85rem;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.btn-icono:hover { background: var(--color-bg-alt); }
.btn-icono svg { width: 18px; height: 18px; flex-shrink: 0; }

/* Modo discreto encendido */
.btn-icono.activo {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--superficie);
}

.solo-movil { display: none; }
.solo-escritorio { display: inline; }

/* --- Menú lateral --- */
.sidebar {
  position: fixed;
  top: var(--alto-topbar);
  bottom: 0;
  left: 0;
  width: var(--ancho-sidebar);
  z-index: 30;
  padding: var(--esp-4) var(--esp-3);
  background: var(--superficie);
  border-right: 1px solid var(--color-border);
  overflow-y: auto;
}

.sidebar__grupo {
  margin: var(--esp-4) 0 var(--esp-2);
  padding-left: var(--esp-3);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--color-text-soft);
}
.sidebar__grupo:first-child { margin-top: 0; }

/* Contador rojo del menú (movimientos esperando departamento).
   Va con --color-accent, que es el rojo institucional: no se inventa
   ningún color nuevo. */
.sidebar__contador {
  margin-left: auto;
  flex-shrink: 0;
  min-width: 20px;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--color-accent);
  color: #FFF;                       /* texto sobre el rojo institucional */
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.sidebar__item {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  padding: 10px var(--esp-3);
  margin-bottom: 2px;
  border-radius: var(--radio-chico);
  border-left: 3px solid transparent;
  color: var(--color-text);
  font-size: 0.9rem;
  font-weight: 500;
  transition: background .18s ease, color .18s ease;
}
.sidebar__item:hover {
  background: var(--color-bg-alt);
  text-decoration: none;
}
.sidebar__item.activo {
  background: var(--color-bg-alt);
  border-left-color: var(--color-accent);
  color: var(--color-primary);
  font-weight: 600;
}
.sidebar__item svg { width: 19px; height: 19px; flex-shrink: 0; }

/* --- Contenido --- */
.contenido {
  padding: calc(var(--alto-topbar) + var(--esp-5)) var(--esp-5) var(--esp-7);
  margin-left: var(--ancho-sidebar);
  max-width: var(--ancho-contenido);
}

.encabezado-pagina {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--esp-4);
  flex-wrap: wrap;
  margin-bottom: var(--esp-5);
}
.encabezado-pagina p { margin: 0; color: var(--color-text-soft); }

/* Capa oscura del menú en móvil */
.velo {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 29;
  background: rgba(0, 0, 0, .35);
}
.velo.visible { display: block; }

/* =====================================================================
   3. TARJETAS
   ===================================================================== */

.tarjeta {
  background: var(--superficie);
  border: 1px solid var(--color-border);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: var(--esp-5);
  margin-bottom: var(--esp-5);
}

.tarjeta__titulo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-3);
  margin-bottom: var(--esp-4);
  padding-bottom: var(--esp-3);
  border-bottom: 1px solid var(--color-border);
}
.tarjeta__titulo h2, .tarjeta__titulo h3 { margin: 0; }

/* Tarjeta de indicador (KPI) */
.tarjeta-metrica {
  background: var(--superficie);
  border: 1px solid var(--color-border);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: var(--esp-4) var(--esp-5);
}
.tarjeta-metrica__etiqueta {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--color-text-soft);
  margin-bottom: var(--esp-2);
}
.tarjeta-metrica__valor {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--color-primary);
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}
.tarjeta-metrica__secundario {
  font-size: 0.9rem;
  color: var(--color-text-soft);
  font-variant-numeric: tabular-nums;
}
.tarjeta-metrica--exito .tarjeta-metrica__valor { color: var(--color-success); }
.tarjeta-metrica--error .tarjeta-metrica__valor { color: var(--color-error); }

/* Rejillas */
.rejilla { display: grid; gap: var(--esp-4); margin-bottom: var(--esp-5); }
.rejilla-2 { grid-template-columns: repeat(2, 1fr); }
.rejilla-3 { grid-template-columns: repeat(3, 1fr); }
.rejilla-4 { grid-template-columns: repeat(4, 1fr); }

/* Rejillas de dos columnas desiguales.
   OJO: esto ANTES iba con style="grid-template-columns:..." en el HTML, y
   por especificidad ganaba a la regla de móvil: a 360 px la columna fija
   de 320-340 px no cabía y desbordaba la página. Como clase, la media
   query de abajo sí puede anularla. */
.rejilla-lateral   { grid-template-columns: 340px 1fr; align-items: start; }
.rejilla-principal { grid-template-columns: 1fr 1.4fr; align-items: start; }

/* =====================================================================
   4. BOTONES
   ===================================================================== */

.btn-primario,
.btn-secundario,
.btn-peligro {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--esp-2);
  /* Mismo alto que los inputs, para que un botón junto a un campo
     (los "Filtrar" / "Limpiar" de las barras de filtros) quede alineado */
  min-height: 42px;
  padding: 10px 18px;
  border-radius: var(--radio-chico);
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}

/* Botón pequeño de las filas de una tabla. Antes cada listado lo hacía
   con style= en línea y cada uno tenía un tamaño distinto. */
.btn-fila {
  min-height: 0;
  padding: 5px 12px;
  font-size: 0.8rem;
}
.btn-primario:hover,
.btn-secundario:hover,
.btn-peligro:hover { text-decoration: none; }

.btn-primario:active,
.btn-secundario:active,
.btn-peligro:active { transform: translateY(1px); }

/* ============ 🎨 CAMBIAR COLOR PRINCIPAL AQUÍ ============ */
.btn-primario {
  background: var(--color-primary);
  border: 1px solid var(--color-primary);
  color: var(--superficie);
}
.btn-primario:hover {
  background: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  color: var(--superficie);
}

.btn-secundario {
  background: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-text);
}
.btn-secundario:hover { background: var(--color-bg-alt); color: var(--color-text); }

.btn-peligro {
  background: var(--color-accent);
  border: 1px solid var(--color-accent);
  color: var(--superficie);
}
.btn-peligro:hover {
  background: var(--color-accent-light);
  border-color: var(--color-accent-light);
  color: var(--superficie);
}

.btn-primario[disabled],
.btn-secundario[disabled],
.btn-peligro[disabled] { opacity: .55; cursor: not-allowed; }

.btn-bloque { width: 100%; }

.btn-enlace {
  background: none;
  border: none;
  padding: 0;
  color: var(--color-primary);
  font-family: var(--font-body);
  font-size: 0.85rem;
  text-decoration: underline;
  cursor: pointer;
}
.btn-enlace:hover { color: var(--color-primary-dark); }

/* =====================================================================
   5. FORMULARIOS
   ===================================================================== */

.formulario { display: grid; gap: var(--esp-4); }

/* ---------------------------------------------------------------------
   Grupo de campos con subtítulo.
   Ordena un formulario largo en bloques con sentido (datos, importe,
   clasificación) en vez de dejar una lista corrida de campos donde el
   monto acaba lejos de la moneda y de la tasa.

   Se usa así:

     <fieldset class="grupo-campos">
       <legend class="grupo-campos__titulo">Importe</legend>
       <div class="rejilla rejilla-3"> … </div>
     </fieldset>
   --------------------------------------------------------------------- */
.grupo-campos {
  border: none;
  margin: 0;
  padding: 0;
  /* Sin esto, una rejilla dentro de un <fieldset> desborda en vez de
     encogerse: el fieldset trae un min-width automático del navegador. */
  min-width: 0;
}

/* La línea separadora va ENTRE grupos, no encima del primero */
.grupo-campos + .grupo-campos {
  padding-top: var(--esp-4);
  border-top: 1px solid var(--color-border);
}

.grupo-campos__titulo {
  padding: 0;
  margin-bottom: var(--esp-3);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--color-text-soft);
}

/* La separación entre bloques la pone el grupo, no la rejilla */
.grupo-campos .rejilla { margin-bottom: 0; }

.campo { display: flex; flex-direction: column; gap: 6px; }

.campo label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text);
}

.campo input[type="text"],
.campo input[type="password"],
.campo input[type="number"],
.campo input[type="date"],
.campo input[type="email"],
.campo input[type="file"],
.campo select,
.campo textarea {
  width: 100%;
  /* Altura idéntica en inputs, selects y date-pickers. Sin esto, Safari y
     Chrome le dan al type="date" y al select un alto propio distinto y las
     filas de un formulario quedan desalineadas. */
  min-height: 42px;
  padding: 10px var(--esp-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radio-chico);
  background: var(--superficie);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 0.92rem;
  line-height: 1.2;
  transition: border-color .18s ease, box-shadow .18s ease;
}

/* El navegador le pone su propia apariencia al select: se normaliza y se
   dibuja la flecha a mano, para que mida igual que un input de texto. */
.campo select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: var(--esp-6);
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235A5A5A' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--esp-3) center;
  background-size: 16px;
}

.campo input[type="date"] { appearance: none; -webkit-appearance: none; }
.campo input[type="file"] { padding: 9px var(--esp-3); }

.campo input:focus,
.campo select:focus,
.campo textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(18, 63, 133, .12);
}

.campo input[readonly],
.campo input[disabled],
.campo select[disabled] {
  background: var(--color-bg-alt);
  color: var(--color-text-soft);
  cursor: not-allowed;
}

.campo textarea { min-height: 84px; resize: vertical; }

.campo .ayuda { font-size: 0.8rem; color: var(--color-text-soft); }

.campo.tiene-error input,
.campo.tiene-error select,
.campo.tiene-error textarea { border-color: var(--color-error); }
.campo.tiene-error .ayuda { color: var(--color-error); }

/* ---------------------------------------------------------------------
   CAMPO DE DINERO — componente único de todo el sistema
   ---------------------------------------------------------------------
   El símbolo (Bs o $) va anclado a los BORDES DEL PROPIO INPUT
   (top/bottom: 1px), no a una distancia fija desde abajo como antes.
   Así queda siempre alineado, dé igual el alto del input, que la
   etiqueta ocupe dos líneas o que haya texto de ayuda debajo.

   Se usa así en TODOS los formularios con monto:

     <div class="campo">
       <label for="x">Monto</label>
       <div class="input-moneda">
         <span class="input-moneda__simbolo" id="simbolo-monto">Bs</span>
         <input type="text" inputmode="decimal" id="x" name="x">
       </div>
       <span class="ayuda">…</span>
     </div>
   --------------------------------------------------------------------- */

.input-moneda {
  position: relative;
  display: block;
  width: 100%;
}

.input-moneda__simbolo {
  position: absolute;
  left: 1px;
  top: 1px;
  bottom: 1px;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  padding: 0 10px;
  background: var(--color-bg-alt);
  border-right: 1px solid var(--color-border);
  border-radius: calc(var(--radio-chico) - 1px) 0 0 calc(var(--radio-chico) - 1px);
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1;
  color: var(--color-text-soft);
  pointer-events: none;   /* el clic pasa al input */
  user-select: none;
  transition: border-color .18s ease, color .18s ease;
}

.input-moneda input {
  width: 100%;
  /* Hueco para el símbolo: no se le monta encima ni con cifras largas */
  padding-left: 56px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* El símbolo acompaña al input en todos sus estados.
   Con :focus-within el separador sigue al borde del input en vez de
   quedarse gris mientras el resto del campo se pone en color primario. */
.input-moneda:focus-within .input-moneda__simbolo {
  border-right-color: var(--color-primary);
  color: var(--color-primary);
}

.campo.tiene-error .input-moneda__simbolo {
  border-right-color: var(--color-error);
  color: var(--color-error);
}

/* El error manda sobre el foco: un campo mal rellenado sigue en rojo
   aunque el cursor esté dentro. */
.campo.tiene-error .input-moneda:focus-within .input-moneda__simbolo {
  border-right-color: var(--color-error);
  color: var(--color-error);
}
.input-moneda input[readonly],
.input-moneda input[disabled] { background: var(--color-bg-alt); }

/* Casilla de verificación */
.campo-check {
  display: flex;
  align-items: center;
  gap: var(--esp-2);
}
.campo-check input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--color-primary); }
.campo-check label { font-weight: 500; }

.formulario__acciones {
  display: flex;
  gap: var(--esp-3);
  flex-wrap: wrap;
  padding-top: var(--esp-2);
}

/* Barra de filtros */
.filtros {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: var(--esp-3);
  align-items: end;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radio);
  padding: var(--esp-4);
  margin-bottom: var(--esp-4);
}

/* =====================================================================
   6. TABLAS
   ===================================================================== */

/* ---------------------------------------------------------------------
   Envoltura de tabla.
   El scroll horizontal ocurre AQUÍ DENTRO, en la tarjeta, nunca en la
   página entera. Sin esto, una tabla ancha empuja el layout y aparece
   la barra de scroll del navegador abajo del todo.
   --------------------------------------------------------------------- */
.tabla-envoltura {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;   /* inercia en iOS */
}

.tabla-datos {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.tabla-datos thead th {
  background: var(--color-bg-alt);
  padding: var(--esp-3);
  text-align: left;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--color-text-soft);
  border-bottom: 1px solid var(--color-border);
  white-space: nowrap;
}

.tabla-datos tbody td {
  padding: var(--esp-3);
  border-bottom: 1px solid var(--color-border);
  vertical-align: middle;
}

.tabla-datos tbody tr { transition: background .18s ease; }
.tabla-datos tbody tr:hover { background: var(--color-bg); }

.tabla-datos .monto,
.tabla-datos th.monto {
  text-align: right;
  white-space: nowrap;                 /* la cifra nunca se parte en dos líneas */
  font-variant-numeric: tabular-nums;  /* todos los dígitos ocupan lo mismo */
  font-feature-settings: "tnum";
  width: 1%;                           /* se encoge a su contenido */
}

/* ---------------------------------------------------------------------
   Anchos de columna: fecha y acciones se encogen a su contenido, la
   descripción es la que absorbe el espacio sobrante.
   --------------------------------------------------------------------- */
.tabla-datos .col-fecha,
.tabla-datos th.col-fecha,
.tabla-datos .col-acciones,
.tabla-datos th.col-acciones {
  width: 1%;
  white-space: nowrap;
}

.tabla-datos .col-desc { min-width: 200px; }

/* Texto largo que se corta con puntos suspensivos.
   Va en un <span> DENTRO de la celda, no en la celda entera, para no
   romper las etiquetas y los saltos de línea que llevan algunas filas.
   Siempre con title= para poder leerlo completo al pasar por encima. */
.texto-truncado {
  display: block;
  max-width: 34ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tabla-datos tfoot td {
  padding: var(--esp-3);
  font-weight: 700;
  background: var(--color-bg-alt);
  border-top: 2px solid var(--color-border);
}

.tabla-datos .fila-anulada { opacity: .55; text-decoration: line-through; }

/* Fila «Sin asignar» del reporte por departamento.
   Ese dinero ya salió del banco y cuenta en los totales, pero nadie ha
   dicho todavía a quién se le imputa: se resalta con el rojo institucional
   para que no pase inadvertido en la tabla. */
.tabla-datos .fila-sin-asignar {
  background: color-mix(in srgb, var(--color-accent) 7%, transparent);
  box-shadow: inset 3px 0 0 var(--color-accent);
}
.tabla-datos .fila-sin-asignar td:first-child { font-weight: 700; }
.tabla-datos .fila-sin-asignar:hover {
  background: color-mix(in srgb, var(--color-accent) 11%, transparent);
}

/* Respaldo para navegadores sin color-mix (Safari viejo, cPanel antiguo):
   el degradado no se aplica y queda el fondo crema alternativo, que sigue
   distinguiendo la fila. */
@supports not (background: color-mix(in srgb, red 5%, transparent)) {
  .tabla-datos .fila-sin-asignar { background: var(--color-bg-alt); }
}

.tabla-acciones { display: flex; gap: var(--esp-2); justify-content: flex-end; }

/* Paginación */
.paginacion {
  display: flex;
  align-items: center;
  gap: var(--esp-2);
  flex-wrap: wrap;
  margin-top: var(--esp-4);
}
.paginacion a, .paginacion span {
  padding: 6px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radio-chico);
  font-size: 0.85rem;
  color: var(--color-text);
}
.paginacion a:hover { background: var(--color-bg-alt); text-decoration: none; }
.paginacion .actual {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--superficie);
  font-weight: 600;
}

/* =====================================================================
   7. BADGES
   ===================================================================== */

.badge-exito, .badge-error, .badge-info, .badge-proyecto, .badge-neutro {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}

.badge-exito {
  background: rgba(74, 139, 111, .12);
  color: var(--color-success);
}
.badge-error {
  background: rgba(184, 84, 80, .12);
  color: var(--color-error);
}
.badge-info {
  background: rgba(18, 63, 133, .10);
  color: var(--color-primary);
}
.badge-proyecto {
  background: rgba(193, 23, 52, .10);
  color: var(--color-accent);
}
.badge-neutro {
  background: var(--color-bg-alt);
  color: var(--color-text-soft);
}

/* =====================================================================
   8. ALERTAS Y AVISOS
   ===================================================================== */

.alerta-exito, .alerta-error, .alerta-aviso {
  display: flex;
  align-items: flex-start;
  gap: var(--esp-3);
  padding: var(--esp-3) var(--esp-4);
  border-radius: var(--radio-chico);
  border-left: 4px solid;
  margin-bottom: var(--esp-4);
  font-size: 0.9rem;
}
.alerta-exito {
  background: rgba(74, 139, 111, .09);
  border-left-color: var(--color-success);
  color: var(--color-success);
}
.alerta-error {
  background: rgba(184, 84, 80, .09);
  border-left-color: var(--color-error);
  color: var(--color-error);
}
.alerta-aviso {
  background: rgba(18, 63, 133, .07);
  border-left-color: var(--color-primary);
  color: var(--color-primary);
}
.alerta-exito ul, .alerta-error ul, .alerta-aviso ul {
  margin: 0; padding-left: var(--esp-4);
}

/* Aviso grande: por ejemplo, "no hay tasa BCV cargada hoy" */
.aviso-grande {
  display: flex;
  align-items: center;
  gap: var(--esp-4);
  padding: var(--esp-5);
  border: 2px dashed var(--color-accent);
  border-radius: var(--radio);
  background: rgba(193, 23, 52, .05);
  margin-bottom: var(--esp-5);
}
.aviso-grande__icono { color: var(--color-accent); flex-shrink: 0; }
.aviso-grande__icono svg { width: 34px; height: 34px; }
.aviso-grande h3 { color: var(--color-accent); margin-bottom: 4px; }
.aviso-grande p { margin: 0; color: var(--color-text-soft); }
.aviso-grande .btn-primario { margin-left: auto; flex-shrink: 0; }

/* =====================================================================
   9. ESTADO VACÍO
   ===================================================================== */

.estado-vacio {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--esp-3);
  padding: var(--esp-7) var(--esp-4);
  color: var(--color-text-soft);
}
.estado-vacio__icono {
  width: 48px;
  height: 48px;
  color: var(--color-border);
}
.estado-vacio p { margin: 0; max-width: 42ch; }

/* =====================================================================
   10. PÁGINAS CENTRADAS (login y error)
   ===================================================================== */

.pagina-centrada {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: var(--esp-5);
}

.tarjeta-login, .tarjeta-error {
  width: 100%;
  max-width: 420px;
  box-shadow: var(--sombra-alta);
  margin: 0;
}

.login__marca {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--esp-2);
  margin-bottom: var(--esp-5);
}
/* >>> CAMBIAR LOGO: reemplaza /assets/img/logo.png <<< */
.login__logo { width: 78px; height: 78px; object-fit: contain; }
.login__institucion {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--color-primary);
  margin: 0;
}
.login__sistema { font-size: 0.88rem; color: var(--color-text-soft); margin: 0; }

.tarjeta-error { text-align: center; }
.error-codigo {
  font-family: var(--font-display);
  font-size: 3.4rem;
  font-weight: 700;
  color: var(--color-accent);
  margin: 0;
  line-height: 1;
}
.error-titulo { margin: var(--esp-3) 0 var(--esp-2); }
.error-mensaje { color: var(--color-text-soft); }
.error-acciones {
  display: flex;
  gap: var(--esp-3);
  justify-content: center;
  flex-wrap: wrap;
  margin-top: var(--esp-4);
}

/* Pie de página */
.pie {
  text-align: center;
  font-size: 0.8rem;
  color: var(--color-text-soft);
  padding: var(--esp-5) 0 0;
  margin-top: var(--esp-6);
  border-top: 1px solid var(--color-border);
}

/* ---------------------------------------------------------------------
   El ojo del modo discreto, en el pie.
   Va deliberadamente apagado y sin rótulo: no debe llamar la atención
   ni delatar que hay módulos ocultos. Tampoco cambia de color al
   activarse; lo único que cambia es el dibujo del ojo.
   --------------------------------------------------------------------- */
.ojo-pie {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  margin-top: var(--esp-3);
  padding: 0;
  border: none;
  background: none;
  color: var(--color-border);
  cursor: pointer;
  opacity: .55;
  transition: opacity .18s ease, color .18s ease;
}
.ojo-pie svg { width: 15px; height: 15px; }
.ojo-pie:hover { opacity: 1; color: var(--color-text-soft); }
.ojo-pie:focus-visible { opacity: 1; color: var(--color-text-soft); }

/* =====================================================================
   11. ANIMACIONES
   ===================================================================== */

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

.anim-fadeup { animation: fadeUp 250ms ease both; }

/* Aparición escalonada: 60 ms por elemento (se pasa --i en línea) */
.anim-lista > * {
  animation: fadeUp 250ms ease both;
  animation-delay: calc(var(--i, 0) * 60ms);
}

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

/* =====================================================================
   12. RESPONSIVE
   ===================================================================== */

/* --- Tablet: hasta 900px --- */
@media (max-width: 900px) {
  .rejilla-4 { grid-template-columns: repeat(2, 1fr); }
  .rejilla-3 { grid-template-columns: repeat(2, 1fr); }

  /* La columna fija de 340 px ya no cabe cómoda: se apila */
  .rejilla-lateral,
  .rejilla-principal { grid-template-columns: 1fr; }

  .sidebar {
    transform: translateX(-100%);
    transition: transform .22s ease;
    box-shadow: var(--sombra-alta);
  }
  .sidebar.abierto { transform: none; }

  .contenido { margin-left: 0; }

  .solo-movil { display: inline-flex; }
}

/* --- Móvil: hasta 600px. SIN scroll horizontal, nunca. --- */
@media (max-width: 600px) {
  body { font-size: 0.92rem; }

  h1 { font-size: 1.4rem; }

  .contenido {
    padding: calc(var(--alto-topbar) + var(--esp-4)) var(--esp-3) var(--esp-6);
  }

  .tarjeta, .tarjeta-metrica { padding: var(--esp-4); }

  .rejilla-2, .rejilla-3, .rejilla-4,
  .rejilla-lateral, .rejilla-principal { grid-template-columns: 1fr; }

  .topbar__usuario { display: none; }
  .topbar__titulo { font-size: 0.92rem; }
  .solo-escritorio { display: none; }

  .filtros { grid-template-columns: 1fr; }

  .formulario__acciones { flex-direction: column; }
  .formulario__acciones .btn-primario,
  .formulario__acciones .btn-secundario,
  .formulario__acciones .btn-peligro { width: 100%; }

  /* Las tablas se convierten en tarjetas apiladas */
  .tabla-datos thead { display: none; }

  .tabla-datos, .tabla-datos tbody, .tabla-datos tr, .tabla-datos td { display: block; width: 100%; }

  .tabla-datos tr {
    background: var(--superficie);
    border: 1px solid var(--color-border);
    border-radius: var(--radio);
    padding: var(--esp-3);
    margin-bottom: var(--esp-3);
    box-shadow: var(--sombra);
  }

  .tabla-datos tbody td {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--esp-3);
    padding: 6px 0;
    border: none;
    text-align: right;
  }

  .tabla-datos tbody td::before {
    content: attr(data-label);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--color-text-soft);
    text-align: left;
    flex-shrink: 0;
  }

  /* Celdas vacías (la de acciones en las filas de totales, por ejemplo):
     en modo tarjeta dejarían un hueco con relleno y sin contenido.
     Se aplica a tbody Y a tfoot, no solo a tbody. */
  .tabla-datos td:empty { display: none; }

  /* En modo tarjeta las celdas son bloques a lo ancho: hay que anular los
     anchos de columna del escritorio, que si no las dejarían aplastadas. */
  .tabla-datos .col-fecha,
  .tabla-datos .col-acciones,
  .tabla-datos .col-desc,
  .tabla-datos .monto,
  .tabla-datos td.monto {
    width: auto;
    white-space: normal;
  }

  /* El texto ya no hace falta cortarlo: en la tarjeta cabe entero */
  .texto-truncado {
    max-width: 100%;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    text-align: right;
  }

  /* La tarjeta nunca necesita scroll horizontal */
  .tabla-envoltura { overflow-x: visible; }

  .tabla-datos tfoot { display: block; }
  .tabla-datos tfoot tr {
    background: var(--color-bg-alt);
    border-color: var(--color-border);
  }
  .tabla-datos tfoot td { display: flex; justify-content: space-between; }

  .tabla-acciones { justify-content: flex-end; }

  .aviso-grande { flex-direction: column; align-items: flex-start; }
  .aviso-grande .btn-primario { margin-left: 0; width: 100%; }
}

/* =====================================================================
   13. PESTAÑAS (módulo de catálogos)
   ===================================================================== */

.pestanas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-1);
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--esp-5);
}

.pestana {
  padding: 10px var(--esp-4);
  border: 1px solid transparent;
  border-bottom: none;
  border-radius: var(--radio-chico) var(--radio-chico) 0 0;
  color: var(--color-text-soft);
  font-size: 0.88rem;
  font-weight: 600;
  white-space: nowrap;
  transition: background .18s ease, color .18s ease;
}
.pestana:hover { background: var(--color-bg-alt); color: var(--color-text); text-decoration: none; }
.pestana.activa {
  background: var(--superficie);
  border-color: var(--color-border);
  color: var(--color-primary);
  box-shadow: inset 0 3px 0 var(--color-accent);
}

/* =====================================================================
   14. VENTANA MODAL (anulación, confirmaciones con motivo)
   ===================================================================== */

.modal {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--esp-4);
  background: rgba(0, 0, 0, .45);
}
.modal[hidden] { display: none; }

.modal__caja {
  width: 100%;
  max-width: 460px;
  margin: 0;
  box-shadow: var(--sombra-alta);
  animation: fadeUp 250ms ease both;
}

/* =====================================================================
   15. GRÁFICO DE BARRAS EN CSS PURO
   (respaldo por si Chart.js no carga desde el CDN)
   ===================================================================== */

.grafico-barras { display: grid; gap: var(--esp-3); }

.barra-fila {
  display: grid;
  grid-template-columns: minmax(110px, 1fr) 3fr auto;
  align-items: center;
  gap: var(--esp-3);
  font-size: 0.85rem;
}
.barra-pista {
  height: 22px;
  background: var(--color-bg-alt);
  border-radius: 999px;
  overflow: hidden;
}
.barra-valor {
  height: 100%;
  background: var(--color-primary);
  border-radius: 999px;
  transition: width .4s ease;
}
.barra-fila:nth-child(even) .barra-valor { background: var(--color-primary-dark); }
.barra-cifra { font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 600; }

@media (max-width: 600px) {
  .barra-fila { grid-template-columns: 1fr; gap: var(--esp-1); }
}

/* Utilidades */
.oculto { display: none !important; }
.sr-solo {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.texto-derecha { text-align: right; }
.texto-exito { color: var(--color-success); }
.texto-error { color: var(--color-error); }
.sin-margen { margin: 0; }

/* =====================================================================
   16. BARRA DE PASOS (asistente de importación)
   ===================================================================== */

.pasos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-2);
  list-style: none;
  margin: 0 0 var(--esp-5);
  padding: 0;
}

.paso {
  display: flex;
  align-items: center;
  gap: var(--esp-2);
  padding: 8px var(--esp-4);
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text-soft);
}

.paso__numero {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--color-border);
  color: var(--color-text);
  font-size: 0.78rem;
  font-weight: 700;
}

/* El paso en el que estás */
.paso.activo {
  background: var(--superficie);
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.paso.activo .paso__numero {
  background: var(--color-primary);
  color: #FFF;                       /* texto sobre el azul institucional */
}

/* Un paso ya superado */
.paso.hecho { color: var(--color-text); }
.paso.hecho .paso__numero {
  background: var(--color-success);
  color: #FFF;
}

@media (max-width: 600px) {
  .pasos { flex-direction: column; }
  .paso { width: 100%; }
}

/* =====================================================================
   FICHA DE DATOS Y VISTA PREVIA
   ---------------------------------------------------------------------
   Se usan en Presupuestos: la ficha resume una solicitud (etiqueta a la
   izquierda, valor a la derecha) y la vista previa enseña el comprobante
   antes de enviarlo.
   ===================================================================== */

.ficha {
  margin: 0;
  border-top: 1px solid var(--color-border);
}

.ficha__linea {
  display: flex;
  justify-content: space-between;
  gap: var(--esp-4);
  padding: var(--esp-3) 0;
  border-bottom: 1px solid var(--color-border);
}

.ficha__linea dt {
  color: var(--color-text-soft);
  font-size: .85rem;
  font-weight: 500;
}

.ficha__linea dd {
  margin: 0;
  text-align: right;
  font-weight: 600;
  font-variant-numeric: tabular-nums;   /* las cifras alinean */
}

/* Texto largo: la descripción de la solicitud y la respuesta */
.ficha__texto {
  margin: 0;
  padding: var(--esp-3);
  background: var(--color-bg-alt);
  border-radius: var(--radio-chico);
  white-space: pre-wrap;      /* respeta los saltos de línea que escribió el usuario */
  overflow-wrap: anywhere;    /* una palabra kilométrica no rompe la caja */
}

/* --- La tarjeta de vista previa, al lado del formulario --- */
.vista-previa {
  position: sticky;
  top: var(--esp-5);
  border-color: var(--color-primary);
}

.vista-previa__caja {
  display: flex;
  flex-direction: column;
  gap: var(--esp-2);
  align-items: center;
  justify-content: center;
  min-height: 120px;
  padding: var(--esp-3);
  border: 1px dashed var(--color-border);
  border-radius: var(--radio-chico);
  text-align: center;
}

.vista-previa__imagen {
  display: block;
  width: 100%;
  max-width: 100%;
  max-height: 320px;
  object-fit: contain;
  border-radius: var(--radio-chico);
  border: 1px solid var(--color-border);
}

@media (max-width: 900px) {
  /* En pantalla chica la ficha va debajo del formulario, sin pegarse arriba */
  .vista-previa { position: static; }
}

/* La misma rejilla de dos columnas, pero con la columna estrecha a la
   DERECHA: formulario ancho + ficha de apoyo al lado. */
.rejilla-lateral--derecha { grid-template-columns: 1fr 360px; }

@media (max-width: 900px) {
  .rejilla-lateral--derecha { grid-template-columns: 1fr; }
}