/* App de clientes GCLTracs: mismos colores del panel (tema oscuro, naranja de la marca) */
:root {
  --bg: #14161b;
  --card: #20232a;
  --card-2: #262a32;
  --line: rgba(255, 255, 255, 0.08);
  --text: #eceef2;
  --muted: #949cab;
  --orange: #ff5a3c;
  --orange-2: #ff7a45;
  --green: #34d399;
  --yellow: #fbbf24;
  --red: #f87171;
  --grey: #7c8494;
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html,
body {
  margin: 0;
  min-height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

button,
input {
  font: inherit;
}

.etiqueta {
  padding: 0.3rem 0.75rem;
  border: 1px solid rgba(255, 122, 69, 0.4);
  border-radius: 999px;
  background: color-mix(in srgb, var(--orange) 10%, transparent);
  color: var(--orange-2);
  font-size: 0.78rem;
  font-weight: 700;
}

.etiqueta.is-chica {
  padding: 0.15rem 0.5rem;
  font-size: 0.68rem;
}

/* ---------- Entrar ---------- */
.entrar {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 0.6rem;
  min-height: 100vh;
  min-height: 100dvh;
  max-width: 420px;
  margin: 0 auto;
  padding: env(safe-area-inset-top) 16px env(safe-area-inset-bottom);
  text-align: center;
}

.entrar__logo {
  width: 88px;
  height: 88px;
  border-radius: 24px;
  box-shadow: 0 12px 34px color-mix(in srgb, var(--orange) 25%, transparent);
}

.entrar h1 {
  margin: 0.6rem 0 0;
  font-size: 1.9rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.entrar__texto {
  margin: 0 0 0.3rem;
  color: var(--muted);
}

.entrar__form {
  display: grid;
  gap: 0.55rem;
  width: 100%;
  margin-top: 1.2rem;
  text-align: left;
}

.entrar__form label {
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: 600;
}

.entrar__form input {
  width: 100%;
  height: 48px;
  padding: 0 0.9rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--card);
  color: var(--text);
  font-size: 16px;
}

.entrar__form input:focus {
  border-color: rgba(255, 122, 69, 0.6);
  outline: 0;
}

.entrar__form button {
  height: 48px;
  border: 0;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--orange), var(--orange-2));
  color: #fff;
  font-weight: 700;
  cursor: pointer;
}

.entrar__form button:disabled {
  opacity: 0.6;
}

.entrar__error {
  margin: 0;
  color: var(--red);
  font-size: 0.88rem;
}

.estado {
  display: grid;
  gap: 0.5rem;
  width: 100%;
  margin: 1.2rem 0 0;
  padding: 0.9rem;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--card);
  list-style: none;
  text-align: left;
  font-size: 0.85rem;
}

.estado li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.punto {
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--muted);
}

.is-ok .punto { background: var(--green); }
.is-aviso .punto { background: var(--yellow); }
.is-error .punto { background: var(--red); }

/* ---------- Pantalla principal: mapa grande, tarjeta del vehículo, controles y barra de abajo ---------- */
.inicio {
  --nav: calc(128px + env(safe-area-inset-bottom));
  --verde: #22c55e;
  --rojo: #ef4444;
  min-height: 100vh;
  min-height: 100dvh;
  max-width: 520px;
  margin: 0 auto;
  padding-bottom: calc(var(--nav) + 1rem);
}

.icono-btn {
  position: relative;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text);
  cursor: pointer;
}

.icono-btn svg {
  width: 24px;
  height: 24px;
}

.punto-nuevo {
  position: absolute;
  top: 8px;
  right: 9px;
  width: 9px;
  height: 9px;
  border: 2px solid var(--bg);
  border-radius: 50%;
  background: var(--orange);
}

.cabeza {
  position: sticky;
  top: 0;
  z-index: 1050;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: calc(0.4rem + env(safe-area-inset-top)) 10px 0.4rem;
  background: var(--bg);
}

.cabeza__marca {
  margin-left: auto;
  border-radius: 9px;
}

.cabeza__titulo {
  margin-right: auto;
  font-size: 1.1rem;
  font-weight: 800;
}

/* El mapa ocupa el lugar de la foto del carro */
.heroe {
  position: relative;
  height: 320px;
  height: clamp(250px, calc(100dvh - 400px), 600px);
  margin: 0 12px;
  overflow: hidden;
  border-radius: 24px;
  background: #1b1e24;
}

.heroe__mapa {
  position: absolute;
  inset: 0;
}

.heroe__recorrido {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 22px;
  z-index: 700;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0.55rem 0.55rem 0.85rem;
  border-radius: 14px;
  background: rgba(26, 29, 35, 0.94);
  font-size: 0.85rem;
}

.heroe__recorrido span {
  flex: 1;
  min-width: 0;
}

.heroe__recorrido button {
  padding: 0.4rem 0.8rem;
  border: 0;
  border-radius: 10px;
  background: var(--card-2);
  color: var(--text);
  font-weight: 700;
  cursor: pointer;
}

/* Mapa completo */
.inicio.is-mapa-completo .heroe {
  position: fixed;
  inset: 0 0 var(--nav) 0;
  z-index: 1100;
  height: auto;
  margin: 0;
  border-radius: 0;
}

.contenido {
  display: grid;
  gap: 12px;
  padding: 12px 12px 0;
}

.tarjeta {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--card);
}

/* Tarjeta del vehículo: nombre y último dato a la izquierda, estados a la derecha */
.unidad {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.8rem 0.75rem 0.8rem 1rem;
}

/* v58: el ícono a la izquierda, del alto de las tres líneas, y la placa, el punto con la hora y la
   dirección empiezan en el mismo lugar. Mismo alto de tarjeta que antes. */
.unidad__nombre {
  display: grid;
  flex: 1;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: 0.6rem;
  row-gap: 0.15rem;
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.unidad__nombre strong {
  grid-column: 2;
  overflow: hidden;
  font-size: 1.15rem;
  font-weight: 800;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.unidad__nombre span {
  font-size: 0.8rem;
  opacity: 0.85;
}

/* Ícono del vehículo: a la altura de las tres líneas (placa, hora y dirección) */
.unidad__icono {
  display: flex;
  grid-row: 1 / span 3;
  opacity: 1 !important;
}

.unidad__icono:empty {
  display: none;
}

/* Debajo de la placa: punto de en línea y la hora del último dato */
.unidad__dato {
  display: flex;
  grid-column: 2;
  align-items: center;
}

.unidad__dato .punto-linea {
  flex: none;
}

.unidad__nombre .unidad__direccion {
  grid-column: 2;
  overflow: hidden;
  color: var(--muted);
  font-size: 0.9rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.unidad__estados {
  display: flex;
  flex: none;
  gap: 0.35rem;
}

.estado-ico {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 0.2rem;
  width: 58px;
  height: 58px;
  border-radius: 14px;
  background: var(--card-2);
  color: var(--muted);
}

.estado-ico i {
  display: grid;
}

.estado-ico svg {
  width: 24px;
  height: 24px;
}

.estado-ico small {
  font-size: 0.62rem;
  font-weight: 700;
  white-space: nowrap;
}

.estado-ico.is-si {
  background: rgba(34, 197, 94, 0.14);
  color: var(--verde);
}

.estado-ico.is-no {
  background: rgba(239, 68, 68, 0.14);
  color: var(--rojo);
}

.estado-ico.is-dato {
  color: var(--text);
}

.estado-ico.is-dato b {
  font-size: 1.3rem;
  font-weight: 800;
  line-height: 1;
}

/* Fila de controles (comandos): íconos medianos con su nombre debajo */
.controles {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  padding: 0.2rem;
}

.controles button {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 0.25rem;
  min-height: 56px;
  padding: 0.4rem 0.15rem;
  border: 0;
  border-radius: 12px;
  background: none;
  color: var(--text);
  font-size: 0.66rem;
  font-weight: 600;
  cursor: pointer;
}

.controles button svg {
  width: 21px;
  height: 21px;
}

.controles button:active {
  background: rgba(255, 255, 255, 0.07);
}

/* Estado en el botón: alarma activada (candado cerrado, verde), motor bloqueado (rojo) */
.controles button.is-si {
  color: var(--green);
}

.controles button.is-no {
  color: var(--red);
}

/* Bloquear motor: primer toque, esperando el segundo */
.controles button.is-confirmar {
  background: rgba(248, 113, 113, 0.18);
  box-shadow: inset 0 0 0 1px rgba(248, 113, 113, 0.7);
  color: var(--red);
}

/* Comando en camino: late hasta que el GPS lo confirme */
.controles button.is-enviando {
  animation: controlEnviando 1s ease-in-out infinite;
}

@keyframes controlEnviando {
  50% { opacity: 0.45; }
}

@media (prefers-reduced-motion: reduce) {
  .controles button.is-enviando {
    animation: none;
    opacity: 0.6;
  }
}

/* Barra de abajo: 8 secciones en dos filas de 4, íconos grandes */
.barra-abajo {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1150;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 62px;
  height: var(--nav);
  padding: 2px 0 env(safe-area-inset-bottom);
  border-top: 1px solid var(--line);
  background: rgba(20, 22, 27, 0.98);
}

.barra-abajo button {
  position: relative;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 0.3rem;
  min-width: 0;
  border: 0;
  background: none;
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}

.barra-abajo button svg {
  width: 28px;
  height: 28px;
}

.barra-abajo button.is-activo {
  color: var(--orange-2);
}

/* Panel: sube hasta la mitad; arrastrando la barrita va a pantalla completa o se cierra */
.panel {
  --alto: 50dvh;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1240;
  display: flex;
  flex-direction: column;
  max-width: 520px;
  height: var(--alto);
  margin: 0 auto;
  border: 1px solid var(--line);
  border-bottom: 0;
  border-radius: 22px 22px 0 0;
  background: #1a1d23;
  box-shadow: 0 -10px 34px rgba(0, 0, 0, 0.45);
  transition: height 0.22s ease;
  animation: hojaSube 0.18s ease;
}

.panel.is-arrastrando {
  transition: none;
}

.panel.is-completo {
  --alto: calc(100dvh - 54px - env(safe-area-inset-top));
}

.panel__agarre {
  flex: none;
  padding: 8px 12px 0 18px;
  touch-action: none;
  cursor: grab;
}

.panel__barrita {
  display: block;
  width: 44px;
  height: 5px;
  margin: 0 auto 6px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.25);
}

/* v173: título centrado, el vehículo a la izquierda y la ✕ a la derecha, en todas las secciones */
.panel__cabeza {
  display: grid;
  grid-template-columns: minmax(100px, 1fr) minmax(0, auto) minmax(100px, 1fr);
  align-items: center;
  gap: 0.4rem;
}

.panel__cabeza:has(.panel__vehiculo[hidden]) {
  grid-template-columns: minmax(44px, 1fr) minmax(0, auto) minmax(44px, 1fr);
}

.panel__cabeza h2 {
  grid-column: 2;
  grid-row: 1;
  margin: 0;
  overflow-wrap: anywhere;
  font-size: clamp(1.02rem, 4.4vw, 1.3rem);
  font-weight: 800;
  line-height: 1.15;
  text-align: center;
}

.panel__cabeza > .icono-btn {
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
}


/* Vehículo de la sección: ícono + nombre; al tocarlo, la lista para cambiarlo */
.panel__vehiculo {
  display: flex;
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
  max-width: 100%;
  min-height: 38px;
  padding: 0.3rem 0.6rem 0.3rem 0.5rem;
  border: 1px solid rgba(255, 122, 69, 0.55);
  border-radius: 999px;
  background: color-mix(in srgb, var(--orange) 12%, transparent);
  color: var(--text);
  font: inherit;
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
}

.panel__vehiculo svg {
  flex: none;
  width: 20px;
  height: 20px;
}

.panel__vehiculo svg:first-child {
  color: var(--orange-2);
}

.panel__vehiculo svg:last-child {
  width: 16px;
  height: 16px;
  color: var(--muted);
}

/* v173: sin el ícono: así cabe más del nombre junto al título centrado */
.panel__vehiculo > :first-child:not(span) {
  display: none;
}

.panel__vehiculo {
  gap: 0.15rem;
  padding: 0.3rem 0.35rem 0.3rem 0.55rem;
  font-size: 0.8rem;
}

.panel__vehiculo svg:last-child {
  width: 13px;
  height: 13px;
}

.panel__vehiculo span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.panel__vehiculos {
  position: absolute;
  top: 62px;
  left: 12px;
  z-index: 5;
  display: grid;
  gap: 4px;
  width: min(280px, calc(100% - 24px));
  max-height: 60%;
  padding: 6px;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #1b1e24;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.55);
}

.panel__vehiculos button {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 0.7rem;
  border: 0;
  border-radius: 12px;
  background: none;
  color: var(--text);
  font: inherit;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.panel__vehiculos button:hover,
.panel__vehiculos button.is-activo {
  background: color-mix(in srgb, var(--orange) 14%, transparent);
}

.panel__vehiculos svg {
  flex: none;
  width: 22px;
  height: 22px;
  color: var(--orange-2);
}

.panel__vehiculos .punto-linea {
  margin-right: 0.35rem;
}
.panel__cuerpo {
  flex: 1;
  min-height: 0;
  padding: 0.6rem 16px calc(1.2rem + env(safe-area-inset-bottom));
  overflow-y: auto;
  overscroll-behavior: contain;
}

.pagina__texto {
  margin: 0 0 1rem;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.45;
}

/* Punto de en línea (verde) / sin conexión (gris) antes del nombre */
.punto-linea {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 0.45rem;
  border-radius: 50%;
  background: var(--grey);
  vertical-align: 0.12em;
}

.punto-linea.is-si {
  background: var(--verde, #22c55e);
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.2);
}

/* v97: acaba de perder la conexión (2 min; después, gris) */
.punto-linea.is-perdida {
  background: #eab308;
  box-shadow: 0 0 0 3px rgba(234, 179, 8, 0.22);
}

/* Estadísticas */
.resumen {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 0 0 0.9rem;
}

.resumen div {
  padding: 0.75rem 0.5rem;
  text-align: center;
}

.resumen div + div {
  border-left: 1px solid var(--line);
}

.resumen b {
  display: block;
  font-size: 1.25rem;
  font-weight: 800;
}

.resumen small {
  color: var(--muted);
  font-size: 0.72rem;
}

.barras-km {
  display: grid;
  gap: 0.55rem;
}

.barra-km {
  display: grid;
  grid-template-columns: 74px 1fr 64px;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.82rem;
}

.barra-km span:first-child {
  color: var(--muted);
}

.barra-km i {
  display: block;
  height: 10px;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--orange), var(--orange-2));
}

.barra-km b {
  text-align: right;
}


/* ---------- Estadísticas: periodo, resumen y dos gráficos de barras ---------- */
.est-dia {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: -0.3rem 0 0.75rem;
}

.est-dia input {
  flex: 1;
  min-width: 0;
  height: 40px;
  padding: 0 0.75rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card-2);
  color: var(--text);
  font: inherit;
  font-size: 16px;
  color-scheme: dark;
}

.est-dia__flecha {
  flex: none;
  width: 40px;
  height: 40px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card-2);
  color: var(--text);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}

.est-dia__flecha:disabled {
  opacity: 0.35;
  cursor: default;
}

.est-titulo {
  margin: 0 0 0.6rem;
}

.est-titulo::first-letter {
  text-transform: uppercase;
}

.est-resumen {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0 0 0.75rem;
  overflow: hidden;
}

.est-resumen div {
  display: grid;
  gap: 0.15rem;
  padding: 0.7rem 0.8rem;
}

.est-resumen div:nth-child(even) {
  border-left: 1px solid var(--line);
}

.est-resumen div:nth-child(n + 3) {
  border-top: 1px solid var(--line);
}

.est-resumen b {
  font-size: 1.15rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.est-resumen small {
  color: var(--muted);
  font-size: 0.74rem;
}

.est-grafico {
  margin: 0 0 0.75rem;
  padding: 0.8rem 0.85rem 0.6rem;
}

.est-grafico__cabeza {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
}

.est-grafico__cabeza span {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.9rem;
  font-weight: 700;
}

.est-grafico__cabeza i {
  width: 10px;
  height: 10px;
  border-radius: 3px;
}

.est-grafico__cabeza b {
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
}

.est-grafico__dato {
  min-height: 1.2em;
  margin: 0.2rem 0 0.35rem;
  color: var(--muted);
  font-size: 0.78rem;
}

.est-grafico__dato b {
  color: var(--text);
}

.est-svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  touch-action: pan-y;
}

.est-eje {
  stroke: rgba(255, 255, 255, 0.07);
  stroke-width: 1;
}

.est-eje.is-base {
  stroke: rgba(255, 255, 255, 0.22);
}

.est-num {
  fill: var(--muted);
  font-size: 9px;
  font-variant-numeric: tabular-nums;
}

.est-barra {
  transition: opacity 0.12s;
}

.est-barra.is-tenue {
  opacity: 0.35;
}

.est-toque {
  fill: transparent;
  cursor: pointer;
}

.est-nota {
  margin: 0.4rem 0 0;
  color: var(--muted);
  font-size: 0.75rem;
}

/* Pestañas del periodo, como en Forguard: texto y raya debajo de la elegida */
.est-pestanas {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) 48px;
  margin: 0 0 0.85rem;
  border-bottom: 1px solid var(--line);
}

.est-pestanas button {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text);
  font: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
}

.est-pestanas button svg {
  width: 22px;
  height: 22px;
}

.est-pestanas button.is-activo {
  color: var(--orange-2);
}

.est-pestanas button.is-activo::after {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: -1px;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: var(--orange-2);
}

/* Calendario: desde – hasta y "Ver" */
.est-rango {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: end;
  gap: 0.45rem;
  margin: -0.2rem 0 0.75rem;
}

.est-rango label {
  display: grid;
  gap: 0.2rem;
  min-width: 0;
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 600;
}

.est-rango input {
  width: 100%;
  min-width: 0;
  height: 40px;
  padding: 0 0.5rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card-2);
  color: var(--text);
  font: inherit;
  font-size: 16px;
  color-scheme: dark;
}

.est-rango .boton-nueva {
  grid-column: 1 / -1;
  min-height: 40px;
  padding: 0 1rem; /* debajo de las dos fechas */
}

/* Exportar: Imagen (*.png) y Excel (*.xlsx) */
.est-exportar {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.5rem;
  margin: 0 0 1rem;
}

.est-exportar button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 52px;
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--card-2);
  color: var(--text);
  font: inherit;
  cursor: pointer;
}

.est-exportar button.is-principal {
  border-color: transparent;
  background: linear-gradient(135deg, var(--orange), var(--orange-2));
  color: #fff;
}

.est-exportar button:disabled {
  opacity: 0.6;
}

.est-exportar svg {
  flex: none;
  width: 20px;
  height: 20px;
}

.est-exportar span {
  display: grid;
  text-align: left;
  line-height: 1.2;
}

.est-exportar small {
  font-size: 0.7rem;
  opacity: 0.8;
}

.est-pestanas.is-cuatro {
  grid-template-columns: repeat(3, minmax(0, 1fr)) 56px;
}

