/* ═══════════════════════════════════════════════
   ContentOS — Design System (Light Theme)
   ═══════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,600;0,9..144,700;1,9..144,300;1,9..144,400&family=Outfit:wght@300;400;500;600&family=DM+Mono:wght@300;400;500&display=swap');

:root {
  --bg:        #f5f4f0;
  --s1:        #ffffff;
  --s2:        #f0efe9;
  --s3:        #e8e7e0;
  --border:    rgba(0,0,0,.08);
  --border2:   rgba(0,0,0,.14);
  --ink:       #1a1a1a;
  --ink2:      #2e2e2e;
  --dim:       #7a7872;
  --muted:     #b5b3aa;
  --placeholder: #c8c6be;
  --accent:    #2d6a4f;
  --accent2:   #40916c;
  --accent3:   #52b788;
  --accentbg:  rgba(45,106,79,.07);
  --accentbdr: rgba(45,106,79,.22);
  --green:     #2d6a4f;
  --green-bg:  rgba(45,106,79,.08);
  --red:       #c0392b;
  --red-bg:    rgba(192,57,43,.07);
  --blue:      #2563a8;
  --blue-bg:   rgba(37,99,168,.08);
  --orange:    #c05e00;
  --orange-bg: rgba(192,94,0,.07);
  --font-display: 'Fraunces', Georgia, serif;
  --font-body:    'Outfit', system-ui, sans-serif;
  --font-mono:    'DM Mono', monospace;
  --r:   8px; --r2: 12px; --r3: 18px; --r4: 24px;
  --shadow-sm: 0 1px 3px rgba(0,0,0,.07),0 1px 2px rgba(0,0,0,.04);
  --shadow-md: 0 4px 12px rgba(0,0,0,.08),0 2px 4px rgba(0,0,0,.05);
  --shadow-lg: 0 12px 40px rgba(0,0,0,.1),0 4px 12px rgba(0,0,0,.06);
  --shadow-xl: 0 24px 64px rgba(0,0,0,.12),0 8px 24px rgba(0,0,0,.07);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:var(--bg);color:var(--ink);font-family:var(--font-body);font-size:15px;-webkit-font-smoothing:antialiased}
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--muted);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:var(--dim)}

/* ── FONDO ── */
.bg-canvas{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.bg-noise{position:absolute;inset:0;opacity:.02;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-size:128px}
.bg-orb{position:absolute;border-radius:50%;filter:blur(100px)}
.bg-orb-1{width:800px;height:800px;top:-350px;left:50%;transform:translateX(-50%);background:radial-gradient(circle,rgba(45,106,79,.07),transparent 70%)}
.bg-orb-2{width:500px;height:500px;bottom:-150px;right:5%;background:radial-gradient(circle,rgba(37,99,168,.05),transparent 70%)}

/* ── SCREENS ── */
.screen{position:fixed;inset:0;z-index:10;display:flex;align-items:center;justify-content:center;transition:opacity .4s ease,transform .4s ease}
.screen.hidden{opacity:0;pointer-events:none;transform:scale(.98)}

/* ══ LOGIN ══ */
.login-wrap{width:440px;max-width:96vw;animation:riseUp .6s cubic-bezier(.22,1,.36,1) both}
.login-header{text-align:center;margin-bottom:32px}
.login-eyebrow{font-family:var(--font-mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);margin-bottom:14px}
.login-logo{font-family:var(--font-display);font-size:44px;font-weight:600;letter-spacing:-.04em;color:var(--ink)}
.login-logo em{font-style:italic;font-weight:300;color:var(--accent)}
.login-tagline{margin-top:10px;font-size:13px;color:var(--dim);font-weight:300}
.login-card{background:var(--s1);border:1px solid var(--border);border-radius:var(--r3);padding:36px;box-shadow:var(--shadow-xl)}
.login-footer{text-align:center;margin-top:18px;font-size:11px;color:var(--muted);font-family:var(--font-mono)}

/* ══ FORM ══ */
.field{margin-bottom:16px}
.field label{display:block;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);font-family:var(--font-mono);margin-bottom:7px}
.field input,.field textarea,.field select{width:100%;background:var(--s2);border:1.5px solid var(--border);border-radius:var(--r);padding:11px 14px;color:var(--ink);font-family:var(--font-body);font-size:14px;outline:none;transition:border-color .2s,box-shadow .2s,background .2s;resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:var(--placeholder)}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accentbg);background:var(--s1)}
.field input.shake,.field textarea.shake{animation:shake .35s ease;border-color:var(--red)}
.field select option{background:var(--s1);color:var(--ink)}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form-error{background:var(--red-bg);border:1px solid rgba(192,57,43,.2);border-radius:var(--r);padding:10px 14px;font-size:13px;color:var(--red);margin-bottom:16px;display:none}
.form-error.show{display:block;animation:fadeIn .22s ease}

