/* ==================================================================
   COLORES Y MEDIDAS
   Los colores de cada tipo de tarea son los mismos en el mapa,
   el cronograma, la leyenda y el panel de detalle.
   ================================================================== */
:root {
    --marca: rgb(3, 76, 94);
    --marca-oscuro: #023744;
    --marca-suave: #2b5869;

    --llegada: #1f6fd6;
    --salida: #18964a;
    --enlace: #e8730c;
    --pasada: #8a959b;
    --alerta: #d92d20;
    --incidencia: #f5a800;  /* bus en pasarela, pushback en remoto (bus.html, pushback.html) */
    --consulta: #ffd84d;    /* hora elegida en el cronograma (amarillo del botón Ahora) */

    /* Mostradores (pax.html) */
    --propia: #18964a;      /* tarea de IB / I2, o sin compañía */
    --otra: #7b3fe4;        /* filtro "otras compañías" (cada una lleva su color: config/companias.js) */
    --libre: #e02424;       /* mostrador sin tarea a la hora elegida */

    --fondo: #f3f5f6;
    --superficie: #ffffff;
    --borde: #d9dee1;
    --texto: #1d2a30;
    --texto-suave: #5b6b73;

    --alto-carril: 30px;    /* Debe coincidir con ALTO_CARRIL en cronograma.js */
    --ancho-franja: 50px;   /* Debe coincidir con ANCHO_FRANJA en cronograma.js */
    --ancho-pkn: 64px;
    --ancho-panel: 380px;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
    margin: 0;
    display: flex;
    flex-direction: column;
    font-family: Verdana, Geneva, sans-serif;
    font-size: 14px;
    color: var(--texto);
    background: var(--fondo);
}

button {
    font: inherit;
    cursor: pointer;
}

[hidden] { display: none !important; }

body[data-vista="mapa"] .solo-cronograma,
body[data-vista="cronograma"] .solo-mapa { display: none !important; }

/* ==================================================================
   CABECERA
   ================================================================== */
.cabecera {
    flex: none;
    background: var(--marca);
    color: #fff;
    padding: 8px 16px 0;
}

.fila-principal {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.logo {
    height: 36px;
    width: auto;
}


.cabecera h1 {
    margin: 0;
    font-size: 18px;
    white-space: nowrap;
}

/* Día de las tareas cargadas, junto al título (pax.html). Amarillo si no son de hoy */
.fecha-datos {
    padding: 4px 10px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.15);
    font-size: 14px;
    font-weight: bold;
    white-space: nowrap;
}

.fecha-datos.otro-dia { background: var(--consulta); color: var(--texto); }

.pestanas {
    display: flex;
    gap: 4px;
    background: rgba(255, 255, 255, 0.12);
    padding: 3px;
    border-radius: 6px;
}

.pestanas button {
    border: 0;
    border-radius: 4px;
    padding: 6px 16px;
    background: transparent;
    color: #fff;
    font-weight: bold;
}

.pestanas button[aria-selected="true"] {
    background: #fff;
    color: var(--marca);
}

.estado-datos {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
}

#texto-estado { color: #bfe3ff; }

/* Versión de la web, a la derecha de la cabecera (el número está en js/version.js) */
.version {
    border: 0;
    padding: 0;
    background: none;
    color: #bfe3ff;
    font: inherit;
    font-size: 11px;
    white-space: nowrap;
    cursor: pointer;
}

.version-portada { position: absolute; top: 12px; right: 16px; }
#texto-estado.error { color: #ffc9c4; font-weight: bold; }

.boton-claro,
.control-hora button,
.zoom button {
    border: 0;
    border-radius: 4px;
    padding: 5px 12px;
    background: #f0f3f4;
    color: var(--marca-oscuro);
    font-weight: bold;
}

.boton-claro:hover,
.control-hora button:hover,
.zoom button:hover { background: #fff; }

/* Aviso en la cabecera cuando se usan Excel elegidos a mano */
.origen-local {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 3px 4px 3px 10px;
    border-radius: 14px;
    background: #ffd84d;
    color: #3d3000;
    font-weight: bold;
}

.origen-local button {
    border: 0;
    border-radius: 10px;
    padding: 2px 8px;
    background: rgba(0, 0, 0, 0.12);
    color: inherit;
    font-size: 12px;
}

.origen-local button:hover { background: rgba(0, 0, 0, 0.2); }

.barra-herramientas {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    padding: 8px 0;
}

.control-hora {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.12);
    padding: 5px 10px;
    border-radius: 6px;
}

.hora-actual {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 64px;
    line-height: 1.1;
}

.hora-grande {
    font: bold 22px Verdana, Geneva, sans-serif;
    font-variant-numeric: tabular-nums;
}

#input-hora {
    width: 92px;
    padding: 0 2px;
    border: 1px solid transparent;
    border-radius: 4px;
    background: transparent;
    color: #fff;
    color-scheme: dark;
    text-align: center;
    cursor: text;
}

