/* Los colores y las medidas del sistema.

   Los ocho primeros son los de siempre y conservan su valor exacto: el panel
   del chofer, el del cliente, el del afiliado y el de admin no cambian de
   aspecto. Lo que se anade debajo es lo que faltaba para que la marca de cada
   licenciatario llegue a las tarjetas en vez de quedarse en el body, que es
   de donde salia que 512 Limos LLC viera su texto lavanda sobre blanco a
   2,17:1 (docs/colores.md). */
:root{
  --tinta:#111;--suave:#666;--linea:#e2e2e2;--fondo:#f7f7f8;--acento:#0f4c81;--ok:#1b7f4b;--mal:#a32020;--aviso:#8a5a00;

  /* Superficies: las tres capas sobre las que se pinta. Antes estaban escritas
     a mano doce veces como #fff, asi que ninguna marca podia alcanzarlas. */
  --superficie:#fff;
  --superficie-2:#fafafa;
  --superficie-hundida:#eef2f7;

  /* El texto que va ENCIMA de una superficie. Por defecto es la tinta de
     siempre; comun.js lo fija aparte cuando la marca del licenciatario obliga,
     porque el color que se lee sobre el fondo de la pagina no es siempre el
     que se lee sobre una tarjeta.

     --texto es el neutro de los DATOS: el nombre del pasajero, el trayecto, el
     chofer, el importe. --titulo es el de la marca, y va solo en titulos,
     codigos de reserva y acentos. Separarlos importa: cuando el color de marca
     lo pintaba todo, una tabla entera salia en lavanda y dejaba de haber
     jerarquia, porque si todo destaca no destaca nada. */
  --texto:var(--tinta);
  --texto-suave:var(--suave);
  --titulo:var(--tinta);
  --tinta-sobre-superficie:var(--texto);
  --suave-sobre-superficie:var(--texto-suave);
  --sobre-acento:#fff;
  --acento-texto:var(--acento);

  /* Fondos de los avisos, a juego con --ok, --mal y --aviso. */
  --ok-fondo:#edf8f1;
  --mal-fondo:#fbeaea;
  --aviso-fondo:#fdf3e2;
  --acento-fondo:#eef2f7;
  --mal-borde:#e57373;

  /* Los nueve estados de un viaje, cada uno con su color propio.
     Antes se repartian en tres (comun.js): "asignada" y "completada" eran el
     mismo verde, y los cuatro estados de un viaje en curso el mismo ambar. En
     una pantalla de despacho eso es justo lo que hay que distinguir.
     Todos los pares texto/fondo pasan de 4,5:1; los mide contraste.spec.ts. */
  --estado-solicitada:#44515f;--estado-solicitada-fondo:#eceff3;
  --estado-confirmada:#1a4ea8;--estado-confirmada-fondo:#e3eefc;
  --estado-asignada:#4b3fa8;--estado-asignada-fondo:#eae7fb;
  --estado-en-camino:#8a5a00;--estado-en-camino-fondo:#fdf1dc;
  --estado-en-sitio:#8e2f6b;--estado-en-sitio-fondo:#fae4f0;
  --estado-a-bordo:#0d5a6b;--estado-a-bordo-fondo:#dcf0f4;
  --estado-completada:#156b3e;--estado-completada-fondo:#e7f5ec;
  --estado-cancelada:#8a4a4a;--estado-cancelada-fondo:#f4eaea;
  --estado-no-show:#a32020;--estado-no-show-fondo:#fbeaea;

  /* Que el navegador pinte con nosotros los controles, las barras de
     desplazamiento y los menus nativos. Sin esta linea, Chrome con el modo
     oscuro automatico repinta la pagina por su cuenta y el resultado no se
     parece a nada que hayamos elegido. */
  color-scheme:light;
}

/* Marca oscura. No lo enciende la preferencia del navegador, sino comun.js
   cuando el licenciatario ha elegido un fondo oscuro: es su decision, no la
   del visitante. Los valores de aqui son el respaldo; comun.js los afina con
   el tono exacto de su color. */
