/* Maiktrack - Componentes de interfaz. */

/* ------------------------------------------------------------------ */
/* Cabecera                                                            */
/* ------------------------------------------------------------------ */

.cabecera {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--bg-primary);
  border-bottom: 1px solid var(--border);
}

.cabecera__interior {
  max-width: var(--ancho-max);
  margin-inline: auto;
  padding: 0 20px;
  min-height: 68px;
  display: flex;
  align-items: center;
  gap: 16px;
  justify-content: space-between;
}

.marca {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--text-primary);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: -0.02em;
  /* No se encoge; lo demas si, para que nada empuje la cabecera mas alla
     del ancho de la pantalla. */
  flex-shrink: 0;
}
.marca:hover { color: var(--text-primary); }
.marca__icono {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: #fff;
}
.marca__texto span { color: var(--primary); }

/* En escritorio: enlaces a la izquierda, idioma y sesion empujados al
   final. En movil este mismo contenedor pasa a ser el desplegable. */
.cabecera__menu {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 1 1 auto;
  min-width: 0;
}

.navegacion { display: flex; align-items: center; gap: 6px; }

.cabecera__sesion {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.enlace-nav {
  padding: 9px 14px;
  border: none;
  background: none;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--transition), color var(--transition);
}
.enlace-nav:hover,
.enlace-nav[aria-current="page"] { color: var(--primary); background: var(--primary-soft); }

.cabecera__acciones { display: flex; align-items: center; gap: 8px; }

.boton-icono {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--bg-secondary);
  color: var(--text-secondary);
  cursor: pointer;
  transition: var(--transition);
}
.boton-icono:hover { border-color: var(--primary); color: var(--primary); }

.selector-idioma {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-secondary);
  color: var(--text-primary);
  font: inherit;
  font-size: 0.875rem;
  padding: 8px 10px;
  cursor: pointer;
}

/* Menu de navegacion en movil */
.hamburguesa { display: none; }

@media (max-width: 860px) {
  .hamburguesa {
    display: grid;
    place-items: center;
    width: 42px; height: 42px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-secondary);
    color: var(--text-primary);
    cursor: pointer;
    flex-shrink: 0;
  }

  /* En la barra solo quedan marca, tema y hamburguesa: unos 280 px en
     total, asi que entra de sobra en una pantalla de 360. El resto baja
     al desplegable. */
  .cabecera__menu {
    position: fixed;
    inset: 68px 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: 16px 20px 24px;
    background: var(--bg-primary);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
    transform: translateY(-120%);
    /* `visibility` ademas del desplazamiento: con solo translateY el menu
       sale de la vista pero sus botones siguen recibiendo el foco, asi
       que tabulando se acaba en controles invisibles. Se anima igual
       porque visibility acepta transicion por pasos. */
    visibility: hidden;
    transition: transform var(--transition), visibility var(--transition);
    /* Con sesion interna el menu crece; si no cabe, se desplaza dentro
       en lugar de salirse de la pantalla. */
    max-height: calc(100dvh - 68px);
    overflow-y: auto;
  }
  .cabecera__menu[data-abierto="true"] {
    transform: translateY(0);
    visibility: visible;
  }

  .navegacion { flex-direction: column; align-items: stretch; gap: 4px; }
  .enlace-nav { text-align: left; padding: 12px 14px; font-size: 1rem; }

  .cabecera__sesion {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    margin-left: 0;
    padding-top: 12px;
    border-top: 1px solid var(--border);
  }
  /* Los grupos de sesion son .fila (horizontal por defecto): en el
     desplegable se apilan y cada boton ocupa el ancho completo. */
  .cabecera__sesion .fila { flex-direction: column; align-items: stretch; }
  .cabecera__sesion .boton,
  .cabecera__sesion .enlace-nav { width: 100%; text-align: center; }
  .cabecera__sesion .selector-idioma { width: 100%; }
  #nombre-usuario { padding: 4px 2px; }
}

/* ------------------------------------------------------------------ */
/* Botones                                                             */
/* ------------------------------------------------------------------ */

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font: inherit;
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.2;
  cursor: pointer;
  text-decoration: none;
  transition: var(--transition);
  min-height: 44px; /* objetivo tactil comodo */
}

