/*
 * Identidad visual de Aceleria Summit, tomada de https://aceleria.utec.edu.uy/
 *   Morado de marca   #1b102e   (botones, borde, fondo principal)
 *   Morado de sección #1f1930
 *   Verde menta       #72e1a9   (acento, ítem activo del menú)
 *   Verde hover       #57eba9
 *   Tipografía        Input Sans (allá se llama "aceleria_input")
 */

@font-face {
    font-family: "aceleria_input";
    font-display: swap;
    src: url("../fonts/Input-Sans-Thin.ttf") format("truetype");
    font-weight: 100 700;
}

:root {
    --fondo: #1b102e;
    --superficie: #241a3b;
    --superficie-alta: #33275a;
    --borde: #3a2d59;
    --texto: #ffffff;
    --texto-sutil: #a99ec4;

    --acento: #72e1a9;
    --acento-claro: #57eba9;
    --sobre-acento: #1b102e;

    --exito: #72e1a9;
    --error: #ff7a90;
    --aviso: #ffc46b;

    /* Colores del anillo del logo, reutilizados para los roles. */
    --anillo-rosa: #e5a8cd;
    --anillo-verde: #72e1a9;
    --anillo-azul: #7cc4e4;

    --display: "aceleria_input", Helvetica, Arial, Lucida, sans-serif;
    --texto-ui: "Segoe UI", system-ui, -apple-system, sans-serif;
    --radio: 10px;

    /* Ancho útil de las pantallas. Tocar acá para ensanchar o angostar todo el sitio. */
    --ancho-contenido: 1320px;
}

* { box-sizing: border-box; }

/* El atributo hidden lo pone y lo saca el JS en varias pantallas. Sin esto,
   cualquier regla propia que fije `display` le gana al estilo del navegador. */
[hidden] { display: none !important; }

