/* ==========================================================================
   FINANZAS · hoja base  ·  26-sep-2026

   MOBILE FIRST, y no como eslogan: las reglas base son las del telefono y
   las pantallas grandes van anadiendo. Al reves siempre acaba en un
   escritorio encogido con los dedos del usuario por encima de los botones.

   TRES TAMANOS REALES
     telefono   hasta 767    navegacion abajo, una columna
     tablet     768-1199     dos columnas, navegacion abajo (iPad en vertical
                             se usa con las dos manos: el menu lateral
                             quedaria lejos del pulgar)
     escritorio 1200+        barra lateral fija

   ALTURAS DE TOQUE
   Ningun control por debajo de 44px. Es la medida que Apple documenta como
   minimo utilizable con el dedo, y la que evita el zoom accidental.

   TIPOGRAFIA DE LOS NUMEROS
   Las cifras van en tabular-nums y alineadas a la derecha. En un sistema
   contable, una columna de importes que no alinea por la coma es una
   columna que no se puede revisar de un vistazo.
   ========================================================================== */

:root {
  --azul:        #1e3a5f;
  --azul-claro:  #2d5580;
  --verde:       #0f7b5f;
  --rojo:        #b3261e;
  --ambar:       #8a6100;

  --fondo:       #f4f6f8;
  --superficie:  #ffffff;
  --borde:       #d8dee5;
  --texto:       #17212b;
  --texto-2:     #5a6a78;
  --texto-3:     #8a97a3;

  --radio:       10px;
  --sombra:      0 1px 3px rgba(23,33,43,.08), 0 1px 2px rgba(23,33,43,.06);

  /* Alto de la barra inferior + el area segura del iPhone */
  --nav-alto:    58px;
  --safe-abajo:  env(safe-area-inset-bottom, 0px);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --fondo:      #11171d;
    --superficie: #1a222b;
    --borde:      #2b3742;
    --texto:      #e8edf2;
    --texto-2:    #a3b1bd;
    --texto-3:    #6f7f8c;
    --azul:       #4a90d9;
    --azul-claro: #6aa9e8;
    --sombra:     0 1px 3px rgba(0,0,0,.4);
  }
}
:root[data-tema="oscuro"] {
  --fondo:      #11171d;
  --superficie: #1a222b;
  --borde:      #2b3742;
  --texto:      #e8edf2;
  --texto-2:    #a3b1bd;
  --texto-3:    #6f7f8c;
  --azul:       #4a90d9;
  --azul-claro: #6aa9e8;
  --sombra:     0 1px 3px rgba(0,0,0,.4);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

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

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  /* 16px en los campos evita que iOS haga zoom al enfocarlos. */
  font-size: 16px;
  line-height: 1.5;
  color: var(--texto);
  background: var(--fondo);
  -webkit-font-smoothing: antialiased;
  /* Hueco para la barra inferior en telefono y tablet. */
  padding-bottom: calc(var(--nav-alto) + var(--safe-abajo));
}

/* ── CABECERA ─────────────────────────────────────────────────────────── */
.barra {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 12px;
  height: 56px;
  padding: 0 16px;
  background: var(--azul);
  color: #fff;
  box-shadow: var(--sombra);
}
/* La marca completa son 22 caracteres y en un telefono compite con el
   nombre de la empresa por el mismo renglon. En vez de recortarla con
   puntos suspensivos -que deja "Financial & Busi..."- se reduce el cuerpo
   y se aprieta el interletraje hasta que cabe entera. El nombre de la
   marca no se abrevia: es lo que identifica el producto. */