:root[data-tema=oscuro]{
  --fondo:#141416;
  --superficie:#1c1c20;
  --superficie-2:#232329;
  --superficie-hundida:#141418;
  --linea:#34343d;
  --tinta-sobre-superficie:#f2f2f4;
  --suave-sobre-superficie:#a8a8b2;
  --ok-fondo:#13301f;
  --mal-fondo:#3a1b1b;
  --aviso-fondo:#352a12;
  --acento-fondo:#1e2a38;
  --mal-borde:#7a3b3b;
  --tinta:#f2f2f4;
  --suave:#a8a8b2;
  --texto:#f2f2f4;
  --texto-suave:#a8a8b2;
  --titulo:#f2f2f4;
  --acento-texto:#6aa9e0;
  --ok:#7fd3a0;
  --mal:#f0a0a0;
  --aviso:#e8b964;
  --estado-solicitada:#8e97a3;--estado-solicitada-fondo:#262a30;
  --estado-confirmada:#7fb8f5;--estado-confirmada-fondo:#17283c;
  --estado-asignada:#c4a8f5;--estado-asignada-fondo:#241f3d;
  --estado-en-camino:#e8b964;--estado-en-camino-fondo:#352713;
  --estado-en-sitio:#eda4ce;--estado-en-sitio-fondo:#3a1b2e;
  --estado-a-bordo:#5fd0cc;--estado-a-bordo-fondo:#10303a;
  --estado-completada:#7fd3a0;--estado-completada-fondo:#133527;
  --estado-cancelada:#b9a4a4;--estado-cancelada-fondo:#302828;
  --estado-no-show:#f0a0a0;--estado-no-show-fondo:#3d1a1a;
  color-scheme:dark;
}
html,body{margin:0;padding:0}
body{font-family:-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:var(--tinta-sobre-superficie);background:var(--fondo);font-size:15px;line-height:1.45}
header.barra{background:var(--superficie);border-bottom:1px solid var(--linea);padding:10px 18px;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
header.barra .marca{font-weight:700;color:var(--acento-texto);text-decoration:none;font-size:17px}
header.barra nav a{color:var(--tinta-sobre-superficie);text-decoration:none;margin-inline-end:14px;font-size:14px}
header.barra nav a.activo{color:var(--acento-texto);font-weight:600}
header.barra .quien{margin-inline-start:auto;font-size:13px;color:var(--suave-sobre-superficie)}
main{max-width:1180px;margin:0 auto;padding:18px}
h1{font-size:21px;margin:0 0 4px;color:var(--titulo)}
h2{font-size:17px;margin:22px 0 8px;color:var(--titulo)}
p.guia{color:var(--suave-sobre-superficie);margin:0 0 14px;font-size:14px}
/* Los enlaces del contenido. Sin esta regla usaban el azul y el morado de
   serie del navegador: con una marca oscura, el codigo de un viaje ya visitado
   quedaba morado sobre casi negro y no habia forma de leerlo. */
a{color:var(--acento-texto)}
a:visited{color:var(--acento-texto)}
.tarjeta{background:var(--superficie);border:1px solid var(--linea);border-radius:8px;padding:16px;margin-bottom:16px}
.rejilla{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
label{display:block;font-size:13px;color:var(--suave-sobre-superficie);margin:8px 0 3px}
input,select,textarea{box-sizing:border-box;width:100%;padding:8px 9px;border:1px solid var(--linea);border-radius:6px;font-size:14px;background:var(--superficie);font-family:inherit}
textarea{min-height:64px}
button{background:var(--acento);color:var(--sobre-acento);border:0;border-radius:6px;padding:9px 14px;font-size:14px;cursor:pointer;margin-top:10px}
button.secundario{background:var(--superficie);color:var(--acento-texto);border:1px solid var(--acento)}
button.peligro{background:var(--mal)}
button.mini{padding:4px 8px;font-size:12px;margin:0;margin-inline-end:3px}
button:disabled{opacity:.5;cursor:default}
table{width:100%;border-collapse:collapse;font-size:13px;background:var(--superficie)}
th,td{border-bottom:1px solid var(--linea);padding:7px 8px;text-align:start;vertical-align:top}
th{background:var(--superficie-2);font-size:12px;text-transform:uppercase;letter-spacing:.03em;color:var(--suave-sobre-superficie)}
td.dinero,th.dinero{text-align:end;white-space:nowrap}
.etiqueta{display:inline-block;padding:2px 7px;border-radius:10px;font-size:11px;background:var(--acento-fondo);color:var(--acento-texto)}
.etiqueta.ok{background:var(--ok-fondo);color:var(--ok)}
.etiqueta.mal{background:var(--mal-fondo);color:var(--mal)}
.etiqueta.aviso{background:var(--aviso-fondo);color:var(--aviso)}
/* Un color propio para cada uno de los nueve estados de un viaje. Los tres de
   arriba (ok/mal/aviso) siguen sirviendo para pagos y ofertas de la red, que
   son otro vocabulario. */
.etiqueta.estado-solicitada{background:var(--estado-solicitada-fondo);color:var(--estado-solicitada)}
.etiqueta.estado-confirmada{background:var(--estado-confirmada-fondo);color:var(--estado-confirmada)}
.etiqueta.estado-asignada{background:var(--estado-asignada-fondo);color:var(--estado-asignada)}
.etiqueta.estado-en-camino{background:var(--estado-en-camino-fondo);color:var(--estado-en-camino)}
.etiqueta.estado-en-sitio{background:var(--estado-en-sitio-fondo);color:var(--estado-en-sitio)}
.etiqueta.estado-a-bordo{background:var(--estado-a-bordo-fondo);color:var(--estado-a-bordo)}
.etiqueta.estado-completada{background:var(--estado-completada-fondo);color:var(--estado-completada)}
/* Tachada, ademas de roja apagada: es lo unico que la separa de un vistazo de
   "no se presento", que tambien es roja pero se cobra. */
.etiqueta.estado-cancelada{background:var(--estado-cancelada-fondo);color:var(--estado-cancelada);text-decoration:line-through}
.etiqueta.estado-no-show{background:var(--estado-no-show-fondo);color:var(--estado-no-show)}
.cifra{font-size:22px;font-weight:700}
.cifra small{display:block;font-size:12px;font-weight:400;color:var(--suave-sobre-superficie);text-transform:uppercase}
.mensaje{padding:10px 12px;border-radius:6px;margin:10px 0;font-size:14px;display:none}
.mensaje.ok{display:block;background:var(--ok-fondo);color:var(--ok)}
.mensaje.mal{display:block;background:var(--mal-fondo);color:var(--mal)}
.pestanas{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.pestanas button{margin:0;background:var(--superficie);color:var(--tinta-sobre-superficie);border:1px solid var(--linea)}
.pestanas button.activa{background:var(--acento);color:var(--sobre-acento);border-color:var(--acento-texto)}
.seccion{display:none}
.seccion.visible{display:block}
.lineas{font-size:13px;border-top:1px dashed var(--linea);margin-top:10px;padding-top:8px}
.lineas div{display:flex;justify-content:space-between;padding:2px 0}
.lineas div.total{font-weight:700;font-size:15px;border-top:1px solid var(--linea);margin-top:6px;padding-top:6px}
.nota{font-size:12px;color:var(--suave-sobre-superficie)}

/* Un bloque de instrucciones dentro de una tarjeta: lo que hay que declarar en
   el formulario de GNet. Todo con tokens, que es lo que hace que una marca
   oscura y el contraste sigan cuadrando sin tocar nada aqui. */
.aviso-suave{background:var(--superficie-hundida);border:1px solid var(--linea);
  border-radius:8px;padding:14px;margin-top:14px}
.aviso-suave h4{margin:0 0 6px;font-size:14px;color:var(--titulo)}
.aviso-suave>.nota{margin:0 0 10px}
.pasos{margin:0 0 10px;padding-left:20px;font-size:13px;color:var(--tinta-sobre-superficie)}
.pasos li{margin-bottom:4px}
/* El texto a copiar. `pre` sin mas se sale de la tarjeta en el movil: el
   formulario lleva lineas largas y no hay donde partirlas. */
.para-copiar{background:var(--superficie);border:1px solid var(--linea);
  border-radius:6px;padding:10px 12px;margin:0 0 8px;font-size:12px;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  color:var(--tinta-sobre-superficie);white-space:pre-wrap;overflow-wrap:anywhere}
.fila{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end}
.fila>div{flex:1;min-width:150px}

.mensaje.error{background:var(--mal-fondo);border:1px solid var(--mal-borde);color:var(--mal)}

/* pantallas nuevas: usan div id barra y div envoltura en vez de header y main */
.envoltura{max-width:1180px;margin:0 auto;padding:18px}
#barra{background:var(--superficie);border-bottom:1px solid var(--linea);padding:10px 18px;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
#barra .marca{font-weight:700;color:var(--acento-texto);text-decoration:none;font-size:17px}
#barra nav a{color:var(--tinta-sobre-superficie);text-decoration:none;margin-inline-end:14px;font-size:14px}
#barra nav a.activo{color:var(--acento-texto);font-weight:600}
#barra .quien{margin-inline-start:auto;font-size:13px;color:var(--suave-sobre-superficie)}
.mensaje.error{display:block;background:var(--mal-fondo);color:var(--mal);border:1px solid var(--mal-borde)}
h3{font-size:15px;margin:16px 0 6px;color:var(--titulo)}
.rejilla .tarjeta{margin-bottom:0}
.grupo{border-top:1px dashed var(--linea);margin-top:14px;padding-top:4px}

/* Idiomas (i18n.js). La pagina no se ve hasta tener los textos en su idioma. */
html.i18n-cargando body{visibility:hidden}
select.idioma{width:auto;padding:3px 6px;font-size:13px;margin-inline-end:8px}
/* El globo delante del selector: sin el, un "Espanol" suelto en la esquina no
   se reconoce como el sitio donde se cambia el idioma. */
.globo{font-size:15px;margin-inline-end:4px}
.idioma-arriba{display:inline-flex;align-items:center;gap:4px}
.idioma-arriba select.idioma{margin:0}
/* Direcciones, vuelos y folios dentro de texto en arabe: que no se inviertan. */
[dir=rtl] input,[dir=rtl] textarea{unicode-bidi:plaintext}
/* Portada: el selector de idioma a la vista, junto al titulo. */
.cabecera-portada{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:4px}
.cabecera-portada h1{margin:0}
.idioma-portada{display:flex;align-items:center;gap:8px;background:var(--superficie);border:1px solid var(--linea);border-radius:8px;padding:6px 10px}
.idioma-portada label{margin:0;font-size:13px;white-space:nowrap}
.idioma-portada select.idioma{margin:0;font-size:14px;padding:5px 8px}
/* hidden gana siempre, aunque la clase ponga display (rejilla, fila...). */
[hidden]{display:none !important}
/* Mi cuenta: elegir entrar con telefono o con correo. */
.eleccion{display:flex;gap:18px;flex-wrap:wrap;margin-bottom:4px}
.eleccion label{display:flex;align-items:center;gap:6px;margin:0;font-size:14px;color:var(--tinta-sobre-superficie)}
.eleccion input{width:auto}
/* Mi cuenta: las dos opciones arriba, y avisos que no se esconden solos. */
.opciones-cuenta button{font-size:15px;padding:10px 16px}
.mensaje.aviso-fijo{display:block;background:var(--aviso-fondo);color:var(--aviso)}
.campo-tarjeta{min-height:90px;margin:4px 0}
/* Portada de producto y alta de licenciatarios. */
.acciones-portada{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.acciones-portada .nota{flex-basis:100%;margin:0}
a.boton-enlace{display:inline-block;background:var(--acento);color:var(--sobre-acento);border-radius:6px;padding:10px 16px;font-size:15px;text-decoration:none;margin-top:10px}
a.boton-enlace.secundario{background:var(--superficie);color:var(--acento-texto);border:1px solid var(--acento)}
.fila-subdominio{display:flex;align-items:center;gap:6px}
.fila-subdominio input{flex:1}
.fila-subdominio .sufijo{color:var(--suave-sobre-superficie);font-size:14px;white-space:nowrap}
#pasos{font-size:14px;color:var(--tinta-sobre-superficie);padding-inline-start:20px}
#pasos li{margin-bottom:4px}
/* Marca del licenciatario y panel de la empresa. */
header.barra .marca img.logo,#barra .marca img.logo{height:28px;width:auto;display:block}
header.barra .marca,#barra .marca{display:inline-flex;align-items:center;gap:8px}
/* El logo de OnLimos en su portada. Es una placa cuadrada: se deja cuadrada. */
.logo-portada{width:120px;height:120px;border-radius:16px;display:block;margin:2px 0 14px}
.colores{display:flex;gap:14px;flex-wrap:wrap;align-items:flex-end}
.colores label{margin-bottom:2px}
.colores input[type=color]{width:56px;height:38px;padding:2px}
.vista-previa{border:1px solid var(--linea);border-radius:8px;padding:12px;margin-top:10px}
.vista-previa .boton-falso{display:inline-block;border-radius:6px;padding:8px 14px;font-size:14px;margin-top:6px}
/* La tarjeta de la vista previa de "Mi marca": ensena donde cae de verdad el
   texto del licenciatario. */
.tarjeta-ejemplo{border:1px solid var(--linea);border-radius:8px;padding:12px;margin-top:8px}
.tarjeta-ejemplo p{margin:0 0 6px}
.logo-actual{max-height:60px;max-width:220px;display:block;margin:6px 0}

/* ---- La app del chofer ---- */

/* Se lee de pie, en la calle y con una mano. Una columna estrecha, y los
   dedos no son un raton: los botones y las casillas, mas altos. */
.envoltura.estrecha{max-width:560px}
.envoltura.estrecha input,.envoltura.estrecha select,.envoltura.estrecha button{min-height:44px;font-size:16px}
/* 16px no es capricho: con menos, el navegador del movil hace zoom solo al
   tocar una casilla y la pantalla se descoloca. */

/* Un campo que ocupa la rejilla entera. Ya se usaba en el panel (empresa.html,
   "grupo ancho") pero no habia regla que lo hiciera: el nombre estaba y el
   efecto no. */
.rejilla .ancho{grid-column:1/-1}

/* Lo de la izquierda y lo de la derecha, separados. */
.fila.entre{justify-content:space-between;align-items:center}

/* ---- Fotos de un coche ---- */
.fotos{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px;margin:8px 0}
.fotos figure{margin:0;position:relative}
.fotos img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:6px;border:1px solid var(--linea);display:block}
.fotos figure button{position:absolute;top:6px;right:6px;margin:0}
/* El input de fichero no se deja vestir: se esconde y se pulsa su etiqueta. */
.boton-archivo{display:inline-block;cursor:pointer;background:var(--acento);color:var(--sobre-acento);border-radius:6px;padding:6px 12px}

/* Una tabla ancha, como la rejilla de tarifas, se desplaza sola y no
   ensancha la pagina en el movil. */
.desplazable{overflow-x:auto}
.desplazable input{min-width:5.5em}

/* ---- La pagina de reservar ---- */
.opciones{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.opcion{border:1px solid var(--linea);border-radius:8px;overflow:hidden;background:var(--superficie);display:flex;flex-direction:column}
.opcion>img,.opcion .sin-foto{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;background:var(--superficie-hundida)}
.opcion .miniaturas{display:flex;gap:4px;padding:4px}
.opcion .miniaturas img{width:48px;height:36px;object-fit:cover;border-radius:4px;cursor:pointer}
.opcion-texto{padding:10px 12px;display:flex;flex-direction:column;gap:2px;flex:1}
.opcion-texto h3{margin:0}
.opcion-texto button{margin-top:auto}

/* Una solicitud de un pasajero, con sus botones. */
.solicitud{border-top:1px dashed var(--linea);padding-top:8px;margin-top:8px}
.solicitud p{margin:4px 0}
.solicitud .fila input{flex:1;min-width:180px}
.flecha{padding:2px 7px;margin:0 1px}

/* Las acciones de una reserva, arriba de la ficha. */
.acciones-reserva{border:1px solid var(--linea);border-radius:8px;padding:10px 12px;margin:8px 0 12px}
.acciones-reserva .fila{margin:6px 0}
.acciones-reserva .grupo{border-top:0;margin-top:0}
.acciones-reserva .fila .nota{flex-basis:100%;margin:0}
button.peligro{background:var(--mal)}
.acciones-reserva .fila{align-items:flex-end;flex-wrap:wrap}
.acciones-reserva .fila>input{flex:1;width:auto;min-width:180px}
.acciones-reserva .fila>button{white-space:nowrap}
.acciones-reserva #accCobrar .grupo{flex:0 1 180px;min-width:140px}

/* Trip Rules: las tarjetas de cada recargo o descuento, con sus etiquetas
   (docs/reglas-de-viaje.md), las casillas de los formularios largos y el mapa
   de las zonas. */
.reglas{display:flex;flex-direction:column;gap:10px}
.regla{border:1px solid var(--linea);border-radius:8px;padding:10px 12px;background:var(--superficie);display:flex;flex-direction:column;gap:6px}
.regla.apagada{opacity:.55}
.chips{display:flex;flex-wrap:wrap;gap:4px;align-items:center}
.casillas{display:flex;flex-wrap:wrap;gap:6px 14px}
.casillas label{display:flex;align-items:center;gap:4px;font-weight:400}
.interruptor{display:inline-flex;align-items:center;gap:6px;font-weight:400}
.mapa-zona{height:340px;border:1px solid var(--linea);border-radius:8px;margin:8px 0}
@media (prefers-color-scheme:dark){.regla{background:transparent}}

/* El enlace público de un viaje (docs/enlace-del-viaje.md): una columna, en el
   móvil de quien lo recibe por SMS. */
.viaje-publico .tarjeta{margin-bottom:12px}
.estado-viaje{display:flex;align-items:center;gap:6px;font-weight:600}
.estado-viaje .punto{width:10px;height:10px;border-radius:50%;background:var(--aviso)}
.estado-viaje .punto.ok{background:var(--ok)}
.estado-viaje .punto.mal{background:var(--mal)}
.tres-datos{display:flex;gap:12px;margin-top:10px}
.tres-datos>div{flex:1;text-align:center}
.tres-datos p{margin:2px 0}
.persona{display:flex;align-items:center;gap:10px}
/* Un campo pequeno dentro de una celda, con su etiqueta al lado. */
.en-linea{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
input.corto{width:5.5em}
.persona-texto{display:flex;flex-direction:column;flex:1}
.retrato{width:52px;height:52px;border-radius:50%;object-fit:cover;background:var(--superficie-hundida)}
.retrato.sin-foto{display:flex;align-items:center;justify-content:center;font-weight:600;color:var(--suave-sobre-superficie)}
.botones-redondos{display:flex;gap:8px}
.redondo{width:40px;height:40px;border-radius:50%;border:1px solid var(--linea);display:inline-flex;align-items:center;justify-content:center;text-decoration:none}
.puntos{display:flex;flex-direction:column;gap:10px}
.punto-viaje{display:flex;align-items:center;gap:10px;border-left:3px solid var(--acento);padding-left:10px}
.punto-texto{flex:1}
.punto-viaje p{margin:2px 0}
.tarjeta-vuelo{border:1px solid var(--linea);border-radius:8px;padding:10px;margin:6px 0 6px 13px}
.dos-lados{display:flex;gap:12px;margin-top:6px}
.dos-lados>div{flex:1}
.foto-vehiculo{width:100%;max-width:320px;border-radius:8px;display:block;margin-bottom:8px}
.mapa-viaje{height:320px;border:1px solid var(--linea);border-radius:8px;margin-top:8px}
.coche span{font-size:22px;display:inline-block;transition:transform .4s linear}
.mapa-choferes{height:380px;border:1px solid var(--linea);border-radius:8px;margin:8px 0}

/* Aeropuertos donde opera la empresa: una etiqueta por cada uno, con su aspa
   para quitarlo. Se leen de un vistazo y ocupan una linea, no veinte. */
.etiquetas{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 4px}
.etiquetas .etiqueta-quitable{display:inline-flex;align-items:center;gap:6px;background:var(--superficie);border:1px solid var(--linea);border-radius:999px;padding:5px 6px 5px 12px;font-size:14px}
.etiquetas .etiqueta-quitable button{background:none;border:0;color:var(--suave-sobre-superficie);font-size:16px;line-height:1;cursor:pointer;padding:2px 6px;min-height:0}
.etiquetas .etiqueta-quitable button:hover{color:var(--mal)}
.etiquetas .vacio{color:var(--suave-sobre-superficie);font-size:14px}


/* ==========================================================================
   El panel del operador: barra lateral, barra superior y buscador.

   Todo cuelga de .app-operador, que solo esta en empresa.html. Los demas
   paneles -chofer, cliente, afiliado, admin- no ven ni una regla de aqui;
   se migran en una fase posterior (docs/colores.md).

   El menu de antes eran catorce botones planos en una fila. A 1024 saltaba a
   dos filas y a 390 ocupaba cinco filas y 180 px antes de que empezara nada
   util.
   ========================================================================== */

/* Una columna por defecto, dos cuando hay sesion. Al reves -dos por defecto y
   quitarlas sin sesion- el menu se dibujaba un cuadro antes de saber si lo
   habia, y la puerta de entrada aparecia con 232 px de hueco al lado. */
.app-operador{display:grid;grid-template-columns:1fr;min-height:100vh;align-items:start}
/* La clase de <html> la pone un script en la cabecera de empresa.html, antes
   del primer pintado; la del <body>, empresa-pantallas.js cuando el servidor
   contesta. Las dos valen, y por eso no hay salto: sin la primera, el
   contenido se corria 232 px a los 90 ms de entrar. */
html.adelanta-sesion .app-operador,
body.con-sesion .app-operador{grid-template-columns:232px 1fr}
/* Un item de rejilla trae min-width:auto, asi que no se encoge por debajo de
   lo que mida su contenido: una tabla ancha ensanchaba la columna entera y en
   el movil la pagina se iba por el lado derecho, con la barra de arriba
   cortada. */
.app-operador>.zona{min-width:0}
/* Y las tablas se desplazan dentro de su caja en vez de empujar la pagina. Se
   apunta al div que las contiene -los 33 se llaman tablaAlgo- y no a la tabla,
   porque su contenido se repinta con innerHTML y un envoltorio puesto a mano
   se perderia en el primer repintado. */
.app-operador [id^=tabla]{overflow-x:auto}
/* Sin sesion no hay menu que ensenar: solo la puerta. Va atado a
   .app-operador a proposito: suelto alcanzaba tambien a maqueta-operador.html,
   que usa la misma clase .lateral y no tiene sesion ninguna, y le dejaba el
   menu escondido con el hueco de 232 px reservado. */
body:not(.con-sesion) .app-operador .lateral,
body:not(.con-sesion) .barra-inferior{display:none}
html.adelanta-sesion .app-operador .lateral{display:flex}

/* ---- La barra lateral ---- */
/* Pegada arriba y de la altura de la ventana: si se estirara con el contenido,
   lo que va al pie -"Mis viajes"- quedaria a tres pantallas de distancia. */
.lateral{background:var(--superficie);border-inline-end:1px solid var(--linea);
  display:flex;flex-direction:column;padding:12px 0;
  position:sticky;top:0;height:100vh;overflow-y:auto}
.lateral .logo{display:flex;align-items:center;gap:9px;padding:4px 16px 14px;
  font-weight:700;color:var(--acento-texto);font-size:16px;text-decoration:none}
.lateral .logo img.logo-empresa{height:26px;width:auto;border-radius:5px}
/* Sin logo, su inicial: con la lateral en iconos el nombre no cabe y el hueco
   vacio es peor que no tener nada. */
.lateral .logo .inicial{display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:26px;flex:none;border-radius:6px;background:var(--acento);
  color:var(--sobre-acento);font-size:14px;font-weight:700}
.lateral nav{display:flex;flex-direction:column;gap:1px;padding:0 8px}
.lateral nav button{display:flex;align-items:center;gap:10px;width:100%;
  padding:8px 10px;border-radius:7px;background:none;border:0;margin:0;
  color:var(--tinta-sobre-superficie);font-size:14px;line-height:1.2;
  text-align:start;cursor:pointer;font-family:inherit}
.lateral nav button:hover{background:var(--superficie-hundida)}
.lateral nav button.activa{background:var(--acento);color:var(--sobre-acento);font-weight:600}
.lateral nav button.activa svg{stroke:var(--sobre-acento)}
.lateral svg{width:17px;height:17px;flex:none;stroke:var(--suave-sobre-superficie);
  stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round}
.lateral .separador{height:1px;background:var(--linea);margin:10px 16px;border:0}
.lateral .pie{margin-top:auto;padding:0 8px}
.lateral .rotulo{font-size:11px;text-transform:uppercase;letter-spacing:.05em;
  color:var(--suave-sobre-superficie);padding:12px 18px 5px;font-weight:600;margin:0}

/* El aviso de los cinco que se mudaron a Configuracion. Se apaga solo pasados
   treinta dias (MUDANZA_HASTA en empresa-pantallas.js). */
.aviso-mudanza{margin:10px 14px 4px;padding:9px 11px;border-radius:8px;
  background:var(--aviso-fondo);color:var(--aviso);font-size:12px;line-height:1.35}
.aviso-mudanza button{background:none;border:0;padding:0;margin:4px 0 0;
  color:inherit;font-size:12px;text-decoration:underline;cursor:pointer;font-family:inherit}
/* Y la banda dentro de cada una de las cinco, para quien llegue por un enlace
   guardado o por el buscador con el nombre de antes. */
.banda-mudanza{background:var(--aviso-fondo);color:var(--aviso);border-radius:8px;
  padding:9px 12px;margin-bottom:12px;font-size:13px;display:flex;gap:10px;
  align-items:center;flex-wrap:wrap}
.banda-mudanza button{margin:0;padding:4px 10px;font-size:12px;
  background:none;border:1px solid currentColor;color:inherit;border-radius:6px;cursor:pointer}

/* ---- La barra de arriba ---- */
.app-operador .barra{position:sticky;top:0;z-index:5;gap:12px}
/* El logo ya esta en la lateral: en la barra sobraba. Lleva el id porque la
   regla que le da display:inline-flex tambien lo lleva, y sin el perdia. */
body.con-sesion #barra>.marca{display:none}
.app-operador .barra nav{display:none}
.buscador-global{flex:1;max-width:420px;position:relative}
.buscador-global input{padding-inline-start:34px;margin:0;
  background:var(--superficie-hundida);border-color:transparent}
.buscador-global>svg{position:absolute;inset-inline-start:11px;top:9px;width:16px;height:16px;
  stroke:var(--suave-sobre-superficie);stroke-width:1.8;fill:none;pointer-events:none}
.buscador-global kbd{position:absolute;inset-inline-end:9px;top:8px;font-size:11px;
  color:var(--suave-sobre-superficie);border:1px solid var(--linea);border-radius:4px;
  padding:1px 5px;background:var(--superficie)}
/* Los resultados, debajo del campo. */
.resultados-busqueda{position:absolute;inset-inline:0;top:calc(100% + 5px);z-index:30;
  background:var(--superficie);border:1px solid var(--linea);border-radius:9px;
  box-shadow:0 10px 32px rgba(0,0,0,.14);max-height:60vh;overflow-y:auto;padding:5px}
.resultados-busqueda[hidden]{display:none}
.resultados-busqueda button{display:block;width:100%;text-align:start;background:none;
  border:0;margin:0;padding:8px 10px;border-radius:6px;cursor:pointer;font-size:14px;
  color:var(--tinta-sobre-superficie);font-family:inherit}
.resultados-busqueda button:hover,.resultados-busqueda button.marcado{background:var(--superficie-hundida)}
.resultados-busqueda .donde{display:block;font-size:12px;color:var(--suave-sobre-superficie)}
.resultados-busqueda .vacio{padding:10px;font-size:13px;color:var(--suave-sobre-superficie)}

.boton-nueva{background:var(--acento);color:var(--sobre-acento);border:0;border-radius:7px;
  padding:9px 15px;font-size:14px;font-weight:600;cursor:pointer;margin:0;white-space:nowrap;
  display:inline-flex;align-items:center;gap:6px}
.abrir-menu{display:none;background:none;border:0;padding:6px;margin:0;cursor:pointer}
.abrir-menu svg{width:22px;height:22px;stroke:var(--tinta-sobre-superficie);stroke-width:1.8;fill:none}

/* Una pantalla ancha es sitio para que quepa una fila de viaje entera. El tope
   esta en 1600 porque mas alla la linea se hace incomoda de leer, pero hasta
   ahi se aprovecha todo: con 1240 en un monitor de 1920 sobraban 400 px a los
   lados mientras las celdas se partian en dos lineas.

   El width:100% no sobra. main viene con "margin:0 auto" de la regla general, y
   en una rejilla un margen auto hace que el elemento NO se estire: se centra
   con el ancho de su contenido. En la maqueta eso lo dejaba clavado en 905 px
   daba igual la pantalla, porque era lo que median sus datos de ejemplo. */
.app-operador main{padding:20px;max-width:1600px;width:100%;box-sizing:border-box}

/* La entrada de una seccion. Corta -140 ms- y solo al cambiar: lo justo para
   que el ojo vea que esto es otra pantalla y no la misma con otros datos. A
   quien tenga pedido en su sistema que no le muevan las cosas, no se le
   mueven. */
.app-operador .seccion.entrando{animation:entra-seccion .14s ease-out}
@keyframes entra-seccion{
  from{opacity:0;transform:translateY(6px)}
  to{opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){
  .app-operador .seccion.entrando{animation:none}
}

/* El titulo de la pantalla y su linea, juntos y separados de lo de abajo. */
.app-operador #tituloEmpresa{font-size:22px;margin:0 0 2px}
.app-operador #guiaEmpresa{margin:0 0 16px;font-size:14px}
/* Las cuatro cifras del dia. Con el minimo general de 220 px no caben las
   cuatro en una fila cuando la lateral esta en iconos: la ultima se descolgaba
   sola a una segunda fila con todo el hueco al lado. */
.app-operador #resumenDia{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}

/* Configuracion: las cinco que se mudaron, cada una con lo que hace. */
.rejilla-config{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px}
.rejilla-config button{display:block;width:100%;text-align:start;margin:0;
  background:var(--superficie);border:1px solid var(--linea);border-radius:10px;
  padding:14px 16px;cursor:pointer;color:var(--tinta-sobre-superficie);font-family:inherit}
.rejilla-config button:hover{border-color:var(--acento)}
.rejilla-config strong{display:block;font-size:15px;margin-bottom:3px}
.rejilla-config span{font-size:13px;color:var(--suave-sobre-superficie)}

/* ---- Hasta 1199: la lateral se queda en iconos ---- */
@media (max-width:1199px){
  .app-operador{grid-template-columns:64px 1fr}
  .lateral .logo span,.lateral nav button span,.lateral .rotulo,.aviso-mudanza{display:none}
  .lateral .logo{justify-content:center;padding:4px 0 14px}
  .lateral nav button{justify-content:center;padding:10px 0}
  .lateral svg{width:19px;height:19px}
}

/* ---- Hasta 767: cajon y barra de abajo ---- */
@media (max-width:767px){
  .app-operador,
  html.adelanta-sesion .app-operador,
  body.con-sesion .app-operador{grid-template-columns:1fr}
  .lateral{position:fixed;inset-block:0;inset-inline-start:0;width:250px;z-index:20;
    transform:translateX(-105%);transition:transform .18s ease;box-shadow:0 0 40px rgba(0,0,0,.25)}
  [dir=rtl] .lateral{transform:translateX(105%)}
  .lateral.abierta,[dir=rtl] .lateral.abierta{transform:none}
  .lateral .logo span,.lateral nav button span,.lateral .rotulo,.aviso-mudanza{display:revert}
  .lateral .logo{justify-content:flex-start;padding:4px 16px 14px}
  .lateral nav button{justify-content:flex-start;padding:10px}
  .abrir-menu{display:block}
  .app-operador main{padding:14px 16px 76px}
  /* Cada viaje, una tarjeta.

     Las dos tablas grandes del operador tienen ocho columnas; en un movil eso
     es arrastrar de lado para enterarse de en que estado esta un viaje o
     cuanto cuesta. Se reparten por posicion porque las columnas son fijas y
     conocidas (COLUMNAS_VIAJE en empresa-pantallas.js): 1 codigo, 2 recogida,
     3 pasajero, 4 trayecto, 5 clase, 6 asignado, 7 estado, 8 total. */
  .app-operador #tablaDia table,
  .app-operador #tablaReservas table{display:block}
  .app-operador #tablaDia thead,
  .app-operador #tablaReservas thead{display:none}
  .app-operador #tablaDia tbody,
  .app-operador #tablaReservas tbody{display:block}
  .app-operador #tablaDia tbody tr,
  .app-operador #tablaReservas tbody tr{
    display:grid;grid-template-columns:1fr auto;gap:3px 10px;
    grid-template-areas:'codigo cuando' 'pasajero estado' 'trayecto trayecto' 'asignado asignado' 'total clase';
    padding:11px 14px;border-top:1px solid var(--linea);align-items:center}
  .app-operador #tablaDia tbody td,
  .app-operador #tablaReservas tbody td{display:block;border:0;padding:0}
  .app-operador #tablaDia tbody td:nth-child(1),
  .app-operador #tablaReservas tbody td:nth-child(1){grid-area:codigo}
  .app-operador #tablaDia tbody td:nth-child(2),
  .app-operador #tablaReservas tbody td:nth-child(2){grid-area:cuando;text-align:end;
    color:var(--texto-suave);white-space:nowrap}
  .app-operador #tablaDia tbody td:nth-child(3),
  .app-operador #tablaReservas tbody td:nth-child(3){grid-area:pasajero}
  .app-operador #tablaDia tbody td:nth-child(4),
  .app-operador #tablaReservas tbody td:nth-child(4){grid-area:trayecto}
  .app-operador #tablaDia tbody td:nth-child(5),
  .app-operador #tablaReservas tbody td:nth-child(5){grid-area:clase;text-align:end;
    font-size:12px;color:var(--texto-suave)}
  .app-operador #tablaDia tbody td:nth-child(6),
  .app-operador #tablaReservas tbody td:nth-child(6){grid-area:asignado;font-size:12px}
  .app-operador #tablaDia tbody td:nth-child(7),
  .app-operador #tablaReservas tbody td:nth-child(7){grid-area:estado;text-align:end}
  .app-operador #tablaDia tbody td:nth-child(8),
  .app-operador #tablaReservas tbody td:nth-child(8){grid-area:total;font-weight:600;
    border-top:1px solid var(--linea);padding-top:7px;margin-top:4px}
  .app-operador #tablaDia tbody td:nth-child(5),
  .app-operador #tablaReservas tbody td:nth-child(5){border-top:1px solid var(--linea);
    padding-top:7px;margin-top:4px}
  .app-operador .barra{padding:8px 12px}
  .buscador-global{max-width:none}
  .buscador-global kbd{display:none}
  .boton-nueva span{display:none}
  body.con-sesion .barra-inferior{display:flex}
}
.barra-inferior{display:none;position:fixed;inset-inline:0;bottom:0;background:var(--superficie);
  border-top:1px solid var(--linea);padding:6px 4px;z-index:15;justify-content:space-around}
.barra-inferior button{display:flex;flex-direction:column;align-items:center;gap:2px;
  font-size:10px;color:var(--suave-sobre-superficie);background:none;border:0;margin:0;
  padding:4px 10px;border-radius:7px;cursor:pointer;font-family:inherit}
.barra-inferior button.activa{color:var(--acento-texto)}
.barra-inferior button.activa svg{stroke:var(--acento-texto)}
.barra-inferior svg{width:20px;height:20px;stroke:var(--suave-sobre-superficie);
  stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round}
.velo-menu{display:none;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:19}
.velo-menu.visible{display:block}


/* ==========================================================================
   El contenido del operador: tarjetas, cifras y tablas.

   Es lo que la maqueta ensenaba y el panel todavia no tenia. Sigue colgando
   todo de .app-operador, asi que chofer, cliente, afiliado y admin no cambian.
   ========================================================================== */

/* ---- Tarjetas con cabecera ---- */
.app-operador .tarjeta{border-radius:10px;padding:0;overflow:hidden}
.app-operador .tarjeta>h2{margin:0;padding:12px 16px;font-size:15px;
  border-bottom:1px solid var(--linea)}
/* Lo que no sea la cabecera lleva su propio aire. El :not() deja fuera a h2 y a
   los bloques que ya traen el suyo. */
.app-operador .tarjeta>:not(h2):not(table):not([id^=tabla]){margin-inline:16px}
.app-operador .tarjeta>:not(h2):first-child{margin-top:14px}
.app-operador .tarjeta>:not(h2):last-child{margin-bottom:14px}
.app-operador .tarjeta>[id^=tabla]{margin:0}

/* Las lineas punteadas de los grupos parecian de borrador y partian cada
   tarjeta en trozos que nadie habia pedido separar. */
.app-operador .grupo{border-top:0;margin-top:0;padding-top:0}
.app-operador .fila{margin:0 0 10px;gap:12px}

/* ---- Las cifras del dia ---- */
.app-operador #resumenDia{gap:10px;margin:0 16px 14px}
.app-operador #resumenDia .grupo{background:var(--superficie-2);border:1px solid var(--linea);
  border-radius:9px;padding:12px 14px;margin:0}
