/* ============================================================
   LIA v2 — Estilos custom (sobre MDB)
   Replica visual del v1 React+Tailwind
   ============================================================ */

:root {
    --lia-primary: #00AEA9;
    --lia-primary-dark: #008e8a;
    --lia-primary-light: #d6f3f2;
    --lia-bg: #f4f6f9;
    --lia-sidebar-bg: #ffffff;
    --lia-sidebar-border: #e8eaef;
    --lia-text: #1f2937;
    --lia-text-soft: #4b5563;
    --lia-text-mute: #9ca3af;
    --lia-card: #ffffff;
    --lia-card-border: #eef0f4;
    --lia-warning-bg: #fff5e6;
    --lia-danger-bg: #fde7e7;
    --lia-danger: #e74c3c;
    --lia-danger-soft: #fbe1e1;
    --lia-warning: #f59e0b;
    --lia-success: #16a34a;
    --lia-star: #fbbf24;
    --lia-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 1px 3px rgba(15, 23, 42, .06);
    --lia-shadow-hover: 0 4px 12px rgba(15, 23, 42, .08);
    --lia-radius: 12px;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
    color: var(--lia-text);
    background: var(--lia-bg);
    -webkit-font-smoothing: antialiased;
}

a { text-decoration: none; color: inherit; }

/* ----------- Layout shell ----------- */
.app-shell {
    display: flex;
    min-height: 100vh;
}

.app-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* ----------- Sidebar ----------- */
.lia-sidebar {
    width: 240px;
    flex-shrink: 0;
    background: var(--lia-sidebar-bg);
    border-right: 1px solid var(--lia-sidebar-border);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
}

.lia-sidebar-logo {
    padding: 24px 20px 12px;
    text-align: left;
}

.lia-sidebar-logo img {
    height: 38px;
    width: auto;
    object-fit: contain;
}

.lia-sidebar-nav {
    flex: 1;
    padding: 12px 12px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.lia-nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-radius: 10px;
    color: var(--lia-text-soft);
    font-size: 14px;
    font-weight: 500;
    transition: background .15s, color .15s;
    cursor: pointer;
}
.lia-nav-item i {
    width: 18px;
    font-size: 14px;
    color: var(--lia-text-mute);
    flex-shrink: 0;
}
.lia-nav-item:hover {
    background: #f6f7f9;
    color: var(--lia-text);
}
.lia-nav-item.active {
    background: var(--lia-primary-light);
    color: var(--lia-primary);
    font-weight: 600;
}
.lia-nav-item.active i {
    color: var(--lia-primary);
}

.lia-sidebar-footer {
    padding: 14px 20px;
    border-top: 1px solid var(--lia-sidebar-border);
    font-size: 11px;
    color: var(--lia-text-mute);
}

/* ----------- Topbar ----------- */
.lia-topbar {
    background: #ffffff;
    border-bottom: 1px solid var(--lia-sidebar-border);
    padding: 14px 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.lia-topbar-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--lia-text);
    display: flex;
    align-items: center;
    gap: 10px;
}
.lia-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--lia-primary);
    box-shadow: 0 0 0 3px rgba(0, 174, 169, .15);
}
.lia-icon-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid var(--lia-sidebar-border);
    background: #fff;
    color: var(--lia-text-soft);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all .15s;
}
.lia-icon-btn:hover {
    border-color: var(--lia-primary);
    color: var(--lia-primary);
}
.lia-icon-btn.active {
    border-color: var(--lia-primary);
    color: var(--lia-primary);
    background: var(--lia-primary-light);
}
.lia-icon-btn .help-dot {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 6px;
    height: 6px;
    background: var(--lia-danger);
    border-radius: 50%;
}
.lia-icon-btn { position: relative; }

[x-cloak] { display: none !important; }

.help-menu {
    position: fixed;
    top: 60px;
    right: 16px;
    width: 320px;
    max-width: calc(100vw - 32px);
    max-height: calc(100vh - 80px);
    overflow-y: auto;
    background: white;
    border: 1px solid var(--lia-card-border);
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(15, 23, 42, .15);
    z-index: 1050;
}
.help-menu-head {
    padding: 14px 16px;
    background: var(--lia-primary-light);
    color: var(--lia-primary);
}
.help-menu-head strong { font-size: 14px; }
.help-menu-head p { margin: 2px 0 0; font-size: 12px; color: var(--lia-text-soft); }
.help-menu-body { padding: 14px 16px; font-size: 13px; color: var(--lia-text-soft); line-height: 1.55; }
.help-menu-body p { margin: 0 0 8px; }
.help-menu-body p:last-child { margin: 0; }
.help-menu-body ul { margin: 0; padding-left: 18px; }
.help-menu-body li { margin-bottom: 4px; }
.help-menu-body li strong { color: var(--lia-text); }
.help-menu-foot {
    padding: 10px 14px;
    border-top: 1px solid var(--lia-card-border);
    text-align: right;
}

/* ----------- Content ----------- */
.lia-content {
    padding: 28px 32px;
    flex: 1;
    max-width: 1400px;
    width: 100%;
}

/* ----------- Page header (titulo + chip + acciones) ----------- */
.page-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 24px;
}
.page-head .lhs {
    display: flex;
    align-items: center;
    gap: 12px;
}
.page-head h1 {
    font-size: 26px;
    font-weight: 700;
    color: var(--lia-text);
    margin: 0;
    letter-spacing: -.01em;
}
.chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    background: #f1f3f7;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    color: var(--lia-text-soft);
}
.page-head .rhs {
    display: flex;
    align-items: center;
    gap: 14px;
    color: var(--lia-text-mute);
    font-size: 13px;
}
.page-head .rhs .icon-btn-round {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: none;
    background: #f1f3f7;
    color: var(--lia-text-soft);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.page-head .rhs .icon-btn-round:hover { background: #e6e9ef; }

.toggle-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 999px;
    background: var(--lia-primary-light);
    color: var(--lia-primary);
    font-size: 12px;
    font-weight: 600;
    border: 1px solid #b6e4e2;
    cursor: pointer;
}
.toggle-pill::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--lia-primary);
}

