/* =====================================================================
   MGB — Hoja de estilos
   Sigue docs/02b-guia-de-diseno.md y el prototipo docs/mgb-mockup.html.
   Sin fuentes ni librerías de afuera: todo se sirve desde este servidor.
   ===================================================================== */

:root {
  /* --- EL COLOR DE ACENTO. Se cambia SÓLO acá. ---------------------- */
  --acento: #b4441a;                    /* ladrillo */
  --acento-hover: #8c3413;
  --acento-tenue: #fdf1ec;

  /* --- Superficies y texto ------------------------------------------ */
  --superficie: #fcfcfb;
  --pagina: #f9f9f7;
  --texto: #0b0b0b;
  --texto-2: #52514e;
  --texto-suave: #898781;
  --linea: #e1e0d9;
  --borde: rgba(11, 11, 11, .10);

  /* --- Colores de estado. Reservados: nunca decoran. ----------------- */
  --bien: #0ca30c;
  --bien-texto: #006300;
  --aviso: #fab219;
  --grave: #ec835a;
  --critico: #d03b3b;

  --r: 10px;
  --r-chico: 7px;
  --sans: system-ui, -apple-system, "Segoe UI", sans-serif;
  /* Para que las columnas de plata se alineen dígito con dígito. */
  --numeros: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
}

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

/* El atributo `hidden` tiene que ganar SIEMPRE.
   Por sí solo es la regla más débil que existe: cualquier `display` del CSS
   le gana. Sin esta línea, un `.app { display: flex }` deja visible algo que
   el HTML marcó como oculto. Pasó el 21/08/2026: la aplicación entera se veía
   sin haber iniciado sesión. */
[hidden] { display: none !important; }

body {
  font-family: var(--sans);
  background: var(--pagina);
  color: var(--texto);
  font-size: 15px;
  line-height: 1.5;
}

button { font-family: inherit; font-size: inherit; cursor: pointer; }
a { color: var(--acento); }

/* Que todo se pueda usar con el teclado y se vea dónde está el foco. */
:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 2px;
}

/* =====================================================================
   Estructura
   ===================================================================== */
.app { display: flex; min-height: 100vh; }

.lateral {
  width: 232px; flex: 0 0 232px;
  background: var(--superficie);
  border-right: 1px solid var(--borde);
  padding: 18px 12px;
  display: flex; flex-direction: column; gap: 2px;
}

.marca { display: flex; align-items: center; gap: 10px; padding: 4px 10px 18px; }
.marca .sello {
  width: 36px; height: 32px; flex: 0 0 36px; border-radius: 8px;
  background: var(--acento); color: #fff;
  display: grid; place-items: center;
  font-weight: 700; font-size: 12px; letter-spacing: .03em;
}
.marca b { font-size: 14px; white-space: nowrap; }
.marca small { display: block; color: var(--texto-suave); font-size: 11.5px; line-height: 1.2; }

.lateral nav button {
  display: flex; align-items: center; gap: 10px;
  width: 100%; text-align: left;
  background: transparent; border: 0;
  padding: 8px 10px; border-radius: var(--r-chico);
  color: var(--texto-2); font-size: 14px;
}
.lateral nav button:hover { background: #f2f1ee; }
.lateral nav button[aria-current="page"] {
  background: var(--acento-tenue); color: var(--acento-hover); font-weight: 600;
}
.lateral nav .icono { width: 18px; text-align: center; opacity: .8; }
.lateral .grupo {
  font-size: 11px; text-transform: uppercase; letter-spacing: .07em;
  color: var(--texto-suave); padding: 16px 10px 6px;
}
.lateral .pie {
  margin-top: auto; padding: 12px 10px 0;
  border-top: 1px solid var(--borde);
  color: var(--texto-suave); font-size: 12px;
}

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

.barra-superior {
  background: var(--superficie); border-bottom: 1px solid var(--borde);
  padding: 14px 26px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.barra-superior h1 { font-size: 19px; margin: 0; font-weight: 650; }
.barra-superior .sub { color: var(--texto-suave); font-size: 13px; }
.barra-superior .separador { flex: 1; }

.contenido { padding: 22px 26px 60px; max-width: 1180px; }

/* =====================================================================
   Componentes
   ===================================================================== */
.boton {
  border: 1px solid var(--borde); background: var(--superficie);
  border-radius: var(--r-chico); padding: 8px 14px; font-size: 14px; color: var(--texto);
}
.boton:hover { background: #f2f1ee; }
.boton.principal {
  background: var(--acento); border-color: var(--acento); color: #fff; font-weight: 550;
}
.boton.principal:hover { background: var(--acento-hover); }
.boton:disabled { opacity: .55; cursor: not-allowed; }

.tarjeta {
  background: var(--superficie); border: 1px solid var(--borde);
  border-radius: var(--r); padding: 16px 18px;
}

.tarjetas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.tarjetas .rotulo { color: var(--texto-suave); font-size: 12.5px; margin-bottom: 6px; }
.tarjetas .cifra {
  font-family: var(--numeros); font-size: 23px; font-weight: 600;
  letter-spacing: -.01em; font-variant-numeric: tabular-nums;
}
.tarjetas .pie-cifra { color: var(--texto-suave); font-size: 12px; margin-top: 4px; }

/* --- Tablas -------------------------------------------------------- */
.tabla-scroll { overflow-x: auto; }         /* en el celular se desplaza, no se achica */
table.datos { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 640px; }
table.datos th, table.datos td {
  padding: 9px 12px; border-bottom: 1px solid var(--linea); text-align: left;
}
table.datos th {
  font-size: 12px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--texto-suave); font-weight: 600;
}
/* La plata y los km, siempre a la derecha y alineados dígito con dígito. */
table.datos th.plata, table.datos td.plata,
table.datos th.numero, table.datos td.numero {
  text-align: right; font-family: var(--numeros); font-variant-numeric: tabular-nums;
}
table.datos tfoot td { font-weight: 650; border-top: 2px solid var(--linea); border-bottom: 0; }

/* --- Etiquetas de estado: punto de color Y texto, nunca sólo color -- */
.etiqueta {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; color: var(--texto-2); white-space: nowrap;
}
.etiqueta::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--texto-suave); flex: 0 0 8px;
}
.etiqueta.bien::before    { background: var(--bien); }
.etiqueta.aviso::before   { background: var(--aviso); }
.etiqueta.grave::before   { background: var(--grave); }
.etiqueta.critico::before { background: var(--critico); }

