/* =====================================================================
   Executive Intelligence - hoja de estilo principal
   Se carga despues de Bootstrap 5 y define el lenguaje visual propio.

   Modo CLARO por defecto. El modo oscuro se activa con
   [data-theme="dark"] en el elemento html, que escribe el servidor con
   la preferencia guardada del usuario y conmuta el boton de la cabecera.
   ===================================================================== */

:root {
    /* Superficies (modo claro) */
    --ei-bg: #f1f4fa;
    --ei-bg-soft: #e8edf7;
    --ei-surface: #ffffff;
    --ei-surface-2: #f7f9fd;
    --ei-surface-3: #eef2fa;
    --ei-border: rgba(15, 23, 42, .10);
    --ei-border-strong: rgba(15, 23, 42, .18);

    /* Texto */
    --ei-text: #111a33;
    --ei-text-soft: #4a5673;
    --ei-text-dim: #6b7898;

    /* Acentos */
    --ei-accent: #6366f1;
    --ei-accent-2: #0e9bb8;
    --ei-accent-soft: rgba(99, 102, 241, .10);
    --ei-success: #0f9d6e;
    --ei-warning: #b45309;
    --ei-danger: #dc2743;
    --ei-info: #0e7490;
    --ei-demo: #9333ea;

    /* Formas */
    --ei-radius: 16px;
    --ei-radius-sm: 10px;
    --ei-shadow: 0 16px 40px rgba(15, 23, 42, .12);
    --ei-shadow-soft: 0 2px 12px rgba(15, 23, 42, .08);
    --ei-sidebar-w: 264px;
    --ei-topbar-h: 68px;

    --ei-font: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    --ei-font-num: "SF Mono", "Cascadia Mono", "Consolas", ui-monospace, monospace;

    color-scheme: light;
}

:root[data-theme="dark"] {
    --ei-bg: #080c18;
    --ei-bg-soft: #0d1324;
    --ei-surface: #121a30;
    --ei-surface-2: #172138;
    --ei-surface-3: #1e2a45;
    --ei-border: rgba(148, 163, 184, .16);
    --ei-border-strong: rgba(148, 163, 184, .28);
    --ei-text: #e8ecf7;
    --ei-text-soft: #a6b0c8;
    --ei-text-dim: #74809c;
    --ei-accent-2: #22d3ee;
    --ei-accent-soft: rgba(99, 102, 241, .14);
    --ei-success: #10b981;
    --ei-warning: #f59e0b;
    --ei-danger: #f43f5e;
    --ei-info: #38bdf8;
    --ei-demo: #a855f7;
    --ei-shadow: 0 18px 48px rgba(2, 6, 23, .55);
    --ei-shadow-soft: 0 4px 18px rgba(2, 6, 23, .35);

    color-scheme: dark;
}

/* ------------------------------------------------------------------ */
/* Base                                                               */
/* ------------------------------------------------------------------ */
* { scrollbar-width: thin; scrollbar-color: var(--ei-border-strong) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--ei-border-strong); border-radius: 8px; border: 3px solid transparent; background-clip: content-box; }

html, body { height: 100%; }

body {
    background: var(--ei-bg);
    color: var(--ei-text);
    font-family: var(--ei-font);
    font-size: .95rem;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

/* Halo de fondo: aporta profundidad sin coste de renderizado. */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(760px 420px at 12% -10%, rgba(99, 102, 241, .12), transparent 60%),
        radial-gradient(680px 400px at 92% 4%, rgba(34, 211, 238, .10), transparent 62%);
}
:root[data-theme="dark"] body::before {
    background:
        radial-gradient(760px 420px at 12% -10%, rgba(99, 102, 241, .20), transparent 60%),
        radial-gradient(680px 400px at 92% 4%, rgba(34, 211, 238, .12), transparent 62%);
}

a { color: var(--ei-accent-2); text-decoration: none; }
a:hover { color: var(--ei-accent); }

.ei-mono { font-family: var(--ei-font-num); font-variant-numeric: tabular-nums; }
.text-soft { color: var(--ei-text-soft) !important; }
.text-dim { color: var(--ei-text-dim) !important; }

/* ------------------------------------------------------------------ */
/* Estructura                                                         */
/* ------------------------------------------------------------------ */
.ei-shell { position: relative; z-index: 1; display: flex; min-height: 100vh; }

