/* ============================================================
   FENGHI Command Center — sistema de diseño (vanilla, sin framework)
   Montserrat · blanco · #D9ECFF (superficie) · #00305C (azul Fenghi)
   Regla de oro: ningún valor suelto. Todo sale de un token de :root.
   App-shell: la página NUNCA scrollea; solo regiones concretas.
   ============================================================ */

:root {
    /* ---- Color ---- */
    --white:      #FFFFFF;
    --navy:       #00305C;   /* azul Fenghi: acento, botones, números, títulos */
    --navy-700:   #002544;   /* hover de navy */
    --blue:       #D9ECFF;   /* superficie / línea / estado activo */
    --blue-soft:  #EAF4FF;   /* hover */
    --blue-inset: #F4F9FF;   /* fondo de inputs / hover de fila */
    --ink:        #10283D;   /* texto principal */
    --muted:      #5B7488;   /* texto secundario */
    --line:       #D9ECFF;   /* divisores (= --blue) */
    --ok:         #2E7D5B;   /* punto "sincronizado" */
    --error:      #C0392B;   /* errores */
    --error-bg:   #FDECEA;

    /* ---- Tipografía (escala de 7 pasos) ---- */
    --font:    'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --fs-2xs:  0.70rem;   /* eyebrow labels, badge, foot */
    --fs-xs:   0.80rem;   /* hints, meta, preview */
    --fs-sm:   0.88rem;   /* texto secundario, items, nav */
    --fs-md:   0.95rem;   /* cuerpo, inputs, botones */
    --fs-lg:   1.05rem;   /* títulos de tarjeta, marca */
    --fs-xl:   1.60rem;   /* títulos de página */
    --fs-2xl:  1.95rem;   /* números KPI */
    --fw-medium:   500;
    --fw-semibold: 600;
    --fw-bold:     700;

    /* ---- Espaciado (ritmo de 4px) ---- */
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 20px;
    --sp-6: 24px;
    --sp-8: 32px;
    --sp-10: 40px;

    /* ---- Radios ---- */
    --r-sm:   8px;
    --r-md:   10px;
    --r-lg:   12px;
    --r-xl:   16px;
    --r-pill: 999px;

    /* ---- Varios ---- */
    --side-w:   236px;
    --shadow:   0 20px 60px rgba(0, 48, 92, .08);
    --t:        .12s ease;
}

/* ===================== BASE / RESET ===================== */
* { box-sizing: border-box; }

html, body { height: 100%; margin: 0; overflow: hidden; } /* la página no scrollea */

body {
    font-family: var(--font);
    font-size: var(--fs-md);
    color: var(--ink);
    background: var(--white);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}
body.pre-auth { overflow: auto; }

h1, h2, h3 { margin: 0; font-weight: var(--fw-semibold); letter-spacing: -.01em; color: var(--navy); }
a { color: var(--navy); text-decoration: none; }
button, input, textarea, select { font-family: inherit; }

/* Eyebrow labels: mismo tratamiento en toda la app */
.brand-sub, .card.stat .label, .field-label, .ref-box h3 {
    font-size: var(--fs-2xs); font-weight: var(--fw-semibold);
    text-transform: uppercase; letter-spacing: .08em; color: var(--muted);
}

/* Números tabulares (alinean en columnas) */
.card.stat .big, .metric, table.data td, .insight-bars { font-variant-numeric: tabular-nums; }

/* ===================== APP SHELL ===================== */
.app { display: flex; height: 100vh; }

.sidebar {
    width: var(--side-w); flex-shrink: 0; height: 100vh;
    display: flex; flex-direction: column;
    padding: var(--sp-6) var(--sp-4);
    background: var(--white); border-right: 1px solid var(--line);
}
.sidebar .brand { display: flex; align-items: center; gap: var(--sp-2); padding: 0 var(--sp-3); font-size: var(--fs-lg); font-weight: var(--fw-bold); letter-spacing: .22em; }
.sidebar .brand-logo { width: 26px; height: 26px; flex-shrink: 0; }
.sidebar .brand-sub { padding: 0 var(--sp-3); margin-bottom: var(--sp-8); letter-spacing: .28em; }
.sidebar nav { display: flex; flex-direction: column; gap: var(--sp-1); }
.sidebar nav a, .sidebar .logout {
    padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md);
    font-size: var(--fs-sm); font-weight: var(--fw-medium); transition: background var(--t), color var(--t);
}
.sidebar nav a { display: flex; align-items: center; color: var(--ink); }
.sidebar nav a:hover, .sidebar .logout:hover { background: var(--blue-soft); }
.sidebar nav a.active { background: var(--blue); color: var(--navy); font-weight: var(--fw-semibold); }
.sidebar nav .nav-section { margin-top: var(--sp-4); padding: 0 var(--sp-4) var(--sp-1); font-size: var(--fs-2xs); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: .12em; color: var(--muted); }
.sidebar nav .nav-section:first-child { margin-top: 0; }
.sidebar .logout { margin-top: auto; color: var(--muted); }
.sidebar .logout:hover { color: var(--ink); }