.boton--principal { background: var(--primary); color: #fff; }
.boton--principal:hover:not(:disabled) { background: var(--primary-dark); color: #fff; }

.boton--secundario {
  background: var(--bg-primary);
  color: var(--text-primary);
  border-color: var(--border);
}
.boton--secundario:hover:not(:disabled) { border-color: var(--primary); color: var(--primary); }

.boton--fantasma { background: none; color: var(--text-secondary); }
.boton--fantasma:hover:not(:disabled) { color: var(--primary); background: var(--primary-soft); }

.boton--peligro { background: var(--danger); color: #fff; }

.boton--bloque { width: 100%; }
.boton--pequeno { padding: 8px 14px; font-size: 0.85rem; min-height: 38px; }

.boton:disabled { opacity: 0.55; cursor: not-allowed; }

/* ------------------------------------------------------------------ */
/* Tarjetas                                                            */
/* ------------------------------------------------------------------ */

.tarjeta {
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: var(--shadow);
}

.tarjeta__titulo { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }

.tarjeta-servicio {
  display: grid;
  gap: 12px;
  align-content: start;
  padding: 28px;
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  transition: var(--transition);
}
.tarjeta-servicio:hover { border-color: var(--primary); box-shadow: var(--shadow-lg); }
.tarjeta-servicio__icono {
  width: 52px; height: 52px;
  display: grid; place-items: center;
  border-radius: 14px;
  background: var(--primary-soft);
  color: var(--primary);
}
.tarjeta-servicio ul { display: grid; gap: 8px; padding: 0; margin: 0; list-style: none; }
.tarjeta-servicio li {
  position: relative;
  padding-left: 22px;
  font-size: 0.9rem;
  color: var(--text-secondary);
}
.tarjeta-servicio li::before {
  content: "";
  position: absolute;
  left: 4px; top: 0.6em;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--primary);
}

/* ------------------------------------------------------------------ */
/* Portada                                                             */
/* ------------------------------------------------------------------ */

.portada {
  background: linear-gradient(160deg, var(--secondary), var(--accent));
  color: #fff;
  padding-block: clamp(3rem, 7vw, 5.5rem);
}
.portada h1 { color: #fff; max-width: 18ch; }
.portada p { color: rgba(255, 255, 255, 0.82); max-width: 62ch; margin-top: 14px; }
.portada__acciones { margin-top: 28px; }
.portada .boton--secundario {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.32);
}
.portada .boton--secundario:hover { background: rgba(255, 255, 255, 0.16); color: #fff; }

/* ------------------------------------------------------------------ */
/* Formularios                                                         */
/* ------------------------------------------------------------------ */

.campo { display: grid; gap: 6px; }

.campo > label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-primary);
}

.campo__ayuda { font-size: 0.8125rem; color: var(--text-secondary); }

.campo input[type="text"],
.campo input[type="email"],
.campo input[type="password"],
.campo input[type="tel"],
.campo input[type="number"],
.campo input[type="search"],
.campo select,
.campo textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-primary);
  color: var(--text-primary);
  font: inherit;
  font-size: 1rem; /* evita el zoom automatico en iOS */
  transition: border-color var(--transition), box-shadow var(--transition);
}

.campo textarea { min-height: 110px; resize: vertical; }

/* Campo con boton dentro (contrasena con "ver"). El hueco de la derecha
   se reserva con padding en el input para que el texto largo no pase por
   debajo del boton. */
.campo__conboton { position: relative; display: grid; }
.campo__conboton input { padding-right: 48px; }

.campo__ojo {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 36px; height: 36px;
  border: none;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--text-secondary);
  cursor: pointer;
}
.campo__ojo:hover { color: var(--primary); background: var(--primary-soft); }
.campo__ojo[aria-pressed="true"] { color: var(--primary); }

.campo :is(input, select, textarea):focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft);
  outline: none;
}

.campo :is(input, select, textarea)[aria-invalid="true"] { border-color: var(--danger); }

.campo__error { font-size: 0.8125rem; color: var(--danger); font-weight: 500; }
.campo__error:empty { display: none; }

