/* =====================================================================
   GStationView — hoja de estilo de la aplicación web.

   This is the first screen, so this file is the design foundation every
   later screen inherits: the tokens, the type scale, the field pattern
   and the message pattern are established here once.

   THE COLOUR DECISION, IN ONE SENTENCE
   An LPG plant reads its own instruments as white on deep petrol blue —
   the pump gauge bezels, the tank dials, the enamelled signage — and
   the relación is a ruled ledger written in blue-black ink; so primary
   actions take the colour of the instrument and of the ink, which is
   the one colour in a gas plant that has never meant *stop*.

   RED IS RECLAIMED. Red appears in exactly two situations: a blocking
   error, and `faltante`. It is not the primary button, it is not a
   heading, it is not a border for decoration. Amber is advisory. Green
   is `cuadra`. Everything else is ink, paper and petrol blue.

   Every ratio in the token table below is computed, not eyeballed:
   `python webapp/tools/contrast.py` prints all 24 pairs and exits
   non-zero if any of them falls under its WCAG 2.2 threshold.
   ===================================================================== */

:root {
  /* --- superficie ---------------------------------------------------- */
  --papel:            #F1F3F5;   /* la página                            */
  --superficie:       #FFFFFF;   /* la tarjeta                           */
  --campo:            #FBFCFC;   /* el interior de un input              */
  --panel:            #0B2F3D;   /* la placa de identificación           */
  --panel-filete:     #1C4E62;

  /* --- tinta --------------------------------------------------------- */
  --tinta:            #101418;   /* 16.63:1 sobre papel                  */
  --tinta-media:      #4B5560;   /*  6.82:1 sobre papel                  */
  --tinta-tenue:      #5C6670;   /*  5.26:1 sobre papel — placeholder    */
  --tinta-panel:      #E8EDF0;   /* 11.96:1 sobre panel                  */
  --tinta-panel-tenue:#9DB4BF;   /*  6.53:1 sobre panel                  */

  /* --- filetes y bordes ---------------------------------------------- */
  --filete:           #DCE1E5;   /* la raya del libro mayor              */
  --filete-fuerte:    #C3CBD1;
  --borde-campo:      #78868F;   /*  3.37:1 sobre papel                  */

  /* --- acción -------------------------------------------------------- */
  --instrumento:      #0E4B63;   /*  9.52:1 con texto blanco             */
  --instrumento-vivo: #0A3A4D;
  --instrumento-tenue:#E4EDF1;

  /* --- semántica: rojo SOLO bloquea ---------------------------------- */
  --rojo:             #A32118;   /*  7.53:1 sobre superficie             */
  --rojo-fondo:       #FDF6F5;
  --ambar:            #7A4E00;   /*  7.20:1 sobre superficie             */
  --ambar-filete:     #B87400;   /*  3.79:1 — filete, no texto           */
  --ambar-fondo:      #FDF9F1;
  --verde:            #14663A;   /*  7.02:1 sobre superficie             */

  /* --- escala tipográfica -------------------------------------------- */
  --t-micro:          0.75rem;
  --t-pequeno:        0.875rem;
  --t-base:           1rem;
  --t-medio:          1.125rem;
  --t-grande:         1.5rem;
  --t-titulo:         2rem;
  --t-cifra:          2.5rem;    /* el cuadre, cuando llegue             */

  --linea-apretada:   1.15;
  --linea:            1.5;

  /* --- ritmo ---------------------------------------------------------- */
  --e1: 0.25rem;
  --e2: 0.5rem;
  --e3: 0.75rem;
  --e4: 1rem;
  --e5: 1.5rem;
  --e6: 2rem;
  --e7: 3rem;

  /* --- objetivos táctiles: guantes, sol, prisa ------------------------ */
  --alto-campo:  3.5rem;   /* 56px */
  --alto-boton:  3.5rem;

  --radio: 3px;            /* casi recto: esto es una hoja, no una app   */
}

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

html {
  /* Tabular numerals everywhere. In a product whose job is comparing
     figures, proportional digits are a legibility defect (V6). */
  font-variant-numeric: tabular-nums;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: "Segoe UI", Roboto, "Helvetica Neue", system-ui, -apple-system, Arial, sans-serif;
  font-size: var(--t-base);
  line-height: var(--linea);
}

h1, h2, h3, p, ul, ol, dl, dd, figure {
  margin: 0;
}