body {
    margin: 0;
    background: var(--fondo);
    color: var(--texto);
    font-family: var(--texto-ui);
    font-size: 15px;
    line-height: 1.55;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* La Input Sans sólo viene en Thin, así que se reserva para textos grandes. */
h1, h2, h3, .marca, .metrica-valor, .nav a, .btn {
    font-family: var(--display);
}

h1 { font-size: 1.9rem; margin: 0 0 .25rem; font-weight: 700; letter-spacing: -.01em; }
h2 { font-size: 1.25rem; margin: 0 0 .5rem; font-weight: 700; }
a { color: var(--acento); text-decoration: none; }
a:hover { text-decoration: underline; }

.sutil { color: var(--texto-sutil); font-size: .9rem; margin: 0; }
.mono { font-family: Consolas, "Courier New", monospace; font-size: .88rem; }
.derecha { text-align: right; }
.en-linea { display: inline; }

/* ---------- Barra superior ---------- */
.topbar {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: .75rem 1.5rem;
    background: #1f1930;
    border-bottom: 1px solid var(--borde);
    flex-wrap: wrap;
}

.marca { display: flex; align-items: center; gap: .6rem; }
.marca:hover { text-decoration: none; }
.marca img { height: 30px; width: auto; display: block; }

.marca-sufijo {
    font-family: var(--display);
    font-size: 1rem;
    color: var(--texto-sutil);
    padding-left: .6rem;
    border-left: 1px solid var(--borde);
    letter-spacing: .02em;
}

.nav { display: flex; gap: 1.5rem; margin-right: auto; }
.nav a { color: var(--texto-sutil); font-size: 1rem; }
.nav a:hover, .nav a.activo { color: var(--acento); text-decoration: none; }

.sesion { display: flex; align-items: center; gap: .75rem; }
/* Sin menú al lado (páginas públicas), hay que empujarla contra el borde. */
.sesion-sola { margin-left: auto; }
.sesion-datos { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.25; }
.sesion-datos strong { font-size: .9rem; font-weight: 600; }
.sesion-detalle { display: flex; align-items: center; gap: .4rem; }
.sesion-detalle .mono { font-size: .78rem; }

/* ---------- Contenedores ---------- */
.contenido {
    flex: 1;
    width: 100%;
    max-width: var(--ancho-contenido);
    margin: 0 auto;
    padding: 2rem 1.5rem;
}

.contenido-centrado {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 2rem 1rem;
}

.pie {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .9rem;
    padding: 1.25rem 1.5rem;
    color: var(--texto-sutil);
    font-size: .82rem;
    border-top: 1px solid var(--borde);
    flex-wrap: wrap;
}
/* El logo de UTEC viene gris oscuro: se fuerza a blanco para que se lea sobre el morado. */
.pie img { height: 34px; width: auto; filter: brightness(0) invert(1); opacity: .6; }
.pie a { color: var(--texto-sutil); }
.pie a:hover { color: var(--acento); }
.pie-sep { opacity: .4; }

.encabezado {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.panel {
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    padding: 1.25rem;
    margin-bottom: 1.25rem;
}
/* Los formularios de una sola columna no acompañan el ancho general: campos de
   1300px de largo se leen y se completan peor. */
.panel.angosto { max-width: 640px; }

/* ---------- Login ---------- */
.tarjeta-login {
    width: 100%;
    max-width: 400px;
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: 16px;
    padding: 2.25rem 2rem;
}

.login-marca { text-align: center; margin-bottom: 1.75rem; }
.login-marca img { width: 190px; max-width: 100%; height: auto; margin-bottom: .9rem; }
.login-marca h1 {
    font-size: 1.05rem;
    font-weight: 400;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--acento);
    margin: 0 0 .15rem;
}

/* ---------- Formularios ---------- */
label {
    display: block;
    margin: 1rem 0 .35rem;
    font-size: .86rem;
    font-weight: 600;
    color: var(--texto-sutil);
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
select {
    width: 100%;
    padding: .65rem .75rem;
    background: rgba(0, 0, 0, .25);
    border: 1px solid var(--borde);
    border-radius: 8px;
    color: var(--texto);
    font-size: .95rem;
    font-family: inherit;
}

input:focus, select:focus {
    outline: none;
    border-color: var(--acento);
    box-shadow: 0 0 0 3px rgba(114, 225, 169, .2);
}

select:disabled, input:disabled { opacity: .5; cursor: not-allowed; }

.ayuda { display: block; margin-top: .35rem; color: var(--texto-sutil); font-size: .8rem; }

.check {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-weight: 500;
    color: var(--texto);
    margin: 1rem 0 .35rem;
}
.check input { width: auto; margin: 0; accent-color: var(--acento); }

.bloque-password {
    margin: 1.25rem 0 0;
    padding: .75rem 1rem 1rem;
    border: 1px solid var(--borde);
    border-radius: 8px;
}
.bloque-password legend { padding: 0 .4rem; font-size: .8rem; color: var(--texto-sutil); font-weight: 600; }

.acciones { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: 1.25rem; }
/* Las tres acciones entran en una línea; si no, la tabla scrollea en vez de apilarlas. */
.acciones-fila { display: flex; gap: .35rem; justify-content: flex-end; flex-wrap: nowrap; }
.tabla td.acciones-fila { white-space: nowrap; }

.filtros { display: flex; gap: .6rem; margin-bottom: 1.25rem; flex-wrap: wrap; }
.filtros input[type="search"] { flex: 1; min-width: 200px; }
.filtros select { width: auto; min-width: 160px; }

/* ---------- Botones ---------- */
.btn {
    display: inline-block;
    padding: .55rem 1.1rem;
    border: 2px solid var(--borde);
    border-radius: 8px;
    background: var(--superficie-alta);
    color: var(--texto);
    font-size: .92rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color .15s, border-color .15s, color .15s;
}
.btn:hover { border-color: var(--acento); text-decoration: none; }

/*
 * En el sitio el botón principal es morado sobre fondo claro. Acá el fondo ya es
 * morado, así que se usa el estado hover de allá (verde sobre morado), que es el
 * mismo par de colores de marca y sí se lee.
 */
.btn-primario { background: var(--acento); border-color: var(--acento); color: var(--sobre-acento); }
.btn-primario:hover { background: var(--acento-claro); border-color: var(--acento-claro); color: var(--sobre-acento); }

.btn-sutil { background: transparent; border-color: transparent; color: var(--texto-sutil); }
.btn-sutil:hover { color: var(--acento); border-color: transparent; }

.btn-mini { padding: .28rem .65rem; font-size: .78rem; border-width: 1px; }

.btn-peligro { color: var(--error); border-color: rgba(255, 122, 144, .35); }
.btn-peligro:hover { background: rgba(255, 122, 144, .14); border-color: var(--error); }

.ancho { width: 100%; margin-top: 1.5rem; }

/* ---------- Alertas ---------- */
.alerta {
    padding: .7rem .9rem;
    border-radius: 8px;
    margin-bottom: .85rem;
    font-size: .89rem;
    border: 1px solid;
}
.alerta-exito { background: rgba(114, 225, 169, .12); border-color: rgba(114, 225, 169, .4); color: var(--exito); }
.alerta-error { background: rgba(255, 122, 144, .12); border-color: rgba(255, 122, 144, .4); color: var(--error); }
.alerta-info  { background: rgba(124, 196, 228, .12); border-color: rgba(124, 196, 228, .4); color: var(--anillo-azul); }

/* ---------- Tabla ---------- */
.tabla-scroll { overflow-x: auto; border: 1px solid var(--borde); border-radius: var(--radio); }

.tabla { width: 100%; border-collapse: collapse; background: var(--superficie); }
.tabla th, .tabla td { padding: .7rem .7rem; text-align: left; border-bottom: 1px solid var(--borde); }
.tabla td:first-child, .tabla th:first-child { white-space: nowrap; }

.tabla .col-fecha { white-space: nowrap; font-size: .82rem; }

/* El email va debajo del nombre: así se ahorra una columna y las acciones entran enteras. */
.celda-nombre { display: inline-block; }
.celda-email {
    display: block;
    max-width: 320px;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--texto-sutil);
    font-size: .78rem;
}
.tabla th {
    font-size: .76rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--texto-sutil);
    background: var(--superficie-alta);
    font-weight: 600;
}
.tabla tbody tr:last-child td { border-bottom: none; }
/* `.tabla th, .tabla td` fija text-align y le gana a `.derecha` por especificidad. */
.tabla .derecha { text-align: right; }
.tabla tbody tr:hover { background: rgba(114, 225, 169, .05); }