/* ---------- Informe de eventos ---------- */
.est-informe {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  margin: 0 0 1rem;
  padding: 0.85rem 0.9rem;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.est-informe > svg {
  flex: none;
  width: 26px;
  height: 26px;
  color: var(--orange-2);
}

.est-informe span {
  display: grid;
  gap: 0.15rem;
}

.est-informe small {
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.35;
}

.inf-legend {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.inf-legend .boton-texto {
  margin: 0;
}

.inf-lista {
  margin: 0;
}

/* Vista previa: barra arriba y una hoja blanca como los documentos del panel */
.informe {
  position: fixed;
  inset: 0;
  z-index: 1300;
  display: flex;
  flex-direction: column;
  background: var(--bg);
}

.informe[hidden] { display: none; }

.informe__barra {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: calc(0.6rem + env(safe-area-inset-top)) 0.75rem 0.6rem;
  border-bottom: 1px solid var(--line);
  background: var(--card);
}

.informe__barra strong {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  font-size: 1rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.informe__barra button:not(.icono-btn) {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 38px;
  padding: 0 0.85rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card-2);
  color: var(--text);
  font: inherit;
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
}

.informe__barra button.is-principal {
  border-color: transparent;
  background: linear-gradient(135deg, var(--orange), var(--orange-2));
  color: #fff;
}

.informe__barra button:disabled {
  opacity: 0.5;
}

.informe__barra button svg {
  width: 17px;
  height: 17px;
}

.informe__estado {
  margin: 0;
  padding: 0.5rem 0.9rem;
  background: rgba(251, 191, 36, 0.12);
  color: var(--yellow);
  font-size: 0.8rem;
}

.informe__hoja {
  flex: 1;
  overflow: auto;
  padding: 0.9rem 0.75rem calc(1.5rem + env(safe-area-inset-bottom));
  overscroll-behavior: contain;
}

.informe__doc {
  max-width: 860px;
  margin: 0 auto;
  padding: 1.1rem 1rem 0.9rem;
  border-radius: 10px;
  background: #fff;
  color: #1f2933;
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.4);
}

.informe__cabeza {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0 0 0.75rem;
  border-bottom: 2px solid var(--orange);
}

.informe__cabeza img {
  border-radius: 10px;
}

.informe__cabeza div {
  display: grid;
  flex: 1;
}

.informe__cabeza strong {
  font-size: 1.05rem;
}

.informe__cabeza small,
.informe__cabeza span {
  color: #6b7280;
  font-size: 0.74rem;
}

.informe__cabeza span {
  text-align: right;
}

.informe__vehiculo {
  padding: 0.9rem 0 0.4rem;
}

.informe__vehiculo + .informe__vehiculo {
  border-top: 1px dashed #d1d5db;
}

.informe__vehiculo h3 {
  margin: 0 0 0.55rem;
  font-size: 1rem;
}

.informe__vehiculo h3 small {
  color: #6b7280;
  font-size: 0.78rem;
  font-weight: 600;
}

.informe__subtitulo {
  margin: 0 0 0.35rem;
  color: #1f2937;
  font-size: 0.85rem;
}

.informe__zonas {
  display: grid;
  gap: 0.25rem;
  margin: 0 0 0.75rem;
}

.informe__zonas div {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.15rem 0.6rem;
  padding: 0.4rem 0.55rem;
  border-radius: 8px;
  background: #f3f4f6;
  color: #1f2937;
  font-size: 0.82rem;
}

.informe__zonas span {
  color: #6b7280;
  font-size: 0.76rem;
}

.informe__zonas strong {
  margin-left: auto;
}

.informe__resumen {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 0.35rem;
  margin: 0 0 0.75rem;
}

.informe__resumen div {
  padding: 0.45rem 0.55rem;
  border-radius: 8px;
  background: #f3f4f6;
}

.informe__resumen dt {
  color: #6b7280;
  font-size: 0.68rem;
}

.informe__resumen dd {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.informe__eventos {
  display: grid;
}

.informe__fila {
  --tipo: #6b7280;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.1rem 0.6rem;
  padding: 0.5rem 0.2rem 0.5rem 0.6rem;
  border-left: 3px solid var(--tipo);
  border-bottom: 1px solid #eef0f3;
  font-size: 0.8rem;
}

.informe__fila.is-viaje { --tipo: #ea580c; }
.informe__fila.is-parada { --tipo: #2563eb; }
.informe__fila.is-encendido { --tipo: #16965a; }
.informe__fila.is-apagado { --tipo: #d23232; }
.informe__fila.is-entrada,
.informe__fila.is-salida { --tipo: #7c3aed; }

.informe__hora {
  color: #4b5563;
  font-variant-numeric: tabular-nums;
}

.informe__evento {
  grid-column: 1;
  color: var(--tipo);
}

.informe__evento em {
  color: #374151;
  font-style: normal;
  font-weight: 600;
}

.informe__dur {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  color: #111827;
  font-weight: 700;
  white-space: nowrap;
}

.informe__dir,
.informe__datos {
  grid-column: 1 / -1;
  color: #6b7280;
  font-size: 0.76rem;
  line-height: 1.35;
}

.informe__datos {
  color: #374151;
}

.informe__vacio {
  margin: 0.2rem 0 0.6rem;
  color: #6b7280;
  font-size: 0.85rem;
}

.informe__pie {
  margin-top: 0.8rem;
  padding-top: 0.6rem;
  border-top: 1px solid #e5e7eb;
  color: #9ca3af;
  font-size: 0.7rem;
  text-align: center;
}

html.con-informe,
html.con-informe body {
  overflow: hidden;
}

/* Cronología */
.dias-chips {
  display: flex;
  gap: 0.4rem;
  margin: 0 0 0.9rem;
  overflow-x: auto;
  scrollbar-width: none;
}

.dias-chips button {
  flex: none;
  padding: 0.4rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card-2);
  color: var(--muted);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
}

.dias-chips button.is-activo {
  border-color: transparent;
  background: linear-gradient(135deg, var(--orange), var(--orange-2));
  color: #fff;
}

.cronologia {
  display: grid;
  gap: 0.5rem;
}

/* Cronología: tarjetas como la línea de tiempo de Forguard (punto, hora | tipo, dirección y datos) */
.crono-resumen {
  margin: 0 0 0.15rem;
  color: var(--muted);
  font-size: 0.82rem;
}

.crono-tarjeta {
  display: block;
  width: 100%;
  padding: 0.85rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--card);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.crono-tarjeta.is-activo {
  border-color: rgba(255, 122, 69, 0.6);
}

.crono__letra {
  display: grid;
  place-items: center;
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #2563eb;
  color: #fff;
  font-weight: 800;
}

.crono__letra svg {
  width: 18px;
  height: 18px;
}

.crono__letra.is-viaje {
  background: var(--orange);
}

.crono__letra.is-encendido {
  background: var(--green);
}

.crono__letra.is-apagado {
  background: var(--red);
}

.crono-nodo {
  --punto: #6b7280;
  position: relative;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 0.7rem;
  padding-bottom: 0.95rem;
}

.crono-nodo:last-child {
  padding-bottom: 0;
}

.crono-nodo.is-parada { --punto: #3b82f6; }
.crono-nodo.is-llegada { --punto: #1d4ed8; }
.crono-nodo.is-salida { --punto: #22c55e; }

.crono-nodo__punto {
  margin-top: -1px;
}

/* Figura de cada punto de la línea de tiempo (v66): A / B de un recorrido, P de parada y un ícono para los
   demás eventos. La misma figura sale en Ajustes de visualización, al lado de cada evento. */
.crono-figura {
  --punto: #6b7280;
  display: grid;
  place-items: center;
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--punto);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1;
}

.crono-figura svg {
  width: 13px;
  height: 13px;
  stroke-width: 2.3;
}

.crono-figura.is-salida { --punto: #22c55e; }
.crono-figura.is-llegada { --punto: #1d4ed8; }
.crono-figura.is-parada { --punto: #3b82f6; }
.crono-figura.is-encendido { --punto: #10b981; }
.crono-figura.is-apagado { --punto: #6b7280; }
.crono-figura.is-alarma { --punto: #ef4444; }
.crono-figura.is-geocerca { --punto: #8b5cf6; }
.crono-figura.is-velocidad { --punto: #f97316; }
.crono-figura.is-bateria { --punto: #ca8a04; }
.crono-figura.is-sinmensaje { --punto: #64748b; }

/* La línea que une un punto con el siguiente: verde en los recorridos, gris en las paradas */
.crono-nodo.is-linea-salida::before,
.crono-nodo.is-linea-motor::before {
  content: "";
  position: absolute;
  left: 10px;
  top: 25px;
  bottom: 4px;
  width: 2px;
  border-radius: 2px;
  background: #22c55e;
}

.crono-nodo.is-linea-motor::before {
  background: #596172;
}

.crono-nodo strong {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem;
  font-size: 0.92rem;
}

.crono-nodo strong span {
  flex: 1 1 0; /* un evento largo ("Exceso de velocidad: 92 km/h") parte su texto al lado de la hora */
  min-width: 8ch;
  padding-left: 0.5rem;
  border-left: 1px solid rgba(255, 255, 255, 0.18);
  font-weight: 500;
}

.crono-nodo small,
.crono-nodo em {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.8rem;
  font-style: normal;
  line-height: 1.4;
}

.crono-nodo small {
  color: #c3c8d2;
}

.crono-nodo em {
  color: var(--muted);
}

.crono-nodo em b {
  color: var(--text);
  font-weight: 600;
}

/* Proveedor */
.proveedor {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin: 0 0 0.9rem;
}

.proveedor img {
  border-radius: 16px;
}

.proveedor strong {
  display: block;
  font-size: 1.2rem;
}

.proveedor span {
  color: var(--muted);
  font-size: 0.85rem;
}

.proveedor__acciones {
  margin-top: 0.9rem;
}

.lista-ajustes b {
  text-align: right;
}

.lista-equipos {
  display: grid;
  gap: 0.6rem;
}

.lista-equipos button {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.85rem;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--card);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.lista-equipos button.is-activo {
  border-color: rgba(255, 122, 69, 0.6);
}

.lista-equipos svg {
  flex: none;
  width: 28px;
  height: 28px;
}

.lista-equipos span {
  flex: 1;
  min-width: 0;
}

.lista-equipos strong {
  display: block;
  font-size: 1.05rem;
}

.lista-equipos small {
  color: var(--muted);
}

/* Fila de Mis vehículos: el vehículo y, al lado, el botón para cambiarle el ícono */
.equipo-fila {
  display: flex;
  gap: 0.5rem;
}

.equipo-fila > button[data-equipo] {
  flex: 1;
  min-width: 0;
}

.lista-equipos .equipo-fila__icono {
  flex: none;
  justify-content: center;
  width: 52px;
  padding: 0;
  color: var(--muted);
}

.lista-equipos .equipo-fila__icono svg {
  width: 18px;
  height: 18px;
}

/* Marca, línea y año del vehículo (del registro del panel), debajo del estado */
.lista-equipos .equipo-fila__vehiculo {
  display: block;
  margin-top: 0.15rem;
  color: var(--text);
  font-weight: 600;
  opacity: 0.8;
}

.iconos-vehiculo {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 0 0 0.9rem;
}

.iconos-vehiculo button {
  display: grid;
  place-items: center;
  min-height: 58px;
  padding: 0.6rem 0.2rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--card-2);
  color: var(--text);
  font: inherit;
  cursor: pointer;
}

.iconos-vehiculo button svg {
  width: 32px;
  height: 32px;
}

.iconos-vehiculo button[aria-checked="true"] {
  border-color: var(--orange);
  background: color-mix(in srgb, var(--orange) 16%, transparent);
  color: var(--orange-2);
}

/* ---------- Ícono del vehículo (v56): dibujo a color de lado (64 × 40) o imagen propia ---------- */
.veh {
  display: block;
  flex: none;
  aspect-ratio: 8 / 5;
  object-fit: contain;
}

/* Carrocería: el color que eligió el usuario, con un borde gris que se ve en fondo claro y oscuro
   (para el blanco y el negro) */
.veh__c {
  fill: currentColor;
  stroke: rgba(120, 128, 140, 0.6);
  stroke-width: 0.6;
  stroke-linejoin: round;
}

.veh--foto {
  border-radius: 4px;
}

/* Tamaño en cada lugar (más ancho que alto) */
.unidad__icono .veh { width: 80px; height: 50px; }
.panel__vehiculo .veh:first-child { width: 32px; height: 20px; }
.panel__vehiculos .veh { width: 35px; height: 22px; }
.lista-equipos .veh { width: 45px; height: 28px; }
.aviso__vehiculo .veh,
.alerta__vehiculo .veh { width: 24px; height: 15px; }
.avisos-vehiculos .veh { width: 27px; height: 17px; }
.pin-gcl__icono .veh { width: 40px; height: 25px; }
.iconos-vehiculo .veh { width: 100%; max-width: 64px; height: auto; }

/* Colores para el ícono: una fila de círculos y, al final, «Más colores» (arcoíris; si el color es
   propio, lleva ese color en el centro) */
.colores-vehiculo {
  display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr)); /* los 8 colores y «Más colores» en una fila */
  justify-items: center;
  gap: 6px;
  margin: 0 0 0.9rem;
}

.colores-vehiculo button {
  position: relative;
  width: 100%;
  max-width: 32px;
  aspect-ratio: 1;
  padding: 0;
  border: 2px solid rgba(255, 255, 255, 0.22);
  border-radius: 50%;
  background: var(--muestra);
  cursor: pointer;
}

.colores-vehiculo button[aria-checked="true"],
.colores-vehiculo .colores-vehiculo__mas.is-propio {
  box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--orange-2);
}

.colores-vehiculo .colores-vehiculo__mas {
  border-color: transparent;
  background: conic-gradient(#f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00);
}

.colores-vehiculo__mas.is-propio::after {
  content: '';
  position: absolute;
  inset: 5px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: var(--muestra);
}

/* «Más colores» del ícono: el mismo selector de las geocercas, a todo el ancho de la hoja */
.selector-color.is-ancho {
  max-width: none;
  margin: 0 0 0.9rem;
  padding-bottom: 1rem;
  box-shadow: none;
}

/* Casilla de la imagen propia (primera) y la de subir una (última) */
.iconos-vehiculo .iconos-vehiculo__subir {
  gap: 2px;
  border-style: dashed;
  border-color: rgba(255, 255, 255, 0.22);
  color: var(--muted);
}

.iconos-vehiculo .iconos-vehiculo__subir svg {
  width: 22px;
  height: 22px;
}

.iconos-vehiculo__subir small {
  font-size: 0.68rem;
  font-weight: 600;
  line-height: 1.1;
}

.iconos-vehiculo__foto .veh {
  max-width: 64px;
}


/* ---------- Historial: días en fila, barra del día y viajes ---------- */
.historial-barra {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0 0 0.8rem;
}

.historial-barra .dias-chips {
  flex: 1;
  min-width: 0;
  margin: 0;
  /* v119: 15 días que se deslizan; el borde derecho se desvanece para que se note que hay más */
  user-select: none;
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 22px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 22px), transparent);
  padding-right: 22px;
}

@media (hover: hover) {
  .historial-barra .dias-chips { cursor: grab; }
}

.historial-accion {
  position: relative;
  display: grid;
  flex: none;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--card-2);
  color: var(--text);
  cursor: pointer;
}

.historial-accion svg,
.historial-accion i svg {
  width: 18px;
  height: 18px;
}

.historial-accion i {
  display: grid;
  pointer-events: none;
}

/* La casilla de fecha queda invisible encima del ícono: al tocarla abre el calendario del teléfono */
.historial-fecha input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.linea-dia {
  position: relative;
  height: 12px;
  margin: 0 0 1.4rem;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
}

.linea-dia i {
  position: absolute;
  top: 0;
  bottom: 0;
  border-radius: 3px;
  background: #2563eb;
}

.linea-dia i.is-viaje {
  background: #10b981;
}

.linea-dia span {
  position: absolute;
  top: 15px;
  left: 0;
  color: var(--muted);
  font-size: 0.68rem;
}

.linea-dia span:last-child {
  right: 0;
  left: auto;
}

.historial-resumen {
  margin: 0 0 0.8rem;
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: 600;
}

.historial-resumen:empty {
  display: none;
}

.viajes {
  display: grid;
  gap: 0.6rem;
}

.viaje {
  display: grid;
  gap: 0.6rem;
  width: 100%;
  padding: 0.8rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--card);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.viaje.is-activo {
  border-color: rgba(255, 122, 69, 0.6);
}

.viaje__cabeza {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.viaje__cabeza > span:last-child {
  display: grid;
  min-width: 0;
}

.viaje strong {
  font-size: 0.92rem;
}

.viaje small {
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.4;
}

.viaje__mapa {
  width: 100%;
  height: 150px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
}

.viaje__dir {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* La tarjeta del viaje ya no es un botón: su cabeza y su mapa lo son; a la derecha del mapa, los 4 íconos */
.viaje__cabeza {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.viaje__cuerpo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 40px;
  gap: 0.5rem;
  align-items: stretch;
}

.viaje__ver {
  display: block;
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--muted);
  font: inherit;
  cursor: pointer;
}

.viaje__sin-mapa {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  height: 100%;
  min-height: 60px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  font-size: 0.8rem;
}

.viaje__sin-mapa svg {
  width: 18px;
  height: 18px;
}

.viaje__acciones {
  display: grid;
  align-content: space-between;
  gap: 4px;
}

.viaje__acciones button {
  display: grid;
  place-items: center;
  width: 40px;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--card-2);
  color: var(--text);
  cursor: pointer;
}

.viaje__acciones button svg {
  width: 18px;
  height: 18px;
}

.viaje__acciones button.is-activo {
  border-color: transparent;
  background: linear-gradient(135deg, var(--orange), var(--orange-2));
  color: #fff;
}

/* Marcas A (inicio) y B (final) del viaje en el mapa */
.marca-ab {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 2.5px solid #fff;
  border-radius: 50%;
  color: #fff;
  font-size: 16px;
  font-weight: 800;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4);
}

/* Ajustes de visualización: reproducción y colores por velocidad */
.repro-velocidades {
  margin: 0 0 0.9rem;
}

/* v149: colores por velocidad en una barra con controles para arrastrar */
.vel-colores {
  position: relative;
  display: grid;
  gap: 0.9rem;
  margin: 0 0 1rem;
  padding: 0.95rem 0.9rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--card-2);
}

.vel-colores h3 {
  margin: 0;
  font-size: 1rem;
}

.vel-colores__ayuda {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.7rem 0.75rem;
  border-radius: 12px;
  background: #4f6573;
  color: #fff;
  font-size: 0.84rem;
  line-height: 1.45;
}

.vel-colores__ayuda[hidden] { display: none; }

.vel-colores__ayuda p { flex: 1; margin: 0; }

.vel-colores__ayuda button {
  flex: none;
  width: 28px;
  height: 28px;
  margin: -0.2rem -0.2rem 0 0;
  border: 0;
  background: none;
  cursor: pointer;
  position: relative;
}

.vel-colores__ayuda button::before,
.vel-colores__ayuda button::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 2px;
  border-radius: 1px;
  background: #fff;
  transform: translate(-50%, -50%) rotate(45deg);
}

.vel-colores__ayuda button::after { transform: translate(-50%, -50%) rotate(-45deg); }

.vel-barra {
  position: relative;
  height: 96px;
  margin: 0 14px;
  touch-action: none;
  user-select: none;
}

.vel-barra__pista {
  position: absolute;
  top: 40px;
  right: 0;
  left: 0;
  height: 18px;
  overflow: hidden;
  border-radius: 5px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12);
}

.vel-barra__pista button {
  position: absolute;
  top: 0;
  bottom: 0;
  padding: 0;
  border: 0;
  cursor: pointer;
}

.vel-barra__valor {
  position: absolute;
  top: 0;
  min-width: 34px;
  padding: 0.18rem 0.35rem;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--card);
  font-size: 0.82rem;
  font-weight: 600;
  text-align: center;
  transform: translateX(-50%);
  pointer-events: none;
}

.vel-barra__mango {
  position: absolute;
  top: 33px;
  width: 20px;
  height: 32px;
  border: 1px solid rgba(0, 0, 0, 0.18);
  border-radius: 7px;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
  cursor: grab;
  transform: translateX(-50%);
  touch-action: none;
}

/* Más fácil de agarrar con el dedo */
.vel-barra__mango::before {
  content: "";
  position: absolute;
  inset: -10px -8px;
}

.vel-barra.is-arrastrando .vel-barra__mango { cursor: grabbing; }

.vel-barra__mango:focus-visible { outline: 2px solid var(--orange-2); outline-offset: 2px; }

.vel-barra__marcas {
  position: absolute;
  top: 66px;
  right: 0;
  left: 0;
  height: 10px;
  pointer-events: none;
}

.vel-barra__marcas i {
  position: absolute;
  top: 0;
  width: 1px;
  height: 7px;
  background: var(--muted);
  opacity: 0.6;
}

.vel-barra__marcas i.is-borde {
  width: 2px;
  height: 14px;
  margin-left: -1px;
  opacity: 0.9;
}

.vel-barra__escala {
  position: absolute;
  top: 80px;
  right: -14px;
  left: -6px;
  display: flex;
  justify-content: space-between;
  color: var(--muted);
  font-size: 0.8rem;
  pointer-events: none;
}

/* El selector de color del navegador se abre al tocar un rango (encima de él) */
.vel-barra__color {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -60px 0 0 14px;
  border: 0;
  padding: 0;
  opacity: 0;
  pointer-events: none;
}

.vel-tope {
  display: grid;
  gap: 0.1rem;
  width: min(100%, 200px);
  padding: 0.45rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card);
}

.vel-tope span {
  color: var(--muted);
  font-size: 0.78rem;
}

.vel-tope input {
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text);
  font: inherit;
  font-size: 16px;
  outline: none;
}

.vel-colores__pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.vel-colores__pie .boton-texto { margin: 0; }

.vel-colores__guardar {
  min-width: 130px;
  min-height: 42px;
  padding: 0 1.2rem;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--orange), var(--orange-2));
  color: #fff;
  font: inherit;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  cursor: pointer;
}

.vel-colores__guardar:disabled {
  background: var(--card);
  color: var(--muted);
  cursor: default;
}

.boton-texto {
  margin: 0 0 0.9rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--orange-2);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}

/* Resumen del recorrido (unir el día o elegir fechas), como el Historial de Forguard */
.resumen-recorrido {
  display: grid;
  gap: 0.7rem;
  padding: 0.9rem;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--card);
}

.resumen-recorrido__cabeza {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.resumen-recorrido__cabeza button {
  padding: 0.35rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card-2);
  color: var(--text);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
}

.resumen-recorrido__punto {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.resumen-recorrido__punto > span:last-child {
  display: grid;
  min-width: 0;
}

.resumen-recorrido__punto small {
  color: var(--muted);
  font-size: 0.8rem;
}

.crono__letra.is-a { background: #10b981; }
.crono__letra.is-b { background: #ef4444; }

/* De A a B: los detalles van en medio, sobre la línea que une las dos letras (v65) */
.resumen-recorrido__ruta {
  position: relative;
  display: grid;
  gap: 0.7rem;
}

.resumen-recorrido__ruta::before {
  content: "";
  position: absolute;
  left: 16px;
  top: 38px;
  bottom: 38px;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(#10b981, #ef4444);
  opacity: 0.7;
}

.resumen-recorrido__datos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
}

.resumen-recorrido__ruta .resumen-recorrido__datos {
  margin-left: calc(34px + 0.75rem);
}

.resumen-recorrido__datos div {
  display: grid;
  gap: 0.1rem;
  padding: 0.55rem 0.7rem;
  border-radius: 12px;
  background: var(--card-2);
}

.resumen-recorrido__datos small {
  color: var(--muted);
  font-size: 0.72rem;
}

.resumen-recorrido__datos b {
  font-size: 1rem;
}

/* Íconos del resumen (todo el recorrido): reproducir, velocidad, puntos, A/B, paradas y Excel */
.resumen-recorrido__acciones {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 6px;
}

.resumen-recorrido__acciones button {
  display: grid;
  justify-items: center;
  gap: 0.25rem;
  padding: 0.5rem 0.1rem 0.4rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card-2);
  color: var(--text);
  font: inherit;
  cursor: pointer;
}

.resumen-recorrido__acciones svg {
  width: 20px;
  height: 20px;
}

.resumen-recorrido__acciones small {
  overflow: hidden;
  max-width: 100%;
  color: var(--muted);
  font-size: 0.62rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.resumen-recorrido__acciones button.is-activo {
  border-color: transparent;
  background: linear-gradient(135deg, var(--orange), var(--orange-2));
  color: #fff;
}

.resumen-recorrido__acciones button.is-activo small {
  color: rgba(255, 255, 255, 0.9);
}

/* El de descargar (Excel, KML, GPX o CSV), en verde */
.resumen-recorrido__acciones [data-accion="descargar"] {
  border-color: rgba(29, 111, 66, 0.8);
  background: #1d6f42;
  color: #fff;
}

.resumen-recorrido__acciones [data-accion="descargar"] small {
  color: rgba(255, 255, 255, 0.9);
}

.marca-ab.is-parada {
  width: 28px;
  height: 28px;
  font-size: 13px;
}

.historial-accion:disabled {
  opacity: 0.5;
}
.vacio {
  display: grid;
  justify-items: center;
  gap: 0.5rem;
  padding: 2.5rem 1rem;
  border: 1px dashed var(--line);
  border-radius: 18px;
  color: var(--muted);
  text-align: center;
}

.vacio svg {
  width: 40px;
  height: 40px;
}

.vacio strong {
  color: var(--text);
  font-size: 1.1rem;
}

.vacio p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.45;
}

.lista-ajustes > div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--line);
  font-size: 0.92rem;
}

.lista-ajustes > div:last-child {
  border-bottom: 0;
}

.lista-ajustes span {
  color: var(--muted);
}

/* Avisos recibidos (campana) */
.lista-avisos {
  display: grid;
  gap: 0.5rem;
}

.lista-avisos h3 {
  margin: 0.8rem 0 0.2rem;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.aviso {
  display: flex;
  gap: 0.75rem;
  padding: 0.75rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--card);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.aviso__icono {
  display: grid;
  place-items: center;
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: var(--card-2);
}

.aviso__icono svg {
  width: 22px;
  height: 22px;
}

.aviso.is-alarma .aviso__icono {
  background: rgba(239, 68, 68, 0.15);
  color: var(--rojo);
}

.aviso.is-encendido .aviso__icono {
  background: rgba(34, 197, 94, 0.14);
  color: var(--verde);
}

.aviso div {
  flex: 1;
  min-width: 0;
}

.aviso strong {
  display: block;
  font-size: 0.92rem;
}

.aviso small {
  color: var(--muted);
  font-size: 0.8rem;
}

.aviso.is-geocerca .aviso__icono {
  background: rgba(37, 99, 235, 0.16);
  color: #60a5fa;
}

/* v95: la hora a la derecha (el día va en la fila de arriba) */
.aviso__hora {
  flex: none;
  align-self: flex-start;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
}

/* v95: cuántos avisos tiene cada día */
.dias-chips__n {
  display: inline-grid;
  place-items: center;
  min-width: 1.2rem;
  height: 1.2rem;
  margin-left: 0.35rem;
  padding: 0 0.3rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--orange) 16%, transparent);
  color: var(--orange);
  font-size: 0.7rem;
  font-weight: 800;
}