ul {
  padding: 0;
  list-style: none;
}

a {
  color: var(--instrumento);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

/* --- foco visible: anillo de dos tonos -------------------------------
   Two tones so the ring is visible against the pale paper AND against
   the dark primary button; a single-colour ring disappears into one of
   the two. WCAG 2.2 focus appearance, not a browser default. */
:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px var(--superficie),
    0 0 0 5px var(--instrumento);
  border-radius: var(--radio);
}

.panel :focus-visible {
  box-shadow:
    0 0 0 2px var(--panel),
    0 0 0 5px var(--superficie);
}

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

/* =====================================================================
   LÁMINA — la retícula de dos paneles.

   V2 of the audit: `st.columns([2, 1])` left the right third empty at
   both viewports, and on the tablet — the constrained device — that was
   ~340px of nothing beside a form that then felt cramped. The fix is
   not a wider card. It is giving the other panel something to say: the
   plant it belongs to, the date it is operating on, and which
   credential each role uses. Both viewports are deliberate:

     1600×1000  the panel is ~600px of legible identification and the
                access card sits at a comfortable reading measure
     1024×768   the panel narrows to ~390px, the card takes 62% and the
                targets stay at 56px

   Below 900px it stacks and the panel becomes a header band, which is
   the phone case and the portrait-tablet case.
   ===================================================================== */

.lamina {
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  grid-template-columns: minmax(300px, 38fr) minmax(440px, 62fr);
}

@media (min-width: 1400px) {
  .lamina {
    grid-template-columns: minmax(360px, 40fr) minmax(520px, 60fr);
  }
}

@media (max-width: 899px) {
  .lamina {
    grid-template-columns: 1fr;
    min-height: 0;
  }
}

/* --- el panel de identificación --------------------------------------- */

.panel {
  background: var(--panel);
  color: var(--tinta-panel);
  padding: var(--e6) var(--e5);
  display: flex;
  flex-direction: column;
  gap: var(--e6);
}

@media (min-width: 1400px) {
  .panel {
    padding: var(--e7) var(--e6);
  }
}

.panel__marca {
  display: flex;
  align-items: baseline;
  gap: var(--e2);
  font-size: var(--t-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tinta-panel-tenue);
}

.panel__marca strong {
  color: var(--tinta-panel);
  font-size: var(--t-pequeno);
  letter-spacing: 0.1em;
}

/* Bottom-weighted on purpose: the whitespace collects in ONE place,
   under the brand, instead of splitting into two symmetrical voids
   above and below the plant name. A control panel reads bottom-up. */
.panel__identidad {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--e2);
  padding-bottom: var(--e2);
}

.panel__rotulo {
  font-size: var(--t-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tinta-panel-tenue);
}

.panel__nombre {
  font-size: var(--t-titulo);
  line-height: var(--linea-apretada);
  font-weight: 600;
  color: #FFFFFF;
}

.panel__codigo {
  font-family: ui-monospace, "Cascadia Mono", "Consolas", monospace;
  font-size: var(--t-pequeno);
  color: var(--tinta-panel-tenue);
}

/* La regla del libro mayor: filas con filete, no tarjetas. */
.libro {
  border-top: 1px solid var(--panel-filete);
}

.libro__fila {
  display: flex;
  gap: var(--e4);
  justify-content: space-between;
  align-items: baseline;
  padding: var(--e3) 0;
  border-bottom: 1px solid var(--panel-filete);
}

.libro__concepto {
  color: var(--tinta-panel-tenue);
  font-size: var(--t-pequeno);
}

.libro__valor {
  color: var(--tinta-panel);
  font-size: var(--t-pequeno);
  text-align: right;
}

.panel__nota {
  font-size: var(--t-pequeno);
  color: var(--tinta-panel-tenue);
  max-width: 42ch;
}

/* --- la hoja: donde vive el formulario -------------------------------- */

.hoja {
  padding: var(--e6) var(--e5);
  display: flex;
  flex-direction: column;
  gap: var(--e5);
  justify-content: center;
  align-items: center;
}

@media (min-width: 1400px) {
  .hoja {
    padding: var(--e7) var(--e6);
  }
}

.hoja__cuerpo {
  width: 100%;
  max-width: 34rem;
}

