/* Aldaba (E3, Vikunja 864). Movil primero, tema claro para leer al sol.
 *
 * Marca: los valores salen de marea-marca (dist/tokens.css y dist/fonts.css),
 * copiados solo los que se usan. Roles del sistema: tinta en cuerpo y cabecera,
 * indigo en botones y enlaces, turquesa como fondo o sobre tinta, violeta solo
 * en objetos graficos (el foco). La cinta es la unica decoracion.
 * Aceptó y rechazo llevan su color semantico, ajeno a la marca, y su signo
 * dibujado: se distinguen sin depender del color.
 *
 * Fuentes en local, precacheadas por sw.js. Solo el corte latin: las calles con
 * letras de latin-ext caen a la fuente del sistema, y se leen igual. Los woff2
 * van tal cual, sin re-subsetear, por el nombre reservado de la OFL. */
@font-face {
  font-family: "Sora Variable"; font-style: normal; font-weight: 100 800; font-display: swap;
  src: url("/fonts/sora-latin-wght-normal.woff2") format("woff2-variations");
}
@font-face {
  font-family: "Manrope Variable"; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url("/fonts/manrope-latin-wght-normal.woff2") format("woff2-variations");
}
:root {
  --tinta: #17142A;
  --indigo: #3A35A8;
  --indigo-hondo: #2A2680;
  --turquesa: #5CE0CD;
  --violeta: #5A7FF9;
  --blanco: #FFFFFF;
  --papel: #F6F5FA;
  --filete: #E6E4EE;
  --borde: #8B88A3;
  --suave: #605C7B;
  --acepto: #1b7f4b;
  --rechazo: #b3261e;
  --noabre: #3A35A8;
  --noatendida: #605C7B;
  --titulo: "Sora Variable", Sora, "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --texto: "Manrope Variable", Manrope, "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --radio-control: 6px;
  --radio-tarjeta: 12px;
  --sombra-tarjeta: 0 1px 2px #17142A14;
  --sombra-elevada: 0 8px 24px -8px #17142A1F;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { overflow-x: clip; }
body {
  font-family: var(--texto);
  font-size: 17px;
  font-weight: 500;
  line-height: 1.45;
  color: var(--tinta);
  background: var(--papel);
  caret-color: var(--indigo);
  accent-color: var(--indigo);
  -webkit-tap-highlight-color: transparent;
}
::selection { background: var(--turquesa); color: var(--tinta); }
:where(a, button, input, select, textarea, summary):focus-visible { outline: 3px solid var(--violeta); outline-offset: 2px; }
main { max-width: 560px; margin: 0 auto; padding: 12px 16px calc(96px + env(safe-area-inset-bottom)); }
.cargando { padding: 2rem 1rem; text-align: center; color: var(--suave); }
h1, h2 { font-family: var(--titulo); font-weight: 700; line-height: 1.2; letter-spacing: -.02em; text-wrap: balance; }
h1 { font-size: 1.45rem; margin: .4rem 0 .6rem; }
h2 { font-size: 1.15rem; margin: 1.4rem 0 .5rem; }
p { margin: .4rem 0; }
small, .nota { color: var(--suave); font-size: .88rem; }
b, strong { font-weight: 700; }

/* Cabecera: tinta a todo el ancho y la cinta debajo (8 px, 66 % y 34 %) */
header.barra {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin: -12px calc(50% - 50vw) 14px;
  padding: calc(10px + env(safe-area-inset-top)) max(16px, calc(50vw - 264px)) 18px;
  color: var(--blanco);
  background:
    linear-gradient(to right, var(--turquesa) 0%, var(--turquesa) 66%, var(--violeta) 66%, var(--violeta) 100%) bottom / 100% 8px no-repeat,
    var(--tinta);
}
.marca { display: inline-flex; align-items: center; gap: 8px; font-family: var(--titulo); font-size: 1.2rem; font-weight: 700; letter-spacing: -.02em; color: var(--blanco); }
.icono-puerta { display: block; flex: none; }
.pildora { font-size: .8rem; font-weight: 600; line-height: 1.2; padding: 4px 10px; border-radius: 999px; background: var(--turquesa); color: var(--tinta); text-align: center; }
.pildora.off { background: #fff3e0; color: #8a4b00; }

.tarjeta { background: var(--blanco); border: 1px solid var(--filete); border-radius: var(--radio-tarjeta); box-shadow: var(--sombra-tarjeta); padding: 14px; margin: 10px 0; }
button.tarjeta { border-color: var(--borde); }

button, .boton {
  font: inherit; color: inherit; border: 0; border-radius: var(--radio-control); cursor: pointer;
  min-height: 48px; padding: 10px 16px; touch-action: manipulation;
}
button:disabled { opacity: .45; cursor: default; }
.primario { background: var(--indigo); color: var(--blanco); font-weight: 700; width: 100%; font-size: 1.05rem; min-height: 54px; }
.primario:active { background: var(--indigo-hondo); }
.secundario { background: var(--blanco); color: var(--indigo); font-weight: 700; border: 1.5px solid var(--indigo); }
.secundario:active { background: var(--filete); }
.peligro { background: #fbe9e7; color: var(--rechazo); font-weight: 700; }
.ancho { width: 100%; }
.enlace { background: none; color: var(--indigo); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; min-height: 40px; padding: 6px 4px; }
.enlace:active { color: var(--tinta); }
@media (hover: hover) {
  .primario:hover:enabled { background: var(--indigo-hondo); }
  .secundario:hover:enabled { background: var(--papel); }
  .enlace:hover:enabled { color: var(--tinta); }
}
.fila-botones { display: flex; gap: 10px; margin: 10px 0; }
.fila-botones > * { flex: 1; }

label { display: block; font-weight: 700; margin: 12px 0 4px; }
input[type=text], input[type=email], input[type=number], input[type=date], input[type=time], select {
  font: inherit; width: 100%; min-height: 48px; padding: 8px 12px;
  border: 1px solid var(--borde); border-radius: var(--radio-control); background: var(--blanco); color: var(--tinta);
}
::placeholder { color: var(--suave); opacity: 1; }
fieldset { border: 0; padding: 0; margin: 0; }
.opcion { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--borde); border-radius: var(--radio-control); margin: 6px 0; background: var(--blanco); font-weight: 500; }
.opcion input { width: 22px; height: 22px; flex: none; }

/* Jornada (contador) */
.estado-jornada { display: flex; justify-content: space-between; color: var(--suave); font-size: .92rem; font-variant-numeric: tabular-nums; }
.calle-activa { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.calle-activa .nombre { font-family: var(--titulo); font-size: 1.25rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; word-break: break-word; }
.calle-activa .rotulo { font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--suave); }
.clicker { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 12px 0; }
.clicker button {
  position: relative; min-height: 112px; color: var(--blanco); font-weight: 700; font-size: 1.05rem; line-height: 1.2;
  border-radius: var(--radio-tarjeta);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
}
.clicker .n { font-family: var(--titulo); font-size: 2.1rem; line-height: 1; font-variant-numeric: tabular-nums; }
.clicker .sub { font-weight: 500; font-size: .82rem; }
.b-acepto { background: var(--acepto); }
.b-rechazo { background: var(--rechazo); }
.b-noabre { background: var(--noabre); }
.b-noatendida { background: var(--noatendida); }
.b-acepto::before, .b-rechazo::before { content: ""; position: absolute; top: 10px; left: 10px; width: 26px; height: 26px; background: center / contain no-repeat; }
.b-acepto::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.5l5 5L19.5 7'/%3E%3C/svg%3E"); }
.b-rechazo::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E"); }
.clicker button:active { transform: scale(.97); }
@media (prefers-reduced-motion: reduce) { .clicker button:active { transform: none; } }
.extra { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.extra button { background: var(--blanco); border: 1px solid var(--borde); color: var(--tinta); font-weight: 600; line-height: 1.25; }
.totales { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; text-align: center; }
.totales div { background: var(--papel); border-radius: var(--radio-control); padding: 8px 4px; }
.totales b { display: block; font-family: var(--titulo); font-size: 1.3rem; color: var(--indigo); font-variant-numeric: tabular-nums; }
.totales span { font-size: .78rem; color: var(--suave); }

/* Hojas (paneles inferiores) */
.velo { position: fixed; inset: 0; background: rgba(23, 20, 42, .5); z-index: 10; display: flex; align-items: flex-end; justify-content: center; }
.hoja {
  background: var(--blanco); width: 100%; max-width: 560px; max-height: 88vh; overflow-y: auto;
  border-radius: var(--radio-tarjeta) var(--radio-tarjeta) 0 0; padding: 16px 16px calc(20px + env(safe-area-inset-bottom));
}
.hoja h2 { margin-top: 0; }
.lista-motivos { display: grid; gap: 8px; }
.lista-motivos button { background: var(--blanco); border: 1px solid var(--borde); text-align: left; display: flex; justify-content: space-between; align-items: center; gap: 10px; color: var(--tinta); line-height: 1.25; }
.lista-motivos button .n { color: var(--indigo); font-family: var(--titulo); font-weight: 700; font-variant-numeric: tabular-nums; }
.chip-otro { border-style: dashed !important; }
.calles-lista button { width: 100%; text-align: left; margin: 4px 0; background: var(--blanco); border: 1px solid var(--borde); color: var(--tinta); }
.calles-lista button.activa { border: 2px solid var(--indigo); font-weight: 700; }

/* Parte */
.resumen { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.resumen div { background: var(--blanco); border: 1px solid var(--filete); border-radius: var(--radio-control); padding: 8px 10px; line-height: 1.25; }
.resumen b { font-family: var(--titulo); font-size: 1.25rem; color: var(--indigo); font-variant-numeric: tabular-nums; }
details.calle { background: var(--blanco); border: 1px solid var(--borde); border-radius: var(--radio-control); margin: 8px 0; }
details.calle summary { padding: 12px 14px; font-weight: 700; cursor: pointer; list-style-position: inside; }
details.calle .cuerpo { padding: 0 14px 12px; }
.paso { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-top: 1px solid var(--filete); }
.paso span { flex: 1; }
.paso button { min-width: 48px; min-height: 44px; padding: 0; font-size: 1.3rem; background: var(--blanco); color: var(--indigo); border: 1.5px solid var(--indigo); }
.paso output { min-width: 2.5ch; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.aviso { background: #fff8e6; border: 1px solid #f2d59b; border-radius: var(--radio-control); padding: 10px 12px; margin: 10px 0; }
.aviso.error { background: #fbe9e7; border-color: #f0b8b1; }
.envio button { margin-top: 8px; }
.ok { background: #e8f5ee; border: 1px solid #b7dfc8; border-radius: var(--radio-control); padding: 10px 12px; margin: 10px 0; }
.foto img { max-width: 100%; border-radius: var(--radio-control); border: 1px solid var(--borde); }
.jornada-item { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.etiqueta { font-size: .75rem; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--filete); color: var(--suave); white-space: nowrap; }
.etiqueta.confirmado { background: #e8f5ee; color: #176f42; }
.etiqueta.abierta { background: #fff3e0; color: #8a4b00; }
.etiqueta.enviado { background: #e8f5ee; color: #176f42; }
.etiqueta.pendiente, .etiqueta.reintento, .etiqueta.enviando, .etiqueta.sin_acceso { background: #fff3e0; color: #8a4b00; }
.etiqueta.rechazado { background: #fbe9e7; color: var(--rechazo); }
.pie { margin-top: 32px; text-align: center; color: var(--suave); font-size: .8rem; }
.pie img { display: block; width: 148px; height: auto; margin: 0 auto 10px; }

/* Acceso por codigo */
#codigo { font-family: var(--titulo); font-size: 1.5rem; font-weight: 700; letter-spacing: .08em; text-align: center; font-variant-numeric: tabular-nums; min-height: 56px; }
#codigo::placeholder { font-weight: 500; color: var(--borde); }
#f-codigo .primario { margin-top: 12px; }
#f-perdido .primario { margin-top: 12px; }
details[data-acceso] form { margin-top: 4px; }

/* Deteccion de calles (865) */
.gps-linea { margin: 2px 0 0; }
.gps-opcion { background: var(--blanco); border: 1px solid var(--filete); border-radius: var(--radio-tarjeta); padding: 12px 14px; margin: 12px 0; }
.gps-opcion summary { font-weight: 700; cursor: pointer; }
.gps-opcion p { font-size: .92rem; }
.fila-propuesta { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 0; border-top: 1px solid var(--filete); }
.fila-propuesta button { flex: 0 0 auto; }
.pie-mapa { color: var(--suave); font-size: .75rem; margin-top: 8px; }
/* Fijo arriba, sobre la cabecera: aparece sin mover el contador que se esta
 * tocando y sin tapar "Fin de jornada", asi nunca obliga a contestar */
#sugerencia {
  position: fixed; left: 0; right: 0; top: 0; z-index: 5; display: none; align-items: center; gap: 8px;
  max-width: 560px; margin: 0 auto; background: var(--blanco); border-bottom: 2px solid var(--indigo); box-shadow: var(--sombra-elevada);
  padding: calc(8px + env(safe-area-inset-top)) 16px 8px;
}
#sugerencia.visible { display: flex; }
#sugerencia span { flex: 1; }

#toast {
  position: fixed; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom)); transform: translateX(-50%);
  background: var(--tinta); color: var(--blanco); padding: 10px 16px; border-radius: 999px; font-size: .95rem;
  opacity: 0; transition: opacity .15s; pointer-events: none; z-index: 20; max-width: 92vw; text-align: center;
}
#toast.visible { opacity: .94; }