:root {
    --azul: #1f4e79;
    --azul-rgb: 31, 78, 121;
    --azul-claro: #eaf1f8;
    --rojo: #c0392b;
    --amarillo: #d4a017;
    --verde: #1e8449;
    --gris: #f4f5f7;
    --texto: #222;
    --texto-secundario: #595959;
    --borde: #dcdfe3;
    --tarjeta: #ffffff;
    --hover-fila: #fafcff;
    --hover-fila-fuerte: #f0f4f8;
    --pasos-fondo: #e2e6ea;
    --boton-secundario: #6b7785;
    --exito-texto: #1e6b34;
    --exito-fondo: #dff5e1;
    --exito-borde: #b7e3c1;
    --error-texto: #9c2b1f;
    --error-fondo: #fce4e2;
    --error-borde: #f3b8b2;
    --semaforo-rojo-fondo: #fdf1f0;
    --semaforo-amarillo-fondo: #fdf7e6;
    --semaforo-verde-fondo: #eaf7ee;
    --serie-1: #2a78d6;
    --serie-2: #eb6834;
    --serie-3: #1baf7a;
    --serie-4: #eda100;
    --serie-5: #e87ba4;
    --serie-6: #008300;
    --serie-7: #4a3aa7;
    --serie-8: #e34948;
    --grafico-grid: #e1e0d9;
    --grafico-acento: #2c5a94;
}

[data-theme="dark"] {
    --azul: #6fa8dc;
    --azul-rgb: 111, 168, 220;
    --azul-claro: #1c2b3a;
    --rojo: #e08076;
    --amarillo: #e2bb5a;
    --verde: #6fbf87;
    --gris: #14171a;
    --texto: #e4e6e8;
    --texto-secundario: #a5abb2;
    --borde: #3a3f45;
    --tarjeta: #1e2226;
    --hover-fila: #262b30;
    --hover-fila-fuerte: #2a3036;
    --pasos-fondo: #2a2f34;
    --boton-secundario: #545b63;
    --exito-texto: #8fd6a3;
    --exito-fondo: #1c3324;
    --exito-borde: #2f5138;
    --error-texto: #f0a89f;
    --error-fondo: #3a2220;
    --error-borde: #5a332e;
    --semaforo-rojo-fondo: #33201e;
    --semaforo-amarillo-fondo: #332c1a;
    --semaforo-verde-fondo: #1c3324;
    --serie-1: #3987e5;
    --serie-2: #d95926;
    --serie-3: #199e70;
    --serie-4: #c98500;
    --serie-5: #d55181;
    --serie-6: #008300;
    --serie-7: #9085e9;
    --serie-8: #e66767;
    --grafico-grid: #2c2c2a;
    --grafico-acento: #5a91d4;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --azul: #6fa8dc;
    --azul-rgb: 111, 168, 220;
        --azul-claro: #1c2b3a;
        --rojo: #e08076;
        --amarillo: #e2bb5a;
        --verde: #6fbf87;
        --gris: #14171a;
        --texto: #e4e6e8;
        --texto-secundario: #a5abb2;
        --borde: #3a3f45;
        --tarjeta: #1e2226;
        --hover-fila: #262b30;
        --hover-fila-fuerte: #2a3036;
        --pasos-fondo: #2a2f34;
        --boton-secundario: #545b63;
        --exito-texto: #8fd6a3;
        --exito-fondo: #1c3324;
        --exito-borde: #2f5138;
        --error-texto: #f0a89f;
        --error-fondo: #3a2220;
        --error-borde: #5a332e;
        --semaforo-rojo-fondo: #33201e;
        --semaforo-amarillo-fondo: #332c1a;
        --semaforo-verde-fondo: #1c3324;
        --serie-1: #3987e5;
        --serie-2: #d95926;
        --serie-3: #199e70;
        --serie-4: #c98500;
        --serie-5: #d55181;
        --serie-6: #008300;
        --serie-7: #9085e9;
        --serie-8: #e66767;
        --grafico-grid: #2c2c2a;
        --grafico-acento: #5a91d4;
    }
}

* { box-sizing: border-box; }

body {
    font-family: "Segoe UI", Arial, sans-serif;
    margin: 0;
    background: var(--gris);
    color: var(--texto);
}

a { color: var(--azul); }
a:visited { color: var(--azul); }