.casilla {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: start;
  font-size: 0.9rem;
  line-height: 1.5;
  cursor: pointer;
}
.casilla input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--primary); }

.grupo-opciones { display: grid; gap: 10px; }
.opcion-tarjeta {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: start;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: var(--transition);
}
.opcion-tarjeta:hover { border-color: var(--primary); }
.opcion-tarjeta:has(input:checked) {
  border-color: var(--primary);
  background: var(--primary-soft);
}
.opcion-tarjeta input { accent-color: var(--primary); width: 20px; height: 20px; }
.opcion-tarjeta strong { display: block; }

/* ------------------------------------------------------------------ */
/* Avisos                                                              */
/* ------------------------------------------------------------------ */

.aviso {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-secondary);
  font-size: 0.9rem;
}
.aviso--error { border-color: var(--danger); color: var(--danger); background: rgba(198, 40, 40, 0.06); }
.aviso--exito { border-color: var(--success); color: var(--success); background: rgba(14, 159, 85, 0.07); }
.aviso--info { border-color: var(--info); color: var(--info); background: rgba(22, 104, 168, 0.07); }
.aviso--atencion { border-color: var(--warning); color: var(--warning); background: rgba(184, 117, 3, 0.07); }
.aviso:empty { display: none; }

/* ------------------------------------------------------------------ */
/* Etiquetas de estado                                                 */
/* ------------------------------------------------------------------ */

.etiqueta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  border: 1px solid currentColor;
}
.etiqueta--neutro { color: var(--text-secondary); }
.etiqueta--progreso { color: var(--info); }
.etiqueta--exito { color: var(--success); }
.etiqueta--atencion { color: var(--warning); }
.etiqueta--error { color: var(--danger); }

/* ------------------------------------------------------------------ */
/* Cronologias (transporte y aduanas, separadas)                       */
/* ------------------------------------------------------------------ */

.cronologias { display: grid; gap: 24px; }
@media (min-width: 900px) {
  .cronologias--dobles { grid-template-columns: 1fr 1fr; }
}

.cronologia { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }

.cronologia__paso {
  position: relative;
  padding: 0 0 22px 30px;
  border-left: 2px solid var(--border);
}
.cronologia__paso:last-child { border-left-color: transparent; padding-bottom: 0; }

.cronologia__paso::before {
  content: "";
  position: absolute;
  left: -8px; top: 3px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--bg-primary);
  border: 3px solid var(--border);
}
.cronologia__paso--hecho::before { border-color: var(--success); background: var(--success); }
.cronologia__paso--actual::before { border-color: var(--primary); background: var(--primary); }
.cronologia__paso--alerta::before { border-color: var(--danger); background: var(--danger); }

.cronologia__titulo { font-weight: 600; }
.cronologia__fecha { font-size: 0.8125rem; color: var(--text-secondary); }
.cronologia__nota { font-size: 0.875rem; color: var(--text-secondary); }

/* ------------------------------------------------------------------ */
/* Tablas                                                              */
/* ------------------------------------------------------------------ */

.tabla-envoltorio {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-primary);
}

.tabla { width: 100%; border-collapse: collapse; font-size: 0.9rem; min-width: 640px; }
.tabla th, .tabla td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--border); }
.tabla th { font-weight: 600; color: var(--text-secondary); background: var(--bg-secondary); }
.tabla tbody tr:last-child td { border-bottom: none; }

/* En pantallas estrechas la tabla se convierte en fichas apiladas. */
@media (max-width: 700px) {
  .tabla--adaptable { min-width: 0; }
  .tabla--adaptable thead { display: none; }
  .tabla--adaptable tr {
    display: grid;
    gap: 6px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
  }
  .tabla--adaptable td { display: grid; grid-template-columns: 40% 1fr; gap: 10px; border: none; padding: 0; }
  .tabla--adaptable td::before {
    content: attr(data-etiqueta);
    font-weight: 600;
    color: var(--text-secondary);
  }
}

/* ------------------------------------------------------------------ */
/* Dialogos                                                            */
/* ------------------------------------------------------------------ */

