/* ==========================================================================
   Simplificado SIMPLE - Sistema de diseno
   Minimalista, profesional, sin dependencias externas.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  --fondo: #f5f6f8;
  --superficie: #ffffff;
  --superficie-alt: #fafbfc;
  --borde: #e6e8ec;
  --borde-fuerte: #d5d9e0;

  --texto: #131a26;
  --texto-suave: #5c6779;
  --texto-tenue: #8b95a5;

  --primario: #4f46e5;
  --primario-oscuro: #4338ca;
  --primario-suave: #eef2ff;

  --exito: #0f7a58;
  --exito-suave: #e7f6f0;
  --aviso: #b45309;
  --aviso-suave: #fdf5e6;
  --peligro: #b42318;
  --peligro-suave: #fdeceb;
  --info: #1d4ed8;
  --info-suave: #eaf1fe;

  --lateral: #0c1322;
  --lateral-suave: #16203a;
  --lateral-texto: #97a3b6;
  --lateral-texto-activo: #ffffff;

  --r-xs: 6px;
  --r-sm: 8px;
  --r: 12px;
  --r-lg: 16px;

  --sombra-1: 0 1px 2px rgba(16, 24, 40, 0.05);
  --sombra-2: 0 4px 16px rgba(16, 24, 40, 0.08);
  --sombra-3: 0 12px 32px rgba(16, 24, 40, 0.14);

  --ancho-lateral: 185px;
  --transicion: 150ms ease;
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  line-height: 1.55;
  color: var(--texto);
  background: var(--fondo);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--texto);
}

h1 { font-size: 22px; }
h2 { font-size: 17px; }
h3 { font-size: 15px; }

p { margin: 0 0 12px; }
p:last-child { margin-bottom: 0; }

a {
  color: var(--primario);
  text-decoration: none;
  transition: color var(--transicion);
}
a:hover { color: var(--primario-oscuro); }

code {
  font-family: "SFMono-Regular", ui-monospace, Menlo, Consolas, monospace;
  font-size: 12.5px;
  background: var(--superficie-alt);
  border: 1px solid var(--borde);
  border-radius: var(--r-xs);
  padding: 1px 6px;
}

svg.icono {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  vertical-align: -2px;
}

[hidden] {
  display: none !important;
}

::selection {
  background: var(--primario);
  color: #fff;
}

/* --------------------------------------------------------------------------
   3. Estructura de la aplicacion
   -------------------------------------------------------------------------- */
.app {
  display: flex;
  min-height: 100vh;
}

.lateral {
  width: var(--ancho-lateral);
  flex: 0 0 var(--ancho-lateral);
  background: var(--lateral);
  color: var(--lateral-texto);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
}

.lateral__marca {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 20px 16px 18px;
}

.lateral__logo {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border-radius: 9px;
  background: linear-gradient(135deg, #6366f1, #4f46e5 55%, #7c3aed);
  display: grid;
  place-items: center;
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.02em;
}

.lateral__nombre {
  font-size: 14.5px;
  font-weight: 600;
  color: #fff;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.lateral__lema {
  font-size: 11px;
  color: var(--lateral-texto);
  letter-spacing: 0.02em;
}

.lateral__seccion {
  padding: 16px 16px 7px;
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: #5d6b82;
}

.nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0 10px;
}

.nav__item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 10px;
  border-radius: var(--r-sm);
  color: var(--lateral-texto);
  font-size: 13px;
  font-weight: 500;
  transition: background var(--transicion), color var(--transicion);
}

.nav__item svg {
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
  stroke-width: 1.8;
}

.nav__item:hover {
  background: var(--lateral-suave);
  color: #fff;
}

.nav__item.activo {
  background: var(--lateral-suave);
  color: var(--lateral-texto-activo);
  box-shadow: inset 2px 0 0 var(--primario);
}

.nav__contador {
  margin-left: auto;
  font-size: 11px;
  font-weight: 600;
  padding: 1px 7px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.08);
  color: #cbd5e1;
}

.nav__item--boton {
  width: 100%;
  border: 0;
  background: transparent;
  font-family: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}

.lateral__pie {
  margin-top: auto;
  padding: 14px 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  font-size: 11.5px;
  color: #5d6b82;
}