/* ══ BUTTONS ══ */
.btn{display:inline-flex;align-items:center;gap:7px;padding:9px 18px;border-radius:var(--r);border:none;font-family:var(--font-body);font-size:13px;font-weight:500;cursor:pointer;transition:all .18s;white-space:nowrap}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn-primary{background:var(--accent);color:#fff;box-shadow:0 2px 8px rgba(45,106,79,.2)}
.btn-primary:hover:not(:disabled){background:var(--accent2);transform:translateY(-1px);box-shadow:0 4px 14px rgba(45,106,79,.28)}
.btn-ghost{background:transparent;color:var(--dim);border:1.5px solid var(--border)}
.btn-ghost:hover:not(:disabled){background:var(--s2);color:var(--ink);border-color:var(--border2)}
.btn-danger{background:var(--red-bg);color:var(--red);border:1.5px solid rgba(192,57,43,.2)}
.btn-danger:hover:not(:disabled){background:rgba(192,57,43,.14)}
.btn-success{background:var(--green-bg);color:var(--green);border:1.5px solid rgba(45,106,79,.2)}
.btn-success:hover:not(:disabled){background:rgba(45,106,79,.14)}
.btn-blue{background:var(--blue-bg);color:var(--blue);border:1.5px solid rgba(37,99,168,.2)}
.btn-blue:hover:not(:disabled){background:rgba(37,99,168,.16)}
.btn-sm{padding:6px 12px;font-size:12px}
.btn-lg{padding:13px 28px;font-size:15px;font-weight:600}
.btn-full{width:100%;justify-content:center}
.btn-login{width:100%;padding:13px;background:var(--accent);color:#fff;border:none;border-radius:var(--r);font-family:var(--font-body);font-size:14px;font-weight:600;cursor:pointer;transition:all .2s;box-shadow:0 2px 8px rgba(45,106,79,.2)}
.btn-login:hover:not(:disabled){background:var(--accent2);transform:translateY(-1px);box-shadow:0 6px 20px rgba(45,106,79,.28)}
.btn-login:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}

/* ══ APP LAYOUT ══ */
#app{display:none;grid-template-columns:268px 1fr;grid-template-rows:54px 1fr;height:100vh;position:relative;z-index:10}
#app.visible{display:grid}

/* ── TOPBAR ── */
.topbar{grid-column:1/-1;display:flex;align-items:center;padding:0 20px 0 0;background:var(--s1);border-bottom:1.5px solid var(--border);box-shadow:var(--shadow-sm)}
.topbar-brand{width:268px;padding:0 20px;display:flex;align-items:center;height:100%;border-right:1.5px solid var(--border);flex-shrink:0}
.topbar-logo{font-family:var(--font-display);font-size:18px;font-weight:600;color:var(--ink);letter-spacing:-.02em}
.topbar-logo em{font-style:italic;font-weight:300;color:var(--accent)}
.topbar-sep{flex:1}
.topbar-user{display:flex;align-items:center;gap:9px;padding:6px 13px;background:var(--s2);border:1.5px solid var(--border);border-radius:var(--r)}
.topbar-dot{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 5px rgba(45,106,79,.5);animation:pdot 2.5s ease-in-out infinite}
.topbar-email{font-size:12px;color:var(--dim);font-family:var(--font-mono)}
.btn-out{background:transparent;border:none;color:var(--muted);font-size:12px;cursor:pointer;padding:5px 9px;border-radius:6px;transition:all .18s;font-family:var(--font-body);margin-left:6px}
.btn-out:hover{color:var(--red);background:var(--red-bg)}

/* ── SIDEBAR ── */
.sidebar{background:var(--s1);border-right:1.5px solid var(--border);display:flex;flex-direction:column;overflow:hidden;box-shadow:2px 0 8px rgba(0,0,0,.04)}
.sidebar-top{padding:16px 16px 12px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border)}
.sidebar-label{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-family:var(--font-mono)}
.btn-add{width:26px;height:26px;border-radius:7px;border:1.5px solid var(--border);background:transparent;color:var(--accent);font-size:18px;cursor:pointer;display:grid;place-items:center;line-height:1;transition:all .18s}
.btn-add:hover{background:var(--accentbg);border-color:var(--accentbdr)}
.client-list{flex:1;overflow-y:auto;padding:8px 8px 12px;display:flex;flex-direction:column;gap:2px}
.client-item{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:var(--r);cursor:pointer;transition:all .18s;border:1.5px solid transparent;position:relative}
.client-item:hover{background:var(--s2)}
.client-item.active{background:var(--accentbg);border-color:var(--accentbdr)}
.client-item.active::before{content:'';position:absolute;left:0;top:20%;bottom:20%;width:3px;border-radius:0 2px 2px 0;background:var(--accent)}
.c-av{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;font-size:13px;font-weight:700;font-family:var(--font-display);flex-shrink:0}
.av0{background:rgba(45,106,79,.12);color:#2d6a4f}
.av1{background:rgba(37,99,168,.12);color:#2563a8}
.av2{background:rgba(192,94,0,.12);color:#c05e00}
.av3{background:rgba(192,57,43,.12);color:#c0392b}
.av4{background:rgba(126,63,168,.12);color:#7e3fa8}
.av5{background:rgba(0,128,128,.12);color:#008080}
.c-info{flex:1;min-width:0}
.c-name{font-size:13px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink)}
.c-sub{font-size:11px;color:var(--muted);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sidebar-empty{text-align:center;padding:28px 14px;color:var(--muted);font-size:12px;line-height:1.65}

/* ── MAIN ── */
.main{overflow-y:auto;background:var(--bg);display:flex;flex-direction:column}

/* ── EMPTY STATE ── */
.empty-state{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:40px}
.empty-icon{font-size:48px;opacity:.15;animation:float 4s ease-in-out infinite}
.empty-state h2{font-family:var(--font-display);font-size:22px;font-weight:400;font-style:italic;color:var(--dim)}
.empty-state p{font-size:13px;color:var(--muted);text-align:center;max-width:280px;line-height:1.65}

/* ══ WORKSPACE ══ */
.workspace{display:none;flex-direction:column;flex:1}
.workspace.visible{display:flex;animation:riseUp .3s ease both}

/* ── CLIENT HEADER ── */
.ws-header{padding:20px 26px 18px;border-bottom:1.5px solid var(--border);display:flex;align-items:center;gap:14px;background:var(--s1);box-shadow:var(--shadow-sm);flex-shrink:0}
.ws-av{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;font-size:17px;font-weight:700;font-family:var(--font-display);flex-shrink:0}
.ws-meta h2{font-family:var(--font-display);font-size:20px;font-weight:600;letter-spacing:-.02em;color:var(--ink)}
.ws-meta p{font-size:12px;color:var(--dim);margin-top:2px}
.ws-header-sep{flex:1}

/* ── TABS ── */
.ws-tabs{display:flex;padding:0 26px;background:var(--s1);border-bottom:1.5px solid var(--border);flex-shrink:0}
.ws-tab{padding:13px 16px;font-size:13px;font-weight:500;color:var(--dim);cursor:pointer;border-bottom:2.5px solid transparent;transition:all .18s;white-space:nowrap;display:flex;align-items:center;gap:6px}
.ws-tab:hover{color:var(--ink)}
.ws-tab.active{color:var(--accent);border-bottom-color:var(--accent)}

/* ── TAB PANES ── */
.tab-pane{display:none;flex:1;overflow-y:auto;padding:24px 26px}
.tab-pane.active{display:block}

/* ══ TIPO DE PUBLICACIÓN ══ */
.pub-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px;margin-bottom:28px}
.pub-card{background:var(--s1);border:1.5px solid var(--border);border-radius:var(--r2);padding:18px 16px;cursor:pointer;transition:all .2s;display:flex;flex-direction:column;align-items:flex-start;gap:10px;position:relative;overflow:hidden;box-shadow:var(--shadow-sm)}
.pub-card::after{content:'';position:absolute;inset:0;background:var(--accentbg);opacity:0;transition:opacity .2s}
.pub-card:hover{border-color:var(--accentbdr);transform:translateY(-2px);box-shadow:var(--shadow-md)}
.pub-card:hover::after{opacity:1}
.pub-card.selected{border-color:var(--accent);background:var(--accentbg);box-shadow:var(--shadow-md)}
.pub-card.selected::before{content:'✓';position:absolute;top:10px;right:12px;width:20px;height:20px;background:var(--accent);color:#fff;border-radius:50%;font-size:10px;display:grid;place-items:center;font-weight:700}
.pub-icon{font-size:26px;position:relative;z-index:1}
.pub-name{font-size:13px;font-weight:600;color:var(--ink);position:relative;z-index:1}
.pub-desc{font-size:11px;color:var(--dim);line-height:1.45;position:relative;z-index:1}

/* ══ PANEL DE CREACIÓN ══ */
.creation-panel{background:var(--s1);border:1.5px solid var(--border);border-radius:var(--r2);overflow:hidden;box-shadow:var(--shadow-sm);animation:riseUp .3s ease both}
.creation-panel-head{padding:16px 20px;border-bottom:1.5px solid var(--border);display:flex;align-items:center;gap:12px;background:var(--s2)}
.creation-panel-icon{font-size:20px}
.creation-panel-title{font-family:var(--font-display);font-size:16px;font-weight:600;color:var(--ink)}
.creation-panel-sub{font-size:12px;color:var(--dim);margin-top:1px}
.creation-panel-sep{flex:1}
.creation-panel-body{padding:20px}
.creation-panel-footer{padding:14px 20px;border-top:1.5px solid var(--border);display:flex;gap:8px;align-items:center;background:var(--s2)}
.creation-panel-footer .sep{flex:1}

/* ── GENERATION OUTPUT ── */
.gen-output{background:var(--s2);border:1.5px solid var(--border);border-radius:var(--r);padding:16px;min-height:160px;font-size:13px;line-height:1.8;white-space:pre-wrap;color:var(--ink);position:relative;overflow-y:auto;max-height:400px;transition:background .2s}
.gen-output.generating{background:#fff;border-color:var(--accentbdr)}
.gen-placeholder{color:var(--muted);font-style:italic;font-size:12px}
.gen-cursor{display:inline-block;width:2px;height:1.1em;background:var(--accent);margin-left:2px;animation:blink .7s infinite;vertical-align:text-bottom}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}

/* ── PROGRESS ── */
.progress-bar{height:3px;background:var(--s3);border-radius:2px;margin-bottom:14px;overflow:hidden;display:none}
.progress-bar.show{display:block}
.progress-fill{height:100%;background:linear-gradient(90deg,var(--accent),var(--accent3));border-radius:2px;width:0%;transition:width .4s ease}

/* ══ HISTORIAL ══ */
.history-filters{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:18px}
.filter-chip{padding:5px 13px;border-radius:20px;font-size:12px;cursor:pointer;border:1.5px solid var(--border);background:var(--s1);color:var(--dim);transition:all .18s}
.filter-chip:hover{border-color:var(--accentbdr);color:var(--accent)}
.filter-chip.active{border-color:var(--accent);color:var(--accent);background:var(--accentbg);font-weight:500}
.history-list{display:flex;flex-direction:column;gap:10px}
.history-item{background:var(--s1);border:1.5px solid var(--border);border-radius:var(--r2);overflow:hidden;box-shadow:var(--shadow-sm);transition:border-color .18s}
.history-item:hover{border-color:var(--border2)}
.history-head{padding:13px 16px;display:flex;align-items:center;gap:10px;cursor:pointer}
.h-icon{font-size:16px;flex-shrink:0}
.h-type{font-size:11px;font-family:var(--font-mono);padding:3px 8px;border-radius:20px;background:var(--s2);color:var(--dim);white-space:nowrap}
.h-topic{font-size:13px;font-weight:500;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink)}
.h-date{font-size:11px;color:var(--muted);font-family:var(--font-mono);white-space:nowrap}
.h-status{font-size:10px;font-family:var(--font-mono);padding:3px 9px;border-radius:20px;white-space:nowrap}
.status-draft{background:var(--s2);color:var(--dim)}
.status-approved{background:var(--green-bg);color:var(--green)}
.status-published{background:var(--blue-bg);color:var(--blue)}
.history-body{display:none;padding:0 16px 16px;border-top:1.5px solid var(--border)}
.history-body.open{display:block}
.history-text{font-size:13px;line-height:1.75;color:var(--ink2);margin:14px 0;white-space:pre-wrap;max-height:280px;overflow-y:auto;background:var(--s2);border-radius:var(--r);padding:14px}
.history-actions{display:flex;gap:7px;flex-wrap:wrap}

/* ══ PERFIL CARD ══ */
.profile-card{background:var(--s1);border:1.5px solid var(--border);border-radius:var(--r2);overflow:hidden;box-shadow:var(--shadow-sm);margin-bottom:24px}
.profile-card-header{padding:13px 18px;border-bottom:1px solid var(--border);background:var(--s2);display:flex;align-items:center;justify-content:space-between}
.profile-card-title{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);font-family:var(--font-mono)}
.profile-grid{display:grid;grid-template-columns:1fr 1fr}
.profile-field{padding:14px 18px;border-bottom:1px solid var(--border);border-right:1px solid var(--border)}
.profile-field:nth-child(even){border-right:none}
.profile-field:nth-last-child(-n+2){border-bottom:none}
.profile-field-label{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-family:var(--font-mono);margin-bottom:7px}
.profile-field-val{font-size:13px;color:var(--ink2);line-height:1.55}
.profile-field-val.empty{color:var(--muted);font-style:italic;font-size:12px}
.tag-list{display:flex;flex-wrap:wrap;gap:5px;margin-top:4px}
.tag{display:inline-block;padding:3px 9px;background:var(--s2);border:1px solid var(--border);border-radius:20px;font-size:11px;color:var(--dim);font-family:var(--font-mono)}
.tag-accent{background:var(--accentbg);border-color:var(--accentbdr);color:var(--accent)}

/* ══ MODAL ══ */
.overlay{display:none;position:fixed;inset:0;background:rgba(26,26,26,.3);backdrop-filter:blur(4px);z-index:200;align-items:center;justify-content:center}
.overlay.open{display:flex}
.modal{background:var(--s1);border:1.5px solid var(--border);border-radius:var(--r3);width:560px;max-width:96vw;max-height:90vh;overflow-y:auto;animation:riseUp .25s ease both;display:flex;flex-direction:column;box-shadow:var(--shadow-xl)}
.modal-head{padding:20px 24px 16px;border-bottom:1.5px solid var(--border);display:flex;align-items:flex-start;justify-content:space-between;gap:14px;position:sticky;top:0;background:var(--s1);z-index:2}
.modal-head h2{font-family:var(--font-display);font-size:19px;font-weight:600;color:var(--ink)}
.modal-head p{font-size:12px;color:var(--dim);margin-top:3px}
.btn-close{width:28px;height:28px;border-radius:7px;border:1.5px solid var(--border);background:transparent;color:var(--dim);font-size:16px;cursor:pointer;display:grid;place-items:center;transition:all .18s;flex-shrink:0}
.btn-close:hover{background:var(--red-bg);color:var(--red);border-color:rgba(192,57,43,.2)}
.modal-body{padding:20px 24px}
.modal-footer{padding:14px 24px 20px;border-top:1.5px solid var(--border);display:flex;gap:8px;justify-content:flex-end}

/* ── SOCIAL CHECKBOXES ── */
.social-options{display:flex;flex-wrap:wrap;gap:7px;margin-top:4px}
.social-opt{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;background:var(--s2);border:1.5px solid var(--border);border-radius:20px;cursor:pointer;font-size:12px;color:var(--dim);transition:all .18s;user-select:none}
.social-opt:hover{border-color:var(--accentbdr);color:var(--ink)}
.social-opt input[type=checkbox]{display:none}
.social-opt.checked{background:var(--accentbg);border-color:var(--accentbdr);color:var(--accent);font-weight:500}

/* ══ TOASTS ══ */
.toasts{position:fixed;bottom:22px;right:22px;z-index:999;display:flex;flex-direction:column;gap:8px}
.toast{background:var(--s1);border:1.5px solid var(--border);border-radius:var(--r);padding:11px 15px;font-size:13px;display:flex;align-items:center;gap:9px;animation:slideLeft .25s ease both;min-width:220px;box-shadow:var(--shadow-lg);color:var(--ink)}
.toast.ok{border-left:3px solid var(--green)}
.toast.err{border-left:3px solid var(--red)}
.toast.info{border-left:3px solid var(--blue)}

/* ══ SPINNER ══ */
.spinner{width:14px;height:14px;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;animation:spin .65s linear infinite;display:inline-block;vertical-align:middle}
.spinner-dark{border-color:rgba(0,0,0,.12);border-top-color:var(--accent)}

/* ══ UTILS ══ */
.divider{height:1.5px;background:var(--border);margin:18px 0}
.section-title{font-family:var(--font-display);font-size:16px;font-weight:600;font-style:italic;color:var(--ink);margin-bottom:6px}
.section-sub{font-size:12px;color:var(--dim);margin-bottom:16px}
.empty-history{text-align:center;padding:40px 20px;color:var(--muted);font-size:13px}
.empty-history .ei{font-size:32px;opacity:.3;margin-bottom:12px}

/* ══ ANIMATIONS ══ */
@keyframes riseUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-7px)}75%{transform:translateX(7px)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes pdot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.8)}}
@keyframes slideLeft{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:translateX(0)}}

