/* ==========================================================================
   Dashboard: cifras, gráficos (SVG en línea) y listas.

   Los colores de los gráficos son una capa aparte de los de la interfaz:
   dos tonos categóricos (azul y naranja, validados con validate_palette.js
   contra la superficie oscura y la clara) y una escala azul para las etapas
   de las tareas. El texto nunca lleva el color de la serie; la identidad la
   da la marca de color que está al lado (una raya, un cuadrito).
   ========================================================================== */

.ws-dash {
    --dv-1: #3987e5;
    --dv-2: #d95926;
    --dv-e1: #44527a;   /* nuevas */
    --dv-e2: #3b5f9e;   /* iniciadas */
    --dv-e3: #3987e5;   /* completadas */
    --dv-e4: #9cc4f7;   /* terminadas */
    display: grid;
    gap: 18px;
    margin-top: 4px;
}
html[data-raver-tema="claro"] .ws-dash {
    --dv-1: #2a78d6;
    --dv-2: #eb6834;
    --dv-e1: #c3cad8;
    --dv-e2: #8fb8ec;
    --dv-e3: #4f8fdc;
    --dv-e4: #1f5fb8;
}

/* ---------- El filtro ---------- */
.ws-dash-filtro { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ws-dash-filtro .ws-seg { display: inline-flex; padding: 2px; border: 1px solid var(--tinta-borde); border-radius: var(--r-2); background: var(--tinta-sup); }
.ws-dash-filtro .ws-seg-op {
    padding: 5px 12px; border-radius: var(--r-1);
    font-size: 12.5px; color: var(--tinta-texto-3) !important; text-decoration: none !important;
}
.ws-dash-filtro .ws-seg-op:hover { color: var(--tinta-texto) !important; }
.ws-dash-filtro .ws-seg-op.on { background: var(--tinta-acento-suave); color: var(--tinta-texto) !important; }

/* ---------- Las cifras ---------- */
.ws-dash-kpis { display: grid; grid-template-columns: minmax(280px, 1.55fr) repeat(4, minmax(150px, 1fr)); gap: 12px; }
.ws-dv-tile, .ws-dv-card {
    border: 1px solid var(--tinta-borde);
    border-radius: var(--r-3);
    background: var(--tinta-sup);
}
.ws-dv-tile { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 16px 18px; }
.ws-dv-rotulo { font: 500 10.5px/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-texto-3); }
.ws-dv-valor-t { font: 600 30px/1.05 var(--f-ui); letter-spacing: -.01em; color: var(--tinta-texto); }
.ws-dv-hero-valor { font: 600 52px/1 var(--f-ui); letter-spacing: -.02em; color: var(--tinta-texto); }
.ws-dv-hero-valor small { font: 500 15px/1 var(--f-mono); letter-spacing: .04em; color: var(--tinta-texto-3); }
.ws-dv-sub { font-size: 12.5px; line-height: 1.4; color: var(--tinta-texto-3); }
.ws-dv-delta { font-weight: 600; }
.ws-dv-delta.sube { color: var(--tinta-ok); }
.ws-dv-delta.baja, .ws-dv-aviso { color: var(--tinta-alerta); font-weight: 500; }
.ws-dv-chispa { width: 128px; height: 34px; margin-top: auto; overflow: visible; }
.ws-dv-chispa polyline { fill: none; stroke: var(--tinta-texto-3); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ws-dv-chispa circle { fill: var(--dv-1); stroke: var(--tinta-sup); stroke-width: 2; }

/* ---------- Filas y tarjetas ---------- */
.ws-dash-fila { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ws-dash-fila-7-5 { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.ws-dv-card { min-width: 0; padding: 16px 18px 14px; }
.ws-dv-card > header { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 12px; }
.ws-dv-card h3 { margin: 0 !important; font: 600 14px/1.2 var(--f-ui) !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--tinta-texto) !important; }
.ws-dv-nota { font-size: 12px; color: var(--tinta-texto-3); }
.ws-dv-enlace { font-size: 12.5px; color: var(--tinta-acento-tx) !important; text-decoration: none !important; }
.ws-dv-enlace:hover { text-decoration: underline !important; }
.ws-dv-vacio { margin: 8px 0; font-size: 13px; color: var(--tinta-texto-3); }

/* ---------- Gráficos ---------- */
.ws-dv-svg { display: block; width: 100%; height: auto; overflow: visible; }
.ws-dv-grid { stroke: var(--tinta-borde); stroke-width: 1; }
.ws-dv-eje { fill: var(--tinta-texto-3); font: 400 11px var(--f-mono); }
.ws-dv-valor { fill: var(--tinta-texto); font: 600 12px var(--f-ui); }
.ws-dv-etq { fill: var(--tinta-texto-2); font: 500 11.5px var(--f-ui); }
.ws-dv-barra { fill: var(--dv-1); opacity: .45; transition: opacity .12s; }
.ws-dv-barra.actual { opacity: 1; }
.ws-dv-cero { stroke: var(--tinta-borde-2); stroke-width: 2; stroke-linecap: round; }
.ws-dv-hit { fill: transparent; cursor: crosshair; outline: none; }
.ws-dv-hit:hover, .ws-dv-hit:focus-visible { fill: color-mix(in oklab, var(--tinta-texto) 6%, transparent); }
.ws-dv-hit:focus-visible { stroke: var(--tinta-acento-tx); stroke-width: 1.5; }
.ws-dv-linea { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ws-dv-linea.s1 { stroke: var(--dv-1); }
.ws-dv-linea.s2 { stroke: var(--dv-2); }
.ws-dv-punto { stroke: var(--tinta-sup); stroke-width: 2; }
.ws-dv-punto.s1 { fill: var(--dv-1); }
.ws-dv-punto.s2 { fill: var(--dv-2); }
.ws-dv-cruz { stroke: var(--tinta-borde-2); stroke-width: 1; opacity: 0; pointer-events: none; }
.ws-dv-hit:hover + .ws-dv-cruz, .ws-dv-hit:focus + .ws-dv-cruz { opacity: 1; }
.ws-dv-seg { cursor: default; outline: none; }
.ws-dv-seg.nueva { fill: var(--dv-e1); }
.ws-dv-seg.iniciada { fill: var(--dv-e2); }
.ws-dv-seg.completada { fill: var(--dv-e3); }
.ws-dv-seg.terminada { fill: var(--dv-e4); }
.ws-dv-seg:hover, .ws-dv-seg:focus-visible { filter: brightness(1.15); }
.ws-dv-vacia { fill: var(--tinta-borde); }

/* Leyendas y marcas de identidad */
.ws-dv-leyenda { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0 0 6px; padding: 0; list-style: none; font-size: 12.5px; color: var(--tinta-texto-2); }
.ws-dv-leyenda > span, .ws-dv-leyenda li { display: inline-flex; align-items: center; gap: 8px; }
.ws-dv-clave { display: inline-block; flex: none; width: 14px; height: 3px; border-radius: 2px; background: var(--tinta-texto-3); }
.ws-dv-clave.s1 { background: var(--dv-1); }
.ws-dv-clave.s2 { background: var(--dv-2); }
.ws-dv-clave.seg { width: 10px; height: 10px; border-radius: 3px; }
.ws-dv-clave.nueva { background: var(--dv-e1); }
.ws-dv-clave.iniciada { background: var(--dv-e2); }
.ws-dv-clave.completada { background: var(--dv-e3); }
.ws-dv-clave.terminada { background: var(--dv-e4); }
.ws-dv-leyenda-col { flex-direction: column; gap: 8px; margin: 14px 0 6px; }
.ws-dv-leyenda-col li { display: grid; grid-template-columns: 12px 1fr auto; gap: 10px; }
.ws-dv-leyenda-col b { font-weight: 500; color: var(--tinta-texto); }
.ws-dv-cifra-g { display: flex; align-items: baseline; gap: 8px; margin: 0 0 12px; }
.ws-dv-cifra-g b { font: 600 34px/1 var(--f-ui); color: var(--tinta-texto); }
.ws-dv-cifra-g span { font-size: 13px; color: var(--tinta-texto-3); }

/* La tabla que acompaña a cada gráfico */
.ws-dv-tabla { margin-top: 10px; font-size: 12.5px; }
.ws-dv-tabla summary { cursor: pointer; color: var(--tinta-texto-3); }
.ws-dv-tabla summary:hover { color: var(--tinta-texto); }
.ws-dv-tabla table { width: 100%; margin-top: 8px; border-collapse: collapse; }
.ws-dv-tabla th, .ws-dv-tabla td { padding: 5px 8px; border-bottom: 1px solid var(--tinta-borde); text-align: left; font-weight: 400; color: var(--tinta-texto-2); }
.ws-dv-tabla thead th { font: 500 10.5px/1 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-texto-3); }
.ws-dv-tabla tbody th { color: var(--tinta-texto); }

/* ---------- Listas ---------- */
.ws-dv-lista { margin: 0; padding: 0; list-style: none; }
.ws-dv-lista li + li { border-top: 1px solid var(--tinta-borde); }
.ws-dv-fila { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 9px 4px; color: inherit !important; text-decoration: none !important; border-radius: var(--r-1); }
.ws-dv-fila:hover { background: var(--tinta-hover); }
.ws-dv-fecha { min-width: 44px; font-size: 12px; color: var(--tinta-texto-2); }
.ws-dv-que { display: flex; flex-direction: column; min-width: 0; gap: 2px; }
.ws-dv-que b { display: flex; align-items: center; gap: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; font-size: 13px; color: var(--tinta-texto); }
.ws-dv-que small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--tinta-texto-3); }
.ws-dv-punto-capa { display: inline-block; flex: none; width: 8px; height: 8px; border-radius: 50%; }
.ws-dv-cuando { font-size: 12px; white-space: nowrap; color: var(--tinta-texto-3); }
.ws-dv-fila.atrasada .ws-dv-cuando { color: var(--tinta-alerta); font-weight: 500; }
.ws-dv-lista .ws-dv-fila:has(.ws-dv-monto) { grid-template-columns: minmax(0, 1fr) auto auto; }
.ws-dv-monto { font-size: 12.5px; color: var(--tinta-texto); white-space: nowrap; }
.ws-dv-total { margin: 10px 4px 0; padding-top: 10px; border-top: 1px solid var(--tinta-borde); font-size: 12.5px; color: var(--tinta-texto-3); }
.ws-dv-total b { color: var(--tinta-texto); font-weight: 500; }