/* Buscador global de la barra superior (static/buscador.js) */
.buscador-global { position: relative; flex: 1; max-width: 26rem; min-width: 12rem; margin: 0; }
.buscador-global input[type="search"] { width: 100%; box-sizing: border-box; padding: 0.4rem 0.6rem; border-radius: 6px; }
.buscador-sugerencias {
    position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 1000;
    background: var(--tarjeta); color: var(--texto);
    border: 1px solid var(--borde); border-radius: 6px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.18);
    max-height: 70vh; overflow-y: auto; min-width: 22rem;
}
.sugerencia-grupo {
    font-size: 0.75rem; font-weight: bold; text-transform: uppercase;
    color: var(--texto-secundario); padding: 0.45rem 0.7rem 0.2rem;
}
a.sugerencia, a.sugerencia:visited {
    display: block; padding: 0.4rem 0.7rem; color: var(--texto); text-decoration: none;
    font-size: 0.9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
a.sugerencia:hover, a.sugerencia.activa { background: var(--azul-claro); }
.sugerencia-extra { color: var(--texto-secundario); font-size: 0.8rem; }
a.sugerencia-todos, a.sugerencia-todos:visited { border-top: 1px solid var(--borde); color: var(--azul); }
.sugerencia-vacia { padding: 0.6rem 0.7rem; color: var(--texto-secundario); font-size: 0.9rem; }

/* Buscador rápido arriba de cada tabla larga (static/buscador.js) */
.buscador-tabla { display: flex; align-items: center; gap: 0.7rem; margin: 0.4rem 0 0.6rem; }
.buscador-tabla input[type="search"] { width: 100%; max-width: 30rem; padding: 0.4rem 0.6rem; }
.buscador-tabla-contador { color: var(--texto-secundario); font-size: 0.85rem; }

/* ===== Menú lateral izquierdo ===== */
:root { --menu-fondo: #0a2342; --menu-fondo-2: #0e2f57; --menu-acento: #3d8bfd; --menu-ancho: 230px; --menu-colapsado: 46px; }
[data-theme="dark"] { --menu-fondo: #08182c; --menu-fondo-2: #0c2240; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) { --menu-fondo: #08182c; --menu-fondo-2: #0c2240; }
}

/* Oculto como franja delgada; se despliega encima del contenido al pasar el mouse
   (o al enfocar con teclado, p. ej. escribiendo en el buscador). */
.sidebar {
    position: fixed; top: 0; left: 0; bottom: 0; width: var(--menu-colapsado); z-index: 900;
    overflow: hidden;
    background: linear-gradient(180deg, var(--menu-fondo-2) 0%, var(--menu-fondo) 100%);
    color: white;
    box-shadow: 2px 0 12px rgba(0, 0, 0, 0.18);
    transition: width 0.2s ease 0.25s; /* pequeño retraso al cerrar para que no se cierre por un roce */
}
.sidebar:hover, .sidebar:focus-within { width: var(--menu-ancho); transition-delay: 0s; box-shadow: 4px 0 24px rgba(0, 0, 0, 0.3); }
.sidebar-pestana {
    position: absolute; top: 1rem; left: 0; width: var(--menu-colapsado);
    text-align: center; font-size: 1.4rem; opacity: 0.85;
    transition: opacity 0.15s ease 0.25s;
}
.sidebar:hover .sidebar-pestana, .sidebar:focus-within .sidebar-pestana { opacity: 0; transition-delay: 0s; }
.sidebar-contenido {
    width: var(--menu-ancho); height: 100%; box-sizing: border-box;
    display: flex; flex-direction: column; gap: 0.9rem;
    padding: 1.1rem 0.9rem;
    opacity: 0; visibility: hidden;
    transition: opacity 0.15s ease 0.25s, visibility 0s linear 0.4s;
}
.sidebar:hover .sidebar-contenido, .sidebar:focus-within .sidebar-contenido { opacity: 1; visibility: visible; transition: opacity 0.2s ease 0.05s, visibility 0s; }
.logo-sidebar { display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; margin: 0 0.3rem; font-size: 1.05rem; font-weight: 600; }
.logo-sidebar img { width: 100%; height: auto; background: white; border-radius: 8px; padding: 6px 10px; }
.sidebar .buscador-global { flex: none; max-width: none; min-width: 0; }
.sidebar .buscador-global input[type="search"] { font-size: 0.85rem; border: none; }

nav.menu { display: flex; flex-direction: column; gap: 0.15rem; flex: 1; overflow-y: auto; margin: 0 -0.2rem; padding: 0 0.2rem; }
nav.menu a, nav.menu a:visited {
    color: rgba(255, 255, 255, 0.82);
    text-decoration: none;
    font-size: 0.93rem;
    padding: 0.55rem 0.8rem;
    border-radius: 7px;
    border-left: 3px solid transparent;
    transition: background 0.15s, color 0.15s;
}
nav.menu a:hover { background: rgba(255, 255, 255, 0.09); color: white; }
nav.menu a.activo { background: rgba(61, 139, 253, 0.22); color: white; font-weight: 600; border-left-color: var(--menu-acento); }

.boton-tema {
    align-self: flex-start;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.3);
    color: white;
    border-radius: 6px;
    padding: 0.35rem 0.6rem;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
}
.boton-tema:hover { background: rgba(255,255,255,0.25); }

main { max-width: 1800px; margin: 1.5rem 0 1.5rem calc(var(--menu-colapsado) + 1.5rem); padding: 0 1.5rem 0 0; }

/* Pantallas angostas: el menú vuelve arriba (sin fijar ni ocultar) para no tapar el contenido */
@media (max-width: 800px) {
    .sidebar, .sidebar:hover, .sidebar:focus-within { position: static; width: auto; overflow: visible; }
    .sidebar-pestana { display: none; }
    .sidebar-contenido { width: auto; opacity: 1; visibility: visible; }
    nav.menu { flex-direction: row; flex-wrap: wrap; overflow: visible; }
    main { margin-left: auto; padding: 0 1rem; }
}

.tarjeta {
    background: var(--tarjeta);
    border: 1px solid var(--borde);
    border-radius: 8px;
    padding: 1.2rem;
    margin-bottom: 1.2rem;
}

.grid-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; }