.main { flex: 1; height: 100vh; display: flex; flex-direction: column; overflow: hidden; }
.view {
    flex: 1; min-height: 0; overflow: hidden;
    display: flex; flex-direction: column; gap: var(--sp-4);
    padding: var(--sp-8) var(--sp-10);
}
.grow { flex: 1; min-height: 0; } /* ocupa el alto restante; scrollea por dentro si hace falta */

/* ===================== PAGE HEAD ===================== */
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-5); }
.page-head h1 { font-size: var(--fs-xl); }
.page-head .sub { margin: var(--sp-1) 0 0; max-width: 60ch; font-size: var(--fs-sm); color: var(--muted); }

/* ===================== TARJETAS ===================== */
.card {
    display: flex; flex-direction: column; min-height: 0;
    padding: var(--sp-6); background: var(--white);
    border: 1px solid var(--line); border-radius: var(--r-lg);
}
.card h2 { font-size: var(--fs-lg); }
.card .hint { margin: var(--sp-1) 0 var(--sp-3); font-size: var(--fs-xs); color: var(--muted); }

/* KPIs */
.cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); }
.card.stat { gap: var(--sp-1); padding: var(--sp-4) var(--sp-5); }
.card.stat .big { font-size: var(--fs-2xl); font-weight: var(--fw-bold); color: var(--navy); letter-spacing: -.02em; line-height: 1.15; }
.card.stat .foot { font-size: var(--fs-2xs); color: var(--muted); }

.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }

/* ===================== LISTAS clave-valor ===================== */
.list-card { overflow: hidden; }
.lead-list, .ref-list { list-style: none; margin: 0; padding: 0; }
.lead-list { overflow-y: auto; min-height: 0; }
.lead-list li, .ref-list li {
    display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-4);
    padding: var(--sp-2) 0; border-bottom: 1px solid var(--line);
}
.lead-list li:last-child, .ref-list li:last-child { border-bottom: none; }
.lead-list li { font-size: var(--fs-sm); }
.ref-list li { font-size: var(--fs-xs); }
.metric { font-weight: var(--fw-semibold); color: var(--navy); white-space: nowrap; }

/* ===================== BOTONES ===================== */
.btn-primary, .btn-ghost {
    display: inline-block; padding: var(--sp-3) var(--sp-6); border-radius: var(--r-pill);
    font-size: var(--fs-md); font-weight: var(--fw-semibold); cursor: pointer; transition: background var(--t);
}
.btn-primary { background: var(--navy); color: var(--white); border: none; }
.btn-primary:hover { background: var(--navy-700); color: var(--white); }
.btn-primary.full { width: 100%; }
.btn-ghost { background: var(--white); color: var(--navy); border: 1px solid var(--navy); }
.btn-ghost:hover { background: var(--blue-soft); }
.cta-row { display: flex; gap: var(--sp-3); flex-wrap: wrap; }

/* ===================== CONTROLES DE FORMULARIO ===================== */
.login-card input, textarea {
    width: 100%; padding: var(--sp-3) var(--sp-4);
    background: var(--blue-inset); border: 1px solid var(--line); border-radius: var(--r-md);
    font-size: var(--fs-md);
}
.login-card input:focus, textarea:focus { outline: none; border-color: var(--navy); }
textarea { resize: vertical; }

/* ===================== ESTADO (pill) ===================== */
.status-pill {
    display: inline-flex; align-items: center; gap: var(--sp-2); white-space: nowrap;
    padding: var(--sp-2) var(--sp-4); border-radius: var(--r-pill);
    font-size: var(--fs-xs); font-weight: var(--fw-medium);
    background: var(--blue); color: var(--navy);
}
.status-pill .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); }
.status-pill.warn { background: var(--blue-inset); color: var(--muted); }
.status-pill.warn .dot { background: var(--muted); }