/* --- Alertas: SIEMPRE ícono + texto. Nunca depende del color -------- */
.alerta {
  display: flex; align-items: flex-start; gap: 10px;
  border: 1px solid var(--borde); border-left-width: 4px;
  border-radius: var(--r-chico); padding: 11px 14px; margin-bottom: 12px;
  background: var(--superficie); font-size: 14px;
}
.alerta .simbolo { font-weight: 700; flex: 0 0 auto; line-height: 1.4; }
.alerta.aviso   { border-left-color: var(--aviso); }
.alerta.critico { border-left-color: var(--critico); }
.alerta.bien    { border-left-color: var(--bien); }
.alerta strong { font-weight: 650; }

/* --- Formularios --------------------------------------------------- */
.campo { margin-bottom: 14px; }
.campo label {                       /* etiqueta visible, no texto gris adentro */
  display: block; font-size: 13px; color: var(--texto-2);
  margin-bottom: 5px; font-weight: 550;
}
.campo input, .campo select, .campo textarea {
  width: 100%; padding: 9px 11px;
  border: 1px solid var(--linea); border-radius: var(--r-chico);
  font-size: 14px; font-family: inherit; background: #fff; color: var(--texto);
}
.campo input:focus { border-color: var(--acento); }
.campo .ayuda { font-size: 12px; color: var(--texto-suave); margin-top: 4px; }

/* =====================================================================
   Pantalla de ingreso
   ===================================================================== */
.ingreso { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.ingreso .caja { width: 100%; max-width: 380px; }
.ingreso .marca { justify-content: center; padding-bottom: 22px; }
.ingreso .caja .tarjeta { padding: 24px; }
.ingreso h1 { font-size: 18px; margin: 0 0 4px; }
.ingreso .sub { color: var(--texto-suave); font-size: 13px; margin-bottom: 18px; }
.ingreso .boton { width: 100%; padding: 10px; }
.ingreso .testigo {
  margin: 14px 0 0; font-size: 11.5px; color: var(--texto-suave); text-align: center;
}
.ingreso .testigo.bien { color: var(--bien-texto); }

/* =====================================================================
   Celular: escritorio primero, pero usable en el teléfono
   ===================================================================== */
@media (max-width: 860px) {
  .app { flex-direction: column; }
  .lateral {
    width: auto; flex: none; flex-direction: row; overflow-x: auto;
    border-right: 0; border-bottom: 1px solid var(--borde); padding: 8px;
  }
  .lateral .marca, .lateral .grupo, .lateral .pie { display: none; }
  .lateral nav { display: flex; gap: 4px; }
  .lateral nav button { white-space: nowrap; width: auto; }
  .contenido { padding: 16px 14px 48px; }
  .barra-superior { padding: 12px 14px; }
  .tarjetas { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 520px) {
  .tarjetas { grid-template-columns: 1fr; }
}

/* Para imprimir la liquidación y que el chofer la firme. */
@media print {
  .lateral, .barra-superior .boton, .no-imprimir { display: none !important; }
  body { background: #fff; }
  .tarjeta { border: 1px solid #999; }
}