/* ---------- Chips y estados ---------- */
.chip {
    display: inline-block;
    padding: .12rem .55rem;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .02em;
    border: 1px solid;
    white-space: nowrap;
}

/* ---------- Métricas ---------- */
.metricas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
    margin: 1.5rem 0;
}

.metrica {
    position: relative;
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    padding: 1.15rem;
    display: flex;
    flex-direction: column;
    gap: .15rem;
    overflow: hidden;
}

/* Filo superior con el degradado del anillo del logo. */
.metrica::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: linear-gradient(90deg, var(--anillo-rosa), var(--anillo-verde), var(--anillo-azul));
}

.metrica-valor { font-size: 2.4rem; font-weight: 700; line-height: 1; }
.metrica-etiqueta { color: var(--texto-sutil); font-size: .84rem; }

/* ---------- Varios ---------- */
.vacio {
    padding: 2rem;
    text-align: center;
    color: var(--texto-sutil);
    background: var(--superficie);
    border: 1px dashed var(--borde);
    border-radius: var(--radio);
}

.datos { display: grid; grid-template-columns: auto 1fr; gap: .5rem 1.25rem; margin: 0; }
.datos dt { color: var(--texto-sutil); font-size: .86rem; font-weight: 600; }
.datos dd { margin: 0; }

@media (max-width: 640px) {
    .topbar { gap: .75rem; }
    .marca-sufijo { display: none; }
    .nav { order: 3; width: 100%; margin-right: 0; gap: 1.1rem; }
    .sesion-datos { align-items: flex-start; }
    h1 { font-size: 1.55rem; }
}

/* ---------- Propio de Aceleria Manage ---------- */

/* Las métricas del inicio son enlaces al listado filtrado. */
a.metrica { color: inherit; text-decoration: none; transition: border-color .15s; }
a.metrica:hover { border-color: var(--acento); }

/* Acreditación: el verde es el mismo del paso "Acreditado" de Summit. */
.chip-acreditado { color: var(--acento);       border-color: rgba(114, 225, 169, .55); background: rgba(114, 225, 169, .14); }
.chip-pendiente  { color: var(--texto-sutil);  border-color: var(--borde);             background: var(--superficie-alta); }

/* Botón de fila destacado (sin llegar al relleno del primario, que compite con la tabla). */
.btn-acento { color: var(--acento); border-color: rgba(114, 225, 169, .45); }
.btn-acento:hover { background: rgba(114, 225, 169, .14); }

/* Grupo de botones dentro del encabezado: ya está espaciado por .encabezado. */
.acciones.sin-margen, .alerta.sin-margen { margin: 0; }