.stat-numero { font-size: 2rem; font-weight: 700; color: var(--azul); }
.stat-label { color: var(--texto-secundario); font-size: 0.9rem; }
.stat-anterior { color: var(--texto-secundario); font-size: 0.8rem; margin: 0.35rem 0 0; }
.stat-anterior .delta { font-weight: 700; margin-left: 0.3rem; white-space: nowrap; }
.stat-anterior .delta.sube { color: var(--rojo); }
.stat-anterior .delta.baja { color: var(--verde); }
.stat-anterior .delta.igual { color: var(--texto-secundario); }

table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
th, td { padding: 0.5rem 0.6rem; border-bottom: 1px solid var(--borde); text-align: left; }
th { background: var(--azul-claro); }
tr:hover td { background: var(--hover-fila); }

a.boton, button.boton {
    display: inline-block;
    background: var(--azul);
    color: white;
    border: none;
    padding: 0.55rem 1.1rem;
    border-radius: 6px;
    text-decoration: none;
    cursor: pointer;
    font-size: 0.9rem;
}
a.boton.secundario, button.boton.secundario { background: var(--boton-secundario); }
a.boton.peligro, button.boton.peligro { background: var(--rojo); }
a.boton.secundario.activo { background: var(--azul); }

.revision-contenido { line-height: 1.55; }
.revision-contenido h1, .revision-contenido h2, .revision-contenido h3 { margin-top: 1.3rem; }
.revision-contenido h1:first-child, .revision-contenido h2:first-child, .revision-contenido h3:first-child { margin-top: 0; }
.revision-contenido code { background: var(--gris); padding: 0.1rem 0.35rem; border-radius: 4px; font-size: 0.9em; }
.revision-contenido table { margin: 0.8rem 0; }
.revision-contenido blockquote { border-left: 3px solid var(--borde); margin: 0.8rem 0; padding: 0.2rem 0 0.2rem 0.8rem; color: var(--texto-secundario); }

tr.fila-clicable { cursor: pointer; }
tr.fila-clicable:hover { background: var(--hover-fila-fuerte); }

.tabla-matriz td, .tabla-matriz th { text-align: center; }
.celda-matriz { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--azul); min-width: 2.4rem; }
.celda-matriz.fila-clicable { cursor: pointer; }
.celda-matriz.fila-clicable:hover { outline: 2px solid var(--azul); outline-offset: -2px; }
td.celda-matriz:not(.fila-clicable) { color: var(--borde); font-weight: 400; }

