/* ============================================================
   BALEXUS — Demo enterprise
   Solo se carga en /demo (extraCss en el partial de head).
   ============================================================ */
.demo-hero { padding-bottom: 40px; }
.demo-hero .px-lede { max-width: 62ch; }
.demo-aviso {
    margin-top: 18px; font-size: 13px; color: var(--px-faint); max-width: 62ch;
    border-left: 2px solid var(--px-line-strong); padding-left: 14px;
}


/* Cifras de la portada. Las de capacidad se renderizan en el servidor y
   siempre están; las de uso (.demo-cifra--uso) nacen con [hidden] y sólo
   aparecen cuando el uso real alcanza el umbral — un contador flojo resta. */
.demo-cifras {
    display: flex; flex-wrap: wrap; gap: 16px 36px;
    margin: 26px 0 0; padding: 18px 0 0;
    border-top: 1px solid var(--px-line);
    max-width: 66ch;
}
.demo-cifra[hidden] { display: none; }
.demo-cifra dt {
    font-family: var(--px-mono); font-size: clamp(23px, 2.8vw, 29px); font-weight: 600;
    color: var(--accent-primary); line-height: 1.1;
}
.demo-cifra dd {
    margin: 5px 0 0; font-size: 12.5px; color: var(--px-faint);
    line-height: 1.45; max-width: 24ch;
}
.demo-cifra--uso dt { color: var(--accent-secondary); }

/* Salto entre demos: quien cae en la equivocada tiene que poder cambiarse sin
   volver al menú. Va debajo de las cifras, no arriba, para que no compita con
   el titular. */
.demo-switch {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
    margin-top: 22px; font-size: 13px; color: var(--px-faint);
}
.demo-switch a {
    color: var(--text-secondary); text-decoration: none;
    border: 1px solid var(--px-line-strong); border-radius: 100px; padding: 6px 14px;
    transition: color .15s, border-color .15s;
}
.demo-switch a:hover { color: var(--accent-primary); border-color: var(--accent-primary); }

/* La nota del panel es donde se dice que el agente no acepta archivos. Es la
   promesa de gobierno del dato, así que se ve, no se esconde en el prompt. */
.demo-panel-nota {
    margin: 0 0 26px; font-size: 12.5px; line-height: 1.5; color: var(--px-faint);
    border-left: 2px solid rgba(232,184,107,.4); padding-left: 12px;
}

.demo-section { padding-top: 0; }
.demo-layout { display: grid; grid-template-columns: 0.72fr 1.28fr; gap: 32px; align-items: start; }

.demo-aside-title { font-size: 13px; text-transform: uppercase; letter-spacing: .1em; color: var(--accent-primary); margin-bottom: 14px; font-family: var(--px-mono); }
.demo-caps { list-style: none; display: flex; flex-direction: column; gap: 14px; margin: 0 0 26px; padding: 0; }
.demo-caps li { border-left: 2px solid var(--px-line-strong); padding-left: 14px; }
.demo-caps b { display: block; font-size: 14.5px; color: var(--text-primary); margin-bottom: 3px; }
.demo-caps span { font-size: 12.5px; color: var(--text-secondary); line-height: 1.45; }