.dias-chips button.is-activo .dias-chips__n {
  background: rgba(255, 255, 255, 0.25);
  color: #fff;
}

/* v95: dónde pasó un aviso, en el mapa */
.marca-aviso {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 2.5px solid #fff;
  border-radius: 50%;
  background: var(--rojo);
  color: #fff;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4);
}

.marca-aviso svg {
  width: 20px;
  height: 20px;
}

.marca-aviso.is-encendido { background: #16a34a; }
.marca-aviso.is-geocerca { background: #2563eb; }
.marca-aviso.is-personal { background: #ea580c; }

/* De qué vehículo es el aviso: su ícono y su nombre, aparte de lo que pasó */
.aviso__vehiculo,
.alerta__vehiculo {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  max-width: 100%;
  margin: 0 0 0.2rem;
  padding: 0.12rem 0.55rem 0.12rem 0.4rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--orange) 14%, transparent);
  color: var(--orange-2);
  font-size: 0.76rem;
  font-weight: 700;
  white-space: nowrap;
}

.aviso__vehiculo svg,
.alerta__vehiculo svg {
  flex: none;
  width: 15px;
  height: 15px;
  stroke-width: 2;
}

.aviso__vehiculo span,
.alerta__vehiculo span {
  overflow: hidden;
  text-overflow: ellipsis;
}

.alerta__vehiculo {
  margin: 0 0 0.45rem;
  font-size: 0.85rem;
}

.alerta__vehiculo[hidden] { display: none; }

/* Menú ☰ */
.menu-lista {
  display: grid;
  margin: 0 0 0.9rem;
}

.menu-lista a,
.menu-lista button {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.85rem 0.3rem;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: none;
  color: var(--text);
  font: inherit;
  font-weight: 600;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.menu-lista svg {
  flex: none;
  width: 22px;
  height: 22px;
  color: var(--orange-2);
}

/* v120: opciones con una línea de detalle (Historial › Descargar) */
.menu-lista--detalle span { display: grid; gap: 0.1rem; }
.menu-lista--detalle small { color: var(--muted); font-weight: 400; font-size: 0.82rem; }
.menu-lista--detalle button:disabled { opacity: 0.55; }

.opciones-mapa {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  margin: 0 0 0.9rem;
}

.opciones-mapa button {
  min-height: 46px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--card-2);
  color: var(--text);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.opciones-mapa button.is-activo {
  border-color: transparent;
  background: linear-gradient(135deg, var(--orange), var(--orange-2));
  color: #fff;
}

.hoja__icono {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-bottom: 0.6rem;
  border-radius: 16px;
  background: color-mix(in srgb, var(--orange) 14%, transparent);
  color: var(--orange-2);
}

.hoja__icono svg {
  width: 28px;
  height: 28px;
}

/* Letrero corto (Ubicar, comandos, confirmaciones): arriba, justo debajo de la cabeza de GCLTracs (v63) */
.aviso-flotante {
  position: fixed;
  left: 50%;
  top: calc(68px + env(safe-area-inset-top));
  z-index: 1300;
  width: max-content;
  max-width: calc(100% - 32px);
  margin: 0;
  padding: 0.65rem 1rem;
  border-radius: 12px;
  background: #fff;
  color: #14161b;
  font-size: 0.88rem;
  font-weight: 600;
  transform: translateX(-50%);
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.4);
}

/* Marcador del vehículo: en el punto exacto, una flecha que gira hacia donde va (en movimiento) o un
   punto (quieto), del color del estado; encima, una burbuja blanca con el ícono del vehículo (se quita
   con «Solo la flecha» en Ajustes de visualización). Borde blanco para que se vea en calles o satélite. */
.pin-gcl {
  --color: var(--orange);
  position: relative;
  width: 40px;
  height: 40px;
}

.pin-gcl.is-movimiento { --color: #10b981; }
.pin-gcl.is-sinsenal,
.pin-gcl.is-desconectado { --color: var(--grey); }

.pin-gcl__base {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  transform: rotate(var(--rumbo, 0deg));
}

.pin-gcl__flecha {
  display: none;
  width: 34px;
  height: 34px;
  fill: var(--color);
  stroke: #fff;
  stroke-width: 1.8;
  stroke-linejoin: round;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.45));
}

.pin-gcl__punto {
  width: 20px;
  height: 20px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: var(--color);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
}

.pin-gcl.is-movimiento .pin-gcl__flecha { display: block; }
.pin-gcl.is-movimiento .pin-gcl__punto { display: none; }

/* v97: detenido con el motor encendido: flecha amarilla */
.pin-gcl.is-encendido { --color: #eab308; }
.pin-gcl.is-encendido .pin-gcl__flecha { display: block; }
.pin-gcl.is-encendido .pin-gcl__punto { display: none; }

/* v149: más de 5 min parqueado (detenido y apagado): cuadrado en vez del punto redondo */
.pin-gcl.is-parqueado .pin-gcl__punto {
  width: 19px;
  height: 19px;
  border-radius: 4px;
  transform: rotate(calc(-1 * var(--rumbo, 0deg)));
}
.pin-gcl__icono {
  position: absolute;
  left: 50%;
  bottom: calc(100% - 2px);
  display: grid;
  place-items: center;
  width: 46px; /* v58: redonda y con borde delgado */
  height: 46px;
  border: 1.5px solid var(--color);
  border-radius: 50%;
  background: #fff;
  color: #1f2937;
  transform: translateX(-50%);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4);
}

.pin-gcl__icono svg {
  width: 25px;
  height: 25px;
  stroke-width: 1.9;
}

/* ---------- Geocercas ---------- */
.geocercas-barra {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.8rem;
}

.geocercas-barra[hidden] { display: none; }

.boton-nueva {
  display: inline-flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 42px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--orange), var(--orange-2));
  color: #fff;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.boton-nueva svg {
  width: 18px;
  height: 18px;
  stroke-width: 2.4;
}

.geocercas-barra .historial-accion {
  width: 42px;
  height: 42px;
}

.historial-accion.is-activo {
  border-color: transparent;
  background: color-mix(in srgb, var(--orange) 18%, transparent);
  color: var(--orange-2);
}

.lista-geocercas {
  display: grid;
  gap: 0.5rem;
}

.lista-geocercas[hidden] { display: none; }

.geocerca {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  padding: 0.35rem 0.3rem 0.35rem 0.5rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--card-2);
}

.geocerca__ver {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 0.7rem;
  min-width: 0;
  padding: 0.3rem 0;
  border: 0;
  background: none;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.geocerca__forma {
  display: grid;
  flex: none;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 2px solid var(--color);
  border-radius: 12px;
  background: color-mix(in srgb, var(--color) 18%, transparent);
  color: var(--color);
}

.geocerca__forma svg {
  width: 22px;
  height: 22px;
  stroke-width: 2;
}

.geocerca__texto {
  display: grid;
  min-width: 0;
}

.geocerca__texto strong {
  overflow: hidden;
  font-size: 0.95rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.geocerca__texto small {
  color: var(--muted);
  font-size: 0.78rem;
}

.geocerca__texto .geocerca__estado {
  font-weight: 600;
}

.geocerca__texto .geocerca__estado.is-dentro {
  color: var(--green);
}

.geocerca .icono-btn {
  flex: none;
  width: 38px;
  height: 38px;
  color: var(--muted);
}

.geocerca .icono-btn svg {
  width: 20px;
  height: 20px;
}

.geocerca__borrar.is-confirmar {
  width: auto;
  padding: 0 0.7rem;
  border-radius: 999px;
  background: var(--red);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
}

.geocerca__texto .geocerca__avisa {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.geocerca__avisa svg {
  width: 12px;
  height: 12px;
}

.avisos-geocerca {
  grid-template-columns: 1fr 1fr;
  margin: 0;
}

.form-comando label.opcion {
  display: flex;
}

.avisos-geocerca .opcion {
  padding: 0.55rem 0.7rem;
}

/* Nombre del vehículo (hoja del ícono) */
.form-nombre {
  margin: 0 0 1rem;
}

.form-nombre .form-nombre__fila {
  font-size: 1rem;
  font-weight: 400;
  display: flex;
  gap: 0.4rem;
}

.form-nombre__fila input {
  flex: 1;
  min-width: 0;
}

.form-nombre__fila button {
  flex: none;
  padding: 0 1rem;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--orange), var(--orange-2));
  color: #fff;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.form-nombre__fila button:disabled {
  opacity: 0.6;
}

/* Dibujar */
.geocerca-editor {
  display: grid;
  gap: 0.75rem;
}

.geocerca-editor[hidden] { display: none; }

.tipos-geocerca {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.4rem;
}

.tipos-geocerca button {
  display: grid;
  justify-items: center;
  gap: 0.25rem;
  padding: 0.55rem 0.3rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--card-2);
  color: var(--text);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
}

.tipos-geocerca svg {
  width: 24px;
  height: 24px;
}

.tipos-geocerca button.is-activo {
  border-color: transparent;
  background: linear-gradient(135deg, var(--orange), var(--orange-2));
  color: #fff;
}

.geocerca-editor__ayuda {
  margin: 0;
  padding: 0.6rem 0.75rem;
  border-radius: 12px;
  background: color-mix(in srgb, var(--orange) 10%, transparent);
  color: var(--text);
  font-size: 0.86rem;
  line-height: 1.4;
}

.form-comando label[hidden] { display: none; }

/* Color: "Color" con el círculo a la derecha; al tocarlo se abre el selector debajo, dentro del formulario */
.campo-color {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.35rem 0;
}

.campo-color > span {
  font-size: 0.85rem;
  font-weight: 700;
}

.campo-color__muestra {
  flex: none;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 3px solid var(--color, var(--orange));
  border-radius: 50%;
  background: var(--fondo, transparent);
  cursor: pointer;
}

.campo-color__muestra[aria-expanded="true"] {
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.18);
}

/* Dentro del formulario (no flotando): en el celular se puede bajar la pantalla sin que se cierre */
.selector-color {
  display: grid;
  flex-basis: 100%;
  gap: 0.8rem;
  width: 100%;
  max-width: 250px; /* más pequeño, a la derecha debajo del círculo */
  margin-left: auto;
  padding: 0 0 0.8rem;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--card-2);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35);
}

/* Cuadro: de izquierda a derecha más color, de abajo hacia arriba más brillo */
.selector-color__area {
  position: relative;
  height: 140px;
  background: linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, transparent), var(--tono, #f00);
  cursor: crosshair;
  touch-action: none;
}

.selector-color__area span {
  position: absolute;
  width: 20px;
  height: 20px;
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35), 0 1px 4px rgba(0, 0, 0, 0.4);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.selector-color__barra {
  position: relative;
  height: 14px;
  margin: 0 1.4rem;
  border-radius: 999px;
  cursor: pointer;
  touch-action: none;
}

.selector-color__barra.is-tono {
  background: linear-gradient(to right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00);
}

/* Transparencia: cuadritos detrás para que se note */
.selector-color__barra.is-alfa {
  background: repeating-conic-gradient(#c8ccd4 0 25%, #f2f3f5 0 50%) 0 0 / 10px 10px;
}

.selector-color__barra i {
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.selector-color__barra span {
  position: absolute;
  top: 50%;
  width: 24px;
  height: 24px;
  border: 3px solid #fff;
  border-radius: 6px;
  background: transparent;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.55), inset 0 0 0 1px rgba(0, 0, 0, 0.3);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.selector-color__botones {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 0.45rem;
  margin: 0 0.8rem;
}

.selector-color__botones button {
  min-height: 40px;
  padding: 0.4rem 0.5rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}

.selector-color__botones button.is-principal {
  border-color: transparent;
  background: linear-gradient(135deg, var(--orange), var(--orange-2));
  color: #fff;
}

.selector-color__area:focus-visible,
.selector-color__barra:focus-visible {
  outline: 2px solid var(--orange-2);
  outline-offset: 2px;
}

.geocerca-editor__acciones {
  display: grid;
  grid-template-columns: 1fr 1fr 1.2fr;
  gap: 0.4rem;
}

.geocerca-editor__acciones button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  min-height: 46px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--card-2);
  color: var(--text);
  font: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
}

.geocerca-editor__acciones button svg {
  width: 16px;
  height: 16px;
}

.geocerca-editor__acciones button.is-principal {
  border-color: transparent;
  background: linear-gradient(135deg, var(--orange), var(--orange-2));
  color: #fff;
}

.geocerca-editor__acciones button:disabled {
  opacity: 0.5;
}

/* En el mapa: el nombre en el centro, los puntos para arrastrar y la cruz mientras se dibuja */
.leaflet-tooltip.etiqueta-geocerca {
  padding: 2px 7px;
  border: 0;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.92);
  color: #1f2937;
  font-size: 11px;
  font-weight: 700;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

.leaflet-tooltip.etiqueta-geocerca::before { display: none; }

.asa-geocerca {
  display: block;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0 5px, var(--color) 5.5px 9px, rgba(255, 255, 255, 0.95) 9.5px 11px, transparent 11.5px);
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
  cursor: grab;
}

.asa-geocerca.is-centro,
.asa-geocerca.is-primero {
  background: radial-gradient(circle, #fff 0 6px, var(--color) 6.5px 11px, rgba(255, 255, 255, 0.95) 11.5px 13px, transparent 13.5px);
}

#mapa.is-dibujando {
  cursor: crosshair;
}

.leaflet-container {
  font-family: inherit;
}

.leaflet-control-attribution {
  font-size: 9px;
}

/* ---------- Hojas (suben desde abajo) ---------- */
.hoja-fondo {
  position: fixed;
  inset: 0;
  z-index: 1250;
  background: rgba(8, 10, 14, 0.55);
}

.hoja {
  position: fixed;
  left: 0.75rem;
  right: 0.75rem;
  bottom: calc(0.75rem + env(safe-area-inset-bottom));
  z-index: 1251;
  max-width: 560px;
  max-height: calc(100% - 5.5rem - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  margin: 0 auto;
  padding: 1rem;
  overflow-x: hidden; /* en el celular no se debe poder mover hacia los lados */
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--card);
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.5);
  animation: hojaSube 0.18s ease;
}

@keyframes hojaSube {
  from { opacity: 0; transform: translateY(12px); }
}

.hoja h2 {
  margin: 0 0 0.4rem;
  font-size: 1.1rem;
}

/* X para cerrar: queda fija arriba a la derecha aunque se baje dentro de la hoja */
.hoja__x {
  position: sticky;
  top: 0;
  z-index: 2;
  float: right;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  /* v104: sin alto (margen de abajo negativo) para que no angoste lo que va al lado, como el candado */
  margin: -0.35rem -0.35rem calc(0.35rem - 32px) 0.5rem;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--card);
  color: var(--muted);
  cursor: pointer;
}

.hoja > h2 {
  padding-right: 2.2rem;
}

.hoja__x:hover,
.hoja__x:focus-visible {
  color: var(--text);
}

.hoja__x svg {
  width: 18px;
  height: 18px;
}

.hoja__texto {
  margin: 0 0 0.9rem;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.45;
}

.hoja__opciones {
  display: grid;
  gap: 0.5rem;
  margin: 0 0 0.9rem;
}

/* Ajustes de visualización (v66): «Otro color» de la huella es el selector de color del celular, escondido
   detrás del círculo de colores */
