/* =============================================================================
   Estilos de Lumi
   -----------------------------------------------------------------------------
   1. Variables: colores, tipografía, medidas      6. Paneles, métricas, listas y tablas
   2. Base y utilidades                             7. Estados, avatares, mensajes
   3. Páginas públicas: barra, portada, pie         8. Piezas del viaje: ruta, progreso, mapa, precio
   4. Aplicación: barra superior y menús            9. Páginas puntuales
   5. Botones y formularios                        10. Adaptación a tabletas y teléfonos (al final)
                                                   11. Integraciones: mapa real y búsqueda de lugares
                                                   12. Novedades: iconos de Lumi, logo día/noche, carro o moto,
                                                       oferta, lugares, documentos, seguimiento en vivo,
                                                       verificación facial y pantalla de entrada (splash)
                                                   13. Mapa y servicios: Prioridad y Confort, paradas, horas
                                                       de llegada, carritos y trayectoria de la conductora

   Criterio de diseño: superficies blancas y neutras, el morado de la marca reservado para
   acciones principales y elementos activos, y el rosado pastel de la identidad de Lumi
   (iconos-lumi.html) para los cuadros de iconos, las ofertas y la barra inferior del teléfono.
   Bordes finos en lugar de sombras. El único degradado es el de la pantalla de entrada.
   Para cambiar la paleta basta con editar :root.
   ========================================================================== */

/* 1) Variables ------------------------------------------------------------ */
:root {
  /* Marca: el morado del documento del proyecto */
  --marca: #5b2a86;
  --marca-oscura: #47206a;
  --marca-suave: #f4eff9;
  --marca-anillo: rgba(91, 42, 134, 0.22);
  /* Identidad de Lumi (logos, iconos y pantalla de entrada del equipo) */
  --morado-noche: #3b1555;
  --rosa: #f8bbd9;
  --rosa-suave: #fff0f7;
  --rosa-texto: #e9cbe0;
  --rosa-fuerte: #e0559a;  /* trayectoria de la conductora hasta el punto de recogida */

  /* Neutros: texto en tres intensidades, fondos y bordes */
  --texto: #18151d;
  --texto-2: #4b4653;
  --texto-3: #6f6979;
  --fondo: #f6f6f7;
  --superficie: #ffffff;
  --superficie-2: #fafafb;
  --borde: #e4e2e8;
  --borde-fuerte: #cfcbd6;

  /* Estados: color del texto y fondo suave */
  --exito: #16724a;   --exito-suave: #e6f4ec;
  --aviso: #8a5a00;   --aviso-suave: #fcf3e2;
  --peligro: #b3261e; --peligro-suave: #fcebe9;
  --info: #22558f;    --info-suave: #e8f0fa;
  --neutro-suave: #efeef1;

  /* Tipografía y medidas */
  --fuente: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", "SF Mono", Consolas, monospace;
  --radio: 8px;
  --radio-grande: 12px;
  --sombra: 0 1px 2px rgba(24, 21, 29, 0.04);
  --sombra-flotante: 0 12px 32px rgba(24, 21, 29, 0.14);
  --ancho: 1200px;
  --alto-barra: 60px;
}

