/* ──────────────────────────────────────────────────────────────────────────
   RospARking — tokens de las superficies del conductor.

   Claro por default (se usa al sol), oscuro soportado por preferencia del
   sistema. Los tres estados posibles están cubiertos: sin marca en el root
   manda prefers-color-scheme; con data-theme manda la elección explícita.

   Pegar tal cual al principio de la hoja de estilos de la app y trabajar
   SIEMPRE sobre las variables — un color literal en un componente es un color
   que va a quedar ilegible en el otro tema.
   ────────────────────────────────────────────────────────────────────────── */

:root {
  /* Superficies */
  --rp-ground:      #f4f5f9;  /* fondo de la app */
  --rp-surface:     #ffffff;  /* tarjetas */
  --rp-surface-2:   #eceef6;  /* zonas hundidas, chips */
  --rp-line:        #d7dbea;
  --rp-line-strong: #b6bdd4;

  /* Texto */
  --rp-ink:       #0f1428;
  --rp-ink-soft:  #39415f;
  --rp-muted:     #5b6480;

  /* Marca */
  --rp-azul:        #1a237e;  /* acción primaria, links, foco */
  --rp-azul-tinte:  #e6e8f5;  /* fondo suave de la marca */
  --rp-naranja:     #d95a00;  /* plata en curso, vencimientos. Caro: usar poco */
  --rp-naranja-tinte:#fdeadb;

  /* Semánticos — separados de la marca a propósito */
  --rp-ok:        #1f7a4d;
  --rp-ok-tinte:  #e2f3ea;
  --rp-alerta:    #9a5b00;
  --rp-alerta-tinte:#fbf0dc;
  --rp-error:     #b3261e;
  --rp-error-tinte:#fbe6e4;

  /* Tipografía */
  --rp-display: "Space Grotesk", system-ui, sans-serif;
  --rp-body:    "IBM Plex Sans", system-ui, sans-serif;
  --rp-mono:    "IBM Plex Mono", ui-monospace, monospace;

  /* Escala: el monto es el dato más grande de la pantalla */
  --rp-monto:   40px;
  --rp-titulo:  24px;
  --rp-texto:   16px;   /* nunca menos de 16 en el cuerpo: menos, iOS hace zoom al tipear */
  --rp-chico:   13.5px;

  /* Geometría */
  --rp-radio:    12px;
  --rp-radio-sm: 8px;
  --rp-touch:    48px;  /* alto mínimo de cualquier cosa que se toque */
  --rp-gutter:   16px;  /* margen lateral mínimo, en cualquier ancho */
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --rp-ground:      #070a18;
    --rp-surface:     #0e1430;
    --rp-surface-2:   #161e45;
    --rp-line:        #202a4d;
    --rp-line-strong: #2f3c66;

    --rp-ink:       #eef0fb;
    --rp-ink-soft:  #b9c0e4;
    --rp-muted:     #8189b6;

    --rp-azul:        #5868ff;   /* el #1a237e no se lee sobre fondo oscuro */
    --rp-azul-tinte:  #161f45;
    --rp-naranja:     #ff8a2b;
    --rp-naranja-tinte:#2c1c0c;

    --rp-ok:        #2fd576;
    --rp-ok-tinte:  #10281d;
    --rp-alerta:    #e0a23c;
    --rp-alerta-tinte:#2a2009;
    --rp-error:     #ff6b5e;
    --rp-error-tinte:#2e1210;
  }
}

:root[data-theme="dark"] {
  --rp-ground:      #070a18;
  --rp-surface:     #0e1430;
  --rp-surface-2:   #161e45;
  --rp-line:        #202a4d;
  --rp-line-strong: #2f3c66;

  --rp-ink:       #eef0fb;
  --rp-ink-soft:  #b9c0e4;
  --rp-muted:     #8189b6;

  --rp-azul:        #5868ff;
  --rp-azul-tinte:  #161f45;
  --rp-naranja:     #ff8a2b;
  --rp-naranja-tinte:#2c1c0c;

  --rp-ok:        #2fd576;
  --rp-ok-tinte:  #10281d;
  --rp-alerta:    #e0a23c;
  --rp-alerta-tinte:#2a2009;
  --rp-error:     #ff6b5e;
  --rp-error-tinte:#2e1210;
}

/* ── Piezas que se repiten en toda la app ──────────────────────────────── */

body {
  margin: 0;
  background: var(--rp-ground);
  color: var(--rp-ink);
  font-family: var(--rp-body);
  font-size: var(--rp-texto);
  line-height: 1.55;
}

/* Los tres datos protagonistas. .rp-patente se escribe con los espacios de la
   chapa en el HTML ("AB 123 CD"), no con letter-spacing: así se copia bien. */