/* ══════════════════════════════════════════════
   CONTENT CREATOR — Redes y tipos de publicación
══════════════════════════════════════════════ */

/* ── SELECTOR DE REDES ── */
.network-selector { margin-bottom: 22px; }
.network-selector-label {
  font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); font-family: var(--font-mono); margin-bottom: 10px;
}
.network-buttons {
  display: flex; flex-wrap: wrap; gap: 8px;
}
.net-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px;
  background: var(--s1); border: 1.5px solid var(--border);
  border-radius: 30px; cursor: pointer; transition: all .18s;
  font-family: var(--font-body); font-size: 13px; font-weight: 400;
  color: var(--dim);
}
.net-btn:hover {
  border-color: var(--border2); color: var(--ink);
  background: var(--s2); transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}
.net-btn.active {
  background: var(--accent); color: #fff;
  border-color: var(--accent);
  box-shadow: 0 3px 12px rgba(45,106,79,.25);
  font-weight: 500;
}
.net-btn-icon { font-size: 15px; line-height: 1; }
.net-btn-name { font-size: 12px; }

/* ── SEPARADOR ── */
.creator-divider {
  display: flex; align-items: center; gap: 12px;
  margin: 20px 0; color: var(--muted);
  font-size: 11px; font-family: var(--font-mono); letter-spacing: .08em;
}
.creator-divider::before,
.creator-divider::after {
  content: ''; flex: 1; height: 1.5px; background: var(--border);
}