/* ===================== LOGIN ===================== */
.auth-wrap { display: flex; align-items: center; justify-content: center; min-height: 100vh; background: var(--blue-inset); }
.login-card {
    width: 340px; padding: var(--sp-10); text-align: center;
    background: var(--white); border: 1px solid var(--line); border-radius: var(--r-xl); box-shadow: var(--shadow);
}
.login-card .login-logo { display: block; width: 84px; height: 84px; margin: 0 auto var(--sp-4); }
.login-card form { display: flex; flex-direction: column; gap: var(--sp-3); margin-top: var(--sp-2); }
.login-card .display { font-size: var(--fs-xl); font-weight: var(--fw-bold); letter-spacing: .22em; }
.login-card .sub { margin: var(--sp-2) 0 var(--sp-6); font-size: var(--fs-2xs); font-weight: var(--fw-medium); text-transform: uppercase; letter-spacing: .2em; color: var(--muted); }
.login-card button {
    width: 100%; padding: var(--sp-3); border: none; border-radius: var(--r-md);
    background: var(--navy); color: var(--white); font-size: var(--fs-md); font-weight: var(--fw-semibold); cursor: pointer; transition: background var(--t);
}
.login-card button:hover { background: var(--navy-700); }

/* ===================== INSIGHTS (tira horizontal) ===================== */
.insights-strip { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--sp-3); }
.insight { padding: var(--sp-4); background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); }
.insight-label { min-height: 2.4em; margin-bottom: var(--sp-2); font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--ink); }
.insight-bars { display: flex; flex-direction: column; gap: var(--sp-1); font-size: var(--fs-xs); color: var(--muted); }
.ib-with.win { color: var(--navy); font-weight: var(--fw-bold); }
.insight-lift { margin-top: var(--sp-2); font-size: var(--fs-xs); font-weight: var(--fw-bold); }
.insight-lift.pos { color: var(--ok); }
.insight-lift.neg { color: var(--muted); }

/* ===================== TABLA ===================== */
.table-card { padding: 0; overflow: hidden; }
.table-scroll { flex: 1; min-height: 0; overflow: auto; }
table.data { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
table.data thead th {
    position: sticky; top: 0; z-index: 2;
    padding: var(--sp-3) var(--sp-4); text-align: right; white-space: nowrap;
    background: var(--blue); color: var(--navy);
    font-size: var(--fs-2xs); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: .08em;
}
table.data th a { color: var(--navy); }
table.data td { padding: var(--sp-3) var(--sp-4); text-align: right; white-space: nowrap; border-bottom: 1px solid var(--line); }
table.data th.left, table.data td.left { text-align: left; }
table.data td.left { white-space: normal; max-width: 480px; }
table.data tr:hover td { background: var(--blue-inset); }
table.data .subj { display: block; font-weight: var(--fw-medium); }
table.data .prev { display: block; margin-top: var(--sp-1); font-size: var(--fs-xs); color: var(--muted); }
.nowrap { white-space: nowrap; }

/* ===================== GENERADOR ===================== */
.gen-layout { display: grid; grid-template-columns: 360px 1fr; gap: var(--sp-4); }
.form-col, .result-col { overflow-y: auto; }
.field-label { display: block; margin: var(--sp-4) 0 var(--sp-2); }
.field-label:first-child { margin-top: 0; }
.archetypes { display: flex; flex-direction: column; gap: var(--sp-2); }
.arch-opt {
    display: flex; align-items: center; gap: var(--sp-2);
    padding: var(--sp-3); border: 1px solid var(--line); border-radius: var(--r-md);
    font-size: var(--fs-sm); cursor: pointer; transition: background var(--t), border-color var(--t), color var(--t);
}
.arch-opt:hover { background: var(--blue-soft); }
.arch-opt input { accent-color: var(--navy); }
.arch-opt:has(input:checked) { background: var(--blue); border-color: var(--navy); color: var(--navy); font-weight: var(--fw-semibold); }
.form-col .btn-primary.full { margin-top: var(--sp-4); }
.hint { font-size: var(--fs-xs); color: var(--muted); }
.hint.center { margin-top: var(--sp-3); text-align: center; }

.ref-box { margin-top: var(--sp-6); padding-top: var(--sp-4); border-top: 1px solid var(--line); }
.ref-box h3 { margin-bottom: var(--sp-3); }

.empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; color: var(--muted); }
.empty-state .mark { margin-bottom: var(--sp-3); font-size: var(--fs-2xl); color: var(--blue); }