.colores-vehiculo label.colores-vehiculo__mas {
  position: relative;
  width: 100%;
  max-width: 32px;
  aspect-ratio: 1;
  border-radius: 50%;
  cursor: pointer;
}

.colores-vehiculo__mas input[type="color"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

/* Eventos de la línea de tiempo: una lista con la figura, el nombre y su interruptor */
.eventos-crono {
  display: grid;
  margin: 0 0 0.6rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--card-2);
}

.eventos-crono label {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.55rem 0.85rem;
  cursor: pointer;
}

.eventos-crono label + label {
  border-top: 1px solid var(--line);
}

.eventos-crono label.is-todos {
  padding-block: 0.7rem;
}

.eventos-crono__nombre {
  flex: 1;
  min-width: 0;
  font-size: 0.9rem;
  font-weight: 600;
}

.hoja__nota {
  margin: 0 0 0.9rem;
  color: var(--muted);
  font-size: 0.78rem;
}

#eventosCronoNota {
  color: var(--orange-2);
  font-weight: 600;
}

.opcion {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.75rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--card-2);
  cursor: pointer;
}

.opcion__texto {
  flex: 1;
  min-width: 0;
}

.opcion__texto strong {
  display: block;
  font-size: 0.92rem;
}

.opcion__texto small {
  color: var(--muted);
  font-size: 0.78rem;
}

/* Notificaciones por vehículo: "Para" Todos / cada vehículo, y los avisos en grupos */
.avisos-para {
  margin: 0 0 0.35rem;
  font-size: 0.82rem;
  font-weight: 700;
}

.avisos-vehiculos {
  margin: 0 0 0.5rem;
}

.avisos-vehiculos button {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.avisos-vehiculos svg {
  width: 17px;
  height: 17px;
}

.avisos-nota {
  margin: 0 0 0.75rem;
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.4;
}

.grupo-avisos {
  display: grid;
  gap: 0.4rem;
}

.grupo-avisos__titulo {
  margin: 0.35rem 0 0;
  font-size: 0.88rem;
  font-weight: 700;
}

.grupo-avisos__titulo small {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 400;
}

.opcion__mixto {
  display: block;
  color: var(--orange-2) !important;
  font-weight: 600;
}

/* Notificaciones personalizadas de un vehículo */
.personalizadas {
  display: grid;
  gap: 0.45rem;
  margin: 0.4rem 0 0.9rem;
}

.personalizadas .avisos-nota {
  margin: 0;
}

#personalOpciones {
  display: grid;
  gap: 0.5rem;
}

#personalOpciones[hidden] { display: none; }

.personal {
  display: grid;
  gap: 0.35rem;
  padding: 0.75rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--card-2);
}

.personal__cabeza {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem;
}

.personal__cabeza strong {
  font-size: 0.92rem;
}

.personal__cabeza span {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
  text-align: right;
}

.personal__cabeza span.is-activo {
  color: var(--orange-2);
}

.personal > small {
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.35;
}

.personal__velocidad {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.personal__velocidad input {
  width: 5.5rem;
  min-width: 0;
  height: 40px;
  padding: 0 0.7rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--card);
  color: var(--text);
  font: inherit;
  font-size: 16px;
}

.personal__velocidad span {
  color: var(--muted);
  font-size: 0.85rem;
}

.personal__velocidad button {
  height: 40px;
  padding: 0 0.85rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--card);
  color: var(--text);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
}

.personal__velocidad button.is-principal {
  margin-left: auto;
  border-color: transparent;
  background: linear-gradient(135deg, var(--orange), var(--orange-2));
  color: #fff;
}

.personal__velocidad button:disabled,
.personal__chips button:disabled {
  opacity: 0.6;
}

/* Alertas por WhatsApp (hoja de notificaciones) */
.wa-avisos {
  display: grid;
  gap: 0.45rem;
  margin: 0.4rem 0 0.9rem;
}

.wa-avisos .hoja__opciones {
  margin: 0;
}

.wa-avisos__numero input {
  flex: 1 1 0;
  width: 0;
  min-width: 0;
}

/* v122: pasos cuando el celular no logra registrarse para las notificaciones (Xiaomi y otros) */
.ayuda-push {
  margin-top: 0.6rem;
  padding: 0.75rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--card-2);
  font-size: 0.85rem;
  line-height: 1.45;
}

.ayuda-push ol {
  margin: 0.4rem 0 0;
  padding-left: 1.2rem;
  display: grid;
  gap: 0.35rem;
  color: var(--muted);
}

.ayuda-push b {
  color: var(--text);
}

/* v122: en celulares angostos la caja del número se salía por la derecha (el campo no se encogía) */
.wa-avisos,
.wa-avisos .personal {
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
}

.wa-avisos small.is-error {
  color: var(--red);
}

.wa-avisos__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.wa-avisos__acciones button {
  flex: 1;
  height: 40px;
  padding: 0 0.85rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--card);
  color: var(--text);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
}

.wa-avisos__acciones button:disabled {
  opacity: 0.6;
}

.personal__chips {
  flex-wrap: wrap;
  margin: 0;
}

.aviso.is-personal .aviso__icono {
  background: color-mix(in srgb, var(--orange) 15%, transparent);
  color: var(--orange-2);
}

.boton-fila {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  margin: 0 0 1rem;
  padding: 0.75rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--card-2);
  color: var(--text);
  font: inherit;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.boton-fila svg {
  width: 20px;
  height: 20px;
  color: var(--orange-2);
}

/* Interruptor tipo celular (checkbox) */
.interruptor {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  flex: none;
  width: 46px;
  height: 28px;
  margin: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  cursor: pointer;
  transition: background 0.15s;
}

.interruptor::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
  transition: transform 0.15s;
}

.interruptor:checked {
  background: linear-gradient(135deg, var(--orange), var(--orange-2));
}

.interruptor:checked::after {
  transform: translateX(18px);
}

.interruptor:disabled {
  opacity: 0.5;
}

.hoja__acciones {
  display: grid;
  gap: 0.5rem;
}

.hoja__acciones button,
.hoja__acciones .boton {
  display: grid;
  place-items: center;
  text-decoration: none;
  min-height: 46px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--card-2);
  color: var(--text);
  font-weight: 600;
  cursor: pointer;
}

.hoja__acciones button.is-principal,
.hoja__acciones .boton.is-principal {
  border-color: transparent;
  background: linear-gradient(135deg, var(--orange), var(--orange-2));
  color: #fff;
}

.hoja__acciones button:disabled {
  opacity: 0.6;
}

.hoja__mensaje {
  margin: 0.8rem 0 0;
  font-size: 0.88rem;
  text-align: center;
}

.hoja__mensaje.is-ok { color: var(--green); }
.hoja__mensaje.is-error { color: var(--red); }

/* ---------- Comandos propios: lista y formulario ---------- */
.lista-comandos {
  display: grid;
  gap: 0.5rem;
  margin: 0 0 0.9rem;
}

.lista-comandos:empty {
  display: none;
}

.comando {
  display: flex;
  gap: 0.5rem;
}

.comando__enviar {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
  min-height: 52px;
  padding: 0.5rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--card-2);
  color: var(--text);
  font: inherit;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.comando__enviar > svg {
  flex: none;
  width: 22px;
  height: 22px;
  color: var(--orange-2);
}

.comando__enviar span {
  min-width: 0;
}

.comando__enviar small {
  display: block;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 500;
}

.comando__enviar.is-confirmar {
  border-color: rgba(255, 122, 69, 0.7);
  background: color-mix(in srgb, var(--orange) 14%, transparent);
}

.comando__editar {
  display: grid;
  flex: none;
  place-items: center;
  width: 52px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--card-2);
  color: var(--muted);
  cursor: pointer;
}

.comando__editar svg {
  width: 18px;
  height: 18px;
}

#btnComandoNuevo {
  display: flex;
  justify-content: center;
  gap: 0.4rem;
  align-items: center;
}

#btnComandoNuevo svg {
  width: 18px;
  height: 18px;
}

/* ---------- v99: Barra de comandos: pestañas y acciones de evento (como en Forguard) ---------- */
.est-pestanas.is-dos {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.acciones-evento {
  display: grid;
  gap: 0.75rem;
  margin: 0 0 0.9rem;
}

.acciones-evento:empty {
  display: none;
}

.accion-tarjeta {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--card-2);
}

.accion-tarjeta h3 {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0;
  padding: 0.75rem 0.9rem;
  font-size: 1rem;
}

.accion-tarjeta h3 svg {
  width: 22px;
  height: 22px;
  color: var(--orange-2);
}

.accion-tarjeta__nota {
  margin: 0;
  padding: 0 0.9rem 0.85rem;
  color: var(--muted);
  font-size: 0.82rem;
}

.accion-geocerca {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0 0.9rem 0.7rem;
  font-size: 0.85rem;
  font-weight: 700;
}

.accion-geocerca select {
  flex: 1;
  min-width: 0;
  height: 40px;
  padding: 0 0.7rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--card);
  color: var(--text);
  font: inherit;
  font-size: 16px;
  font-weight: 500;
}

.accion-fila {
  border-top: 1px solid var(--line);
}

.accion-fila__cabeza {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  min-height: 48px;
  padding: 0 0.4rem 0 0.9rem;
  background: rgba(255, 255, 255, 0.025);
  font-size: 0.92rem;
}

.accion-fila__mas {
  display: grid;
  flex: none;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 12px;
  background: none;
  color: var(--text);
  cursor: pointer;
}

.accion-fila__mas svg {
  width: 20px;
  height: 20px;
}

.accion-fila.is-abierta .accion-fila__mas {
  color: var(--orange-2);
}

.accion-fila__lista {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding: 0.55rem 0.9rem 0.7rem;
}

.accion-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  max-width: 100%;
  min-height: 34px;
  padding: 0 0.15rem 0 0.6rem;
  border: 1px solid rgba(255, 122, 69, 0.45);
  border-radius: 999px;
  background: rgba(255, 122, 69, 0.12);
  font-size: 0.85rem;
  font-weight: 600;
}

.accion-chip > svg {
  flex: none;
  width: 16px;
  height: 16px;
  color: var(--orange-2);
}

.accion-chip > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.accion-chip button {
  display: grid;
  flex: none;
  place-items: center;
  min-width: 30px;
  height: 30px;
  padding: 0 0.3rem;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
}

.accion-chip button svg {
  width: 14px;
  height: 14px;
}

.accion-chip button.is-confirmar {
  padding: 0 0.6rem;
  background: rgba(239, 68, 68, 0.2);
  color: var(--red);
}

.accion-opciones {
  display: grid;
  gap: 0.4rem;
  padding: 0.2rem 0.9rem 0.8rem;
}

.accion-opciones small {
  color: var(--muted);
  font-size: 0.78rem;
}

.accion-opciones button {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 44px;
  padding: 0 0.8rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card);
  color: var(--text);
  font: inherit;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.accion-opciones button svg {
  width: 20px;
  height: 20px;
  color: var(--orange-2);
}

.form-comando {
  display: grid;
  gap: 0.85rem;
}

.form-comando label {
  display: grid;
  grid-template-columns: minmax(0, 1fr); /* la columna no crece con lo que trae adentro (fechas) */
  gap: 0.35rem;
  min-width: 0;
}

.form-comando label > span,
.form-comando legend {
  font-size: 0.85rem;
  font-weight: 700;
}

.form-comando small {
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.4;
}

.form-comando input:not(.interruptor),
.form-comando select {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  height: 46px;
  padding: 0 0.85rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card-2);
  color: var(--text);
  font: inherit;
  font-size: 16px;
}

/* La fecha en Android e iPhone trae un ancho propio: que no pase del de la hoja */
.form-comando input[type="date"] {
  display: block;
  text-align: left;
}

.form-comando input:not(.interruptor):focus,
.form-comando select:focus {
  border-color: rgba(255, 122, 69, 0.6);
  outline: 0;
}

.form-comando .is-codigo {
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
}

.form-comando fieldset {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0; /* un fieldset no se encoge solo: sin esto empuja la hoja hacia los lados */
}

.form-comando legend {
  margin-bottom: 0.35rem;
  padding: 0;
}

.iconos-comando {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 6px;
}

.iconos-comando button {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card-2);
  color: var(--muted);
  cursor: pointer;
}

.iconos-comando button svg {
  width: 20px;
  height: 20px;
}

.iconos-comando button[aria-checked="true"] {
  border-color: var(--orange);
  background: color-mix(in srgb, var(--orange) 16%, transparent);
  color: var(--orange-2);
}

/* ---------- Alarma: letrero en la mitad de la pantalla (celular y computador) ---------- */
.alerta-fondo {
  position: fixed;
  inset: 0;
  z-index: 1400;
  background: rgba(8, 10, 14, 0.6);
}

.alerta {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 1401;
  width: min(380px, calc(100% - 32px));
  padding: 1.4rem 1.2rem 1.1rem;
  border: 1px solid rgba(248, 113, 113, 0.55);
  border-radius: 22px;
  background: var(--card);
  box-shadow: 0 0 0 6px rgba(248, 113, 113, 0.12), 0 20px 50px rgba(0, 0, 0, 0.6);
  text-align: center;
  transform: translate(-50%, -50%);
  animation: alertaEntrar 0.25s ease;
}

.alerta__icono {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin: 0 auto 0.8rem;
  border-radius: 50%;
  background: rgba(248, 113, 113, 0.16);
  color: var(--red);
  animation: alertaLatir 1.2s ease-in-out infinite;
}

.alerta__icono svg {
  width: 32px;
  height: 32px;
}

.alerta h2 {
  margin: 0;
  font-size: 1.2rem;
  line-height: 1.25;
}

.alerta__texto {
  margin: 0.5rem 0 0;
  color: var(--muted);
  font-size: 0.95rem;
}

.alerta__mas {
  margin: 0.5rem 0 0;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--red);
}

.alerta__acciones {
  display: grid;
  gap: 8px;
  margin-top: 1.1rem;
}

.alerta__acciones button {
  min-height: 46px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--card-2);
  color: var(--text);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.alerta__acciones .is-principal {
  border-color: transparent;
  background: #dc2626;
  color: #fff;
}

@keyframes alertaEntrar {
  from { opacity: 0; transform: translate(-50%, -46%) scale(0.96); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

@keyframes alertaLatir {
  0%, 100% { box-shadow: 0 0 0 0 rgba(248, 113, 113, 0.45); }
  50% { box-shadow: 0 0 0 14px rgba(248, 113, 113, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .alerta,
  .alerta__icono {
    animation: none;
  }
}

/* ---------- Celular: mapa en toda la pantalla y, encima, la cabeza, la tarjeta y los comandos un poco
   transparentes (se ve el mapa detrás, desenfocado). La barra de las 8 secciones va opaca. ---------- */
@media (max-width: 899px) {
  .inicio {
    --vidrio: rgba(20, 22, 27, 0.78);
    padding-bottom: 0;
  }

  .heroe,
  .inicio.is-mapa-completo .heroe {
    position: fixed;
    inset: 0 0 var(--nav) 0;
    z-index: 1;
    height: auto;
    margin: 0;
    border-radius: 0;
  }

  .cabeza {
    position: fixed;
    top: calc(8px + env(safe-area-inset-top));
    left: 8px;
    right: 8px;
    z-index: 1160;
    height: 52px;
    padding: 0 6px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--vidrio);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
  }

  .contenido {
    position: fixed;
    left: 8px;
    right: 8px;
    bottom: calc(var(--nav) + 8px);
    z-index: 1100;
    gap: 8px;
    padding: 0;
  }

  .contenido .tarjeta {
    background: var(--vidrio);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
  }

  /* Mapa completo (mientras Ubicar sigue al vehículo): esconde las 8 secciones y baja la tarjeta y los comandos */
  .inicio.is-mapa-completo .heroe {
    inset: 0;
  }

  .inicio.is-mapa-completo .barra-abajo {
    display: none;
  }

  .inicio.is-mapa-completo .contenido {
    bottom: calc(8px + env(safe-area-inset-bottom));
  }

  .heroe__recorrido {
    top: calc(68px + env(safe-area-inset-top));
    bottom: auto;
    left: 8px;
    right: 8px;
  }

  .leaflet-top.leaflet-right {
    top: calc(62px + env(safe-area-inset-top));
  }

  .barra-abajo {
    background: #14161b;
  }

  .panel {
    background: var(--vidrio);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }

  .panel.is-completo {
    --alto: calc(100dvh - 66px - env(safe-area-inset-top));
  }

  .panel .tarjeta,
  .panel .lista-equipos button,
  .panel .crono-tarjeta,
  .panel .aviso,
  .panel .viaje,
  .panel .resumen-recorrido {
    background: rgba(255, 255, 255, 0.05);
  }
}

/* ---------- Versión web (computador): mapa en toda la pantalla y columna flotante a la izquierda ----------
   De abajo hacia arriba: las 8 secciones, la tarjeta del vehículo con los comandos y, al abrir una
   sección, el panel que se despliega hacia arriba. Arriba de todo: marca, campana y menú. */
@media (min-width: 900px) {
  .inicio {
    --columna: 400px;
    --borde: 14px;
    --alto-nav: 136px;
    --alto-tarjeta: 164px;
    /* Fondo de la columna: oscuro y un poco transparente (se ve el mapa detrás, desenfocado) */
    --vidrio: rgba(20, 22, 27, 0.78);
    max-width: none;
    padding: 0;
  }

  .heroe,
  .inicio.is-mapa-completo .heroe {
    position: fixed;
    inset: 0;
    z-index: 1;
    height: auto;
    margin: 0;
    border-radius: 0;
  }

  .heroe__recorrido {
    left: calc(var(--columna) + var(--borde) * 2);
    right: auto;
    bottom: var(--borde);
    max-width: 520px;
  }

  .cabeza,
  .barra-abajo,
  .contenido,
  .panel {
    position: fixed;
    left: var(--borde);
    right: auto;
    width: var(--columna);
  }

  .cabeza {
    top: var(--borde);
    z-index: 1160;
    height: 56px;
    padding: 0 8px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--vidrio);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  }

  /* Las 8 secciones, abajo (opacas; lo demás de la columna es un poco transparente) */
  .barra-abajo {
    top: auto;
    bottom: var(--borde);
    height: var(--alto-nav);
    padding: 4px 0;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #14161b; /* opaca: las 8 secciones no dejan ver el mapa */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  }

  .barra-abajo button:hover {
    color: var(--text);
  }

  /* Tarjeta del vehículo y comandos, encima de las secciones */
  .contenido {
    bottom: calc(var(--borde) + var(--alto-nav) + 8px);
    z-index: 1160;
    padding: 0;
  }

  .contenido .tarjeta {
    background: var(--vidrio);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  }

  /* El panel se despliega hacia arriba desde la tarjeta hasta la cabeza */
  .panel,
  .panel.is-completo {
    --alto: auto;
    top: calc(var(--borde) + 64px);
    bottom: calc(var(--borde) + var(--alto-nav) + 8px + var(--alto-tarjeta) + 8px);
    z-index: 1160;
    height: auto;
    margin: 0;
    border: 1px solid var(--line);
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
    background: var(--vidrio);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transform-origin: bottom center;
    animation: desplegarArriba 0.22s ease;
  }

  /* Con una sección abierta se esconden la tarjeta y los comandos: el panel baja hasta las secciones */
  .inicio.is-panel-abierto .contenido {
    display: none;
  }

  .inicio.is-panel-abierto .panel {
    bottom: calc(var(--borde) + var(--alto-nav) + 8px);
  }

  /* Dentro del panel, las tarjetas también dejan ver un poco */
  .panel .tarjeta,
  .panel .lista-equipos button,
  .panel .crono-tarjeta,
  .panel .aviso,
  .panel .viaje,
  .panel .resumen-recorrido {
    background: rgba(255, 255, 255, 0.05);
  }

  .panel__barrita {
    display: none;
  }

  .panel__agarre {
    padding-top: 10px;
    cursor: default;
  }

  .aviso-flotante {
    left: calc(var(--borde) + var(--columna) / 2);
    top: calc(var(--borde) + 64px);
    max-width: calc(var(--columna) - 16px);
  }

  .hoja {
    left: 50%;
    right: auto;
    bottom: auto;
    top: 50%;
    width: 440px;
    transform: translate(-50%, -50%);
    animation: none;
  }

  .leaflet-bottom.leaflet-right {
    margin-bottom: 8px;
  }
}

@keyframes desplegarArriba {
  from { opacity: 0; transform: translateY(40px) scaleY(0.6); }
}

/* Entrar: ayuda de la contraseña inicial */
.entrar__ayuda {
  margin: 0 0 0.2rem;
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.4;
}

/* Usuario › Cambiar contraseña */
.form-clave {
  display: grid;
  gap: 0.6rem;
  margin-top: 0.8rem;
  padding: 0.9rem 1rem 1rem;
}

.form-clave h3 {
  margin: 0;
  font-size: 0.95rem;
}

.form-clave label {
  display: grid;
  gap: 0.3rem;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 600;
}

.form-clave input {
  width: 100%;
  height: 44px;
  padding: 0 0.8rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.18);
  color: var(--text);
  font-size: 16px;
}

.form-clave input:focus {
  border-color: rgba(255, 122, 69, 0.6);
  outline: 0;
}

.form-clave button {
  height: 44px;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--orange), var(--orange-2));
  color: #fff;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.form-clave button:disabled { opacity: 0.6; }

.form-clave__aviso {
  margin: 0;
  padding: 0.55rem 0.7rem;
  border-radius: 10px;
  background: rgba(251, 191, 36, 0.12);
  color: #fbbf24;
  font-size: 0.82rem;
}

.form-clave__mensaje {
  margin: 0;
  color: var(--muted);
  font-size: 0.85rem;
}

.form-clave__mensaje.is-ok { color: #34d399; }
.form-clave__mensaje.is-error { color: var(--red); }

/* "Entrar como el cliente" desde el panel: letrero que dice de quién es la vista */
.letrero-vista {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 62px);
  left: 50%;
  z-index: 3000;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  max-width: calc(100vw - 24px);
  padding: 0.4rem 0.45rem 0.4rem 0.85rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--orange) 95%, transparent);
  color: #fff;
  font-size: 0.8rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  transform: translateX(-50%);
}