/* ── BOTONES TIPO DE PUBLICACIÓN ── */
.pub-type-label {
  font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); font-family: var(--font-mono); margin-bottom: 10px;
}
.pub-type-buttons {
  display: flex; flex-direction: column; gap: 6px;
}
.pub-type-btn {
  display: flex; align-items: center; gap: 14px;
  width: 100%; padding: 13px 16px;
  background: var(--s1); border: 1.5px solid var(--border);
  border-radius: var(--r2); cursor: pointer; transition: all .2s;
  text-align: left; font-family: var(--font-body);
  position: relative; overflow: hidden;
}
.pub-type-btn::before {
  content: ''; position: absolute;
  left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--type-color, var(--accent));
  opacity: 0; transition: opacity .2s;
  border-radius: 0 2px 2px 0;
}
.pub-type-btn:hover {
  border-color: var(--border2);
  background: var(--s2);
  transform: translateX(2px);
  box-shadow: var(--shadow-sm);
}
.pub-type-btn:hover::before { opacity: 1; }
.pub-type-btn.selected {
  border-color: var(--type-color, var(--accent));
  background: color-mix(in srgb, var(--type-color, var(--accent)) 6%, white);
  box-shadow: 0 2px 10px color-mix(in srgb, var(--type-color, var(--accent)) 20%, transparent);
}
.pub-type-btn.selected::before { opacity: 1; }
.pub-type-icon {
  font-size: 22px; flex-shrink: 0; width: 36px; height: 36px;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--type-color, var(--accent)) 10%, white);
  border-radius: 10px;
}
.pub-type-info {
  display: flex; flex-direction: column; gap: 2px; flex: 1;
}
.pub-type-name {
  font-size: 14px; font-weight: 600; color: var(--ink);
}
.pub-type-desc {
  font-size: 11px; color: var(--dim); line-height: 1.4;
}
.pub-type-check {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--type-color, var(--accent));
  color: #fff; font-size: 11px; font-weight: 700;
  display: grid; place-items: center; flex-shrink: 0;
}
.pub-types-empty {
  padding: 20px; text-align: center;
  color: var(--muted); font-size: 12px; line-height: 1.65;
  background: var(--s2); border-radius: var(--r); border: 1.5px dashed var(--border);
}

