/* Tablero (dashboard.html). Diseno del prototipo del index conservado:
 * panel del asistente a la izquierda y cuadricula 2x2 de graficos a la derecha.
 *
 * Mismos radios, sombras y efectos del prototipo; los colores salen de
 * tokens.css (var(--arpia-*)) y las transparencias de color-mix(). Ningun
 * color literal aqui.
 *
 * Equivalencias con la paleta del prototipo:
 *   --azul / --azul-profundo -> --arpia-elevated / --arpia-surface
 *   --azul-claro             -> --arpia-space
 *   --blanco / --negro       -> --arpia-text / --arpia-void
 */

.pagina-tablero {
    --t-borde: color-mix(in srgb, var(--arpia-space) 16%, transparent);
    --t-borde-hover: color-mix(in srgb, var(--arpia-space) 38%, transparent);
    --t-texto-suave: var(--arpia-text-secondary);
    --t-sombra-panel:
        0 18px 45px color-mix(in srgb, var(--arpia-void) 38%, transparent),
        0 5px 16px color-mix(in srgb, var(--arpia-void) 22%, transparent);
    --t-sombra-hover:
        0 22px 55px color-mix(in srgb, var(--arpia-void) 48%, transparent),
        0 0 28px color-mix(in srgb, var(--arpia-space) 7%, transparent);
    --t-radio: 16px;

    display: flex;
    flex-direction: column;
    min-height: 100vh;
}



/* =========================
   CONTENIDO
   ========================= */

.pagina-tablero .tablero {
    flex: 1;
    width: min(1500px, 100%);
    margin: 0 auto;
    padding: 24px;
    display: grid;
    grid-template-columns: minmax(320px, 0.72fr) minmax(0, 1.28fr);
    gap: 18px;
}

/* =========================
   PANELES
   ========================= */

.pagina-tablero .ia,
.pagina-tablero .grafico {
    position: relative;
    overflow: hidden;
    background: linear-gradient(145deg,
        color-mix(in srgb, var(--arpia-elevated) 92%, transparent),
        color-mix(in srgb, var(--arpia-surface) 90%, transparent));
    border: 1px solid var(--t-borde);
    border-radius: var(--t-radio);
    box-shadow: var(--t-sombra-panel);
    isolation: isolate;
}

.pagina-tablero .ia::before,
.pagina-tablero .grafico::before {
    content: "";
    position: absolute;
    pointer-events: none;
    z-index: -1;
    width: 180px;
    height: 180px;
    top: -110px;
    right: -80px;
    border-radius: 50%;
    background: var(--arpia-space);
    opacity: 0.045;
    filter: blur(34px);
}

.pagina-tablero .ia::after,
.pagina-tablero .grafico::after {
    content: "";
    position: absolute;
    pointer-events: none;
    left: 18px;
    right: 18px;
    top: 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent,
        color-mix(in srgb, var(--arpia-text) 18%, transparent),
        transparent);
}

/* =========================
   PANEL IA
   ========================= */

.pagina-tablero .ia {
    min-height: 680px;
    padding: 26px;
    display: flex;
    flex-direction: column;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.pagina-tablero .ia:hover {
    border-color: var(--t-borde-hover);
    box-shadow: var(--t-sombra-hover);
}

.pagina-tablero .ia h2 {
    color: var(--arpia-text);
    font-size: 21px;
    font-weight: 600;
    letter-spacing: -0.02em;
}

.pagina-tablero .estado {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 7px;
    color: var(--arpia-space);
    font-size: 12px;
}

.pagina-tablero .estado[data-estado="degraded"] { color: var(--arpia-warning); }
.pagina-tablero .estado[data-estado="down"] { color: var(--arpia-critical); }

/* -- respuesta -- */

.pagina-tablero .respuesta {
    flex: 1;
    min-height: 300px;
    max-height: 420px;
    overflow-y: auto;
    margin-top: 22px;
    padding: 20px;
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--arpia-void) 38%, transparent),
        color-mix(in srgb, var(--arpia-void) 58%, transparent));
    border: 1px solid color-mix(in srgb, var(--arpia-space) 12%, transparent);
    border-radius: 12px;
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, var(--arpia-text) 4.5%, transparent),
        inset 0 0 35px color-mix(in srgb, var(--arpia-space) 2.5%, transparent);
}