.letrero-vista span {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.letrero-vista button {
  flex: none;
  padding: 0.3rem 0.75rem;
  border: 0;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.25);
  color: #fff;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

/* Parada elegida en Historial / Cronología: la "P" grande y su etiqueta fija (hora y duración) */
.marca-ab.is-parada.is-grande {
  width: 34px;
  height: 34px;
  font-size: 16px;
}

.leaflet-tooltip.etiqueta-parada {
  padding: 0.25rem 0.55rem;
  border: 0;
  border-radius: 8px;
  background: #1e3a8a;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.35);
}

.leaflet-tooltip.etiqueta-parada::before { border-top-color: #1e3a8a; }

/* ---------- Mantenimiento ---------- */
#btnKmVehiculo {
  margin-bottom: 0.5rem;
}

.mant-odometro {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  margin: 0 0 0.75rem;
  padding: 0.8rem 0.9rem;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.mant-odometro > svg {
  flex: none;
  width: 26px;
  height: 26px;
  color: var(--orange-2);
}

.mant-odometro > span {
  display: grid;
  flex: 1;
  gap: 0.1rem;
  min-width: 0;
}

.mant-odometro strong {
  font-size: 1.05rem;
}

.mant-odometro small {
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.35;
}

.mant-odometro em {
  flex: none;
  color: var(--orange-2);
  font-size: 0.85rem;
  font-style: normal;
  font-weight: 700;
}

/* v77: estado del SOAT y la tecnomecánica en su hoja (y v79, de las tarjetas de información), con su color */
.mant-doc {
  color: var(--muted);
}

.mant-doc.is-al_dia { color: var(--green); }
.mant-doc.is-pronto { color: var(--yellow); }
.mant-doc.is-vencido { color: var(--red); }

/* v79 (pedido del usuario): Información en tarjetas de 2 por fila */
#infoCabeza {
  margin-top: 0.15rem;
}

.mant-info {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem;
}

.info-tile {
  --estado: var(--line);
  display: grid;
  align-content: start;
  gap: 0.2rem;
  min-width: 0;
  min-height: 88px;
  padding: 0.65rem 0.7rem;
  border: 1px solid var(--line);
  border-left: 4px solid var(--estado);
  border-radius: 14px;
  background: var(--card-2);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.info-tile.is-al_dia { --estado: var(--green); }
.info-tile.is-pronto { --estado: var(--yellow); }
.info-tile.is-vencido { --estado: var(--red); }

.info-tile__cabeza {
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
  min-width: 0;
}

.info-tile__cabeza svg {
  flex: none;
  width: 17px;
  height: 17px;
  margin-top: 0.05rem;
  color: var(--orange-2);
}

.info-tile__cabeza strong,
.info-tile__dato,
.mant-tile strong {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow-wrap: anywhere;
  hyphens: auto;
}

.info-tile__cabeza strong {
  font-size: 0.9rem;
  line-height: 1.2;
}

.info-tile__dato {
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.3;
}

.info-tile__vence {
  margin-top: 0.1rem;
  font-size: 0.8rem;
  font-weight: 700;
}

.info-tile__cuando {
  color: var(--estado);
  font-size: 0.76rem;
  font-weight: 700;
}

/* SOAT o tecnomecánica sin anotar y "Agregar tarjeta": punteadas */
.info-tile.is-vacia,
.info-tile.is-agregar {
  border: 1px dashed rgba(255, 255, 255, 0.22);
  background: none;
}

.info-tile.is-vacia em {
  color: var(--orange-2);
  font-size: 0.8rem;
  font-style: normal;
  font-weight: 700;
}

.info-tile.is-agregar {
  align-content: center;
  justify-items: center;
  color: var(--orange-2);
  text-align: center;
}

.info-tile.is-agregar svg {
  width: 22px;
  height: 22px;
}

.info-tile.is-agregar strong {
  font-size: 0.88rem;
}

.info-tile.is-agregar small {
  color: var(--muted);
  font-size: 0.74rem;
  line-height: 1.3;
}

/* Sugeridas al agregar una tarjeta (póliza, licencia...) */
.info-sugeridas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.info-sugeridas button {
  padding: 0.42rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card-2);
  color: var(--text);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
}

.info-sugeridas button[aria-pressed="true"] {
  border-color: rgba(255, 122, 69, 0.7);
  background: color-mix(in srgb, var(--orange) 14%, transparent);
}

.odometro-docs {
  display: grid;
  gap: 0.75rem;
}

.odometro-renovar {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  gap: 0.4rem;
  margin-top: -0.35rem;
  padding: 0.45rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: none;
  color: var(--orange-2);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
}

.odometro-renovar svg {
  width: 16px;
  height: 16px;
}

/* v77: varios filtros (o correas) a la vez: una cajita por cada uno con su "cada cuánto" */
.mant-varios {
  display: grid;
  gap: 0.6rem;
}

.mant-vario {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0.4rem 0.6rem;
  padding: 0.65rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: 12px;
}

.mant-vario strong {
  grid-column: 1 / -1;
  font-size: 0.92rem;
}

.mant-vario label span {
  font-size: 0.78rem;
}

#paginaMantenimiento .geocercas-barra {
  margin-bottom: 0.75rem;
}

.mant-calculando {
  margin: 0 0 0.6rem;
  color: var(--yellow);
  font-size: 0.82rem;
}

/* v79 (pedido del usuario): Mantenimientos en tarjetas de 3 por fila; tocar una abre su detalle (hojaMantVer) */
.mant-lista {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
}

/* Lo que no es tarjeta (sin mantenimientos, los atajos, un aviso) va a lo ancho */
.mant-lista > :not(.mant-tile) {
  grid-column: 1 / -1;
}

.mant-tile {
  --estado: var(--green);
  display: grid;
  align-content: start;
  justify-items: center;
  gap: 0.3rem;
  min-width: 0;
  padding: 0.7rem 0.35rem 0.6rem;
  border: 1px solid var(--line);
  border-top: 3px solid var(--estado);
  border-radius: 14px;
  background: var(--card-2);
  color: var(--text);
  font: inherit;
  text-align: center;
  cursor: pointer;
}

.mant-tile.is-pronto { --estado: var(--yellow); }
.mant-tile.is-vencido { --estado: var(--red); }
.mant-tile.is-contador { --estado: var(--orange-2); }

/* Anillo con la vida que le queda (como los puntos de la figura) */
.mant-tile__anillo {
  --vida: 100;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  padding: 3px;
  border-radius: 50%;
  background: conic-gradient(var(--estado) calc(var(--vida) * 1%), rgba(120, 128, 140, 0.35) 0);
}

.mant-tile__anillo i {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: color-mix(in srgb, var(--estado) 16%, var(--card-2));
  color: var(--estado);
}

.mant-tile__anillo svg {
  width: 20px;
  height: 20px;
}

.mant-tile strong {
  font-size: 0.8rem;
  line-height: 1.2;
}

.mant-tile small {
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.25;
}

.mant-tile em {
  padding: 0.08rem 0.45rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--estado) 18%, transparent);
  color: var(--estado);
  font-size: 0.68rem;
  font-style: normal;
  font-weight: 700;
}

/* El detalle (hoja): la tarjeta completa, sin repetir el nombre que ya va de título */
.mant-ver {
  display: grid;
  gap: 0.5rem;
  margin-bottom: 0.9rem;
}

.mant-ver .mant__titulo strong {
  display: none;
}

.mant-ver__titulo {
  margin: 0.5rem 0 0;
  font-size: 0.92rem;
}

.mant {
  --estado: var(--green);
  display: flex;
  gap: 0.7rem;
  padding: 0.75rem 0.6rem 0.6rem 0.75rem;
  border: 1px solid var(--line);
  border-left: 4px solid var(--estado);
  border-radius: 14px;
  background: var(--card-2);
}

.mant.is-pronto { --estado: var(--yellow); }
.mant.is-vencido { --estado: var(--red); }
.mant.is-contador { --estado: var(--orange-2); }

/* Contador (sin meta): lo que lleva, en grande */
.mant__cuenta {
  font-size: 1.45rem;
  font-weight: 800;
  line-height: 1.15;
}

.mant__cuenta small {
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 600;
}

.mant__icono {
  display: grid;
  flex: none;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--estado) 16%, transparent);
  color: var(--estado);
}

.mant__icono svg {
  width: 21px;
  height: 21px;
}

.mant__texto {
  display: grid;
  flex: 1;
  gap: 0.25rem;
  min-width: 0;
}

.mant__titulo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.mant__titulo strong {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mant__estado {
  flex: none;
  padding: 0.12rem 0.5rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--estado) 18%, transparent);
  color: var(--estado);
  font-size: 0.72rem;
  font-weight: 700;
}

.mant__texto small {
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.35;
}

.mant__texto small b {
  color: var(--text);
}

/* Vida que le queda: barra y porcentaje */
.mant__vida {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.mant__vida .mant__barra {
  flex: 1;
}

.mant__vida em {
  flex: none;
  color: var(--estado);
  font-size: 0.74rem;
  font-style: normal;
  font-weight: 700;
}

.mant__barra {
  display: block;
  height: 6px;
  margin: 0.15rem 0 0.1rem;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
}

.mant__barra i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--estado);
}

.mant__acciones {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 0.2rem;
}

.mant__hecho {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 36px;
  padding: 0 0.85rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  color: var(--text);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
}

.mant__hecho svg {
  width: 16px;
  height: 16px;
  color: var(--green);
  stroke-width: 2.4;
}

.mant__acciones .icono-btn {
  width: 36px;
  height: 36px;
  color: var(--muted);
}

.mant__acciones .icono-btn svg {
  width: 18px;
  height: 18px;
}

/* Sin tareas: atajos para agregar las más comunes */
.mant-rapidos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
}

/* El último atajo, si queda solo en su fila, ocupa todo el ancho */
.mant-rapidos button:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

.mant-rapidos button,
.tipos-mant button {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 44px;
  padding: 0 0.7rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card-2);
  color: var(--text);
  font: inherit;
  font-size: 0.86rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.mant-rapidos svg,
.tipos-mant svg {
  flex: none;
  width: 18px;
  height: 18px;
  color: var(--orange-2);
}

.tipos-mant {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.45rem;
}

.tipos-mant button[aria-checked="true"] {
  border-color: rgba(255, 122, 69, 0.7);
  background: color-mix(in srgb, var(--orange) 14%, transparent);
}

/* Qué eje, qué filtro o qué correa: solo texto, centrado */
.partes-mant button {
  justify-content: center;
  min-height: 40px;
  text-align: center;
}

/* "Todas" a lo ancho cuando quedan impares */
.partes-mant button:first-child:nth-last-child(odd) {
  grid-column: 1 / -1;
}

.mant-sugerido {
  padding: 0.55rem 0.7rem;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
  font-size: 0.8rem;
}

/* Bitácora */
.mant-cabeza {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 1.2rem 0 0.4rem;
}

.mant-cabeza h3 {
  margin: 0;
  font-size: 1rem;
}

.mant-cabeza .boton-texto {
  margin: 0;
}

.mant-gasto {
  margin: 0 0 0.5rem;
  color: var(--muted);
  font-size: 0.85rem;
}

.mant-gasto b {
  color: var(--text);
}

.mant-bitacora {
  display: grid;
  gap: 0.45rem;
  padding-bottom: 0.5rem;
}

.bitacora {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--card-2);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.bitacora__fecha {
  display: grid;
  flex: none;
  place-items: center;
  width: 46px;
  padding: 0.3rem 0;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.15;
  text-transform: uppercase;
}

.bitacora__fecha b {
  color: var(--text);
  font-size: 1.1rem;
}

.bitacora__fecha small {
  font-size: 0.65rem;
}

.bitacora__texto {
  display: grid;
  flex: 1;
  gap: 0.15rem;
  min-width: 0;
}

.bitacora__texto small {
  color: var(--muted);
  font-size: 0.8rem;
}

.bitacora__texto .bitacora__nota {
  font-style: italic;
}

/* Figura del vehículo: un punto de color por parte (verde al día, amarillo pronto, rojo vencido) */
.mant-figura {
  --estado: var(--green);
  margin: 0 0 0.75rem;
  padding: 0.85rem 0.9rem 0.75rem;
  background: radial-gradient(120% 80% at 50% 100%, color-mix(in srgb, var(--estado) 12%, transparent), transparent 70%), var(--card);
}

.mant-figura.is-pronto,
.mant-pin.is-pronto,
.mant-figura__leyenda .is-pronto { --estado: var(--yellow); }

.mant-figura.is-vencido,
.mant-pin.is-vencido,
.mant-figura__leyenda .is-vencido { --estado: var(--red); }

/* v149: sin nada anotado (el dibujo sale igual) */
.mant-figura.is-vacia { --estado: var(--muted); }
.mant-figura.is-vacia .mant-figura__resumen strong { color: var(--text); }
.mant-figura__resumen {
  display: grid;
  gap: 0.1rem;
}

.mant-figura__resumen strong {
  color: var(--estado);
  font-size: 1.05rem;
}

