/* Estilos de la PWA. Misma familia visual que la del proyecto original (azul
   #1565c0, tarjetas blancas, controles grandes para el dedo), en fichero aparte:
   sin nada en línea en el HTML, la CSP puede ser `default-src 'self'` de verdad. */
:root { --primario: #1565c0; --primario-suave: #f2f6fb; --peligro: #a40000; --gris: #667; }
* { box-sizing: border-box; margin: 0; }
body { font-family: system-ui, sans-serif; background: var(--primario-suave); color: #1c1c1c; }
/* Los botones no heredan la tipografía por defecto y salían en otra letra. */
button { font-family: inherit; cursor: pointer; }
[hidden] { display: none !important; }

header { background: var(--primario); color: #fff; padding: 0.8em 1em; display: flex;
         justify-content: space-between; align-items: center; gap: 0.6em; }
header h1 { font-size: 1.1em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
header button { background: none; border: 1px solid #fff; color: #fff; border-radius: 6px;
                padding: 0.4em 0.8em; font-size: 0.9em; }
header .acciones { display: flex; gap: 0.5em; align-items: center; flex: none; }
/* El de instalar se ve una sola vez, así que destaca sobre el de Salir. */
header #boton-instalar { background: #fff; color: var(--primario); font-weight: 600; }
#quien { font-size: 0.9em; opacity: 0.9; white-space: nowrap; overflow: hidden;
         text-overflow: ellipsis; max-width: 34vw; }

.franja { background: #fff; border-bottom: 1px solid #d8e2ee; color: #35485c; font-size: 0.9em;
          padding: 0.7em 1em; display: flex; gap: 0.5em; align-items: center;
          justify-content: space-between; }
.franja button { background: none; border: 0; color: #7a8a99; font-size: 1.1em; padding: 0 0.3em; }
.franja.alerta { background: #fff4e5; border-bottom-color: #f0c78a; color: #7a4a00; }
.franja.alerta button { border: 1px solid #b45309; color: #b45309; border-radius: 6px;
                        font-size: 0.9em; padding: 0.35em 0.7em; white-space: nowrap; }
.franja.sin-red { background: var(--peligro); color: #fff; border: 0; justify-content: center; }

main { max-width: 640px; margin: 0 auto; padding: 1em; }
nav { display: flex; gap: 0.5em; margin-bottom: 1em; flex-wrap: wrap; }
nav button { flex: 1 1 auto; padding: 0.7em; border: 1px solid var(--primario); background: #fff;
             color: var(--primario); border-radius: 8px; font-size: 1em; }
nav button.activa { background: var(--primario); color: #fff; }

h2 { font-size: 1.05em; color: var(--primario); margin: 0 0 0.7em; }
h2.separado { margin-top: 1.6em; }
form { display: flex; flex-direction: column; gap: 0.7em; }
label { font-weight: 600; font-size: 0.9em; display: flex; flex-direction: column; gap: 0.25em; }
label .opcional { font-weight: 400; color: var(--gris); }
input, select, textarea { padding: 0.7em; border: 1px solid #bbb; border-radius: 8px;
                          font-size: 1em; width: 100%; font-family: inherit; background: #fff; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--primario); outline-offset: 1px; }
.casilla { flex-direction: row; align-items: center; gap: 0.5em; font-weight: 400; }
.casilla input { width: auto; flex: none; padding: 0; transform: scale(1.25); }
/* `align-items: end`: si una etiqueta ocupa dos líneas («Remolque (si lleva)») y
   su pareja una, los dos campos siguen a la misma altura. */
.dos { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7em; align-items: end; }
.tres { display: grid; grid-template-columns: 1fr 2fr; gap: 0.7em; }

fieldset { border: 1px solid #cfd8e3; border-radius: 10px; padding: 0.8em; display: flex;
           flex-direction: column; gap: 0.7em; background: #fff; }
legend { font-weight: 700; color: var(--primario); padding: 0 0.3em; }
details { border: 1px dashed #9bb0c9; border-radius: 10px; padding: 0.6em 0.8em; }
details summary { font-weight: 600; color: var(--primario); cursor: pointer; font-size: 0.92em; }
.campos-extra { display: flex; flex-direction: column; gap: 0.7em; margin-top: 0.6em; }
/* El nombre del lugar manda sobre su ficha: es lo que exige el art. 6.c. */
.lugar input { font-size: 1.08em; }

button.principal, a.principal { background: var(--primario); color: #fff; border: none;
  border-radius: 8px; padding: 0.9em; font-size: 1.1em; margin-top: 0.4em; width: 100%;
  display: block; text-align: center; text-decoration: none; font-family: inherit; }
button.principal:disabled { opacity: 0.6; }
button.secundario, a.secundario { display: block; width: 100%; text-align: center; padding: 0.8em;
  border: 1px solid var(--primario); background: #fff; color: var(--primario); border-radius: 8px;
  font-size: 1em; text-decoration: none; }
button.peligro { border-color: var(--peligro); color: var(--peligro); }
/* Acción de texto, no un botón: va DEBAJO del principal y no compite con él. Un
   botón ancho justo encima de «Emitir» invita a pulsarlo por error, y este vacía
   lo escrito. */
.accion-texto { display: block; margin: 0.9em auto 0; background: none; border: none;
  color: var(--gris); font-size: 0.85em; text-decoration: underline; cursor: pointer;
  padding: 0.3em 0.6em; }
.accion-texto:hover { color: var(--peligro); }

.aviso { color: var(--peligro); min-height: 1.2em; font-size: 0.95em; }
.aviso ul { margin: 0.3em 0 0 1.2em; padding: 0; }
.correcto { color: #1b6e2f; min-height: 1.2em; font-size: 0.95em; }
.nota { font-size: 0.88em; color: #555; line-height: 1.4; }
.centrado { text-align: center; }

.tarjeta { background: #fff; border: 1px solid #ddd; border-radius: 10px; padding: 0.8em;
           margin-bottom: 0.7em; }
.carta-cabecera { display: flex; align-items: baseline; gap: 0.5em; flex-wrap: wrap; }
.carta-cabecera .numero { font-weight: 700; color: var(--primario); }
.carta-cabecera .fecha { color: #555; font-size: 0.9em; }
.carta-datos { font-size: 0.92em; color: #333; margin-top: 0.3em; line-height: 1.4; }
.carta-acciones { display: flex; gap: 0.5em; margin-top: 0.6em; flex-wrap: wrap; }
.carta-acciones a, .carta-acciones button { padding: 0.45em 0.8em; border: 1px solid var(--primario);
  border-radius: 8px; background: #fff; color: var(--primario); text-decoration: none;
  font-size: 0.92em; font-family: inherit; }
.carta-acciones .peligro { border-color: var(--peligro); color: var(--peligro); }
.chip { border-radius: 6px; padding: 0.1em 0.5em; font-size: 0.78em; font-weight: 700;
        letter-spacing: 0.03em; }
.chip.anulada { background: var(--peligro); color: #fff; }
.chip.modificada { background: #fdf3e7; color: #b45309; border: 1px solid #e9c48f; }
.chip.admin { background: var(--primario); color: #fff; }
.chip.baja { background: #ddd; color: #444; }
.tarjeta.anulada .carta-datos { text-decoration: line-through; opacity: 0.6; }
/* El historial de una carta, dentro de su tarjeta (solo el administrador). */
.historial { list-style: none; padding: 0.6em 0 0; margin: 0.7em 0 0; border-top: 1px dashed #cfd8e3;
             display: flex; flex-direction: column; gap: 0.45em; font-size: 0.88em; }
.historial .evento { display: grid; grid-template-columns: auto 1fr; gap: 0 0.6em;
                     border-left: 3px solid #cfd8e3; padding-left: 0.6em; }
.historial .cuando { color: var(--gris); font-variant-numeric: tabular-nums; }
.historial .que { font-weight: 600; }
.historial .quien, .historial .detalle { grid-column: 1 / -1; color: #35485c; overflow-wrap: anywhere; }
.historial .evento-emitida { border-left-color: var(--primario); }
.historial .evento-modificada { border-left-color: #b45309; }
.historial .evento-anulada { border-left-color: var(--peligro); }
/* [2026-09-25] La contraseña de un cliente del portal se enseña una vez: grande. */
.contrasena-nueva { border-color: var(--primario); display: flex; flex-direction: column; gap: 0.5em; }
.contrasena { font-family: Consolas, "Cascadia Mono", monospace; font-size: 1.5em; letter-spacing: 0.08em;
              text-align: center; margin: 0.2em 0; }

.emitida { text-align: center; }
.emitida .numero-grande { font-size: 1.6em; font-weight: 700; color: var(--primario); margin: 0.2em 0; }
.emitida .acciones { display: flex; flex-direction: column; gap: 0.6em; margin-top: 1em; }
.url-qr { font-family: ui-monospace, Consolas, monospace; font-size: 0.78em; word-break: break-all;
          color: #555; margin-top: 0.8em; user-select: all; }

/* `form.barra` y no `.barra`: tiene que ganarle a la regla general de `form`, que
   apila en columna y mandaba el botón «Buscar» debajo del campo. */
form.barra { display: flex; flex-direction: row; gap: 0.4em; align-items: center; margin-bottom: 0.7em; }
.barra input { flex: 1; }
.barra button { padding: 0.65em 0.9em; border: 1px solid var(--primario); background: #fff;
                color: var(--primario); border-radius: 8px; font-size: 1em; flex: none; }

.sugerencias { position: relative; }
.sugerencias ul { position: absolute; z-index: 5; left: 0; right: 0; background: #fff;
                  border: 1px solid #bbb; border-radius: 8px; list-style: none; padding: 0;
                  margin: 0.15em 0 0; max-height: 40vh; overflow-y: auto;
                  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12); }
.sugerencias li { padding: 0.6em; border-bottom: 1px solid #eee; cursor: pointer; }
.sugerencias li small { display: block; color: #666; font-size: 0.82em; }
/* La que elegiría el Enter, para que se vea cuál es. */
.sugerencias li.resaltada { background: var(--primario); color: #fff; }
.sugerencias li.resaltada small { color: rgba(255, 255, 255, 0.85); }

.logo-actual { max-width: 12em; max-height: 6em; display: block; margin: 0.4em 0; border: 1px solid #ddd;
               border-radius: 6px; background: #fff; padding: 0.3em; }

/* Pantalla de espera mientras se genera el PDF. Tapa la pantalla a propósito: lo
   que hay que impedir es el segundo toque, que emitiría una segunda carta del
   mismo viaje. */
#esperando { position: fixed; inset: 0; z-index: 50; background: rgba(255, 255, 255, 0.94);
             display: flex; flex-direction: column; align-items: center; justify-content: center;
             gap: 1em; padding: 2em; text-align: center; }
#esperando .rueda { width: 3em; height: 3em; border-radius: 50%; border: 0.35em solid #d9e2ec;
                    border-top-color: var(--primario); animation: girar 0.9s linear infinite; }
#esperando .titulo { font-size: 1.15em; font-weight: bold; color: var(--primario); }
#esperando .detalle { color: #555; max-width: 20em; }
@keyframes girar { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { #esperando .rueda { animation-duration: 3s; } }

/* Ayuda: el vídeo a pantalla completa, por encima de todo (también de #esperando,
   aunque no coinciden: la ayuda solo se abre desde la cabecera). */
body.con-ayuda { overflow: hidden; }
header #boton-ayuda { width: 2.1em; padding: 0.35em 0; font-weight: 700; border-radius: 50%; }
#ayuda { position: fixed; inset: 0; z-index: 60; background: #000; color: #fff;
         display: flex; flex-direction: column; }
.ayuda-cabecera { display: flex; align-items: center; justify-content: space-between; gap: 1em;
                  padding: 0.6em 1em; background: var(--primario); }
#ayuda-titulo { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#ayuda-cerrar { background: none; border: 1px solid #fff; color: #fff; border-radius: 6px;
                padding: 0.35em 0.8em; font-size: 1em; flex: none; }
#ayuda-video { flex: 1; min-height: 0; width: 100%; background: #000; object-fit: contain; }
#ayuda-eleccion { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 1em;
                  padding: 1.5em; max-width: 28em; width: 100%; margin: 0 auto; }
#ayuda-eleccion p { text-align: center; font-size: 1.1em; }
#ayuda-eleccion .detalle { font-size: 0.85em; font-weight: normal; opacity: 0.85; }
#ayuda .aviso { color: #ffb4a8; text-align: center; padding: 0 1em; }

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