/* Proyectos */
.ws-dv-proy { display: flex; flex-direction: column; gap: 6px; padding: 10px 4px; color: inherit !important; text-decoration: none !important; border-radius: var(--r-1); }
.ws-dv-proy:hover { background: var(--tinta-hover); }
.ws-dv-proy-cab { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; }
.ws-dv-proy-cab b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; color: var(--tinta-texto); }
.ws-dv-proy-cab .ws-mono { color: var(--tinta-texto-2); }
.ws-dv-proy small { font-size: 12px; color: var(--tinta-texto-3); }
.ws-dv-medidor { display: block; height: 6px; border-radius: 3px; background: color-mix(in oklab, var(--dv-1) 20%, transparent); overflow: hidden; }
.ws-dv-medidor i { display: block; height: 100%; border-radius: 3px; background: var(--dv-1); }

/* ---------- Notas ---------- */
.ws-dv-postits { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; padding: 4px 4px 6px; }
.ws-dv-postit {
    --papel: #fff1a8; --giro: 0deg;
    position: relative; display: flex; flex-direction: column; gap: 8px; min-height: 96px; padding: 14px 14px 10px;
    border-radius: 2px 2px 12px 2px; background: var(--papel);
    color: #2b2a26 !important; text-decoration: none !important; font-size: 13.5px; line-height: 1.45;
    box-shadow: 0 8px 14px rgba(0, 0, 0, .28);
    transform: rotate(var(--giro)); transition: transform .14s ease;
}
.ws-dv-postit:hover { transform: rotate(0deg) translateY(-2px); }
.ws-dv-postit small { margin-top: auto; font-size: 11.5px; color: rgba(43, 42, 38, .55); }