.dialogo {
  border: none;
  padding: 0;
  border-radius: var(--radius-lg);
  background: var(--bg-primary);
  color: var(--text-primary);
  width: min(560px, calc(100vw - 32px));
  box-shadow: var(--shadow-lg);
}
.dialogo::backdrop { background: rgba(9, 12, 20, 0.6); }

.dialogo__cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px;
  border-bottom: 1px solid var(--border);
}
.dialogo__cuerpo { padding: 24px; display: grid; gap: 16px; max-height: 70vh; overflow-y: auto; }
.dialogo__pie { padding: 16px 24px; border-top: 1px solid var(--border); }

/* ------------------------------------------------------------------ */
/* Aviso de cookies                                                    */
/* ------------------------------------------------------------------ */

.banda-cookies {
  position: fixed;
  inset: auto 16px 16px 16px;
  z-index: 150;
  display: grid;
  gap: 14px;
  max-width: 640px;
  margin-inline: auto;
  padding: 20px;
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
}
/* Aceptar y rechazar deben tener el mismo peso visual (guia de la AEPD). */
.banda-cookies__acciones { display: flex; gap: 10px; flex-wrap: wrap; }
.banda-cookies__acciones .boton { flex: 1 1 160px; }

/* ------------------------------------------------------------------ */
/* Panel de usuario                                                    */
/* ------------------------------------------------------------------ */

.panel { display: grid; gap: 24px; grid-template-columns: 1fr; }

@media (min-width: 1000px) {
  .panel { grid-template-columns: 240px 1fr; align-items: start; }
}

.panel__menu {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
}
@media (min-width: 1000px) {
  /* El menu lateral no desaparece en pantallas pequenas: se convierte en
     una barra desplazable, que era otro de los fallos de la plantilla. */
  .panel__menu { flex-direction: column; overflow: visible; position: sticky; top: 88px; }
}

.panel__enlace {
  padding: 11px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-primary);
  color: var(--text-secondary);
  font: inherit;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  text-align: left;
}
.panel__enlace[aria-current="true"] {
  border-color: var(--primary);
  background: var(--primary-soft);
  color: var(--primary);
}