.app-operador #resumenDia label{margin:4px 0 0;font-size:11px;text-transform:uppercase;
  letter-spacing:.04em;font-weight:600;order:2}
.app-operador #resumenDia .grupo{display:flex;flex-direction:column}
.app-operador #resumenDia .cifra{font-size:25px;line-height:1.1;margin:0;order:1;
  color:var(--texto);font-variant-numeric:tabular-nums}

/* ---- Las tablas ---- */
/* Una fila por viaje, sin que cada celda se parta por su cuenta. Lo que va en
   dos lineas -origen y destino, nombre y telefono, chofer y coche- va asi a
   proposito, y por eso lo secundario se marca con .sub o .nota. */
.app-operador table{font-size:13px;background:transparent}
.app-operador th{background:var(--superficie-2);padding:9px 12px;font-size:11px;
  letter-spacing:.04em;font-weight:600;white-space:nowrap;border-bottom:1px solid var(--linea)}
.app-operador td{padding:9px 12px;border-bottom:0;border-top:1px solid var(--linea);
  vertical-align:middle}
.app-operador tbody tr:hover{background:var(--superficie-hundida)}
.app-operador td.dinero,.app-operador th.dinero{font-variant-numeric:tabular-nums}
/* El codigo del viaje: lo primero que se busca con la vista. */
.app-operador tbody td:first-child{font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.app-operador .nota{font-size:12px}

/* ---- Filtros en linea ---- */
.app-operador .fila>div{flex:0 1 190px}
.app-operador #diaFecha{width:auto;min-width:170px}
.app-operador .fila>div.ancho{flex:1 1 220px}
.app-operador .fila label{margin-top:0}
.app-operador .fila input,.app-operador .fila select{margin:0}
.app-operador .fila>button{margin:0;align-self:end}

/* Una raya entre grupos de pestanas. Siete seguidas mezclaban las personas,
   los coches y el catalogo; separadas se ve de un vistazo de que va cada
   tramo, y nadie tiene que volver a aprenderse donde estaba lo suyo. */
.app-operador .separa-pestanas{width:1px;align-self:stretch;background:var(--linea);margin:0 5px}
@media (max-width:767px){.app-operador .separa-pestanas{display:none}}

/* El mapa de seguimiento, al alto de la pantalla. Esta pantalla no sirve para
   otra cosa que mirarlo, y con 380 px fijos quedaban trescientos vacios
   debajo. El minimo es por si la ventana es muy baja. */
.app-operador #secEnLaCalle .mapa-choferes{height:calc(100vh - 330px);min-height:380px}

/* ---- Las cifras, en cualquier pantalla ---- */
/* Antes solo las del dia tenian tarjeta, porque la regla iba por id. Las de
   Informes -facturado, comprometido, viaje medio- salian sueltas sobre el
   fondo, como si fueran otra cosa. Son lo mismo y se leen igual. */
.app-operador .rejilla .grupo:has(> .cifra){background:var(--superficie-2);
  border:1px solid var(--linea);border-radius:9px;padding:12px 14px;margin:0;
  display:flex;flex-direction:column}
.app-operador .grupo:has(> .cifra) label{margin:4px 0 0;font-size:11px;
  text-transform:uppercase;letter-spacing:.04em;font-weight:600;order:2}
.app-operador .grupo:has(> .cifra) .cifra{font-size:25px;line-height:1.1;margin:0;order:1;
  color:var(--texto);font-variant-numeric:tabular-nums}
.app-operador .grupo:has(> .cifra) .nota{order:3;margin:2px 0 0}

/* ---- Las acciones de una fila ---- */
/* Eran todas naranja de acento, el mismo color que el boton primario de la
   pantalla: "Editar" y "Desactivar" pesaban igual, y en una tabla de cinco
   choferes eso son diez botones gritando a la vez. Las acciones de fila pasan
   a secundarias, y las que destruyen algo se marcan en rojo: desactivar a
   alguien no se parece en nada a editarlo. */
.app-operador td .mini,.app-operador td button.mini{background:transparent;
  color:var(--acento-texto);border:1px solid var(--linea)}
.app-operador td .mini:hover{border-color:var(--acento);background:var(--superficie-hundida)}
.app-operador td [data-activo="0"],
.app-operador td [data-borrar-foto],
.app-operador td [data-borrar-cargo],
.app-operador td [data-turno],
.app-operador td [data-desbloquear]{color:var(--estado-no-show)}
.app-operador td [data-activo="0"]:hover,
.app-operador td [data-borrar-foto]:hover,
.app-operador td [data-borrar-cargo]:hover,
.app-operador td [data-turno]:hover,
.app-operador td [data-desbloquear]:hover{border-color:var(--estado-no-show)}

/* ---- Lo que hay que resolver ---- */
/* "Sin asignar" con un numero distinto de cero es trabajo pendiente: un viaje
   de hoy sin chofer. Con todas las cifras iguales habia que leerlas una a una
   para enterarse. */
.app-operador #resumenDia .grupo.urgente{border-color:var(--estado-no-show);
  box-shadow:inset 3px 0 0 var(--estado-no-show)}