.demo-sugerencias { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.demo-sug-title { font-family: var(--px-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--px-faint); margin-bottom: 2px; }
.demo-sug {
    text-align: left; font-family: inherit; font-size: 13px; color: var(--text-secondary); cursor: pointer;
    background: var(--bg-card); border: 1px solid var(--px-line); border-radius: 8px; padding: 9px 12px; width: 100%;
    transition: border-color .15s, color .15s;
}
.demo-sug:hover { border-color: var(--accent-primary); color: var(--text-primary); }

.demo-chat { border: 1px solid var(--px-line-strong); border-radius: 14px; background: var(--bg-card); overflow: hidden; display: flex; flex-direction: column; min-height: 560px; }
.demo-transcript { flex: 1; overflow-y: auto; padding: 22px; display: flex; flex-direction: column; gap: 20px; max-height: 620px; }
.demo-msg { display: flex; flex-direction: column; gap: 6px; }
.demo-role { font-family: var(--px-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--px-faint); }
.demo-msg--user .demo-role { color: var(--accent-secondary); }
.demo-msg--agent .demo-role { color: var(--accent-primary); }
.demo-text { font-size: 14.5px; line-height: 1.62; color: var(--text-primary); }
.demo-text p { margin: 0 0 10px; }
.demo-text p:last-child { margin-bottom: 0; }
.demo-text h4 { font-size: 14.5px; margin: 14px 0 8px; color: var(--text-primary); }
.demo-text ul { margin: 0 0 10px; padding-left: 18px; }
.demo-text li { margin-bottom: 5px; color: var(--text-secondary); }
.demo-text strong { color: var(--text-primary); }
.demo-text code { font-family: var(--px-mono); font-size: 12.5px; color: var(--accent-primary); }
.demo-msg--user .demo-text { color: var(--text-secondary); }
.demo-msg--cargando .demo-text { color: var(--px-faint); font-style: italic; }

/* Las herramientas consultadas: esto es lo que hace visible el trabajo del agente */
.demo-tools { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 2px; }
.demo-tool {
    font-family: var(--px-mono); font-size: 10.5px; color: var(--accent-primary);
    background: var(--px-accent-dim); border: 1px solid rgba(56, 214, 196, .28);
    border-radius: 100px; padding: 3px 10px;
}

.demo-table { width: 100%; border-collapse: collapse; margin: 10px 0 14px; font-size: 13px; display: block; overflow-x: auto; }
.demo-table th, .demo-table td { text-align: left; padding: 8px 12px; border-bottom: 1px solid var(--px-line); white-space: nowrap; }
.demo-table th { font-family: var(--px-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--px-faint); font-weight: 600; }
.demo-table td { color: var(--text-secondary); }
.demo-table tbody tr:last-child td { border-bottom: none; }

.demo-input { display: flex; gap: 10px; align-items: flex-end; padding: 14px; border-top: 1px solid var(--px-line); }
.demo-input textarea {
    flex: 1; resize: none; font-family: inherit; font-size: 14.5px; color: var(--text-primary);
    background: var(--bg-primary); border: 1px solid var(--px-line-strong); border-radius: 10px; padding: 12px 14px; line-height: 1.5;
}
.demo-input textarea:focus { outline: none; border-color: var(--accent-primary); }
.demo-input .px-btn { padding: 12px 22px; }

@media (max-width: 940px) {
    .demo-layout { grid-template-columns: 1fr; }
    .demo-transcript { max-height: 480px; }
}

/* ============================================================
   Índice de demos (/demos)
   Tres tarjetas de igual peso: ninguna área es la principal, y la
   persona reconoce la suya por el rol, no por el nombre del producto.
   ============================================================ */
.demos-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: stretch; }
.demos-card {
    border: 1px solid var(--px-line); border-radius: 16px; background: var(--bg-card);
    padding: 28px 26px 26px; display: flex; flex-direction: column;
    transition: border-color .18s, transform .18s;
}
.demos-card:hover { border-color: rgba(56,214,196,.4); transform: translateY(-2px); }
.demos-card-icon {
    width: 42px; height: 42px; border-radius: 11px; display: grid; place-items: center;
    background: var(--px-accent-dim); border: 1px solid rgba(56,214,196,.28); color: var(--accent-primary);
    margin-bottom: 18px;
}
.demos-card-icon svg { width: 20px; height: 20px; }
.demos-card-rol {
    font-family: var(--px-mono); font-size: 10.5px; letter-spacing: .12em;
    text-transform: uppercase; color: var(--accent-primary); margin-bottom: 8px;
}
.demos-card-titulo { font-size: 20px; line-height: 1.25; color: var(--text-primary); margin: 0 0 10px; }
.demos-card-para { font-size: 12.5px; color: var(--px-faint); margin: 0 0 14px; }
.demos-card-resumen { font-size: 14px; color: var(--text-secondary); line-height: 1.6; margin: 0 0 16px; }
.demos-card-gancho {
    font-size: 13.5px; color: var(--text-secondary); line-height: 1.55; margin: 0 0 18px;
    border-left: 2px solid var(--accent-primary); padding-left: 14px;
}
.demos-card-gancho b { color: var(--text-primary); }
/* flex:1 empuja el botón al fondo: con tarjetas de texto desigual, tres
   botones a distinta altura se ven como un error de maquetación. */
.demos-card-cifras { list-style: none; padding: 0; margin: 0 0 22px; display: flex; flex-direction: column; gap: 7px; flex: 1; }
.demos-card-cifras li { font-size: 12.5px; color: var(--px-faint); line-height: 1.45; }
.demos-card-cifras b { font-family: var(--px-mono); font-size: 14px; color: var(--text-primary); margin-right: 4px; }
.demos-card-cta { align-self: flex-start; }

.demos-nota {
    margin: 34px auto 0; max-width: 68ch; text-align: center;
    font-size: 13.5px; color: var(--px-faint); line-height: 1.65;
}
.demos-link {
    background: none; border: none; padding: 0; font: inherit; cursor: pointer;
    color: var(--accent-primary); border-bottom: 1px solid rgba(56,214,196,.35);
}