.lateral__usuario {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 13px 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.lateral__usuario .avatar {
  background: var(--lateral-suave);
  color: #cbd5e1;
}

.lateral__usuario-datos {
  min-width: 0;
}

.lateral__usuario-nombre {
  font-size: 13px;
  font-weight: 600;
  color: #e8edf5;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lateral__usuario-correo {
  font-size: 11.5px;
  color: #64748b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

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

.contenido {
  padding: 26px 24px 56px;
  max-width: 1400px;
  width: 100%;
  margin: 0 auto;
}

/* --------------------------------------------------------------------------
   4. Cabecera de pagina
   -------------------------------------------------------------------------- */
.pagina-cabecera {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.pagina-cabecera__titulo {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.pagina-cabecera__acciones {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.migas {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  color: var(--texto-tenue);
  margin-bottom: 12px;
}

.migas a { color: var(--texto-suave); }
.migas a:hover { color: var(--primario); }
.migas span { color: var(--borde-fuerte); }

.subtitulo {
  font-size: 13.5px;
  color: var(--texto-suave);
}

.barra-movil {
  display: none;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--superficie);
  border-bottom: 1px solid var(--borde);
  position: sticky;
  top: 0;
  z-index: 40;
}

/* --------------------------------------------------------------------------
   5. Rejillas
   -------------------------------------------------------------------------- */
.rejilla {
  display: grid;
  gap: 16px;
}

.rejilla--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rejilla--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rejilla--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.rejilla--lateral { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.rejilla--detalle { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); }

.apilar {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* --------------------------------------------------------------------------
   6. Tarjetas
   -------------------------------------------------------------------------- */
.tarjeta {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--r);
  box-shadow: var(--sombra-1);
  overflow: hidden;
}

.tarjeta__cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 15px 20px;
  border-bottom: 1px solid var(--borde);
  flex-wrap: wrap;
}

.tarjeta__titulo {
  font-size: 14.5px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}

.tarjeta__cuerpo { padding: 20px; }
.tarjeta__cuerpo--compacto { padding: 0; }
.tarjeta__pie {
  padding: 12px 20px;
  border-top: 1px solid var(--borde);
  background: var(--superficie-alt);
  font-size: 12.5px;
  color: var(--texto-suave);
}

/* --------------------------------------------------------------------------
   7. Metricas
   -------------------------------------------------------------------------- */
.metrica {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--r);
  padding: 18px 20px;
  box-shadow: var(--sombra-1);
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.metrica__etiqueta {
  font-size: 12px;
  font-weight: 500;
  color: var(--texto-suave);
  display: flex;
  align-items: center;
  gap: 7px;
}

.metrica__etiqueta svg {
  width: 15px;
  height: 15px;
  color: var(--texto-tenue);
  stroke-width: 1.9;
}

.metrica__valor {
  font-size: 27px;
  font-weight: 650;
  letter-spacing: -0.03em;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}

.metrica__valor small {
  font-size: 14px;
  font-weight: 600;
  color: var(--texto-suave);
  margin-right: 3px;
}

.metrica__nota {
  font-size: 12px;
  color: var(--texto-tenue);
}

/* --------------------------------------------------------------------------
   8. Insignias
   -------------------------------------------------------------------------- */
.insignia {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 600;
  padding: 2.5px 9px;
  border-radius: 20px;
  border: 1px solid transparent;
  white-space: nowrap;
  line-height: 1.5;
}

.insignia--exito { background: var(--exito-suave); color: var(--exito); border-color: #cbe9dd; }
.insignia--aviso { background: var(--aviso-suave); color: var(--aviso); border-color: #f3e2c3; }
.insignia--peligro { background: var(--peligro-suave); color: var(--peligro); border-color: #f7d5d2; }
.insignia--info { background: var(--info-suave); color: var(--info); border-color: #d3e0fc; }
.insignia--neutro { background: #f1f3f6; color: var(--texto-suave); border-color: var(--borde); }
.insignia--primario { background: var(--primario-suave); color: var(--primario-oscuro); border-color: #dcdcfb; }

.punto {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex: 0 0 6px;
}

/* --------------------------------------------------------------------------
   9. Botones
   -------------------------------------------------------------------------- */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 8px 15px;
  border-radius: var(--r-sm);
  border: 1px solid var(--borde-fuerte);
  background: var(--superficie);
  color: var(--texto);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 550;
  cursor: pointer;
  transition: background var(--transicion), border-color var(--transicion),
    box-shadow var(--transicion), transform var(--transicion);
  white-space: nowrap;
  line-height: 1.5;
}

.boton svg { width: 16px; height: 16px; stroke-width: 1.9; }

.boton:hover {
  background: var(--superficie-alt);
  border-color: var(--texto-tenue);
  color: var(--texto);
}

.boton:active { transform: translateY(1px); }

.boton:focus-visible {
  outline: 2px solid var(--primario);
  outline-offset: 2px;
}

.boton--primario {
  background: var(--primario);
  border-color: var(--primario);
  color: #fff;
  box-shadow: 0 1px 2px rgba(79, 70, 229, 0.28);
}
.boton--primario:hover {
  background: var(--primario-oscuro);
  border-color: var(--primario-oscuro);
  color: #fff;
}

.boton--peligro { color: var(--peligro); border-color: #f0cfcc; background: #fff; }
.boton--peligro:hover { background: var(--peligro-suave); border-color: #e5b3ae; color: var(--peligro); }

/* Acceso con Google: fondo blanco y borde gris, como pide su marca. */
.boton--google {
  background: #ffffff;
  color: #3c4043;
  border-color: #dadce0;
  font-weight: 600;
  gap: 10px;
}
.boton--google:hover { background: #f8f9fa; border-color: #c8ccd1; color: #202124; }
.boton--google .icono { width: 18px; height: 18px; }

.boton--fantasma { border-color: transparent; background: transparent; color: var(--texto-suave); }
.boton--fantasma:hover { background: #eef0f4; color: var(--texto); border-color: transparent; }

.boton--pequeno { padding: 5px 11px; font-size: 12.5px; border-radius: var(--r-xs); }
.boton--bloque { width: 100%; }

.boton[disabled],
.boton[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}

.grupo-botones { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* --------------------------------------------------------------------------
   10. Tablas
   -------------------------------------------------------------------------- */
.tabla-envoltura { width: 100%; overflow-x: auto; }

.tabla {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}

.tabla thead th {
  text-align: left;
  padding: 10px 16px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--texto-tenue);
  background: var(--superficie-alt);
  border-bottom: 1px solid var(--borde);
  white-space: nowrap;
}

.tabla tbody td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--borde);
  vertical-align: middle;
}

.tabla tbody tr:last-child td { border-bottom: none; }
.tabla tbody tr { transition: background var(--transicion); }
.tabla tbody tr:hover { background: #fafbfd; }

.tabla .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.tabla .principal-celda { font-weight: 550; }

.tabla tfoot td {
  padding: 12px 16px;
  font-weight: 650;
  background: var(--superficie-alt);
  border-top: 1px solid var(--borde);
  font-variant-numeric: tabular-nums;
}

.tabla--compacta tbody td { padding: 9px 14px; }
.tabla--compacta thead th { padding: 8px 14px; }

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

.celda-principal strong { font-weight: 600; }

.celda-principal span {
  font-size: 12px;
  color: var(--texto-tenue);
}

.truncar {
  max-width: 320px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Tabla del listado de facturas: compacta, sin desplazamiento lateral.
   Se fijan las columnas estrechas y el emisor absorbe el espacio restante.

   Ojo: el ancho de cada columna incluye su relleno (box-sizing: border-box),
   asi que el relleno se come ancho util. Por eso se aprieta al minimo: cada
   columna se queda con lo justo y todo lo que sobra va al emisor, que es la
   columna que interesa leer. */
.tabla--facturas {
  table-layout: fixed;
}

.tabla--facturas thead th,
.tabla--facturas tbody td {
  padding: 9px 8px;
}

.tabla--facturas thead th:first-child,
.tabla--facturas tbody td:first-child {
  padding-left: 14px;
}

.tabla--facturas thead th:last-child,
.tabla--facturas tbody td:last-child {
  padding-right: 14px;
}

.tabla--facturas .col-fecha { width: 92px; }
.tabla--facturas .col-comprobante { width: 164px; font-size: 12.5px; }
.tabla--facturas .col-total { width: 108px; }
.tabla--facturas .col-incluir { width: 86px; text-align: center; }
.tabla--facturas .col-accion { width: 64px; }

.tabla--facturas .truncar,
.tabla--facturas .celda-principal span {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Facturas fuera del calculo de IVA */
.tabla tbody tr.fila-excluida {
  opacity: 0.5;
}

.tabla tbody tr.fila-excluida:hover {
  opacity: 0.85;
}

.tabla tbody tr.fila-excluida .col-total {
  text-decoration: line-through;
}

/* Casillas de verificacion */
.casilla {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  cursor: pointer;
}

.casilla input[type="checkbox"] {
  width: 17px;
  height: 17px;
  margin: 0;
  flex: 0 0 17px;
  accent-color: var(--primario);
  cursor: pointer;
}

.casilla--cabecera {
  flex-direction: column;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0;
  text-transform: none;
  color: var(--texto-tenue);
  text-align: center;
  white-space: normal;
}

/* --------------------------------------------------------------------------
   10b. Libro de compras
   -------------------------------------------------------------------------- */
.tabla--libro {
  table-layout: fixed;
}

.tabla--libro th,
.tabla--libro td {
  padding: 9px 12px;
}

.tabla--libro th:first-child,
.tabla--libro td:first-child {
  width: 132px;
}

.tabla--libro th:last-child,
.tabla--libro td:last-child {
  width: 168px;
}

.tabla--libro .grupo {
  text-align: center;
  background: var(--primario-suave);
  color: var(--primario-oscuro);
}

.tabla--libro thead th {
  border-bottom: 1px solid var(--borde);
}

.tabla--libro tfoot td {
  background: var(--superficie-alt);
  font-weight: 650;
}

.resumen-trimestre {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1px;
  background: var(--borde);
  border: 1px solid var(--borde);
  border-radius: var(--r-sm);
  overflow: hidden;
  margin: 0;
}

.resumen-trimestre > div {
  background: var(--superficie);
  padding: 14px 16px;
}

.resumen-trimestre dt {
  font-size: 11px;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--texto-tenue);
  margin-bottom: 4px;
}

.resumen-trimestre dd {
  margin: 0;
  font-size: 17px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}

.resumen-trimestre .destacado {
  background: var(--primario-suave);
}

.resumen-trimestre .destacado dd {
  color: var(--primario-oscuro);
}

/* --------------------------------------------------------------------------
   11. Formularios
   -------------------------------------------------------------------------- */
.campo-grupo { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }

.etiqueta {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--texto);
}

.campo,
select.campo,
textarea.campo {
  width: 100%;
  padding: 8.5px 12px;
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--r-sm);
  background: var(--superficie);
  font-family: inherit;
  font-size: 13.5px;
  color: var(--texto);
  transition: border-color var(--transicion), box-shadow var(--transicion);
}

.campo::placeholder { color: var(--texto-tenue); }

.campo:focus {
  outline: none;
  border-color: var(--primario);
  box-shadow: 0 0 0 3.5px rgba(79, 70, 229, 0.13);
}

.campo[aria-invalid="true"] { border-color: var(--peligro); }

select.campo {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238b95a5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 34px;
}

.ayuda { font-size: 12px; color: var(--texto-tenue); }

.error-campo {
  font-size: 12px;
  color: var(--peligro);
  display: flex;
  align-items: center;
  gap: 5px;
}

.filtros {
  display: flex;
  gap: 10px;
  align-items: flex-end;
  flex-wrap: wrap;
}

.filtros .campo-grupo { margin-bottom: 0; }
.filtros__buscador { flex: 1 1 260px; min-width: 200px; }
.filtros__campo { flex: 0 1 165px; min-width: 140px; }

/* --------------------------------------------------------------------------
   12. Zona de carga
   -------------------------------------------------------------------------- */
.zona {
  border: 1.5px dashed var(--borde-fuerte);
  border-radius: var(--r);
  background: var(--superficie-alt);
  padding: 42px 24px;
  text-align: center;
  cursor: pointer;
  transition: border-color var(--transicion), background var(--transicion);
}

.zona:hover { border-color: var(--primario); background: var(--primario-suave); }
.zona.arrastrando { border-color: var(--primario); background: var(--primario-suave); }

.zona__icono {
  width: 46px;
  height: 46px;
  margin: 0 auto 14px;
  border-radius: var(--r);
  background: var(--superficie);
  border: 1px solid var(--borde);
  display: grid;
  place-items: center;
  color: var(--primario);
  box-shadow: var(--sombra-1);
}

.zona__icono svg { width: 22px; height: 22px; stroke-width: 1.8; }
.zona__titulo { font-size: 15px; font-weight: 600; margin-bottom: 4px; }
.zona__texto { font-size: 13px; color: var(--texto-suave); }
.zona__enlace { color: var(--primario); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }

.lista-archivos { margin-top: 18px; display: flex; flex-direction: column; gap: 8px; }

.archivo-fila {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 13px;
  border: 1px solid var(--borde);
  border-radius: var(--r-sm);
  background: var(--superficie);
  font-size: 13px;
}

.archivo-fila svg { width: 16px; height: 16px; color: var(--texto-tenue); flex: 0 0 16px; }
.archivo-fila__nombre { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.archivo-fila__peso { color: var(--texto-tenue); font-size: 12px; font-variant-numeric: tabular-nums; }

.contador-archivos {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  background: var(--primario-suave);
  border: 1px solid #dcdcfb;
  border-radius: var(--r-sm);
  font-size: 13px;
  font-weight: 550;
  color: var(--primario-oscuro);
  margin-top: 14px;
}

/* --------------------------------------------------------------------------
   13. Estado vacio
   -------------------------------------------------------------------------- */
.vacio {
  text-align: center;
  padding: 54px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.vacio__icono {
  width: 48px;
  height: 48px;
  border-radius: var(--r);
  background: var(--superficie-alt);
  border: 1px solid var(--borde);
  display: grid;
  place-items: center;
  color: var(--texto-tenue);
  margin-bottom: 6px;
}

.vacio__icono svg { width: 22px; height: 22px; stroke-width: 1.7; }
.vacio__titulo { font-size: 15px; font-weight: 600; }
.vacio__texto { font-size: 13px; color: var(--texto-suave); max-width: 380px; }

/* --------------------------------------------------------------------------
   14. Paginacion
   -------------------------------------------------------------------------- */
.paginacion {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 13px 20px;
  border-top: 1px solid var(--borde);
  background: var(--superficie-alt);
  flex-wrap: wrap;
}

.paginacion__info { font-size: 12.5px; color: var(--texto-suave); }
.paginacion__enlaces { display: flex; align-items: center; gap: 6px; }

.paginacion__enlace {
  min-width: 32px;
  height: 32px;
  padding: 0 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--r-xs);
  background: var(--superficie);
  color: var(--texto-suave);
  font-size: 13px;
  font-weight: 550;
}

.paginacion__enlace:hover { border-color: var(--texto-tenue); color: var(--texto); }
.paginacion__enlace.activo {
  background: var(--primario);
  border-color: var(--primario);
  color: #fff;
}
.paginacion__enlace.deshabilitado { opacity: 0.45; pointer-events: none; }

/* Banda con los totales de la declaracion (todo en colones) */
.declaracion {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  flex-wrap: wrap;
  padding: 16px 20px;
  background: linear-gradient(135deg, #eef2ff, #f6f4ff);
  border-bottom: 1px solid var(--borde);
}

.declaracion__principal {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.declaracion__etiqueta {
  font-size: 11.5px;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--primario-oscuro);
}

.declaracion__valor {
  font-size: 28px;
  font-weight: 650;
  letter-spacing: -0.03em;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
  color: var(--texto);
}

.declaracion__valor small {
  font-size: 14px;
  font-weight: 600;
  color: var(--texto-suave);
  margin-right: 3px;
}

.declaracion__detalle {
  display: flex;
  gap: 26px;
  flex-wrap: wrap;
  margin: 0;
}

.declaracion__detalle dt {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--texto-tenue);
  margin-bottom: 2px;
}

.declaracion__detalle dd {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   14b. Banda de periodo activo
   -------------------------------------------------------------------------- */
.periodo-actual {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  padding: 12px 16px;
  border-radius: var(--r-sm);
  background: var(--primario-suave);
  border: 1px solid #dcdcfb;
  color: var(--primario-oscuro);
  font-size: 13.5px;
}

.periodo-actual__texto {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}

.periodo-actual__texto strong { font-weight: 650; }
.periodo-actual .icono { width: 17px; height: 17px; }
.periodo-actual__detalle { font-size: 12.5px; opacity: 0.85; font-variant-numeric: tabular-nums; }

.contador-opcion {
  font-size: 11px;
  font-weight: 650;
  padding: 0 6px;
  border-radius: 20px;
  background: rgba(15, 23, 42, 0.08);
  color: inherit;
  margin-left: 2px;
  font-variant-numeric: tabular-nums;
}

.boton--primario .contador-opcion { background: rgba(255, 255, 255, 0.24); }

/* --------------------------------------------------------------------------
   15. Mensajes
   -------------------------------------------------------------------------- */
.mensajes {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 20px;
}

.mensaje {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 12px 15px;
  border-radius: var(--r-sm);
  border: 1px solid var(--borde);
  background: var(--superficie);
  font-size: 13.5px;
  box-shadow: var(--sombra-1);
}

.mensaje svg { width: 17px; height: 17px; flex: 0 0 17px; margin-top: 1px; }
.mensaje__texto { flex: 1; }

.mensaje--success { background: var(--exito-suave); border-color: #cbe9dd; color: #0b5c43; }
.mensaje--warning { background: var(--aviso-suave); border-color: #f3e2c3; color: #8a4408; }
.mensaje--danger { background: var(--peligro-suave); border-color: #f7d5d2; color: #8f1d14; }
.mensaje--info { background: var(--info-suave); border-color: #d3e0fc; color: #1741a8; }

.mensaje__cerrar {
  border: none;
  background: transparent;
  cursor: pointer;
  color: inherit;
  opacity: 0.55;
  padding: 0;
  font-size: 17px;
  line-height: 1;
}
.mensaje__cerrar:hover { opacity: 1; }

/* --------------------------------------------------------------------------
   16. Grafico de barras (CSS puro)
   -------------------------------------------------------------------------- */
.grafico {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  height: 172px;
  padding: 8px 4px 0;
}

.grafico__columna {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  height: 100%;
  min-width: 0;
}

.grafico__valor {
  font-size: 12.5px;
  font-weight: 650;
  color: var(--texto);
  font-variant-numeric: tabular-nums;
}

.grafico__pista {
  width: 100%;
  max-width: 46px;
  flex: 1;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.grafico__barra {
  width: 100%;
  border-radius: 7px 7px 3px 3px;
  background: linear-gradient(180deg, #6366f1, #4f46e5);
  min-height: 4px;
  transition: opacity var(--transicion);
}

.grafico__columna:hover .grafico__barra { opacity: 0.82; }

.grafico__etiqueta {
  font-size: 11.5px;
  color: var(--texto-tenue);
  font-weight: 550;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   17. Listas de definiciones
   -------------------------------------------------------------------------- */
.definiciones {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 16px 22px;
  margin: 0;
}

.definiciones > div { min-width: 0; }

.definiciones dt {
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--texto-tenue);
  margin-bottom: 3px;
}

.definiciones dd {
  margin: 0;
  font-size: 13.5px;
  color: var(--texto);
  overflow-wrap: anywhere;
}

.definiciones dd.mono {
  font-family: "SFMono-Regular", ui-monospace, Menlo, Consolas, monospace;
  font-size: 12.5px;
  letter-spacing: -0.01em;
}

.parte {
  display: flex;
  gap: 13px;
  align-items: flex-start;
}

.avatar {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  border-radius: 10px;
  background: var(--primario-suave);
  color: var(--primario-oscuro);
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 650;
  letter-spacing: -0.01em;
}

.avatar--neutro { background: #eef0f4; color: var(--texto-suave); }

.parte__datos { min-width: 0; }
.parte__nombre { font-size: 14px; font-weight: 600; line-height: 1.35; }
.parte__meta { font-size: 12.5px; color: var(--texto-suave); overflow-wrap: anywhere; }
.parte__doc {
  font-family: "SFMono-Regular", ui-monospace, Menlo, Consolas, monospace;
  font-size: 12px;
  color: var(--texto-tenue);
}

/* --------------------------------------------------------------------------
   18. Distribucion de autenticacion
   -------------------------------------------------------------------------- */
.acceso {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  background: var(--superficie);
}

.acceso__panel {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 44px 32px;
  overflow-y: auto;
}

.acceso__caja { width: 100%; max-width: 388px; }

.acceso__lateral {
  background: var(--lateral);
  color: #cbd5e1;
  padding: 52px 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.acceso__lateral::before {
  content: "";
  position: absolute;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(99, 102, 241, 0.5), transparent 66%);
  top: -170px;
  right: -170px;
}

.acceso__lateral::after {
  content: "";
  position: absolute;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(124, 58, 237, 0.32), transparent 68%);
  bottom: -160px;
  left: -130px;
}

.acceso__lateral-contenido { position: relative; z-index: 1; max-width: 400px; }

.acceso__titulo {
  font-size: 27px;
  font-weight: 650;
  color: #fff;
  letter-spacing: -0.025em;
  line-height: 1.25;
  margin-bottom: 14px;
}

.acceso__texto { font-size: 14px; color: #a9b4c6; line-height: 1.65; }

.acceso__lista {
  list-style: none;
  padding: 0;
  margin: 30px 0 0;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.acceso__lista li {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  font-size: 13.5px;
  color: #cbd5e1;
}

.acceso__lista svg {
  width: 17px;
  height: 17px;
  margin-top: 2px;
  flex: 0 0 17px;
  color: #818cf8;
  stroke-width: 2;
}

.acceso__marca {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 34px;
}

.marca-acceso {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 30px;
}

.marca-acceso .lateral__nombre { color: var(--texto); }
.marca-acceso .lateral__lema { color: var(--texto-tenue); }

.acceso__encabezado { margin-bottom: 26px; }
.acceso__encabezado h1 { font-size: 24px; margin-bottom: 6px; }
.acceso__encabezado p { font-size: 13.5px; color: var(--texto-suave); }

/* Separador con texto: "o con su correo y contrasena". */
.acceso__separador {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 0;
  color: var(--texto-tenue);
  font-size: 12px;
}
.acceso__separador::before,
.acceso__separador::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--borde);
}

.acceso__pie {
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid var(--borde);
  text-align: center;
  font-size: 13px;
  color: var(--texto-suave);
}

/* --------------------------------------------------------------------------
   18 bis. Pagina de inicio (publica)
   -------------------------------------------------------------------------- */
.publico { background: var(--fondo); }

.publico__barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 30px;
  background: var(--superficie);
  border-bottom: 1px solid var(--borde);
}
.publico__marca { display: flex; align-items: center; }
.publico__logo { height: 30px; width: auto; display: block; }
.publico__acciones { display: flex; align-items: center; gap: 10px; }

.publico__contenido {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 30px 40px;
}

.publico__pie {
  max-width: 1080px;
  margin: 0 auto;
  padding: 18px 30px 30px;
  border-top: 1px solid var(--borde);
  display: flex;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--texto-tenue);
}

/* --- Hero --- */
.inicio-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: 40px;
  align-items: center;
  padding: 46px 0 40px;
}
.inicio-hero__etiqueta {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .4px;
  text-transform: uppercase;
  color: var(--primario);
  background: var(--primario-suave);
  border-radius: 999px;
  padding: 4px 12px;
  margin-bottom: 16px;
}
.inicio-hero h1 {
  font-size: 38px;
  line-height: 1.15;
  letter-spacing: -.6px;
  margin: 0 0 16px;
}
.inicio-hero p {
  font-size: 16px;
  line-height: 1.65;
  color: var(--texto-suave);
  margin: 0 0 24px;
  max-width: 46ch;
}
.inicio-hero__botones { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.inicio-boton-grande { padding: 13px 20px; font-size: 15px; }
.inicio-hero__nota { font-size: 13px; color: var(--texto-tenue); margin: 18px 0 0; }

.inicio-muestra {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--r-lg);
  box-shadow: var(--sombra-2);
  overflow: hidden;
}
.inicio-muestra__cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid var(--borde);
  background: var(--superficie-alt);
  font-size: 13px;
  font-weight: 600;
}
.inicio-muestra__cuerpo { padding: 18px 20px 20px; }
.inicio-muestra__tabla { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 14px; }
.inicio-muestra__tabla th {
  text-align: right;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .3px;
  color: var(--texto-tenue);
  font-weight: 600;
  padding: 6px 8px;
  border-bottom: 1px solid var(--borde);
}
.inicio-muestra__tabla th:first-child,
.inicio-muestra__tabla td:first-child { text-align: left; }
.inicio-muestra__tabla td { padding: 8px; border-bottom: 1px solid var(--fondo); color: var(--texto-suave); }
.inicio-muestra__tabla td.num { text-align: right; font-variant-numeric: tabular-nums; color: var(--texto); }
.inicio-muestra__tabla tr:last-child td { border-bottom: 0; font-weight: 600; color: var(--texto); }

/* --- Secciones --- */
.inicio-seccion { padding: 34px 0 0; }
.inicio-seccion h2 { font-size: 22px; margin: 0 0 6px; letter-spacing: -.3px; }
.inicio-seccion__bajada { font-size: 14px; color: var(--texto-suave); margin: 0 0 22px; }

.inicio-pasos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.inicio-paso {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--r);
  padding: 22px 22px 20px;
  box-shadow: var(--sombra-1);
}
.inicio-paso__numero {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: var(--primario);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 14px;
}
.inicio-paso__titulo { font-size: 15px; font-weight: 600; margin-bottom: 6px; }
.inicio-paso p { font-size: 13px; line-height: 1.6; color: var(--texto-suave); margin: 0; }

.inicio-cualidades { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 26px; }
.inicio-cualidad { display: flex; gap: 13px; align-items: flex-start; }
.inicio-cualidad__icono {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  flex: none;
  background: var(--primario-suave);
  color: var(--primario);
  display: grid;
  place-items: center;
}
.inicio-cualidad__icono svg { width: 18px; height: 18px; }
.inicio-cualidad__titulo { font-size: 14px; font-weight: 600; margin-bottom: 3px; }
.inicio-cualidad p { font-size: 13px; line-height: 1.55; color: var(--texto-suave); margin: 0; }

.inicio-cta {
  margin-top: 38px;
  padding: 34px 30px;
  border-radius: var(--r-lg);
  text-align: center;
  background: linear-gradient(180deg, var(--primario) 0%, var(--primario-oscuro) 100%);
  color: #fff;
}
.inicio-cta h2 { font-size: 24px; margin: 0 0 8px; color: #fff; }
.inicio-cta p {
  font-size: 14px;
  line-height: 1.6;
  margin: 0 auto 22px;
  max-width: 56ch;
  color: #e0e7ff;
}
.inicio-cta__botones { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.inicio-cta .boton { background: #fff; color: var(--primario-oscuro); border-color: #fff; }
.inicio-cta .boton--google { background: #fff; color: #3c4043; border-color: #fff; }
.inicio-cta__enlaces { margin-top: 16px; font-size: 13px; color: #c7d2fe; }
.inicio-cta__enlaces a { color: #fff; font-weight: 600; }

/* --- Banda de bienvenida del panel --- */
.bienvenida {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--r);
  padding: 18px 22px;
  margin-bottom: 20px;
  box-shadow: var(--sombra-1);
}
.bienvenida__titulo { font-size: 16px; font-weight: 600; margin-bottom: 4px; }
.bienvenida__texto { font-size: 13px; color: var(--texto-suave); line-height: 1.6; }
.bienvenida__pasos { display: flex; gap: 16px; margin-top: 10px; flex-wrap: wrap; }
.bienvenida__paso { font-size: 12px; color: var(--texto-suave); display: flex; gap: 7px; align-items: center; }
.bienvenida__paso b {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--primario-suave);
  color: var(--primario);
  font-size: 11px;
  display: grid;
  place-items: center;
}

@media (max-width: 900px) {
  .inicio-hero { grid-template-columns: minmax(0, 1fr); gap: 26px; padding-top: 30px; }
  .inicio-hero h1 { font-size: 30px; }
  .inicio-pasos,
  .inicio-cualidades { grid-template-columns: minmax(0, 1fr); }
  .publico__barra { padding: 14px 18px; }
  .publico__contenido { padding: 0 18px 26px; }
  .bienvenida { flex-direction: column; align-items: flex-start; }
}

/* --------------------------------------------------------------------------
   19. Utilidades
   -------------------------------------------------------------------------- */
.texto-suave { color: var(--texto-suave); }
.texto-tenue { color: var(--texto-tenue); }
.texto-pequeno { font-size: 12.5px; }
.texto-centro { text-align: center; }
.texto-derecha { text-align: right; }
.negrita { font-weight: 600; }
.mono { font-family: "SFMono-Regular", ui-monospace, Menlo, Consolas, monospace; }
.tabular { font-variant-numeric: tabular-nums; }
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 8px; }
.mt-2 { margin-top: 16px; }
.mt-3 { margin-top: 24px; }
.mb-0 { margin-bottom: 0; }
.mb-2 { margin-bottom: 16px; }
.sin-margen { margin: 0; }
.oculto { display: none !important; }
.solo-lectores {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.fila { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.separador { height: 1px; background: var(--borde); margin: 20px 0; }

/* --------------------------------------------------------------------------
   20. Adaptacion a pantallas pequenas
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
  .rejilla--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rejilla--lateral,
  .rejilla--detalle { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 900px) {
  .acceso { grid-template-columns: minmax(0, 1fr); }
  .acceso__lateral { display: none; }
}

@media (max-width: 860px) {
  .barra-movil { display: flex; }

  .lateral {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 60;
    transform: translateX(-100%);
    transition: transform 200ms ease;
    box-shadow: var(--sombra-3);
  }

  .lateral.abierto { transform: translateX(0); }

  .velo {
    position: fixed;
    inset: 0;
    background: rgba(12, 19, 34, 0.45);
    z-index: 55;
    display: none;
  }

  .velo.visible { display: block; }

  .contenido { padding: 20px 16px 48px; }
  .rejilla--2,
  .rejilla--3,
  .rejilla--4 { grid-template-columns: minmax(0, 1fr); }
  .pagina-cabecera { margin-bottom: 18px; }
  .metrica__valor { font-size: 23px; }
  .grafico { height: 138px; gap: 8px; }
}

@media print {
  .lateral, .barra-movil, .pagina-cabecera__acciones, .paginacion { display: none !important; }
  body { background: #fff; }
  .tarjeta { box-shadow: none; border-color: #ccc; break-inside: avoid; }
  .contenido { padding: 0; }
}