.pagina-tablero .respuesta h3 {
    margin-bottom: 14px;
    color: var(--arpia-space);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.pagina-tablero #respuesta {
    display: flex;
    flex-direction: column;
    gap: 10px;
    color: color-mix(in srgb, var(--arpia-text) 82%, transparent);
    font-size: 14px;
    line-height: 1.7;
    overflow-wrap: anywhere;
}

.pagina-tablero .respuesta-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding-top: 8px;
    border-top: 1px solid color-mix(in srgb, var(--arpia-space) 12%, transparent);
    color: var(--t-texto-suave);
    font-size: 11px;
    line-height: 1.5;
}

.pagina-tablero .respuesta-meta .chip-agente {
    list-style: none;
}

.pagina-tablero .pensando {
    display: none;
    margin-top: 18px;
    color: var(--arpia-space);
    font-size: 12px;
}

.pagina-tablero .pensando.activo {
    display: block;
    animation: latido 1.4s ease-in-out infinite;
}

/* -- pregunta -- */

.pagina-tablero .pregunta {
    display: flex;
    gap: 7px;
    margin-top: 14px;
    padding: 5px;
    background: color-mix(in srgb, var(--arpia-void) 42%, transparent);
    border: 1px solid color-mix(in srgb, var(--arpia-space) 15%, transparent);
    border-radius: 11px;
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--arpia-text) 3.5%, transparent);
    transition: 0.25s ease;
}

.pagina-tablero .pregunta:focus-within {
    border-color: color-mix(in srgb, var(--arpia-space) 48%, transparent);
    box-shadow:
        0 0 0 3px color-mix(in srgb, var(--arpia-space) 4.5%, transparent),
        0 8px 24px color-mix(in srgb, var(--arpia-void) 24%, transparent);
}

.pagina-tablero .pregunta input {
    flex: 1;
    min-width: 0;
    padding: 11px 12px;
    background: transparent;
    border: 0;
    outline: 0;
    color: var(--arpia-text);
    font: inherit;
    font-size: 13px;
}

.pagina-tablero .pregunta input::placeholder {
    color: color-mix(in srgb, var(--arpia-text) 38%, transparent);
}

.pagina-tablero .pregunta button {
    padding: 0 18px;
    background: var(--arpia-space);
    border: 1px solid color-mix(in srgb, var(--arpia-text) 18%, transparent);
    border-radius: 8px;
    color: var(--arpia-bg);
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: 0.2s ease;
    box-shadow: 0 6px 18px color-mix(in srgb, var(--arpia-space) 10%, transparent);
}

.pagina-tablero .pregunta button:hover:not(:disabled) {
    background: var(--arpia-text);
    transform: translateY(-1px);
}

.pagina-tablero .pregunta button:disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

/* -- fuente: trazabilidad a doc_id / chunk_id -- */

.pagina-tablero .fuente {
    margin-top: 14px;
    padding: 14px 16px;
    background: color-mix(in srgb, var(--arpia-void) 25%, transparent);
    border: 1px solid color-mix(in srgb, var(--arpia-space) 10%, transparent);
    border-left: 2px solid var(--arpia-evidence);
    border-radius: 11px;
    font-size: 11px;
}

.pagina-tablero .fuente h3 {
    margin-bottom: 7px;
    color: var(--arpia-text);
    font-size: 11px;
    font-weight: 600;
}

.pagina-tablero .fuente p {
    color: var(--t-texto-suave);
    overflow-wrap: anywhere;
}

.pagina-tablero .fuente span {
    color: var(--arpia-evidence);
    font-family: var(--fuente-mono);
    font-variant-ligatures: none;  /* un doc_id/chunk_id se muestra glifo a glifo */
}

/* =========================
   GRAFICOS
   ========================= */

.pagina-tablero .graficos {
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-content: start;
    gap: 18px;
}

