/* ============================================================
   LexIA — Sistema de diseño "Tinta & Oro"
   Estética editorial legal-tech: serif de display (Fraunces) +
   sans de interfaz (Inter), paleta tinta profunda / papel cálido
   con acento dorado. Corre sobre la grilla de Bootstrap 5.
   ============================================================ */

:root {
    /* Paleta */
    --ink: #0d1321;          /* tinta profunda (fondo oscuro) */
    --ink-2: #151d30;        /* tinta elevada */
    --ink-3: #1e2a45;        /* tinta borde/hover */
    --paper: #f6f4ee;        /* papel cálido (fondo claro) */
    --surface: #fffdf9;      /* superficie de tarjetas */
    --border: #e6e1d5;       /* borde cálido */
    --text: #1c2333;         /* texto principal */
    --text-2: #5b6478;       /* texto secundario */
    --text-3: #98a0b3;       /* texto terciario */
    --gold: #b8963f;         /* oro sobrio */
    --gold-2: #d8b45a;       /* oro claro (hover/gradientes) */
    --gold-ink: #2a2410;     /* texto sobre oro */
    --ok: #2e7d5b; --warn: #b07b1e; --bad: #b04a3a; --info: #3a6ea5;

    /* Tipografía */
    --font-display: "Fraunces", Georgia, serif;
    --font-ui: "Inter", -apple-system, "Segoe UI", sans-serif;

    /* Forma */
    --radius: 14px;
    --radius-sm: 9px;
    --shadow: 0 1px 2px rgba(13,19,33,.05), 0 8px 24px -12px rgba(13,19,33,.12);
    --shadow-lift: 0 2px 4px rgba(13,19,33,.06), 0 18px 40px -16px rgba(13,19,33,.22);
}

/* ---------- Base ---------- */
html { scroll-behavior: smooth; }
body {
    font-family: var(--font-ui);
    background: var(--paper);
    color: var(--text);
    -webkit-font-smoothing: antialiased;
    letter-spacing: -0.011em;
    /* Footer siempre al fondo, incluso en páginas cortas */
    display: flex; flex-direction: column; min-height: 100vh;
}
body > main { flex: 1 0 auto; }
body > .lx-footer { margin-top: auto !important; }
h1, h2, h3, .display-font {
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--text);
}
::selection { background: var(--gold-2); color: var(--gold-ink); }
a { color: var(--gold); text-decoration: none; }
a:hover { color: var(--gold-2); }
.text-2 { color: var(--text-2) !important; }
.text-3 { color: var(--text-3) !important; }