input[type="text"], input[type="email"], input[type="date"], input[type="number"],
input[type="search"], input[type="password"], select, textarea {
    background: var(--tarjeta);
    color: var(--texto);
    border: 1px solid var(--borde);
    border-radius: 5px;
    font-family: inherit;
}
input::placeholder, textarea::placeholder { color: var(--texto-secundario); opacity: 1; }

form.form-vertical label { display: block; margin: 0.7rem 0 0.25rem; font-weight: 600; font-size: 0.9rem; }
form.form-vertical input, form.form-vertical select, form.form-vertical textarea {
    width: 100%; padding: 0.5rem; font-size: 0.95rem;
}

.badge { display: inline-block; padding: 0.15rem 0.55rem; border-radius: 12px; font-size: 0.78rem; color: white; }
.badge.rojo { background: var(--rojo); }
.badge.amarillo { background: var(--amarillo); }
.badge.verde { background: var(--verde); }
.badge.gris { background: #888; }

.flash { padding: 0.7rem 1rem; border-radius: 6px; margin-bottom: 1rem; }
.flash.ok { background: var(--exito-fondo); color: var(--exito-texto); border: 1px solid var(--exito-borde); }
.flash.error { background: var(--error-fondo); color: var(--error-texto); border: 1px solid var(--error-borde); }

.pestanas { display: flex; gap: 0.3rem; margin-bottom: 1.2rem; border-bottom: 2px solid var(--borde); }
.pestanas a {
    display: inline-block; padding: 0.6rem 1.2rem; text-decoration: none; color: var(--texto);
    font-weight: 600; font-size: 0.95rem; border-radius: 6px 6px 0 0; margin-bottom: -2px;
    border: 2px solid transparent; border-bottom: none;
}
.pestanas a:hover { background: var(--azul-claro); }
.pestanas a.activa { background: var(--tarjeta); border-color: var(--borde); color: var(--azul); }

.pasos { display: flex; gap: 0.5rem; margin-bottom: 1.2rem; }
.pasos span {
    flex: 1; text-align: center; padding: 0.4rem; background: var(--pasos-fondo); border-radius: 6px; font-size: 0.85rem;
}
.pasos span.activo { background: var(--azul); color: white; font-weight: 600; }

.tabla-etapas input, .tabla-etapas select { font-size: 0.85rem; padding: 0.3rem; }
.tabla-etapas td { white-space: nowrap; }

.barra { background: var(--pasos-fondo); border-radius: 6px; overflow: hidden; height: 10px; }
.barra > div { background: var(--verde); height: 100%; }

.tarjeta-semaforo {
    cursor: pointer;
    border-left: 6px solid #999;
    transition: transform 0.1s, box-shadow 0.1s;
}
.tarjeta-semaforo:hover { transform: translateY(-2px); box-shadow: 0 3px 10px rgba(0,0,0,0.15); }
.tarjeta-semaforo.rojo { border-left-color: var(--rojo); background: var(--semaforo-rojo-fondo); }
.tarjeta-semaforo.rojo .stat-numero { color: var(--rojo); }
.tarjeta-semaforo.amarillo { border-left-color: var(--amarillo); background: var(--semaforo-amarillo-fondo); }
.tarjeta-semaforo.amarillo .stat-numero { color: var(--amarillo); }
.tarjeta-semaforo.verde { border-left-color: var(--verde); background: var(--semaforo-verde-fondo); }
.tarjeta-semaforo.verde .stat-numero { color: var(--verde); }

dialog.modal-semaforo {
    border: none;
    border-radius: 8px;
    padding: 1.3rem;
    width: 92%;
    max-width: 1000px;
    background: var(--tarjeta);
    color: var(--texto);
}
dialog.modal-semaforo::backdrop { background: rgba(0,0,0,0.45); }

/* Filtros de encabezado estilo Excel (static/tabla-filtros.js) para cualquier tabla con class="tabla-filtrable" */
table.tabla-filtrable th { position: relative; white-space: nowrap; }
.col-filtro-btn {
    cursor: pointer; border: none; background: none; color: var(--boton-secundario); font-size: 0.7rem;
    margin-left: 0.15rem; padding: 0 0.15rem; border-radius: 3px;
}
.col-filtro-btn:hover { background: var(--hover-fila-fuerte); }
.col-filtro-btn.activo { color: var(--azul); font-weight: 700; }
.col-filtro-panel {
    position: fixed; z-index: 200; background: var(--tarjeta); color: var(--texto); border: 1px solid var(--borde);
    border-radius: 6px; box-shadow: 0 4px 14px rgba(0,0,0,0.35); padding: 0.5rem; width: 14rem;
    font-size: 0.78rem; max-height: 20rem; display: flex; flex-direction: column;
}
.col-filtro-panel.oculto { display: none; }
.col-filtro-panel .ordenar { display: flex; gap: 0.3rem; margin-bottom: 0.4rem; }
.col-filtro-panel .ordenar button { flex: 1; padding: 0.3rem; font-size: 0.75rem; }
.col-filtro-panel input[type="text"].col-filtro-buscar { width: 100%; margin-bottom: 0.4rem; padding: 0.25rem; box-sizing: border-box; }
.col-filtro-lista { overflow-y: auto; overscroll-behavior: contain; flex: 1; border-top: 1px solid var(--borde); border-bottom: 1px solid var(--borde); padding: 0.3rem 0; min-height: 2rem; }
.col-filtro-lista label { display: block; padding: 0.12rem 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 400; cursor: pointer; }
.col-filtro-lista label.todo { font-weight: 600; border-bottom: 1px solid var(--borde); margin-bottom: 0.2rem; padding-bottom: 0.3rem; }
.grupo-mes { border-bottom: 1px solid var(--borde); }
.mes-header { font-weight: 600; display: flex; align-items: center; gap: 0.3rem; }
.mes-toggle { cursor: pointer; display: inline-block; width: 0.9rem; }
.dias-mes { padding-left: 1.3rem; }
.dias-mes.oculto { display: none; }
.dia-label { font-weight: 400 !important; }
.col-filtro-panel .acciones { display: flex; justify-content: space-between; margin-top: 0.4rem; gap: 0.3rem; }

/* ===================== Panel de filtros (chips) ===================== */
.panel-filtros summary {
    cursor: pointer;
    font-weight: 700;
    font-size: 1rem;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    user-select: none;
}
.panel-filtros summary::-webkit-details-marker { display: none; }
.panel-filtros summary::before {
    content: "▸";
    display: inline-block;
    color: var(--boton-secundario);
    font-size: 0.75rem;
    transition: transform 0.15s;
}
.panel-filtros[open] summary::before { transform: rotate(90deg); }
.panel-filtros summary:hover { color: var(--azul); }

.filtros-contador {
    background: var(--azul);
    color: #fff;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.1rem 0.55rem;
    line-height: 1.4;
}

.filtros { margin-top: 1rem; }
.filtros-grupos { display: flex; flex-direction: column; gap: 0.9rem; }
.filtros-titulo {
    display: block;
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--texto-secundario);
    margin-bottom: 0.4rem;
}
.filtros-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.filtros-fechas { display: flex; flex-wrap: wrap; gap: 1rem; }
.filtros-fechas label { display: flex; align-items: center; gap: 0.4rem; font-size: 0.83rem; color: var(--texto); }
.filtros-fechas input[type="date"] {
    padding: 0.3rem 0.5rem;
    border: 1px solid var(--borde);
    border-radius: 6px;
    font-size: 0.83rem;
    color: var(--texto);
    background: #fff;
}