.mant-figura__resumen small {
  overflow: hidden;
  color: var(--muted);
  font-size: 0.8rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mant-figura__dibujo {
  position: relative;
  aspect-ratio: 320 / 130;
  margin: 0.5rem 0 0.4rem;
}

.mant-figura__dibujo svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.fig-sombra { fill: color-mix(in srgb, var(--estado) 22%, transparent); }
.fig-cuerpo { fill: #3a404c; stroke: rgba(255, 255, 255, 0.2); stroke-width: 1.5; }
.fig-cuerpo.is-claro { fill: #565f6e; }
.fig-brillo { fill: none; stroke: rgba(255, 255, 255, 0.35); stroke-width: 2.5; stroke-linecap: round; }
.fig-vidrio { fill: #1a2230; stroke: rgba(255, 255, 255, 0.12); }
.fig-linea { fill: none; stroke: rgba(255, 255, 255, 0.16); stroke-width: 1.5; }
rect.fig-linea { fill: rgba(255, 255, 255, 0.2); stroke: none; }
.fig-luz { fill: #fde68a; opacity: 0.85; }
.fig-stop { fill: #ef4444; opacity: 0.85; }
.fig-placa { fill: #e5e7eb; opacity: 0.75; }
.fig-sillin { fill: #1a1d23; stroke: rgba(255, 255, 255, 0.12); }
.fig-llanta { fill: #0e1014; stroke: #4b5260; stroke-width: 4; }
.fig-rin { fill: none; stroke: #6b7280; stroke-width: 2.5; }
.fig-tubo { fill: none; stroke: #7c8494; stroke-width: 6; stroke-linecap: round; }
.fig-tubo.is-delgado { stroke-width: 4; }
.fig-linea.is-gruesa { stroke-width: 3; stroke-linecap: round; }
.fig-manija { fill: rgba(255, 255, 255, 0.22); }
.fig-defensa { fill: #1a1d23; }
.fig-motor { fill: #272b33; stroke: rgba(255, 255, 255, 0.14); stroke-width: 1.5; }
.fig-acento { fill: var(--orange); opacity: 0.85; }
.fig-acento-linea { fill: none; stroke: var(--orange-2); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.fig-acento-linea.is-gruesa { stroke-width: 5; }
.fig-tubo.is-gris { stroke: #5b6370; }
.fig-horquilla { fill: none; stroke: #d4a52a; stroke-width: 6; stroke-linecap: round; }
.fig-luz-linea { fill: none; stroke: #fde68a; stroke-width: 3; stroke-linecap: round; }
.fig-luz-ambar { fill: #fbbf24; opacity: 0.7; }
.fig-disco { fill: none; stroke: #9ca3af; stroke-width: 2.5; stroke-dasharray: 3 2; }
.fig-rayo { stroke: #7c8494; stroke-width: 3; stroke-linecap: round; }
.fig-cubo { fill: #9ca3af; }
.fig-llanta.is-delgada { fill: none; stroke-width: 3.5; }
.fig-llanta.is-labrada { stroke-width: 6; stroke-dasharray: 4 3; }
.fig-radio { stroke: #4b5260; stroke-width: 1; }
.fig-oruga { fill: #1a1d23; stroke: #4b5260; stroke-width: 3; stroke-dasharray: 6 3; }
.fig-amarillo { fill: #e0a020; stroke: rgba(0, 0, 0, 0.25); stroke-width: 1.5; }
.fig-cuerpo.is-verde { fill: #3d7a4f; }

/* Desgaste: labrado de la llanta (se borra con el uso) y anillos de la vida que le queda */
.fig-labrado { fill: none; stroke: #9aa2b0; stroke-width: 2.6; stroke-dasharray: 2.2 2.4; }
.fig-vida-fondo { fill: none; stroke: rgba(255, 255, 255, 0.13); }
/* Ya se cumplió: el anillo vacío se ve rojo y parpadea (si no, parecería una rueda sin anotar) */
.fig-vida-fondo.is-vencido { stroke: var(--red); animation: fig-alerta 1.2s ease-in-out infinite alternate; }

@keyframes fig-alerta {
  from { stroke-opacity: 0.9; }
  to { stroke-opacity: 0.25; }
}

/*
| v61: el dibujo como silueta, igual a las imágenes de referencia del usuario, sobre el color de la app
| (sin lámina; v60 fue la prueba con la pickup): el vehículo de un solo color claro y las ventanas, luces,
| rayas y el aro de las ruedas como "huecos" del color de la tarjeta, como lo blanco de las imágenes
| (sin rayos ni manijas). Los anillos de desgaste quedan encima, en el aro.
*/
.mant-figura__dibujo {
  --fig: #dfe2e7;
  --fig-fondo: var(--card);
}

.mant-figura__dibujo :is(.fig-cuerpo, .fig-motor, .fig-sillin, .fig-defensa, .fig-amarillo, .fig-oruga, .fig-placa, .fig-acento, .fig-cubo) { fill: var(--fig); stroke: none; }
.mant-figura__dibujo .fig-vidrio { fill: var(--fig-fondo); stroke: none; }
.mant-figura__dibujo .fig-linea { stroke: var(--fig-fondo); stroke-width: 1.4; }
.mant-figura__dibujo rect.fig-linea { fill: var(--fig-fondo); }
.mant-figura__dibujo :is(.fig-tubo, .fig-horquilla, .fig-acento-linea) { stroke: var(--fig); }
.mant-figura__dibujo .fig-tanque { fill: var(--fig); stroke: var(--fig-fondo); stroke-width: 1.8; }
.mant-figura__dibujo .fig-llanta { fill: var(--fig); stroke: none; }
.mant-figura__dibujo .fig-llanta.is-delgada { fill: none; stroke: var(--fig); stroke-width: 3.5; }
.mant-figura__dibujo .fig-rin { stroke: var(--fig-fondo); stroke-width: 2.4; }
.mant-figura__dibujo .fig-radio { stroke: var(--fig); }
.mant-figura__dibujo .fig-disco { stroke: var(--fig-fondo); }
.mant-figura__dibujo :is(.fig-rayo, .fig-manija, .fig-brillo, .fig-luz, .fig-stop, .fig-luz-linea, .fig-luz-ambar) { display: none; }
.mant-figura__dibujo .fig-labrado { stroke: #7c8494; stroke-width: 2.2; }
/* v77: las líneas de los dibujos de Adobe (la bicicleta es de trazos) */
.mant-figura__dibujo .fig-linea-cuerpo { fill: none; stroke: var(--fig); stroke-linecap: round; }
.fig-vida { fill: none; stroke: var(--green); stroke-linecap: butt; }
.fig-vida.is-pronto { stroke: var(--yellow); }
.fig-vida.is-vencido { stroke: var(--red); }

/* Zona que se toca de cada rueda (llantas) y de su centro (frenos) */
.mant-rueda {
  position: absolute;
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  transform: translate(-50%, -50%);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.mant-rueda.is-freno {
  z-index: 1;
}

.mant-rueda:focus-visible {
  outline: 2px solid var(--orange-2);
}

/* Punto de una pieza: el anillo de afuera es la vida que le queda (se vacía en el sentido del reloj) */
.mant-pin {
  --estado: var(--green);
  --vida: 100;
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 3px;
  border: 0;
  border-radius: 50%;
  background: conic-gradient(var(--estado) calc(var(--vida) * 1%), rgba(120, 128, 140, 0.4) 0);
  color: #14161b;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
  transform: translate(-50%, -50%);
  cursor: pointer;
}

.mant-pin > i {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  border: 2px solid var(--card);
  border-radius: 50%;
  background: var(--estado);
}

.mant-pin svg {
  width: 17px;
  height: 17px;
  stroke-width: 2.2;
}

.mant-pin b {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--text);
  color: #14161b;
  font-size: 0.68rem;
  line-height: 17px;
}

/* Lo vencido late para que se note */
.mant-pin.is-vencido::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  border: 2px solid var(--estado);
  animation: mant-latido 1.6s ease-out infinite;
}

@keyframes mant-latido {
  from { opacity: 0.9; transform: scale(1); }
  to { opacity: 0; transform: scale(1.9); }
}

.mant-figura__leyenda {
  display: flex;
  justify-content: center;
  gap: 1rem;
  color: var(--muted);
  font-size: 0.78rem;
}

.mant-figura__leyenda span {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  --estado: var(--green);
}

.mant-figura__leyenda i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--estado);
}

.mant-figura__nota {
  margin: 0.35rem 0 0;
  color: var(--muted);
  font-size: 0.74rem;
  text-align: center;
}

/* Al tocar un punto se baja a su tarjeta y se ilumina un momento */
.mant-tile.is-resaltada,
.info-tile.is-resaltada {
  animation: mant-resaltar 1.6s ease-out;
}

@keyframes mant-resaltar {
  0%, 40% { box-shadow: 0 0 0 3px var(--estado); }
  100% { box-shadow: 0 0 0 3px transparent; }
}

@media (prefers-reduced-motion: reduce) {
  .mant-pin.is-vencido::before,
  .fig-vida-fondo.is-vencido,
  .mant-tile.is-resaltada,
  .info-tile.is-resaltada { animation: none; }
}

/* ---------- Vehículos o Control de personal (v69) ---------- */
/* Lo de un solo modo (data-solo en index.html); sin modo puesto, como vehículos */
body[data-modo="personal"] [data-solo="vehiculo"],
body:not([data-modo="personal"]) [data-solo="personal"] {
  display: none !important;
}

/* Pantalla de inicio: dos tarjetas grandes */
.modos {
  display: grid;
  gap: 0.75rem;
  width: 100%;
  margin-top: 1rem;
}

.modo {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  align-items: center;
  gap: 0.9rem;
  width: 100%;
  padding: 0.9rem 1rem;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--card);
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.modo:hover,
.modo:focus-visible {
  border-color: rgba(255, 122, 69, 0.6);
  outline: 0;
}

.modo:active {
  background: var(--card-2);
}

.modo__dibujo {
  display: grid;
  place-items: center;
  height: 76px;
  border-radius: 14px;
  background: var(--card-2);
}

.modo__dibujo .veh-grupo {
  width: 116px;
  height: 65px;
}

.modo__texto {
  display: grid;
  gap: 0.25rem;
}

.modo__texto strong {
  font-size: 1.05rem;
  font-weight: 800;
}

.modo__texto small {
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.35;
}

/* "Vehículos · cambiar" en Entrar */
.entrar__modo {
  padding: 0.35rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  color: var(--text);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
}

/* Control de personal: 3 controles (Ubicar, Solicitar ubicación y Compartir) */
body[data-modo="personal"] .controles {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Jornada */
.jor-titulo {
  margin: 1rem 0 0.5rem;
  font-size: 0.95rem;
  font-weight: 800;
}

.jor-titulo small {
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 600;
}

.jor-extremos {
  display: grid;
  margin: 0 0 0.25rem;
  padding: 0.2rem 0.9rem;
}

.jor-extremos > div {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--line);
}

.jor-extremos > div:last-child {
  border-bottom: 0;
}

.jor-extremos span {
  color: var(--muted);
  font-size: 0.8rem;
}

.jor-punto {
  padding: 0;
  border: 0;
  background: none;
  color: var(--text);
  font-size: 0.85rem;
  text-align: left;
  cursor: pointer;
}

.jor-punto span {
  color: inherit;
  font-size: inherit;
}

.jor-lista {
  display: grid;
  gap: 0.5rem;
}

.jor-zona,
.jor-parada {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--card);
  color: var(--text);
  text-align: left;
}

.jor-zona__color {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--zona);
}

.jor-zona div {
  display: grid;
  gap: 0.15rem;
}

.jor-zona small {
  color: var(--muted);
  font-size: 0.78rem;
}

.jor-zona > b,
.jor-parada em {
  font-size: 0.85rem;
  font-style: normal;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.jor-parada {
  cursor: pointer;
}

.jor-parada__hora {
  font-size: 0.8rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.jor-parada__lugar {
  overflow: hidden;
  color: var(--muted);
  font-size: 0.8rem;
  text-overflow: ellipsis;
}

.jor-parada__lugar b {
  color: var(--text);
}

@media (max-width: 380px) {
  .jor-parada {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .jor-parada__lugar {
    grid-column: 1 / -1;
    grid-row: 2;
  }
}

/* Control de personal (v69): nombre debajo de cada ícono de persona */
.iconos-vehiculo__nombre {
  margin-top: 0.3rem;
  max-width: 100%;
  overflow-wrap: anywhere;
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 600;
  line-height: 1.1;
  text-align: center;
}

.iconos-vehiculo button[aria-checked="true"] .iconos-vehiculo__nombre {
  color: inherit;
}

/* v74: los 20 tipos de vehículo en 5 columnas × 4 filas, un poco más pequeños */
.iconos-vehiculo--5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
}

.iconos-vehiculo--5 button {
  min-height: 50px;
  padding: 0.4rem 0.1rem;
  border-radius: 12px;
}

.iconos-vehiculo--5 .veh {
  max-width: 52px;
}

.iconos-vehiculo--5 .iconos-vehiculo__nombre {
  margin-top: 0.2rem;
  font-size: 0.58rem;
}

/* Hoja de la unidad (v70): el ícono de ahora (o su imagen, con el tipo debajo) y al frente "Subir imagen" */
.icono-actual {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 10px;
  margin: 0.9rem 0 0.4rem;
}

.icono-actual__vista {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 0.3rem;
  padding: 0.6rem 0.4rem;
  border: 1px solid var(--orange);
  border-radius: 14px;
  background: color-mix(in srgb, var(--orange) 12%, transparent);
}

.icono-actual__dibujo {
  display: grid;
  place-items: center;
  height: 55px;
}

.icono-actual__dibujo .veh {
  width: 88px;
  height: 55px;
}

.icono-actual__dibujo > svg:not(.veh) {
  width: 28px;
  height: 28px;
  color: var(--muted);
}

.icono-actual__vista small {
  color: var(--orange-2);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
}

.icono-actual__subir {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 0.8rem;
  border: 1px dashed rgba(255, 255, 255, 0.22);
  border-radius: 14px;
  background: var(--card-2);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.icono-actual__subir:active {
  background: var(--card);
}

.icono-actual__subir > svg {
  width: 26px;
  height: 26px;
  color: var(--orange-2);
}

.icono-actual__subir span {
  display: grid;
  gap: 0.15rem;
}

.icono-actual__subir b {
  font-size: 0.9rem;
}

.icono-actual__subir small {
  color: var(--muted);
  font-size: 0.74rem;
  line-height: 1.3;
}

/* ---------- v89: planes por módulos (candado) ---------- */
/* Botones de lo que el plan del vehículo no trae: un poco apagados y con una estrella (al tocarlos sale el candado).
   v107 (pedido del usuario): estrella dorada en vez del candadito 🔒 y menos apagados, para que den ganas de usarlos */
.barra-abajo button.is-bloqueado,
.controles button.is-bloqueado {
  position: relative;
  opacity: 0.8;
}

.barra-abajo button.is-bloqueado::after,
.controles button.is-bloqueado::after,
#btnEnlaceNuevo.is-bloqueado::after {
  content: "";
  position: absolute;
  top: 3px;
  right: calc(50% - 24px);
  width: 15px;
  height: 15px;
  /* v179 (pedido del usuario): solo el borde naranja, transparente por dentro */
  background: var(--orange-2, #ff7a45);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M12 3.2l2.6 5.5 6 .8-4.4 4.2 1.1 6L12 16.9l-5.3 2.8 1.1-6-4.4-4.2 6-.8z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M12 3.2l2.6 5.5 6 .8-4.4 4.2 1.1 6L12 16.9l-5.3 2.8 1.1-6-4.4-4.2 6-.8z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.controles button.is-bloqueado::after {
  top: 3px;
  right: 4px;
}

/* v102: también en el Menú (Barra de comandos) y en Crear enlace para compartir (Premium) */
#btnEnlaceNuevo.is-bloqueado::after {
  position: static;
  flex: none;
  margin-left: auto;
}

/* ---------- v102: Compartir y enlaces en tiempo real ---------- */
.compartir-subtitulo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.2rem 0 0.5rem;
  font-size: 0.85rem;
  font-weight: 700;
}

#listaEnlaces:not(:empty) {
  margin-top: -0.2rem;
}

#btnEnlaceNuevo {
  display: flex;
  justify-content: center;
  gap: 0.4rem;
  align-items: center;
}

#btnEnlaceNuevo svg {
  width: 18px;
  height: 18px;
}

.comando__editar.is-confirmar {
  width: auto;
  padding: 0 0.6rem;
  border-color: rgba(239, 68, 68, 0.5);
  color: var(--red);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 700;
}

.est-pestanas.is-tres {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: 0.6rem;
}

.enlace-vence {
  display: block;
  margin-top: 0.5rem;
  color: var(--muted);
  font-size: 0.8rem;
}

#formEnlace .hoja__opciones {
  margin: 0;
}

/* Nombre del plan con su color (Mis vehículos, candado, Notificaciones avanzadas) */
.plan-chip {
  display: inline-block;
  padding: 0.08rem 0.5rem;
  border: 1px solid color-mix(in srgb, var(--plan, var(--orange-2)) 45%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--plan, var(--orange-2)) 16%, transparent);
  color: var(--plan, var(--orange-2));
  font-size: 0.72rem;
  font-weight: 700;
  vertical-align: 1px;
}

.equipo-fila__plan {
  display: block;
  margin-top: 0.15rem;
  color: var(--muted);
  font-size: 0.74rem;
}

/* Candado: en una sección (en vez de su contenido), en la hoja y, corto, en las notificaciones avanzadas */
.panel__pagina.is-bloqueada > :not(.candado) {
  display: none !important;
}

.panel__pagina:not(.is-bloqueada) > .candado {
  display: none;
}

.candado {
  display: grid;
  justify-items: center;
  gap: 0.55rem;
  padding: 1.4rem 1rem 1.2rem;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--card);
  text-align: center;
}

.panel__pagina > .candado {
  margin: 0.4rem 0 1rem;
}

.candado__icono {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  /* v107: estrella (función Premium) en vez del candado. v179: transparente, con el borde naranja */
  background: color-mix(in srgb, var(--orange-2, #ff7a45) 10%, transparent);
  border: 1.5px solid color-mix(in srgb, var(--orange-2, #ff7a45) 55%, transparent);
  color: var(--orange-2, #ff7a45);
}

.candado__icono svg {
  width: 26px;
  height: 26px;
}

/* v179: la estrella sin relleno, solo el contorno */
.candado__icono svg path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linejoin: round;
}

.candado__titulo {
  font-size: 1.02rem;
}

.candado__texto,
.candado__actual {
  max-width: 34ch;
  margin: 0;
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.45;
}

.candado__texto b {
  color: var(--text);
}

.candado__pedir {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  margin-top: 0.3rem;
  padding: 0 1.1rem;
  border-radius: 12px;
  background: var(--orange);
  color: #fff;
  font-size: 0.88rem;
  font-weight: 700;
  text-decoration: none;
}

.candado.is-corto {
  grid-template-columns: auto 1fr;
  justify-items: start;
  align-items: center;
  gap: 0.35rem 0.75rem;
  padding: 0.85rem;
  text-align: left;
}

.candado.is-corto .candado__icono {
  grid-row: span 3;
  width: 40px;
  height: 40px;
}

.candado.is-corto .candado__icono svg {
  width: 20px;
  height: 20px;
}

.candado.is-corto .candado__titulo {
  font-size: 0.9rem;
}

.candado.is-corto .candado__texto,
.candado.is-corto .candado__actual {
  font-size: 0.8rem;
}

.candado.is-corto .candado__pedir {
  grid-column: 2;
  min-height: 36px;
  margin-top: 0.15rem;
  font-size: 0.8rem;
}

#hojaCandado .candado {
  border: 0;
  background: none;
  padding-top: 0.6rem;
}

/* v104: ejemplo de la función debajo del candado, borroso y apagado (datos inventados; no se puede tocar) */
.candado__muestra {
  justify-self: stretch;
  display: grid;
  gap: 0.45rem;
  margin-top: 0.7rem;
  padding: 0.75rem;
  border-radius: 14px;
  background: var(--card-2);
  text-align: left;
  /* v107 (pedido del usuario): se ve un poco más, para que den ganas; los datos son inventados igual */
  opacity: 0.7;
  filter: blur(1.8px);
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-mask-image: linear-gradient(#000 70%, transparent);
  mask-image: linear-gradient(#000 70%, transparent);
}

.candado.is-corto .candado__muestra {
  grid-column: 1 / -1;
  margin-top: 0.3rem;
  padding: 0.55rem;
}

.mu-fila {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 40px;
  padding: 0 0.7rem;
  border-radius: 10px;
  background: var(--card);
  font-size: 0.85rem;
}

.mu-fila span {
  flex: 1;
  font-weight: 600;
}

.mu-fila em {
  color: var(--orange-2);
  font-style: normal;
  font-weight: 700;
}

.mu-punto {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.mu-switch {
  position: relative;
  width: 34px;
  height: 20px;
  border-radius: 10px;
  background: var(--grey);
}

.mu-switch::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
}

.mu-switch.is-on {
  background: var(--orange);
}

.mu-switch.is-on::after {
  left: 17px;
}

.mu-cajas {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 0.45rem;
}

.mu-cajas div {
  display: grid;
  gap: 0.1rem;
  padding: 0.55rem;
  border-radius: 10px;
  background: var(--card);
}

.mu-cajas b {
  font-size: 0.95rem;
}

.mu-cajas small {
  color: var(--muted);
  font-size: 0.72rem;
}

.mu-pestanas {
  display: flex;
  gap: 0.4rem;
}

.mu-pestanas span {
  flex: 1;
  padding: 0.35rem 0;
  border-bottom: 2px solid var(--line);
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 700;
  text-align: center;
}

.mu-pestanas .is-activa {
  border-color: var(--orange-2);
  color: var(--orange-2);
}

.mu-grafico {
  width: 100%;
  height: 110px;
}

.mu-barra {
  display: grid;
  grid-template-columns: 5.5rem 1fr;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.82rem;
  font-weight: 600;
}

.mu-barra i {
  height: 8px;
  border-radius: 4px;
  background: var(--card);
  overflow: hidden;
}

.mu-barra b {
  display: block;
  height: 100%;
  border-radius: 4px;
}

/* Notificaciones avanzadas: personalizadas + WhatsApp, con su cabeza (una sola vez: si las opciones de
   este celular están visibles, la de WhatsApp se esconde). v133 (pedido del usuario): la cabeza es un botón
   que despliega (empieza comprimida), con estrella, resumen, el letrero del plan (con candado si no lo tiene) y
   una flecha; así se ve que son aparte de las normales */
.avanzadas__cabeza {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  width: 100%;
  margin: 1.1rem 0 0.2rem;
  padding: 0.75rem 0.8rem;
  border: 1px solid color-mix(in srgb, var(--orange-2) 35%, var(--line));
  border-radius: 14px;
  background: color-mix(in srgb, var(--orange-2) 8%, transparent);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.avanzadas__cabeza[aria-expanded="true"] {
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
}

.avanzadas__icono {
  display: grid;
  flex: none;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--orange-2) 18%, transparent);
  color: var(--orange-2);
}

.avanzadas__icono svg {
  width: 17px;
  height: 17px;
}

.avanzadas__textos {
  flex: 1;
  min-width: 0;
}

.avanzadas__titulo {
  display: block;
  margin: 0;
  color: var(--orange-2);
  font-size: 0.95rem;
  font-weight: 800;
}

.avanzadas__resumen {
  display: block;
  margin-top: 0.1rem;
  color: var(--muted);
  font-size: 0.74rem;
  line-height: 1.3;
}

.avanzadas__cabeza .plan-chip svg {
  width: 11px;
  height: 11px;
  margin-right: 0.2rem;
  vertical-align: -1px;
}

.avanzadas__flecha {
  display: grid;
  flex: none;
  place-items: center;
  color: var(--muted);
  transition: transform 0.2s;
}

.avanzadas__flecha svg {
  width: 18px;
  height: 18px;
}

.avanzadas__cabeza[aria-expanded="true"] .avanzadas__flecha {
  transform: rotate(180deg);
}

.avanzadas__cuerpo {
  padding: 0 0.15rem;
}

#avisosOpciones:not([hidden]) ~ #waAvisos #waAvanzadas,
#avisosOpciones:not([hidden]) ~ #waAvisos #waCandado {
  display: none;
}

#waAvanzadas {
  margin-top: 0.4rem;
}

/* v90: "+ WhatsApp" en los avisos (push) que también llegan por WhatsApp, y qué llega por cada lado */
.wa-chip {
  display: table;
  margin-top: 0.25rem;
  padding: 0.05rem 0.45rem;
  border: 1px solid color-mix(in srgb, var(--verde) 45%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--verde) 14%, transparent);
  color: var(--verde);
  font-size: 0.7rem;
  font-weight: 700;
}

.wa-chip[hidden] {
  display: none;
}

.wa-avisos__canales {
  margin: 0;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.4;
}

/* v90: "Notificarme" de las tarjetas de Información (SOAT, tecnomecánica y las del cliente) */
.mant-aviso {
  display: grid;
  gap: 0.5rem;
  margin: 0.2rem 0 0.6rem;
}

.mant-aviso[hidden],
.mant-aviso [hidden] {
  display: none;
}

.mant-aviso .dias-chips {
  flex-wrap: wrap;
  margin: 0;
}

.mant-aviso__fecha {
  display: grid;
  gap: 0.3rem;
  margin-top: 0.5rem;
}

/* v98: recuadro del vehículo al tocarlo en el mapa (placa, marca y modelo, último mensaje) */
/* Un poco transparente, como la tarjeta y los comandos en el celular (se ve el mapa detrás, desenfocado) */
.ficha-popup .leaflet-popup-content-wrapper {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--vidrio, rgba(20, 22, 27, 0.78));
  color: var(--text);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.ficha-popup .leaflet-popup-tip {
  background: var(--vidrio, rgba(20, 22, 27, 0.78));
}

.ficha-popup .leaflet-popup-content {
  margin: 0.7rem 0.85rem;
  font: inherit;
}

.ficha-popup a.leaflet-popup-close-button {
  color: var(--muted);
}

.ficha-vehiculo strong {
  display: block;
  padding-right: 1rem;
  font-size: 0.98rem;
}

.ficha-vehiculo span {
  display: block;
  color: var(--muted);
  font-size: 0.8rem;
}

.ficha-vehiculo dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.2rem 0.6rem;
  margin: 0.5rem 0 0;
  font-size: 0.8rem;
}

.ficha-vehiculo dt {
  color: var(--muted);
}

.ficha-vehiculo dd {
  margin: 0;
  font-weight: 600;
}

/* ---------- v105: modo seguridad Normal o Pro (Premium) ---------- */
.comando__enviar[data-seguridad-modo="normal"] > svg {
  color: var(--green);
}

.comando__enviar.is-bloqueado {
  opacity: 0.6;
}

.seguridad-pregunta {
  margin: 0 0 0.6rem;
  font-size: 1rem;
  font-weight: 700;
}

.seguridad-lista {
  display: grid;
  gap: 0.45rem;
  margin: 0 0 0.8rem;
  padding-left: 1.2rem;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.4;
}

.seguridad-lista b {
  color: var(--text);
}

.seguridad-cuidado {
  margin: 0 0 0.9rem;
  padding: 0.7rem 0.8rem;
  border: 1px solid rgba(248, 113, 113, 0.35);
  border-radius: 12px;
  background: rgba(248, 113, 113, 0.1);
  color: var(--text);
  font-size: 0.84rem;
  line-height: 1.45;
}

/* ---------- v108: Estadísticas por secciones que se despliegan (pedido del usuario, como Forguard) ---------- */
.est-secciones {
  display: grid;
  gap: 0.75rem;
  margin: 0.2rem 0 0.75rem;
}

.est-seccion {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--card);
}

.est-seccion__cabeza {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  width: 100%;
  min-height: 72px; /* las cuatro del mismo tamaño */
  padding: 0.75rem 0.9rem;
  border: 0;
  background: none;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.est-seccion__icono {
  display: grid;
  flex: none;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: rgba(255, 122, 69, 0.12);
  color: var(--orange-2);
}

.est-seccion__icono svg {
  width: 22px;
  height: 22px;
}

.est-seccion__texto {
  display: grid;
  flex: 1;
  gap: 0.15rem;
  min-width: 0;
}

.est-seccion__texto b {
  font-size: 0.98rem;
}

.est-seccion__texto small {
  color: var(--muted);
  font-size: 0.78rem;
}

.est-seccion__flecha {
  display: grid;
  flex: none;
  color: var(--muted);
  transition: transform 0.2s ease;
}

.est-seccion__flecha svg {
  width: 18px;
  height: 18px;
}

.est-seccion__cabeza[aria-expanded="true"] .est-seccion__flecha {
  transform: rotate(180deg);
}

.est-seccion__cuerpo {
  padding: 0 0.9rem 0.9rem;
  border-top: 1px solid var(--line);
}

.est-seccion__cuerpo .est-grafico {
  margin: 0;
  padding: 0.75rem 0 0;
}

.est-seccion__nota {
  margin: 0.75rem 0;
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1.45;
}

.est-seccion__boton {
  width: 100%;
}

/* Sin el módulo: al abrirla sale la estrella con el ejemplo borroso en vez del contenido */
.est-seccion.is-bloqueada .est-seccion__cuerpo > :not(.candado) {
  display: none !important;
}

.est-seccion__cuerpo > .candado {
  margin-top: 0.75rem;
}

/* v108: sin horas de motor el resumen queda con 3 cuadritos: el último ocupa todo el ancho */
.est-resumen div:last-child:nth-child(3) {
  grid-column: 1 / -1;
}

/* v109 (pedido del usuario): el letrero "Premium" (como el del modo Pro) va al final dentro de la tarjeta;
   la app lo esconde si el plan ya lo trae (pintarChipsPremium). En el Menú reemplaza a la estrella */
.chip-premium {
  flex: none;
  margin-left: auto;
  font-size: 0.72rem;
  font-weight: 700;
}

.est-seccion__cabeza .chip-premium {
  margin-left: 0;
}

/* v114: un acceso adicional (p. ej. una empresa) no ve lo que no tiene permitido: app.js pone en body[data-sin]
   los permisos que le faltan y aquí se esconden los botones marcados con data-permiso */
body[data-sin~="historial"] [data-permiso~="historial"],
body[data-sin~="comandos"] [data-permiso~="comandos"],
body[data-sin~="seguridad"] [data-permiso~="seguridad"],
body[data-sin~="notificaciones"] [data-permiso~="notificaciones"],
body[data-sin~="geocercas"] [data-permiso~="geocercas"],
body[data-sin~="estadisticas"] [data-permiso~="estadisticas"],
body[data-sin~="mantenimiento"] [data-permiso~="mantenimiento"],
body[data-sin~="compartir"] [data-permiso~="compartir"],
body[data-sin~="jornada"] [data-permiso~="jornada"],
body[data-sin~="editar"] [data-permiso~="editar"],
body[data-sin~="camara"] [data-permiso~="camara"] {
  display: none !important;
}

/* Con botones escondidos, los que quedan en los controles se reparten el ancho */
body[data-sin]:not([data-sin=""]) .controles {
  grid-template-columns: none;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
}

/* v115: "Entrar como administrador" (soporte desde el panel): botón «Errores» del letrero y su lista */
.letrero-vista .letrero-vista__errores b {
  margin-left: 0.3rem;
  padding: 0 0.4rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.25);
}

.errores-soporte {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 108px);
  left: 12px;
  right: 12px;
  z-index: 3000;
  max-width: 560px;
  max-height: 60vh;
  margin: 0 auto;
  padding: 0.8rem 1rem 1rem;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--card);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
  color: var(--text);
  font-size: 0.82rem;
}

.errores-soporte__cabeza {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.errores-soporte__cabeza button {
  width: 32px;
  height: 32px;
  padding: 6px;
  border: 0;
  border-radius: 50%;
  background: var(--card-2);
  color: var(--text);
  cursor: pointer;
}

.errores-soporte h3 {
  margin: 0.8rem 0 0.35rem;
  color: var(--muted);
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.errores-soporte p { margin: 0; color: var(--muted); }
.errores-soporte ul { display: grid; gap: 0.45rem; margin: 0; padding: 0; list-style: none; }
.errores-soporte li { padding: 0.5rem 0.6rem; border-radius: 10px; background: var(--card-2); word-break: break-word; }
.errores-soporte li small { display: block; margin-bottom: 0.15rem; color: var(--muted); }
/* Paquete Finanzas: "Tu pago está pendiente" debajo del nombre, en la tarjeta del vehículo (amarillo; vencido en rojo) */
.unidad:has(.aviso-pago:not([hidden])) {
  flex-wrap: wrap;
}

.aviso-pago {
  display: flex;
  flex: 1 0 100%;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.7rem;
  border: 1px solid rgba(251, 191, 36, 0.35);
  border-radius: 12px;
  background: rgba(251, 191, 36, 0.12);
  color: var(--text);
  text-decoration: none;
}

.aviso-pago[hidden] {
  display: none;
}

.aviso-pago__icono {
  flex: none;
  font-size: 1.15rem;
}

.aviso-pago b {
  display: block;
  color: var(--yellow);
  font-size: 0.9rem;
}

.aviso-pago small {
  display: block;
  color: var(--muted);
  font-size: 0.8rem;
}

.aviso-pago.is-vencido {
  border-color: rgba(248, 113, 113, 0.4);
  background: rgba(248, 113, 113, 0.12);
}

.aviso-pago.is-vencido b {
  color: var(--red);
}

/* ---------- v134: Cámara del vehículo (paginaCamara) ---------- */
.cam-pestanas {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* El video: 16:9, negro, con el letrero encima mientras no hay imagen */
.cam-video {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  background: #000;
}

.cam-video video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}

.cam-estado {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 0.35rem;
  padding: 1rem;
  background: radial-gradient(circle at 50% 40%, #262a32, #111317);
  text-align: center;
}

.cam-estado__icono {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.07);
  color: var(--orange-2);
}

.cam-estado__icono svg {
  width: 26px;
  height: 26px;
}

.cam-estado b {
  font-size: 1rem;
}

.cam-estado small {
  max-width: 30ch;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.4;
}

.cam-estado.is-error .cam-estado__icono {
  color: var(--red);
}

.cam-estado.is-pausa .cam-estado__icono {
  color: var(--yellow);
}

/* Conectando: el ícono late */
.cam-estado.is-cargando .cam-estado__icono {
  animation: camLatido 1.2s ease-in-out infinite;
}

@keyframes camLatido {
  50% { transform: scale(0.88); opacity: 0.55; }
}

@media (prefers-reduced-motion: reduce) {
  .cam-estado.is-cargando .cam-estado__icono {
    animation: none;
  }
}

.cam-envivo {
  padding: 0.2rem 0.5rem;
  border-radius: 6px;
  background: var(--rojo);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}

/* v151: cada ventana tiene su video; la pequeña solo sale ampliada y con 2 o más cámaras */
.cam-ventana {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #000;
}

.cam-ventana.is-peque {
  display: none;
}

.cam-marcas {
  position: absolute;
  top: 0.6rem;
  left: 0.6rem;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  pointer-events: none;
}

.cam-numero {
  padding: 0.2rem 0.5rem;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.62);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
}

.cam-tiempo {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  z-index: 2;
  padding: 0.2rem 0.5rem;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.62);
  color: #fff;
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
}

/* Cambiar de cámara encima del video: con 2, un botón; con más, los números */
.cam-cambiar,
.cam-canales button,
.cam-poder {
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.62);
  color: #fff;
  cursor: pointer;
}

.cam-cambiar {
  position: absolute;
  right: 0.6rem;
  bottom: 0.6rem;
  z-index: 2;
  width: 42px;
  height: 42px;
  padding: 0;
}

.cam-cambiar svg,
.cam-poder svg {
  width: 20px;
  height: 20px;
}

.cam-canales {
  position: absolute;
  right: 0.6rem;
  bottom: 0.6rem;
  z-index: 2;
  display: flex;
  gap: 0.35rem;
}

.cam-canales button {
  width: 38px;
  height: 38px;
  padding: 0;
  font: inherit;
  font-size: 0.88rem;
  font-weight: 800;
}

.cam-canales button.is-activo {
  border-color: transparent;
  background: var(--orange);
  color: #fff;
}

.cam-poder {
  position: absolute;
  top: 2.6rem;
  left: 0.6rem;
  z-index: 2;
  display: none;
  width: 38px;
  height: 38px;
  padding: 0;
}

.cam-poder.is-prendida {
  border-color: transparent;
  background: var(--orange);
}

.cam-aviso {
  position: absolute;
  left: 50%;
  bottom: 0.7rem;
  z-index: 5;
  width: max-content;
  max-width: calc(100% - 6.5rem);
  margin: 0;
  padding: 0.45rem 0.7rem;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.82);
  color: #fff;
  font-size: 0.78rem;
  line-height: 1.3;
  text-align: center;
  transform: translateX(-50%);
}

.cam-barra {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0.75rem 0 0.5rem;
}

.cam-barra .boton-nueva {
  flex: 1 1 0;
  min-width: 0;
  padding: 0 0.5rem;
  font-size: 0.82rem;
  white-space: nowrap;
}

.cam-barra button:disabled {
  opacity: 0.5;
  cursor: default;
}

.cam-barra .historial-accion {
  flex: none;
  width: 40px;
  height: 40px;
}

.cam-barra .historial-accion.is-activo {
  border-color: transparent;
  background: var(--orange);
  color: #fff;
}

#btnCamMicrofono {
  opacity: 0.55;
}

/* Celulares muy angostos: en Ver en vivo queda solo el ícono */
@media (max-width: 359px) {
  .cam-barra .boton-nueva span {
    display: none;
  }
}

.cam-mapa {
  overflow: hidden;
  height: clamp(190px, 34dvh, 420px);
  margin: 0.25rem 0 0.6rem;
  border: 1px solid var(--line);
  border-radius: 14px;
}

.cam-mapa > div {
  width: 100%;
  height: 100%;
}

.cam-nota {
  font-size: 0.8rem;
}

/* Pantalla completa: la caja del video cubre todo. El panel no debe encerrarla (filtros y animación crean un marco) */
.panel.is-cam-ampliada {
  z-index: 4000;
  animation: none;
  transform: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.cam-video.is-ampliada {
  position: fixed;
  inset: 0;
  z-index: 5;
  width: 100%;
  height: 100dvh;
  aspect-ratio: auto;
  border-radius: 0;
}

.cam-video:fullscreen {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  border-radius: 0;
}

.cam-video.is-ampliada .cam-barra {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 4;
  justify-content: center;
  margin: 0;
  padding: 1.6rem max(0.75rem, env(safe-area-inset-right)) max(0.75rem, env(safe-area-inset-bottom)) max(0.75rem, env(safe-area-inset-left));
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.82));
}

.cam-video.is-ampliada .cam-barra .boton-nueva {
  flex: 0 1 150px;
}

/* En pantalla completa pedir un video no cabe (abre una hoja): se hace desde la vista normal */
.cam-video.is-ampliada #btnCamPedir {
  display: none;
}

.cam-video.is-ampliada .cam-cambiar,
.cam-video.is-ampliada .cam-canales {
  bottom: 4.9rem;
}

.cam-video.is-ampliada .cam-aviso {
  bottom: 5rem;
}

.cam-video.is-ampliada .cam-tiempo {
  right: auto;
  left: 50%;
  transform: translateX(-50%);
}

.cam-video.con-peque .cam-poder {
  display: grid;
}

.cam-video.con-peque .cam-ventana.is-peque {
  display: block;
  inset: max(0.75rem, env(safe-area-inset-top)) max(0.75rem, env(safe-area-inset-right)) auto auto;
  z-index: 3;
  width: min(36%, 300px);
  aspect-ratio: 16 / 9;
  border: 2px solid rgba(255, 255, 255, 0.75);
  border-radius: 10px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.55);
  cursor: pointer;
}

.cam-ventana.is-peque .cam-estado__icono,
.cam-ventana.is-peque .cam-estado small {
  display: none;
}

.cam-ventana.is-peque .cam-estado b {
  font-size: 0.72rem;
}

.cam-ventana.is-peque .cam-marcas {
  top: 0.3rem;
  left: 0.3rem;
}

.cam-ventana.is-peque .cam-envivo {
  display: none;
}

.cam-ventana.is-peque .cam-numero {
  font-size: 0.62rem;
}

.cam-ventana.is-peque .cam-poder {
  top: auto;
  right: 0.3rem;
  bottom: 0.3rem;
  left: auto;
  width: 32px;
  height: 32px;
}

.cam-ventana.is-peque .cam-poder svg {
  width: 16px;
  height: 16px;
}

/* Alerta de la cámara en Grabaciones y fotos */
.cam-alerta {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.7rem 0.8rem;
  border: 1px solid color-mix(in srgb, var(--rojo) 45%, var(--line));
  border-radius: 14px;
  background: color-mix(in srgb, var(--rojo) 10%, var(--card));
}

.cam-alerta svg {
  flex: none;
  width: 24px;
  height: 24px;
  color: var(--rojo);
}

.cam-alerta span {
  display: grid;
  gap: 0.1rem;
}

.cam-alerta b {
  font-size: 0.92rem;
}

.cam-alerta small {
  color: var(--muted);
  font-size: 0.78rem;
}

/* Pedir una grabación o una foto */
.cam-pedir {
  display: grid;
  gap: 0.6rem;
  margin: 0 0 0.9rem;
  padding: 0.85rem;
}

.cam-pedir__fila {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 88px;
  gap: 0.5rem;
}

.cam-pedir label {
  display: grid;
  gap: 0.25rem;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 600;
}

.cam-pedir input,
.cam-pedir select {
  min-width: 0;
  min-height: 42px;
  padding: 0 0.6rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--card-2);
  color: var(--text);
  font: inherit;
  color-scheme: dark;
}

.cam-pedir__botones {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.cam-pedir__botones .boton-nueva {
  min-width: 140px;
  padding: 0 0.9rem;
}

.cam-pedir__botones .boton-nueva:disabled {
  opacity: 0.5;
  cursor: default;
}

.boton-nueva--suave {
  background: color-mix(in srgb, var(--orange) 16%, transparent);
  color: var(--orange-2);
}

.cam-pedir__mensaje {
  margin: 0;
  font-size: 0.84rem;
  line-height: 1.4;
}

.cam-pedir__mensaje.is-ok {
  color: var(--green);
}

.cam-pedir__mensaje.is-error {
  color: var(--red);
}

/* Lo que ya subió la cámara */
.cam-lista {
  display: grid;
  gap: 0.7rem;
}

.cam-medio {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--card);
}

.cam-medio__video,
.cam-medio__foto {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  background: #000;
}

.cam-medio__pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.25rem 0.35rem 0.25rem 0.8rem;
  font-size: 0.85rem;
}

.cam-medio__pie span {
  color: var(--muted);
}

.cam-medio__pie b {
  color: var(--text);
}

/* Ejemplo del candado (sin imagen de verdad) */
.mu-camara {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  border-radius: 10px;
  background: linear-gradient(#5b6b86, #2b3140 55%);
}

.mu-camara svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.mu-camara__vivo {
  position: absolute;
  top: 6px;
  left: 6px;
  z-index: 1;
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
  background: #ef4444;
  color: #fff;
  font-size: 0.6rem;
  font-weight: 800;
}

/* ---------- v135: botones de los controles configurables (pestaña Botones de la Barra de comandos) ---------- */
/* Los botones que salen se reparten el ancho; con más de 6 la barra se desliza hacia los lados (5 y medio a la vista) */
.controles {
  grid-template-columns: none;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
}

.controles [data-quitado] {
  display: none !important;
}

.controles.is-desliza {
  grid-auto-columns: calc((100% - 0.4rem) / 5.5);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}

.controles.is-desliza::-webkit-scrollbar {
  display: none;
}

.controles.is-desliza > * {
  scroll-snap-align: start;
}

/* Nombre de un comando propio (puede ser largo): máximo dos renglones */
.control__nombre {
  display: -webkit-box;
  overflow: hidden;
  max-width: 100%;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-height: 1.15;
  text-align: center;
  overflow-wrap: anywhere;
}

/* Pestañas de la Barra de comandos: tres (Acciones de evento en dos renglones si no cabe) */
.pestanas-comandos button {
  padding: 0 0.2rem;
  font-size: 0.88rem;
  line-height: 1.15;
  text-align: center;
}

/* Vista previa: la misma barra de los controles */
.botones-vista {
  margin: 0 0 0.85rem;
}

.controles--vista {
  margin: 0;
  border: 1px dashed var(--line);
  background: var(--card-2);
}

.control-vista {
  position: relative;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 0.25rem;
  min-width: 0;
  min-height: 62px;
  padding: 0.55rem 0.15rem 0.4rem;
  border-radius: 12px;
  color: var(--text);
  font-size: 0.66rem;
  font-weight: 600;
  cursor: grab;
  touch-action: pan-x pan-y;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

.control-vista > svg {
  width: 21px;
  height: 21px;
}

.control-vista.is-propio > svg {
  color: var(--orange-2);
}

.control-vista.is-arrastrando {
  z-index: 1;
  background: color-mix(in srgb, var(--orange-2) 22%, transparent);
  box-shadow: inset 0 0 0 1px var(--orange-2);
  cursor: grabbing;
}

.controles--vista .botones-quitar {
  position: absolute;
  min-height: 0;
  top: 1px;
  right: 1px;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--card);
  color: var(--muted);
  cursor: pointer;
}

.controles--vista .botones-quitar svg {
  width: 12px;
  height: 12px;
}

.botones-vista__desliza {
  display: block;
  margin-top: 0.3rem;
  color: var(--muted);
  font-size: 0.75rem;
  text-align: right;
}

.botones-vacio {
  grid-column: 1 / -1;
  margin: 0;
  padding: 0.6rem;
  color: var(--muted);
  font-size: 0.85rem;
  text-align: center;
}

/* Para: todos los vehículos o solo este */
.botones-para {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 0.9rem;
  font-weight: 600;
}

.botones-para select {
  flex: 1;
  min-height: 42px;
  padding: 0 0.6rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card-2);
  color: var(--text);
  font: inherit;
}

.botones-titulo {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin: 0 0 0.45rem;
  font-size: 0.95rem;
}

.botones-titulo small {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 500;
}

.botones-titulo small svg {
  width: 14px;
  height: 14px;
}

/* Filas de En la barra y Disponibles */
.botones-lista {
  display: grid;
  gap: 0.4rem;
  margin: 0 0 0.9rem;
}

.boton-fila {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 52px;
  padding: 0.35rem 0.4rem 0.35rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--card-2);
}

.boton-fila.is-arrastrando {
  position: relative;
  z-index: 1;
  border-color: var(--orange-2);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}

.boton-fila__mango {
  display: grid;
  flex: none;
  place-items: center;
  width: 30px;
  height: 40px;
  margin-left: -0.3rem;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--muted);
  cursor: grab;
  touch-action: none;
}

.boton-fila__mango svg {
  width: 18px;
  height: 18px;
}

.boton-fila__icono svg {
  display: block;
  width: 22px;
  height: 22px;
  color: var(--orange-2);
}

.boton-fila__texto {
  flex: 1;
  min-width: 0;
}

.boton-fila__texto strong {
  display: block;
  font-size: 0.9rem;
}

.boton-fila__texto small {
  display: block;
  color: var(--muted);
  font-size: 0.74rem;
}

.boton-fila__accion {
  display: grid;
  flex: none;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card);
  color: var(--muted);
  cursor: pointer;
}

.boton-fila__accion.is-agregar {
  border-color: color-mix(in srgb, var(--orange-2) 55%, transparent);
  color: var(--orange-2);
}

.boton-fila__accion svg {
  width: 18px;
  height: 18px;
}

.is-ordenando,
.is-ordenando * {
  user-select: none;
  -webkit-user-select: none;
}

/* ---------- v136: flechitas a los lados de la barra que se desliza (en vez de la sombra del borde) ---------- */
.controles-marco {
  position: relative;
}

.controles-flecha {
  position: absolute;
  top: 1px;
  bottom: 1px;
  z-index: 2;
  display: none;
  align-items: center;
  width: 34px;
  padding: 0;
  border: 0;
  color: var(--text);
  cursor: pointer;
}

.controles-flecha.is-izq {
  left: 1px;
  justify-content: flex-start;
  padding-left: 3px;
  border-radius: 15px 0 0 15px;
  background: linear-gradient(to right, var(--card) 45%, transparent);
}

.controles-flecha.is-der {
  right: 1px;
  justify-content: flex-end;
  padding-right: 3px;
  border-radius: 0 15px 15px 0;
  background: linear-gradient(to left, var(--card) 45%, transparent);
}

.controles-marco--vista .controles-flecha.is-izq {
  background: linear-gradient(to right, var(--card-2) 45%, transparent);
}

.controles-marco--vista .controles-flecha.is-der {
  background: linear-gradient(to left, var(--card-2) 45%, transparent);
}

.controles-flecha svg {
  box-sizing: content-box;
  width: 16px;
  height: 16px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--card-2);
}

.controles-marco.puede-izq .controles-flecha.is-izq,
.controles-marco.puede-der .controles-flecha.is-der {
  display: flex;
}

/* ---------- Guía de la app (la misma de la app de GCLTracs) (un foco sobre cada parte y una tarjeta que la explica) ---------- */
.guia {
  position: fixed;
  inset: 0;
  z-index: 5000;
}

.guia.is-inicio {
  background: rgba(5, 8, 15, 0.74);
}

.guia__foco {
  position: fixed;
  border-radius: 16px;
  box-shadow: 0 0 0 3px var(--orange-2), 0 0 0 9999px rgba(5, 8, 15, 0.74);
  transition: left 0.3s ease, top 0.3s ease, width 0.3s ease, height 0.3s ease;
  pointer-events: none;
}

.guia.is-inicio .guia__foco {
  display: none;
}

.guia__tarjeta {
  position: fixed;
  left: 16px;
  right: 16px;
  max-width: 360px;
  margin: 0 auto;
  padding: 1rem 1.05rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--card);
  color: var(--text);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
  transition: top 0.3s ease;
}

.guia__dibujo {
  display: none;
}

.guia.is-inicio .guia__dibujo {
  display: block;
  margin: 0.2rem auto 0.6rem;
  width: 170px;
}

.guia__dibujo .veh-grupo {
  display: block;
  width: 100%;
  height: auto;
}

.guia__tarjeta h2 {
  margin: 0 0 0.35rem;
  color: var(--orange-2);
  font-size: 1.08rem;
}

.guia.is-inicio .guia__tarjeta {
  text-align: center;
}

.guia__tarjeta p {
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.45;
}

.guia__pie {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.95rem;
}

.guia__cuenta {
  margin-right: auto;
  color: var(--muted);
  font-size: 0.78rem;
  white-space: nowrap;
}

.guia__pie button {
  height: 38px;
  padding: 0 0.85rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.guia__pie .guia__saltar {
  border-color: transparent;
  color: var(--muted);
}

.guia__pie .guia__siguiente {
  border: 0;
  background: linear-gradient(135deg, var(--orange), var(--orange-2));
  color: #fff;
}

/* ---------- v145: demostración (v160: Solicitar demo en Entrar y letrero arriba) ---------- */
.entrar__demo {
  display: inline-flex;
  box-sizing: border-box;
  text-decoration: none;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  height: 46px;
  margin-top: 0.9rem;
  border: 1px dashed color-mix(in srgb, var(--orange-2) 55%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--orange) 8%, transparent);
  color: var(--text);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.entrar__demo svg {
  width: 16px;
  height: 16px;
  color: var(--orange-2);
}

.entrar__demo:disabled {
  opacity: 0.6;
}

.letrero-vista--demo span {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.letrero-vista--demo span svg {
  width: 12px;
  height: 12px;
}

.letrero-vista--demo a {
  flex: none;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  background: #fff;
  color: var(--orange);
  font-weight: 800;
  text-decoration: none;
}

/* ---------- v163: Tipo de mapa: fila en Ajustes de visualización y listado ---------- */
.tipo-mapa-fila small {
  margin-left: auto;
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 500;
  text-align: right;
}

.tipo-mapa-fila span svg {
  display: block;
  width: 18px;
  height: 18px;
  color: var(--muted);
}

.tipo-mapa {
  margin-bottom: 0;
}

.tipo-mapa button:last-of-type {
  border-bottom: 0;
}

.tipo-mapa svg {
  color: var(--muted);
}

.tipo-mapa button.is-activo,
.tipo-mapa button.is-activo svg {
  color: var(--orange-2);
}

/* ---------- v164: Eventos de Cronología: se abren al tocar ---------- */
.eventos-fila button span svg {
  transition: transform 0.15s;
}

.eventos-fila button[aria-expanded="true"] span svg {
  transform: rotate(180deg);
}

.eventos-fila {
  margin-bottom: 0.6rem;
}

.tipo-mapa-fila small {
  flex: none;
  white-space: nowrap;
}

/* v169: pestaña Comandos: crear y enviar sin guardar, acciones del GPS y guardados */
.comando-tarjeta {
  margin: 0 0 0.9rem;
  padding: 0 0.85rem 0.85rem;
}

.comando-tarjeta h3 {
  margin: 0 -0.85rem 0.75rem;
  border-bottom: 1px solid var(--line);
}

.comando-tarjeta .hoja__texto {
  margin: 0 0 0.6rem;
}

.comando-tarjeta .lista-comandos {
  margin: 0;
}

.comando-tarjeta .comando__enviar,
.comando-tarjeta .comando__editar {
  background: rgba(255, 255, 255, 0.04);
}

.comando-nombre {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
}

.comando-nombre label {
  flex: 1;
}

.comando-icono {
  position: relative;
  display: grid;
  flex: none;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--orange-2);
  cursor: pointer;
}

.comando-icono > svg {
  width: 22px;
  height: 22px;
}

.comando-icono__lapiz {
  position: absolute;
  right: -5px;
  bottom: -5px;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--orange);
  color: #fff;
}

.comando-icono__lapiz svg {
  width: 11px;
  height: 11px;
}

.comando-acciones {
  grid-template-columns: 1fr 1fr;
}

.comando-acciones #btnComandoEnviar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
}

