:root {
  --bg: #0a0a0f; --surface: #111118; --surface2: #18181f; --surface3: #1f1f28;
  --border: #2a2a38; --border2: #3a3a50; --accent: #6c63ff; --accent2: #9f7aea;
  --accent3: #38bdf8; --gold: #f59e0b; --green: #10b981; --red: #ef4444;
  --coral: #f97316; --text: #f0f0f8; --text2: #a0a0c0; --text3: #606080;
  --radius: 12px; --radius2: 8px;
}
.story-output{margin:0;padding:0;background:transparent;border-radius:0;}
.story-script-card{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);border-radius:18px;padding:24px;display:flex;flex-direction:column;gap:22px;min-height:240px;}
.story-script-block{display:flex;flex-direction:column;gap:10px;}
.story-script-label{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--text3);}
.story-script-text{white-space:pre-wrap;font-size:15px;color:var(--text);line-height:1.85;font-family:'DM Sans',sans-serif;}
.story-script-text p{margin:0 0 0.95em;}
.story-script-rationale{font-size:12px;color:var(--text3);max-width:720px;opacity:.85;line-height:1.55;}
.story-script-rationale strong{color:var(--text);font-weight:600;}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'DM Sans',sans-serif;background:var(--bg);color:var(--text);min-height:100vh;overflow-x:hidden}
h1,h2,h3,h4{font-family:'Syne',sans-serif}
.shell{display:flex;min-height:100vh}
.sidebar{width:220px;min-height:100vh;background:var(--surface);border-right:1px solid var(--border);position:fixed;top:0;left:0;bottom:0;display:flex;flex-direction:column;z-index:100}
.main{margin-left:220px;flex:1;min-height:100vh;padding:32px}
.logo{padding:28px 20px 20px;border-bottom:1px solid var(--border)}
.logo-name{font-family:'Syne',sans-serif;font-size:15px;font-weight:800;color:var(--text);letter-spacing:-.3px}
.logo-sub{font-size:11px;color:var(--text3);margin-top:2px}
.logo-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--accent);margin-right:6px;box-shadow:0 0 10px var(--accent)}
.nav{padding:16px 12px;flex:1;overflow-y:auto;}
.nav-section{font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--text3);padding:8px 8px 4px;margin-top:8px}
.nav-item{display:flex;align-items:center;gap:9px;padding:9px 10px;border-radius:var(--radius2);cursor:pointer;font-size:13px;color:var(--text2);transition:all .15s;margin-bottom:2px}
.nav-item:hover{background:var(--surface2);color:var(--text)}
.nav-item.active{background:linear-gradient(135deg,rgba(108,99,255,.2),rgba(159,122,234,.15));color:var(--text);border:1px solid rgba(108,99,255,.3)}
.nav-icon{font-size:15px;width:18px;text-align:center}
.sidebar-footer{padding:16px;border-top:1px solid var(--border);display:flex;flex-direction:column;gap:12px}
.user-chip{display:flex;align-items:center;gap:10px}
.user-avatar{width:32px;height:32;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent2));display:flex;align-items:center;justify-content:center;font-family:'Syne',sans-serif;font-weight:700;font-size:13px}
.user-name{font-size:12px;font-weight:500;color:var(--text)}
.user-role{font-size:10px;color:var(--text3)}
.page{display:none;padding:32px;animation:fadeIn .25s ease}
.page.active{display:block}
@keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.page-header{margin-bottom:28px}
.page-title{font-size:24px;font-weight:800;color:var(--text);letter-spacing:-.5px}
.page-sub{font-size:13px;color:var(--text3);margin-top:4px}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:20px;margin-bottom:16px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.badge{display:inline-flex;align-items:center;font-size:11px;font-weight:500;padding:4px 10px;border-radius:20px;letter-spacing:.02em}
.badge-purple{background:rgba(108,99,255,.15);color:#a78bfa;border:1px solid rgba(108,99,255,.3)}
.kpi-row{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;background:var(--border);border-radius:var(--radius);overflow:hidden;margin-bottom:20px}
.kpi-cell{background:var(--surface);padding:14px;text-align:center}
.kpi-val{font-family:'Syne',sans-serif;font-size:20px;font-weight:800;color:var(--text)}
.kpi-lab{font-size:11px;color:var(--text3);margin-top:2px}
.kpi-target{font-size:11px;color:var(--green);margin-top:3px}
.sec-title{font-family:'Syne',sans-serif;font-size:13px;font-weight:700;color:var(--text2);letter-spacing:.08em;text-transform:uppercase;margin-bottom:14px}
input,textarea,select{background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius2);color:var(--text);font-family:'DM Sans',sans-serif;font-size:13px;padding:9px 12px;width:100%;outline:none;transition:border .15s}
input:focus,textarea:focus,select:focus{border-color:var(--accent)}
textarea{resize:vertical;min-height:80px}
.kpi-input{width:100%;border:1px solid rgba(255,255,255,.12);border-radius:10px;padding:10px 12px;font-size:16px;font-weight:700;color:var(--text);background:rgba(255,255,255,.06);text-align:center;}
.suggestion-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.suggestion-actions .btn{font-size:12px;padding:8px 12px}
label{font-size:12px;font-weight:500;color:var(--text2);display:block;margin-bottom:5px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;font-family:'Syne',sans-serif;font-size:13px;font-weight:600;padding:9px 18px;border-radius:var(--radius2);border:none;cursor:pointer;transition:all .15s;letter-spacing:.01em}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{background:#7c74ff}
.btn-secondary{background:var(--surface2);color:var(--text);border:1px solid var(--border)}
.btn-secondary:hover{border-color:var(--border2);background:var(--surface3)}
.btn-outline{background:transparent;color:var(--text);border:1px solid rgba(255,255,255,.18)}
.btn-outline:hover{background:rgba(255,255,255,.04)}
.hidden{display:none!important}
.btn-secondary:hover{border-color:var(--border2);background:var(--surface3)}
.btn-sm{padding:6px 13px;font-size:12px}
.btn-ghost{background:transparent;color:var(--text3);border:1px solid var(--border)}
.filter-field{min-width:180px;flex:1;max-width:320px}
.post-list{display:grid;gap:16px}
.post-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:18px;display:grid;gap:12px}
.post-card-header{display:flex;align-items:center;justify-content:space-between;gap:12px}
.post-date{font-size:11px;color:var(--text3);text-transform:uppercase;letter-spacing:.08em}
.post-card h3{font-size:16px;color:var(--text);margin:0}
.post-card p{font-size:13px;color:var(--text3);line-height:1.6;margin:0}
.post-meta{display:flex;flex-wrap:wrap;gap:10px}
.meta-chip{font-size:11px;padding:6px 10px;border-radius:999px;background:rgba(255,255,255,.05);color:var(--text2)}
.post-status-badge{font-size:11px;font-weight:700;border-radius:999px;padding:6px 10px}
.drawer-feedback{margin-top:12px;padding:14px 16px;border:1px solid rgba(99,102,241,.25);border-radius:16px;background:rgba(99,102,241,.12);color:#eef2ff;font-size:13px;box-shadow:0 18px 35px rgba(15,23,42,.18);transition:transform .2s ease,opacity .2s ease;transform:translateY(10px);opacity:0}
.drawer-feedback.visible{transform:translateY(0);opacity:1}
.drawer-feedback.hidden{opacity:0;transform:translateY(10px)}
.badge-draft{background:rgba(108,99,255,.15);color:#c4b5fd}
.badge-published{background:rgba(16,185,129,.15);color:#86efac}
.suggestion-group{margin-bottom:18px}
.suggestion-group-title{font-size:12px;font-weight:700;color:var(--text);margin-bottom:10px;text-transform:uppercase;letter-spacing:.08em}
.manual-panel{background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.06);border-radius:var(--radius);padding:18px}
.post-empty{padding:36px;text-align:center;color:var(--text3);font-size:14px}
.section-label{display:block;font-size:12px;font-weight:700;color:var(--text2);text-transform:uppercase;letter-spacing:.08em;margin-bottom:10px}
.suggestions-list{display:grid;gap:12px}
.suggestion-card{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.05);border-radius:12px;padding:16px;display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.suggestion-card div{display:flex;flex-direction:column;gap:6px}
.suggestion-title{font-size:14px;color:var(--text);font-weight:600}
.suggestion-pill{font-size:11px;color:var(--text3);background:rgba(56,189,248,.12);padding:4px 8px;border-radius:999px;align-self:flex-start}
.suggestion-empty{padding:28px;text-align:center;color:var(--text3);font-size:13px;border:1px dashed rgba(255,255,255,.15);border-radius:12px}
.suggestion-output{background:var(--surface2);border:1px solid var(--border);border-radius:12px;padding:12px 14px;color:var(--text3);min-height:46px;display:flex;align-items:center}
.upload-card{padding:24px}
.upload-zone{position:relative;display:flex;align-items:center;justify-content:center;height:120px;border:1px dashed rgba(255,255,255,.15);border-radius:16px;background:rgba(255,255,255,.02);cursor:pointer;transition:border-color .15s;overflow:hidden}
.upload-zone:hover{border-color:var(--accent)}
.upload-zone input[type=file]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;z-index:2}
.upload-icon{width:40px;height:40px;border-radius:50%;background:rgba(108,99,255,.15);display:flex;align-items:center;justify-content:center;font-size:22px;color:#c4b5fd;margin-bottom:6px}
.upload-list{margin-top:18px;display:grid;gap:10px}
.upload-item{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:12px;font-size:13px;color:var(--text2)}
.upload-remove-button{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:6px 10px;font-size:12px;font-weight:700;border-radius:999px;border:1px solid rgba(239,68,68,.3);background:rgba(239,68,68,.12);color:#fee2e2;cursor:pointer;transition:all .15s}
.upload-remove-button:hover{background:rgba(239,68,68,.2);border-color:rgba(239,68,68,.5)}
.pillar-overview{display:grid;grid-template-columns:repeat(4,minmax(180px,1fr));gap:16px;margin-bottom:20px}
.pillar-summary-card{background:linear-gradient(135deg,rgba(56,189,248,.12),rgba(108,99,255,.12));border:1px solid rgba(255,255,255,.08);border-radius:18px;padding:20px;min-height:120px;display:flex;flex-direction:column;justify-content:center;gap:8px}
.pillar-summary-card .pillar-name{font-size:14px;font-weight:700;color:#fff}
.pillar-summary-card .pillar-value{font-size:32px;font-weight:800;color:#fff}
.pillar-summary-card .pillar-sub{font-size:12px;color:rgba(255,255,255,.7)}
.pillar-summary-card .pillar-bar{height:8px;margin-top:12px;background:rgba(255,255,255,.08);border-radius:999px;overflow:hidden}
.pillar-summary-card .pillar-bar-fill{height:100%;border-radius:999px;background:linear-gradient(90deg,rgba(255,255,255,.8),rgba(255,255,255,.4));}
.pillar-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.pillar-card{background:var(--surface2);border:1px solid rgba(255,255,255,.06);border-radius:18px;padding:20px;display:flex;flex-direction:column;gap:16px}
.pillar-card-header{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.pillar-card-title{font-size:16px;font-weight:700;color:var(--text)}
.pillar-card-percent{font-size:20px;font-weight:800;color:var(--accent3)}
.pillar-card-list{display:grid;gap:10px}
.pillar-card-item{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:14px;display:flex;justify-content:space-between;align-items:center;font-size:13px;color:var(--text2)}
.pillar-card-item .item-rank{font-weight:700;color:var(--text)}
.creative-panel{padding:24px}
.format-pill-group{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.format-pill{padding:10px 16px;border-radius:999px;border:1px solid rgba(255,255,255,.1);background:transparent;color:var(--text3);font-weight:600;cursor:pointer;transition:all .15s}
.format-pill.active{background:rgba(108,99,255,.18);color:#fff;border-color:rgba(108,99,255,.3)}
.creative-card{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);border-radius:18px;padding:18px;display:flex;flex-direction:column;gap:14px;margin-top:18px}
.creative-card-header{font-size:13px;font-weight:700;color:var(--text);display:flex;align-items:center;gap:10px}
.format-select{max-width:320px;min-width:180px}
.meta-card .meta-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.creative-preview-card{padding:24px;min-height:480px}
.preview-output{min-height:360px;border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:18px;background:rgba(255,255,255,.02);color:var(--text3);white-space:pre-wrap;overflow:auto}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:1px;background:var(--border)}
.cal-header-cell{background:var(--surface2);padding:10px 4px;text-align:center;font-size:11px;font-weight:600;color:var(--text3);text-transform:uppercase}
.cal-cell{background:var(--surface);min-height:110px;padding:8px}
.cal-post{font-size:10px;padding:3px 6px;border-radius:4px;margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}
.cal-post.carrusel{background:rgba(108,99,255,.2);color:#c4b5fd}
.cal-post.texto-largo{background:rgba(56,189,248,.15);color:#93c5fd}
.cal-post.texto-corto{background:rgba(16,185,129,.15);color:#6ee7b7}
.cal-post.oferta{background:rgba(245,158,11,.15);color:#fcd34d}
.cal-post.video{background:rgba(249,115,22,.15);color:#fdba74}
.divider{height:1px;background:var(--border)}
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:500;display:none;align-items:center;justify-content:center;backdrop-filter:blur(4px)}
.modal-overlay.open{display:flex}
.modal{background:var(--surface);border:1px solid var(--border2);border-radius:var(--radius);padding:28px;width:700px;position:relative}
.modal-title{font-family:'Syne',sans-serif;font-size:18px;font-weight:800;margin-bottom:20px}
.modal-close{position:absolute;top:16px;right:16px;background:var(--surface2);border:1px solid var(--border);border-radius:6px;color:var(--text2);padding:5px 10px;cursor:pointer}
.form-group{margin-bottom:14px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
.tab{padding:7px 16px;border-radius:6px;font-size:13px;font-weight:500;cursor:pointer;color:var(--text3);transition:all .15s}
.tab.active{background:var(--surface);color:var(--text);box-shadow:0 1px 6px rgba(0,0,0,.3)}
.flex{display:flex}.items-center{align-items:center}.justify-between{justify-content:space-between}.gap-2{gap:8px}.mt-3{margin-top:12px}.mb-4{margin-bottom:16px}.w-full{width:100%}.tabs{display:flex;gap:4px;background:var(--surface2);border-radius:var(--radius2);padding:4px;margin-bottom:20px;width:fit-content}

/* ════════════════════════════════════════════════════════════════════
   UI/UX REFRESH — pulido visual global (additive, no rompe lo anterior)
   ════════════════════════════════════════════════════════════════════ */

/* Tokens de elevación y movimiento */
:root{
  --shadow-sm:0 1px 2px rgba(0,0,0,.3);
  --shadow-md:0 4px 16px rgba(0,0,0,.35);
  --shadow-lg:0 12px 32px rgba(0,0,0,.45);
  --ring:0 0 0 3px rgba(108,99,255,.35);
  --ease:cubic-bezier(.22,.61,.36,1);
  --t-fast:140ms;
  --t-base:220ms;
}

/* Tipografía base más legible y antialias */
body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}

/* Selección de texto on-brand */
::selection{background:rgba(108,99,255,.35);color:#fff}

/* Scrollbar dark sutil */
*{scrollbar-width:thin;scrollbar-color:var(--border2) transparent}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border2);border-radius:999px;border:2px solid var(--bg)}
::-webkit-scrollbar-thumb:hover{background:#4a4a66}

/* ── Accesibilidad: focus visible en todo lo interactivo ── */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,
select:focus-visible,[tabindex]:focus-visible,.nav-item:focus-visible,
.tab:focus-visible,.format-pill:focus-visible,.modal-close:focus-visible{
  outline:none;box-shadow:var(--ring);border-radius:var(--radius2);
}
/* No mostrar el ring al hacer click con mouse, solo con teclado */
:focus:not(:focus-visible){outline:none}

/* ── Cursor pointer en clickables ── */
.nav-item,.tab,.format-pill,.btn,.modal-close,.suggestion-card,
.cal-post,.meta-chip,.upload-zone,.post-card,[role="button"],[onclick]{cursor:pointer}
input,textarea,select,label[for]{cursor:auto}
input,textarea,select{cursor:text}
select{cursor:pointer}

/* ── Botones: micro-interacción (hover lift + press) ── */
.btn{transition:background var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease),transform var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease);will-change:transform}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0) scale(.985)}
.btn-primary{box-shadow:0 4px 14px rgba(108,99,255,.3)}
.btn-primary:hover{box-shadow:0 6px 20px rgba(108,99,255,.42)}
.btn:disabled,.btn[disabled],.btn.is-loading{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none;pointer-events:none}

/* Spinner inline para botones en carga */
.btn.is-loading{position:relative;color:transparent!important}
.btn.is-loading::after{content:"";position:absolute;width:15px;height:15px;top:calc(50% - 7.5px);left:calc(50% - 7.5px);border:2px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;animation:spin .6s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── Navegación: indicador activo + iconos SVG ── */
.nav-item{position:relative;transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease)}
.nav-item.active::before{content:"";position:absolute;left:-12px;top:50%;transform:translateY(-50%);width:3px;height:18px;border-radius:0 3px 3px 0;background:var(--accent);box-shadow:0 0 10px var(--accent)}
svg.nav-icon{width:18px;height:18px;flex:0 0 18px;stroke-width:2;opacity:.7;transition:opacity var(--t-fast) var(--ease),transform var(--t-fast) var(--ease)}
.nav-item:hover svg.nav-icon{opacity:1}
.nav-item.active svg.nav-icon{opacity:1;color:var(--accent2)}

/* ── Cards: elevación consistente + hover sutil (sin reflow) ── */
.card{transition:border-color var(--t-base) var(--ease),box-shadow var(--t-base) var(--ease);box-shadow:var(--shadow-sm)}
.card:hover{border-color:var(--border2);box-shadow:var(--shadow-md)}
.post-card,.suggestion-card{transition:border-color var(--t-base) var(--ease),box-shadow var(--t-base) var(--ease),transform var(--t-base) var(--ease)}
.post-card:hover,.suggestion-card:hover{border-color:var(--border2);box-shadow:var(--shadow-md);transform:translateY(-2px)}

/* ── Inputs: focus glow on-brand ── */
input,textarea,select{transition:border-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease),background var(--t-fast) var(--ease)}
input:focus,textarea:focus,select:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(108,99,255,.18)}
input::placeholder,textarea::placeholder{color:var(--text3)}

/* ── Tabs y pills: transición de estado suave ── */
.tab,.format-pill{transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease),transform var(--t-fast) var(--ease)}
.format-pill:hover{border-color:var(--border2);color:var(--text)}
.format-pill:active{transform:scale(.96)}

/* ── Badges: peso visual consistente ── */
.badge{transition:background var(--t-fast) var(--ease)}

/* ── Modal: entrada con escala (resorte) + scrim más fuerte ── */
.modal-overlay{background:rgba(0,0,0,.62);backdrop-filter:blur(6px);transition:opacity var(--t-base) var(--ease)}
.modal{box-shadow:var(--shadow-lg);animation:modalIn var(--t-base) var(--ease)}
@keyframes modalIn{from{opacity:0;transform:translateY(12px) scale(.97)}to{opacity:1;transform:none}}
.modal-close{transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease)}
.modal-close:hover{background:var(--surface3);color:var(--text)}

/* ── Skeleton / shimmer para estados de carga ── */
.skeleton{position:relative;overflow:hidden;background:var(--surface2);border-radius:var(--radius2)}
.skeleton::after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,rgba(255,255,255,.06),transparent);animation:shimmer 1.4s infinite}
@keyframes shimmer{100%{transform:translateX(100%)}}

