:root{--tinta:#111;--suave:#666;--linea:#e2e2e2;--fondo:#f7f7f8;--acento:#0f4c81;--ok:#1b7f4b;--mal:#a32020;--aviso:#8a5a00}
html,body{margin:0;padding:0}
body{font-family:-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:var(--tinta);background:var(--fondo);font-size:15px;line-height:1.45}
header.barra{background:#fff;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);text-decoration:none;font-size:17px}
header.barra nav a{color:var(--tinta);text-decoration:none;margin-inline-end:14px;font-size:14px}
header.barra nav a.activo{color:var(--acento);font-weight:600}
header.barra .quien{margin-inline-start:auto;font-size:13px;color:var(--suave)}
main{max-width:1180px;margin:0 auto;padding:18px}
h1{font-size:21px;margin:0 0 4px}
h2{font-size:17px;margin:22px 0 8px}
p.guia{color:var(--suave);margin:0 0 14px;font-size:14px}
.tarjeta{background:#fff;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);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:#fff;font-family:inherit}
textarea{min-height:64px}
button{background:var(--acento);color:#fff;border:0;border-radius:6px;padding:9px 14px;font-size:14px;cursor:pointer;margin-top:10px}
button.secundario{background:#fff;color:var(--acento);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:#fff}
th,td{border-bottom:1px solid var(--linea);padding:7px 8px;text-align:start;vertical-align:top}
th{background:#fafafa;font-size:12px;text-transform:uppercase;letter-spacing:.03em;color:var(--suave)}
td.dinero,th.dinero{text-align:end;white-space:nowrap}
.etiqueta{display:inline-block;padding:2px 7px;border-radius:10px;font-size:11px;background:#eef2f7;color:var(--acento)}
.etiqueta.ok{background:#e7f5ec;color:var(--ok)}
.etiqueta.mal{background:#fbeaea;color:var(--mal)}
.etiqueta.aviso{background:#fdf3e2;color:var(--aviso)}
.cifra{font-size:22px;font-weight:700}
.cifra small{display:block;font-size:12px;font-weight:400;color:var(--suave);text-transform:uppercase}
.mensaje{padding:10px 12px;border-radius:6px;margin:10px 0;font-size:14px;display:none}
.mensaje.ok{display:block;background:#e7f5ec;color:var(--ok)}
.mensaje.mal{display:block;background:#fbeaea;color:var(--mal)}
.pestanas{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.pestanas button{margin:0;background:#fff;color:var(--tinta);border:1px solid var(--linea)}
.pestanas button.activa{background:var(--acento);color:#fff;border-color:var(--acento)}
.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)}
.fila{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end}
.fila>div{flex:1;min-width:150px}

.mensaje.error{background:#fde8e8;border:1px solid #e57373;color:#8a1c1c}

/* 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:#fff;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);text-decoration:none;font-size:17px}
#barra nav a{color:var(--tinta);text-decoration:none;margin-inline-end:14px;font-size:14px}
#barra nav a.activo{color:var(--acento);font-weight:600}
#barra .quien{margin-inline-start:auto;font-size:13px;color:var(--suave)}
.mensaje.error{display:block;background:#fbeaea;color:var(--mal);border:1px solid #e57373}
h3{font-size:15px;margin:16px 0 6px}
.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:#fff;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)}
.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:#fdf3e2;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:#fff;border-radius:6px;padding:10px 16px;font-size:15px;text-decoration:none;margin-top:10px}
a.boton-enlace.secundario{background:#fff;color:var(--acento);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);font-size:14px;white-space:nowrap}
#pasos{font-size:14px;color:var(--tinta);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}
.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}
.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:#fff;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:#fff;display:flex;flex-direction:column}
.opcion>img,.opcion .sin-foto{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;background:#eef2f7}
.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:#b3261e}
.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:#fff;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:#eef2f7}
.retrato.sin-foto{display:flex;align-items:center;justify-content:center;font-weight:600;color:#54627a}
.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}