.rp-patente {
  font-family: var(--rp-mono);
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.rp-monto {
  font-family: var(--rp-mono);
  font-size: var(--rp-monto);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.rp-hora,
.rp-dato {
  font-family: var(--rp-mono);
  font-variant-numeric: tabular-nums;
}

/* Todo lo que se toca. El alto mínimo no es estético: es el ancho de un pulgar. */
.rp-accion {
  min-height: var(--rp-touch);
  padding: 0 20px;
  border: 0;
  border-radius: var(--rp-radio-sm);
  background: var(--rp-azul);
  color: #fff;
  font-family: var(--rp-body);
  font-size: var(--rp-texto);
  font-weight: 600;
  cursor: pointer;
}

.rp-accion--secundaria {
  background: transparent;
  color: var(--rp-azul);
  border: 1px solid var(--rp-line-strong);
}

:focus-visible {
  outline: 2px solid var(--rp-azul);
  outline-offset: 2px;
}

/* La marca de honestidad del dato: acompaña a cualquier número que pueda estar
   viejo o ser estimado. Nunca mostrar el número sin esto. */
.rp-sello {
  font-family: var(--rp-mono);
  font-size: var(--rp-chico);
  color: var(--rp-muted);
}

/* ──────────────────────────────────────────────────────────────────────────
   Componentes de la app del conductor.
   Todo lo de arriba viene del skill diseno-rosparking; lo de acá es esta app.
   ────────────────────────────────────────────────────────────────────────── */

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

/* Un gutter, definido una vez. La app se usa con el pulgar: nada pegado al borde. */
.rp-pantalla {
  max-width: 560px;
  margin: 0 auto;
  padding-inline: var(--rp-gutter);
  padding-block: 20px 108px; /* el de abajo tiene que despejar la barra fija de acción */
  min-height: 100dvh;
}

/* ── Barra superior ─────────────────────────────────────────────────────── */
.rp-barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-block: 4px 18px;
}

.rp-marca {
  font-family: var(--rp-display);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: -.01em;
  color: var(--rp-ink);
  text-decoration: none;
}

.rp-marca span { color: var(--rp-naranja); }

.rp-salir {
  background: none;
  border: 0;
  color: var(--rp-muted);
  font-family: var(--rp-body);
  font-size: var(--rp-chico);
  min-height: var(--rp-touch);
  padding-inline: 8px;
  cursor: pointer;
}

/* ── Títulos ────────────────────────────────────────────────────────────── */
h1, h2, h3 {
  font-family: var(--rp-display);
  letter-spacing: -.01em;
  text-wrap: balance;
  margin: 0;
}

h1 { font-size: var(--rp-titulo); font-weight: 700; }

/* Blazor enfoca el h1 al cambiar de pantalla para que el lector de pantalla anuncie dónde
   estás. Ese foco no lo pidió nadie con el dedo ni con el teclado, así que no se pinta:
   dibujarlo deja un recuadro azul alrededor del título que parece un error. */
h1:focus, h1:focus-visible { outline: none; }
h2 { font-size: 18px; font-weight: 600; }

.rp-sub { color: var(--rp-muted); margin: 6px 0 0; font-size: 15px; }

/* ── Tarjetas ───────────────────────────────────────────────────────────── */
.rp-tarjeta {
  background: var(--rp-surface);
  border: 1px solid var(--rp-line);
  border-radius: var(--rp-radio);
  padding: 20px;
}

.rp-tarjeta + .rp-tarjeta { margin-top: 12px; }

/* ── La estadía en curso: lo único grande de la pantalla ────────────────── */
.rp-estadia__patente {
  font-size: 20px;
  color: var(--rp-ink);
}

.rp-estadia__lugar {
  color: var(--rp-muted);
  font-size: 15px;
  margin: 4px 0 18px;
}

.rp-estadia__etiqueta {
  font-family: var(--rp-mono);
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--rp-muted);
  display: block;
  margin-bottom: 6px;
}

.rp-estadia__monto { color: var(--rp-naranja); }

/* El sello va SIEMPRE pegado al monto: un número sin su hora no se puede discutir. */
.rp-estadia__sello { display: block; margin-top: 8px; }

.rp-estadia__datos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 14px;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--rp-line);
}

.rp-dato-valor { display: block; font-size: 17px; margin-top: 2px; }

/* ── Avisos ─────────────────────────────────────────────────────────────── */
.rp-aviso {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  border-radius: var(--rp-radio-sm);
  padding: 12px 14px;
  font-size: 14.5px;
  line-height: 1.45;
  margin-bottom: 12px;
}

.rp-aviso--info    { background: var(--rp-azul-tinte);    color: var(--rp-ink-soft); }
.rp-aviso--ok      { background: var(--rp-ok-tinte);      color: var(--rp-ok); }
.rp-aviso--alerta  { background: var(--rp-alerta-tinte);  color: var(--rp-alerta); }
.rp-aviso--error   { background: var(--rp-error-tinte);   color: var(--rp-error); }

/* ── Formularios ────────────────────────────────────────────────────────── */
.rp-campo { display: block; margin-bottom: 16px; }