/* ----------- Section card (Alertas, Tendencias, Feed) ----------- */
.section-card {
    background: var(--lia-card);
    border: 1px solid var(--lia-card-border);
    border-radius: var(--lia-radius);
    box-shadow: var(--lia-shadow);
    margin-bottom: 16px;
    overflow: hidden;
}
.section-head {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    cursor: pointer;
    user-select: none;
    list-style: none;
}
.section-head::-webkit-details-marker { display: none; }
.section-icon {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 16px;
}
.section-icon.alerts { background: var(--lia-danger-soft); color: var(--lia-danger); }
.section-icon.trends { background: #e0f2fe; color: #0284c7; }
.section-icon.feed { background: #dcfce7; color: var(--lia-success); }

.section-titles { flex: 1; min-width: 0; }
.section-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--lia-text);
    margin: 0;
}
.section-sub {
    font-size: 13px;
    color: var(--lia-text-mute);
    margin-top: 2px;
}
.badge-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 26px;
    padding: 0 8px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    background: var(--lia-danger);
    color: white;
}
.badge-count.muted { background: #e6e9ef; color: var(--lia-text-soft); }
.badge-count.info { background: #0284c7; color: white; }
.badge-count.success { background: var(--lia-success); color: white; }

.section-chevron {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--lia-text-mute);
    transition: transform .2s;
}
details[open] > .section-head .section-chevron i { transform: rotate(180deg); }
.section-chevron i { transition: transform .2s; }

.section-body { padding: 0 20px 20px; }

/* ----------- Review card compact (estilo v1) ----------- */
.review-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.review-card-compact {
    background: #eef1f5;
    border: 1px solid transparent;
    border-left: 4px solid #cbd5e1;
    border-radius: 10px;
    padding: 12px 14px;
    transition: background .15s, border-color .15s;
}
.review-card-compact:hover { background: #e6eaef; }
.review-card-compact.rating-5 { border-left-color: var(--lia-success); }
.review-card-compact.rating-4 { border-left-color: #65a30d; }
.review-card-compact.rating-3 { border-left-color: var(--lia-warning); }
.review-card-compact.rating-2 { border-left-color: #ea580c; }
.review-card-compact.rating-1 { border-left-color: var(--lia-danger); }

.review-line {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    font-size: 13px;
    color: var(--lia-text-soft);
}
.review-author-name {
    font-weight: 600;
    color: var(--lia-text);
}
.review-center {
    color: var(--lia-text-mute);
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .02em;
}
.divider-vert {
    color: #d1d5db;
    margin: 0;
}
.review-time {
    margin-left: auto;
    color: var(--lia-text-mute);
    font-size: 12px;
}

.stars {
    color: var(--lia-star);
    letter-spacing: 1px;
    font-size: 14px;
    line-height: 1;
}
.stars .empty { color: #e5e7eb; }

.review-text {
    color: var(--lia-text);
    font-size: 14px;
    line-height: 1.5;
    margin: 8px 0 8px;
}
.review-text.empty {
    color: var(--lia-text-mute);
    font-style: italic;
}

.review-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

.review-attention-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    background: var(--lia-danger-soft);
    color: var(--lia-danger);
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
}
.review-attention-badge i { font-size: 10px; }

.review-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
}
.review-status-badge.responded { background: #dcfce7; color: var(--lia-success); }
.review-status-badge.pending { background: var(--lia-warning-bg); color: var(--lia-warning); }

/* Banner de filtro activo */
.filter-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 14px;
    background: var(--lia-primary-light);
    color: var(--lia-primary);
    border-radius: 8px;
    font-size: 13px;
    margin-bottom: 12px;
}

/* Boton link "Responder" sutil */
.btn-lia-link {
    color: var(--lia-primary);
    font-size: 13px;
    font-weight: 600;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
}
.btn-lia-link:hover { background: var(--lia-primary-light); }

/* ----------- Buttons ----------- */
.btn-lia {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    background: transparent;
    color: var(--lia-primary);
    border: 1px solid var(--lia-primary);
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all .15s;
}
.btn-lia:hover {
    background: var(--lia-primary);
    color: white;
}
.btn-lia.solid {
    background: var(--lia-primary);
    color: white;
}
.btn-lia.solid:hover { background: var(--lia-primary-dark); }

.btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: transparent;
    color: var(--lia-text-soft);
    border: 1px solid transparent;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
}
.btn-ghost:hover { background: #f1f3f7; }

/* ----------- Estados vacios ----------- */
.empty-state {
    text-align: center;
    padding: 32px 16px;
    color: var(--lia-text-mute);
}
.empty-state i { font-size: 28px; margin-bottom: 8px; opacity: .6; }
.empty-state p { margin: 0; font-size: 14px; }

/* ----------- Loading ----------- */
.loading {
    text-align: center;
    padding: 24px;
    color: var(--lia-text-mute);
    font-size: 13px;
}
.loading i { margin-right: 6px; }

/* HTMX indicator */
.htmx-indicator { opacity: 0; transition: opacity .2s; }
.htmx-request .htmx-indicator { opacity: 1; }
.htmx-request.htmx-indicator { opacity: 1; }

/* ----------- Trend cards (estilo v1: numeros grandes + barra) ----------- */
.trend-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 14px;
}
.trend-card {
    background: #f8f9fb;
    border: 1px solid var(--lia-card-border);
    border-radius: 12px;
    padding: 16px 18px;
    transition: box-shadow .2s, transform .2s;
}
.trend-card:hover {
    box-shadow: var(--lia-shadow-hover);
    transform: translateY(-1px);
}

.trend-card-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 14px;
}
.trend-name {
    font-weight: 700;
    color: var(--lia-text);
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: .02em;
}
.trend-subname {
    color: var(--lia-text-mute);
    font-size: 11px;
    margin-top: 2px;
}

.trend-delta {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
}
.trend-delta.up { background: #dcfce7; color: var(--lia-success); }
.trend-delta.down { background: var(--lia-danger-soft); color: var(--lia-danger); }
.trend-delta.flat { background: #e5e7eb; color: var(--lia-text-soft); }

.trend-vs {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}
.trend-vs-block {
    display: flex;
    flex-direction: column;
    flex: 1;
}
.trend-vs-label {
    font-size: 11px;
    color: var(--lia-text-mute);
    text-transform: lowercase;
}
.trend-vs-value {
    font-size: 26px;
    font-weight: 700;
    line-height: 1.1;
    margin-top: 2px;
}
.trend-vs-value.r-good { color: var(--lia-success); }
.trend-vs-value.r-mid { color: var(--lia-warning); }
.trend-vs-value.r-bad { color: var(--lia-danger); }
.trend-vs-sep {
    font-size: 12px;
    color: var(--lia-text-mute);
    text-transform: lowercase;
    font-style: italic;
    align-self: center;
}

.trend-bar {
    width: 100%;
    height: 5px;
    background: #e5e7eb;
    border-radius: 999px;
    overflow: hidden;
    margin-bottom: 14px;
}
.trend-bar-fill {
    height: 100%;
    border-radius: 999px;
    transition: width .3s;
}

.trend-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding-top: 10px;
    border-top: 1px solid var(--lia-card-border);
}
.btn-link-teal {
    color: var(--lia-primary);
    font-size: 13px;
    font-weight: 600;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px 6px;
}
.btn-link-teal:hover { text-decoration: underline; }
.btn-link-muted {
    color: var(--lia-text-soft);
    font-size: 13px;
    font-weight: 500;
    padding: 4px 6px;
}
.btn-link-muted:hover { color: var(--lia-text); text-decoration: underline; }

/* ----------- Pagina Responder ----------- */
.responder-shell {
    display: flex;
    height: calc(100vh - 130px);
    background: white;
    border: 1px solid var(--lia-card-border);
    border-radius: var(--lia-radius);
    overflow: hidden;
}
.responder-sidebar {
    width: 280px;
    flex-shrink: 0;
    border-right: 1px solid var(--lia-card-border);
    display: flex;
    flex-direction: column;
}
.responder-sidebar-head {
    padding: 14px 16px;
    border-bottom: 1px solid var(--lia-card-border);
}
.responder-sidebar-head h3 {
    font-size: 13px;
    font-weight: 600;
    margin: 0 0 8px;
    color: var(--lia-text);
}
.responder-search {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #f1f3f7;
    border: 1px solid transparent;
    border-radius: 8px;
    padding: 7px 10px;
    transition: border-color .15s;
}
.responder-search:focus-within { border-color: var(--lia-primary); background: white; }
.responder-search i { color: var(--lia-text-mute); font-size: 12px; }
.responder-search input {
    border: none;
    outline: none;
    background: transparent;
    flex: 1;
    font-size: 13px;
    color: var(--lia-text);
}
.responder-list {
    flex: 1;
    overflow-y: auto;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.responder-list-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    border-radius: 8px;
    font-size: 13px;
    color: var(--lia-text-soft);
    cursor: pointer;
    transition: background .12s;
    text-decoration: none;
}
.responder-list-item:hover {
    background: #f6f7f9;
    color: var(--lia-text);
}
.responder-list-item.active {
    background: var(--lia-primary-light);
    color: var(--lia-primary);
    font-weight: 600;
}
.responder-list-code {
    color: var(--lia-text-mute);
    font-size: 11px;
    font-weight: 500;
    flex-shrink: 0;
}
.responder-list-item.active .responder-list-code { color: var(--lia-primary); opacity: .7; }
.responder-list-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.empty-state-text { text-align: center; color: var(--lia-text-mute); font-size: 12px; padding: 16px; }

.responder-main {
    flex: 1;
    background: var(--lia-bg);
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.responder-widget-head {
    padding: 14px 20px;
    background: white;
    border-bottom: 1px solid var(--lia-card-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.responder-widget-head h2 { font-size: 16px; font-weight: 600; margin: 0; color: var(--lia-text); }
.responder-widget-frame {
    flex: 1;
    background: white;
    position: relative;
    overflow: hidden;
    min-height: 0;
    display: flex;
}
/* El custom element del widget de localiza.me gestiona su propio scroll interno.
   El frame solo le da el espacio. NO ponemos overflow:auto en el frame para evitar doble scroll. */
.responder-widget-frame > reply-reviews-widget {
    flex: 1;
    width: 100%;
    height: 100%;
    display: block;
    border: 0;
    overflow: hidden;
}
.responder-widget-frame > reply-reviews-widget > * {
    height: 100%;
}
/* El iframe que el widget genera internamente debe ocupar 100% sin scroll externo */
.responder-widget-frame iframe {
    width: 100% !important;
    height: 100% !important;
    border: 0 !important;
    display: block;
}
.responder-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--lia-text-mute);
    text-align: center;
    padding: 32px;
}
.responder-empty i { font-size: 36px; margin-bottom: 12px; opacity: .5; }
.responder-empty p { margin: 0; font-size: 14px; max-width: 320px; }

/* ----------- Pagina Chat ----------- */
.chat-shell {
    display: flex;
    height: calc(100vh - 130px);
    background: var(--lia-bg);
    border: 1px solid var(--lia-card-border);
    border-radius: var(--lia-radius);
    overflow: hidden;
}
.chat-sidebar {
    width: 260px;
    flex-shrink: 0;
    border-right: 1px solid var(--lia-card-border);
    background: white;
    display: flex;
    flex-direction: column;
    transition: width .2s ease, opacity .2s ease;
    overflow: hidden;
}
.chat-sidebar.collapsed {
    width: 0;
    opacity: 0;
    border-right: none;
}
.chat-sidebar-head {
    padding: 14px 16px;
    border-bottom: 1px solid var(--lia-card-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.chat-sidebar-head h3 { font-size: 13px; font-weight: 600; margin: 0; color: var(--lia-text); }
.chat-history-list {
    flex: 1;
    overflow-y: auto;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.chat-history-item {
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 13px;
    color: var(--lia-text-soft);
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.chat-history-item:hover { background: #f1f3f7; color: var(--lia-text); }
.chat-history-item.active { background: var(--lia-primary-light); color: var(--lia-primary); font-weight: 600; }
.chat-sidebar-foot {
    border-top: 1px solid var(--lia-card-border);
    padding: 8px;
    text-align: center;
}
.chat-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    position: relative;
    background: var(--lia-bg);
}
.chat-sidebar-toggle {
    position: absolute;
    top: 12px;
    left: 12px;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: white;
    border: 1px solid var(--lia-card-border);
    color: var(--lia-text-soft);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
    font-size: 13px;
    transition: all .15s;
}
.chat-sidebar-toggle:hover {
    background: var(--lia-primary-light);
    color: var(--lia-primary);
    border-color: var(--lia-primary);
}

/* Hero (estado inicial sin mensajes) */
.chat-hero {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px 24px 100px;
    text-align: center;
    overflow-y: auto;
}
.chat-hero-logo {
    height: 64px;
    margin-bottom: 18px;
}
.chat-hero-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--lia-text);
    margin: 0 0 10px;
    letter-spacing: -.01em;
}
.chat-hero-subtitle {
    font-size: 14px;
    color: var(--lia-text-soft);
    max-width: 480px;
    margin: 0 0 28px;
    line-height: 1.5;
}
.chat-hero-input {
    width: 100%;
    max-width: 640px;
    background: white;
    border: 1px solid var(--lia-card-border);
    border-radius: 999px;
    box-shadow: 0 2px 8px rgba(15, 23, 42, .06);
    padding: 6px 6px 6px 18px;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: box-shadow .2s, border-color .2s;
}
.chat-hero-input:focus-within {
    border-color: var(--lia-primary);
    box-shadow: 0 4px 14px rgba(0, 174, 169, .15);
}
.chat-hero-input-icon {
    color: var(--lia-text-mute);
    font-size: 14px;
    flex-shrink: 0;
}
.chat-hero-icon-btn,
.chat-input-icon-btn {
    position: relative;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: var(--lia-text-mute);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 14px;
    transition: all .15s;
}
.chat-hero-icon-btn:hover,
.chat-input-icon-btn:hover {
    background: var(--lia-primary-light);
    color: var(--lia-primary);
}
.chat-center-badge {
    position: absolute;
    top: 0;
    right: 0;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    background: var(--lia-primary);
    color: white;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid white;
}
.chat-hero-input input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-size: 14px;
    color: var(--lia-text);
    padding: 8px 0;
    font-family: inherit;
}
.chat-hero-send {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #e5e7eb;
    color: white;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 14px;
    transition: background .15s;
}
.chat-hero-input:focus-within .chat-hero-send,
.chat-hero-send:hover { background: var(--lia-primary); }
.chat-hero-send:disabled { background: #cbd5e1; cursor: not-allowed; }

.chat-hero-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-top: 28px;
    width: 100%;
    max-width: 720px;
}
@media (max-width: 700px) {
    .chat-hero-cards { grid-template-columns: 1fr; }
}
.chat-hero-card {
    background: white;
    border: 1px solid var(--lia-card-border);
    border-radius: 12px;
    padding: 18px 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: all .15s;
    color: var(--lia-text-soft);
    font-size: 13px;
    text-align: center;
}
.chat-hero-card:hover {
    border-color: var(--lia-primary);
    color: var(--lia-primary);
    transform: translateY(-2px);
    box-shadow: var(--lia-shadow-hover);
}
.chat-hero-card i {
    font-size: 20px;
    color: var(--lia-primary);
}

/* Conversacion (cuando hay mensajes) */
.chat-conversation {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 24px max(24px, calc((100% - 768px) / 2));
    display: flex;
    flex-direction: column;
    gap: 20px;
    scroll-behavior: smooth;
}

.chat-msg {
    display: flex;
    gap: 12px;
    width: 100%;
    max-width: 100%;
}
.chat-msg.user { flex-direction: row-reverse; }
.chat-msg-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    flex-shrink: 0;
    overflow: hidden;
    background: #f3f4f6;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.chat-msg-avatar img { width: 100%; height: 100%; object-fit: contain; }
.chat-msg-bubble {
    background: white;
    border: 1px solid #f3f4f6;
    border-radius: 16px;
    border-top-left-radius: 4px;
    padding: 12px 16px;
    font-size: 14px;
    line-height: 1.55;
    color: var(--lia-text);
    max-width: 100%;
    min-width: 0;
    box-shadow: 0 1px 2px rgba(15,23,42,.04);
}
.chat-msg.user .chat-msg-bubble { max-width: 85%; }
.chat-msg.user .chat-msg-bubble {
    background: var(--lia-primary);
    color: white;
    border-color: var(--lia-primary);
    border-radius: 16px;
    border-bottom-right-radius: 4px;
}
.chat-msg-bubble p { margin: 0 0 10px; }
.chat-msg-bubble p:last-child { margin: 0; }
.chat-msg-bubble strong { font-weight: 600; }
.chat-msg-bubble ul, .chat-msg-bubble ol { padding-left: 20px; margin: 8px 0; }
.chat-msg-bubble code { background: rgba(0,0,0,.05); padding: 2px 5px; border-radius: 4px; font-size: 12px; }
.chat-msg.user .chat-msg-bubble code { background: rgba(255,255,255,.2); }
.chat-msg-bubble details { background: white; border: 1px solid var(--lia-card-border); border-radius: 8px; margin-top: 8px; }
.chat-msg-bubble details summary { padding: 8px 12px; cursor: pointer; font-size: 13px; font-weight: 500; }
.chat-msg-bubble details[open] summary { border-bottom: 1px solid var(--lia-card-border); }
.chat-msg-bubble details > *:not(summary) { padding: 12px; }
.chat-msg-bubble h1, .chat-msg-bubble h2, .chat-msg-bubble h3, .chat-msg-bubble h4 {
    margin: 12px 0 6px;
    font-weight: 700;
    color: var(--lia-text);
}
.chat-msg-bubble h1 { font-size: 18px; }
.chat-msg-bubble h2 { font-size: 16px; }
.chat-msg-bubble h3 { font-size: 14px; }
.chat-msg-bubble table {
    width: 100%;
    border-collapse: collapse;
    margin: 10px 0;
    font-size: 13px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--lia-card-border);
}
.chat-msg-bubble thead {
    background: var(--lia-primary);
    color: white;
}
.chat-msg-bubble thead th {
    padding: 8px 10px;
    font-weight: 600;
    text-align: left;
    font-size: 12px;
}
.chat-msg-bubble tbody td {
    padding: 7px 10px;
    border-bottom: 1px solid #f3f4f6;
}
.chat-msg-bubble tbody tr:nth-child(even) { background: #fafbfc; }
.chat-msg-bubble tbody tr:hover { background: rgba(0,174,169,0.05); }
.chat-msg-bubble tbody tr:last-child td { border-bottom: none; }
.chat-msg-bubble blockquote {
    border-left: 3px solid var(--lia-primary);
    padding: 4px 12px;
    color: var(--lia-text-soft);
    font-style: italic;
    background: rgba(0,174,169,.04);
    margin: 8px 0;
    border-radius: 0 6px 6px 0;
}
.chat-msg-bubble hr { border: none; border-top: 1px solid var(--lia-card-border); margin: 12px 0; }
.chat-msg-bubble a { color: var(--lia-primary); text-decoration: underline; }

.tool-trace {
    font-size: 12px;
    color: var(--lia-text-mute);
    font-style: italic;
    padding: 4px 12px;
}
.tool-trace i { margin-right: 6px; color: var(--lia-primary); }

.chat-typing {
    display: inline-flex;
    gap: 4px;
    padding: 4px 0;
}
.chat-typing span {
    width: 6px;
    height: 6px;
    background: var(--lia-primary);
    border-radius: 50%;
    animation: typingDot 1.4s infinite ease-in-out;
}
.chat-typing span:nth-child(2) { animation-delay: .2s; }
.chat-typing span:nth-child(3) { animation-delay: .4s; }
@keyframes typingDot {
    0%, 60%, 100% { opacity: .3; transform: translateY(0); }
    30% { opacity: 1; transform: translateY(-3px); }
}

.chat-quick-actions {
    display: flex;
    gap: 8px;
    padding: 12px 24px 0;
    flex-wrap: wrap;
}
.chat-quick-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: #f1f3f7;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 12px;
    color: var(--lia-text-soft);
    cursor: pointer;
    transition: all .15s;
}
.chat-quick-btn:hover {
    background: var(--lia-primary-light);
    color: var(--lia-primary);
    border-color: var(--lia-primary);
}
.chat-quick-btn i { font-size: 11px; }

.chat-input-area {
    border-top: none;
    padding: 12px 24px 10px;
    background: transparent;
}
.chat-disclaimer {
    text-align: center;
    font-size: 11px;
    color: var(--lia-text-mute);
    padding: 8px 12px 4px;
    max-width: 768px;
    margin: 0 auto;
    line-height: 1.3;
}
.chat-input-form {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    background: white;
    border: 1px solid var(--lia-card-border);
    border-radius: 999px;
    padding: 6px 6px 6px 6px;
    transition: border-color .15s, box-shadow .15s;
    max-width: 768px;
    margin: 0 auto;
}
.chat-input-form:focus-within {
    border-color: var(--lia-primary);
    box-shadow: 0 0 0 3px rgba(0,174,169,.1);
}
.chat-input-form textarea {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    resize: none;
    font-size: 14px;
    font-family: inherit;
    color: var(--lia-text);
    max-height: 120px;
    min-height: 22px;
    line-height: 1.4;
    padding: 8px 4px;
}
.chat-send-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: var(--lia-primary);
    color: white;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background .15s;
}
.chat-send-btn:hover { background: var(--lia-primary-dark); }
.chat-send-btn:disabled { background: #cbd5e1; cursor: not-allowed; }

.chat-empty-state {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px;
    text-align: center;
    color: var(--lia-text-mute);
}
.chat-empty-state .lia-circle {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, #00AEA9, #0CB5AF);
    color: white;
    font-size: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
}
.chat-empty-state h2 { color: var(--lia-text); font-size: 22px; font-weight: 700; margin: 0 0 8px; }
.chat-empty-state p { font-size: 14px; max-width: 380px; margin: 0 0 24px; }

/* ----------- Modal filtro centros (chat) ----------- */
.centers-search-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #f1f3f7;
    border: 1px solid transparent;
    border-radius: 8px;
    padding: 8px 12px;
    margin-bottom: 12px;
}
.centers-search-wrap:focus-within { border-color: var(--lia-primary); background: white; }
.centers-search-wrap i { color: var(--lia-text-mute); font-size: 13px; }
.centers-search-wrap input {
    border: none;
    outline: none;
    background: transparent;
    flex: 1;
    font-size: 14px;
}
.centers-list {
    max-height: 360px;
    overflow-y: auto;
    border: 1px solid var(--lia-card-border);
    border-radius: 8px;
}
.center-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    cursor: pointer;
    border-bottom: 1px solid #f3f4f6;
    font-size: 14px;
}
.center-row:last-child { border-bottom: none; }
.center-row:hover { background: #fafbfc; }
.center-row input[type="checkbox"] {
    accent-color: var(--lia-primary);
    width: 16px;
    height: 16px;
    cursor: pointer;
}
.center-row-name { flex: 1; }
.center-row-code {
    color: var(--lia-text-mute);
    font-size: 12px;
    margin-right: 6px;
    font-family: 'SF Mono', Consolas, monospace;
}
.center-row-comp {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #d97706;
}
.center-row-comp input[type="checkbox"] { accent-color: #d97706; }

/* ============================================================
   Pagina Dashboard v2 (replica del v1)
   ============================================================ */
#dashboard-page { display: flex; flex-direction: column; gap: 0; }

/* Tabs */
.dash-tabs {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    padding: 8px 12px 0;
    background: #ECEAEA;
    overflow-x: auto;
    border-radius: var(--lia-radius) var(--lia-radius) 0 0;
}
.dash-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px 10px;
    background: #E0DDDD;
    border: none;
    border-radius: 10px 10px 0 0;
    font-size: 13px;
    color: var(--lia-text-soft);
    cursor: pointer;
    white-space: nowrap;
    transition: all .15s;
    position: relative;
}
.dash-tab:hover { background: #E8E5E5; }
.dash-tab.active {
    background: var(--lia-bg);
    color: var(--lia-primary);
    font-weight: 600;
}
.dash-tab i { font-size: 11px; }
.dash-tab-name { padding: 2px 0; }
.dash-tab-close {
    background: transparent;
    border: none;
    color: var(--lia-text-mute);
    cursor: pointer;
    padding: 0 2px;
    font-size: 10px;
    opacity: 0;
    transition: opacity .15s;
}
.dash-tab:hover .dash-tab-close { opacity: 1; }
.dash-tab-close:hover { color: var(--lia-danger); }
.dash-tab-add {
    background: transparent;
    border: 1px dashed transparent;
    border-radius: 8px;
    padding: 9px 12px;
    color: var(--lia-text-mute);
    cursor: pointer;
    font-size: 12px;
}
.dash-tab-add:hover { color: var(--lia-primary); border-color: var(--lia-primary); background: rgba(0,174,169,.05); }

/* FilterBar */
.dash-filterbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 16px;
    background: white;
    border-bottom: 1px solid var(--lia-card-border);
    flex-wrap: wrap;
}
.dash-filters-left, .dash-filters-right {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.dash-filter-group {
    display: flex; align-items: center; gap: 6px;
}
.dash-filter-group label { font-size: 11px; color: var(--lia-text-mute); text-transform: uppercase; letter-spacing: .04em; }
.dash-select, .dash-date {
    border: 1px solid var(--lia-card-border);
    border-radius: 8px;
    padding: 6px 10px;
    font-size: 13px;
    background: white;
    color: var(--lia-text);
    cursor: pointer;
}
.dash-select:focus, .dash-date:focus { outline: none; border-color: var(--lia-primary); box-shadow: 0 0 0 2px rgba(0,174,169,.15); }
.dash-date-sep { color: var(--lia-text-mute); font-size: 13px; }
.dash-divider { width: 1px; height: 20px; background: var(--lia-card-border); }
.dash-multi-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border: 1px solid var(--lia-card-border);
    border-radius: 8px;
    background: white;
    cursor: pointer;
    font-size: 13px;
    color: var(--lia-text);
}
.dash-multi-btn:hover { border-color: var(--lia-primary); color: var(--lia-primary); }
.dash-multi-btn i.fa-store { color: var(--lia-primary); font-size: 12px; }

.btn-lia.ghost {
    background: transparent;
    border: 1px solid rgba(0,174,169,0.3);
    color: var(--lia-primary);
}
.btn-lia.ghost:hover { background: rgba(0,174,169,.08); border-color: var(--lia-primary); color: var(--lia-primary); }
.btn-lia.ghost.neutral {
    border-color: rgba(91,107,125,0.3);
    color: #5B6B7D;
}
.btn-lia.ghost.neutral:hover { background: rgba(91,107,125,.08); border-color: #5B6B7D; color: #5B6B7D; }
.btn-lia.danger {
    background: transparent;
    border: 1px solid #fecaca;
    color: var(--lia-danger);
}
.btn-lia.danger:hover { background: #fef2f2; border-color: var(--lia-danger); color: var(--lia-danger); }

/* Grid + chart cards */
.dash-content {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    background: var(--lia-bg);
    border-radius: 0 0 var(--lia-radius) var(--lia-radius);
}
.dash-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 200px;
    gap: 14px;
}
@media (max-width: 1100px) { .dash-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px) { .dash-grid { grid-template-columns: 1fr; } }

.dash-chart-card {
    background: white;
    border: 1px solid var(--lia-card-border);
    border-radius: var(--lia-radius);
    box-shadow: var(--lia-shadow);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: box-shadow .2s;
}
.dash-chart-card:hover { box-shadow: var(--lia-shadow-hover); }
.dash-chart-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    border-bottom: 1px solid #f3f4f6;
    flex-shrink: 0;
}
.dash-chart-title { font-size: 15px; font-weight: 600; color: var(--lia-text); display: inline-flex; align-items: center; gap: 8px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; letter-spacing: -0.01em; }
.dash-chart-actions { display: flex; gap: 4px; }
.dash-chart-actions button {
    width: 26px; height: 26px;
    border: none; background: transparent;
    color: var(--lia-text-mute); cursor: pointer;
    border-radius: 6px; font-size: 11px;
}
.dash-chart-actions button:hover { background: #f1f3f7; color: var(--lia-text); }
.dash-chart-body {
    flex: 1;
    padding: 8px;
    min-height: 0;
    position: relative;
}

/* KPI rendering */
.kpi-wrap {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    height: 100%;
    padding: 18px 12px;
    gap: 4px;
}
.kpi-wrap .kpi-value {
    font-size: 44px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
}
.kpi-wrap .kpi-label {
    font-size: 13px;
    color: var(--lia-text-mute);
    margin-top: 6px;
    font-weight: 500;
}
.kpi-wrap .kpi-delta {
    margin-top: 10px;
    font-size: 13px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(15, 23, 42, .04);
}
.kpi-wrap .kpi-delta.up { color: #16a34a; background: rgba(22, 163, 74, .08); }
.kpi-wrap .kpi-delta.down { color: #ef4444; background: rgba(239, 68, 68, .08); }
.kpi-wrap .kpi-delta.flat { color: var(--lia-text-mute); }

/* Table widget */
.dash-table-wrap { height: 100%; overflow: auto; }
.dash-table-wrap table { width: 100%; border-collapse: collapse; font-size: 12px; }
.dash-table-wrap thead { position: sticky; top: 0; z-index: 1; background: var(--lia-primary); color: white; }
.dash-table-wrap thead th { padding: 8px 10px; text-align: left; font-weight: 600; font-size: 11px; }
.dash-table-wrap tbody td { padding: 7px 10px; border-bottom: 1px solid #f3f4f6; }
.dash-table-wrap tbody tr:hover td { background: rgba(0,174,169,.04); }
.dash-table-wrap tbody tr:nth-child(even) td { background: #fafbfc; }
.table-cell-truncate {
    max-width: 280px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dash-table-wrap .up { color: var(--lia-success); }
.dash-table-wrap .down { color: var(--lia-danger); }
.dash-table-wrap .down-mild { color: #ea580c; }
.dash-table-wrap .flat { color: var(--lia-text-mute); }

/* Empty state */
.dash-empty {
    background: white;
    border: 1px dashed var(--lia-card-border);
    border-radius: var(--lia-radius);
    padding: 56px 24px;
    text-align: center;
    color: var(--lia-text-soft);
    margin: 16px 0;
}
.dash-empty-icon {
    width: 64px; height: 64px;
    border-radius: 18px;
    background: rgba(0,174,169,.1);
    color: var(--lia-primary);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 26px;
    margin-bottom: 16px;
}
.dash-empty h2 { font-size: 20px; color: var(--lia-text); margin: 0 0 8px; font-weight: 700; }
.dash-empty p { font-size: 14px; margin: 0 0 24px; color: var(--lia-text-mute); }

.dash-empty-actions {
    display: inline-flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
}
.empty-tpl-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 0 22px;
    height: 46px;
    min-width: 170px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all .15s;
    justify-content: center;
}
.empty-tpl-btn i { font-size: 14px; }
.empty-tpl-btn.primary {
    background: var(--lia-primary);
    color: white;
}
.empty-tpl-btn.primary:hover {
    background: var(--lia-primary-dark);
    box-shadow: 0 4px 12px rgba(0,174,169,.25);
    transform: translateY(-1px);
}
.empty-tpl-btn.dark {
    background: #2f3a45;
    color: white;
}
.empty-tpl-btn.dark:hover {
    background: #1f2933;
    box-shadow: 0 4px 12px rgba(47,58,69,.25);
    transform: translateY(-1px);
}
.empty-tpl-btn.dashed {
    background: white;
    color: var(--lia-text-soft);
    border: 1px dashed #cbd5e1;
}
.empty-tpl-btn.dashed:hover {
    border-color: var(--lia-primary);
    color: var(--lia-primary);
    background: rgba(0,174,169,.04);
}

/* Wizard modal */
.wizard-examples { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.wizard-example {
    background: #f1f3f7;
    border: 1px solid transparent;
    border-radius: 999px;
    padding: 5px 12px;
    font-size: 12px;
    color: var(--lia-text-soft);
    cursor: pointer;
    transition: all .15s;
}
.wizard-example:hover { background: var(--lia-primary-light); color: var(--lia-primary); border-color: var(--lia-primary); }
.wizard-textarea {
    width: 100%;
    border: 1px solid var(--lia-card-border);
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 14px;
    font-family: inherit;
    resize: vertical;
    min-height: 80px;
}
.wizard-textarea:focus { outline: none; border-color: var(--lia-primary); box-shadow: 0 0 0 2px rgba(0,174,169,.15); }
.wizard-error {
    margin-top: 10px;
    padding: 8px 12px;
    background: #fef2f2;
    color: var(--lia-danger);
    border-radius: 8px;
    font-size: 13px;
}

/* ----------- Modal selector (Manual / IA) ----------- */
.create-mode-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
.create-mode-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    padding: 22px 18px;
    background: white;
    border: 1px solid var(--lia-card-border);
    border-radius: 12px;
    cursor: pointer;
    transition: all .15s;
}
.create-mode-card:hover {
    border-color: var(--lia-primary);
    box-shadow: var(--lia-shadow-hover);
    transform: translateY(-2px);
}
.create-mode-icon {
    width: 52px; height: 52px;
    border-radius: 14px;
    background: rgba(0,174,169,.12);
    color: var(--lia-primary);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 22px;
    margin-bottom: 4px;
}
.create-mode-icon.ia { background: rgba(99,102,241,.12); color: #6366f1; }
.create-mode-name { font-size: 16px; font-weight: 700; color: var(--lia-text); }
.create-mode-desc { font-size: 12px; color: var(--lia-text-mute); line-height: 1.4; }
@media (max-width: 600px) { .create-mode-grid { grid-template-columns: 1fr; } }

/* ----------- Wizard manual (5 pasos) ----------- */
.manual-wizard-stepper {
    display: flex;
    gap: 0;
    align-items: center;
    justify-content: space-between;
    padding: 14px 24px 8px;
    border-bottom: 1px solid var(--lia-card-border);
    background: #f8f9fb;
}
.step-pill {
    flex: 1;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--lia-text-mute);
    font-weight: 500;
    position: relative;
    padding: 6px 4px;
}
.step-pill .num {
    width: 24px; height: 24px;
    border-radius: 50%;
    background: #e5e7eb;
    color: var(--lia-text-mute);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 11px;
    font-weight: 700;
    flex-shrink: 0;
    transition: all .2s;
}
.step-pill.active { color: var(--lia-primary); font-weight: 700; }
.step-pill.active .num { background: var(--lia-primary); color: white; box-shadow: 0 0 0 4px rgba(0,174,169,.15); }
.step-pill.done .num { background: var(--lia-primary); color: white; }
.step-pill.done .num::before { content: '\f00c'; font-family: 'Font Awesome 6 Free', 'Font Awesome 5 Free'; font-weight: 900; font-size: 10px; }
.step-pill.done .num span { display: none; }
.step-pill:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 18px;
    left: calc(100% - 50%);
    right: -50%;
    height: 2px;
    background: #e5e7eb;
    z-index: 0;
}
.step-pill.done:not(:last-child)::after { background: var(--lia-primary); }

.manual-wizard-body {
    min-height: 360px;
    max-height: 60vh;
    overflow-y: auto;
}
.manual-step { display: none; }
.manual-step.active { display: block; }
.step-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--lia-text);
    margin: 0 0 14px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--lia-card-border);
}
.step-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}
.step-row label {
    font-size: 13px;
    color: var(--lia-text-soft);
    font-weight: 500;
    min-width: 220px;
}

.chart-type-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
}
.chart-type-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
    padding: 14px 10px;
    background: white;
    border: 1px solid var(--lia-card-border);
    border-radius: 10px;
    cursor: pointer;
    transition: all .15s;
}
.chart-type-card:hover { border-color: var(--lia-primary); transform: translateY(-1px); }
.chart-type-card.selected {
    border-color: var(--lia-primary);
    background: rgba(0,174,169,.06);
    box-shadow: 0 0 0 2px rgba(0,174,169,.15);
}
.chart-type-card i { font-size: 22px; color: var(--lia-primary); margin-bottom: 4px; }
.chart-type-card .ct-name { font-size: 13px; font-weight: 600; color: var(--lia-text); }
.chart-type-card .ct-desc { font-size: 11px; color: var(--lia-text-mute); line-height: 1.3; }

.metric-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 10px;
}
.metric-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    gap: 4px;
    padding: 12px 14px;
    background: white;
    border: 1px solid var(--lia-card-border);
    border-radius: 10px;
    cursor: pointer;
    transition: all .15s;
}
.metric-card:hover { border-color: var(--lia-primary); }
.metric-card.selected { border-color: var(--lia-primary); background: rgba(0,174,169,.06); }
.metric-card .m-name { font-size: 13px; font-weight: 600; color: var(--lia-text); }
.metric-card .m-id { font-size: 11px; color: var(--lia-text-mute); font-family: 'SF Mono', Consolas, monospace; }