.barra-marca {
  font-weight: 700;
  font-size: 14px;
  letter-spacing: -.1px;
  white-space: nowrap;
  flex-shrink: 0;
}
.barra-marca .amp { opacity: .65; font-weight: 400; margin: 0 1px; }
.barra-marca .os  { opacity: .75; font-weight: 600; }
.barra-empresa {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.barra-empresa .nombre {
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 40vw;
  opacity: .9;
}
/* Vuelta al Centro de Control.
   Alto 44px como el resto de lo pulsable: es el minimo para acertarle con el
   dedo sin ampliar. En pantalla estrecha se queda solo el icono, porque la
   barra ya reparte sitio entre la marca y el nombre de la empresa. */
.barra-volver {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 44px;
  padding: 0 10px;
  border-radius: 8px;
  color: #fff;
  text-decoration: none;
  font-size: 13px;
  opacity: .85;
  white-space: nowrap;
  flex-shrink: 0;
}
.barra-volver:hover,
.barra-volver:focus-visible { opacity: 1; background: rgba(255, 255, 255, .12); }
.barra-volver .ico { font-size: 16px; line-height: 1; }
@media (max-width: 599px) {
  .barra-volver .txt { display: none; }
  .barra-volver { padding: 0 8px; }
}
.boton-icono {
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: 0; color: inherit;
  border-radius: 8px; cursor: pointer; font-size: 18px;
}
.boton-icono:active { background: rgba(255,255,255,.15); }

/* ── CONTENIDO ────────────────────────────────────────────────────────── */
.lienzo { padding: 16px; max-width: 1400px; margin: 0 auto; }

.titulo-vista { font-size: 20px; font-weight: 700; margin-bottom: 4px; }
.sub-vista    { font-size: 14px; color: var(--texto-2); margin-bottom: 16px; }

.tarjeta {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 16px;
  margin-bottom: 12px;
  box-shadow: var(--sombra);
}
.tarjeta-titulo {
  font-size: 12px; font-weight: 700; letter-spacing: .6px;
  text-transform: uppercase; color: var(--texto-2);
  margin-bottom: 10px;
}

/* Cifras: tabulares y a la derecha, siempre. */
.cifra {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  text-align: right;
  white-space: nowrap;
}
.cifra-grande { font-size: 26px; font-weight: 700; }
.cifra-debito  { color: var(--texto); }
.cifra-credito { color: var(--texto); }
.cifra-negativa { color: var(--rojo); }

/* "Sin dato" no es cero: se escribe, no se pinta un 0. */
.sin-dato { color: var(--texto-3); font-style: italic; font-variant-numeric: normal; }

/* ── ESTADOS ──────────────────────────────────────────────────────────── */
.aviso {
  border-left: 4px solid var(--ambar);
  background: var(--superficie);
  border-radius: var(--radio);
  padding: 14px 16px;
  margin-bottom: 12px;
  font-size: 14px;
  box-shadow: var(--sombra);
}
.aviso.grave { border-left-color: var(--rojo); }
.aviso.bien  { border-left-color: var(--verde); }
.aviso-titulo { font-weight: 700; margin-bottom: 4px; }
.aviso p { color: var(--texto-2); }
.aviso code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  background: var(--fondo);
  padding: 1px 5px;
  border-radius: 4px;
}

.etiqueta {
  display: inline-block;
  font-size: 11px; font-weight: 700; letter-spacing: .4px;
  padding: 3px 8px; border-radius: 20px;
  text-transform: uppercase;
}
.etiqueta.ok       { background: rgba(15,123,95,.12);  color: var(--verde); }
.etiqueta.falta    { background: rgba(179,38,30,.12);  color: var(--rojo); }
.etiqueta.pendiente{ background: rgba(138,97,0,.14);   color: var(--ambar); }

/* ── TABLAS ───────────────────────────────────────────────────────────── */
/* En telefono una tabla contable no cabe. En vez de encogerla hasta que sea
   ilegible, se desplaza en horizontal y la primera columna se queda fija. */