/* ── LAYOUT CREAR (dos columnas) ── */
.creator-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 20px;
  align-items: start;
}
.creator-sidebar-panel {
  background: var(--s1); border: 1.5px solid var(--border);
  border-radius: var(--r2); padding: 18px;
  box-shadow: var(--shadow-sm); position: sticky; top: 20px;
}
.creator-main-panel {
  display: flex; flex-direction: column; gap: 14px;
}

/* ── PANEL DE GENERACIÓN ── */
.gen-panel {
  background: var(--s1); border: 1.5px solid var(--border);
  border-radius: var(--r2); overflow: hidden;
  box-shadow: var(--shadow-sm); animation: riseUp .3s ease both;
}
.gen-panel-head {
  padding: 14px 18px; border-bottom: 1.5px solid var(--border);
  display: flex; align-items: center; gap: 12px; background: var(--s2);
}
.gen-panel-icon {
  width: 36px; height: 36px; border-radius: 10px;
  display: grid; place-items: center; font-size: 18px;
  background: color-mix(in srgb, var(--type-color, var(--accent)) 10%, white);
}
.gen-panel-title { font-family: var(--font-display); font-size: 16px; font-weight: 600; color: var(--ink); }
.gen-panel-client { font-size: 12px; color: var(--dim); margin-top: 1px; }
.gen-panel-sep { flex: 1; }
.gen-panel-body { padding: 18px; display: flex; flex-direction: column; gap: 14px; }
.gen-panel-footer {
  padding: 12px 18px; border-top: 1.5px solid var(--border);
  display: flex; align-items: center; gap: 8px; background: var(--s2);
  flex-wrap: wrap;
}
.gen-panel-footer .sep { flex: 1; }