/* ---------- La burbuja con los valores ---------- */
.ws-dv-tip {
    position: fixed; z-index: 9500; min-width: 120px; max-width: 260px; padding: 9px 12px;
    border: 1px solid var(--tinta-borde-2); border-radius: var(--r-2);
    background: var(--tinta-sup); box-shadow: 0 10px 28px rgba(0, 0, 0, .4);
    pointer-events: none;
}
.ws-dv-tip[hidden] { display: none; }
.ws-dv-tip-t { margin-bottom: 6px; font: 500 11px/1 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-texto-3); }
.ws-dv-tip-f { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
.ws-dv-tip-f + .ws-dv-tip-f { margin-top: 4px; }
.ws-dv-tip-f b { font-weight: 600; color: var(--tinta-texto); }
.ws-dv-tip-f span { color: var(--tinta-texto-3); }

/* ---------- Pantallas más angostas ---------- */
@media (max-width: 1180px) {
    .ws-dash-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ws-dash-kpis .ws-dv-hero { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
    .ws-dash-fila, .ws-dash-fila-7-5 { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
    .ws-dash-kpis { grid-template-columns: 1fr; }
    .ws-dv-hero-valor { font-size: 42px; }
}
@media (prefers-reduced-motion: reduce) {
    .ws-dv-barra, .ws-dv-postit { transition: none; }
}