/* 3 → 2 → 1: el salto directo de tres a una dejaba una tarjeta enorme y sola
   en tablets. */
@media (max-width: 980px) { .demos-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .demos-grid { grid-template-columns: 1fr; } }

/* ============================================================
   Gráficos dentro de la conversación
   Se pintan con los datos que devolvió la herramienta, nunca con lo
   que escribe el modelo. Van después del texto: primero la lectura,
   luego la forma.
   ============================================================ */
.demo-graficos { margin-top: 16px; display: flex; flex-direction: column; gap: 16px; }
.gr {
    margin: 0; padding: 16px 16px 12px;
    border: 1px solid var(--px-line); border-radius: 12px; background: rgba(148,163,184,.04);
    overflow-x: auto;
}
.gr-titulo {
    font-family: var(--px-mono); font-size: 10.5px; letter-spacing: .1em;
    text-transform: uppercase; color: var(--px-faint); margin-bottom: 12px;
}
.gr svg { display: block; min-width: 420px; }
/* La torta y el mapa traen su propio ancho acotado y centrado: no deben
   estirarse al mínimo de 420px de los gráficos anchos, ni mostrar barras de
   desplazamiento —su contenido ya cabe centrado. */
.gr svg.gr-fit { min-width: 0; margin: 0 auto; }
.gr--mapa, .gr--torta { overflow: hidden; }

/* Tooltip flotante de los gráficos (mapa, líneas, torta, barras). */
.gr-tip {
    position: fixed; z-index: 60; pointer-events: none;
    background: rgba(9, 14, 24, .96); color: var(--text-primary);
    border: 1px solid var(--px-line-strong); border-radius: 8px;
    padding: 7px 11px; font-size: 12.5px; line-height: 1.35; max-width: 260px;
    box-shadow: 0 8px 24px rgba(0,0,0,.4);
}
.gr-tip[hidden] { display: none; }
.gr-nota { margin: 10px 0 0; font-size: 11.5px; color: var(--px-faint); line-height: 1.45; }
.gr-leyenda { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 8px; font-size: 11px; color: var(--px-faint); }
.gr-leyenda span { display: inline-flex; align-items: center; gap: 6px; }
.gr-leyenda i { width: 10px; height: 3px; border-radius: 2px; display: inline-block; }

/* Elementos clicables del filtro cruzado (barras, porciones, departamentos,
   puntos). El cursor y el realce dicen "esto filtra". */
.gr-click { cursor: pointer; transition: opacity .15s, filter .15s; }
.gr-click:hover { filter: brightness(1.15); }
.gr-click:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: 1px; }
.gr-sel { stroke: var(--accent-primary) !important; stroke-width: 2 !important; }
.gr-atenuado { opacity: .38; }

/* Escala de color del mapa coroplético: de poco a mucho ingreso. */
.gr-mapa-escala {
    display: flex; align-items: center; gap: 8px; margin-top: 10px;
    font-family: var(--px-mono); font-size: 10px; color: var(--px-faint);
}
.gr-mapa-escala i {
    flex: 1; height: 6px; border-radius: 3px; display: block;
    background: linear-gradient(90deg, rgb(16,43,48), rgb(56,214,196));
}

/* ============================================================
   Tablero de la demo de finanzas
   Va arriba del chat, no al lado: primero se ve el estado del
   negocio y después se pregunta por él. En móvil el orden es el
   mismo, que es como se lee un informe.
   ============================================================ */
.demo-tablero-sec { padding-top: 0; padding-bottom: 24px; }
.demo-tablero-head {
    display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
    gap: 12px; margin-bottom: 18px;
}
.demo-tablero-head .demo-aside-title { margin: 0; }
.demo-periodo { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--px-faint); }
.demo-periodo select {
    font-family: var(--px-mono); font-size: 12.5px; color: var(--text-primary);
    background: var(--bg-card); border: 1px solid var(--px-line-strong); border-radius: 8px;
    padding: 6px 10px; cursor: pointer;
}