/* ══════════════════════════════════════════════
   API MANAGER — Config modal styles
══════════════════════════════════════════════ */

.config-section-title {
  font-family: var(--font-display); font-size: 15px; font-weight: 600;
  color: var(--ink); margin-bottom: 6px;
}
.config-section-desc {
  font-size: 12px; color: var(--dim); line-height: 1.6; margin-bottom: 20px;
}

/* ── Lista de proveedores ── */
.api-provider-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 24px; }

.api-provider-item {
  background: var(--s2); border: 1.5px solid var(--border);
  border-radius: var(--r2); overflow: hidden; transition: border-color .2s;
}
.api-provider-item.active { border-color: var(--accentbdr); background: var(--s1); }

.api-provider-head {
  padding: 13px 16px; display: flex; align-items: center; gap: 12px;
  cursor: pointer;
}
.api-provider-icon { font-size: 20px; flex-shrink: 0; }
.api-provider-meta { flex: 1; min-width: 0; }
.api-provider-name {
  font-size: 13px; font-weight: 600; color: var(--ink);
  display: flex; align-items: center; gap: 8px;
}
.api-provider-limits { font-size: 11px; color: var(--muted); margin-top: 2px; font-family: var(--font-mono); }

.api-provider-status { font-size: 11px; font-family: var(--font-mono); white-space: nowrap; }
.status-on  { color: var(--green); }
.status-off { color: var(--muted); }