.hoja__pie {
  width: 100%;
  max-width: 34rem;
  font-size: var(--t-pequeno);
  color: var(--tinta-media);
  border-top: 1px solid var(--filete);
  padding-top: var(--e3);
  display: flex;
  gap: var(--e4);
  justify-content: space-between;
  flex-wrap: wrap;
}

/* =====================================================================
   TARJETA Y FORMULARIO
   ===================================================================== */

.tarjeta {
  background: var(--superficie);
  border: 1px solid var(--filete-fuerte);
  border-radius: var(--radio);
  padding: var(--e5);
}

@media (min-width: 1024px) {
  .tarjeta {
    padding: var(--e6);
  }
}

.tarjeta__titulo {
  font-size: var(--t-grande);
  line-height: var(--linea-apretada);
  font-weight: 600;
  margin-bottom: var(--e1);
}

.tarjeta__bajada {
  color: var(--tinta-media);
  font-size: var(--t-pequeno);
  margin-bottom: var(--e5);
}

/* --- el selector de método: dos rutas reales, no un radio ------------- */

.metodos {
  display: flex;
  gap: 0;
  border: 1px solid var(--borde-campo);
  border-radius: var(--radio);
  overflow: hidden;
  margin-bottom: var(--e5);
}

.metodos__opcion {
  flex: 1 1 0;
  min-height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--e2);
  padding: var(--e2) var(--e3);
  font-size: var(--t-pequeno);
  font-weight: 600;
  color: var(--instrumento);
  background: var(--superficie);
  text-decoration: none;
  border: none;
}

.metodos__opcion + .metodos__opcion {
  border-left: 1px solid var(--borde-campo);
}

.metodos__opcion[aria-current="page"] {
  background: var(--instrumento);
  color: #FFFFFF;
}

.metodos__opcion:focus-visible {
  box-shadow:
    inset 0 0 0 2px var(--superficie),
    inset 0 0 0 5px var(--instrumento);
}

/* --- campos ------------------------------------------------------------ */

.campo {
  display: block;
  margin-bottom: var(--e5);
}

.campo__etiqueta {
  display: block;
  font-size: var(--t-pequeno);
  font-weight: 600;
  margin-bottom: var(--e2);
}

.campo__ayuda {
  display: block;
  font-size: var(--t-pequeno);
  color: var(--tinta-media);
  margin-bottom: var(--e2);
}

.campo__entrada {
  display: block;
  width: 100%;
  min-height: var(--alto-campo);
  padding: 0 var(--e3);
  font: inherit;
  /* 16px minimum so iOS does not zoom the page when a field takes
     focus — a zoomed tablet at the pump is a lost field. */
  font-size: var(--t-base);
  color: var(--tinta);
  background: var(--campo);
  border: 1px solid var(--borde-campo);
  border-left: 4px solid var(--filete-fuerte);
  border-radius: var(--radio);
}

.campo__entrada::placeholder {
  color: var(--tinta-tenue);   /* 5.69:1 sobre --campo. Fixes V4.        */
  opacity: 1;                  /* Firefox lightens placeholders by default */
}

.campo__entrada:hover {
  border-color: var(--tinta-media);
}

/* The PIN reads as digits in a row of boxes, so it gets the monospace
   face and generous tracking — but the PLACEHOLDER is prose, and prose
   at 0.35em tracking is unreadable, so it keeps the body face. */
.campo__entrada--cifra {
  font-family: ui-monospace, "Cascadia Mono", "Consolas", monospace;
  letter-spacing: 0.35em;
  font-size: var(--t-medio);
}

.campo__entrada--cifra::placeholder {
  font-family: inherit;
  letter-spacing: normal;
  font-size: var(--t-base);
}

/* Blocking and advisory are structurally different, not two colours of
   the same box: the rule on the left edge, the field background and the
   announcement all move together. */
.campo--bloqueante .campo__entrada {
  border-left-color: var(--rojo);
  background: var(--rojo-fondo);
}

.campo--aviso .campo__entrada {
  border-left-color: var(--ambar-filete);
  background: var(--ambar-fondo);
}

.mensaje {
  display: flex;
  gap: var(--e2);
  align-items: flex-start;
  margin-top: var(--e2);
  font-size: var(--t-pequeno);
  font-weight: 500;
}

.mensaje__marca {
  flex: 0 0 auto;
  font-weight: 700;
}