.app-operador #resumenDia .grupo.urgente .cifra{color:var(--estado-no-show)}

/* ===== La portada publica =====================================================

   Todo esto va bajo `body.portada` y no toca ninguna otra pantalla. Usa los
   tokens de arriba y ni un color escrito a mano: lo que ve quien se lo esta
   pensando son los mismos colores que va a usar despues, y contraste.spec.ts
   los mide igual que los del panel.

   Tres anchos, y los tres son requisito, no un extra:
     - movil hasta 620: una columna, el tablero debajo del titulo
     - tablet de 621 a 1024: una columna ancha, rejillas de dos
     - ordenador desde 1025: dos columnas, modulos alternando lado
   ========================================================================== */

body.portada{background:var(--fondo)}
body.portada main{max-width:1180px;padding:0 20px}

body.portada section{padding:56px 0}
body.portada section+section{border-top:1px solid var(--linea)}
body.portada h2{font-size:28px;margin:0 0 10px}
body.portada h3{font-size:19px;margin:0 0 8px}
body.portada section>.guia{max-width:62ch}

/* El ojo de buey: la linea pequena en mayusculas sobre cada titulo. */
.portada-ojo{margin:0 0 6px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--acento-texto);font-weight:600}

/* --- barra de arriba --- */
.portada-barra{position:sticky;top:0;z-index:20;background:var(--superficie);
  border-bottom:1px solid var(--linea)}