/* Chips de los filtros activos del tablero. */
.demo-filtros { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 16px; }
.demo-filtros-lbl {
    font-family: var(--px-mono); font-size: 10px; letter-spacing: .08em;
    text-transform: uppercase; color: var(--px-faint); margin-right: 2px;
}
.demo-chip {
    display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
    border: 1px solid var(--accent-primary); border-radius: 100px;
    background: color-mix(in srgb, var(--accent-primary) 12%, transparent);
    color: var(--text-primary); padding: 5px 11px; font-size: 12px; font-family: inherit;
}
.demo-chip:hover { background: color-mix(in srgb, var(--accent-primary) 20%, transparent); }
.demo-chip-dim { font-family: var(--px-mono); font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--px-faint); }
.demo-chip-val { font-weight: 600; }
.demo-chip-x { color: var(--accent-primary); font-size: 11px; }
.demo-chip--todos { border-style: dashed; color: var(--px-faint); background: transparent; }

.demo-kpis { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; margin-bottom: 22px; }
.demo-kpi {
    border: 1px solid var(--px-line); border-radius: 12px; background: var(--bg-card);
    padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; min-width: 0;
}
.demo-kpi-lbl {
    font-family: var(--px-mono); font-size: 10px; letter-spacing: .08em;
    text-transform: uppercase; color: var(--px-faint);
}
.demo-kpi-num { font-size: clamp(16px, 1.6vw, 20px); color: var(--text-primary); line-height: 1.15; }

/* Badge de variación: pill con flecha, % y el rótulo "vs. mes anterior".
   Verde sube y ámbar baja; el rojo se reserva para el semáforo de cartera,
   que es lo único que exige acción. */
.demo-kpi-var {
    display: inline-flex; align-items: center; gap: 5px; align-self: flex-start;
    margin-top: 2px; font-size: 11px; padding: 3px 9px 3px 7px; border-radius: 100px;
    border: 1px solid transparent;
}
.demo-kpi-arrow { font-size: 9px; line-height: 1; }
.demo-kpi-var i { font-style: normal; color: var(--px-faint); font-size: 10px; }
.demo-kpi-var.sube { color: var(--accent-primary); background: color-mix(in srgb, var(--accent-primary) 12%, transparent); border-color: color-mix(in srgb, var(--accent-primary) 30%, transparent); }
.demo-kpi-var.baja { color: var(--px-warm); background: color-mix(in srgb, var(--px-warm) 12%, transparent); border-color: color-mix(in srgb, var(--px-warm) 30%, transparent); }

/* Semáforo (cartera vencida): un punto de color y su estado. */
.demo-kpi-sem {
    display: inline-flex; align-items: center; gap: 6px; align-self: flex-start;
    margin-top: 2px; font-size: 11px; padding: 3px 10px 3px 8px; border-radius: 100px;
    border: 1px solid transparent;
}
.demo-kpi-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; box-shadow: 0 0 0 3px transparent; }
.demo-kpi-sem.sem-ok { color: var(--accent-primary); background: color-mix(in srgb, var(--accent-primary) 12%, transparent); }
.demo-kpi-sem.sem-ok .demo-kpi-dot { background: var(--accent-primary); }
.demo-kpi-sem.sem-alerta { color: var(--px-warm); background: color-mix(in srgb, var(--px-warm) 14%, transparent); }
.demo-kpi-sem.sem-alerta .demo-kpi-dot { background: var(--px-warm); }
.demo-kpi-sem.sem-critico { color: #ff6b6b; background: rgba(255,107,107,.14); }
.demo-kpi-sem.sem-critico .demo-kpi-dot { background: #ff6b6b; box-shadow: 0 0 0 3px rgba(255,107,107,.18); }

.demo-tablero-graficos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.demo-tablero-graficos .gr { margin: 0; }
/* Si quedara un gráfico impar, ocupa el ancho completo en vez de dejar media
   rejilla vacía. */
.demo-tablero-graficos .gr:last-child:nth-child(odd) { grid-column: 1 / -1; }

@media (max-width: 1100px) { .demo-kpis { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 860px) {
    .demo-tablero-graficos { grid-template-columns: 1fr; }
    .demo-kpis { grid-template-columns: repeat(2, 1fr); }
}
/* En móvil estrecho: el selector de periodo ocupa toda la línea y los KPI
   aprietan un poco su relleno para no desbordar a dos columnas. */
@media (max-width: 520px) {
    .demo-tablero-head { flex-direction: column; align-items: stretch; gap: 10px; }
    .demo-periodo { justify-content: space-between; }
    .demo-periodo select { flex: 1; }
    .demo-kpi { padding: 12px 12px; }
    .demo-kpi-num { font-size: 17px; }
    .demo-filtros { gap: 6px; }
}
/* Muy estrecho (móviles pequeños): una sola columna de KPI antes que apretarlos
   ilegibles. */
@media (max-width: 380px) { .demo-kpis { grid-template-columns: 1fr; } }