.mensaje--bloqueante {
  color: var(--rojo);
}

.mensaje--aviso {
  color: var(--ambar);
}

/* --- botones ----------------------------------------------------------- */

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e2);
  width: 100%;
  min-height: var(--alto-boton);
  padding: 0 var(--e5);
  font: inherit;
  font-size: var(--t-medio);
  font-weight: 600;
  color: #FFFFFF;
  background: var(--instrumento);
  border: 1px solid var(--instrumento);
  border-radius: var(--radio);
  cursor: pointer;
}

.boton:hover {
  background: var(--instrumento-vivo);
  border-color: var(--instrumento-vivo);
}

.boton[disabled],
.boton[aria-disabled="true"] {
  background: var(--tinta-media);
  border-color: var(--tinta-media);
  cursor: not-allowed;
}

.boton--secundario {
  color: var(--instrumento);
  background: var(--superficie);
  border-color: var(--borde-campo);
  width: auto;
  min-height: 3rem;
  font-size: var(--t-base);
}

.boton--secundario:hover {
  background: var(--instrumento-tenue);
}

/* --- avisos de ámbito de formulario -----------------------------------
   Reserved for issues with no single owning field. A message that HAS a
   field never renders here; that is the V5 batched-banner pattern being
   retired, not reproduced. */

.avisos:empty {
  display: none;
}

.avisos {
  margin-bottom: var(--e4);
}

.aviso {
  display: flex;
  gap: var(--e3);
  padding: var(--e3) var(--e4);
  border-radius: var(--radio);
  font-size: var(--t-pequeno);
}

.aviso--bloqueante {
  color: var(--rojo);
  background: var(--rojo-fondo);
  border-left: 4px solid var(--rojo);
}

.aviso--aviso {
  color: var(--ambar);
  background: var(--ambar-fondo);
  border-left: 4px solid var(--ambar-filete);
}

.aviso--neutro {
  color: var(--tinta-media);
  background: var(--instrumento-tenue);
  border-left: 4px solid var(--instrumento);
}

/* --- una región viva, escrita por los intercambios fuera de banda ------ */

.region-viva {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --- la pantalla de sesión iniciada (provisional, slice 5) ------------- */

.ficha {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--e2) var(--e5);
  font-size: var(--t-pequeno);
}

.ficha dt {
  color: var(--tinta-media);
}

.ficha dd {
  margin: 0;
  font-weight: 600;
}

.permisos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2);
  margin-top: var(--e3);
}

.permisos li {
  font-family: ui-monospace, "Cascadia Mono", "Consolas", monospace;
  font-size: var(--t-micro);
  padding: var(--e1) var(--e2);
  background: var(--instrumento-tenue);
  color: var(--instrumento);
  border-radius: var(--radio);
}

/* --- htmx: los dos estilos que la biblioteca inyectaría sola -----------
   `includeIndicatorStyles:false` is set in the meta tag so htmx does not
   insert a <style> block, which would force `style-src 'unsafe-inline'`
   on every page. These are those two rules, in our own file. */

.htmx-indicator {
  opacity: 0;
}

.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
  opacity: 1;
}


/* =====================================================================
   Pantallas de operación: turno, supervisión, relación, inicio.
   Mismos tokens, mismos patrones; nada nuevo se inventa aquí.
   ===================================================================== */

/* --- subtítulos y notas dentro de una tarjeta ------------------------ */
.tarjeta__subtitulo {
  margin: var(--e5) 0 var(--e2);
  font-size: var(--t-medio);
  line-height: var(--linea-apretada);
  color: var(--tinta);
}

.tarjeta__nota {
  margin: 0 0 var(--e3);
  font-size: var(--t-pequeno);
  color: var(--tinta-media);
}

.tarjeta--secundaria {
  border-left: 3px solid var(--filete-fuerte);
}

/* El rojo solo bloquea: esta tarjeta CONTIENE una acción que borra,
   así que el filete rojo está justificado, no decorativo. */
.tarjeta--peligro {
  border-left: 3px solid var(--rojo);
}

/* --- accesos del inicio ---------------------------------------------- */
.accesos {
  display: grid;
  gap: var(--e3);
  margin-top: var(--e4);
}

.acceso {
  display: block;
  padding: var(--e4);
  border: 1px solid var(--filete-fuerte);
  border-radius: var(--radio);
  background: var(--superficie);
  color: var(--tinta);
  text-decoration: none;
  min-height: var(--alto-boton);
}