.comando-acciones #btnComandoEnviar svg {
  width: 18px;
  height: 18px;
}

.comando-acciones #btnComandoEnviar.is-confirmar {
  border-color: var(--orange-2);
  color: var(--orange-2);
}

.comando__enviar .comando__flecha {
  display: grid;
  flex: none;
  place-items: center;
  margin-left: auto;
  color: var(--muted);
  font-style: normal;
}

.comando__flecha svg {
  width: 18px;
  height: 18px;
}

.comando__enviar small:empty {
  display: none;
}

#comandoIconos[hidden],
#comandoEditando[hidden] {
  display: none;
}

/* v180 (pedido del usuario): calendario propio en el computador (el del navegador se veía antiguo) */
@media (hover: hover) and (pointer: fine) {
  input[type="date"]::-webkit-calendar-picker-indicator {
    display: none;
  }
  input[type="date"] {
    cursor: pointer;
  }
  input[type="date"]:not(.historial-fecha input) {
    padding-right: 2.6rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23949cab' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='15' rx='3'/%3E%3Cpath d='M3.5 10h17M8 3v4M16 3v4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.85rem center;
    background-size: 18px 18px;
  }
}

.cal {
  position: fixed;
  z-index: 10000;
  width: 296px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: color-mix(in srgb, var(--card) 96%, transparent);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45), 0 2px 8px rgba(0, 0, 0, 0.3);
  color: var(--text);
  font: inherit;
  animation: cal-entra 0.14s ease-out;
}