.size-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
}
.size-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 12px 10px;
    background: white;
    border: 1px solid var(--lia-card-border);
    border-radius: 10px;
    cursor: pointer;
    transition: all .15s;
}
.size-card:hover { border-color: var(--lia-primary); }
.size-card.selected { border-color: var(--lia-primary); background: rgba(0,174,169,.06); }
.size-card .s-name { font-size: 12px; font-weight: 600; color: var(--lia-text); }
.size-card .s-desc { font-size: 10px; color: var(--lia-text-mute); }
.size-mini {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 2px;
    width: 54px; height: 54px;
}
.size-cell { background: #e5e7eb; border-radius: 2px; }
.size-cell.filled { background: var(--lia-primary); }

.palette-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 8px;
    flex: 1;
}
.palette-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 8px 10px;
    background: white;
    border: 1px solid var(--lia-card-border);
    border-radius: 8px;
    cursor: pointer;
    transition: all .15s;
}
.palette-card:hover { border-color: var(--lia-primary); }
.palette-card.selected { border-color: var(--lia-primary); background: rgba(0,174,169,.06); }
.palette-swatches { display: flex; gap: 2px; }
.palette-swatches span { width: 14px; height: 14px; border-radius: 3px; }
.palette-card .p-name { font-size: 11px; font-weight: 600; color: var(--lia-text); }