.chip { position: relative; display: inline-flex; cursor: pointer; }
.chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.chip span {
    padding: 0.32rem 0.85rem;
    border-radius: 999px;
    border: 1px solid var(--borde);
    background: var(--gris);
    color: var(--texto);
    font-size: 0.83rem;
    font-weight: 400;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
    user-select: none;
}
.chip:hover span { border-color: var(--azul); }
.chip input:checked + span { background: var(--azul); border-color: var(--azul); color: #fff; font-weight: 600; }
.chip input:focus-visible + span { outline: 2px solid var(--azul); outline-offset: 2px; }

.filtros-acciones {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    margin-top: 1.1rem;
    padding-top: 0.9rem;
    border-top: 1px solid var(--borde);
}

/* ===================== Gráficos (dashboard) ===================== */
.tarjeta-grafico {
    border-radius: 12px;
    padding: 1.3rem 1.4rem 1.2rem;
    box-shadow: 0 1px 2px rgba(20, 25, 35, 0.04), 0 10px 24px -16px rgba(20, 25, 35, 0.22);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
[data-theme="dark"] .tarjeta-grafico { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 10px 24px -16px rgba(0, 0, 0, 0.55); }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .tarjeta-grafico { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 10px 24px -16px rgba(0, 0, 0, 0.55); }
}
.tarjeta-grafico:hover { transform: translateY(-2px); box-shadow: 0 2px 4px rgba(20, 25, 35, 0.06), 0 16px 32px -16px rgba(20, 25, 35, 0.3); }
.tarjeta-grafico h3 { font-size: 1.02rem; margin: 0; font-weight: 700; letter-spacing: -0.01em; }
.grafico-eyebrow { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--texto-secundario); margin: 0 0 0.25rem; }
.grafico-subt { font-size: 0.78rem; color: var(--texto-secundario); margin: 0.2rem 0 1.1rem; }
.grafico-subt b { color: var(--texto); font-variant-numeric: tabular-nums; }