.portada-barra .envoltura{display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding:10px 20px}
.portada-logo{display:flex;align-items:center;gap:8px;font-weight:700;font-size:17px;
  color:var(--titulo);text-decoration:none}
.portada-logo img{border-radius:6px}
.portada-nav{display:flex;gap:18px;font-size:14px}
.portada-nav a{color:var(--suave-sobre-superficie);text-decoration:none}
.portada-nav a:hover{color:var(--tinta-sobre-superficie)}
.portada-acciones{margin-left:auto;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.portada-entrar{font-size:14px;color:var(--suave-sobre-superficie);text-decoration:none;white-space:nowrap}
.portada-entrar:hover{color:var(--tinta-sobre-superficie)}

/* --- la cabecera, con el tablero --- */
.portada-hero{display:grid;grid-template-columns:1.05fr 1fr;gap:40px;align-items:center}
.portada-hero h1{font-size:40px;line-height:1.1;margin:0 0 12px}
.portada-hero .acciones-portada{margin-top:18px}
/* El punto verde de "en vivo", que dice que esto no es una foto. */
.portada-vivo{margin:14px 0 0;font-size:13px;color:var(--suave-sobre-superficie);
  display:flex;align-items:center;gap:8px}
.portada-vivo::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--ok);
  box-shadow:0 0 0 4px var(--ok-fondo);flex:none}