#input-hora:hover { border-color: rgba(255, 255, 255, 0.35); }
#input-hora:focus { outline: none; border-color: #fff; background: rgba(0, 0, 0, 0.2); }
#input-hora::-webkit-calendar-picker-indicator { display: none; }

.dia {
    font-size: 11px;
    color: #bfe3ff;
}

#deslizador-hora {
    width: 200px;
    accent-color: #fff;
}

#btn-ahora.activo {
    background: #ffd84d;
    color: #3d3000;
}

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

.resultado-busqueda {
    font-size: 12px;
    color: #bfe3ff;
    white-space: nowrap;
}

#buscador {
    width: 220px;
    padding: 6px 10px;
    border: 0;
    border-radius: 4px;
    font: inherit;
}

.leyenda {
    display: flex;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 12px;
}

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

/* Etiqueta con la letra del tipo: en el mapa, la leyenda y la ficha */
.marca-tipo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 17px;
    height: 17px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: var(--color);
    color: #fff;
    font: bold 10px/1 Verdana, Geneva, sans-serif;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

.marca-tipo.tipo-llegada { --color: var(--llegada); }
.marca-tipo.tipo-salida  { --color: var(--salida); }
.marca-tipo.tipo-enlace  { --color: var(--enlace); }

.marca-solape {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    border: 2px solid #fff;
    border-radius: 3px;
    background: var(--alerta);
    color: #fff;
    font: bold 10px/1 Verdana, Geneva, sans-serif;
}

.zoom {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
}

.zoom span { min-width: 40px; text-align: center; }

/* Resumen: cifras del momento elegido */
.resumen {
    display: flex;
    gap: 22px;
    flex-wrap: wrap;
    margin: 0 -16px;
    padding: 6px 16px;
    background: var(--marca-oscuro);
    font-size: 13px;
}

.cifra strong { font-size: 16px; margin-right: 4px; }
.cifra.tipo-llegada strong { color: #8cc0ff; }
.cifra.tipo-salida strong  { color: #7fe0a6; }
.cifra.tipo-enlace strong  { color: #ffb36b; }

/* ==================================================================
   AVISOS
   ================================================================== */
.avisos {
    flex: none;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px 16px;
    max-height: 40vh;
    overflow: auto;
}

.aviso:not(details) {
    display: flex;
    align-items: center;
    gap: 12px;
}

.aviso:not(details) > span { flex: 1; }

.aviso {
    padding: 8px 12px;
    border-radius: 4px;
    background: #fff7db;
    border-left: 4px solid #e0a800;
    font-size: 13px;
}

.aviso.grave {
    background: #fdecea;
    border-left-color: var(--alerta);
}

.aviso button {
    flex: none;
    border: 1px solid var(--alerta);
    background: #fff;
    border-radius: 4px;
    padding: 3px 10px;
}

.aviso .ocultar-aviso {
    border-color: var(--borde);
    color: var(--texto-suave);
}


/* ==================================================================
   VISTA MAPA
   ================================================================== */
/* Contenido principal y panel de detalle, uno al lado del otro */
.contenido {
    flex: 1;
    min-height: 0;
    display: flex;
}

main {
    flex: 1;
    min-width: 0;
    overflow: auto;
}

.vista-mapa { padding: 12px 16px; }

.mapa {
    position: relative;
    width: 100%;
    margin: 0 auto;
    border: 1px solid var(--borde);
    border-radius: 4px;
    background: #e9eef0;
}

.mapa-fondo {
    display: block;
    width: 100%;
    height: auto;
}

.capa-mapa {
    position: absolute;
    inset: 0;
}

/* Avión en un parking con tarea en curso: el icono original, con un contorno
   del color de su tipo y una etiqueta con la letra (L, S, E) */
.avion {
    position: absolute;
    aspect-ratio: 1;
    padding: 3px;
    border: 3px solid transparent;
    border-radius: 50%;
    background: transparent;
    transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s, opacity 0.2s;
}

.avion img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter:
        drop-shadow(1px 0 0 var(--color)) drop-shadow(-1px 0 0 var(--color))
        drop-shadow(0 1px 0 var(--color)) drop-shadow(0 -1px 0 var(--color))
        drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45));
}

.avion.tipo-llegada { --color: var(--llegada); }
.avion.tipo-salida  { --color: var(--salida); }
.avion.tipo-enlace  { --color: var(--enlace); }

.avion:hover,
.avion:focus-visible { transform: scale(1.25); z-index: 5; outline: none; }

/* Anillo solo al pasar el ratón o al seleccionarlo, como en la versión original */
.avion:hover,
.avion:focus-visible,
.avion.seleccionado {
    border-color: var(--color);
    box-shadow: 0 0 8px color-mix(in srgb, var(--color) 80%, transparent);
}