/* 2) Base y utilidades ---------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--fuente);
  font-size: 15px;
  line-height: 1.55;
  color: var(--texto);
  background: var(--fondo);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { margin: 0 0 8px; line-height: 1.25; font-weight: 600; letter-spacing: -0.01em; color: var(--texto); }
h1 { font-size: 1.625rem; }
h2 { font-size: 1.125rem; }
h3 { font-size: 1rem; }
p { margin: 0 0 12px; }
a { color: var(--marca); text-decoration: none; }
a:hover { text-decoration: underline; }
code { font-family: var(--mono); font-size: 0.9em; background: var(--neutro-suave); padding: 1px 5px; border-radius: 4px; }
img, svg { max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; }

.contenedor { width: 100%; max-width: var(--ancho); margin: 0 auto; padding: 0 24px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
[hidden] { display: none !important; }
.texto-2 { color: var(--texto-2); }
.texto-3 { color: var(--texto-3); }
.texto-sm { font-size: 13px; }
.texto-normal { font-weight: 400 !important; }
.texto-romper { overflow-wrap: anywhere; }
.num { font-variant-numeric: tabular-nums; }
.solo-movil { display: none; }

/* Iconos de Lumi (_iconos.html): trazo de 1,8, puntas redondeadas y el color del texto que los rodea */
.icono { width: 18px; height: 18px; flex: none; vertical-align: -3px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.icono-sm { width: 16px; height: 16px; }
.icono-titulo { width: 26px; height: 26px; vertical-align: -4px; color: var(--marca); }

.saltar-contenido { position: absolute; left: -9999px; top: 8px; z-index: 100; padding: 8px 12px; background: var(--texto); color: #fff; border-radius: 6px; }
.saltar-contenido:focus { left: 8px; }

/* Franja superior fija que recuerda que todo es una demostración */
.banda-demo { background: #1d1a22; color: #d6d2dd; font-size: 13px; }
.banda-demo .contenedor { padding-top: 7px; padding-bottom: 7px; }
.banda-demo a { color: #fff; text-decoration: underline; margin-left: 4px; }
.aviso-conexion { background: var(--aviso); color: #fff; text-align: center; font-size: 13px; padding: 6px 16px; }

/* 3) Páginas públicas ----------------------------------------------------- */
.marca { display: inline-flex; align-items: center; gap: 8px; color: var(--texto); font-weight: 700; font-size: 20px; letter-spacing: -0.02em; }
.marca:hover { text-decoration: none; }
.marca-logo { width: 32px; height: 32px; border-radius: 9px; }
/* Logo de día o de noche según la clase de <html> (ver la macro logo y js/app.js, sección 10) */
html:not(.momento-noche) .logo-noche, .momento-noche .logo-dia { display: none !important; }

.nav-publica { position: sticky; top: 0; z-index: 30; background: rgba(255, 255, 255, 0.97); border-bottom: 1px solid var(--borde); }
.nav-publica-fila { display: flex; align-items: center; gap: 32px; height: var(--alto-barra); }
.nav-publica-enlaces { display: flex; gap: 2px; }
.nav-publica-enlaces a { padding: 6px 10px; border-radius: 6px; color: var(--texto-2); font-size: 14px; font-weight: 500; }
.nav-publica-enlaces a:hover { color: var(--texto); background: var(--neutro-suave); text-decoration: none; }
.nav-publica-acciones { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.menu-boton { display: none; place-items: center; width: 38px; height: 38px; border: 1px solid var(--borde-fuerte); border-radius: var(--radio); background: var(--superficie); cursor: pointer; }
.menu-movil { display: none; border-top: 1px solid var(--borde); padding: 6px 0 10px; background: var(--superficie); }
.menu-movil.abierto { display: block; }
.menu-movil a { display: block; padding: 10px 24px; color: var(--texto); font-weight: 500; }

/* Portada */
.heroe { background: var(--superficie); border-bottom: 1px solid var(--borde); }
.heroe-rejilla { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 56px; align-items: center; padding-top: 56px; padding-bottom: 64px; }
.heroe h1 { font-size: 2.75rem; line-height: 1.08; letter-spacing: -0.03em; font-weight: 700; margin-bottom: 16px; }
.heroe-entrada { font-size: 17px; color: var(--texto-2); max-width: 46ch; margin-bottom: 28px; }
.heroe-formulario { max-width: 440px; box-shadow: 0 4px 16px rgba(24, 21, 29, 0.06); }
.heroe-formulario-titulo { font-size: 17px; font-weight: 600; margin-bottom: 12px; }
.heroe-visual { position: relative; }
.tarjeta-flotante { position: absolute; left: 20px; right: 20px; bottom: 20px; display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio-grande); box-shadow: var(--sombra-flotante); }
.tarjeta-flotante-texto { flex: 1; min-width: 0; }

.seccion { padding: 72px 0; background: var(--superficie); }
.seccion-gris { background: var(--fondo); border-top: 1px solid var(--borde); border-bottom: 1px solid var(--borde); }
.seccion-titulo { max-width: 620px; margin-bottom: 36px; }
.seccion-titulo h2 { font-size: 1.75rem; letter-spacing: -0.02em; margin-bottom: 10px; }
.seccion-titulo p { color: var(--texto-2); font-size: 16px; }

.pasos-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
.pasos-grid li { border-top: 1px solid var(--borde-fuerte); padding-top: 16px; }
.pasos-grid h3 { margin-bottom: 6px; }
.pasos-grid p { margin: 0; color: var(--texto-2); font-size: 14px; }

.dos-columnas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.dos-columnas .panel-cuerpo { padding: 28px; }
.lista-simple { margin: 0 0 20px; padding-left: 18px; color: var(--texto-2); }
.lista-simple li { margin-bottom: 6px; padding-left: 2px; }
.lista-simple li::marker { color: var(--texto-3); }
.lista-simple:last-child { margin-bottom: 0; }

.seguridad-rejilla { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 56px; }
.lista-caracteristicas { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 32px; }
.lista-caracteristicas div { border-top: 1px solid var(--borde); padding-top: 14px; }
.lista-caracteristicas dt { font-weight: 600; margin-bottom: 4px; }
.lista-caracteristicas dd { margin: 0; color: var(--texto-2); font-size: 14px; }

.llamado { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.llamado h2 { font-size: 1.375rem; margin-bottom: 4px; }
.llamado p { margin: 0; color: var(--texto-2); }

.pie { background: var(--superficie); border-top: 1px solid var(--borde); padding: 48px 0 24px; color: var(--texto-2); font-size: 14px; }
.pie-rejilla { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.4fr; gap: 32px; }
.pie h3 { font-size: 13px; margin-bottom: 12px; }
.pie nav a { display: block; padding: 3px 0; color: var(--texto-2); }
.pie nav a:hover { color: var(--texto); }
.pie-marca p { margin-top: 10px; }
.pie-inferior { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--borde); font-size: 13px; color: var(--texto-3); }

.pagina { padding-top: 40px; padding-bottom: 72px; }
.auth { max-width: 440px; margin: 8px auto 0; }
.auth-ancho { max-width: 620px; }
.auth-cabecera { margin-bottom: 20px; }
.auth-cabecera h1 { font-size: 1.5rem; margin-bottom: 4px; }
.auth-cabecera p { margin: 0; color: var(--texto-2); }

/* 4) Aplicación: barra superior, menú de la cuenta y barra inferior -------- */
.barra-app { position: sticky; top: 0; z-index: 30; background: var(--superficie); border-bottom: 1px solid var(--borde); }
.barra-app-fila { display: flex; align-items: center; gap: 28px; height: var(--alto-barra); }
.nav-app { display: flex; align-self: stretch; gap: 4px; }
.nav-app a { display: flex; align-items: center; padding: 0 10px; margin-bottom: -1px; border-bottom: 2px solid transparent; color: var(--texto-2); font-size: 14px; font-weight: 500; }
.nav-app a:hover { color: var(--texto); text-decoration: none; }
.nav-app a.activo { color: var(--texto); border-bottom-color: var(--marca); }
.barra-acciones { display: flex; align-items: center; gap: 8px; margin-left: auto; }

.boton-icono { position: relative; display: inline-grid; place-items: center; width: 38px; height: 38px; border: 0; border-radius: var(--radio); background: none; color: var(--texto-2); cursor: pointer; }
.boton-icono:hover { background: var(--neutro-suave); color: var(--texto); }
.punto-aviso { position: absolute; top: 3px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px; border: 2px solid var(--superficie); border-radius: 9px; background: var(--peligro); color: #fff; font-size: 10px; font-weight: 700; line-height: 14px; text-align: center; }

.menu-cuenta { position: relative; }
.menu-cuenta summary { display: flex; align-items: center; gap: 8px; padding: 4px 8px 4px 4px; border-radius: 999px; list-style: none; cursor: pointer; color: var(--texto-2); }
.menu-cuenta summary::-webkit-details-marker { display: none; }
.menu-cuenta summary:hover, .menu-cuenta[open] summary { background: var(--neutro-suave); }
.menu-cuenta-nombre { font-size: 14px; font-weight: 500; color: var(--texto); }
.menu-cuenta-lista { position: absolute; right: 0; top: calc(100% + 8px); z-index: 40; width: 270px; padding: 6px; background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio-grande); box-shadow: var(--sombra-flotante); }
.menu-cuenta-cabecera { padding: 10px 10px 12px; margin-bottom: 6px; border-bottom: 1px solid var(--borde); }
.menu-cuenta-cabecera strong { display: block; font-size: 14px; }
.menu-cuenta-cabecera span { display: block; font-size: 13px; color: var(--texto-3); overflow-wrap: anywhere; }
.menu-cuenta-lista a, .menu-cuenta-lista button { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 10px; border: 0; border-radius: 6px; background: none; color: var(--texto); font-size: 14px; text-align: left; cursor: pointer; }
.menu-cuenta-lista a:hover, .menu-cuenta-lista button:hover { background: var(--neutro-suave); text-decoration: none; }
.menu-cuenta-lista form { margin: 6px 0 0; padding-top: 6px; border-top: 1px solid var(--borde); }

.principal-app { padding-top: 28px; padding-bottom: 72px; }
.tabbar { display: none; }

/* Encabezado de cada página: título, línea descriptiva y acciones */
.encabezado { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.encabezado h1 { margin-bottom: 4px; }
.encabezado-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0; color: var(--texto-2); }
.volver { display: inline-flex; align-items: center; gap: 4px; margin-bottom: 12px; color: var(--texto-2); font-size: 14px; }
.volver:hover { color: var(--texto); text-decoration: none; }

.rejilla { display: grid; gap: 20px; align-items: start; }
.rejilla-principal { grid-template-columns: minmax(0, 1fr) 340px; }
.rejilla-perfil { grid-template-columns: 340px minmax(0, 1fr); }
.pila { display: grid; gap: 20px; align-content: start; min-width: 0; }
.angosto { max-width: 760px; margin: 0 auto; }

/* 5) Botones y formularios ------------------------------------------------ */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 40px; padding: 0 16px;
  border: 1px solid transparent; border-radius: var(--radio);
  font-size: 14px; font-weight: 600; line-height: 1; white-space: nowrap;
  cursor: pointer; text-decoration: none;
  transition: background-color 0.12s, border-color 0.12s, color 0.12s;
}
.boton:hover { text-decoration: none; }
.boton-primario { background: var(--marca); color: #fff; }
.boton-primario:hover { background: var(--marca-oscura); }
.boton-secundario { background: var(--superficie); color: var(--texto); border-color: var(--borde-fuerte); }
.boton-secundario:hover { background: var(--superficie-2); border-color: #b7b2c0; }
.boton-fantasma { background: transparent; color: var(--texto); }
.boton-fantasma:hover { background: var(--neutro-suave); }
.boton-peligro { background: var(--superficie); color: var(--peligro); border-color: #ecc4c0; }
.boton-peligro:hover { background: var(--peligro-suave); }
.boton-alerta { background: var(--peligro); color: #fff; }
.boton-alerta:hover { background: #952019; }
.boton-pequeno { height: 34px; padding: 0 12px; font-size: 13px; }
.boton-grande { height: 48px; padding: 0 20px; font-size: 15px; }
.boton-ancho { width: 100%; }
.boton:disabled { opacity: 0.55; cursor: not-allowed; }

.acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.acciones form { margin: 0; }
.acciones-fin { justify-content: flex-end; }
.acciones-centro { justify-content: center; }
.acciones-invertidas { flex-direction: row-reverse; justify-content: flex-start; }
.acciones-columna { display: grid; gap: 8px; }
.acciones-columna form { margin: 0; }
.acciones-columna .boton { width: 100%; }
.enlace-externo { display: inline-flex; align-items: center; gap: 4px; margin-top: 14px; font-size: 14px; font-weight: 500; }

.campo { margin-bottom: 16px; }
.campo > label, .campo > legend { display: block; margin-bottom: 6px; font-size: 14px; font-weight: 500; color: var(--texto); }
.opcional { font-weight: 400; color: var(--texto-3); }
.ayuda { margin: 6px 0 0; font-size: 13px; color: var(--texto-3); }
input[type="text"], input[type="email"], input[type="password"], input[type="tel"],
input[type="datetime-local"], input[type="number"], select, textarea {
  display: block; width: 100%; height: 42px; padding: 0 12px;
  border: 1px solid var(--borde-fuerte); border-radius: var(--radio);
  background: var(--superficie); color: var(--texto); font-size: 16px;
  transition: border-color 0.12s, box-shadow 0.12s;
}
textarea { height: auto; min-height: 96px; padding: 10px 12px; line-height: 1.5; resize: vertical; }
select {
  appearance: none; padding-right: 36px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236f6979' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 16px;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--marca); box-shadow: 0 0 0 3px var(--marca-anillo); }
input::placeholder, textarea::placeholder { color: #9a95a3; }
[aria-invalid="true"] { border-color: var(--peligro) !important; }
.campo-error { display: flex; align-items: flex-start; gap: 6px; margin: 6px 0 0; font-size: 13px; color: var(--peligro); }
fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.campos-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
.campos-3 { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 0 12px; }

.seccion-formulario { padding: 22px 0; border-top: 1px solid var(--borde); }
.seccion-formulario:first-of-type { padding-top: 0; border-top: 0; }
.seccion-formulario:last-child { padding-bottom: 0; }
.seccion-formulario > h3 { font-size: 15px; margin-bottom: 2px; }
.seccion-formulario > .descripcion { margin-bottom: 16px; font-size: 13px; color: var(--texto-3); }

.opciones { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.opcion-tarjeta { display: flex; align-items: flex-start; gap: 12px; padding: 14px; border: 1px solid var(--borde-fuerte); border-radius: var(--radio); background: var(--superficie); cursor: pointer; }
.opcion-tarjeta:hover { border-color: #b7b2c0; }
.opcion-tarjeta:has(input:checked) { border-color: var(--marca); box-shadow: 0 0 0 1px var(--marca); background: var(--marca-suave); }
.opcion-tarjeta input { flex: none; width: 16px; height: 16px; margin: 3px 0 0; accent-color: var(--marca); }
.opcion-texto strong { display: block; font-size: 14px; }
.opcion-texto small { display: block; font-size: 13px; color: var(--texto-2); }
.casilla { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: var(--texto-2); cursor: pointer; }
.casilla input { flex: none; width: 16px; height: 16px; margin: 3px 0 0; accent-color: var(--marca); }

/* Campo doble de recorrido (recogida y destino), como en el boceto de la pantalla 1 */
.entrada-ruta { border: 1px solid var(--borde-fuerte); border-radius: var(--radio); background: var(--superficie); }
.entrada-ruta:focus-within { border-color: var(--marca); box-shadow: 0 0 0 3px var(--marca-anillo); }
.entrada-ruta-fila { position: relative; }
.entrada-ruta-fila + .entrada-ruta-fila { border-top: 1px solid var(--borde); }
.entrada-ruta-fila::before { content: ""; position: absolute; left: 16px; top: 50%; z-index: 1; width: 10px; height: 10px; margin-top: -5px; border: 2px solid var(--texto); border-radius: 50%; background: var(--superficie); }
.entrada-ruta-fila.destino::before { border-radius: 2px; background: var(--texto); }
.entrada-ruta input { height: 48px; padding-left: 40px; border: 0; background: transparent; }
.entrada-ruta input:focus { box-shadow: none; }
.formulario-rapido { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: end; }

/* Interruptor de disponibilidad (conductora) */
.interruptor { gap: 10px; }
.interruptor-pista { position: relative; flex: none; width: 34px; height: 20px; border-radius: 10px; background: var(--borde-fuerte); transition: background-color 0.15s; }
.interruptor-pista::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); transition: transform 0.15s; }
.interruptor-pista.activo { background: var(--exito); }
.interruptor-pista.activo::after { transform: translateX(14px); }

/* Selector de 1 a 5 estrellas */
.estrellas-entrada { display: flex; flex-wrap: wrap; gap: 8px; }
.estrellas-entrada label { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; width: 88px; padding: 12px 6px 10px; border: 1px solid var(--borde-fuerte); border-radius: var(--radio); font-size: 12px; color: var(--texto-2); text-align: center; cursor: pointer; }
.estrellas-entrada label .icono { width: 24px; height: 24px; color: #cfcbd6; fill: currentColor; }
.estrellas-entrada label.marcada .icono, .estrellas-entrada label:has(input:checked) .icono { color: #d99a00; }
.estrellas-entrada label:has(input:checked) { border-color: var(--marca); box-shadow: 0 0 0 1px var(--marca); }
.estrellas-entrada label:focus-within { outline: 2px solid var(--marca); outline-offset: 2px; }
.estrellas-entrada input { position: absolute; width: 1px; height: 1px; opacity: 0; }

/* 6) Paneles, métricas, listas y tablas ----------------------------------- */
.panel { min-width: 0; background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio-grande); box-shadow: var(--sombra); }
.panel-cabecera { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 13px 20px; border-bottom: 1px solid var(--borde); }
.panel-cabecera h2 { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 15px; }
.panel-cabecera > a, .panel-cabecera > .texto-3 { font-size: 13px; }
.panel-cuerpo { padding: 20px; }
.panel-cuerpo > :last-child { margin-bottom: 0; }
.panel-pie { padding: 14px 20px; border-top: 1px solid var(--borde); background: var(--superficie-2); border-radius: 0 0 var(--radio-grande) var(--radio-grande); }
.panel-pie > :last-child { margin-bottom: 0; }
.panel-alerta { border-color: #edc6c2; }
.panel-alerta .panel-cabecera { background: var(--peligro-suave); border-bottom-color: #edc6c2; border-radius: var(--radio-grande) var(--radio-grande) 0 0; }
.panel-alerta .panel-cabecera h2 { color: var(--peligro); }
.subtitulo { margin-bottom: 10px; font-size: 14px; }

.metricas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 20px; background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio-grande); box-shadow: var(--sombra); }
.metrica { padding: 16px 20px; }
.metrica + .metrica { border-left: 1px solid var(--borde); }
.metrica-etiqueta { margin-bottom: 6px; font-size: 13px; color: var(--texto-3); }
.metrica-valor { font-size: 1.5rem; font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.metrica-nota { margin-top: 2px; font-size: 12px; color: var(--texto-3); }

/* Lista de datos: etiqueta a la izquierda, valor a la derecha */
.lista-datos { margin: 0; }
.lista-datos > div { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 10px 0; border-top: 1px solid var(--borde); font-size: 14px; }
.lista-datos > div:first-child { padding-top: 0; border-top: 0; }
.lista-datos > div:last-child { padding-bottom: 0; }
.lista-datos dt { color: var(--texto-2); }
.lista-datos dd { margin: 0; text-align: right; font-weight: 500; }
.lista-datos-apilada > div { display: block; }
.lista-datos-apilada dt { margin-bottom: 2px; color: var(--texto); font-size: 13px; font-weight: 600; }
.lista-datos-apilada dd { text-align: left; font-weight: 400; color: var(--texto-2); }

/* Lista de filas: avisos, contactos, viajes por calificar */
.lista-filas { list-style: none; margin: 0; padding: 0; }
.lista-filas > li { display: flex; align-items: flex-start; gap: 12px; padding: 12px 20px; border-top: 1px solid var(--borde); font-size: 14px; }
.lista-filas > li:first-child { border-top: 0; }
.fila-cuerpo { flex: 1; min-width: 0; }
.fila-titulo { display: block; font-weight: 500; color: var(--texto); }
.fila-meta { display: block; font-size: 13px; color: var(--texto-3); }
.fila-accion { flex: none; align-self: center; margin: 0; }
.punto { flex: none; width: 8px; height: 8px; margin-top: 7px; border-radius: 50%; background: var(--marca); }
.punto-vacio { background: transparent; }
.lista-numerada { margin: 0; padding-left: 20px; }
.lista-numerada li { margin-bottom: 10px; padding-left: 4px; color: var(--texto-2); font-size: 14px; }
.lista-numerada li:last-child { margin-bottom: 0; }

.tabla-envoltura { overflow-x: auto; }
.tabla { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabla th { padding: 10px 16px; border-bottom: 1px solid var(--borde); background: var(--superficie-2); color: var(--texto-3); font-size: 13px; font-weight: 500; text-align: left; white-space: nowrap; }
.tabla td { padding: 12px 16px; border-bottom: 1px solid var(--borde); vertical-align: middle; }
.tabla td.celda-ruta { min-width: 220px; }
.tabla td.celda-nombre { white-space: nowrap; }
.tabla tbody tr:last-child td { border-bottom: 0; }
.tabla tbody tr:hover { background: var(--superficie-2); }
.tabla .numero { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tabla .celda-accion { width: 1%; text-align: right; white-space: nowrap; }
.celda-fecha { color: var(--texto-2); white-space: nowrap; }
.celda-ruta strong { display: block; font-weight: 500; }
.celda-ruta a { color: var(--texto); }
.celda-ruta a:hover { color: var(--marca); }
.celda-ruta span { display: block; font-size: 13px; color: var(--texto-3); }
.celda-persona { display: flex; align-items: center; gap: 10px; }

.pestanas { display: flex; gap: 4px; margin-bottom: 20px; border-bottom: 1px solid var(--borde); overflow-x: auto; }
.pestanas a { display: inline-flex; align-items: center; gap: 6px; padding: 10px 12px; margin-bottom: -1px; border-bottom: 2px solid transparent; color: var(--texto-2); font-size: 14px; font-weight: 500; white-space: nowrap; }
.pestanas a:hover { color: var(--texto); text-decoration: none; }
.pestanas a[aria-current="page"] { color: var(--texto); border-bottom-color: var(--marca); }
.pestanas .cuenta { padding: 0 7px; border-radius: 10px; background: var(--neutro-suave); color: var(--texto-3); font-size: 12px; line-height: 18px; font-variant-numeric: tabular-nums; }

.vacio { padding: 32px 20px; text-align: center; color: var(--texto-2); font-size: 14px; }
.vacio-titulo { margin-bottom: 4px; font-weight: 600; color: var(--texto); }
.vacio p { max-width: 46ch; margin: 0 auto 12px; }
.vacio > :last-child { margin-bottom: 0; }

.acordeones { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio-grande); box-shadow: var(--sombra); }
.acordeon + .acordeon { border-top: 1px solid var(--borde); }
.acordeon summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 20px; font-weight: 500; list-style: none; cursor: pointer; }
.acordeon summary::-webkit-details-marker { display: none; }
.acordeon summary::after { content: ""; flex: none; width: 8px; height: 8px; margin-top: -4px; border-right: 2px solid var(--texto-3); border-bottom: 2px solid var(--texto-3); transform: rotate(45deg); transition: transform 0.15s; }
.acordeon[open] summary::after { margin-top: 4px; transform: rotate(-135deg); }
.acordeon-cuerpo { padding: 0 20px 18px; color: var(--texto-2); font-size: 14px; }
.acordeon-cuerpo ul { margin: 0; padding-left: 18px; }
.acordeon-cuerpo li { margin-bottom: 4px; }

/* 7) Estados, avatares, mensajes ------------------------------------------ */
.estado { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 4px; background: var(--neutro-suave); color: var(--texto-2); font-size: 12px; font-weight: 600; white-space: nowrap; }
.estado-solicitado { background: var(--aviso-suave); color: var(--aviso); }
.estado-asignada { background: var(--info-suave); color: var(--info); }
.estado-en_curso { background: var(--marca-suave); color: var(--marca); }
.estado-finalizado { background: var(--exito-suave); color: var(--exito); }
.estado-cancelado { background: var(--neutro-suave); color: var(--texto-3); }
.revision-no_revisada { background: var(--neutro-suave); color: var(--texto-2); }
.revision-pendiente { background: var(--aviso-suave); color: var(--aviso); }
.revision-aprobada_demo { background: var(--exito-suave); color: var(--exito); }

.avatar { display: inline-grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%; background: #e9e6ee; color: var(--texto-2); font-size: 13px; font-weight: 600; text-transform: uppercase; }
.avatar-sm { width: 28px; height: 28px; font-size: 11px; }
.avatar-lg { width: 56px; height: 56px; font-size: 18px; }

.persona { display: flex; align-items: center; gap: 12px; min-width: 0; }
.persona-nombre { display: block; font-weight: 600; color: var(--texto); }
a.persona-nombre:hover { color: var(--marca); }
.persona-detalle { display: block; font-size: 13px; color: var(--texto-3); }

.estrellas { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; font-variant-numeric: tabular-nums; }
.estrellas .icono { width: 14px; height: 14px; color: #d99a00; fill: currentColor; }
.estrellas small { color: var(--texto-3); font-size: 13px; font-weight: 400; }

.mensajes { display: grid; gap: 8px; margin: 0 0 20px; padding: 0; list-style: none; }
.mensaje { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border: 1px solid #c9d9ef; border-radius: var(--radio); background: var(--info-suave); color: #183e6b; font-size: 14px; }
.mensaje .icono { margin-top: 1px; }
.mensaje > span { flex: 1; }
.mensaje-exito { border-color: #bfe0cd; background: var(--exito-suave); color: #0f5134; }
.mensaje-aviso { border-color: #efdcae; background: var(--aviso-suave); color: #684400; }
.mensaje-error { border-color: #edc6c2; background: var(--peligro-suave); color: #8b1c16; }
.mensaje-suelto { margin-bottom: 20px; }
.cerrar { padding: 0 2px; border: 0; background: none; color: inherit; font-size: 18px; line-height: 1; opacity: 0.7; cursor: pointer; }
.cerrar:hover { opacity: 1; }

/* 8) Piezas del viaje ----------------------------------------------------- */
.viaje-resumen { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.viaje-fecha { margin-bottom: 12px; font-size: 13px; color: var(--texto-3); }

/* Recorrido: círculo para la recogida y cuadro para el destino */
.ruta { margin: 0; padding: 0; list-style: none; }
.ruta li { position: relative; padding-left: 26px; }
.ruta li + li { margin-top: 14px; }
.ruta li::before { content: ""; position: absolute; left: 2px; top: 6px; width: 10px; height: 10px; border: 2px solid var(--texto); border-radius: 50%; background: var(--superficie); }
.ruta li.ruta-destino::before { border-radius: 2px; background: var(--texto); }
.ruta li.ruta-origen::after { content: ""; position: absolute; left: 6px; top: 20px; width: 2px; height: calc(100% - 6px); background: var(--borde-fuerte); }
.ruta-lugar { display: block; font-weight: 500; }
.ruta-etiqueta { display: block; font-size: 12px; color: var(--texto-3); }
.notas { margin: 16px 0 0; font-size: 14px; }

/* Progreso del viaje: solicitado, asignada, en curso, finalizado */
.progreso { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; margin: 0; padding: 0; list-style: none; }
.progreso li { position: relative; padding-top: 22px; padding-right: 8px; font-size: 12px; color: var(--texto-3); }
.progreso li::before { content: ""; position: absolute; top: 4px; left: 0; z-index: 1; width: 10px; height: 10px; border: 2px solid var(--borde-fuerte); border-radius: 50%; background: var(--superficie); }
.progreso li::after { content: ""; position: absolute; top: 9px; left: 14px; right: 4px; height: 2px; background: var(--borde); }
.progreso li:last-child::after { display: none; }
.progreso li.hecho { color: var(--texto-2); }
.progreso li.hecho::before { border-color: var(--marca); background: var(--marca); }
.progreso li.hecho::after { background: var(--marca); }
.progreso li.actual { color: var(--texto); font-weight: 600; }
.progreso li.actual::before { border-color: var(--marca); box-shadow: 0 0 0 3px var(--marca-anillo); }
.progreso-cancelado { margin: 0; font-size: 14px; color: var(--texto-2); }

/* Mapa ilustrativo: calles, parque, río y el recorrido. No es un mapa real. */
.mapa { position: relative; overflow: hidden; border: 1px solid var(--borde); border-radius: var(--radio-grande); background: #eceaf0; }
.mapa > svg { position: absolute; inset: 0; width: 100%; height: 100%; }  /* solo la ilustración, no el SVG de Leaflet */
.mapa-fondo { fill: #eceaf0; }
.mapa-agua { fill: #d5e3ef; }
.mapa-parque { fill: #d8e9da; }
.mapa-calles-menores { fill: none; stroke: #ffffff; stroke-width: 6; }
.mapa-calles { fill: none; stroke: #ffffff; stroke-width: 14; }
.mapa-ruta { fill: none; stroke: var(--marca); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.mapa-origen { fill: #ffffff; stroke: var(--texto); stroke-width: 4; }
.mapa-destino { fill: var(--texto); }
.mapa-leyenda { position: absolute; left: 12px; top: 12px; max-width: calc(100% - 24px); margin: 0; padding: 8px 12px; list-style: none; background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: var(--sombra); font-size: 13px; }
.mapa-leyenda li { position: relative; padding-left: 18px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.mapa-leyenda li::before { content: ""; position: absolute; left: 0; top: 5px; width: 8px; height: 8px; border: 2px solid var(--texto); border-radius: 50%; }
.mapa-leyenda li.destino::before { border-radius: 2px; background: var(--texto); }
.mapa-nota { position: absolute; bottom: 12px; right: 12px; margin: 0; padding: 3px 8px; border: 1px solid var(--borde); border-radius: 4px; background: rgba(255, 255, 255, 0.92); color: var(--texto-2); font-size: 12px; }

.precio-total { margin: 0 0 4px; font-size: 2rem; font-weight: 600; line-height: 1.1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.precio-nota { margin: 0; font-size: 13px; color: var(--texto-3); }
.placa { padding: 1px 6px; border: 1px solid var(--borde-fuerte); border-radius: 4px; background: var(--superficie-2); font-family: var(--mono); font-size: 13px; letter-spacing: 0.04em; }
.codigo { display: block; width: 100%; margin: 0 0 12px; padding: 12px; border: 1px dashed var(--borde-fuerte); border-radius: var(--radio); background: var(--superficie-2); color: var(--texto); font-family: var(--mono); font-size: 1.5rem; font-weight: 600; letter-spacing: 0.18em; text-align: center; }
button.codigo { cursor: pointer; }
button.codigo:hover { border-color: var(--marca); background: var(--marca-suave); }
.acciones-partidas { display: flex; gap: 8px; }
.acciones-partidas > * { flex: 1 1 0; }
.codigo-compartir { font-family: var(--mono); font-weight: 600; letter-spacing: 0.04em; color: var(--texto); }

/* 9) Páginas puntuales ---------------------------------------------------- */
.solicitudes { margin: 0; padding: 0; list-style: none; }
.solicitud { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 16px 20px; border-top: 1px solid var(--borde); }
.solicitud:first-child { border-top: 0; }
.solicitud-info { min-width: 0; font-size: 14px; }
.solicitud-destino { display: block; font-size: 15px; font-weight: 600; }
.solicitud-meta { display: block; font-size: 13px; color: var(--texto-3); }
.solicitud-nota { display: block; margin-top: 6px; font-size: 13px; color: var(--texto-2); }
.solicitud-cierre { display: flex; flex: none; align-items: center; gap: 16px; }
.solicitud-monto { text-align: right; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.solicitud-monto small { display: block; font-size: 12px; font-weight: 400; color: var(--texto-3); }
.comentario { padding: 12px 0; border-top: 1px solid var(--borde); font-size: 14px; }
.comentario:first-child { padding-top: 0; border-top: 0; }
.comentario:last-child { padding-bottom: 0; }
.comentario p { margin: 0 0 4px; }
.comentario-meta { font-size: 13px; color: var(--texto-3); }
.cita { margin: 0 0 16px; color: var(--texto-2); }
.numero-grande { margin: 0 0 6px; font-size: 2.25rem; font-weight: 700; line-height: 1; letter-spacing: -0.02em; }
.estado-pagina { max-width: 480px; margin: 40px auto; text-align: center; }
.estado-pagina-codigo { margin-bottom: 8px; color: var(--texto-3); font-size: 13px; font-weight: 600; letter-spacing: 0.04em; }

/* 11) Integraciones: mapa real, búsqueda de lugares y estados de conexión --- */
/* Mapa real (Leaflet + OpenStreetMap). .mapa-real aísla las capas de Leaflet para que
   no se monten sobre la barra superior al desplazarse. */
.mapa-real { isolation: isolate; background: #e8eef3; }
.mapa-lienzo { position: absolute; inset: 0; z-index: 0; }
.mapa-real .mapa-leyenda { z-index: 1; }
.mapa-real .leaflet-container { font: inherit; background: #e8eef3; }
.mapa-real .leaflet-control-attribution { font-size: 11px; }
.mapa-fuente { margin: 8px 0 0; font-size: 12px; color: var(--texto-3); }

/* Búsqueda de lugares con sugerencias (combobox accesible) */
.autocompletar { position: relative; }
.autocompletar-lista { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 20; max-height: 280px; margin: 0; padding: 4px; overflow-y: auto; list-style: none; background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: var(--sombra-flotante); }
.autocompletar-opcion { padding: 8px 10px; border-radius: 6px; font-size: 14px; cursor: pointer; }
.autocompletar-opcion:hover, .autocompletar-opcion[aria-selected="true"] { background: var(--marca-suave); }
.autocompletar-detalle { display: block; font-size: 12px; color: var(--texto-3); }
.autocompletar-estado { padding: 8px 10px; font-size: 13px; color: var(--texto-3); }
.ubicado { display: inline-flex; align-items: center; gap: 4px; margin-top: 6px; font-size: 13px; color: var(--exito); }

/* Estados de una conexión (avisos push, vínculo con Telegram) */
.estado-ok { background: var(--exito-suave); color: var(--exito); }
.estado-pendiente { background: var(--aviso-suave); color: var(--aviso); }

/* Vínculo de un contacto con Telegram (seguridad/inicio.html) */
.fila-telegram { display: grid; gap: 8px; margin-top: 8px; }
.fila-telegram > p { margin: 0; }

/* 12) Novedades ----------------------------------------------------------- */
/* Cuadros de iconos con el estilo de iconos-lumi.html: rosado con trazo morado, o morado con trazo rosado */
.tile-icono { --icono-fondo: var(--rosa); display: inline-grid; place-items: center; flex: none; width: 56px; height: 56px; border-radius: 18px; background: var(--rosa); color: var(--morado-noche); }
.tile-icono .icono { width: 28px; height: 28px; }
.tile-oscuro { --icono-fondo: var(--morado-noche); background: var(--morado-noche); color: var(--rosa); }
.tile-sm { width: 38px; height: 38px; border-radius: 12px; }
.tile-sm .icono { width: 20px; height: 20px; }
.accesos { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin-bottom: 20px; }
.accesos a { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 6px 12px; background: var(--superficie); border: 1px solid var(--borde); border-radius: 18px; color: var(--texto); font-size: 13px; font-weight: 600; text-align: center; transition: border-color 0.12s, transform 0.12s; }
.accesos a:hover { text-decoration: none; border-color: var(--rosa); transform: translateY(-1px); }

/* Oferta de bienvenida */
.oferta { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 20px; padding: 12px 14px; border-radius: var(--radio-grande); background: var(--rosa); color: var(--morado-noche); font-size: 14px; }
.oferta .icono { margin-top: 2px; }
.oferta a { color: var(--morado-noche); font-weight: 700; text-decoration: underline; }
.oferta-suave { margin: 0 0 12px; padding: 8px 12px; background: var(--rosa-suave); border: 1px solid var(--rosa); font-size: 13px; }
.precio-antes { margin: 0 0 2px; color: var(--texto-3); font-size: 14px; }

/* Carro o moto, Ahora o Programar */
.opcion-vehiculo { align-items: center; }
.opcion-icono { --icono-fondo: var(--rosa); display: inline-grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 14px; background: var(--rosa); color: var(--morado-noche); }
.opcion-icono .icono { width: 26px; height: 26px; }
.opcion-vehiculo input { margin: 0; }
.vehiculo-tipo { display: inline-flex; align-items: center; gap: 4px; font-weight: 500; white-space: nowrap; }
.pildoras { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.pildora { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--borde-fuerte); border-radius: 999px; font-size: 13px; font-weight: 500; cursor: pointer; }
.pildora input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pildora:has(input:checked) { border-color: var(--morado-noche); background: var(--morado-noche); color: var(--rosa); }
.pildora:focus-within { outline: 2px solid var(--marca); outline-offset: 2px; }

/* Atajos de lugares (chips) */
.atajos { margin: -4px 0 16px; }
.atajos-titulo { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; font-size: 13px; color: var(--texto-2); }
.atajos-titulo a { margin-left: auto; font-size: 13px; }
.atajos-lista { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; height: 34px; padding: 0 12px; border: 1px solid var(--borde-fuerte); border-radius: 999px; background: var(--superficie); color: var(--texto); font-size: 13px; font-weight: 500; cursor: pointer; }
.chip span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; max-width: 22ch; }
.chip:hover { border-color: var(--rosa); background: var(--rosa-suave); text-decoration: none; }
.chip .icono { color: var(--marca); }
.boton-ubicacion { margin: -6px 0 6px; }
.boton-ubicacion + .ayuda { margin: 0 0 14px; }
.boton-ubicacion + .ayuda:empty { display: none; }

/* Fotos de perfil y documentos */
.avatar-foto { object-fit: cover; padding: 0; }
.avatar-xl { width: 72px; height: 72px; font-size: 22px; }
.foto-perfil-fila { display: flex; align-items: flex-start; gap: 16px; }
.archivo-actual { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; font-size: 13px; color: var(--exito); }
input[type="file"] { display: block; width: 100%; padding: 8px; border: 1px dashed var(--borde-fuerte); border-radius: var(--radio); background: var(--superficie-2); font-size: 14px; }
input[type="file"]::file-selector-button { margin-right: 10px; padding: 6px 12px; border: 0; border-radius: 6px; background: var(--rosa); color: var(--morado-noche); font-weight: 600; cursor: pointer; }
.vista-previa { display: flex; align-items: center; gap: 10px; margin-top: 8px; font-size: 13px; color: var(--texto-2); }
.vista-previa img { width: 64px; height: 64px; border-radius: var(--radio); object-fit: cover; border: 1px solid var(--borde); }
.estado .icono { width: 13px; height: 13px; margin-right: 3px; }
.persona .estado { margin-top: 4px; }

/* Seguimiento en tiempo real */
.seguimiento { padding: 14px; border: 1px solid var(--rosa); border-radius: var(--radio-grande); background: var(--rosa-suave); }
.seguimiento-fila { display: flex; align-items: center; gap: 12px; }
.seguimiento-icono { display: inline-grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 14px; background: var(--morado-noche); color: var(--rosa); }
.seguimiento-icono .icono { width: 24px; height: 24px; }
.seguimiento-tiempo { flex: none; font-weight: 700; color: var(--morado-noche); font-variant-numeric: tabular-nums; }
.seguimiento .acciones { margin-bottom: 8px; }
.barra-progreso { height: 6px; margin-top: 12px; overflow: hidden; border-radius: 3px; background: #fff; }
.barra-progreso > span { display: block; height: 100%; border-radius: 3px; background: var(--marca); transition: width 0.8s ease; }
.en-vivo-etiqueta { display: inline-flex; align-items: center; gap: 6px; color: var(--peligro); font-size: 13px; font-weight: 600; }
.en-vivo-etiqueta::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--peligro); animation: latido 1.4s ease-in-out infinite; }
.en-vivo-etiqueta .icono { display: none; }
/* El vehículo en el mapa (L.divIcon de js/seguimiento.js) */
.marca-vehiculo { display: grid; place-items: center; border: 3px solid #fff; border-radius: 50%; background: var(--rosa); color: var(--morado-noche); box-shadow: 0 3px 10px rgba(59, 21, 85, 0.45); }
.marca-vehiculo .icono { width: 20px; height: 20px; }
@keyframes latido { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }

/* Verificación facial */
.verificacion-fotos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; max-width: 480px; margin: 0 auto; }
.verificacion-fotos figure { margin: 0; text-align: center; }
.verificacion-fotos figcaption { margin-top: 6px; font-size: 13px; color: var(--texto-3); }
.verificacion-fotos img, .verificacion-camara { width: 100%; aspect-ratio: 3 / 4; border-radius: var(--radio-grande); object-fit: cover; background: var(--rosa-suave); }
.verificacion-camara { position: relative; display: grid; place-items: center; overflow: hidden; border: 1px dashed var(--rosa); }
.verificacion-camara video, .verificacion-camara img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); }
.verificacion-camara img { transform: none; }
.verificacion-vacia { display: grid; justify-items: center; gap: 6px; padding: 12px; color: var(--marca); font-size: 13px; }
.verificacion-vacia .icono { width: 32px; height: 32px; }
.verificacion-estado { min-height: 1.5em; margin: 12px 0 0; font-size: 14px; color: var(--texto-2); }
.verificacion-estado.exito { color: var(--exito); font-weight: 600; }
.verificacion-estado.error { color: var(--peligro); }

/* Pantalla de entrada (splash): diseño del equipo, splash-dia.html y splash-noche.html */
body.splash { min-height: 100vh; display: flex; justify-content: center; background: #f1e6f5; font-family: "Poppins", var(--fuente); }
.splash-app { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 32px; width: 100%; max-width: 420px; min-height: 100vh; padding: 56px 28px 36px; overflow: hidden; color: #fff; background: linear-gradient(170deg, var(--morado-noche) 0%, var(--marca) 45%, var(--rosa) 100%); }
.splash-app::before, .splash-app::after { content: ""; position: absolute; border-radius: 50%; background: rgba(255, 255, 255, 0.1); }
.splash-app::before { width: 320px; height: 320px; top: -120px; right: -110px; }
.splash-app::after { width: 260px; height: 260px; bottom: 120px; left: -130px; }
.splash-marca { z-index: 1; margin-top: 40px; text-align: center; }
.splash-icono { width: 120px; height: 120px; margin: 0 auto 18px; border-radius: 30px; box-shadow: 0 14px 34px rgba(59, 21, 85, 0.35); animation: flota 3.2s ease-in-out infinite; }
.splash-icono img { display: block; width: 100%; height: 100%; }
.splash-marca h1 { margin: 0; color: #fff; font-size: 3rem; font-weight: 700; letter-spacing: 0.5px; }
.splash-marca p { margin: 4px 0 0; font-size: 0.8rem; letter-spacing: 3px; opacity: 0.9; }
.splash-mensaje { z-index: 1; max-width: 300px; margin: 0; text-align: center; font-size: 1.05rem; line-height: 1.5; opacity: 0.95; }
.splash-acciones { z-index: 1; display: grid; gap: 12px; width: 100%; }
.splash-boton { display: block; width: 100%; padding: 16px; border: 2px solid var(--morado-noche); border-radius: 16px; font-size: 1rem; font-weight: 600; text-align: center; transition: transform 0.15s; }
.splash-boton:hover { text-decoration: none; }
.splash-boton:active { transform: scale(0.97); }
.splash-boton.principal { background: var(--morado-noche); color: #fff; }
.splash-boton.secundario { background: transparent; color: var(--morado-noche); }
.splash-seguro { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 6px 0 0; font-size: 0.75rem; color: var(--morado-noche); opacity: 0.85; }
.splash-pie { margin: 0; font-size: 0.75rem; text-align: center; color: var(--morado-noche); opacity: 0.8; }
.splash-pie a { color: var(--morado-noche); font-weight: 600; text-decoration: underline; }
@keyframes flota { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@media (prefers-reduced-motion: reduce) { .splash-icono, .en-vivo-etiqueta::before { animation: none; } }

/* 13) Mapa y servicios: Prioridad y Confort, paradas, horas de llegada, carritos y trayectoria ---- */
.servicio { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: 4px; font-size: 12px; font-weight: 600; white-space: nowrap; vertical-align: middle; }
.servicio .icono { width: 13px; height: 13px; }
.servicio-prioridad { background: var(--aviso-suave); color: var(--aviso); }
.servicio-confort { background: var(--marca-suave); color: var(--marca); }
.opciones-servicio { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.opcion-servicio .recargo { margin-left: 4px; color: var(--marca); font-size: 12px; }
.separado-sm { margin-top: 12px; }

/* Recorrido con paradas: rombo rosado entre la recogida y el destino */
.ruta li.ruta-parada::before { border-color: var(--marca); border-radius: 2px; background: var(--rosa); transform: rotate(45deg); }
.ruta li.ruta-parada::after { content: ""; position: absolute; left: 6px; top: 20px; width: 2px; height: calc(100% - 6px); background: var(--borde-fuerte); }
.parada { position: relative; }
.parada-quitar { margin: -8px 0 12px; }
.boton-parada { margin: -4px 0 16px; }

/* Horas estimadas de llegada */
.llegadas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 16px; }
.llegada { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--radio-grande); background: var(--rosa-suave); border: 1px solid var(--rosa); }
.llegada > .icono { flex: none; width: 34px; height: 34px; padding: 7px; border-radius: 10px; background: var(--morado-noche); color: var(--rosa); }
.llegada span, .llegada small { display: block; font-size: 12px; color: var(--texto-2); }
.llegada strong { display: block; font-size: 16px; color: var(--morado-noche); }

/* Mapas con carritos y para elegir lugares */
.mapa-carritos { height: 300px; }
.mapa-selector { height: 340px; margin-top: 8px; }
.mapa-selector-bajo { height: 260px; }
.mapa-selector .leaflet-container { cursor: crosshair; }
.selector-mapa { margin-top: 8px; }
.selector-mapa-titulo { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; font-size: 13px; font-weight: 600; color: var(--texto-2); }
.selector-mapa-campos { margin-top: 0; }
.carrito { display: grid; place-items: center; border: 2px solid #fff; border-radius: 50%; background: var(--morado-noche); color: var(--rosa); box-shadow: 0 2px 8px rgba(59, 21, 85, 0.4); transition: transform 0.6s linear; }
.carrito .icono { width: 18px; height: 18px; }
.carrito-confort { background: var(--rosa); color: var(--morado-noche); border-color: var(--morado-noche); }
.leyenda-trayectoria { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 8px 0 0; padding: 0; list-style: none; font-size: 12px; color: var(--texto-2); }
.leyenda-trayectoria li { display: inline-flex; align-items: center; gap: 6px; }
.leyenda-trayectoria li::before { content: ""; width: 22px; height: 0; border-top: 4px solid var(--marca); }
.leyenda-trayectoria .leyenda-recogida::before { border-top: 4px dashed var(--rosa-fuerte); }

/* Botones con forma de píldora (filtros y campos del mapa) */
button.pildora { background: var(--superficie); color: var(--texto); font: inherit; font-size: 13px; }
button.pildora[aria-pressed="true"] { border-color: var(--morado-noche); background: var(--morado-noche); color: var(--rosa); }
.pildoras-sin-margen { margin: 0; }

/* Conductora: su ubicación, la distancia a cada solicitud y la navegación */
.ubicacion-conductora { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; padding: 12px 14px; border: 1px solid var(--rosa); border-radius: var(--radio-grande); background: var(--rosa-suave); }
.ubicacion-conductora .fila-meta { font-size: 13px; }
.solicitud-cerca { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; font-size: 13px; font-weight: 600; color: var(--marca); }
.navegacion { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 4px 0 10px; font-size: 13px; font-weight: 600; color: var(--texto-2); }
.navegacion > span { display: inline-flex; align-items: center; gap: 4px; }

/* 10) Tabletas y teléfonos ------------------------------------------------ */
@media (max-width: 1080px) {
  .rejilla-principal { grid-template-columns: minmax(0, 1fr) 300px; }
  .rejilla-perfil { grid-template-columns: 300px minmax(0, 1fr); }
  .heroe-rejilla { gap: 40px; }
}

@media (max-width: 900px) {
  .nav-publica-enlaces, .nav-publica-acciones .boton-fantasma { display: none; }
  .menu-boton { display: inline-grid; }
  .nav-app, .solo-escritorio { display: none !important; }
  .solo-movil { display: revert; }
  .menu-cuenta-nombre { display: none; }

  /* Barra inferior con el diseño de iconos-lumi.html: morado de noche, flotante, y la sección activa en rosado */
  .tabbar { position: fixed; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 30; display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px; padding: 8px; background: var(--morado-noche); border-radius: 26px; box-shadow: 0 10px 28px rgba(59, 21, 85, 0.35); }
  .tabbar a { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 7px 2px 6px; border-radius: 18px; color: var(--rosa-texto); font-size: 11px; font-weight: 500; }
  .tabbar a:hover { text-decoration: none; color: #fff; }
  .tabbar a.activo { background: var(--rosa); color: var(--morado-noche); font-weight: 700; }
  .tabbar .icono { width: 24px; height: 24px; }
  .tabbar .punto-aviso { top: 1px; right: calc(50% - 22px); border-color: var(--morado-noche); }
  .principal-app { padding-bottom: 120px; }

  .rejilla-principal, .rejilla-perfil, .dos-columnas, .seguridad-rejilla, .heroe-rejilla { grid-template-columns: minmax(0, 1fr); }
  .accesos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .heroe-rejilla { padding-top: 44px; padding-bottom: 48px; }
  .heroe h1 { font-size: 2.125rem; }
  .heroe-visual { display: none; }
  .heroe-formulario { max-width: none; }
  .seccion { padding: 52px 0; }
  .pasos-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 24px; }
  .pie-rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  body { font-size: 15px; }
  .contenedor { padding-left: 16px; padding-right: 16px; }
  h1 { font-size: 1.375rem; }
  .heroe h1 { font-size: 1.875rem; }
  .heroe-entrada { font-size: 16px; }
  .seccion-titulo h2 { font-size: 1.5rem; }
  .campos-2, .campos-3, .opciones, .pasos-grid, .lista-caracteristicas, .pie-rejilla, .formulario-rapido { grid-template-columns: minmax(0, 1fr); }
  .opciones-vehiculo, .opciones:has(.opcion-vehiculo) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .opcion-vehiculo { flex-direction: column; align-items: flex-start; gap: 8px; }
  .opcion-vehiculo input { position: absolute; opacity: 0; }
  .opcion-vehiculo { position: relative; }
  .accesos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .opciones-servicio, .llegadas { grid-template-columns: minmax(0, 1fr); }
  .mapa-selector, .mapa-carritos { height: 280px; }
  .ubicacion-conductora { flex-wrap: wrap; }
  .tile-icono { width: 48px; height: 48px; border-radius: 16px; }
  .foto-perfil-fila { flex-direction: column; }
  .panel-cabecera, .panel-cuerpo, .panel-pie, .lista-filas > li { padding-left: 16px; padding-right: 16px; }
  .dos-columnas .panel-cuerpo { padding: 20px 16px; }
  /* Métricas en filas: etiqueta y nota a la izquierda, valor a la derecha */
  .metricas { grid-template-columns: minmax(0, 1fr); }
  .metrica { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; align-items: center; padding: 12px 16px; }
  .metrica + .metrica { border-left: 0; border-top: 1px solid var(--borde); }
  .metrica-etiqueta { margin: 0; }
  .metrica-valor { grid-column: 2; grid-row: 1 / span 2; font-size: 1.25rem; }
  .banda-demo { font-size: 12px; }
  .encabezado { align-items: flex-start; }

  .solicitud { flex-direction: column; align-items: stretch; gap: 12px; padding: 14px 16px; }
  .solicitud-cierre { justify-content: space-between; }
  .solicitud-monto { text-align: left; }

  /* Las tablas marcadas como adaptables se leen como fichas */
  .tabla-adaptable thead { display: none; }
  .tabla-adaptable, .tabla-adaptable tbody, .tabla-adaptable tr, .tabla-adaptable td { display: block; width: 100%; }
  .tabla-adaptable tr { padding: 12px 16px; border-bottom: 1px solid var(--borde); }
  .tabla-adaptable tbody tr:last-child { border-bottom: 0; }
  .tabla-adaptable td { display: flex; justify-content: space-between; gap: 16px; padding: 4px 0; border: 0; text-align: right; white-space: normal; }
  .tabla-adaptable td.celda-ruta { min-width: 0; }
  .tabla-adaptable td::before { content: attr(data-etiqueta); flex: none; color: var(--texto-3); font-size: 13px; text-align: left; }
  .tabla-adaptable td.celda-accion { justify-content: flex-end; width: 100%; padding-top: 10px; }
  .tabla-adaptable td.celda-accion::before { content: none; }
  .tabla-adaptable .celda-persona { justify-content: flex-end; }
}

/* Utilidades de espaciado: van al final para que ningún componente las anule */
.separado { margin-top: 20px !important; }
.sin-margen { margin: 0 !important; }
.sin-margen-arriba { margin-top: -8px !important; margin-bottom: 14px; }

@media print {
  .banda-demo, .nav-publica, .barra-app, .tabbar, .pie, .acciones, .acciones-columna { display: none !important; }
  body { background: #fff; }
  .panel { box-shadow: none; }
}