.color-input {
    width: 44px; height: 36px;
    border: 1px solid var(--lia-card-border);
    border-radius: 8px;
    cursor: pointer;
    padding: 2px;
    background: white;
}
.step-row.title-row {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    background: rgba(0,174,169,.04);
    padding: 14px;
    border-radius: 10px;
    border: 1px solid rgba(0,174,169,.18);
    margin-bottom: 18px;
}
.step-row.title-row label { min-width: 0; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--lia-primary); font-weight: 700; }
.title-input {
    font-size: 16px !important;
    font-weight: 600 !important;
    padding: 10px 14px !important;
    border-radius: 10px;
    border: 1px solid var(--lia-card-border);
}
.title-input:focus { outline: none; border-color: var(--lia-primary); box-shadow: 0 0 0 3px rgba(0,174,169,.15); }
.check-row {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: var(--lia-text);
    cursor: pointer;
    background: rgba(0,174,169,.04);
    border: 1px solid rgba(0,174,169,.18);
    padding: 8px 14px;
    border-radius: 8px;
    min-width: 0 !important;
}
.check-row input[type="checkbox"] {
    accent-color: var(--lia-primary);
    width: 16px;
    height: 16px;
    margin: 0;
}
.check-row strong { color: var(--lia-primary); font-weight: 700; }