.result-col h2 { margin: var(--sp-5) 0 var(--sp-3); }
.result-col h2:first-child { margin-top: 0; }
.subj-options { list-style: none; margin: 0; padding: 0; }
.subj-options li { margin-bottom: var(--sp-2); padding: var(--sp-3) var(--sp-4); border: 1px solid var(--line); border-radius: var(--r-lg); }
.subj-options li.recommended { background: var(--blue); border-color: var(--navy); }
.opt-subject { font-size: var(--fs-md); font-weight: var(--fw-semibold); }
.badge { display: inline-block; margin-left: var(--sp-2); padding: 2px var(--sp-2); border-radius: var(--r-pill); background: var(--navy); color: var(--white); font-size: var(--fs-2xs); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: .05em; vertical-align: middle; }
.opt-prev { margin-top: var(--sp-1); font-size: var(--fs-xs); color: var(--muted); }
.opt-angle { margin-top: var(--sp-1); font-size: var(--fs-xs); font-style: italic; color: var(--navy); }

.email-draft { padding: var(--sp-4); background: var(--blue-inset); border: 1px solid var(--line); border-radius: var(--r-lg); }
.email-subj, .email-prev { margin-bottom: var(--sp-1); font-size: var(--fs-sm); }
.email-body { margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid var(--line); font-size: var(--fs-md); line-height: 1.65; }
.rationale { margin-top: var(--sp-4); padding: var(--sp-3) var(--sp-4); background: var(--blue); border-radius: var(--r-md); font-size: var(--fs-sm); color: var(--navy); }
pre.raw { padding: var(--sp-4); background: var(--blue-inset); border-radius: var(--r-md); font-size: var(--fs-xs); white-space: pre-wrap; overflow-x: auto; }

/* ===================== CABINA (home) ===================== */
.cockpit { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: var(--sp-5); }
.cockpit-top { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; }
.cockpit-actions { display: flex; align-items: center; gap: var(--sp-3); }
.btn-sync { padding: var(--sp-2) var(--sp-4); background: var(--white); border: 1px solid var(--line); border-radius: var(--r-pill); font-family: var(--font); font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--navy); cursor: pointer; transition: background var(--t); }
.btn-sync:hover { background: var(--blue-soft); }
.btn-sync:disabled { opacity: .7; cursor: default; }
.milestone { text-align: center; font-size: var(--fs-md); color: var(--muted); }
.milestone strong { color: var(--navy); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }

.ctrl-pills { display: inline-flex; gap: var(--sp-1); padding: var(--sp-1); background: var(--blue-inset); border-radius: var(--r-pill); }
.pill { padding: var(--sp-2) var(--sp-4); border: none; background: transparent; border-radius: var(--r-pill); font-family: var(--font); font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--muted); cursor: pointer; transition: background var(--t), color var(--t); }
.pill:hover { color: var(--ink); }
.pill.active { background: var(--white); color: var(--navy); font-weight: var(--fw-semibold); box-shadow: 0 1px 3px rgba(0,48,92,.12); }