.tabla-envoltorio {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: var(--superficie);
}
table { width: 100%; border-collapse: collapse; font-size: 14px; }
thead th {
  position: sticky; top: 0;
  background: var(--fondo);
  font-size: 11px; font-weight: 700; letter-spacing: .5px;
  text-transform: uppercase; color: var(--texto-2);
  text-align: left; padding: 10px 12px;
  border-bottom: 1px solid var(--borde);
  white-space: nowrap;
}
tbody td { padding: 11px 12px; border-bottom: 1px solid var(--borde); }
tbody tr:last-child td { border-bottom: 0; }
th.num, td.num { text-align: right; font-variant-numeric: tabular-nums; }
td.codigo {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px; white-space: nowrap;
}

/* ── BOTONES ──────────────────────────────────────────────────────────── */
.boton {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 18px;
  font-size: 15px; font-weight: 600;
  border: 1px solid transparent; border-radius: 8px;
  cursor: pointer;
  background: var(--azul); color: #fff;
}
.boton:active { transform: translateY(1px); }
.boton.secundario { background: var(--superficie); color: var(--texto); border-color: var(--borde); }
.boton.bloque { width: 100%; }

/* ── NAVEGACION ───────────────────────────────────────────────────────── */
/* Telefono y tablet: barra inferior, al alcance del pulgar. */
.nav {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 60;
  display: flex;
  background: var(--superficie);
  border-top: 1px solid var(--borde);
  padding-bottom: var(--safe-abajo);
}
.nav a {
  flex: 1;
  min-height: var(--nav-alto);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 2px;
  text-decoration: none;
  color: var(--texto-3);
  font-size: 10px; font-weight: 600;
  letter-spacing: .2px;
}
.nav a .ico { font-size: 19px; line-height: 1; }
.nav a.activo { color: var(--azul); }

.nav-lateral { display: none; }

/* ── TABLET ───────────────────────────────────────────────────────────── */
@media (min-width: 768px) {
  .lienzo { padding: 20px 24px; }
  .rejilla-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .rejilla-2 .tarjeta { margin-bottom: 0; }
  .barra-marca { font-size: 16px; letter-spacing: 0; }
  .barra-empresa .nombre { max-width: 30vw; }
  .nav a { font-size: 11px; }
}

/* ── ESCRITORIO ───────────────────────────────────────────────────────── */
@media (min-width: 1200px) {
  body { padding-bottom: 0; }

  .nav { display: none; }

  .nav-lateral {
    display: block;
    position: fixed;
    top: 56px; left: 0; bottom: 0;
    width: 232px;
    background: var(--superficie);
    border-right: 1px solid var(--borde);
    padding: 12px 0;
    overflow-y: auto;
  }
  .nav-lateral a {
    display: flex; align-items: center; gap: 12px;
    min-height: 44px;
    padding: 0 20px;
    text-decoration: none;
    color: var(--texto-2);
    font-size: 14px; font-weight: 500;
  }
  .nav-lateral a .ico { font-size: 17px; width: 22px; text-align: center; }
  .nav-lateral a:hover  { background: var(--fondo); color: var(--texto); }
  .nav-lateral a.activo { color: var(--azul); background: var(--fondo); font-weight: 700; box-shadow: inset 3px 0 0 var(--azul); }
  .nav-lateral .grupo {
    font-size: 10px; font-weight: 700; letter-spacing: .8px;
    text-transform: uppercase; color: var(--texto-3);
    padding: 16px 20px 6px;
  }

  .barra-marca { font-size: 18px; letter-spacing: .2px; }
  .contenido { margin-left: 232px; }
  .lienzo { padding: 24px 32px; }
  .rejilla-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .rejilla-3 .tarjeta { margin-bottom: 0; }
}

/* ── IMPRESION ────────────────────────────────────────────────────────── */
@media print {
  .barra, .nav, .nav-lateral { display: none !important; }
  .contenido { margin-left: 0; }
  body { background: #fff; padding: 0; }
  .tarjeta { box-shadow: none; border-color: #ccc; break-inside: avoid; }
  tbody tr { break-inside: avoid; }
  thead { display: table-header-group; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}