.manual-wizard-footer { gap: 8px; }

/* ----------- Resize handle de chart-card ----------- */
.dash-chart-card { position: relative; }
.dash-chart-card .resize-handle {
    position: absolute;
    bottom: 4px;
    right: 4px;
    width: 16px;
    height: 16px;
    cursor: nwse-resize;
    opacity: 0;
    transition: opacity .15s;
    z-index: 5;
    background:
        linear-gradient(135deg, transparent 0%, transparent 45%, var(--lia-text-mute) 45%, var(--lia-text-mute) 55%, transparent 55%),
        linear-gradient(135deg, transparent 0%, transparent 70%, var(--lia-text-mute) 70%, var(--lia-text-mute) 80%, transparent 80%);
}
.dash-chart-card:hover .resize-handle { opacity: .55; }
.dash-chart-card .resize-handle:hover { opacity: 1; }
.dash-chart-card.resizing {
    box-shadow: 0 0 0 2px var(--lia-primary), var(--lia-shadow-hover);
    z-index: 10;
}

/* ----------- Hueco vacio en el grid ----------- */
.dash-chart-hole {
    background: transparent;
    border: 1.5px dashed #cbd5e1;
    border-radius: var(--lia-radius);
    color: var(--lia-text-mute);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    transition: all .15s;
    min-height: 100%;
}
.dash-chart-hole:hover {
    border-color: var(--lia-primary);
    background: rgba(0,174,169,.04);
    color: var(--lia-primary);
    transform: scale(1.01);
}
.dash-chart-add {
    background: white;
    border: 1.5px dashed #cbd5e1;
    border-radius: var(--lia-radius);
    color: var(--lia-text-soft);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 500;
    padding: 18px;
    transition: all .15s;
    min-height: 60px;
}
.dash-chart-add:hover {
    border-color: var(--lia-primary);
    background: rgba(0,174,169,.04);
    color: var(--lia-primary);
}
.dash-chart-add i { font-size: 16px; }