.cockpit-hero {
    flex: 1; min-height: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-3);
    text-align: center; padding: var(--sp-8);
    background: var(--white); border-radius: 24px; box-shadow: 0 10px 44px rgba(0, 48, 92, .08);
}
.cockpit-hero .eyebrow { font-size: var(--fs-2xs); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: .14em; color: var(--muted); }
.hero-number { font-size: clamp(3.5rem, 11vw, 6rem); font-weight: var(--fw-bold); line-height: 1; letter-spacing: -.03em; color: var(--navy); font-variant-numeric: tabular-nums; }
.hero-sub { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: var(--sp-3); font-size: var(--fs-md); font-weight: var(--fw-medium); color: var(--ink); }
.hero-sub .muted { color: var(--muted); font-weight: 400; }
.hero-sub .dotsep { color: var(--line); }
.cmp { font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.cmp.up { color: var(--ok); }
.cmp.down { color: #C0392B; }
.cmp.none, .cmp-lbl { color: var(--muted); font-weight: 400; }

.pulse { width: 100%; max-width: 560px; height: 84px; margin-top: var(--sp-4); display: flex; align-items: flex-end; gap: 3px; }
.pbar { flex: 1; min-height: 3px; background: var(--blue); border-radius: 3px 3px 0 0; transition: height var(--t), background var(--t); }
.pbar.on { background: var(--navy); }
.pbar:hover { background: var(--navy-700); }
.pulse-cap { font-size: var(--fs-2xs); color: var(--muted); }

.cockpit-vitals { display: flex; gap: var(--sp-6); flex-wrap: wrap; align-items: flex-start; }
.vital { display: flex; flex-direction: column; gap: 2px; }
.vital-k { font-size: var(--fs-2xs); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.vital-v { font-size: var(--fs-md); font-weight: var(--fw-bold); color: var(--navy); font-variant-numeric: tabular-nums; }
.vital-track { width: 130px; height: 5px; margin-top: 3px; background: var(--blue-inset); border-radius: var(--r-pill); overflow: hidden; }
.vital-fill { height: 100%; background: var(--navy); border-radius: var(--r-pill); }
.vital-click { cursor: pointer; }
.vital-click:hover .vital-v { color: var(--navy-700); }

/* drill-down de día */
.pbar { cursor: pointer; }
.pbar.selected { background: var(--navy); box-shadow: 0 0 0 2px var(--blue); }
.daydetail { width: 100%; max-width: 560px; margin-top: var(--sp-3); text-align: left; }
.dd-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); font-size: var(--fs-xs); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.dd-back { padding: 2px var(--sp-2); border: none; background: var(--blue-inset); border-radius: var(--r-pill); font-family: var(--font); font-size: var(--fs-2xs); color: var(--navy); cursor: pointer; text-transform: none; letter-spacing: 0; }
.dd-back:hover { background: var(--blue); }
.dd-list { list-style: none; margin: var(--sp-2) 0 0; padding: 0; }
.dd-list li { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-3); padding: var(--sp-2) 0; border-bottom: 1px solid var(--line); font-size: var(--fs-sm); }
.dd-list li:last-child { border-bottom: none; }
.dd-subj { color: var(--ink); }
.dd-metric { color: var(--navy); font-weight: var(--fw-semibold); white-space: nowrap; font-variant-numeric: tabular-nums; }

.cockpit.loading { opacity: .65; transition: opacity var(--t); }

/* ===================== OBJETIVO / RUN-RATE ===================== */
.goalbar { display: flex; height: 16px; margin: var(--sp-3) 0 var(--sp-2); background: var(--white); border: 1px solid var(--line); border-radius: var(--r-pill); overflow: hidden; }
.goalbar-seg { height: 100%; }
.goalbar-seg.ytd { background: var(--navy); }
.goalbar-seg.proj { background: var(--blue); }
.goalbar-legend { display: flex; gap: var(--sp-4); flex-wrap: wrap; font-size: var(--fs-2xs); color: var(--muted); }
.goalbar-legend .sw { display: inline-block; width: 10px; height: 10px; border-radius: 3px; vertical-align: middle; margin-right: var(--sp-1); }
.sw.ytd { background: var(--navy); }
.sw.proj { background: var(--blue); }
.sw.goal { background: var(--white); border: 1px solid var(--line); }

.scenarios { display: flex; flex-direction: column; gap: var(--sp-2); margin-top: var(--sp-4); }
.scenario { display: flex; align-items: baseline; gap: var(--sp-3); padding: var(--sp-2) var(--sp-3); border: 1px solid var(--line); border-radius: var(--r-md); }
.scenario.central { background: var(--blue); border-color: var(--navy); }
.sc-name { flex: 1; font-size: var(--fs-sm); }
.scenario.central .sc-name { font-weight: var(--fw-semibold); color: var(--navy); }
.sc-val { font-weight: var(--fw-bold); color: var(--navy); font-variant-numeric: tabular-nums; }
.sc-pct { min-width: 3ch; text-align: right; font-size: var(--fs-xs); color: var(--muted); }

.barchart { flex: 1; min-height: 180px; display: flex; align-items: flex-end; gap: var(--sp-2); padding-top: var(--sp-3); }
.bar-col { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: var(--sp-1); }
.bar { width: 70%; min-height: 2px; background: var(--navy); border-radius: var(--r-sm) var(--r-sm) 0 0; }
.bar.proj { background: var(--blue); }
.bar-label { font-size: var(--fs-2xs); color: var(--muted); }

/* ===================== CAMPAÑAS (interactivo) ===================== */
.camp-controls { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.search-input { margin-left: auto; min-width: 220px; padding: var(--sp-2) var(--sp-4); background: var(--blue-inset); border: 1px solid var(--line); border-radius: var(--r-pill); font-family: var(--font); font-size: var(--fs-sm); color: var(--ink); }
.search-input:focus { outline: none; border-color: var(--navy); }
.camp-results { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: var(--sp-4); }
.camp-results.loading { opacity: .55; transition: opacity var(--t); }

/* ===================== COMPARATIVA / FILTROS ===================== */
.filters { display: flex; gap: var(--sp-3); align-items: flex-end; flex-wrap: wrap; }
.filters label { display: flex; flex-direction: column; gap: var(--sp-1); font-size: var(--fs-2xs); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
input[type=date] { padding: var(--sp-2) var(--sp-3); background: var(--blue-inset); border: 1px solid var(--line); border-radius: var(--r-md); font-size: var(--fs-sm); color: var(--ink); }
input[type=date]:focus { outline: none; border-color: var(--navy); }
.filters .btn-primary { padding: var(--sp-2) var(--sp-5); }

.period-stats { display: flex; gap: var(--sp-6); flex-wrap: wrap; padding-bottom: var(--sp-3); margin-bottom: var(--sp-2); border-bottom: 1px solid var(--line); }
.period-stats > div { display: flex; flex-direction: column; }
.period-stats .pv { font-size: var(--fs-lg); font-weight: var(--fw-bold); color: var(--navy); font-variant-numeric: tabular-nums; }
.period-stats .pl { font-size: var(--fs-2xs); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }

/* ===================== AVISOS ===================== */
.notice { padding: var(--sp-3) var(--sp-4); border-left: 3px solid var(--navy); border-radius: var(--r-md); background: var(--blue); color: var(--navy); font-size: var(--fs-sm); }
.error { margin-bottom: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-radius: var(--r-sm); background: var(--error-bg); color: var(--error); font-size: var(--fs-sm); }

/* ===================== ANALÍTICA (estilo Seline) ===================== */
/* La columna de contenido SÍ scrollea (el menú lateral queda fijo aparte). */
.an-scroll { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: var(--sp-4); }
.an-scroll > * { flex-shrink: 0; } /* no comprimir las tarjetas: que la columna scrollee */
.an-scroll.loading { opacity: .55; transition: opacity var(--t); }

/* Date picker de calendario (estilo Shopify, marca FENGHI) */
.an-bar { display: flex; justify-content: flex-end; }
.datepicker { position: relative; }
.dp-toggle { display: inline-flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-4); background: var(--white); border: 1px solid var(--line); border-radius: var(--r-pill); font-family: var(--font); font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--navy); cursor: pointer; transition: background var(--t), border-color var(--t); }
.dp-toggle:hover, .dp-toggle.open { background: var(--blue-soft); border-color: var(--navy); }
.dp-ico { font-size: var(--fs-sm); }
.dp-caret { color: var(--muted); font-size: var(--fs-xs); }

.dp-pop { position: absolute; right: 0; top: calc(100% + var(--sp-2)); z-index: 30; display: flex; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow); overflow: hidden; }
.dp-pop[hidden] { display: none; } /* el atributo hidden gana al display:flex */
.datepicker.dp-left .dp-pop { right: auto; left: 0; } /* picker a la izquierda (cabina): abre hacia la derecha */