.rp-campo > span {
  display: block;
  font-size: 14px;
  color: var(--rp-ink-soft);
  margin-bottom: 6px;
}

.rp-campo input {
  width: 100%;
  min-height: var(--rp-touch);
  padding: 0 14px;
  border: 1px solid var(--rp-line-strong);
  border-radius: var(--rp-radio-sm);
  background: var(--rp-surface);
  color: var(--rp-ink);
  font-family: var(--rp-body);
  font-size: var(--rp-texto); /* 16px o iOS hace zoom al tipear */
}

.rp-campo input.rp-campo--patente {
  font-family: var(--rp-mono);
  text-transform: uppercase;
  letter-spacing: .08em;
}

.rp-acciones { display: grid; gap: 10px; margin-top: 20px; }

.rp-accion:disabled { opacity: .55; cursor: default; }

.rp-link {
  background: none;
  border: 0;
  color: var(--rp-azul);
  font-family: var(--rp-body);
  font-size: 15px;
  min-height: var(--rp-touch);
  cursor: pointer;
  text-decoration: underline;
}

/* ── Lista de tickets ───────────────────────────────────────────────────── */
.rp-lista { display: grid; gap: 10px; margin: 16px 0 0; padding: 0; list-style: none; }

.rp-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: var(--rp-touch);
  padding: 14px 16px;
  background: var(--rp-surface);
  border: 1px solid var(--rp-line);
  border-radius: var(--rp-radio-sm);
  color: var(--rp-ink);
  font-family: var(--rp-body);
  font-size: var(--rp-texto);
  text-align: left;
  cursor: pointer;
}

.rp-item small { display: block; color: var(--rp-muted); font-size: 13px; margin-top: 2px; }

/* El monto no se parte en dos líneas por más largo que sea el texto de al lado: es el dato
   que se viene a mirar, y "$ 5." arriba de "200" se lee como otro número. */
.rp-item > .rp-dato,
.rp-item > span:last-child { flex-shrink: 0; white-space: nowrap; }

/* Y el texto de la izquierda se banca ser el que ceda. */
.rp-item > span:first-child { min-width: 0; }

/* ── Barra de acción fija: escanear está siempre a un toque ─────────────── */
.rp-barra-accion {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  padding: 12px var(--rp-gutter) calc(12px + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--rp-ground) 92%, transparent);
  border-top: 1px solid var(--rp-line);
  backdrop-filter: blur(8px);
}

.rp-barra-accion > .rp-accion {
  display: block;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  min-height: 54px;
  font-size: 17px;
}

/* ── Esqueleto de carga ─────────────────────────────────────────────────── */
/* Un bloque gris del tamaño de lo que viene, no un spinner: la pantalla no salta
   cuando llegan los datos, y se entiende qué se está esperando. */
.rp-esqueleto {
  background: var(--rp-surface-2);
  border-radius: var(--rp-radio-sm);
  animation: rp-latido 1.4s ease-in-out infinite;
}

.rp-esqueleto--linea { height: 14px; margin-bottom: 10px; }
.rp-esqueleto--monto { height: 42px; width: 60%; margin: 8px 0 14px; }

@keyframes rp-latido {
  0%, 100% { opacity: 1; }
  50% { opacity: .55; }
}

@media (prefers-reduced-motion: reduce) {
  .rp-esqueleto { animation: none; }
}

/* ── Vacío ──────────────────────────────────────────────────────────────── */
.rp-vacio {
  text-align: center;
  padding: 36px 16px;
  color: var(--rp-muted);
}

.rp-vacio h2 { color: var(--rp-ink); margin-bottom: 8px; }

/* ── Escáner ────────────────────────────────────────────────────────────── */
.rp-camara {
  width: 100%;
  aspect-ratio: 3 / 4;
  max-width: 100%;
  border-radius: var(--rp-radio);
  background: #000;
  object-fit: cover;
}

/* ── Navegación ─────────────────────────────────────────────────────────── */
.rp-nav {
  display: flex;
  gap: 4px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--rp-line);
}

.rp-nav__link {
  min-height: var(--rp-touch);
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
  color: var(--rp-muted);
  font-size: 15px;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}

.rp-nav__link.active {
  color: var(--rp-azul);
  font-weight: 600;
  border-bottom-color: var(--rp-azul);
}

/* ── Selector de período ────────────────────────────────────────────────── */
.rp-periodo { display: flex; gap: 6px; margin: 4px 0 18px; flex-wrap: wrap; }

.rp-periodo__opcion {
  min-height: var(--rp-touch);
  padding: 0 14px;
  border: 1px solid var(--rp-line-strong);
  border-radius: var(--rp-radio-sm);
  background: var(--rp-surface);
  color: var(--rp-ink-soft);
  font-family: var(--rp-body);
  font-size: 14.5px;
  cursor: pointer;
}

.rp-periodo__opcion--activa {
  background: var(--rp-azul);
  border-color: var(--rp-azul);
  color: #fff;
  font-weight: 600;
}