.avion.seleccionado { transform: scale(1.25); z-index: 6; }
.avion.atenuado { opacity: 0.2; }
.avion.coincide { animation: latido 1.2s ease-in-out infinite; z-index: 4; }

@keyframes latido {
    50% { transform: scale(1.3); }
}

.avion .marca-tipo {
    position: absolute;
    right: -6px;
    bottom: -6px;
}

.avion .marca-solape {
    position: absolute;
    left: -6px;
    top: -6px;
    display: none;
}

.avion.con-solape .marca-solape { display: inline-flex; }

/* Incidencia (bus en pasarela, pushback en remoto): triángulo ámbar abajo a la izquierda */
.marca-incidencia {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 17px;
    height: 17px;
    border: 2px solid #fff;
    border-radius: 3px;
    background: var(--incidencia);
    color: var(--texto);
    font: bold 10px/1 Verdana, Geneva, sans-serif;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

.avion .marca-incidencia {
    position: absolute;
    left: -6px;
    bottom: -6px;
    display: none;
}

.avion.con-incidencia .marca-incidencia { display: inline-flex; }

/* Número de tareas cuando hay más de una en el mismo parking */
.contador:empty { display: none; }

.contador {
    position: absolute;
    top: -8px;
    right: -8px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border: 2px solid #fff;
    border-radius: 9px;
    background: var(--marca-oscuro);
    color: #fff;
    font-size: 10px;
    font-weight: bold;
    line-height: 14px;
    text-align: center;
}

/* Ficha que aparece al pasar el ratón por un avión */
.ficha-mapa {
    position: absolute;
    z-index: 20;
    width: 260px;
    padding: 10px 12px;
    border-radius: 6px;
    background: rgba(18, 30, 36, 0.95);
    color: #fff;
    font-size: 12px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
    pointer-events: none;
}

.ficha-cabecera {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 6px;
    font-size: 14px;
}

.ficha-cabecera span { font-size: 11px; color: #a9c3cc; }

.ficha-tarea {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 2px 8px;
    align-items: center;
    padding: 6px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.ficha-linea { grid-column: 1 / -1; color: #d3e1e6; }
.texto-alerta { color: #ff9b91; }
.texto-incidencia { color: var(--incidencia); font-weight: bold; }
.ficha-pie { margin-top: 4px; font-size: 11px; color: #a9c3cc; }

/* Mensaje cuando no hay ningún avión con tarea a esa hora */
.mapa-vacio {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 16px 22px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
    text-align: center;
}

.mapa-vacio button {
    margin-top: 4px;
    border: 0;
    border-radius: 4px;
    padding: 6px 14px;
    background: var(--marca);
    color: #fff;
    font-weight: bold;
}

/* ==================================================================
   VISTA CRONOGRAMA
   ================================================================== */
.vista-cronograma {
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px 16px;
}

.barra-filtros {
    flex: none;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 12px;
}

.titulo-filtros { color: var(--texto-suave); font-weight: bold; }

.separador {
    width: 1px;
    height: 22px;
    background: var(--borde);
}

/* Botón de filtro: relleno cuando está activo */
.filtro {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border: 1px solid var(--borde);
    border-radius: 16px;
    background: var(--superficie);
    color: var(--texto-suave);
}

.filtro:hover { border-color: var(--marca-suave); }

.filtro[aria-pressed="false"] { text-decoration: line-through; }   /* sin seleccionar: tachado */
.filtro[aria-pressed="false"] .n { text-decoration: none; display: inline-block; }

.filtro[aria-pressed="true"] {
    border-color: var(--marca);
    background: #e3eef1;
    color: var(--texto);
    font-weight: bold;
}

.filtro .punto {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid var(--color, var(--pasada));
}

.filtro[aria-pressed="true"] .punto { background: var(--color, var(--pasada)); }

.filtro.tipo-llegada { --color: var(--llegada); }
.filtro.tipo-salida  { --color: var(--salida); }
.filtro.tipo-enlace  { --color: var(--enlace); }
.filtro.filtro-solape { --color: var(--alerta); }
.filtro.filtro-solape .punto { border-radius: 2px; border-style: dashed; }

.filtro .n {
    padding: 0 6px;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.07);
    font-weight: normal;
    font-size: 11px;
}

.resultado-filtros { margin-left: auto; color: var(--texto-suave); }

.quitar-filtros {
    border: 0;
    background: none;
    color: var(--marca);
    font-weight: bold;
    text-decoration: underline;
}

.gantt-vacio {
    position: sticky;
    left: 0;
    width: 100%;
    max-width: 90vw;
    margin: 0;
    padding: 40px;
    color: var(--texto-suave);
    text-align: center;
}

.gantt-contenedor {
    flex: 1;
    min-height: 0;
    overflow: auto;
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: 4px;
}

.gantt-lienzo {
    position: relative;
    width: max-content;
    font-size: 12px;
}

.gantt-fila {
    display: flex;
    border-bottom: 1px solid #e3e7e9;
}

.gantt-fila:hover .gantt-pista { background-color: #f2f8fc; }
.gantt-fila.seleccionada .gantt-pista { background-color: #e6f1f5; }
.gantt-fila.seleccionada .columna-pkn { background: var(--marca); color: #fff; }

.columna-pkn {
    position: sticky;
    left: 0;
    z-index: 7;
    flex: 0 0 var(--ancho-pkn);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-right: 1px solid var(--borde);
    background: #eef2f5;
    color: var(--texto);
    font-size: 12px;
    font-weight: bold;
}

/* La cuadrícula de 10 minutos se dibuja con un degradado, sin celdas */
.gantt-pista {
    position: relative;
    min-height: var(--alto-carril);
    background-color: var(--superficie);
    background-image: repeating-linear-gradient(
        to right,
        transparent 0,
        transparent calc(var(--ancho-franja) - 1px),
        #e8ecee calc(var(--ancho-franja) - 1px),
        #e8ecee var(--ancho-franja)
    );
}

.gantt-cabecera {
    position: sticky;
    top: 0;
    z-index: 8;
}

.gantt-cabecera .columna-pkn {
    z-index: 9;
    height: var(--alto-carril);
    background: var(--marca);
    color: #fff;
}

.gantt-cabecera .gantt-pista {
    display: flex;
    background: none;
}

.celda-hora {
    flex: 0 0 var(--ancho-franja);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--marca-suave);
    color: #d6e6eb;
    font-size: 11px;
    border-right: 1px solid rgba(255, 255, 255, 0.15);
}

.celda-hora.en-punto {
    background: var(--marca);
    color: #fff;
    font-weight: bold;
}

/* Línea roja: la hora real. Línea discontinua: la hora elegida, si es otra */
.linea-ahora,
.linea-consulta {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 0;
    z-index: 6;
    pointer-events: none;
}

.linea-ahora    { border-left: 2px solid var(--alerta); }
.linea-consulta { border-left: 2px dashed var(--consulta); }

/* Rótulo de cada línea, en la fila de horas (que se queda fija arriba) */
.gantt-cabecera .gantt-pista { position: relative; }

.etiqueta-linea {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: bold;
    white-space: nowrap;
    pointer-events: none;
}

.etiqueta-ahora    { background: var(--alerta); color: #fff; }
.etiqueta-consulta { background: var(--consulta); color: var(--texto); }

.barra {
    position: absolute;
    height: calc(var(--alto-carril) - 6px);
    z-index: 2;
    padding: 0 6px;
    border: 0;
    border-radius: 4px;
    background: var(--color);
    color: var(--color-texto, #fff);
    font-size: 11px;
    line-height: calc(var(--alto-carril) - 6px);
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

.barra.tipo-llegada { --color: var(--llegada); }
.barra.tipo-salida  { --color: var(--salida); }
.barra.tipo-enlace  { --color: var(--enlace); }
.barra.pasada       { --color: var(--pasada); --color-texto: #fff; opacity: 0.8; }
.barra.en-curso     { font-weight: bold; box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--color); z-index: 3; }
.barra.con-solape   { outline: 2px dashed var(--alerta); outline-offset: -2px; }
.barra.con-incidencia { border-left: 6px solid var(--incidencia); }
.barra:hover        { z-index: 4; filter: brightness(1.08); }

/* ==================================================================
   PANEL DE DETALLE
   ================================================================== */
.panel-detalle {
    flex: 0 0 var(--ancho-panel);
    display: flex;
    flex-direction: column;
    background: var(--superficie);
    border-left: 1px solid var(--borde);
    box-shadow: -4px 0 16px rgba(0, 0, 0, 0.1);
}

.panel-detalle > header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 12px 16px;
    background: var(--marca-suave);
    color: #fff;
}

.panel-detalle h2 { margin: 0; font-size: 20px; }
.panel-detalle header p { margin: 2px 0 0; font-size: 12px; color: #bfe3ff; }

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

.acciones-detalle .boton-claro {
    padding: 4px 10px;
    font-size: 12px;
}

#btn-cerrar-detalle {
    border: 0;
    background: none;
    color: #fff;
    font-size: 18px;
}

.detalle-contenido {
    flex: 1;
    overflow: auto;
    padding: 12px 16px;
}

.nota { color: var(--texto-suave); font-size: 12px; margin: 0 0 10px; }

.tarjeta {
    margin-bottom: 10px;
    padding: 10px 12px;
    border: 1px solid var(--borde);
    border-left: 5px solid var(--color);
    border-radius: 4px;
}

.tarjeta.tipo-llegada { --color: var(--llegada); }
.tarjeta.tipo-salida  { --color: var(--salida); }
.tarjeta.tipo-enlace  { --color: var(--enlace); }
.tarjeta.terminada    { opacity: 0.55; }
.tarjeta.en-curso     { background: color-mix(in srgb, var(--color) 8%, #fff); }
.tarjeta.resaltada    { box-shadow: 0 0 0 2px var(--marca); }

.tarjeta header {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}

.etiqueta {
    padding: 1px 8px;
    border-radius: 10px;
    background: var(--color);
    color: var(--color-texto, #fff);
    font-size: 11px;
    font-weight: bold;
}

.etiqueta.tipo-llegada { --color: var(--llegada); }
.etiqueta.tipo-salida  { --color: var(--salida); }
.etiqueta.tipo-enlace  { --color: var(--enlace); }

.estado-tarea {
    margin-left: auto;
    font-size: 11px;
    color: var(--texto-suave);
}

.en-curso .estado-tarea { color: var(--texto); font-weight: bold; }

.tarjeta dl {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 3px 10px;
    margin: 0;
    font-size: 12px;
}

.tarjeta dt { color: var(--texto-suave); }
.tarjeta dd { margin: 0; }

.alerta {
    margin: 6px 0 0;
    color: var(--alerta);
    font-size: 12px;
    font-weight: bold;
}

.ir-hora {
    margin-top: 8px;
    padding: 3px 10px;
    border: 1px solid var(--borde);
    border-radius: 4px;
    background: var(--superficie);
    color: var(--marca);
    font-size: 11px;
    font-weight: bold;
}

.ir-hora:hover { border-color: var(--marca); }

/* ==================================================================
   VENTANA DE CARGA DE EXCEL
   ================================================================== */
.dialogo-carga {
    width: min(720px, calc(100vw - 32px));
    padding: 0;
    border: 0;
    border-radius: 10px;
    color: var(--texto);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
}

.dialogo-carga::backdrop { background: rgba(10, 25, 30, 0.55); }

.dialogo-carga > header {
    padding: 18px 22px 6px;
}

.dialogo-carga h2 { margin: 0 0 6px; font-size: 18px; color: var(--marca); }
.dialogo-carga > header p { margin: 0; font-size: 13px; color: var(--texto-suave); line-height: 1.5; }

.zona-carga {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin: 14px 22px 0;
}

@media (max-width: 560px) {
    .zona-carga { grid-template-columns: 1fr; }
}

.casilla-archivo {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 170px;
    padding: 14px;
    border: 2px dashed var(--borde);
    border-radius: 8px;
    background: #fafbfc;
    transition: border-color 0.15s, background 0.15s;
}

.casilla-cabecera {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.casilla-archivo h3 { margin: 0; font-size: 15px; }
.casilla-archivo .descripcion { margin: 0; font-size: 12px; color: var(--texto-suave); }

.paso-listo:empty { display: none; }

.paso-listo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--salida);
    color: #fff;
    font-size: 12px;
    font-weight: bold;
}

.estado-archivo {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 4px 0 0;
    font-size: 12px;
    word-break: break-word;
}

.estado-archivo span { color: var(--texto-suave); }

.casilla-archivo.lista { border-style: solid; border-color: var(--salida); background: #f1faf4; }
.casilla-archivo.lista .estado-archivo strong { color: #11743a; }
.casilla-archivo.con-error { border-style: solid; border-color: var(--alerta); background: #fdf1f0; }
.casilla-archivo.con-error .estado-archivo strong { color: var(--alerta); }
.casilla-archivo.vacia .estado-archivo strong { color: var(--texto-suave); }
.casilla-archivo.leyendo { opacity: 0.6; }
.casilla-archivo.arrastrando { border-color: var(--marca); background: #e6f1f5; }

.casilla-botones {
    display: flex;
    gap: 8px;
}

.casilla-botones button,
.dialogo-carga footer button {
    padding: 6px 14px;
    border: 1px solid var(--borde);
    border-radius: 5px;
    background: #fff;
    color: var(--texto);
    font-weight: bold;
}

.casilla-botones button:hover,
.dialogo-carga footer button:hover { border-color: var(--marca-suave); }

.dialogo-carga button.primario {
    border-color: var(--marca);
    background: var(--marca);
    color: #fff;
}

.dialogo-carga button.primario:hover { background: var(--marca-oscuro); }

.dialogo-carga button:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

/* Al arrastrar archivos sobre la ventana */
.pista-arrastre {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    margin: 0;
    border-radius: 8px;
    background: rgba(3, 76, 94, 0.08);
    color: var(--marca);
    font-weight: bold;
    pointer-events: none;
}

.zona-carga.arrastrando:not(:has(.casilla-archivo.arrastrando)) .pista-arrastre { display: flex; }

.elegir-ambos {
    margin: 8px 22px 0;
    text-align: center;
}

.boton-enlace-oscuro {
    border: 0;
    background: none;
    padding: 0;
    color: var(--marca);
    font-size: 12px;
    text-decoration: underline;
}

.mensajes-carga { margin: 10px 22px 0; }

.mensaje-carga {
    margin: 0 0 6px;
    padding: 8px 10px;
    border-radius: 4px;
    font-size: 12px;
}

.mensaje-carga.info  { background: #e6f1f5; }
.mensaje-carga.aviso { background: #fff7db; }
.mensaje-carga.error { background: #fdecea; color: #8c1d14; }

.dialogo-carga footer {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
    padding: 14px 22px;
    border-top: 1px solid var(--borde);
    background: #f7f9fa;
}

.ayuda-aplicar {
    flex: 1;
    font-size: 12px;
    color: var(--texto-suave);
}

/* ==================================================================
   MOSTRADORES (pax.html)
   Cuadros encima de los de img/mapafactu.png y colores por compañía
   ================================================================== */
.tipo-propia { --color: var(--propia); }
.tipo-otra   { --color: var(--otra); }

.cifra.tipo-propia strong { color: #7fe0a6; }
.cifra.tipo-otra strong   { color: #c9b0ff; }

/* Cuadro de cada mostrador. 1 px de más por cada lado para tapar el de la imagen */
.cuadro-mostrador {
    position: absolute;
    box-sizing: content-box;
    margin: -1px;
    padding: 1px;
    border: 0;
    border-radius: 3px;
    background: var(--color);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25);
    transition: transform 0.15s, opacity 0.2s, box-shadow 0.15s;
}

.cuadro-mostrador.libre { --color: var(--libre); }

/* Compañía no registrada en config/companias.js: rayas, para que no se confunda con ninguna */
.cuadro-mostrador.cia-sin-registrar,
.muestra-mostrador.cia-sin-registrar,
.barra.cia-sin-registrar,
.etiqueta.cia-sin-registrar {
    background-image: repeating-linear-gradient(45deg, transparent 0 4px, rgba(255, 255, 255, 0.25) 4px 7px);
}

.barra.pasada.cia-sin-registrar { background-image: none; }

/* Hay compañías de color rojo: el borde de "coincide" va oscuro para que se vea */
.pagina-pax .barra.con-solape { outline-color: var(--texto); }

/* Ocupado: borde blanco, para no confundir las compañías rojas con "libre" */
.cuadro-mostrador.ocupado { box-shadow: inset 0 0 0 2px #fff, 0 0 0 1px rgba(0, 0, 0, 0.35); }

.cuadro-mostrador:hover,
.cuadro-mostrador:focus-visible,
.cuadro-mostrador.seleccionado {
    z-index: 5;
    outline: none;
    transform: scale(1.35);
    box-shadow: 0 0 0 2px #fff, 0 0 8px 2px color-mix(in srgb, var(--color) 80%, transparent);
}

.cuadro-mostrador.atenuado { opacity: 0.2; }
.cuadro-mostrador.coincide { animation: latido 1.2s ease-in-out infinite; z-index: 4; }

.cuadro-mostrador .marca-solape {
    position: absolute;
    left: -7px;
    top: -7px;
    display: none;
    transform: scale(0.8);
}

.cuadro-mostrador.con-solape .marca-solape { display: inline-flex; }

/* Muestra de color en la leyenda */
.muestra-mostrador {
    width: 14px;
    height: 14px;
    border: 2px solid #fff;
    border-radius: 3px;
    background: var(--color);
}

.muestra-mostrador.libre { --color: var(--libre); }
.muestra-varias { background: conic-gradient(#c5a572 0 25%, #075aaa 0 50%, #ff7a00 0 75%, #7c3aed 0); }
.filtro.tipo-otra[aria-pressed="true"] .punto { background: conic-gradient(#c5a572 0 25%, #075aaa 0 50%, #ff7a00 0 75%, #7c3aed 0); }

/* Leyenda de compañías bajo el plano */
.leyenda-companias {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 14px;
    margin-top: 10px;
    font-size: 12px;
}

.leyenda-companias:empty { display: none; }
.titulo-leyenda { color: var(--texto-suave); font-weight: bold; }

.item-leyenda {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.item-leyenda .muestra-mostrador { border-color: var(--borde); }
.item-leyenda .n {
    padding: 0 6px;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.07);
    font-size: 11px;
}

/* Ventana de carga con un solo Excel */
.zona-carga.una-casilla { grid-template-columns: 1fr; }

/* ==================================================================
   HIPÓDROMOS Y PUESTOS FIJOS (hyc.html)
   Cuadros encima de los de img/muelles.png: verde con tarea, rojo falta para
   el mínimo, blanco vacío. "+N" cuando no caben.
   ================================================================== */
.tipo-hipodromo,
.tipo-fijo { --color: var(--propia); }

/* Nombres de posición largos (TAILTOTAIL, CINTA_CÍAS...): columna del cronograma al doble */
.pagina-hyc { --ancho-pkn: 128px; }

.cifra-falta strong { color: #ff9b91; }
.cifra-incidencia strong { color: var(--incidencia); }

.posicion-hyc {
    position: absolute;
    padding: 0;
    border: 0;
    background: none;
    transition: transform 0.15s, opacity 0.2s;
}

.posicion-hyc:hover,
.posicion-hyc:focus-visible,
.posicion-hyc.seleccionado {
    z-index: 5;
    outline: 3px solid var(--marca);
    outline-offset: 3px;
    border-radius: 2px;
}

.posicion-hyc.atenuado { opacity: 0.25; }
.posicion-hyc.coincide { animation: latido 1.2s ease-in-out infinite; z-index: 4; }

/* 1 px de más por cada lado para tapar el cuadro de la imagen */
.cuadro-hyc {
    position: absolute;
    box-sizing: content-box;
    margin: -1px;
    padding: 1px;
    background: var(--color);
    box-shadow: inset 0 0 0 1px #000;
}

.cuadro-hyc.vacio,
.muestra-hyc.vacio    { --color: #fff; }
.cuadro-hyc.cubierto,
.muestra-hyc.cubierto { --color: #3fb950; }
.cuadro-hyc.falta,
.muestra-hyc.falta    { --color: var(--libre); }
.cuadro-hyc.sin-agente,
.muestra-hyc.sin-agente { --color: #f6b8b2; }   /* rojo claro: tarea prevista pero sin agente (el verde sería «hay alguien») */

.muestra-hyc {
    width: 14px;
    height: 14px;
    border: 1px solid #000;
    background: var(--color);
}

/* "+N": personas con tarea (verde) o que faltan (rojo) que no caben en los cuadros */
.extras-hyc {
    position: absolute;
    display: flex;
    gap: 2px;
    pointer-events: none;
}

.extras-hyc.debajo  { top: 100%; left: 50%; transform: translate(-50%, 3px); flex-direction: column; align-items: center; }
.extras-hyc.derecha { left: 100%; top: 0; transform: translate(-55%, -60%); z-index: 1; }   /* sobre la esquina: a la derecha hay otra columna */

.extra-hyc {
    padding: 0 4px;
    border-radius: 7px;
    color: #fff;
    font: bold 10px/14px Verdana, Geneva, sans-serif;
    white-space: nowrap;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

.extra-hyc:empty { display: none; }
.extra-hyc.verde { background: #1f8f3a; }
.extra-hyc.rojo  { background: var(--libre); }

/* ==================================================================
   PORTADA (index.html): elegir entre CIC y PAX
   ================================================================== */
body.portada {
    align-items: center;
    justify-content: center;
    min-height: 100%;
    height: auto;
    padding: 24px 16px;
    background: var(--marca);
    color: #fff;
}

.portada-contenido {
    width: min(1000px, 100%);
    text-align: center;
}

.portada-logo { height: 56px; width: auto; }
.portada h1 { margin: 16px 0 4px; font-size: 26px; }
.portada-pregunta { margin: 0 0 24px; color: #bfe3ff; font-size: 16px; }

.portada-opciones {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));   /* 4 por fila */
    gap: 16px;
}

.portada-opcion {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 22px 20px;
    border-radius: 10px;
    background: var(--superficie);
    color: var(--texto);
    text-align: left;
    text-decoration: none;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
    transition: transform 0.15s, box-shadow 0.15s;
}

.portada-opcion:hover,
.portada-opcion:focus-visible {
    outline: none;
    transform: translateY(-2px);
    box-shadow: 0 0 0 3px #ffd84d, 0 12px 28px rgba(0, 0, 0, 0.3);
}

.portada-opcion strong { font-size: 22px; color: var(--marca); }
.portada-opcion span { font-size: 13px; line-height: 1.5; }
.portada-opcion .portada-necesita { color: var(--texto-suave); font-size: 12px; }

.portada-nota { margin: 24px 0 0; font-size: 12px; color: #bfe3ff; }

/* ==================================================================
   PANTALLAS PEQUEÑAS
   ≤ 900 px (tablet): el panel de detalle se abre por encima, a la derecha.
   ≤ 640 px (móvil): cabecera compacta, filas deslizables y panel desde abajo.
   ================================================================== */
@media (max-width: 900px) {
    .panel-detalle {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        z-index: 40;
        width: min(var(--ancho-panel), 100vw);
        box-shadow: -8px 0 30px rgba(0, 0, 0, 0.3);
    }
}

@media (max-width: 640px) {
    :root { --ancho-pkn: 48px; }
    .pagina-hyc { --ancho-pkn: 96px; }

    .cabecera { padding: 6px 12px 0; }

    .fila-principal { gap: 8px 12px; }
    .logo { height: 28px; }
    .cabecera h1 { display: none; }
    .pestanas { flex: 1; }
    .pestanas button { flex: 1; padding: 6px 8px; font-size: 13px; white-space: nowrap; }

    /* Estado de los datos y botón de carga: fila propia, a todo el ancho */
    .estado-datos {
        flex: 1 1 100%;
        flex-wrap: wrap;
        justify-content: space-between;
        margin-left: 0;
        gap: 6px 8px;
        font-size: 12px;
    }

    .barra-herramientas { gap: 8px; padding: 6px 0; }

    .control-hora { flex: 1 1 100%; min-width: 0; gap: 6px; padding: 4px 8px; }
    .control-hora button { padding: 6px 8px; }
    #deslizador-hora { flex: 1; width: auto; min-width: 0; }
    #input-hora { width: 80px; }
    .hora-grande { font-size: 20px; }

    .busqueda { flex: 1; min-width: 0; }
    #buscador { flex: 1; width: auto; min-width: 0; font-size: 16px; }   /* 16 px: iOS no amplía al escribir */

    .leyenda { display: none; }

    /* Filas que no caben: se deslizan en horizontal en lugar de ocupar varias líneas */
    .resumen,
    .barra-filtros {
        flex-wrap: nowrap;
        overflow-x: auto;
        white-space: nowrap;
        scrollbar-width: none;
    }

    .resumen { gap: 14px; margin: 0 -12px; padding: 6px 12px; font-size: 12px; }
    .resumen > *,
    .barra-filtros > * { flex: none; }
    .resultado-filtros { margin-left: 0; }

    .avisos { padding: 6px 12px; max-height: 30vh; }
    .aviso:not(details) { flex-wrap: wrap; gap: 6px 12px; }

    .vista-mapa { padding: 8px; }
    .vista-cronograma { padding: 8px; gap: 8px; }

    /* Panel de detalle: hoja que sube desde abajo */
    .panel-detalle {
        top: auto;
        left: 0;
        width: 100%;
        max-height: 75dvh;
        border-left: 0;
        border-radius: 12px 12px 0 0;
        overflow: hidden;
        box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.3);
    }

    .panel-detalle > header { padding: 10px 12px; }
    .panel-detalle h2 { font-size: 18px; }
    .detalle-contenido { padding: 10px 12px; }

    /* Ventana de carga: cabe entera y se desplaza por dentro */
    .dialogo-carga {
        width: calc(100vw - 16px);
        max-height: calc(100dvh - 16px);
    }

    .dialogo-carga > header { padding: 14px 14px 4px; }
    .zona-carga { margin: 10px 14px 0; gap: 10px; }
    .casilla-archivo { min-height: 0; padding: 12px; }
    .elegir-ambos,
    .mensajes-carga { margin-left: 14px; margin-right: 14px; }

    .dialogo-carga footer {
        position: sticky;
        bottom: 0;
        flex-wrap: wrap;
        padding: 12px 14px;
    }

    .ayuda-aplicar { flex: 1 1 100%; }
    .dialogo-carga footer button { flex: 1; }
}

/* ==================================================================
   TAREAS SIN ASIGNAR (sin agente todavía): sus colores de siempre, atenuados
   ================================================================== */
.barra.sin-asignar { opacity: 0.4; }
/* En HYC el verde es «hay alguien»: una tarea sin agente va en rojo atenuado */
.pagina-hyc .barra.sin-asignar:not(.pasada) { --color: var(--libre); }
.barra.sin-asignar:hover, .barra.sin-asignar:focus-visible { opacity: 0.75; }
.avion.sin-asignar:not(.coincide):not(.seleccionado) { opacity: 0.4; }
.cuadro-mostrador.ocupado.sin-asignar { opacity: 0.45; }
.leyenda-sin-asignar .marca-tipo { opacity: 0.4; }
.cifra-sin-asignar strong { opacity: 0.6; }

/* ==================================================================
   HUEVO DE PASCUA (js/huevo.js): panel de paletas al pulsar la versión.
   Va aquí y no en el .js porque Vercel no deja meter estilos desde el código.
   --ancho-paleta y --paso los pone huevo.js en el propio panel.
   ================================================================== */
.huevo-panel {
    position: absolute; z-index: 9999; display: flex; gap: 2px; padding: 3px 5px;
    background: #0d0d0d; border-radius: 4px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
    opacity: 0; transition: opacity 0.35s; pointer-events: none;
}
.huevo-panel.centrado { transform: translateY(-50%); }
.huevo-panel.visible { opacity: 1; }
.huevo-paleta {
    position: relative; width: var(--ancho-paleta); height: calc(var(--ancho-paleta) * 1.5);
    display: flex; align-items: center; justify-content: center; overflow: hidden;
    background: linear-gradient(#2b2b2b 50%, #262626 50%); border-radius: 2px;
    color: #ffd23f; font: bold calc(var(--ancho-paleta) * 0.9) / 1 "Courier New", monospace;
}
.huevo-paleta::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgba(0, 0, 0, 0.35); }
.huevo-paleta::before {
    content: ""; position: absolute; left: 0; right: 0; top: 0; height: 50%;
    background: #333; transform-origin: bottom; transform: scaleY(0);
}
.huevo-paleta.flip::before { animation: huevo-paleta-cae var(--paso) linear; }
@keyframes huevo-paleta-cae { from { transform: scaleY(1); } to { transform: scaleY(0); } }