.dp-side { display: flex; flex-direction: column; gap: 2px; padding: var(--sp-3); min-width: 162px; border-right: 1px solid var(--line); background: var(--blue-inset); }
.dp-preset { text-align: left; padding: var(--sp-2) var(--sp-3); background: transparent; border: none; border-radius: var(--r-md); font-family: var(--font); font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--ink); cursor: pointer; transition: background var(--t), color var(--t); }
.dp-preset:hover { background: var(--blue-soft); }
.dp-preset.active { background: var(--blue); color: var(--navy); font-weight: var(--fw-semibold); }

.dp-main { padding: var(--sp-4); }
.dp-fields { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.dp-f-start, .dp-f-end { flex: 1; padding: var(--sp-2) var(--sp-3); background: var(--blue-inset); border: 1px solid var(--line); border-radius: var(--r-md); font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--navy); text-align: center; white-space: nowrap; }
.dp-arrow { color: var(--muted); }

.dp-cal { display: flex; gap: var(--sp-6); }
.dp-month { width: 224px; }
.dp-month-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-2); }
.dp-month-title { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--navy); }
.dp-nav { cursor: pointer; color: var(--muted); font-size: var(--fs-lg); padding: 0 var(--sp-2); border-radius: var(--r-sm); }
.dp-nav:hover { color: var(--navy); background: var(--blue-soft); }
.dp-nav-sp { width: 24px; }
.dp-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.dp-dows { margin-bottom: var(--sp-1); }
.dp-dow { font-size: var(--fs-2xs); font-weight: var(--fw-semibold); color: var(--muted); text-align: center; padding: var(--sp-1) 0; }
.dp-day { height: 30px; display: flex; align-items: center; justify-content: center; background: transparent; border: none; font-family: var(--font); font-size: var(--fs-xs); color: var(--ink); cursor: pointer; border-radius: var(--r-pill); transition: background var(--t); }
.dp-day:hover { background: var(--blue-soft); }
.dp-day.empty { visibility: hidden; cursor: default; }
.dp-day.in-range { background: var(--blue); border-radius: 0; }
.dp-day.sel { background: var(--navy); color: var(--white); border-radius: var(--r-pill); font-weight: var(--fw-semibold); }