.metrica {
  display: grid;
  gap: 4px;
  padding: 20px;
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.metrica__valor { font-size: 1.75rem; font-weight: 700; line-height: 1.1; }
.metrica__etiqueta { font-size: 0.85rem; color: var(--text-secondary); }

/* Tarjeta que se puede pulsar entera (un contenedor del listado). Es un
   <button>, asi que hay que devolverle la tipografia y quitarle el
   aspecto de control del sistema. */
.tarjeta--pulsable {
  font: inherit;
  color: inherit;
  cursor: pointer;
  width: 100%;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.tarjeta--pulsable:hover { border-color: var(--primary); box-shadow: var(--shadow-lg); }
.tarjeta--pulsable:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* ------------------------------------------------------------------ */
/* Conversacion del envio                                              */
/* ------------------------------------------------------------------ */

/* El selector lleva [open] a proposito: un `display` de autor gana al
   `dialog:not([open]) { display: none }` del navegador, y sin acotarlo el
   chat se veria tambien con el dialogo cerrado. */
.dialogo--chat[open] {
  display: grid;
  grid-template-rows: auto 1fr auto;
  width: min(640px, calc(100vw - 32px));
  max-height: min(720px, calc(100dvh - 48px));
}

.chat__hilo {
  display: grid;
  gap: 14px;
  align-content: start;
  padding: 20px 24px;
  overflow-y: auto;
  background: var(--bg-secondary);
  /* Sin altura minima el hilo vacio deja el cuadro de escritura pegado a
     la cabecera y la ventana da un salto al llegar el primer mensaje. */
  min-height: 220px;
}

.chat__mensaje {
  display: grid;
  gap: 2px;
  justify-self: start;
  max-width: min(80%, 460px);
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  border-bottom-left-radius: 4px;
  background: var(--bg-primary);
}

/* Los mensajes propios a la derecha y con el color de marca: es la
   convencion de cualquier chat y se lee de un vistazo quien dijo que. */
.chat__mensaje--propio {
  justify-self: end;
  border-bottom-left-radius: var(--radius);
  border-bottom-right-radius: 4px;
  border-color: var(--primary);
  background: var(--primary-soft);
}

.chat__meta { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.chat__meta strong { font-size: 0.85rem; }

.chat__papel {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--primary);
}

/* pre-wrap conserva los saltos de linea que escribe la gente sin abrir
   la puerta a marcado: el texto entra por textContent. */
.chat__texto { white-space: pre-wrap; overflow-wrap: anywhere; }
.chat__hora { color: var(--text-secondary); }

/* Los avisos automaticos no son de nadie: van centrados y sin burbuja,
   como una anotacion del expediente. */
.chat__anotacion {
  justify-self: center;
  max-width: 90%;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  font-size: 0.85rem;
  text-align: center;
}
.chat__anotacion span { display: block; margin-top: 2px; color: var(--text-light); }

.chat__redaccion {
  display: grid;
  gap: 8px;
  padding: 16px 24px;
  border-top: 1px solid var(--border);
  background: var(--bg-primary);
}
.chat__redaccion textarea {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-primary);
  color: var(--text-primary);
  font: inherit;
  resize: vertical;
}
.chat__redaccion textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft);
}
.chat__acciones { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

/* ------------------------------------------------------------------ */
/* Torre de control                                                    */
/* ------------------------------------------------------------------ */

.corredor { display: grid; grid-template-columns: minmax(120px, 1fr) 2fr auto; gap: 12px; align-items: center; }
.corredor__ruta { font-size: 0.85rem; }
.corredor__cifra { font-size: 0.85rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.corredor__barra, .ocupacion {
  height: 8px;
  border-radius: 999px;
  background: var(--bg-tertiary);
  overflow: hidden;
}
.corredor__relleno, .ocupacion__relleno { height: 100%; background: var(--primary); }
/* Un contenedor por encima de su capacidad no es un detalle estetico:
   hay que verlo desde el listado. */
.ocupacion__relleno--exceso { background: var(--danger); }

@media (max-width: 560px) {
  .corredor { grid-template-columns: 1fr auto; }
  .corredor__barra { grid-column: 1 / -1; }
}

/* El SMS se muestra tal y como saldria, con su tipografia de ancho fijo:
   asi se ve de verdad cuanto ocupa. */
.sms-previa {
  padding: 12px 14px;
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-secondary);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.85rem;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.texto-error { color: var(--danger); }
.texto-atencion { color: var(--warning); }
.texto-exito { color: var(--success); }

/* ------------------------------------------------------------------ */
/* Paginas de texto (legal, ayuda, empresa)                            */
/* ------------------------------------------------------------------ */

/* Ancho de lectura acotado: una linea de texto legal a 1180 px es
   incomoda de seguir. */
.pagina-legal {
  max-width: 780px;
  gap: 20px;
}
.pagina-legal h2 {
  margin-top: 20px;
  font-size: 1.3rem;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.pagina-legal h3 { margin-top: 12px; font-size: 1.05rem; }
.pagina-legal p, .pagina-legal li { line-height: 1.7; }
.pagina-legal ul, .pagina-legal ol { padding-left: 22px; display: grid; gap: 10px; }
.pagina-legal ol { list-style: decimal; }
.pagina-legal ul { list-style: disc; }
.pagina-legal code {
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--bg-tertiary);
  font-size: 0.9em;
}
/* Lo que queda por rellenar se ve de lejos, para que ningun apartado a
   medias se publique por descuido. */
.pagina-legal em { color: var(--warning); font-style: normal; font-weight: 600; }

/* ------------------------------------------------------------------ */
/* Pie                                                                 */
/* ------------------------------------------------------------------ */

.pie {
  background: var(--secondary);
  color: rgba(255, 255, 255, 0.72);
  padding-block: 48px 28px;
  margin-top: 48px;
}
.pie h3 { color: #fff; font-size: 0.95rem; margin-bottom: 14px; }
.pie a { color: rgba(255, 255, 255, 0.72); text-decoration: none; }
.pie a:hover { color: var(--primary-light); }
.pie ul { display: grid; gap: 10px; font-size: 0.9rem; }
.pie__legal {
  margin-top: 36px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 0.85rem;
}

/* ------------------------------------------------------------------ */
/* Estados de carga y notificaciones                                   */
/* ------------------------------------------------------------------ */

.cargando {
  display: inline-block;
  width: 18px; height: 18px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: girar 700ms linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }

/* Debajo de la cabecera, no encima: con top:16px el aviso se montaba sobre
   el menu y tapaba el idioma y los botones de sesion justo al entrar y al
   salir, que es cuando siempre aparece. */
.avisos-flotantes {
  position: fixed;
  inset: calc(var(--altura-cabecera) + 12px) 16px auto auto;
  z-index: 90;
  display: grid;
  gap: 10px;
  width: min(360px, calc(100vw - 32px));
  max-width: calc(100% - 32px);
  pointer-events: none;
}
.aviso-flotante { pointer-events: auto; }
.aviso-flotante {
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-left: 4px solid var(--primary);
  box-shadow: var(--shadow-lg);
  font-size: 0.9rem;
}
.aviso-flotante--error { border-left-color: var(--danger); }
.aviso-flotante--exito { border-left-color: var(--success); }

.vacio {
  display: grid;
  gap: 8px;
  justify-items: center;
  text-align: center;
  padding: 48px 24px;
  color: var(--text-secondary);
}

/* ------------------------------------------------------------------ */
/* Preguntas frecuentes                                                */
/* ------------------------------------------------------------------ */

/* <details> nativo en vez de un acordeon con JavaScript: funciona con el
   teclado, lo anuncian los lectores de pantalla y el buscador del navegador
   (Ctrl+F) encuentra el texto de dentro aunque este plegado. */
.faq { display: grid; gap: 10px; }

.faq details {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-secondary);
}

.faq summary {
  cursor: pointer;
  padding: 14px 44px 14px 16px;
  font-weight: 600;
  position: relative;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }

/* Flecha propia: la del navegador cambia de forma en cada uno. */
.faq summary::after {
  content: "";
  position: absolute;
  right: 18px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--text-secondary);
  border-bottom: 2px solid var(--text-secondary);
  transform: translateY(-70%) rotate(45deg);
  transition: transform 0.15s ease;
}
.faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }

.faq summary:hover { color: var(--primary); }
.faq summary:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: -2px;
  border-radius: var(--radius-sm);
}

.faq details > *:not(summary) { padding: 0 16px; }
.faq details > *:last-child { padding-bottom: 16px; }

/* ------------------------------------------------------------------ */
/* Seguimiento GPS publico                                            */
/* ------------------------------------------------------------------ */

.pagina-gps { min-height: 100vh; background: var(--bg-secondary); }
.gps-cabecera {
  min-height: 72px;
  padding: 14px max(20px, calc((100vw - 1180px) / 2));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: var(--bg-primary);
  border-bottom: 1px solid var(--border);
}
.gps-marca { display: flex; align-items: center; gap: 10px; color: var(--text-primary); font-weight: 800; text-decoration: none; }
.gps-marca__icono {
  display: grid; place-items: center; width: 36px; height: 36px;
  border-radius: 10px; background: var(--primary); color: white;
}
.pagina-gps__contenido { max-width: 900px; }
.gps-indicador { display: inline-flex; align-items: center; gap: 7px; color: var(--success); font-size: .85rem; font-weight: 700; }
.gps-indicador span { width: 9px; height: 9px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 5px color-mix(in srgb, currentColor 15%, transparent); }
.gps-indicador--finalizado { color: var(--text-secondary); }
.gps-mapa { min-height: 430px; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-tertiary); }
.gps-mapa iframe { display: block; width: 100%; height: 430px; border: 0; }
.gps-datos > div { display: grid; gap: 4px; padding: 12px; border-radius: var(--radius-sm); background: var(--bg-secondary); }
.gps-datos span { color: var(--text-secondary); font-size: .75rem; }
@media (max-width: 640px) {
  .pagina-gps__contenido { padding-inline: 12px; }
  .gps-mapa, .gps-mapa iframe { min-height: 55vh; height: 55vh; }
}