.api-provider-body { padding: 0 16px 16px; border-top: 1px solid var(--border); padding-top: 14px; }

/* Badges */
.badge-free { font-size: 10px; padding: 2px 7px; border-radius: 20px; background: var(--green-bg); color: var(--green); font-weight: 500; font-family: var(--font-mono); }
.badge-paid { font-size: 10px; padding: 2px 7px; border-radius: 20px; background: var(--orange-bg); color: var(--orange); font-weight: 500; font-family: var(--font-mono); }

.api-get-key-link {
  font-size: 10px; color: var(--accent); text-decoration: none;
  margin-left: 8px; font-family: var(--font-mono);
}
.api-get-key-link:hover { text-decoration: underline; }

/* ── Orden de prioridad ── */
.api-priority-info {
  background: var(--s2); border: 1.5px solid var(--border);
  border-radius: var(--r2); padding: 14px 16px;
}
.api-priority-title {
  font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); font-family: var(--font-mono); margin-bottom: 12px;
}
.api-priority-list { display: flex; flex-direction: column; gap: 8px; }
.api-priority-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: var(--r);
  background: var(--s1); border: 1px solid var(--border);
}
.api-priority-item.disabled { opacity: .45; }
.api-priority-num {
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--s3); color: var(--dim);
  font-size: 11px; font-weight: 700; font-family: var(--font-mono);
  display: grid; place-items: center; flex-shrink: 0;
}
.api-priority-icon  { font-size: 15px; flex-shrink: 0; }
.api-priority-name  { font-size: 13px; font-weight: 500; flex: 1; color: var(--ink); }
.badge-active   { font-size: 10px; padding: 2px 8px; border-radius: 20px; background: var(--green-bg);  color: var(--green); font-family: var(--font-mono); }
.badge-inactive { font-size: 10px; padding: 2px 8px; border-radius: 20px; background: var(--s3); color: var(--muted); font-family: var(--font-mono); }

/* ── Badge proveedor en output ── */
.provider-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; padding: 3px 9px; border-radius: 20px;
  font-family: var(--font-mono); margin-bottom: 10px;
  border: 1px solid var(--border);
}
.gen-provider-row {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 8px; min-height: 24px;
}

/* ══════════════════════════════════════════════
   METRICS DASHBOARD
══════════════════════════════════════════════ */

/* ── Empty state métricas ── */
.metrics-empty {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; padding: 64px 32px; text-align: center; gap: 12px;
}
.metrics-empty-icon { font-size: 48px; opacity: .2; }
.metrics-empty h3   { font-family: var(--font-display); font-size: 20px; font-weight: 400; font-style: italic; color: var(--dim); }
.metrics-empty p    { font-size: 13px; color: var(--muted); max-width: 260px; line-height: 1.6; }

/* ── Dashboard wrapper ── */
.metrics-dashboard { padding: 28px 28px 36px; display: flex; flex-direction: column; gap: 20px; }

.metrics-header {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
}
.metrics-title { font-family: var(--font-display); font-size: 20px; font-weight: 600; letter-spacing: -.02em; color: var(--ink); }
.metrics-sub   { font-size: 12px; color: var(--dim); margin-top: 3px; }