input[type="file"] {
    width: 100%;
    padding: .55rem;
    background: rgba(0, 0, 0, .25);
    border: 1px dashed var(--borde);
    border-radius: 8px;
    color: var(--texto-sutil);
    font-family: inherit;
}
input[type="file"]::file-selector-button {
    margin-right: .75rem;
    padding: .4rem .9rem;
    border: 1px solid var(--borde);
    border-radius: 6px;
    background: var(--superficie-alta);
    color: var(--texto);
    font-family: inherit;
    cursor: pointer;
}
input[type="file"]::file-selector-button:hover { border-color: var(--acento); }

/* ---------- Importación CSV ---------- */

.chip-error { color: var(--error); border-color: rgba(255, 122, 144, .45); background: rgba(255, 122, 144, .12); }
.celda-error { display: block; margin-top: .25rem; color: var(--error); font-size: .8rem; }
.tabla tbody tr.fila-error { background: rgba(255, 122, 144, .05); }

/* ---------- Código QR ---------- */
/* Siempre sobre blanco: el morado de fondo arruina el contraste y los lectores fallan. */
.qr-imagen {
    display: block;
    width: 232px;
    max-width: 100%;
    height: auto;
    margin: 1rem 0;
    padding: .5rem;
    background: #fff;
    border-radius: var(--radio);
    image-rendering: pixelated;
}

/* Edición: formulario y QR lado a lado; en pantallas chicas, uno abajo del otro. */
.ficha { display: flex; gap: 1.25rem; align-items: flex-start; flex-wrap: wrap; }
.ficha > .panel.angosto { flex: 1 1 380px; }
.ficha-qr { flex: 0 1 280px; }

/* ---------- Acreditación ---------- */
.escaner {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.25rem;
    align-items: start;
}

.escaner-video-caja {
    position: relative;
    margin-bottom: 1rem;
    border-radius: var(--radio);
    overflow: hidden;
    background: #000;
}
.escaner-video-caja video {
    display: block;
    width: 100%;
    height: auto;
    /* Sin esto el video se estira si la cámara entrega otra proporción. */
    object-fit: cover;
}

/* Marco que indica dónde apuntar. Decorativo: no recorta la lectura. */
.escaner-mira {
    position: absolute;
    inset: 12%;
    border: 3px solid var(--acento);
    border-radius: var(--radio);
    pointer-events: none;
    opacity: .75;
}

.escaner-fuente { margin-bottom: .9rem; }
.escaner-fuente label { margin-top: 0; }

/* El resultado se lee de reojo y a un brazo de distancia: colores fuertes. */
.resultado-mensaje { font-weight: 700; margin: 0 0 .5rem; font-size: 1.05rem; }
.resultado-nombre {
    font-family: var(--display);
    font-size: 1.7rem;
    margin: 0 0 .2rem;
    line-height: 1.15;
}
.resultado .acciones { margin-top: .5rem; }

.resultado-ok .resultado-mensaje    { color: var(--acento); }
.resultado-aviso .resultado-mensaje { color: var(--aviso); }
.resultado-error .resultado-mensaje { color: var(--error); }

/* Acreditado recién: el QR se enmarca en verde para confirmarlo de un vistazo. */
.resultado-ok .qr-imagen { box-shadow: 0 0 0 4px var(--acento); }

.tabla tbody tr.fila-elegida { background: rgba(114, 225, 169, .1); }

/* ---------- Islas ---------- */
.resultado-detalle { margin: .4rem 0 0; font-size: 1.05rem; }
.nota-tabla { margin-top: .6rem; }

/* ---------- Línea de tiempo (recorrido por las islas) ---------- */
.linea-tiempo {
    list-style: none;
    margin: 1rem 0 0;
    padding: 0;
}
.linea-tiempo li {
    display: flex;
    gap: 1rem;
    padding: 0 0 1rem 0;
    position: relative;
}
/* Hilo que une los pasos; el último no lo lleva para no quedar colgando. */
.linea-tiempo li::before {
    content: "";
    position: absolute;
    left: 5px;
    top: 1.1rem;
    bottom: 0;
    width: 1px;
    background: var(--borde);
}
.linea-tiempo li:last-child { padding-bottom: 0; }
.linea-tiempo li:last-child::before { display: none; }