.dp-actions { display: flex; justify-content: flex-end; gap: var(--sp-2); margin-top: var(--sp-4); padding-top: var(--sp-3); border-top: 1px solid var(--line); }
.dp-cancel { padding: var(--sp-2) var(--sp-4); background: var(--white); border: 1px solid var(--line); border-radius: var(--r-pill); font-family: var(--font); font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--navy); cursor: pointer; }
.dp-cancel:hover { background: var(--blue-soft); }
.dp-apply { padding: var(--sp-2) var(--sp-5); font-size: var(--fs-sm); }

/* Tira EN VIVO (lo único realmente "ahora": personas online + pedidos de hoy) */
.live-strip { display: flex; align-items: center; gap: var(--sp-5); flex-wrap: wrap; padding: var(--sp-3) var(--sp-5); background: var(--blue); border-radius: var(--r-lg); }
.live-badge { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-2xs); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: .1em; color: var(--navy); }
.live-badge .pulse-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); animation: livepulse 1.6s ease-out infinite; }
@keyframes livepulse { 0% { box-shadow: 0 0 0 0 rgba(46, 125, 91, .45); } 70% { box-shadow: 0 0 0 7px rgba(46, 125, 91, 0); } 100% { box-shadow: 0 0 0 0 rgba(46, 125, 91, 0); } }
.live-cell { display: inline-flex; align-items: baseline; gap: var(--sp-2); }
.live-cell .lv { font-size: var(--fs-lg); font-weight: var(--fw-bold); color: var(--navy); font-variant-numeric: tabular-nums; }
.live-cell .lk { font-size: var(--fs-sm); color: var(--muted); }
.live-stamp { margin-left: auto; font-size: var(--fs-2xs); color: var(--muted); }

/* Variación vs periodo anterior */
.delta { font-weight: var(--fw-semibold); }
.delta.up   { color: var(--ok); }
.delta.down { color: var(--error); }
.delta.flat { color: var(--muted); }

/* Embudo de compra */
.funnel { display: flex; flex-direction: column; gap: var(--sp-3); margin-top: var(--sp-2); }
.fn-row { display: grid; grid-template-columns: 110px 1fr auto; align-items: center; gap: var(--sp-3); }
.fn-label { font-size: var(--fs-sm); color: var(--ink); }
.fn-track { height: 22px; background: var(--blue-inset); border-radius: var(--r-sm); overflow: hidden; }
.fn-fill { height: 100%; background: var(--navy); border-radius: var(--r-sm); transition: width var(--t); }
.fn-val { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--navy); white-space: nowrap; font-variant-numeric: tabular-nums; }
.fn-sub { font-weight: var(--fw-medium); color: var(--muted); }
.fn-foot { margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid var(--line); font-size: var(--fs-sm); color: var(--ink); }