.portada-tablero{min-width:0;padding:0;overflow:hidden}
.portada-tablero>.fila,.portada-tablero>.tres-datos{padding:12px 14px}
.portada-tablero>.fila{border-bottom:1px solid var(--linea)}
.portada-tablero .tres-datos{border-bottom:1px solid var(--linea);margin:0}
.portada-tablero table{margin:0}
.portada-tablero td{padding:9px 14px;white-space:nowrap}
.portada-tablero .hora{color:var(--suave-sobre-superficie);font-variant-numeric:tabular-nums}
.portada-tablero .trayecto{display:block;font-size:12px;color:var(--suave-sobre-superficie)}
.portada-tablero .mensaje{margin:12px}

/* --- la cinta de los nueve estados --- */
.portada-cinta{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}
.portada-cinta .etiqueta{font-size:12px;padding:6px 11px;transition:opacity .35s}
.portada-cinta .etiqueta.apagada{opacity:.4}

/* --- un modulo: texto a un lado, muestra al otro --- */
.portada-modulo{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center;padding:36px 0}
.portada-modulo+.portada-modulo{border-top:1px dashed var(--linea)}
/* Alternar el lado. `order` sobre el primer hijo, no sobre una clase del
   padre, para que en una columna el texto siga yendo primero. */
.portada-modulo.invertido>:first-child{order:2}
.portada-modulo>div{min-width:0}
.portada-numero{margin:0 0 6px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--suave-sobre-superficie)}
.portada-numero b{color:var(--acento-texto)}