.pagina-tablero .grafico {
    min-width: 0;
    padding: 17px;
    display: flex;
    flex-direction: column;
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.pagina-tablero .grafico:hover {
    transform: translateY(-3px);
    border-color: var(--t-borde-hover);
    box-shadow: var(--t-sombra-hover);
}

/* panel que acaba de actualizar el agente */
.pagina-tablero .grafico.activo {
    border-color: var(--t-borde-hover);
}

.grafico-cabeza {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}

.pagina-tablero .grafico h3 {
    color: var(--arpia-text);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.insignia-panel {
    flex-shrink: 0;
    padding: 1px 7px;
    border: 1px solid currentColor;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.04em;
}

.insignia-panel[data-origen="cargando"],
.insignia-panel[data-origen="sin_datos"] { color: var(--arpia-text-muted); }
.insignia-panel[data-origen="simulado"] { color: var(--arpia-warning); }
.insignia-panel[data-origen="corpus"] { color: var(--arpia-info); }
.insignia-panel[data-origen="agente"] { color: var(--arpia-success); }

/* panel sin datos: el corpus no trae lugar ni actores; se dice, no se dibuja */
.pagina-tablero .vacio {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    min-height: 140px;
    padding: 12px;
    color: var(--t-texto-suave);
    font-size: 12px;
    line-height: 1.5;
    text-align: center;
}

.pagina-tablero .fuente .boton {
    margin-top: 8px;
}

.grafico-nota {
    min-height: 0;
    margin-bottom: 6px;
    color: var(--t-texto-suave);
    font-size: 11px;
    line-height: 1.4;
}

.grafico-nota:empty {
    display: none;
}

/* altura fija como en el prototipo: Chart.js responsive necesita un contenedor
   que no crezca con el propio canvas */
.pagina-tablero .lienzo {
    position: relative;
    height: 250px;
    /* el canvas nunca se sale de su caja ni tapa lo que va debajo (botones) */
    overflow: hidden;
}

/* -- mapa -- */

.pagina-tablero .mapa {
    height: 250px;
    border-radius: 10px;
    overflow: hidden;
    filter: saturate(0.72) contrast(1.04);
    box-shadow:
        inset 0 0 25px color-mix(in srgb, var(--arpia-void) 30%, transparent),
        0 8px 18px color-mix(in srgb, var(--arpia-void) 18%, transparent);
}

/* -- relaciones -- */

.pagina-tablero .relaciones {
    position: relative;
    flex: 1;
    min-height: 200px;
}

.pagina-tablero .nodo {
    position: absolute;
    padding: 9px 14px;
    background: var(--arpia-space);
    border: 1px solid color-mix(in srgb, var(--arpia-text) 28%, transparent);
    border-radius: 999px;
    color: var(--arpia-bg);
    font-size: 12px;
    font-weight: 700;
    box-shadow:
        0 8px 20px color-mix(in srgb, var(--arpia-void) 35%, transparent),
        0 0 18px color-mix(in srgb, var(--arpia-space) 8%, transparent);
    transition: 0.2s ease;
}

.pagina-tablero .nodo:hover {
    background: var(--arpia-text);
    transform: translateY(-2px);
}

.pagina-tablero .centro {
    left: 50%;
    top: 45%;
    transform: translate(-50%, -50%);
}

.pagina-tablero .centro:hover {
    transform: translate(-50%, calc(-50% - 2px));
}

.pagina-tablero .arriba {
    left: 8%;
    top: 12%;
}

.pagina-tablero .abajo {
    right: 8%;
    bottom: 12%;
}

.pagina-tablero .relaciones::before,
.pagina-tablero .relaciones::after {
    content: "";
    position: absolute;
    z-index: -1;
    height: 1px;
    width: 34%;
    background: linear-gradient(90deg,
        transparent,
        color-mix(in srgb, var(--arpia-space) 28%, transparent),
        transparent);
}

.pagina-tablero .relaciones::before {
    left: 24%;
    top: 34%;
    transform: rotate(16deg);
}

.pagina-tablero .relaciones::after {
    right: 24%;
    bottom: 34%;
    transform: rotate(-16deg);
}

/* =========================
   RESPONSIVE
   ========================= */

@media (max-width: 1050px) {
    .pagina-tablero .tablero {
        grid-template-columns: 1fr;
    }

    .pagina-tablero .ia {
        min-height: 560px;
    }
}

@media (max-width: 700px) {
    .pagina-tablero .tablero {
        padding: 14px;
        gap: 14px;
    }

    .pagina-tablero .ia {
        padding: 20px;
    }

    .pagina-tablero .graficos {
        grid-template-columns: 1fr;
    }

    .pagina-tablero .pregunta button {
        padding: 0 14px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pagina-tablero .pensando.activo { animation: none; }
    .pagina-tablero .grafico:hover,
    .pagina-tablero .nodo:hover { transform: none; }
}


/* =========================
   DISTRIBUCION SEGUN CANTIDAD DE GRAFICOS
   =========================
 * dashboard.js marca los paneles: `.ancho` ocupa las dos columnas y `.alto`
 * (grafico unico) gana altura. 1 -> uno grande; 2 y 4 -> dos columnas;
 * 3 o impar -> el primero a lo ancho y el resto en pares debajo.
 */

.pagina-tablero .grafico.ancho {
    grid-column: 1 / -1;
}

.pagina-tablero .grafico.alto .lienzo,
.pagina-tablero .grafico.alto .mapa,
.pagina-tablero .grafico.alto .relaciones,
.pagina-tablero .grafico.alto .tabla-caja {
    height: 520px;
    max-height: none;
}

.grafico-cuerpo {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.grafico-acciones {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.grafico-vacio {
    padding: 48px 12px;
    color: var(--t-texto-suave);
    font-size: 12px;
    text-align: center;
}

/* -- boton "Ampliar" -- */

.boton-icono {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    background: color-mix(in srgb, var(--arpia-void) 45%, transparent);
    border: 1px solid var(--t-borde);
    border-radius: 7px;
    color: var(--arpia-text-secondary);
    font: inherit;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.boton-icono:hover {
    background: var(--arpia-space);
    border-color: var(--arpia-space);
    color: var(--arpia-bg);
}

.boton-icono svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* -- tabla -- */

.tabla-caja {
    height: 250px;
    overflow: auto;
    border-radius: 10px;
}

.tabla-datos {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.tabla-datos th,
.tabla-datos td {
    padding: 6px 10px;
    border-bottom: 1px solid var(--t-borde);
    text-align: left;
}

.tabla-datos th {
    position: sticky;
    top: 0;
    background: var(--arpia-surface);
    color: var(--arpia-text-muted);
    font-weight: 600;
}

.tabla-datos .num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.tabla-datos tbody tr {
    cursor: pointer;
}

.tabla-datos tbody tr:hover,
.tabla-datos tbody tr:focus-visible {
    background: color-mix(in srgb, var(--arpia-space) 8%, transparent);
}

.chip-fenomeno {
    padding: 0 6px;
    border-left: 3px solid var(--color-fenomeno);
}

/* -- indicador -- */

.kpi {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    min-height: 250px;
    padding: 12px 8px;
}

.kpi-cifra {
    color: var(--arpia-text);
    font-size: 48px;
    font-weight: 700;
    line-height: 1.1;
}

.kpi-etiqueta {
    color: var(--t-texto-suave);
    font-size: 13px;
}

.kpi-desglose {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 16px;
    padding: 0;
    list-style: none;
}

.kpi-parte {
    display: flex;
    gap: 10px;
    padding: 6px 12px;
    background: color-mix(in srgb, var(--arpia-void) 35%, transparent);
    border-left: 3px solid var(--color-fenomeno);
    border-radius: 6px;
    cursor: pointer;
}

/* =========================
   VISTA AMPLIADA (<dialog>)
   ========================= */

.ampliado {
    width: min(1280px, calc(100vw - 48px));
    height: min(820px, calc(100vh - 48px));
    max-width: none;
    max-height: none;
    padding: 20px 24px 24px;
    background: linear-gradient(145deg, var(--arpia-elevated), var(--arpia-surface));
    border: 1px solid var(--t-borde-hover);
    border-radius: 16px;
    box-shadow: 0 30px 80px color-mix(in srgb, var(--arpia-void) 70%, transparent);
    color: var(--arpia-text);
}

.ampliado[open] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ampliado::backdrop {
    background: color-mix(in srgb, var(--arpia-void) 72%, transparent);
    backdrop-filter: blur(3px);
}

.ampliado-cabeza {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.ampliado-cabeza h2 {
    font-size: 18px;
    font-weight: 600;
}

.ampliado-cuerpo {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* en la vista ampliada, el grafico ocupa todo el alto disponible */
.ampliado-cuerpo .lienzo,
.ampliado-cuerpo .mapa,
.ampliado-cuerpo .relaciones,
.ampliado-cuerpo .tabla-caja,
.ampliado-cuerpo .kpi {
    flex: 1;
    height: auto;
    min-height: 0;
}

.ampliado-cuerpo .mapa {
    border-radius: 10px;
    overflow: hidden;
}

.ampliado-cuerpo .relaciones {
    position: relative;
}

.ampliado-cuerpo .nodo {
    position: absolute;
    padding: 12px 20px;
    background: var(--arpia-space);
    border-radius: 999px;
    color: var(--arpia-bg);
    font-size: 15px;
    font-weight: 700;
}

.ampliado-cuerpo .centro { left: 50%; top: 45%; transform: translate(-50%, -50%); }
.ampliado-cuerpo .arriba { left: 12%; top: 14%; }
.ampliado-cuerpo .abajo { right: 12%; bottom: 14%; }

.ampliado-cuerpo .kpi-cifra {
    font-size: 96px;
}


/* -- hallazgos del compositor ----------------------------------------------
 *
 * Lo que las cifras de la vista dicen, calculado sin modelo. Se separan
 * visualmente de la respuesta del agente a proposito: una es lo que afirma el
 * corpus y otra es aritmetica sobre la agregacion, y mezclarlas haria que el
 * analista no supiera cual esta leyendo.
 *
 * Sin colores propios: solo tokens existentes.
 */

.pagina-tablero .hallazgos-titulo {
    margin: 12px 0 4px;
    color: var(--arpia-text-secondary);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.pagina-tablero .hallazgos {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    padding: 0 0 0 16px;
    list-style: disc;
}

.pagina-tablero .hallazgos li {
    color: var(--arpia-text);
    font-size: 13px;
    line-height: 1.5;
}

/* =========================
   SELECTOR DE TIPO DE LA SERIE TEMPORAL
   =========================
 * Debajo de "Evolucion temporal": Linea / Columnas / Barras. Mismo lenguaje
 * que el selector de idioma: el activo gana fondo y borde, no solo color.
 */

.selector-grafico {
    position: relative;
    z-index: 2;  /* siempre por encima del grafico, tambien en pantalla completa */
    display: flex;
    justify-content: center;
    gap: 4px;
    margin-top: 10px;
}

.tipo-grafico {
    min-height: 26px;
    padding: 0 12px;
    background: color-mix(in srgb, var(--arpia-void) 35%, transparent);
    border: 1px solid var(--t-borde);
    border-radius: 999px;
    color: var(--arpia-text-secondary);
    font: inherit;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.tipo-grafico:hover {
    border-color: var(--t-borde-hover);
    color: var(--arpia-text);
}

.tipo-grafico[aria-pressed="true"] {
    background: var(--arpia-space);
    border-color: var(--arpia-space);
    color: var(--arpia-bg);
}

/* en la vista ampliada el selector queda al pie, sin encoger el grafico */
.ampliado-cuerpo .selector-grafico {
    flex-shrink: 0;
}

/* =========================
   ENTRADA DE PANELES
   =========================
 * dashboard.js pone `.entrando` al terminar la carga y al cambiar las vistas;
 * `--orden` escalona los paneles 70 ms entre si. Se quita al acabar para no
 * pisar el `transform` del hover.
 */

.pagina-tablero .grafico.entrando {
    animation: panel-entrada 420ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
    animation-delay: calc(var(--orden, 0) * 70ms);
}

@keyframes panel-entrada {
    from {
        opacity: 0;
        transform: translateY(12px) scale(0.985);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pagina-tablero .grafico.entrando { animation: none; }
}