/* ranking horizontal (status / cliente): una fila por categoría, barra tipo pista */
.ranking { display: flex; flex-direction: column; gap: 0.15rem; }
.fila-rank {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas: "etq etq" "pista val";
    column-gap: 0.8rem;
    row-gap: 0.35rem;
    align-items: center;
    padding: 0.45rem 0.5rem;
    border-radius: 8px;
    text-decoration: none;
    color: inherit;
}
.fila-rank:hover, .fila-rank:focus-visible { background: var(--hover-fila-fuerte); outline: none; }
.fila-rank .etq { grid-area: etq; font-size: 0.83rem; color: var(--texto); font-weight: 500; }
.fila-rank .pista { grid-area: pista; position: relative; height: 9px; border-radius: 999px; background: var(--azul-claro); overflow: hidden; }
.fila-rank .pista .fill {
    position: absolute; inset: 0; width: 0; border-radius: 999px; background: var(--grafico-acento);
    animation: crecer-barra 0.9s cubic-bezier(0.22, 0.7, 0.2, 1) forwards;
    animation-delay: calc(var(--i) * 110ms);
}
.fila-rank .val { grid-area: val; font-variant-numeric: tabular-nums; font-weight: 700; font-size: 0.92rem; white-space: nowrap; text-align: right; }
.fila-rank .val .pct { display: block; font-weight: 400; font-size: 0.72rem; color: var(--texto-secundario); }
@keyframes crecer-barra { from { width: 0; } to { width: var(--w); } }

/* dona (cotización) */
.donut-wrap { display: flex; align-items: center; gap: 1.3rem; flex-wrap: wrap; }
.donut-svg { width: 128px; height: 128px; flex-shrink: 0; position: relative; }
.donut-svg svg { width: 100%; height: 100%; overflow: visible; }
.donut-svg .seg { transform-box: fill-box; transform-origin: center; opacity: 0; transform: scale(0.85); animation: aparecer-seg 0.55s ease forwards; animation-delay: calc(var(--i) * 140ms + 100ms); }
.donut-svg .pie-segmento { transition: opacity 0.15s; stroke: var(--tarjeta); stroke-width: 2px; }
.donut-svg .seg:hover .pie-segmento, .donut-svg .seg:focus .pie-segmento { opacity: 0.85; }
.donut-svg .pie-etiqueta { fill: white; font-size: 11px; font-weight: 600; text-anchor: middle; pointer-events: none; }
.donut-centro { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; }
.donut-centro .n { font-size: 1.6rem; font-weight: 700; line-height: 1; color: var(--texto); }
.donut-centro .c { font-size: 0.62rem; color: var(--texto-secundario); text-transform: uppercase; letter-spacing: 0.06em; margin-top: 0.15rem; }
.donut-leyenda { flex: 1; min-width: 9rem; flex-direction: column; align-items: flex-start; gap: 0.5rem; justify-content: center; }
.donut-leyenda a { width: 100%; }
@keyframes aparecer-seg { to { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
    .fila-rank .pista .fill { animation: none; width: var(--w); }
    .donut-svg .seg { animation: none; opacity: 1; transform: scale(1); }
}

.grafico-leyenda { display: flex; flex-wrap: wrap; gap: 0.5rem 1.1rem; margin-top: 0.8rem; justify-content: center; }
.grafico-leyenda a { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; color: var(--texto); text-decoration: none; }
.grafico-leyenda a:hover { text-decoration: underline; }
.grafico-leyenda .swatch { width: 0.7rem; height: 0.7rem; border-radius: 2px; flex-shrink: 0; }
.grafico-leyenda .cant { color: var(--texto-secundario); }
.grafico-tabla-toggle { margin-top: 0.6rem; }
.grafico-tabla-toggle summary { cursor: pointer; color: var(--azul); font-size: 0.85rem; }
.grafico-tabla-toggle table { margin-top: 0.5rem; }

/* tooltip flotante para ranking/dona */
.grafico-tooltip {
    position: fixed; z-index: 300; pointer-events: none; background: var(--texto); color: var(--tarjeta);
    padding: 0.4rem 0.6rem; border-radius: 7px; font-size: 0.76rem; line-height: 1.35;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22); opacity: 0;
    transform: translate(-50%, -100%) translateY(-8px); transition: opacity 0.1s ease; max-width: 220px;
}
.grafico-tooltip.visible { opacity: 1; }
.grafico-tooltip.abajo { transform: translate(-50%, 0) translateY(10px); }
.grafico-tooltip b { font-variant-numeric: tabular-nums; display: block; }
.grafico-tooltip .sec { display: block; opacity: 0.78; margin-top: 0.1rem; }
.col-filtro-panel .acciones button { flex: 1; padding: 0.3rem; font-size: 0.75rem; }