/* ----------- Pagina Dashboard (legacy V0 — mantengo por compatibilidad) ----------- */
.dashboard-shell {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.dashboard-tabs {
    display: flex;
    gap: 2px;
    padding: 0 4px;
    border-bottom: 1px solid var(--lia-card-border);
    overflow-x: auto;
}
.dashboard-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border: 1px solid transparent;
    border-bottom: none;
    border-radius: 10px 10px 0 0;
    background: transparent;
    color: var(--lia-text-soft);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
}
.dashboard-tab:hover { background: #f1f3f7; color: var(--lia-text); }
.dashboard-tab.active {
    background: white;
    border-color: var(--lia-card-border);
    color: var(--lia-primary);
    font-weight: 600;
    margin-bottom: -1px;
}
.dashboard-tab .close {
    color: var(--lia-text-mute);
    margin-left: 4px;
    font-size: 11px;
}
.dashboard-tab .close:hover { color: var(--lia-danger); }
.dashboard-tab-add {
    background: transparent;
    border: 1px dashed var(--lia-card-border);
    border-radius: 8px;
    color: var(--lia-text-mute);
    padding: 6px 10px;
    cursor: pointer;
    font-size: 13px;
    margin: 4px 0;
}
.dashboard-tab-add:hover { color: var(--lia-primary); border-color: var(--lia-primary); }

.dashboard-filters {
    display: flex;
    gap: 12px;
    background: white;
    border: 1px solid var(--lia-card-border);
    border-radius: var(--lia-radius);
    padding: 14px 16px;
    flex-wrap: wrap;
    align-items: center;
}
.filter-group { display: flex; align-items: center; gap: 8px; }
.filter-group label { font-size: 12px; color: var(--lia-text-mute); }
.filter-select {
    border: 1px solid var(--lia-card-border);
    border-radius: 8px;
    padding: 6px 10px;
    font-size: 13px;
    background: white;
    cursor: pointer;
    color: var(--lia-text);
}
.filter-pills {
    display: inline-flex;
    gap: 4px;
    background: #f1f3f7;
    border-radius: 10px;
    padding: 3px;
}
.filter-pill {
    background: transparent;
    border: none;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 13px;
    color: var(--lia-text-soft);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all .15s;
}
.filter-pill:hover { color: var(--lia-text); }
.filter-pill.active {
    background: white;
    color: var(--lia-primary);
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(15,23,42,.08);
}
.filter-pill i { font-size: 11px; }

.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}
@media (max-width: 1100px) { .dashboard-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px) { .dashboard-grid { grid-template-columns: 1fr; } }