/* Listas de barras horizontales (fuentes, IA, páginas, dispositivos) */
.hbars { display: flex; flex-direction: column; gap: var(--sp-3); margin-top: var(--sp-2); }
.hbar { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--sp-1) var(--sp-3); }
.hbar-label { font-size: var(--fs-sm); color: var(--ink); }
.hbar-val { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--navy); white-space: nowrap; font-variant-numeric: tabular-nums; }
.hbar-track { grid-column: 1 / -1; height: 6px; background: var(--blue-inset); border-radius: var(--r-pill); overflow: hidden; }
.hbar-fill { height: 100%; background: var(--navy); border-radius: var(--r-pill); transition: width var(--t); }

/* Módulo Tráfico IA */
.ai-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; }
.ai-head .sum { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--navy); font-variant-numeric: tabular-nums; }
.ai-note { margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid var(--line); font-size: var(--fs-2xs); color: var(--muted); }

/* ===================== CENTRO DE MANDO (bento) ===================== */
.cmd-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; row-gap: var(--sp-3); }
.cmd-title { font-size: var(--fs-lg); font-weight: var(--fw-semibold); color: var(--navy); }
.cmd-tools { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; justify-content: flex-end; }
.cmd-tools .search-input { margin-left: 0; }
.cmd-footer { margin: 0; font-size: var(--fs-2xs); color: var(--muted); text-align: center; }

.bento-scroll { overflow-y: auto; }
.bento { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); grid-auto-rows: 150px; grid-auto-flow: dense; }
.b-2x2 { grid-column: span 2; grid-row: span 2; }
.b-2x1 { grid-column: span 2; }
.b-1x2 { grid-row: span 2; }
.b-4x1 { grid-column: span 4; }

.tile { padding: var(--sp-4) var(--sp-5); gap: var(--sp-2); overflow: hidden; color: var(--ink); }
.tile-link { text-decoration: none; transition: border-color var(--t), box-shadow var(--t); }
.tile-link:hover { border-color: var(--navy); box-shadow: var(--shadow); }
.tile-k { font-size: var(--fs-2xs); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.tile-big { font-size: var(--fs-2xl); font-weight: var(--fw-bold); color: var(--navy); line-height: 1.1; font-variant-numeric: tabular-nums; }
.tile-big.sm { font-size: var(--fs-xl); }
.tile-foot { margin-top: auto; font-size: var(--fs-2xs); color: var(--muted); }

.tile-hero { justify-content: flex-start; }
.tile-hero-num { font-size: clamp(2.6rem, 6vw, 4rem); font-weight: var(--fw-bold); color: var(--navy); line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.tile-hero-sub { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; font-size: var(--fs-sm); }
.tile-hero-sub strong { color: var(--navy); }
.tile-hero .pulse { width: 100%; max-width: none; height: 54px; margin-top: var(--sp-3); }

.tile-live { justify-content: center; }
.tile-live-row { display: flex; gap: var(--sp-8); flex-wrap: wrap; margin-top: var(--sp-3); }

.tile-kpis { flex-direction: row; justify-content: space-between; align-items: center; }
.mini-kpi { display: flex; flex-direction: column; gap: 2px; }

.tile-etnalia { flex-direction: row; align-items: center; justify-content: center; gap: var(--sp-2); font-size: var(--fs-md); color: var(--muted); }
.tile-etnalia strong { color: var(--navy); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }

.tile .funnel, .tile .hbars { gap: var(--sp-2); margin-top: var(--sp-2); }
.tile .fn-row { grid-template-columns: 88px 1fr auto; }

.tile-goal-row { display: flex; align-items: baseline; gap: var(--sp-2); flex-wrap: wrap; }
.tile-goal-sep { font-size: var(--fs-sm); color: var(--muted); }
.tile-goal-pct { margin-left: auto; font-size: var(--fs-md); font-weight: var(--fw-bold); color: var(--navy); font-variant-numeric: tabular-nums; }
.tile-goal .goalbar { margin: var(--sp-3) 0 var(--sp-2); }

/* ===================== RESPONSIVE ===================== */
@media (max-width: 820px) {
    .cards { grid-template-columns: repeat(2, 1fr); }
    .two-col, .gen-layout { grid-template-columns: 1fr; }
    .insights-strip { grid-template-columns: repeat(2, 1fr); }
    .view { padding: var(--sp-5); }
}