/* ── KPI Grid ── */
.kpi-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr;
  gap: 12px;
}
.kpi-card {
  background: var(--s1); border: 1.5px solid var(--border);
  border-radius: var(--r2); padding: 18px 16px;
  box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: 4px;
  transition: border-color .18s, box-shadow .18s;
}
.kpi-card:hover { border-color: var(--accentbdr); box-shadow: var(--shadow-md); }
.kpi-main { border-color: var(--accentbdr); background: var(--accentbg); }
.kpi-icon  { font-size: 18px; margin-bottom: 6px; }
.kpi-value {
  font-family: var(--font-display); font-size: 32px; font-weight: 700;
  letter-spacing: -.03em; color: var(--ink); line-height: 1;
}
.kpi-main .kpi-value { color: var(--accent); }
.kpi-label { font-size: 12px; color: var(--dim); margin-top: 2px; }
.kpi-bar-wrap { height: 4px; background: var(--s3); border-radius: 2px; margin-top: 10px; overflow: hidden; }
.kpi-bar      { height: 100%; border-radius: 2px; transition: width .6s ease; }
.kpi-bar-draft     { background: var(--muted); }
.kpi-bar-approved  { background: var(--accent); }
.kpi-bar-published { background: var(--blue); }

/* ── Fila de gráficos ── */
.metrics-row {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: 14px;
  align-items: start;
}

/* ── Card genérico ── */
.metrics-card {
  background: var(--s1); border: 1.5px solid var(--border);
  border-radius: var(--r2); padding: 18px;
  box-shadow: var(--shadow-sm);
}
.metrics-card-wide { grid-column: 1 / 2; }
.metrics-card-title {
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); font-family: var(--font-mono); margin-bottom: 16px;
}

/* ── Gráfico semanal ── */
.week-chart {
  display: flex; align-items: flex-end; gap: 8px; height: 120px;
}
.week-col {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; gap: 6px; height: 100%;
}
.week-bar-wrap {
  flex: 1; width: 100%; display: flex; align-items: flex-end;
}
.week-bar {
  width: 100%; background: var(--accent); border-radius: 5px 5px 0 0;
  min-height: 0; transition: height .6s cubic-bezier(.22,1,.36,1);
  position: relative; opacity: .85;
}
.week-bar:hover { opacity: 1; }
.week-bar-val {
  position: absolute; top: -20px; left: 50%; transform: translateX(-50%);
  font-size: 11px; font-weight: 600; color: var(--accent);
  font-family: var(--font-mono); white-space: nowrap;
}
.week-label {
  font-size: 10px; color: var(--muted); font-family: var(--font-mono);
  white-space: nowrap;
}

/* ── Lista de métricas ── */
.metrics-list { display: flex; flex-direction: column; gap: 10px; }
.metrics-list-item {
  display: flex; align-items: center; gap: 9px;
}
.metrics-list-name {
  font-size: 12px; color: var(--ink2); flex: 1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.metrics-list-bar-wrap {
  width: 60px; height: 5px; background: var(--s3);
  border-radius: 3px; overflow: hidden; flex-shrink: 0;
}
.metrics-list-bar {
  height: 100%; background: var(--accent); border-radius: 3px;
  transition: width .6s ease;
}
.metrics-list-val {
  font-size: 12px; font-weight: 600; color: var(--ink);
  font-family: var(--font-mono); min-width: 20px; text-align: right;
}

/* ── Cliente avatar en lista ── */
.metrics-client-av {
  width: 22px; height: 22px; border-radius: 6px;
  font-size: 10px; font-weight: 700; font-family: var(--font-display);
  display: grid; place-items: center; flex-shrink: 0;
}
.metrics-client-status { display: flex; gap: 4px; flex-shrink: 0; }
.ms-pub { font-size: 10px; padding: 1px 5px; border-radius: 20px; background: var(--blue-bg);  color: var(--blue);  font-family: var(--font-mono); }
.ms-apr { font-size: 10px; padding: 1px 5px; border-radius: 20px; background: var(--green-bg); color: var(--green); font-family: var(--font-mono); }
.ms-dft { font-size: 10px; padding: 1px 5px; border-radius: 20px; background: var(--s3);       color: var(--muted); font-family: var(--font-mono); }

/* ── Panel de métricas como pantalla principal ── */
#metrics-panel {
  display: none; flex: 1; overflow-y: auto; background: var(--bg);
}
#metrics-panel.visible { display: block; }

/* ── Botón métricas en topbar ── */
.btn-metrics {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 13px; background: transparent;
  border: 1.5px solid var(--border); border-radius: var(--r);
  font-family: var(--font-body); font-size: 13px; font-weight: 500;
  color: var(--dim); cursor: pointer; transition: all .18s; margin-right: 8px;
}
.btn-metrics:hover   { background: var(--s2); color: var(--ink); border-color: var(--border2); }
.btn-metrics.active  { background: var(--accentbg); color: var(--accent); border-color: var(--accentbdr); }

/* ── Responsive ── */
@media (max-width: 1100px) {
  .kpi-grid    { grid-template-columns: repeat(3, 1fr); }
  .metrics-row { grid-template-columns: 1fr 1fr; }
  .metrics-card-wide { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  .kpi-grid    { grid-template-columns: 1fr 1fr; }
  .metrics-row { grid-template-columns: 1fr; }
}