.chart-card {
    background: white;
    border: 1px solid var(--lia-card-border);
    border-radius: var(--lia-radius);
    box-shadow: var(--lia-shadow);
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    min-height: 260px;
}
.chart-card.span-2 { grid-column: span 2; }
.chart-card.span-3 { grid-column: span 3; }
.chart-card .chart-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}
.chart-card .chart-title { font-size: 15px; font-weight: 600; color: var(--lia-text); letter-spacing: -0.01em; }
.chart-card .chart-actions { display: flex; gap: 6px; }
.chart-card .chart-actions button {
    width: 24px;
    height: 24px;
    border: none;
    background: transparent;
    color: var(--lia-text-mute);
    border-radius: 6px;
    cursor: pointer;
    font-size: 12px;
}
.chart-card .chart-actions button:hover { background: #f1f3f7; color: var(--lia-text); }
.chart-card .chart-body {
    flex: 1;
    min-height: 180px;
    width: 100%;
}

.dashboard-empty {
    background: white;
    border: 1px dashed var(--lia-card-border);
    border-radius: var(--lia-radius);
    padding: 48px 24px;
    text-align: center;
    color: var(--lia-text-soft);
}
.dashboard-empty h3 { font-size: 18px; color: var(--lia-text); margin: 0 0 8px; }
.dashboard-empty p { font-size: 14px; margin: 0 0 24px; color: var(--lia-text-mute); }
.lia-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--lia-card-border);
}
.lia-table thead th {
    text-align: left;
    font-weight: 700;
    color: white;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .06em;
    padding: 12px 14px;
    border-bottom: none;
    background: var(--lia-primary);
}
.lia-table tbody td {
    padding: 10px 14px;
    border-bottom: 1px solid #f3f4f6;
    color: var(--lia-text);
}
.lia-table tbody tr:nth-child(even) td { background: #fafbfc; }
.lia-table tbody tr:hover td { background: rgba(0,174,169,.05); }
.lia-table tbody tr:last-child td { border-bottom: none; }

/* ----------- Tabla matriz Competencia ----------- */
.lia-table.matrix {
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--lia-card-border);
}
.lia-table.matrix thead th {
    color: white;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .06em;
    text-align: center;
    border-bottom: none;
    padding: 10px 12px;
    vertical-align: middle;
}
.lia-table.matrix th.m-center { background: #009690; text-align: left; border-right: 1px solid rgba(255,255,255,.18); }
.lia-table.matrix th.m-own    { background: #00AEA9; border-right: 1px solid rgba(255,255,255,.18); }
.lia-table.matrix th.m-comp   { background: #e8833a; border-right: 1px solid rgba(255,255,255,.18); }
.lia-table.matrix th.m-diff   { background: #009690; }
.lia-table.matrix th.m-own-sub  { background: #00978f; font-weight: 500; padding: 7px 10px; border-top: 1px solid rgba(255,255,255,.18); }
.lia-table.matrix th.m-comp-sub { background: #d97323; font-weight: 500; padding: 7px 10px; border-top: 1px solid rgba(255,255,255,.18); }
.lia-table.matrix tbody td {
    padding: 9px 12px;
    border-bottom: 1px solid #f3f4f6;
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.lia-table.matrix tbody td.td-center { text-align: left; font-weight: 500; color: var(--lia-text); }
.lia-table.matrix tbody td.td-own  { color: #00AEA9; font-weight: 600; }
.lia-table.matrix tbody td.td-comp { color: #e8833a; font-weight: 600; }
.lia-table.matrix tbody td.td-num  { color: var(--lia-text-soft); }
.lia-table.matrix tbody td.td-diff { text-align: center; }
.lia-table.matrix tbody tr:nth-child(even) td { background: #fafbfc; }
.lia-table.matrix tbody tr:hover td { background: rgba(0,174,169,.05); }
.lia-table.matrix tbody td.td-diff strong.up        { color: #16a34a; font-weight: 700; }
.lia-table.matrix tbody td.td-diff strong.up-mild   { color: #84cc16; font-weight: 700; }
.lia-table.matrix tbody td.td-diff strong.flat      { color: var(--lia-text-mute); font-weight: 600; }
.lia-table.matrix tbody td.td-diff strong.down-mild { color: #f59e0b; font-weight: 700; }
.lia-table.matrix tbody td.td-diff strong.down      { color: #ef4444; font-weight: 700; }
.muted-mono {
    font-family: 'SF Mono', Consolas, monospace;
    font-size: 12px;
    color: var(--lia-text-mute);
}

.dashboard-empty-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}
.empty-action-btn {
    background: white;
    border: 1px solid var(--lia-card-border);
    border-radius: 12px;
    padding: 18px 22px;
    text-align: center;
    cursor: pointer;
    transition: all .15s;
    width: 200px;
}
.empty-action-btn:hover {
    border-color: var(--lia-primary);
    box-shadow: var(--lia-shadow-hover);
    transform: translateY(-2px);
}
.empty-action-btn i { font-size: 26px; color: var(--lia-primary); margin-bottom: 8px; }
.empty-action-btn .name { font-size: 14px; font-weight: 600; color: var(--lia-text); }
.empty-action-btn .desc { font-size: 11px; color: var(--lia-text-mute); margin-top: 4px; }

/* ----------- Responsive ----------- */
@media (max-width: 1024px) {
    .dash-grid { grid-template-columns: repeat(2, 1fr); }
    .dashboard-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    /* Sidebar comprimida (solo iconos) */
    .lia-sidebar { width: 64px; }
    .lia-sidebar-logo img { height: 28px; }
    .lia-sidebar-nav { padding: 8px 6px; }
    .lia-nav-item { justify-content: center; padding: 10px; }
    .lia-nav-item span { display: none; }
    .lia-sidebar-footer { display: none; }
    .lia-content { padding: 14px 12px; }

    /* Topbar / page-head */
    .page-head { flex-direction: column; align-items: flex-start; gap: 10px; }
    .page-head .rhs { width: 100%; justify-content: flex-end; }

    /* Pulso: trend cards y feed */
    .trend-grid { grid-template-columns: 1fr; }
    .section-card { padding: 14px; }
    .review-list { gap: 10px; }

    /* Dashboard: filterbar en 2 filas */
    .dash-filterbar { flex-direction: column; align-items: stretch; padding: 10px 12px; }
    .dash-filters-left, .dash-filters-right { width: 100%; justify-content: flex-start; }
    .dash-tabs { padding: 8px 12px 0; overflow-x: auto; flex-wrap: nowrap; }
    .dash-content { padding: 12px; }
    .dash-grid { grid-template-columns: 1fr; grid-auto-rows: 220px; }
    .dashboard-grid { grid-template-columns: 1fr; }
    /* Charts que ocupan w:2 o w:3 ahora caben en 1 col */
    .dash-chart-card[style*="grid-column"] { grid-column: auto !important; }

    /* KPI mas compacto */
    .kpi-wrap { padding: 12px 8px; }
    .kpi-wrap .kpi-value { font-size: 36px; }

    /* Chat: sidebar conversaciones overlay (no quita ancho) */
    .chat-sidebar:not(.collapsed) {
        position: absolute;
        top: 0; left: 0; bottom: 0;
        z-index: 30;
        box-shadow: var(--lia-shadow-hover);
    }
    .chat-hero-title { font-size: 22px; }
    .chat-hero-subtitle { font-size: 13px; }
    .chat-hero-cards { grid-template-columns: 1fr; }
    .chat-messages { padding: 16px 12px; }
    .chat-input-area { padding: 10px 12px 14px; }

    /* Responder: la sidebar de centros pasa abajo */
    .responder-shell { flex-direction: column; }
    .responder-sidebar { width: 100% !important; max-height: 280px; }

    /* Tabla matrix con scroll horizontal (dash-table-wrap ya tiene overflow:auto) */
    .lia-table.matrix { min-width: 600px; }

    /* Modales mas estrechos */
    .modal-dialog { margin: 8px; }
}

@media (max-width: 480px) {
    .lia-content { padding: 10px 8px; }
    .page-head h1 { font-size: 22px; }
    .kpi-wrap .kpi-value { font-size: 30px; }
    .dash-tabs .dash-tab { font-size: 12px; padding: 6px 10px; }
    .chat-hero-logo { height: 60px; }
    .chat-hero-title { font-size: 19px; }
}