/* ── Empty / loading helpers ── */
.is-loading-text{color:var(--text3);display:inline-flex;align-items:center;gap:8px}
.is-loading-text::before{content:"";width:13px;height:13px;border:2px solid var(--border2);border-top-color:var(--accent);border-radius:50%;animation:spin .6s linear infinite}

/* ── Upload zone: feedback de hover/drag más claro ── */
.upload-zone{transition:border-color var(--t-base) var(--ease),background var(--t-base) var(--ease)}
.upload-zone:hover{border-color:var(--accent);background:rgba(108,99,255,.05)}

/* ── Logo dot: pulso vivo sutil ── */
.logo-dot{animation:pulseDot 2.4s var(--ease) infinite}
@keyframes pulseDot{0%,100%{box-shadow:0 0 10px var(--accent)}50%{box-shadow:0 0 16px var(--accent),0 0 4px var(--accent)}}

/* ── Spinner de carga (generación de guion / tareas largas) ── */
.spinner-ring{width:34px;height:34px;border-radius:50%;border:3px solid var(--glass-border,rgba(255,255,255,.12));border-top-color:var(--accent);animation:spin .8s linear infinite}
.loading-stage{transition:opacity var(--t-base,.22s) var(--ease,ease)}

/* ── Charts SVG: interactividad ── */
.chart-dot{cursor:pointer;transition:r var(--t-fast) var(--ease)}
svg:hover .chart-dot{r:3.5}
.chart-dot:hover{r:5;fill:#7dd3fc}
.donut-seg{cursor:pointer;transition:opacity var(--t-fast) var(--ease)}
svg:hover .donut-seg{opacity:.55}
.donut-seg:hover{opacity:1}

/* ── Respeto a prefers-reduced-motion (accesibilidad) ── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .btn:hover,.post-card:hover,.suggestion-card:hover{transform:none}
}

/* ── Responsive mínimo: que no se rompa en pantallas estrechas ── */
@media (max-width:760px){
  .grid2,.form-row,.meta-card .meta-grid{grid-template-columns:1fr}
  .kpi-row,.pillar-overview{grid-template-columns:1fr 1fr}
  .main{padding:20px}
  .modal{width:calc(100vw - 32px)}
}

/* ════════════════════════════════════════════════════════════════════
   APPLE / LIQUID GLASS — translucidez frosted, profundidad, radios
   (additive: respeta el dark mode; degrada con @supports si no hay blur)
   ════════════════════════════════════════════════════════════════════ */
:root{
  --radius:16px;--radius2:11px;
  --glass-bg:rgba(26,26,36,.58);
  --glass-strong:rgba(20,20,28,.80);
  --glass-border:rgba(255,255,255,.10);
  --hairline:inset 0 1px 0 rgba(255,255,255,.07);
  --shadow-soft:0 10px 30px -8px rgba(0,0,0,.5);
}

/* Fondo con profundidad ambiental: el glass refracta esta luz */
body{
  background:
    radial-gradient(1100px 560px at 10% -10%,rgba(108,99,255,.16),transparent 58%),
    radial-gradient(820px 460px at 102% -4%,rgba(56,189,248,.09),transparent 54%),
    var(--bg);
  background-attachment:fixed;
}

/* Sidebar esmerilada */
.sidebar{
  background:rgba(15,15,22,.72);
  -webkit-backdrop-filter:blur(22px) saturate(160%);
  backdrop-filter:blur(22px) saturate(160%);
  border-right:1px solid var(--glass-border);
}

/* Cards de vidrio con hairline de luz superior + sombra difusa */
.card{
  background:var(--glass-bg);
  -webkit-backdrop-filter:blur(20px) saturate(150%);
  backdrop-filter:blur(20px) saturate(150%);
  border:1px solid var(--glass-border);
  border-radius:var(--radius);
  box-shadow:var(--shadow-soft),var(--hairline);
  padding:24px;
}
.card:hover{border-color:rgba(255,255,255,.16);box-shadow:0 16px 40px -10px rgba(0,0,0,.6),var(--hairline)}

/* Modal: vidrio más profundo */
.modal{
  background:var(--glass-strong);
  -webkit-backdrop-filter:blur(30px) saturate(160%);
  backdrop-filter:blur(30px) saturate(160%);
  border:1px solid var(--glass-border);
  border-radius:20px;
  box-shadow:0 30px 80px -20px rgba(0,0,0,.7),var(--hairline);
}

/* Botón primario estilo Apple: gradiente + brillo interno */
.btn-primary{
  background:linear-gradient(180deg,#7c74ff,#6c63ff);
  box-shadow:0 6px 18px -4px rgba(108,99,255,.55),inset 0 1px 0 rgba(255,255,255,.22);
}
.btn-primary:hover{background:linear-gradient(180deg,#8a82ff,#7269ff)}
/* Botones secundarios: vidrio sutil */
.btn-secondary,.btn-outline,.btn-ghost{
  background:rgba(255,255,255,.06);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border:1px solid var(--glass-border);
}
.btn-secondary:hover,.btn-outline:hover,.btn-ghost:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.18)}

/* Inputs de vidrio, radios suaves */
input,textarea,select{background:rgba(255,255,255,.045);border:1px solid var(--glass-border)}

/* Nav activo: pill de vidrio con brillo */
.nav-item.active{
  background:linear-gradient(135deg,rgba(108,99,255,.28),rgba(159,122,234,.16));
  border:1px solid rgba(108,99,255,.34);
  box-shadow:var(--hairline);
}

/* KPI row integrada al lenguaje glass */
.kpi-row{background:var(--glass-border);border-radius:var(--radius);box-shadow:var(--shadow-soft)}
.kpi-cell{background:var(--glass-bg)}

/* Fallback si el navegador no soporta backdrop-filter */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .sidebar,.card,.kpi-cell,.modal{background:var(--surface)}
  .btn-secondary,.btn-outline,.btn-ghost{background:var(--surface2)}
}

/* ── Sección de estadísticas: insight cards + sub-paneles de chart ── */
.insights-row{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:18px}
.insight-card{
  padding:14px 16px;border-radius:14px;
  background:linear-gradient(135deg,rgba(108,99,255,.12),rgba(56,189,248,.06));
  border:1px solid var(--glass-border,rgba(255,255,255,.10));
  box-shadow:var(--hairline,inset 0 1px 0 rgba(255,255,255,.06));
  display:flex;flex-direction:column;gap:3px;min-width:0;
}
.insight-label{font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--text3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.insight-value{font-family:'Syne',sans-serif;font-size:22px;font-weight:800;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.insight-sub{font-size:11px;color:var(--text3)}
.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
.stat-block{
  background:rgba(255,255,255,.025);
  border:1px solid var(--glass-border,rgba(255,255,255,.08));
  border-radius:14px;padding:16px;min-width:0;
}
.bar-rect{cursor:pointer;transition:opacity var(--t-fast,.14s) var(--ease,ease)}
svg:hover .bar-rect{opacity:.6}
.bar-rect:hover{opacity:1}
@media (max-width:900px){
  .insights-row{grid-template-columns:1fr 1fr}
  .stat-grid{grid-template-columns:1fr!important}
}

/* ============================================================
   PASADA DE DISEÑO (18 jun 2026) — skills frontend-design (Anthropic) + craft de motion.
   Principios aplicados: tipografía con jerarquía clara · "gasta tu audacia en UN solo lugar" ·
   motion CON PROPÓSITO (no decorativo) · foco accesible · respeto a reduced-motion.
   Additive: refina lo existente sin romperlo (mayor especificidad/orden gana).
   ============================================================ */
:root{
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
  --space-5:24px; --space-6:32px; --space-8:48px;
  --ease-out:cubic-bezier(.16,1,.3,1);   /* entradas: arranca con energía, asienta suave */
}

/* JERARQUÍA — el título de página como TESIS (lo más característico, primero) */
.page-header{margin-bottom:var(--space-6);position:relative}
.page-title{font-size:clamp(22px,2.4vw,30px);line-height:1.08;letter-spacing:-.022em;font-weight:800}
.page-sub{max-width:64ch;line-height:1.5;font-size:13.5px;color:var(--text2);margin-top:6px}
/* FIRMA ÚNICA Y DISCRETA: un solo acento de marca bajo el título — aquí va toda la audacia */
.page-header::after{content:"";display:block;width:40px;height:3px;margin-top:14px;border-radius:3px;
  background:linear-gradient(90deg,var(--accent),var(--accent2))}

/* MOTION CON PROPÓSITO: la página entra con fade+rise y las tarjetas escalonan al cargar */
.page.active{animation:pageRise .42s var(--ease-out) both}
@keyframes pageRise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.page.active > .page-header,
.page.active > .card{animation:cardRise .5s var(--ease-out) both}
.page.active > .page-header{animation-delay:.02s}
.page.active > .card:nth-of-type(1){animation-delay:.06s}
.page.active > .card:nth-of-type(2){animation-delay:.11s}
.page.active > .card:nth-of-type(3){animation-delay:.16s}
.page.active > .card:nth-of-type(n+4){animation-delay:.2s}
@keyframes cardRise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* FEEDBACK DE INTERACCIÓN consistente: las acciones responden al tacto al instante */
.btn{transition:transform var(--t-fast) var(--ease-out),box-shadow var(--t-base) var(--ease-out),
  background var(--t-base) var(--ease-out),border-color var(--t-base) var(--ease-out),color var(--t-base) var(--ease-out)}
.btn:active{transform:translateY(1px) scale(.985)}

/* RESPETO A reduced-motion: sin entradas escalonadas para quien lo pide */
@media (prefers-reduced-motion:reduce){
  .page.active,
  .page.active > .card,
  .page.active > .page-header{animation:none}
  .btn:active{transform:none}
}

/* ============================================================
   PASADA UX (19 jun 2026) — claridad de tarjetas de métricas + estados vacíos.
   ============================================================ */
/* Quita las flechas (spinner) feas del number input → se ve como un dato, no un stepper */
.kpi-input::-webkit-inner-spin-button,
.kpi-input::-webkit-outer-spin-button{ -webkit-appearance:none; margin:0; }
.kpi-input{ -moz-appearance:textfield; appearance:textfield; font-family:'Syne',sans-serif; }
/* Foco claro (accesible) al editar el plan */
.kpi-input:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(108,99,255,.28); background:rgba(108,99,255,.08); }
.kpi-input:hover{ border-color:var(--border2); }
/* Distingue lo EDITABLE (plan) de lo de SOLO LECTURA (Borradores) — sin emojis */
.kpi-cell:has(.kpi-input) .kpi-lab::after{ content:" · editable"; color:var(--accent2); opacity:.85; font-style:italic; font-size:10px; }
.kpi-cell .kpi-val{ font-family:'Syne',sans-serif; font-size:22px; font-weight:800; padding:9px 0; }
.kpi-cell:has(.kpi-val) .kpi-lab::after{ content:" · automático"; color:var(--text3); opacity:.7; font-style:italic; font-size:10px; }

/* Estados vacíos más cálidos y guía (icono punteado + acción) */
.suggestion-empty{ line-height:1.55; }
.suggestion-empty strong{ color:var(--text2); }

/* ── Modelo Toggle (Gratis / Premium) ────────────────── */
.modelo-toggle-wrap{display:flex;gap:8px;margin-bottom:14px}
.modelo-btn{flex:1;display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:10px 14px;border:1px solid var(--border);border-radius:var(--radius2);background:var(--surface2);cursor:pointer;transition:all .15s;text-align:left}
.modelo-btn:hover{border-color:var(--border2);background:var(--surface3)}
.modelo-btn.active{border-color:var(--accent);background:rgba(108,99,255,.1);box-shadow:0 0 0 1px var(--accent)}
.modelo-btn-icon{font-size:16px;line-height:1}
.modelo-btn-label{font-family:'Syne',sans-serif;font-size:13px;font-weight:700;color:var(--text);display:flex;align-items:center;gap:6px}
.modelo-btn-sub{font-size:11px;color:var(--text3)}
.modelo-premium-badge{font-size:9px;font-weight:800;letter-spacing:.08em;background:linear-gradient(135deg,#f59e0b,#f97316);color:#000;padding:2px 6px;border-radius:4px}
#modelo-btn-premium.active .modelo-btn-label{color:var(--gold)}
#modelo-btn-premium.active{border-color:var(--gold);background:rgba(245,158,11,.08);box-shadow:0 0 0 1px var(--gold)}
#btn-generar-guion.premium-mode{background:linear-gradient(135deg,#f59e0b,#f97316);color:#000}
#btn-generar-guion.premium-mode:hover{filter:brightness(1.1)}

/* ── Mini Calendar Picker ─────────────────────────────── */
.mini-cal-trigger{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:9px 12px;border:1px solid var(--border);border-radius:var(--radius2);cursor:pointer;background:var(--surface2);font-size:13px;color:var(--text);transition:border-color .15s;user-select:none}
.mini-cal-trigger:hover{border-color:var(--accent)}
.mini-cal{display:none;background:var(--surface);border:1px solid var(--border2);border-radius:10px;padding:14px;margin-top:6px;box-shadow:0 8px 32px rgba(0,0,0,.4);position:absolute;z-index:300;width:244px;left:0}
.mini-cal.open{display:block}
.mini-cal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;font-size:13px;font-weight:600;color:var(--text)}
.mini-cal-header button{background:none;border:none;cursor:pointer;color:var(--text2);font-size:20px;line-height:1;padding:2px 8px;border-radius:4px}
.mini-cal-header button:hover{background:var(--surface3);color:var(--text)}
.mini-cal-weekdays{display:grid;grid-template-columns:repeat(7,1fr);text-align:center;font-size:11px;font-weight:600;color:var(--text3);margin-bottom:6px;letter-spacing:.04em}
.mini-cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.mini-cal-day{text-align:center;padding:7px 0;font-size:13px;border-radius:6px;cursor:pointer;color:var(--text2);transition:background .1s}
.mini-cal-day:hover{background:var(--surface3);color:var(--text)}
.mini-cal-day.today{color:var(--accent);font-weight:700}
.mini-cal-day.selected{background:var(--accent);color:#fff;font-weight:700}
.mini-cal-day.today.selected{background:var(--accent);color:#fff}
.mini-cal-today-btn{display:block;width:100%;margin-top:10px;padding:6px;background:var(--surface3);border:1px solid var(--border);border-radius:6px;color:var(--text2);font-size:12px;cursor:pointer;text-align:center}
.mini-cal-today-btn:hover{border-color:var(--accent);color:var(--accent)}

/* ============================================================
   Fucking Leads — Prospección B2B
   ============================================================ */
.leads-kpi-row{display:grid;grid-template-columns:repeat(5,1fr);gap:2px;background:var(--border);border-radius:var(--radius);overflow:hidden;margin-bottom:20px}
.leads-kpi-cell{background:var(--surface);padding:14px;text-align:center}
.leads-kpi-val{font-family:'Syne',sans-serif;font-size:20px;font-weight:800;color:var(--text)}
.leads-kpi-lab{font-size:11px;color:var(--text3);margin-top:2px}
.leads-kpi-cell.highlight .leads-kpi-val{color:var(--accent)}

.leads-search-bar{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap;margin-bottom:20px;padding:18px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius)}
.leads-search-bar .filter-field{flex:2;min-width:200px}
.leads-search-bar .filter-select{flex:1;min-width:130px}
.leads-search-bar .filter-qty{flex:0 0 90px}

.leads-filters{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:16px}
.leads-filters select{max-width:180px}

.leads-table-wrap{overflow-x:auto;border-radius:var(--radius);border:1px solid var(--border)}
table.leads-table{width:100%;border-collapse:collapse;background:var(--surface);font-size:13px}
.leads-table thead tr{border-bottom:1px solid var(--border)}
.leads-table th{padding:10px 14px;text-align:left;font-size:11px;font-weight:700;color:var(--text3);letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.leads-table td{padding:10px 14px;border-bottom:1px solid rgba(255,255,255,.04);vertical-align:middle}
.leads-table tr:last-child td{border-bottom:none}
.leads-table tr:hover td{background:rgba(255,255,255,.025)}

.lead-score-bar{display:flex;align-items:center;gap:8px}
.lead-score-track{flex:1;height:6px;background:rgba(255,255,255,.08);border-radius:999px;overflow:hidden;min-width:50px}
.lead-score-fill{height:100%;border-radius:999px;transition:width .3s}
.lead-score-num{font-family:'Syne',sans-serif;font-size:12px;font-weight:700;min-width:28px;text-align:right}

.lead-status-badge{display:inline-block;font-size:10px;font-weight:700;padding:3px 9px;border-radius:999px;letter-spacing:.04em;text-transform:uppercase}
.status-nuevo{background:rgba(108,99,255,.15);color:#a78bfa}
.status-contactado{background:rgba(56,189,248,.15);color:#7dd3fc}
.status-respondio{background:rgba(245,158,11,.15);color:#fcd34d}
.status-calificado{background:rgba(16,185,129,.15);color:#6ee7b7}
.status-cerrado{background:rgba(239,68,68,.15);color:#fca5a5}

.lead-platform-icon{font-size:15px;display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:6px;background:rgba(255,255,255,.06)}

/* Modal detalle lead */
.lead-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.65);z-index:500;display:flex;align-items:center;justify-content:center;padding:20px;backdrop-filter:blur(4px)}
.lead-modal{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);width:100%;max-width:680px;max-height:90vh;overflow-y:auto;padding:28px;position:relative}
.lead-modal-close{position:absolute;top:16px;right:16px;background:transparent;border:none;color:var(--text3);cursor:pointer;font-size:20px;padding:4px 8px;border-radius:6px;line-height:1}
.lead-modal-close:hover{color:var(--text);background:rgba(255,255,255,.06)}
.lead-modal h2{font-family:'Syne',sans-serif;font-size:20px;font-weight:800;color:var(--text);margin-bottom:4px}
.lead-modal-meta{font-size:12px;color:var(--text3);margin-bottom:20px;display:flex;gap:12px;flex-wrap:wrap}
.lead-modal-section{margin-bottom:18px}
.lead-modal-section-title{font-size:11px;font-weight:700;color:var(--text3);letter-spacing:.1em;text-transform:uppercase;margin-bottom:8px}
.lead-bio-box{background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius2);padding:12px;font-size:13px;color:var(--text2);line-height:1.6;min-height:48px}
.lead-outreach-box{background:var(--surface2);border:1px solid rgba(108,99,255,.25);border-radius:var(--radius2);padding:14px;font-size:13px;color:var(--text);line-height:1.75;white-space:pre-wrap;min-height:80px}
.lead-outreach-empty{color:var(--text3);font-style:italic}
.lead-modal-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:20px;padding-top:16px;border-top:1px solid var(--border)}

.leads-empty{padding:48px;text-align:center;color:var(--text3);font-size:14px;border:1px dashed rgba(255,255,255,.1);border-radius:var(--radius);margin-top:8px}
.leads-loading{padding:32px;text-align:center;color:var(--text3);font-size:13px}