.portada-lista{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:9px}
.portada-lista li{position:relative;padding-left:24px;font-size:14px;
  color:var(--tinta-sobre-superficie)}
/* La marca de visto, dibujada con dos bordes: un carácter de texto se
   desalinea con cada idioma y con cada fuente. */
.portada-lista li::before{content:"";position:absolute;left:2px;top:.5em;width:11px;height:6px;
  border-left:2px solid var(--acento);border-bottom:2px solid var(--acento);
  transform:rotate(-45deg)}

/* --- el demostrador de reservas --- */
.portada-demo h4{margin:14px 0 8px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--suave-sobre-superficie)}
.portada-punto{background:var(--superficie-hundida);border:1px solid var(--linea);
  border-radius:8px;padding:9px 11px;min-width:0}
.portada-punto small{display:block;font-size:10px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--suave-sobre-superficie);margin-bottom:3px}
.portada-punto span{font-size:13px;overflow-wrap:anywhere}

.portada-coches{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:12px}
.portada-coche-opcion{background:var(--superficie);border:1px solid var(--linea);border-radius:8px;
  padding:10px;cursor:pointer;text-align:left;display:grid;gap:3px;min-width:0;font:inherit;
  color:var(--tinta-sobre-superficie)}
.portada-coche-opcion.elegida{border-color:var(--acento);box-shadow:inset 0 0 0 1px var(--acento);
  background:var(--acento-fondo)}
.portada-coche-opcion .codigo{font-size:10px;letter-spacing:.05em;color:var(--suave-sobre-superficie)}
.portada-coche-opcion .nombre{font-size:13px;font-weight:600;line-height:1.25}
.portada-coche-opcion .cabida{font-size:11px;color:var(--suave-sobre-superficie);
  font-variant-numeric:tabular-nums}
.portada-coche-opcion .precio{font-size:16px;font-weight:700;font-variant-numeric:tabular-nums}
.portada-coche-opcion .sin-devolucion{font-size:10px;color:var(--mal)}

.portada-suma{margin-top:12px;border-top:1px solid var(--linea);padding-top:10px;display:grid;gap:5px}
.portada-suma div{display:flex;justify-content:space-between;gap:12px;font-size:14px}
.portada-suma strong{font-variant-numeric:tabular-nums}

