/* Imaginexos · Migraciones
   El mismo azul marino del RIS-PACS, para que se lea como la misma casa, y un
   azul petróleo propio para lo que está en tránsito: es lo único que esta
   aplicación hace que el RIS no. Los colores de estado (bien, atención, mal)
   van aparte y no se usan como adorno. */
:root {
    --marca: #0b2e59;
    --marca-hover: #0a2649;
    --transito: #16758f;
    --transito-suave: #e6f2f5;
    --tinta: #0f2742;
    --suave: #5b6b7f;
    --fondo: #f3f6fa;
    --superficie: #ffffff;
    --borde: #e1e7ef;
    --borde-fuerte: #cbd5e1;
    --bien: #1a7f4b;
    --bien-suave: #e7f5ed;
    --atencion: #a86a12;
    --atencion-suave: #fdf3e3;
    --mal: #b83a2e;
    --mal-suave: #fbeceb;
    --radio: 10px;
}

body { background: var(--fondo); color: var(--tinta); font-size: 14px; }
.texto-suave { color: var(--suave); }
.cifra { font-variant-numeric: tabular-nums; }
.mono { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: .78rem; word-break: break-all; }

.btn-marca { background: var(--marca); border-color: var(--marca); color: #fff; font-weight: 600; }
.btn-marca:hover, .btn-marca:focus { background: var(--marca-hover); border-color: var(--marca-hover); color: #fff; }
.btn-transito { background: var(--transito); border-color: var(--transito); color: #fff; font-weight: 600; }
.btn-transito:hover { background: #12627a; border-color: #12627a; color: #fff; }
:focus-visible { outline: 2px solid var(--transito); outline-offset: 2px; }

.tarjeta { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); }

/* ---------- Ingreso ---------- */
.ingreso { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.ingreso-caja { width: 100%; max-width: 400px; }
.marca { display: flex; align-items: center; gap: 12px; }
.marca-icono { width: 42px; height: 42px; border-radius: 10px; background: var(--marca); color: #fff; display: grid; place-items: center; font-size: 18px; }
.marca-nombre { font-weight: 800; font-size: 1.15rem; letter-spacing: -.01em; line-height: 1.1; }
.marca-producto { color: var(--suave); font-size: .8rem; letter-spacing: .04em; text-transform: uppercase; }

/* ---------- Armazón ---------- */
.armazon { display: grid; grid-template-columns: 232px 1fr; min-height: 100vh; }
.lateral { background: var(--marca); color: #dbe6f3; padding: 20px 14px; display: flex; flex-direction: column; gap: 4px; position: sticky; top: 0; height: 100vh; }
.lateral .marca { padding: 0 6px 18px; }
.lateral .marca-icono { background: #fff; color: var(--marca); }
.lateral .marca-nombre { color: #fff; }
.lateral .marca-producto { color: #9fb6cf; }
.lateral a { color: #dbe6f3; text-decoration: none; padding: 9px 12px; border-radius: 8px; display: flex; align-items: center; gap: 10px; font-weight: 500; }
.lateral a i { width: 18px; text-align: center; opacity: .8; }
.lateral a:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.lateral a.activo { background: rgba(255, 255, 255, .14); color: #fff; }
.lateral .pie { margin-top: auto; font-size: .78rem; color: #9fb6cf; padding: 10px 6px 0; border-top: 1px solid rgba(255, 255, 255, .12); }

.principal { padding: 22px 28px 48px; min-width: 0; }
.barra { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.barra h1 { font-size: 1.3rem; font-weight: 700; margin: 0; letter-spacing: -.01em; }

/* El indicador de disco: lo primero que hay que mirar antes de traer. */
.disco { display: flex; align-items: center; gap: 10px; background: var(--superficie); border: 1px solid var(--borde); border-radius: 999px; padding: 5px 14px 5px 10px; font-size: .8rem; white-space: nowrap; }
.disco-barra { width: 90px; height: 6px; border-radius: 3px; background: var(--borde); overflow: hidden; }
.disco-barra span { display: block; height: 100%; background: var(--transito); }
.disco.poco .disco-barra span { background: var(--mal); }

/* ---------- Estados ---------- */
.chip { display: inline-flex; align-items: center; gap: 5px; font-size: .72rem; font-weight: 700; padding: 2px 9px; border-radius: 999px; white-space: nowrap; letter-spacing: .01em; }
.chip-entrada { background: var(--transito-suave); color: var(--transito); }
.chip-salida { background: #eef0fb; color: #3b4aa8; }
.chip-terceros { background: #f3eefb; color: #6a3fa3; }
.chip-bien { background: var(--bien-suave); color: var(--bien); }
.chip-atencion { background: var(--atencion-suave); color: var(--atencion); }
.chip-mal { background: var(--mal-suave); color: var(--mal); }
.chip-neutro { background: #eef2f6; color: var(--suave); }

/* ---------- Proyectos ---------- */
.lista-proyectos { display: grid; gap: 10px; }
.fila-proyecto { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1.6fr) 150px 110px; gap: 18px; align-items: center; padding: 14px 18px; cursor: pointer; }
.fila-proyecto:hover { border-color: var(--borde-fuerte); box-shadow: 0 2px 10px rgba(15, 39, 66, .05); }
.fila-proyecto .nombre { font-weight: 700; }
.ruta { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: .85rem; }
.ruta span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ruta i { color: var(--transito); flex: none; }
.avance { height: 6px; border-radius: 3px; background: var(--borde); overflow: hidden; }
.avance span { display: block; height: 100%; background: var(--bien); }

/* ---------- Ficha del proyecto ---------- */
/* El recorrido de la migración, dibujado: origen, paso y destino. Es lo que
   explica en un vistazo qué hace este proyecto. */
.recorrido { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: stretch; gap: 0; margin-bottom: 18px; }
.nodo { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: 12px 16px; min-width: 0; }
.nodo-etiqueta { font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--suave); }
.nodo-nombre { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nodo-detalle { font-size: .8rem; color: var(--suave); }
.nodo.paso { border-color: var(--transito); background: var(--transito-suave); }
.nodo.paso .nodo-etiqueta { color: var(--transito); }
.flecha { display: grid; place-items: center; padding: 0 10px; color: var(--transito); font-size: 1.1rem; }

.cifras { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; margin-bottom: 18px; }
.cifra-caja { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: 10px 14px; }
.cifra-caja .valor { font-size: 1.35rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.2; }
.cifra-caja .etiqueta { font-size: .72rem; color: var(--suave); }
.cifra-caja.mal .valor { color: var(--mal); }
.cifra-caja.bien .valor { color: var(--bien); }

/* Las etapas van numeradas porque son una secuencia de verdad: en ese orden
   se hace una migración, y hacerlo en otro orden produce errores concretos. */
.etapas { display: flex; gap: 4px; border-bottom: 1px solid var(--borde); margin-bottom: 18px; overflow-x: auto; }
.etapa { border: 0; background: none; padding: 10px 14px; color: var(--suave); font-weight: 600; display: flex; align-items: center; gap: 8px; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.etapa:hover { color: var(--tinta); }
.etapa.activa { color: var(--marca); border-bottom-color: var(--marca); }
.etapa .num { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: .72rem; background: #e8edf3; color: var(--suave); }
.etapa.hecha .num { background: var(--bien); color: #fff; }
.etapa.en-curso .num { background: var(--transito); color: #fff; }
.etapa.alerta .num { background: var(--mal); color: #fff; }
.etapa.activa .num { box-shadow: 0 0 0 2px var(--superficie), 0 0 0 4px var(--marca); }

.panel { display: none; }
.panel.visible { display: block; }
.explica { background: var(--superficie); border: 1px solid var(--borde); border-left: 3px solid var(--transito); border-radius: 8px; padding: 12px 16px; margin-bottom: 16px; color: var(--tinta); }
.explica p:last-child { margin-bottom: 0; }

.tabla-caja { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); overflow: auto; }
.tabla-caja table { margin: 0; }
.tabla-caja th { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--suave); font-weight: 700; background: #f8fafc; white-space: nowrap; position: sticky; top: 0; z-index: 1; }
.tabla-caja td { vertical-align: middle; }

/* Barras del medidor por año */
.medicion { display: grid; gap: 6px; }
.medicion-fila { display: grid; grid-template-columns: 52px 1fr 90px; align-items: center; gap: 10px; font-size: .82rem; }
.medicion-barra { height: 16px; background: var(--borde); border-radius: 4px; overflow: hidden; }
.medicion-barra span { display: block; height: 100%; background: var(--transito); }

.progreso-fino { height: 6px; background: var(--borde); border-radius: 3px; overflow: hidden; }
.progreso-fino span { display: block; height: 100%; background: var(--transito); transition: width .4s ease; }

.vacio { text-align: center; padding: 40px 20px; color: var(--suave); }
.vacio i { font-size: 2rem; opacity: .35; display: block; margin-bottom: 10px; }

@media (max-width: 1100px) {
    .cifras { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .fila-proyecto { grid-template-columns: 1fr; gap: 8px; }
}
@media (max-width: 800px) {
    .armazon { grid-template-columns: 1fr; }
    .lateral { position: static; height: auto; flex-direction: row; flex-wrap: wrap; }
    .lateral .pie { display: none; }
    .recorrido { grid-template-columns: 1fr; }
    .flecha { transform: rotate(90deg); padding: 4px; }
    .principal { padding: 16px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

.min-w-0 { min-width: 0; }

/* La tarjeta de sentido elegida. El gris que pone Bootstrap por omisión se lee
   como deshabilitada, justo lo contrario de «esta es la elegida». */
#opciones-sentido .btn-check + .btn { background: var(--superficie); color: var(--tinta); border-color: var(--borde-fuerte); }
#opciones-sentido .btn-check:checked + .btn { background: var(--transito-suave); border-color: var(--transito); box-shadow: 0 0 0 1px var(--transito); color: var(--tinta); }
#opciones-sentido .btn-check:focus-visible + .btn { outline: 2px solid var(--transito); outline-offset: 2px; }