/* ===== Seguimiento ===== */
.seguimiento-stats { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin-bottom: 1.2rem; }
.seguimiento-stats .tarjeta { margin-bottom: 0; }
a.stat-enlace { text-decoration: none; color: inherit; border-width: 2px; transition: border-color 0.15s; }
a.stat-enlace:hover { border-color: var(--azul); }
a.stat-enlace.activa { border-color: var(--azul); background: var(--azul-claro); }
a.stat-enlace.alerta .stat-numero { color: var(--rojo); }
.filtros-seguimiento { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0.8rem; }
.filtros-seguimiento label { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.83rem; color: var(--texto-secundario); }
.filtros-seguimiento select { padding: 0.4rem; font-size: 0.9rem; max-width: 100%; }
.barra-asignar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin: 0.8rem 0; padding: 0.7rem;
                 background: var(--gris); border: 1px solid var(--borde); border-radius: 6px; position: sticky; top: 0; z-index: 2; }
.barra-asignar select { padding: 0.45rem; font-size: 0.9rem; }
#contador-seleccion { font-weight: 600; font-size: 0.88rem; }
.texto-chico { font-size: 0.8rem; color: var(--texto-secundario); }
.texto-tenue { color: var(--texto-secundario); font-style: italic; }
#responsables-proyecto select { padding: 0.35rem; font-size: 0.88rem; max-width: 100%; }

/* ===== Dashboard ABC: desglose por responsable (MIP / Mesa de programación) ===== */
.fila-rank .pista .fill.apilada { display: flex; overflow: hidden; background: none; }
.fila-rank .pista .fill.apilada > span { height: 100%; }
.leyenda-resp { display: flex; flex-wrap: wrap; gap: 0.3rem 1rem; font-size: 0.8rem; margin: 0 0 0.6rem; color: var(--texto); }
.leyenda-resp small { color: var(--texto-secundario); }
.leyenda-resp .swatch, .desglose-resp .swatch { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 0.3rem; vertical-align: middle; }
.desglose-resp { display: flex; flex-wrap: wrap; gap: 0.1rem 0.7rem; font-size: 0.74rem; font-weight: 400; color: var(--texto-secundario); margin-top: 0.15rem; }
.desglose-resp b { color: var(--texto); }
#dashboard-captura .grafico-tabla-toggle { overflow-x: auto; }
#dashboard-captura .grafico-tabla-toggle th, #dashboard-captura .grafico-tabla-toggle td { padding: 0.35rem 0.45rem; font-size: 0.8rem; }

/* Buscador de folios por NV / ID de sitio en Dashboard ABC */
.buscador-abc { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin: 0.6rem 0; }
.buscador-abc input[type="search"] { flex: 1; min-width: 14rem; max-width: 30rem; padding: 0.4rem 0.6rem; }
.tabla-scroll { overflow-x: auto; }