.acceso:hover,
.acceso:focus-visible {
  border-color: var(--instrumento);
  outline: 2px solid var(--instrumento);
  outline-offset: 1px;
}

.acceso strong {
  display: block;
  font-size: var(--t-medio);
}

.acceso span {
  display: block;
  margin-top: var(--e1);
  font-size: var(--t-pequeno);
  color: var(--tinta-media);
}

/* --- enlaces del panel lateral --------------------------------------- */
.panel__enlaces {
  display: grid;
  gap: var(--e2);
  margin: var(--e5) 0;
}

.enlace {
  color: var(--tinta-panel);
  font-size: var(--t-pequeno);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* --- opciones de medidor (radios como tarjetas) ---------------------- */
.campo--opciones {
  border: 1px solid var(--borde-campo);
  border-radius: var(--radio);
  padding: var(--e3);
  margin: 0 0 var(--e4);
}

.opcion {
  display: block;
  padding: var(--e3);
  border-bottom: 1px solid var(--filete);
  cursor: pointer;
}

.opcion:last-child {
  border-bottom: none;
}

.opcion__titulo {
  margin-left: var(--e2);
  font-weight: 600;
}

.opcion__detalle {
  display: block;
  margin-left: var(--e6);
  font-size: var(--t-pequeno);
  color: var(--tinta-media);
}

/* --- rejilla de comprobantes y depósitos ----------------------------- */
.rejilla-fiscal {
  display: grid;
  gap: var(--e3);
  margin-bottom: var(--e4);
}

.rejilla-fiscal__fila {
  display: grid;
  gap: var(--e2);
}

@media (min-width: 40rem) {
  .rejilla-fiscal__fila {
    grid-template-columns: 8rem 1fr 1fr 1fr;
    align-items: center;
  }
}

/* --- un cierre en la pantalla de supervisión ------------------------- */
.cierre {
  border: 1px solid var(--filete-fuerte);
  border-radius: var(--radio);
  padding: var(--e4);
  margin-bottom: var(--e4);
  background: var(--superficie);
}

.cierre--enfocado {
  outline: 2px solid var(--instrumento);
}

.cierre__cabecera {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2) var(--e3);
  align-items: baseline;
  margin-bottom: var(--e3);
}

.cierre__estado {
  margin-left: auto;
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: var(--e1) var(--e2);
  border: 1px solid var(--filete-fuerte);
  border-radius: var(--radio);
  color: var(--tinta-media);
}

.cierre__estado--recibido {
  color: var(--verde);
  border-color: var(--verde);
}

.cierre__estado--anulado {
  color: var(--rojo);
  border-color: var(--rojo);
}

.cierre__formulario {
  margin-top: var(--e4);
  padding-top: var(--e3);
  border-top: 1px solid var(--filete);
}

.libro--cierre,
.libro--recepcion {
  margin-top: var(--e3);
}

/* --- confirmación con casilla ---------------------------------------- */
.campo--confirmacion {
  margin: var(--e4) 0;
}

.campo__etiqueta--casilla {
  display: flex;
  gap: var(--e2);
  align-items: flex-start;
  font-weight: 400;
  cursor: pointer;
}

.campo__etiqueta--casilla input {
  width: 1.5rem;
  height: 1.5rem;
  margin-top: 0.1rem;
}

/* --- el botón que borra ---------------------------------------------- */
.boton--peligro {
  background: var(--superficie);
  color: var(--rojo);
  border: 1px solid var(--rojo);
}

.boton--peligro:hover,
.boton--peligro:focus-visible {
  background: var(--rojo);
  color: #FFFFFF;
}

/* --- el cuadre en vivo del cierre de turno --------------------------- */
.cuadre {
  margin: var(--e5) 0;
  padding: var(--e4);
  border: 1px solid var(--filete-fuerte);
  border-radius: var(--radio);
  background: var(--superficie);
}

.cuadre__rotulo {
  margin: var(--e3) 0 0;
  font-size: var(--t-pequeno);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--tinta-media);
}

.cuadre__cifra {
  margin: 0 0 var(--e3);
  font-size: var(--t-cifra);
  line-height: var(--linea-apretada);
  font-variant-numeric: tabular-nums;
  color: var(--tinta);
}