.ei-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: var(--ei-sidebar-w);
    background: linear-gradient(180deg, var(--ei-surface) 0%, var(--ei-bg-soft) 100%);
    border-right: 1px solid var(--ei-border);
    display: flex;
    flex-direction: column;
    z-index: 1040;
    transition: transform .26s ease;
}

.ei-brand {
    display: flex; align-items: center; gap: .75rem;
    height: var(--ei-topbar-h);
    padding: 0 1.15rem;
    border-bottom: 1px solid var(--ei-border);
}
.ei-brand-mark {
    width: 38px; height: 38px; flex: 0 0 38px;
    border-radius: 11px;
    background: linear-gradient(135deg, var(--ei-accent), var(--ei-accent-2));
    display: grid; place-items: center;
    color: #fff; font-weight: 700; font-size: 1rem;
    box-shadow: 0 6px 18px rgba(99, 102, 241, .45);
}
.ei-brand-text { line-height: 1.1; min-width: 0; }
.ei-brand-text strong { display: block; font-size: .95rem; letter-spacing: -.01em; }
.ei-brand-text span { font-size: .7rem; color: var(--ei-text-dim); text-transform: uppercase; letter-spacing: .09em; }

.ei-nav { flex: 1 1 auto; overflow-y: auto; padding: 1rem .75rem 1.5rem; }
.ei-nav-label {
    font-size: .68rem; text-transform: uppercase; letter-spacing: .12em;
    color: var(--ei-text-dim); padding: 1rem .6rem .4rem;
}
.ei-nav-item {
    display: flex; align-items: center; gap: .7rem;
    padding: .62rem .7rem;
    border-radius: var(--ei-radius-sm);
    color: var(--ei-text-soft);
    font-weight: 500;
    position: relative;
    transition: background .16s ease, color .16s ease, transform .16s ease;
}
.ei-nav-item i { font-size: 1.05rem; width: 1.3rem; text-align: center; }
.ei-nav-item:hover { background: var(--ei-surface-2); color: var(--ei-text); transform: translateX(2px); }
.ei-nav-item.active { background: var(--ei-accent-soft); color: var(--ei-text); }
.ei-nav-item.active::before {
    content: ""; position: absolute; left: -.75rem; top: 50%; transform: translateY(-50%);
    width: 3px; height: 22px; border-radius: 0 3px 3px 0;
    background: linear-gradient(180deg, var(--ei-accent), var(--ei-accent-2));
}

.ei-sidebar-foot { padding: .9rem; border-top: 1px solid var(--ei-border); }
.ei-user {
    display: flex; align-items: center; gap: .7rem;
    padding: .55rem; border-radius: var(--ei-radius-sm);
    background: var(--ei-surface-2);
}
.ei-avatar {
    width: 36px; height: 36px; flex: 0 0 36px; border-radius: 50%;
    background: linear-gradient(135deg, var(--ei-accent-2), var(--ei-accent));
    color: #fff; display: grid; place-items: center; font-weight: 600; font-size: .8rem;
}

.ei-main { flex: 1 1 auto; min-width: 0; margin-left: var(--ei-sidebar-w); display: flex; flex-direction: column; }

.ei-topbar {
    position: sticky; top: 0; z-index: 1030;
    min-height: var(--ei-topbar-h);
    display: flex; align-items: center; gap: 1rem;
    padding: .7rem 1.5rem;
    background: color-mix(in srgb, var(--ei-bg) 82%, transparent);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--ei-border);
}
@supports not (background: color-mix(in srgb, red 50%, blue)) {
    .ei-topbar { background: var(--ei-bg-soft); }
}

.ei-content { padding: 1.5rem; flex: 1 1 auto; }
.ei-footer {
    padding: 1rem 1.5rem 1.6rem;
    color: var(--ei-text-dim); font-size: .78rem;
    border-top: 1px solid var(--ei-border);
}