@keyframes cal-entra {
  from { opacity: 0; transform: translateY(-4px) scale(0.98); }
  to { opacity: 1; transform: none; }
}

.cal__cabeza {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.cal__titulo {
  font-size: 0.98rem;
  font-weight: 650;
  text-transform: capitalize;
  letter-spacing: 0.01em;
}

.cal__titulo span {
  color: var(--muted);
  font-weight: 500;
}

.cal__flecha {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  transition: background 0.12s;
}

.cal__flecha svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cal__flecha:hover:not(:disabled) {
  background: var(--card-2);
}

.cal__flecha:disabled {
  opacity: 0.25;
  cursor: default;
}

.cal__semana,
.cal__dias {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.cal__semana span {
  padding: 4px 0 6px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 600;
  text-align: center;
}

.cal__dia {
  position: relative;
  height: 36px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 0.88rem;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}

.cal__dia:hover:not(:disabled):not(.is-elegido) {
  background: var(--card-2);
}

.cal__dia.is-fuera {
  color: color-mix(in srgb, var(--muted) 55%, transparent);
}

.cal__dia.is-hoy:not(.is-elegido) {
  color: var(--orange-2);
  font-weight: 650;
}

.cal__dia.is-hoy:not(.is-elegido)::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 5px;
  width: 4px;
  height: 4px;
  margin-left: -2px;
  border-radius: 50%;
  background: var(--orange-2);
}

.cal__dia.is-elegido {
  background: linear-gradient(135deg, var(--orange-2), var(--orange));
  color: #fff;
  font-weight: 650;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--orange) 35%, transparent);
}

.cal__dia:disabled {
  color: color-mix(in srgb, var(--muted) 30%, transparent);
  cursor: default;
}

.cal__dia:focus-visible,
.cal__flecha:focus-visible,
.cal__boton:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--orange-2) 70%, transparent);
  outline-offset: 1px;
}

.cal__pie {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.cal__boton {
  height: 32px;
  padding: 0 14px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}

.cal__boton:hover:not(:disabled) {
  background: var(--card-2);
  color: var(--text);
}

.cal__boton.is-principal {
  color: var(--orange-2);
}

.cal__boton:disabled {
  opacity: 0.35;
  cursor: default;
}

/* ========== Skywip GPS (2026-11-11): la hoja del celular, copiada de GCL (v170–v195) ========== */
/* v193: lo último de los mensajes en el recuadro del mapa; al tocarlo abre el chat */
.ficha-vehiculo .ficha-chat {
  color: var(--orange);
  cursor: pointer;
}

.ficha-vehiculo dd.ficha-chat span {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow-wrap: anywhere;
}

.ficha-vehiculo dd.ficha-chat small {
  display: block;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 500;
}


/* v170: app GCLTracs Ubicación: estado en la tarjeta de la persona y hoja del horario */
.unidad:has(.aviso-celular:not([hidden])) {
  flex-wrap: wrap;
}

.aviso-celular {
  display: flex;
  flex: 1 0 100%;
  align-items: center;
  gap: 0.5rem;
  min-height: 40px;
  padding: 0.35rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card-2);
  color: var(--text);
  font: inherit;
  font-size: 0.88rem;
  text-align: left;
  cursor: pointer;
}

.aviso-celular[hidden] {
  display: none;
}

.aviso-celular small {
  margin-left: auto;
  color: var(--orange);
  font-weight: 600;
}

.aviso-celular.is-atento {
  border-color: rgba(251, 191, 36, 0.35);
  background: rgba(251, 191, 36, 0.12);
}

/* v174: últimos pedidos de ubicación */
.celular-pedidos {
  display: grid;
  gap: 0.2rem;
  margin: 0 0 0.75rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card-2);
  font-size: 0.8rem;
}

.celular-pedidos[hidden] {
  display: none;
}

.celular-pedidos b {
  font-size: 0.82rem;
}

.celular-pedidos small {
  color: var(--muted);
}

.celular-pedidos .is-bien {
  color: #34d399;
}

.celular-pedidos .is-mal {
  color: #fbbf24;
}

.celular-codigo {
  display: grid;
  gap: 0.35rem;
  margin: 0.6rem 0;
  padding: 0.7rem;
  border: 1px dashed var(--orange);
  border-radius: 12px;
  text-align: center;
}

.celular-codigo strong {
  font-size: 1.5rem;
  letter-spacing: 0.12em;
}

.celular-codigo small,
.celular-grupo small {
  color: var(--muted);
  font-size: 0.8rem;
}

.celular-grupo {
  display: grid;
  gap: 0.5rem;
  margin: 0.7rem 0;
  padding: 0;
  border: 0;
}

.celular-grupo legend {
  margin-bottom: 0.3rem;
  font-weight: 700;
}

.celular-grupo > label {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 0.5rem;
  align-items: center;
}

.celular-grupo > label small {
  grid-column: 2;
}

.celular-dias {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.3rem;
}

.celular-dias input {
  position: absolute;
  opacity: 0;
}

.celular-dias span {
  display: grid;
  place-items: center;
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--card-2);
  font-weight: 600;
  cursor: pointer;
}

.celular-dias input:checked + span {
  border-color: transparent;
  background: linear-gradient(135deg, var(--orange), var(--orange-2));
  color: #fff;
}

.celular-dias input:focus-visible + span {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
}

.celular-horas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}

.celular-horas label {
  display: grid;
  gap: 0.25rem;
  font-size: 0.85rem;
}

.celular-horas input {
  min-height: 44px;
  padding: 0 0.5rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--card-2);
  color: var(--text);
  font: inherit;
}

/* v171: los tres valores del perfil personalizado */
.celular-propio {
  grid-template-columns: repeat(3, 1fr);
}

.celular-propio[hidden] {
  display: none;
}

.celular-propio input {
  min-width: 0;
  width: 100%;
}

.celular-grupo input[type="radio"] {
  accent-color: var(--orange);
}

/* v183: horas extra en la hoja del celular y en la Jornada */
.celular-extras {
  display: grid;
  gap: 0.55rem;
  margin: 0 0 0.75rem;
  padding: 0.7rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card-2);
}

.celular-extras[hidden],
.celular-extras__ahora[hidden] {
  display: none;
}

.celular-extras__cabeza {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.25rem 0.75rem;
}

.celular-extras__cabeza small,
.celular-extras__lista > small {
  color: var(--muted);
  font-size: 0.8rem;
}

.celular-extras__ahora {
  margin: 0;
  padding: 0.45rem 0.6rem;
  border-radius: 10px;
  background: rgba(255, 122, 69, 0.12);
  color: var(--orange-2);
  font-size: 0.85rem;
  font-weight: 600;
}

.celular-extras__extender {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
}

.celular-extras__extender label {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.85rem;
}

.celular-extras__extender input,
#celularExtraMax {
  min-height: 2.2rem;
  padding: 0 0.5rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--card);
  color: var(--text);
  font: inherit;
}

.celular-extras__extender button,
.celular-extra__acciones button {
  min-height: 2.2rem;
  padding: 0 0.8rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--card);
  color: var(--text);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
}

.celular-extras__lista {
  display: grid;
  gap: 0.4rem;
}

.celular-extra {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: 0.35rem 0.6rem;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--card);
}

.celular-extra[data-jor-lat] {
  cursor: pointer;
}

.celular-extra__texto {
  display: grid;
  gap: 0.1rem;
  min-width: 0;
}

.celular-extra__texto b {
  font-size: 0.85rem;
}

.celular-extra__texto small {
  color: var(--muted);
  font-size: 0.78rem;
}

.celular-extra__estado {
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
}

.celular-extra__estado.is-pendiente {
  background: rgba(251, 191, 36, 0.15);
  color: #fbbf24;
}

.celular-extra__estado.is-aprobada {
  background: rgba(52, 211, 153, 0.15);
  color: #34d399;
}

.celular-extra__estado.is-rechazada {
  background: rgba(248, 113, 113, 0.15);
  color: #f87171;
}

.celular-extra__acciones {
  display: flex;
  flex-wrap: wrap;
  grid-column: 1 / -1;
  gap: 0.35rem;
}

.celular-extra__acciones .is-bien {
  border-color: rgba(52, 211, 153, 0.45);
  color: #34d399;
}

.celular-extra__acciones .is-mal {
  border-color: rgba(248, 113, 113, 0.45);
  color: #f87171;
}

/* v184: al abrir desde el aviso de horas extra, la sección se resalta un momento */
.celular-extras {
  transition: border-color 0.4s, box-shadow 0.4s;
}

.celular-extras.is-resaltada {
  border-color: var(--orange-2);
  box-shadow: 0 0 0 3px rgba(255, 122, 69, 0.25);
}

/* v193: la hoja del celular por partes que se despliegan */
.celular-plegable {
  display: block;
}

.celular-plegable[hidden] {
  display: none;
}

.celular-plegable > summary {
  position: relative;
  min-height: 26px;
  padding-right: 1.5rem;
  align-items: center;
  list-style: none;
  cursor: pointer;
}

.celular-plegable > summary::-webkit-details-marker {
  display: none;
}

.celular-plegable > summary::after {
  content: "";
  position: absolute;
  top: 6px;
  right: 5px;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(45deg);
  transition: transform 0.15s;
}

.celular-plegable[open] > summary::after {
  top: 10px;
  transform: rotate(-135deg);
}

.celular-plegable > :not(summary) {
  margin-top: 0.6rem;
}

.celular-pedidos > summary b {
  font-size: 1rem;
}

.celular-pedidos__lista {
  display: grid;
  gap: 0.2rem;
}

.celular-extra.is-propia {
  border-left: 3px solid var(--green);
}

/* v195: la hoja del celular tiene dos vistas: el chat (mensajes y fotos) y las opciones (lo demás) */
#hojaCelular[data-vista="chat"] .solo-opciones,
#hojaCelular[data-vista="opciones"] .solo-chat {
  display: none !important;
}

.celular-ir-chat {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  min-height: 2.75rem;
  margin: 0 0 0.75rem;
  padding: 0 0.8rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card-2);
  color: var(--text);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.celular-ir-chat[hidden] {
  display: none;
}

.celular-ir-chat svg {
  width: 20px;
  height: 20px;
  flex: none;
}

/* v195: visor de fotos: la foto entera en la pantalla; tocarla la muestra a tamaño real (se desplaza con el dedo) */
.visor-foto {
  position: fixed;
  inset: 0;
  z-index: 9500;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: auto;
  padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom));
  background: rgba(0, 0, 0, 0.92);
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.visor-foto[hidden] {
  display: none;
}

.visor-foto img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 6px;
  cursor: zoom-in;
}

.visor-foto.is-grande {
  align-items: flex-start;
  justify-content: flex-start;
}

.visor-foto.is-grande img {
  max-width: none;
  max-height: none;
  margin: auto;
  cursor: zoom-out;
}

.visor-foto__x {
  position: fixed;
  top: max(12px, env(safe-area-inset-top));
  right: 12px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  cursor: pointer;
}

.visor-foto__x svg {
  width: 22px;
  height: 22px;
}

/* v191: mensajes de trabajo (hoja del celular y Jornada) */
.celular-mensaje {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 0.45rem;
  margin-bottom: 0.5rem;
}

.celular-mensaje textarea {
  width: 100%;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--card);
  color: inherit;
  font: inherit;
  font-size: 0.9rem;
  resize: vertical;
}

.celular-mensaje button {
  min-height: 42px;
  padding: 0 0.9rem;
  border: 0;
  border-radius: 10px;
  background: var(--orange);
  color: #fff;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.celular-mensaje button:disabled { opacity: 0.55; }
.celular-extra__texto small.celular-mensaje__estado.is-respondido { color: var(--green); font-weight: 700; }

/* Skywip GPS: el QR del código de vinculación (fondo blanco para que la cámara lo lea bien) */
.celular-qr:empty {
  display: none;
}

.celular-qr {
  width: min(220px, 70vw);
  margin: 0.6rem auto 0.4rem;
  padding: 10px;
  border-radius: 14px;
  background: #fff;
}

.celular-qr svg {
  display: block;
  width: 100%;
  height: auto;
}