.linea-tiempo-fecha {
    flex: 0 0 auto;
    padding-left: 1.4rem;
    position: relative;
    font-size: .82rem;
    white-space: nowrap;
}
.linea-tiempo-fecha::before {
    content: "";
    position: absolute;
    left: 0;
    top: .35rem;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--superficie);
    border: 2px solid var(--acento);
}
.linea-tiempo-detalle { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.linea-tiempo-detalle .sutil { font-size: .82rem; }

@media (max-width: 640px) {
    .linea-tiempo li { flex-direction: column; gap: .3rem; }
    .linea-tiempo-detalle { padding-left: 1.4rem; }
}

/* ---------- Etiquetas de islas ---------- */
.etiqueta {
    display: inline-block;
    padding: .1rem .55rem;
    border: 1px solid rgba(124, 196, 228, .4);
    border-radius: 999px;
    background: rgba(124, 196, 228, .1);
    color: var(--anillo-azul);
    font-size: .74rem;
    font-weight: 600;
    white-space: nowrap;
}
a.etiqueta:hover { border-color: var(--anillo-azul); text-decoration: none; }
.etiqueta-activa { background: var(--anillo-azul); border-color: var(--anillo-azul); color: var(--sobre-acento); }
.etiqueta-cuenta { opacity: .7; font-weight: 400; }

.etiquetas-fila { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .35rem; }
p.etiquetas-fila { margin: .4rem 0 0; }

.filtro-etiquetas { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1.25rem; }
.filtro-etiquetas .etiqueta { font-size: .82rem; padding: .25rem .75rem; }

/* Formulario: las existentes son casillas con forma de chip. */
.bloque-etiquetas {
    margin: 1.25rem 0 0;
    padding: .75rem 1rem 1rem;
    border: 1px solid var(--borde);
    border-radius: 8px;
}
.bloque-etiquetas legend { padding: 0 .4rem; font-size: .8rem; color: var(--texto-sutil); font-weight: 600; }
.bloque-etiquetas > .ayuda:first-of-type { margin-top: 0; }

.etiquetas-opciones { display: flex; flex-wrap: wrap; gap: .4rem; margin: .5rem 0 .25rem; }
.etiqueta-opcion {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    margin: 0;
    padding: .3rem .75rem;
    border: 1px solid var(--borde);
    border-radius: 999px;
    background: var(--superficie-alta);
    color: var(--texto);
    font-size: .84rem;
    font-weight: 500;
    cursor: pointer;
    user-select: none;
}
.etiqueta-opcion input { margin: 0; accent-color: var(--anillo-azul); }
.etiqueta-opcion:hover { border-color: var(--anillo-azul); }
.etiqueta-opcion:has(input:checked) {
    border-color: var(--anillo-azul);
    background: rgba(124, 196, 228, .16);
    color: var(--anillo-azul);
}

/* ---------- Huellas (gráficos agregados) ---------- */
/* Oculto a la vista pero leído por lectores de pantalla. */
.solo-lectores {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/*
 * Barras horizontales. Una sola serie, así que un solo color: el acento.
 * Marca fina (14px, nunca llena la fila), extremo de datos redondeado y base
 * recta, valor en la punta con el color del texto, no el de la barra.
 */
.barras { width: 100%; border-collapse: collapse; margin-top: 1rem; }
.barras th {
    width: 1%;
    padding: .3rem 1rem .3rem 0;
    text-align: left;
    white-space: nowrap;
    font-weight: 500;
    font-size: .88rem;
    color: var(--texto-sutil);
}
.barras td { padding: .3rem 0; }
.barra-pista { display: flex; align-items: center; gap: .5rem; min-height: 24px; }
.barra {
    display: block;
    height: 14px;
    min-width: 3px;
    background: var(--acento);
    border-radius: 0 4px 4px 0;
    /* Área de hover más grande que la marca. */
    outline: 5px solid transparent;
    cursor: default;
}
.barra:hover, .barra:focus-visible { background: var(--acento-claro); outline-color: rgba(114, 225, 169, .15); }
.barra-valor { font-size: .86rem; font-variant-numeric: tabular-nums; color: var(--texto); }

/* Recorridos: las islas en fila con flechas. */
.recorridos th { width: 60%; white-space: normal; }
.ruta { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; }
.ruta-paso {
    padding: .1rem .5rem;
    border: 1px solid var(--borde);
    border-radius: 6px;
    background: var(--superficie-alta);
    color: var(--texto);
    font-size: .8rem;
}
.ruta-flecha { color: var(--texto-sutil); font-size: .8rem; }

/*
 * Mapas de calor: tablas con fondo de un solo tono (verde), más intenso cuanto
 * mayor el valor. Al ser tablas, son también la vista accesible de los datos.
 */
.mapa-calor th, .mapa-calor td { text-align: center; padding: .55rem .6rem; }
.mapa-calor tbody th {
    text-align: left;
    white-space: nowrap;
    font-weight: 500;
    font-size: .86rem;
    text-transform: none;
    letter-spacing: 0;
    color: var(--texto);
}
.mapa-calor td {
    min-width: 3.2rem;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    /* Separación de 2px entre celdas, del color de la superficie. */
    box-shadow: inset 0 0 0 1px var(--superficie);
}
.mapa-calor td[data-tip]:hover, .mapa-calor td[data-tip]:focus-visible {
    outline: 2px solid var(--texto);
    outline-offset: -2px;
}
.mapa-calor thead th { white-space: normal; min-width: 5rem; font-size: .72rem; }
.mapa-calor .mapa-esquina { text-align: left; min-width: 9rem; }
.mapa-calor .mapa-hora { min-width: 3.2rem; }
.mapa-extremo { color: var(--anillo-azul) !important; font-style: italic; }
.mapa-imposible { color: var(--borde); font-weight: 400 !important; }
.mapa-cero { color: var(--texto-sutil); opacity: .5; font-weight: 400; }
.mapa-calor tbody tr:hover { background: transparent; }

.escala-calor {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-top: .75rem;
    color: var(--texto-sutil);
    font-size: .78rem;
}
.escala-calor-barra {
    width: 140px;
    height: 10px;
    border-radius: 2px;
    background: linear-gradient(90deg, rgba(114, 225, 169, .14), rgba(114, 225, 169, .94));
}
.escala-calor-cero { margin-left: 1rem; }

.tooltip {
    position: absolute;
    z-index: 50;
    max-width: 280px;
    padding: .4rem .65rem;
    border: 1px solid var(--borde);
    border-radius: 6px;
    background: #0f0a1c;
    color: var(--texto);
    font-size: .8rem;
    pointer-events: none;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .35);
}

/* ---------- Estelas (animación de recorridos) ---------- */
.estelas { margin-bottom: 1.5rem; }
.estelas-marco {
    position: relative;
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    overflow: hidden;
    background: #07040f;
}
.estelas-mapa { width: 100%; height: min(70vh, 640px); min-height: 380px; }
.estelas-marco:fullscreen { border: none; border-radius: 0; }
.estelas-marco:fullscreen .estelas-mapa { height: 100vh; }

/* Cuántos recorridos hay: discreto, arriba a la izquierda. */
.estelas-cantidad {
    position: absolute;
    top: .9rem;
    left: 1.1rem;
    color: var(--texto-sutil);
    font-size: .78rem;
    pointer-events: none;
}
.estelas-leyenda {
    position: absolute;
    left: 1.1rem;
    bottom: .9rem;
    display: flex;
    flex-wrap: wrap;
    gap: .4rem 1rem;
    color: var(--texto-sutil);
    font-size: .76rem;
    pointer-events: none;
}
.estelas-leyenda span { display: inline-flex; align-items: center; gap: .4rem; }
.estelas-muestra { display: inline-block; width: 18px; height: 3px; border-radius: 2px; }
.estelas-muestra-estela { background: linear-gradient(90deg, transparent, #ff266e); }
.estelas-muestra-halo { background: rgba(70, 115, 255, .7); }
.estelas-muestra-nodo { width: 9px; height: 9px; border-radius: 50%; background: #ffd2e4; box-shadow: 0 0 8px #ff266e; }

.estelas-controles { display: flex; align-items: center; gap: .75rem; margin-top: .75rem; flex-wrap: wrap; }
.estelas-controles input[type="range"] { flex: 1; min-width: 180px; accent-color: #ff266e; }
.estelas-velocidad { display: inline-flex; align-items: center; gap: .4rem; margin: 0; font-size: .8rem; }
.estelas-velocidad select { width: auto; padding: .2rem .4rem; font-size: .8rem; }
.estelas-casilla { display: inline-flex; align-items: center; gap: .35rem; margin: 0; font-size: .8rem; font-weight: 500; color: var(--texto); cursor: pointer; }
.estelas-casilla input { margin: 0; accent-color: #ff266e; }
.estelas-nota { margin-top: .6rem; font-size: .8rem; }

/* Los controles de MapLibre, a tono con el fondo oscuro. */
.estelas .maplibregl-ctrl-group { background: rgba(36, 26, 59, .85); }
.estelas .maplibregl-ctrl-group button + button { border-top-color: var(--borde); }
.estelas .maplibregl-ctrl-icon { filter: invert(1) opacity(.75); }
.deck-tooltip {
    border: 1px solid var(--borde) !important;
    border-radius: 6px !important;
    background: #0f0a1c !important;
    color: var(--texto) !important;
    font-family: var(--texto-ui) !important;
    font-size: .8rem !important;
}

/* Modos de la animación. */
.estelas-repeticion { display: inline-flex; align-items: center; gap: .75rem; flex: 1 1 520px; min-width: 0; }
.estelas-repeticion[hidden] { display: none; }
.estelas-repeticion input[type="range"] { flex: 1; min-width: 100px; accent-color: #ff266e; }
/* En repetición, la barra ocupa el espacio libre: el separador sobra. */
.estelas-repeticion:not([hidden]) + .estelas-separador { display: none; }
.estelas-hora { min-width: 3.2rem; font-size: .82rem; color: var(--texto); }
.estelas-separador { flex: 1; }

.estelas-vivo {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-size: .8rem;
    color: var(--texto);
}
.estelas-vivo[hidden] { display: none; }
.estelas-vivo::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ff266e;
    box-shadow: 0 0 8px #ff266e;
    animation: estelas-latido 1.6s ease-in-out infinite;
}
.estelas-vivo-error { color: var(--aviso); }
.estelas-vivo-error::before { background: var(--aviso); box-shadow: none; animation: none; }

@keyframes estelas-latido { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) {
    .estelas-vivo::before { animation: none; }
}
/* Separación de las islas en las estelas. */
.estelas-separacion input[type="range"] { width: 110px; accent-color: var(--anillo-azul); }
.estelas-separacion output { min-width: 2.6rem; font-size: .78rem; color: var(--texto); }

/* ---------- Envíos por mail ---------- */
textarea {
    width: 100%;
    padding: .65rem .75rem;
    background: rgba(0, 0, 0, .25);
    border: 1px solid var(--borde);
    border-radius: 8px;
    color: var(--texto);
    font-size: .95rem;
    font-family: inherit;
    line-height: 1.5;
    resize: vertical;
}
textarea:focus { outline: none; border-color: var(--acento); box-shadow: 0 0 0 3px rgba(114, 225, 169, .2); }

.envio-armado {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 1.25rem;
    align-items: start;
}

.variables { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; margin-top: .75rem; }
.chip-variable {
    cursor: pointer;
    font-family: Consolas, "Courier New", monospace;
    color: var(--anillo-azul);
    border-color: rgba(124, 196, 228, .45);
    background: rgba(124, 196, 228, .1);
}
.chip-variable:hover { background: rgba(124, 196, 228, .2); }

.bloque-confirmar {
    margin: 1.5rem 0 0;
    padding: .75rem 1rem 1rem;
    border: 1px solid rgba(114, 225, 169, .35);
    border-radius: 8px;
}
.bloque-confirmar legend { padding: 0 .4rem; font-size: .8rem; color: var(--acento); font-weight: 600; }

.envio-previa-datos { margin-bottom: .75rem; font-size: .88rem; }
/* El mail es claro: la vista previa lo muestra tal cual, sobre blanco. */
.envio-previa-marco {
    display: block;
    width: 100%;
    height: 620px;
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    background: #f2f0f6;
}

.envio-progreso {
    display: flex;
    height: 12px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--superficie-alta);
}
.envio-progreso span { display: block; height: 100%; transition: width .3s; }
.envio-progreso-ok { background: var(--acento); }
.envio-progreso-error { background: var(--error); }

.envio-numeros { display: flex; flex-wrap: wrap; gap: 1.25rem; margin: .9rem 0 .4rem; font-size: .95rem; }
.envio-numeros strong { font-family: var(--display); font-size: 1.4rem; }

.envio-texto {
    margin: 0;
    padding: 1rem;
    background: rgba(0, 0, 0, .2);
    border: 1px solid var(--borde);
    border-radius: 8px;
    white-space: pre-wrap;
    font-family: inherit;
    font-size: .9rem;
    color: var(--texto-sutil);
}