/* ---------- Navbar ---------- */
.lx-nav {
    background: rgba(13,19,33,.92);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255,255,255,.06);
    padding: .8rem 0;
    position: sticky; top: 0; z-index: 1030;
}
.lx-brand {
    font-family: var(--font-display);
    font-size: 1.35rem; font-weight: 600;
    color: #fff !important; text-decoration: none;
    display: inline-flex; align-items: center; gap: .55rem;
    letter-spacing: -0.01em;
}
.lx-brand .bi { color: var(--gold-2); font-size: 1.15rem; }
.lx-brand em { color: var(--gold-2); font-style: normal; }
.lx-nav .nav-link {
    color: rgba(255,255,255,.66) !important;
    font-size: .92rem; font-weight: 500;
    padding: .35rem .75rem !important; border-radius: 8px;
    transition: color .15s, background .15s;
}
.lx-nav .nav-link:hover { color: #fff !important; background: rgba(255,255,255,.07); }
.lx-nav .nav-link.active { color: #fff !important; }
.lx-user-chip {
    color: rgba(255,255,255,.5); font-size: .85rem;
    border: 1px solid rgba(255,255,255,.12);
    padding: .3rem .8rem; border-radius: 99px;
}

/* ---------- Botones ---------- */
.btn { font-family: var(--font-ui); font-weight: 600; letter-spacing: -0.01em; border-radius: 10px; transition: all .18s ease; }
.btn-lexia {
    background: linear-gradient(135deg, var(--gold-2), var(--gold));
    color: var(--gold-ink); border: none;
    padding: .55rem 1.25rem;
    box-shadow: 0 1px 2px rgba(13,19,33,.15), inset 0 1px 0 rgba(255,255,255,.35);
}
.btn-lexia:hover { color: var(--gold-ink); transform: translateY(-1px); box-shadow: 0 4px 14px -4px rgba(184,150,63,.55), inset 0 1px 0 rgba(255,255,255,.35); }
.btn-lexia:disabled { opacity: .55; transform: none; }
.btn-ink {
    background: var(--ink); color: #fff; border: 1px solid var(--ink);
    padding: .55rem 1.25rem;
}
.btn-ink:hover { background: var(--ink-3); color: #fff; transform: translateY(-1px); }
.btn-ghost {
    background: transparent; color: var(--text-2); border: 1px solid var(--border);
}
.btn-ghost:hover { color: var(--text); border-color: var(--text-3); background: var(--surface); }
.btn-ghost-light { background: transparent; color: rgba(255,255,255,.85); border: 1px solid rgba(255,255,255,.25); }
.btn-ghost-light:hover { color: #fff; border-color: rgba(255,255,255,.6); background: rgba(255,255,255,.06); }

/* ---------- Tarjetas ---------- */
.lx-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
a .lx-card:hover, .lx-card.lx-hover:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lift);
    border-color: #d9d2c0;
}
.lx-card .card-body { padding: 1.4rem; }
.lx-icon {
    width: 42px; height: 42px; border-radius: 11px;
    display: inline-flex; align-items: center; justify-content: center;
    background: linear-gradient(140deg, #f3ecd9, #ece1c4);
    color: var(--gold); font-size: 1.15rem;
    border: 1px solid #e8dfc6;
}
.lx-icon.dark { background: var(--ink); color: var(--gold-2); border-color: var(--ink); }

/* ---------- Etiquetas / badges ---------- */
.lx-eyebrow {
    font-size: .74rem; font-weight: 700; letter-spacing: .14em;
    text-transform: uppercase; color: var(--gold);
}
.lx-badge {
    display: inline-flex; align-items: center; gap: .3rem;
    font-size: .74rem; font-weight: 600; padding: .22rem .6rem;
    border-radius: 99px; border: 1px solid transparent;
}
.lx-badge.ok    { color: var(--ok);   background: #e8f3ee; border-color: #cfe6db; }
.lx-badge.warn  { color: var(--warn); background: #faf1de; border-color: #eeddb4; }
.lx-badge.bad   { color: var(--bad);  background: #f9e9e6; border-color: #efd0ca; }
.lx-badge.info  { color: var(--info); background: #e9f0f8; border-color: #d2e0f0; }
.lx-badge.mute  { color: var(--text-2); background: #efece4; border-color: var(--border); }

/* ---------- Formularios ---------- */
.form-control, .form-select {
    border: 1px solid var(--border); border-radius: 10px;
    background: #fff; color: var(--text);
    padding: .6rem .85rem; font-size: .95rem;
    transition: border-color .15s, box-shadow .15s;
}
.form-control:focus, .form-select:focus {
    border-color: var(--gold); box-shadow: 0 0 0 .2rem rgba(184,150,63,.14);
}
.form-label { font-weight: 600; font-size: .86rem; color: var(--text); margin-bottom: .35rem; }
.form-text { color: var(--text-3); }

/* ---------- Tablas ---------- */
.lx-table { margin: 0; }
.lx-table thead th {
    font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    color: var(--text-3); background: #f4f1e9 !important;
    border-bottom: 1px solid var(--border); padding: .7rem 1rem;
}
.lx-table tbody td { padding: .8rem 1rem; border-color: #efece3; color: var(--text); vertical-align: middle; }
.lx-table tbody tr { transition: background .12s; }
.lx-table.table-hover tbody tr:hover { background: #faf7ef; }

/* ---------- Alerts ---------- */
.alert { border-radius: var(--radius-sm); border: 1px solid; font-size: .92rem; }
.alert-success { background: #eef6f1; border-color: #cfe6db; color: var(--ok); }
.alert-danger  { background: #fbeeec; border-color: #efd0ca; color: var(--bad); }
.alert-warning { background: #fbf3e0; border-color: #eeddb4; color: var(--warn); }
.alert-info    { background: #eef3f9; border-color: #d2e0f0; color: var(--info); }

/* ============================================================
   Landing
   ============================================================ */
.lx-hero {
    position: relative; overflow: hidden;
    background: var(--ink); color: #fff;
    padding: 6.5rem 0 5.5rem;
}
.lx-hero::before {
    content: ""; position: absolute; inset: 0;
    background:
        radial-gradient(720px 340px at 78% 4%, rgba(216,180,90,.16), transparent 62%),
        radial-gradient(560px 400px at 8% 96%, rgba(58,110,165,.14), transparent 60%);
    pointer-events: none;
}
.lx-hero::after {
    content: ""; position: absolute; inset: 0; opacity: .35; pointer-events: none;
    background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
    background-size: 56px 56px;
    -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 30%, #000 30%, transparent 75%);
            mask-image: radial-gradient(ellipse 90% 70% at 50% 30%, #000 30%, transparent 75%);
}
.lx-hero .container { position: relative; z-index: 1; }
.lx-hero h1 {
    font-size: clamp(2.6rem, 5.4vw, 4.3rem);
    line-height: 1.06; color: #fff; font-weight: 560;
}
.lx-hero h1 em { font-style: italic; color: var(--gold-2); }
.lx-hero .lead { color: rgba(255,255,255,.72); font-size: 1.13rem; max-width: 610px; }
.lx-hero-pill {
    display: inline-flex; align-items: center; gap: .5rem;
    font-size: .82rem; font-weight: 600; color: var(--gold-2);
    border: 1px solid rgba(216,180,90,.35); background: rgba(216,180,90,.08);
    padding: .38rem 1rem; border-radius: 99px; margin-bottom: 1.6rem;
}
.lx-stats { border-top: 1px solid rgba(255,255,255,.1); }
.lx-stat .num { font-family: var(--font-display); font-size: 1.9rem; color: var(--gold-2); font-weight: 600; }
.lx-stat .lbl { color: rgba(255,255,255,.55); font-size: .84rem; }

/* Mock del producto en el hero (ventana de chat en HTML/CSS puro). */
.lx-mock {
    background: #101828; border: 1px solid rgba(255,255,255,.1);
    border-radius: 16px; overflow: hidden;
    box-shadow: 0 30px 70px -20px rgba(0,0,0,.6);
    transform: rotate(1.2deg);
}
.lx-mock-bar {
    display: flex; align-items: center; gap: .45rem;
    background: rgba(255,255,255,.05); border-bottom: 1px solid rgba(255,255,255,.08);
    padding: .6rem .9rem; font-size: .74rem; color: rgba(255,255,255,.45);
}
.lx-mock-bar i.dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.lx-mock-body { padding: 1rem; display: flex; flex-direction: column; gap: .6rem; }
.lx-mock-msg { font-size: .8rem; line-height: 1.5; padding: .55rem .8rem; border-radius: 11px; max-width: 88%; }
.lx-mock-msg.user { background: rgba(216,180,90,.16); color: #f2e8cf; margin-left: auto; border-radius: 11px 11px 3px 11px; }
.lx-mock-msg.bot { background: rgba(255,255,255,.06); color: rgba(255,255,255,.85); border-left: 2px solid var(--gold-2); border-radius: 3px 11px 11px 11px; }
.lx-mock-msg.bot strong { color: var(--gold-2); }
.lx-mock-chip {
    display: inline-flex; align-items: center; gap: .45rem;
    font-size: .76rem; color: var(--gold-2);
    background: rgba(216,180,90,.1); border: 1px solid rgba(216,180,90,.3);
    padding: .45rem .8rem; border-radius: 99px; align-self: flex-start;
}

.lx-section { padding: 5rem 0; }
.lx-section-title { font-size: clamp(1.7rem, 3vw, 2.4rem); margin-bottom: .6rem; }
.lx-feature-num {
    font-family: var(--font-display); font-size: .95rem; font-weight: 600;
    color: var(--gold); border: 1px solid #e5d9b8; background: #f7f0dd;
    width: 34px; height: 34px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
}
.lx-step { position: relative; padding-left: 1.4rem; border-left: 2px solid #e8e2d2; }
.lx-step::before {
    content: ""; position: absolute; left: -7px; top: .35rem;
    width: 12px; height: 12px; border-radius: 50%;
    background: var(--gold-2); border: 2px solid var(--paper);
    box-shadow: 0 0 0 2px var(--gold-2);
}
.lx-cta {
    background: var(--ink); color: #fff;
    border-radius: calc(var(--radius) + 6px);
    position: relative; overflow: hidden;
}
.lx-cta::before {
    content: ""; position: absolute; inset: 0;
    background: radial-gradient(480px 240px at 85% 20%, rgba(216,180,90,.22), transparent 60%);
}
.lx-footer { background: var(--ink); color: rgba(255,255,255,.5); padding: 2.6rem 0; font-size: .88rem; }
.lx-footer a { color: rgba(255,255,255,.72); }
.lx-footer a:hover { color: #fff; }

/* ============================================================
   Páginas legales (Términos / Privacidad)
   ============================================================ */
.lx-legal { color: var(--text-1); line-height: 1.7; }
.lx-legal h3 { font-family: 'Fraunces', serif; font-size: 1.2rem; margin: 2rem 0 .6rem; }
.lx-legal p { margin-bottom: 1rem; }
.lx-legal ul { margin: 0 0 1rem 1.1rem; }
.lx-legal li { margin-bottom: .4rem; }

/* ============================================================
   Auth
   ============================================================ */
.lx-auth-body {
    min-height: 100vh; background: var(--ink); position: relative; overflow-x: hidden;
}
.lx-auth-body::before {
    content: ""; position: fixed; inset: 0;
    background:
        radial-gradient(700px 420px at 82% -5%, rgba(216,180,90,.15), transparent 60%),
        radial-gradient(600px 420px at 0% 100%, rgba(58,110,165,.13), transparent 60%);
    pointer-events: none;
}
.lx-auth-card {
    max-width: 460px; margin: 6vh auto 4vh; position: relative; z-index: 1;
    background: var(--surface); border-radius: calc(var(--radius) + 4px);
    border: 1px solid rgba(255,255,255,.08);
    box-shadow: 0 30px 80px -20px rgba(0,0,0,.55);
    padding: 2.2rem 2.2rem 1.9rem;
}
.lx-auth-brand { text-align: center; margin-bottom: 1.4rem; position: relative; z-index: 1; }
.lx-auth-brand a {
    font-family: var(--font-display); font-size: 1.7rem; font-weight: 600; color: #fff;
    display: inline-flex; align-items: center; gap: .5rem;
}
.lx-auth-brand .bi { color: var(--gold-2); }

/* ============================================================
   Dashboard / App
   ============================================================ */
.lx-page-head { padding: 2.2rem 0 1.4rem; }
.lx-page-head h3, .lx-page-head h4 { margin: 0; }
.lx-credit-box {
    background: var(--ink); color: #fff; border-radius: var(--radius);
    padding: 1.1rem 1.4rem; min-width: 210px;
    position: relative; overflow: hidden;
}
.lx-credit-box::before {
    content: ""; position: absolute; inset: 0;
    background: radial-gradient(220px 120px at 90% 0%, rgba(216,180,90,.25), transparent 65%);
}
.lx-credit-box .num { font-family: var(--font-display); font-size: 2rem; font-weight: 600; color: var(--gold-2); line-height: 1; position: relative; }
.lx-credit-box .lbl { color: rgba(255,255,255,.55); font-size: .8rem; position: relative; }
.lx-progress { height: 5px; background: rgba(255,255,255,.14); border-radius: 99px; overflow: hidden; position: relative; }
.lx-progress > span { display: block; height: 100%; background: linear-gradient(90deg, var(--gold), var(--gold-2)); border-radius: 99px; }

.lx-action { text-decoration: none; display: block; height: 100%; }
.lx-action .lx-card { height: 100%; }
.lx-action h6 { color: var(--text); font-weight: 650; margin: .85rem 0 .2rem; }
.lx-action p { color: var(--text-2); font-size: .85rem; margin: 0; }
.lx-action .bi-arrow-right-short { color: var(--text-3); transition: transform .18s, color .18s; font-size: 1.3rem; }
.lx-action:hover .bi-arrow-right-short { transform: translateX(4px); color: var(--gold); }

/* ============================================================
   Chat
   ============================================================ */
.lx-chat-wrap { height: calc(100vh - 175px); min-height: 480px; }
.lx-conv-list { overflow-y: auto; }

/* Móvil: el chat se apila — lista de conversaciones compacta arriba, mensajes abajo. */
@media (max-width: 767.98px) {
    .lx-chat-wrap { height: auto; min-height: 0; }
    .lx-chat-side .lx-conv-list { max-height: 130px; }
    .lx-msgs { height: 52vh; min-height: 320px; }
    .lx-bubble { max-width: 92%; }
}
.lx-conv-item {
    cursor: pointer; border-radius: var(--radius-sm);
    padding: .65rem .8rem; margin-bottom: .3rem;
    font-size: .875rem; color: var(--text-2);
    border: 1px solid transparent;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    transition: all .15s;
}
.lx-conv-item:hover { background: var(--surface); border-color: var(--border); color: var(--text); }
.lx-conv-item.active { background: var(--surface); border-color: #d9cfae; color: var(--text); font-weight: 600; box-shadow: var(--shadow); }
.lx-msgs {
    overflow-y: auto; background: var(--surface);
    border: 1px solid var(--border); border-radius: var(--radius);
    box-shadow: var(--shadow);
}
.lx-bubble { max-width: 78%; white-space: pre-wrap; word-wrap: break-word; font-size: .93rem; line-height: 1.55; }
.lx-bubble.user {
    background: var(--ink); color: rgba(255,255,255,.92);
    margin-left: auto; border-radius: 16px 16px 4px 16px;
    padding: .7rem 1rem;
}
.lx-bubble.assistant {
    background: #faf7ef; color: var(--text);
    border: 1px solid #eee8d8; border-left: 3px solid var(--gold-2);
    border-radius: 4px 16px 16px 16px;
    padding: .8rem 1.05rem;
}
.lx-chat-input textarea { resize: none; }

/* ============================================================
   Admin
   ============================================================ */
.lx-sidebar {
    background: var(--ink); min-height: 100vh;
    padding: 1.1rem .9rem;
    border-right: 1px solid rgba(255,255,255,.05);
}
.lx-sidebar .brand {
    font-family: var(--font-display); color: #fff; font-weight: 600;
    font-size: 1.15rem; padding: .4rem .6rem 1.1rem;
    display: flex; align-items: center; gap: .5rem;
}
.lx-sidebar .brand .bi { color: var(--gold-2); }
.lx-sidebar a.lx-side-link {
    color: rgba(255,255,255,.6); text-decoration: none;
    display: flex; align-items: center; gap: .65rem;
    padding: .58rem .8rem; border-radius: 9px; font-size: .92rem; font-weight: 500;
    margin-bottom: .15rem; border-left: 2px solid transparent;
    transition: all .15s;
}
.lx-sidebar a.lx-side-link:hover { color: #fff; background: rgba(255,255,255,.06); }
.lx-sidebar a.lx-side-link.active {
    color: #fff; background: rgba(216,180,90,.1);
    border-left-color: var(--gold-2);
}
.lx-sidebar a.lx-side-link .bi { font-size: 1rem; color: rgba(255,255,255,.45); }
.lx-sidebar a.lx-side-link.active .bi { color: var(--gold-2); }
@media (max-width: 767.98px) {
    .lx-sidebar { min-height: auto; }
}
.lx-stat-card { border-left: 3px solid var(--gold-2); }
.lx-stat-card .num { font-family: var(--font-display); font-size: 1.75rem; font-weight: 600; line-height: 1.1; }
.lx-stat-card .lbl { font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }

/* ============================================================
   Widget de soporte (landing)
   ============================================================ */
.lx-sop-btn {
    position: fixed; right: 22px; bottom: 22px; z-index: 1050;
    width: 56px; height: 56px; border-radius: 50%; border: none;
    background: linear-gradient(135deg, var(--gold-2), var(--gold));
    color: var(--gold-ink); font-size: 1.35rem;
    box-shadow: 0 8px 24px -6px rgba(184,150,63,.6);
    transition: transform .18s ease;
}
.lx-sop-btn:hover { transform: translateY(-2px) scale(1.04); }
.lx-sop {
    position: fixed; right: 22px; bottom: 90px; z-index: 1050;
    width: min(360px, calc(100vw - 32px)); max-height: min(540px, 75vh);
    display: flex; flex-direction: column;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); box-shadow: var(--shadow-lift);
    overflow: hidden; animation: lxFadeUp .25s ease both;
}
.lx-sop-head {
    background: var(--ink); color: #fff;
    padding: .85rem 1rem; display: flex; justify-content: space-between; align-items: center;
}
.lx-sop-body { padding: 1rem; overflow-y: auto; display: flex; flex-direction: column; gap: .55rem; }
.lx-sop-msg { font-size: .875rem; line-height: 1.5; padding: .6rem .85rem; border-radius: 12px; max-width: 92%; }
.lx-sop-msg.bot { background: #f3efe4; color: var(--text); border: 1px solid #eae3d0; border-radius: 4px 12px 12px 12px; }
.lx-sop-msg.user { background: var(--ink); color: rgba(255,255,255,.92); margin-left: auto; border-radius: 12px 12px 4px 12px; }
.lx-sop-opts { display: flex; flex-direction: column; gap: .35rem; }
.lx-sop-opt {
    text-align: left; font-size: .82rem; font-weight: 500;
    background: var(--surface); color: var(--text-2);
    border: 1px solid var(--border); border-radius: 9px;
    padding: .5rem .75rem; transition: all .15s;
}
.lx-sop-opt:hover { border-color: var(--gold); color: var(--text); background: #faf7ef; }
.lx-sop-opt-alt { color: var(--gold); border-color: #e5d9b8; }
.lx-sop-form { background: #f8f5ec; border: 1px solid var(--border); border-radius: 12px; padding: .8rem; }

/* ---------- Misc ---------- */
.lx-divider { border-top: 1px solid var(--border); }
.lx-kbd {
    font-family: var(--font-ui); font-size: .78rem; color: var(--text-2);
    background: #efece4; border: 1px solid var(--border); border-bottom-width: 2px;
    padding: .1rem .45rem; border-radius: 6px;
}
.lx-fade-up { animation: lxFadeUp .5s ease both; }
@keyframes lxFadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .lx-fade-up { animation: none; } }