/* ------------------------------------------------------------------ */
/* Tarjetas y paneles                                                 */
/* ------------------------------------------------------------------ */
.ei-card {
    background: var(--ei-surface);
    border: 1px solid var(--ei-border);
    border-radius: var(--ei-radius);
    box-shadow: var(--ei-shadow-soft);
    position: relative;
    overflow: hidden;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.ei-card:hover { border-color: var(--ei-border-strong); box-shadow: var(--ei-shadow); }
.ei-card-head {
    display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem;
    padding: 1rem 1.15rem .6rem;
}
.ei-card-title { font-size: .82rem; font-weight: 600; letter-spacing: .02em; color: var(--ei-text-soft); margin: 0; }
.ei-card-body { padding: 0 1.15rem 1.15rem; }
.ei-card-foot {
    padding: .7rem 1.15rem;
    border-top: 1px solid var(--ei-border);
    background: var(--ei-surface-2);
    font-size: .74rem; color: var(--ei-text-dim);
    display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .9rem;
}

/* Tarjeta KPI */
.ei-kpi { display: flex; flex-direction: column; height: 100%; }
.ei-kpi-value {
    font-family: var(--ei-font-num);
    font-size: clamp(1.5rem, 2.4vw, 2.1rem);
    font-weight: 650;
    letter-spacing: -.02em;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
    word-break: break-word;
}
.ei-kpi-value.is-empty { color: var(--ei-text-dim); font-size: 1.2rem; font-weight: 500; }
.ei-kpi-icon {
    width: 36px; height: 36px; flex: 0 0 36px; border-radius: 11px;
    display: grid; place-items: center; font-size: 1.05rem;
    background: var(--ei-accent-soft); color: var(--ei-accent-2);
}
.ei-kpi-meta { display: flex; flex-wrap: wrap; gap: .35rem .8rem; font-size: .74rem; color: var(--ei-text-dim); }

.ei-spark { height: 46px; margin-top: .4rem; }

/* Insignias */
.ei-badge {
    display: inline-flex; align-items: center; gap: .3rem;
    padding: .2rem .55rem;
    border-radius: 999px;
    font-size: .68rem; font-weight: 600; letter-spacing: .04em;
    border: 1px solid transparent;
    text-transform: uppercase;
}
.ei-badge-demo { background: rgba(168, 85, 247, .12); color: #7e22ce; border-color: rgba(168, 85, 247, .4); }
.ei-badge-ok { background: rgba(16, 185, 129, .12); color: #047857; border-color: rgba(16, 185, 129, .35); }
.ei-badge-warn { background: rgba(245, 158, 11, .14); color: #b45309; border-color: rgba(245, 158, 11, .4); }
.ei-badge-danger { background: rgba(244, 63, 94, .10); color: #be123c; border-color: rgba(244, 63, 94, .35); }
.ei-badge-muted { background: var(--ei-surface-3); color: var(--ei-text-soft); border-color: var(--ei-border); }
:root[data-theme="dark"] .ei-badge-demo { color: #d8b4fe; background: rgba(168, 85, 247, .14); }
:root[data-theme="dark"] .ei-badge-ok { color: #6ee7b7; background: rgba(16, 185, 129, .13); }
:root[data-theme="dark"] .ei-badge-warn { color: #fcd34d; background: rgba(245, 158, 11, .13); }
:root[data-theme="dark"] .ei-badge-danger { color: #fda4af; background: rgba(244, 63, 94, .13); }

/* Aviso de datos de demostracion */
.ei-demo-banner {
    border: 1px dashed rgba(168, 85, 247, .45);
    background: linear-gradient(90deg, rgba(168, 85, 247, .12), rgba(99, 102, 241, .06));
    border-radius: var(--ei-radius);
    padding: .85rem 1.1rem;
    display: flex; align-items: flex-start; gap: .75rem;
}
.ei-demo-banner i { color: var(--ei-demo); font-size: 1.2rem; }

/* Selectores de contexto en la cabecera */
.ei-context {
    display: flex; align-items: center; gap: .5rem;
    background: var(--ei-surface-2);
    border: 1px solid var(--ei-border);
    border-radius: 999px;
    padding: .3rem .4rem .3rem .85rem;
    min-width: 0;
}
.ei-context label { font-size: .66rem; text-transform: uppercase; letter-spacing: .09em; color: var(--ei-text-dim); }
.ei-context select {
    background: transparent; border: 0; color: var(--ei-text);
    font-weight: 600; font-size: .85rem; max-width: 260px;
    padding: .15rem 1.4rem .15rem .35rem;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%236b7898'%3E%3Cpath d='M4 6l4 4 4-4z'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right .35rem center; background-size: 14px;
    cursor: pointer;
}
:root[data-theme="dark"] .ei-context select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23a6b0c8'%3E%3Cpath d='M4 6l4 4 4-4z'/%3E%3C/svg%3E");
}
.ei-context select:focus { outline: 2px solid var(--ei-accent); outline-offset: 2px; border-radius: 6px; }
.ei-context select option { background: var(--ei-surface); color: var(--ei-text); }

/* Botones */
.btn-ei {
    background: linear-gradient(135deg, var(--ei-accent), #4f46e5);
    border: 0; color: #fff; font-weight: 600;
    border-radius: var(--ei-radius-sm);
    padding: .55rem 1.1rem;
    box-shadow: 0 8px 22px rgba(79, 70, 229, .35);
    transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}
.btn-ei:hover { color: #fff; transform: translateY(-1px); filter: brightness(1.06); box-shadow: 0 12px 28px rgba(79, 70, 229, .45); }
.btn-ei:active { transform: translateY(0); }
.btn-ghost {
    background: var(--ei-surface-2); border: 1px solid var(--ei-border);
    color: var(--ei-text-soft); border-radius: var(--ei-radius-sm);
    padding: .45rem .8rem; font-weight: 500;
    transition: background .16s ease, color .16s ease, border-color .16s ease;
}
.btn-ghost:hover { background: var(--ei-surface-3); color: var(--ei-text); border-color: var(--ei-border-strong); }
.btn-icon { width: 38px; height: 38px; display: grid; place-items: center; padding: 0; }

/* Formularios */
.form-control, .form-select {
    background: var(--ei-surface-2);
    border: 1px solid var(--ei-border);
    color: var(--ei-text);
    border-radius: var(--ei-radius-sm);
    padding: .62rem .85rem;
}
.form-control:focus, .form-select:focus {
    background: var(--ei-surface-2);
    border-color: var(--ei-accent);
    box-shadow: 0 0 0 .2rem var(--ei-accent-soft);
    color: var(--ei-text);
}
.form-control::placeholder { color: var(--ei-text-dim); }
.form-label { font-size: .78rem; font-weight: 600; color: var(--ei-text-soft); letter-spacing: .02em; }
.form-text { color: var(--ei-text-dim); }

/* Tablas */
.ei-table { width: 100%; font-size: .85rem; border-collapse: separate; border-spacing: 0; }
.ei-table thead th {
    position: sticky; top: 0; z-index: 1;
    background: var(--ei-surface-2);
    color: var(--ei-text-dim);
    font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 600;
    padding: .6rem .8rem; border-bottom: 1px solid var(--ei-border); white-space: nowrap;
}
.ei-table tbody td { padding: .6rem .8rem; border-bottom: 1px solid var(--ei-border); color: var(--ei-text-soft); }
.ei-table tbody tr:hover td { background: var(--ei-surface-2); color: var(--ei-text); }
.ei-table .num { text-align: right; font-family: var(--ei-font-num); font-variant-numeric: tabular-nums; color: var(--ei-text); }
.ei-table-wrap { max-height: 340px; overflow: auto; border-radius: var(--ei-radius-sm); }

/* Graficos */
.ei-chart { width: 100%; min-height: 240px; }
.ei-chart-lg { min-height: 300px; }

/* Barras de progreso de desglose */
.ei-bar-row { display: grid; grid-template-columns: 1fr auto; gap: .2rem .8rem; margin-bottom: .85rem; }
.ei-bar-label { font-size: .82rem; color: var(--ei-text-soft); }
.ei-bar-value { font-family: var(--ei-font-num); font-size: .85rem; color: var(--ei-text); }
.ei-bar-track { grid-column: 1 / -1; height: 7px; border-radius: 999px; background: var(--ei-surface-3); overflow: hidden; }
.ei-bar-fill {
    height: 100%; border-radius: 999px;
    background: linear-gradient(90deg, var(--ei-accent), var(--ei-accent-2));
    width: 0; transition: width .9s cubic-bezier(.2, .8, .2, 1);
}

/* Asistente IA (marco preparado para la FASE 5) */
.ei-assistant { display: flex; flex-direction: column; height: 100%; min-height: 260px; }
.ei-assistant-log { flex: 1 1 auto; overflow-y: auto; padding: .4rem 0; display: flex; flex-direction: column; gap: .6rem; }
.ei-msg { max-width: 92%; padding: .6rem .85rem; border-radius: 14px; font-size: .85rem; line-height: 1.45; }
.ei-msg-bot { background: var(--ei-surface-2); border: 1px solid var(--ei-border); align-self: flex-start; }
.ei-msg-user { background: var(--ei-accent-soft); border: 1px solid rgba(99, 102, 241, .3); align-self: flex-end; }
.ei-suggestion {
    background: var(--ei-surface-2); border: 1px solid var(--ei-border);
    color: var(--ei-text-soft); border-radius: 999px;
    padding: .3rem .7rem; font-size: .76rem; cursor: pointer;
    transition: border-color .16s ease, color .16s ease;
}
.ei-suggestion:hover { border-color: var(--ei-accent); color: var(--ei-text); }

/* Avisos */
.ei-alert {
    border-radius: var(--ei-radius-sm);
    border: 1px solid var(--ei-border);
    background: var(--ei-surface-2);
    padding: .75rem 1rem;
    display: flex; gap: .65rem; align-items: flex-start;
    font-size: .86rem;
}
.ei-alert-success { border-color: rgba(16, 185, 129, .4); background: rgba(16, 185, 129, .1); }
.ei-alert-danger { border-color: rgba(244, 63, 94, .4); background: rgba(244, 63, 94, .1); }
.ei-alert-warning { border-color: rgba(245, 158, 11, .4); background: rgba(245, 158, 11, .1); }
.ei-alert-info { border-color: rgba(56, 189, 248, .4); background: rgba(56, 189, 248, .1); }

/* Pantallas de acceso */
.ei-auth { min-height: 100vh; display: grid; place-items: center; padding: 1.5rem; position: relative; z-index: 1; }
.ei-auth-card {
    width: 100%; max-width: 430px;
    background: var(--ei-surface);
    border: 1px solid var(--ei-border);
    border-radius: 22px;
    box-shadow: var(--ei-shadow);
    padding: 2.2rem;
}
.ei-auth-mark {
    width: 54px; height: 54px; border-radius: 16px; margin: 0 auto 1.1rem;
    background: linear-gradient(135deg, var(--ei-accent), var(--ei-accent-2));
    display: grid; place-items: center; color: #fff; font-size: 1.4rem;
    box-shadow: 0 10px 30px rgba(99, 102, 241, .45);
}

/* Estado de carga */
.ei-skeleton {
    border-radius: var(--ei-radius-sm);
    background: linear-gradient(90deg, var(--ei-surface-2) 25%, var(--ei-surface-3) 37%, var(--ei-surface-2) 63%);
    background-size: 400% 100%;
    animation: ei-shimmer 1.3s ease-in-out infinite;
    min-height: 1rem;
}
@keyframes ei-shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }

/* Microanimaciones de entrada */
.ei-rise { animation: ei-rise .45s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes ei-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.ei-spin { animation: ei-spin 1s linear infinite; }
@keyframes ei-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* Avisos flotantes */
.ei-toasts { position: fixed; right: 1.1rem; bottom: 1.1rem; z-index: 1080; display: flex; flex-direction: column; gap: .6rem; max-width: 360px; }
.ei-toast {
    background: var(--ei-surface); border: 1px solid var(--ei-border-strong);
    border-radius: var(--ei-radius-sm); box-shadow: var(--ei-shadow);
    padding: .75rem .9rem; font-size: .85rem;
    display: flex; gap: .6rem; align-items: flex-start;
}

/* ------------------------------------------------------------------ */
/* Responsive                                                         */
/* ------------------------------------------------------------------ */
.ei-backdrop { position: fixed; inset: 0; background: rgba(2, 6, 23, .6); z-index: 1035; display: none; }

@media (max-width: 1199.98px) {
    .ei-context select { max-width: 180px; }
}

@media (max-width: 991.98px) {
    .ei-sidebar { transform: translateX(-100%); box-shadow: var(--ei-shadow); }
    body.ei-nav-open .ei-sidebar { transform: none; }
    body.ei-nav-open .ei-backdrop { display: block; }
    .ei-main { margin-left: 0; }
    .ei-content { padding: 1.1rem; }
    .ei-topbar { padding: .6rem 1rem; }
}

@media (max-width: 767.98px) {
    .ei-kpi-value { font-size: 1.45rem; }
    .ei-context { width: 100%; }
    .ei-context select { max-width: none; width: 100%; }
}

@media (min-width: 1600px) {
    .ei-content { padding: 2rem 2.4rem; }
}

@media print {
    .ei-sidebar, .ei-topbar, .ei-footer, .ei-toasts { display: none !important; }
    .ei-main { margin-left: 0; }
    body { background: #fff; color: #000; }
}

/* ===================================================================
   FASE 5 - Asistente de IA (comparacion de modelos)
   =================================================================== */
.text-accent { color: var(--ei-accent); }


.ei-check { cursor: pointer; }
.ei-check input { accent-color: var(--ei-accent); }

.ei-provider-row { padding-bottom: .75rem; border-bottom: 1px solid var(--ei-border); }
.ei-provider-row:last-child { padding-bottom: 0; border-bottom: 0; }

/* Rejilla de comparacion: una columna por modelo, scroll horizontal si hace falta */
.ei-compare-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
    align-items: start;
}
.ei-compare-col { margin: 0; }

/* Respuesta del asistente: se lee en pantalla y en movil, asi que el
   cuerpo va un punto mas grande que el resto de la interfaz. */
.ai-answer {
    font-size: 1rem;
    line-height: 1.62;
    color: var(--ei-text);
    white-space: normal;
    word-break: break-word;
}
.ai-answer > *:first-child { margin-top: 0; }
.ai-answer > *:last-child { margin-bottom: 0; }
.ai-answer p { margin: 0 0 .7rem; }
.ai-answer strong { color: var(--ei-text); font-weight: 600; }
.ai-answer h3, .ai-answer h4, .ai-answer h5, .ai-answer h6 {
    font-size: 1.02rem;
    font-weight: 600;
    margin: 1.1rem 0 .5rem;
    color: var(--ei-text);
}
.ai-answer ul, .ai-answer ol { margin: 0 0 .7rem; padding-left: 1.25rem; }
.ai-answer li { margin-bottom: .3rem; }
.ai-answer code {
    font-family: var(--ei-font-num);
    font-size: .92em;
    background: var(--ei-surface-3);
    border-radius: 4px;
    padding: .05rem .3rem;
}
.ai-answer blockquote {
    margin: 0 0 .7rem;
    padding-left: .7rem;
    border-left: 3px solid var(--ei-border);
    color: var(--ei-text-soft);
}
.ai-answer hr { border: 0; border-top: 1px solid var(--ei-border); margin: .9rem 0; }

/* Tablas de la respuesta: lo que mas se lee y lo que antes se exporta. */
.ai-table-wrap { overflow-x: auto; margin: 0 0 .8rem; -webkit-overflow-scrolling: touch; }
.ai-table {
    width: 100%;
    font-size: .92rem;
    border-collapse: separate;
    border-spacing: 0;
}
.ai-table th, .ai-table td {
    padding: .45rem .6rem;
    border-bottom: 1px solid var(--ei-border);
    text-align: left;
    vertical-align: top;
}
.ai-table thead th {
    background: var(--ei-surface-3);
    color: var(--ei-text-soft);
    font-weight: 600;
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    white-space: nowrap;
}
.ai-table tbody tr:last-child td { border-bottom: 0; }
.ai-table td.num {
    font-family: var(--ei-font-num);
    text-align: right;
    white-space: nowrap;
    color: var(--ei-text);
}

/* Barra de compartir: WhatsApp, correo, copiar y Excel. */
.ai-share {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    padding-top: .6rem;
    border-top: 1px solid var(--ei-border);
}
.ai-share .btn-ghost { font-size: .78rem; padding: .25rem .55rem; }

.ai-question { font-size: 1rem; }

/* La pregunta encima de la respuesta: contexto al leerla o al compartirla. */
.ai-asked {
    font-size: .84rem;
    color: var(--ei-text-soft);
    border-left: 2px solid var(--ei-border-strong);
    padding-left: .6rem;
    margin: 0 0 .9rem;
}

@media (max-width: 575.98px) {
    .ai-answer { font-size: 1.02rem; }
    .ai-share .btn-ghost { flex: 1 1 auto; justify-content: center; }
}
.ai-tools { display: flex; flex-wrap: wrap; gap: .3rem; }

.ai-metrics {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    padding-top: .6rem;
    border-top: 1px solid var(--ei-border);
}
.ai-metric {
    font-family: var(--ei-font-num);
    font-size: .76rem;
    color: var(--ei-text-soft);
    white-space: nowrap;
}