.portada-tramos{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.portada-tramos div{background:var(--superficie-hundida);border:1px solid var(--linea);
  border-radius:8px;padding:8px 9px;font-size:11px;line-height:1.3;
  color:var(--suave-sobre-superficie);display:grid;gap:5px;align-content:space-between}
.portada-tramos b{font-size:14px;color:var(--tinta-sobre-superficie);font-variant-numeric:tabular-nums}

/* --- la oferta a un afiliado --- */
.portada-oferta .rejilla{margin-top:12px}
.portada-importe{text-align:right}
.portada-importe .cifra{font-variant-numeric:tabular-nums}
.portada-importe small{display:block;font-size:11px;color:var(--suave-sobre-superficie)}

/* --- el dibujo de la red: nosotros, las flechas, GNet --- */
.portada-red{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:center}
.portada-nodo{text-align:center;padding:18px 12px;margin:0}
.portada-nodo strong{display:block;font-size:19px}
.portada-nodo small{color:var(--suave-sobre-superficie);font-size:12px}
.portada-flechas{display:grid;gap:8px;font-size:11px;letter-spacing:.06em;
  color:var(--suave-sobre-superficie);text-align:center}
.portada-flechas span{display:block;border-top:1px solid var(--acento);padding-top:4px}

/* --- los telefonos --- */
.portada-telefonos{display:flex;gap:18px;justify-content:center;flex-wrap:wrap}
.portada-telefono{width:244px;max-width:100%;border-radius:30px;padding:9px;
  background:var(--superficie-hundida);border:1px solid var(--linea)}
.portada-pantalla{border-radius:24px;background:var(--superficie);padding:16px 14px;
  min-height:420px;display:grid;gap:10px;align-content:start;font-size:13px}
.portada-pantalla .tarjeta{margin:0;padding:10px}
.portada-pantalla .boton-enlace{text-align:center;padding:9px}
.portada-pantalla .boton-enlace.apagado{opacity:.45}
.portada-reloj{margin:4px 0;font-size:28px;font-weight:700;color:var(--acento-texto);
  font-variant-numeric:tabular-nums}
.portada-estrellas{margin:0;font-size:26px;letter-spacing:3px;color:var(--aviso)}
.portada-propinas{display:flex;gap:5px;margin-top:7px}
.portada-propinas span{flex:1;text-align:center;border:1px solid var(--linea);border-radius:7px;
  padding:6px 0;font-size:12px;font-variant-numeric:tabular-nums}
.portada-propinas span.elegida{border-color:var(--acento);color:var(--acento-texto)}

/* El mapa de la app del pasajero: una cuadricula dibujada con gradientes, que
   no gasta ni una peticion ni una clave de Google. */
.portada-mapa{height:150px;border-radius:10px;position:relative;overflow:hidden;
  border:1px solid var(--linea);background:
  repeating-linear-gradient(0deg,transparent 0 24px,var(--superficie-hundida) 24px 26px),
  repeating-linear-gradient(90deg,transparent 0 32px,var(--superficie-hundida) 32px 34px),
  var(--superficie-2)}
.portada-mapa svg{position:absolute;inset:0;width:100%;height:100%}
.portada-coche{position:absolute;left:14px;top:124px;width:12px;height:12px;border-radius:50%;
  background:var(--acento);box-shadow:0 0 0 5px var(--acento-fondo)}

/* --- los idiomas como botones --- */
.portada-idiomas{display:flex;flex-wrap:wrap;gap:8px;align-content:start}
.portada-idiomas button{font:inherit;font-size:14px;background:var(--superficie);
  border:1px solid var(--linea);color:var(--tinta-sobre-superficie);border-radius:999px;
  padding:7px 14px;cursor:pointer}
.portada-idiomas button.elegida{border-color:var(--acento);color:var(--acento-texto);font-weight:600}

/* --- tablas de reglas --- */
.portada-reglas{margin:0}
.portada-reglas td{font-size:13px;padding:10px 12px;white-space:normal}
.portada-reglas td.valor{text-align:right;white-space:nowrap;color:var(--acento-texto);
  font-weight:600;font-variant-numeric:tabular-nums}

/* --- pasos, precios, preguntas, cierre --- */
.portada-pasos{margin-top:22px}
.portada-pasos>div{border-top:2px solid var(--acento);padding-top:14px}
.portada-pasos b{font-size:12px;color:var(--acento-texto)}
.portada-pasos h3{margin:6px 0 6px}

.portada-prueba{align-items:center;gap:16px;margin:18px 0}
.portada-treinta{font-size:38px;font-weight:700;line-height:1;color:var(--acento-texto)}
.portada-planes{margin:18px 0;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.portada-planes .cifra{font-size:34px;margin:6px 0}
.portada-planes .cifra small{text-transform:none;letter-spacing:0}
.portada-planes .boton-enlace{margin-top:12px}
.portada-planes .tarjeta.destacado{border-color:var(--acento);background:var(--acento-fondo)}

.portada-preguntas{display:grid;gap:8px;max-width:860px;margin-top:18px}
.portada-preguntas details{background:var(--superficie);border:1px solid var(--linea);border-radius:10px}
.portada-preguntas summary{cursor:pointer;padding:14px 16px;font-weight:600;
  display:flex;justify-content:space-between;gap:14px;align-items:center}
.portada-preguntas summary::after{content:"+";color:var(--acento-texto);font-size:18px;flex:none}
.portada-preguntas details[open] summary::after{content:"–"}
.portada-preguntas details p{margin:0;padding:0 16px 14px}

.portada-final{text-align:center}
.portada-final .guia{margin:0 auto 16px}
.portada-pie{border-top:1px solid var(--linea);background:var(--superficie);
  padding:20px 0;font-size:13px;color:var(--suave-sobre-superficie)}
.portada-pie .envoltura{flex-wrap:wrap;gap:12px}

/* ===== Tablet: de 621 a 1024 ================================================
   Se deshacen las dos columnas grandes -el texto de un modulo a 480 px no se
   lee, y la muestra se queda sin sitio-, pero las rejillas de cuatro bajan a
   dos y no a una: a 800 px de ancho caben de sobra y una sola columna obliga a
   un desplazamiento larguisimo. */
@media (max-width:1024px){
  .portada-hero,.portada-modulo{grid-template-columns:1fr;gap:28px}
  .portada-modulo.invertido>:first-child{order:0}
  .portada-hero h1{font-size:34px}
  .portada-nav{display:none}
  .portada-pasos{grid-template-columns:1fr 1fr}
  .portada-telefonos{justify-content:flex-start}
}

/* ===== Movil: hasta 620 =====================================================
   Lo que se cae aqui y por que: la columna del medio del tablero -flota propia
   o afiliado- se oculta porque el estado y la hora son lo que se mira, y la
   fila no cabe entera sin partir el estado en dos lineas. Los coches y los
   tramos pasan a dos columnas, que a cuatro el precio no cabe. */
@media (max-width:620px){
  body.portada main{padding:0 16px}
  body.portada section{padding:40px 0}
  body.portada h2{font-size:23px}
  .portada-hero h1{font-size:28px}
  .portada-coches,.portada-tramos,.portada-pasos{grid-template-columns:1fr 1fr}
  .portada-red{grid-template-columns:1fr}
  .portada-flechas{display:flex;justify-content:center;gap:18px}
  .portada-tablero .ocultar-movil{display:none}
  .portada-telefonos{justify-content:center}
  .portada-pie .envoltura{flex-direction:column;align-items:flex-start}
  .portada-barra .envoltura{gap:10px;padding:10px 16px}
  .portada-acciones{width:100%;margin-left:0}
  .portada-entrar{margin-left:auto}
  .idioma-portada label{display:none}
}

@media (prefers-reduced-motion:reduce){
  .portada-cinta .etiqueta{transition:none}
}

/* El aviso de que la ciudad vino sin region. Es un aviso, no un error: se
   puede seguir, pero se pierden los aeropuertos y la ficha en la red. */
.nota.aviso-ciudad{color:var(--aviso);font-weight:600}