/* ══════════════════════════════════════════════════════
   TOKENS — OSCURO
══════════════════════════════════════════════════════ */
:root {
  --bg:        #0d1018;
  --bg-s:      #141824;
  --bg-e:      #1a1f30;
  --bg-h:      #20263a;
  --bd:        rgba(255,255,255,.06);
  --bd-md:     rgba(255,255,255,.11);
  --bd-hi:     rgba(255,255,255,.20);
  --tx:        #edf0fa;
  --tx2:       #8892b0;
  --tx3:       #4a5270;
  --tx-inv:    #080b14;
  --ac:        #22d3ee;
  --ac-d:      rgba(34,211,238,.11);
  --ac-h:      #06b6d4;
  --ok:        #34d399;
  --ok-d:      rgba(52,211,153,.11);
  --err:       #f87171;
  --err-d:     rgba(248,113,113,.11);
  --warn:      #fbbf24;
  --cf:        #a78bfa;
  --cv:        #60a5fa;
  --ci:        #34d399;
  --r:         8px;
  --rl:        14px;
  --rxl:       20px;
  --sh:        0 4px 20px rgba(0,0,0,.5);
  --shl:       0 12px 48px rgba(0,0,0,.65);
  --t:         .18s ease;
  --bu:        #22d3ee;
  --bai:       #1a1f30;
  --bu-tx:     #080b14;
  --bai-tx:    #edf0fa;
  --sb-w:      220px;
}
[data-theme="light"] {
  --bg:        #f2f5fc;
  --bg-s:      #ffffff;
  --bg-e:      #eaeff8;
  --bg-h:      #dde4f0;
  --bd:        rgba(0,0,0,.06);
  --bd-md:     rgba(0,0,0,.11);
  --bd-hi:     rgba(0,0,0,.20);
  --tx:        #0f1623;
  --tx2:       #4b5563;
  --tx3:       #9ca3af;
  --tx-inv:    #ffffff;
  --ac:        #0891b2;
  --ac-d:      rgba(8,145,178,.10);
  --ac-h:      #0e7490;
  --ok:        #059669;
  --ok-d:      rgba(5,150,105,.10);
  --err:       #dc2626;
  --err-d:     rgba(220,38,38,.10);
  --cf:        #7c3aed;
  --cv:        #2563eb;
  --ci:        #059669;
  --sh:        0 2px 12px rgba(0,0,0,.09);
  --shl:       0 8px 32px rgba(0,0,0,.14);
  --bu:        #0891b2;
  --bai:       #eaeff8;
  --bu-tx:     #ffffff;
  --bai-tx:    #0f1623;
}

/* ══════════════════════════════════════════════════════
   RESET
══════════════════════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:14px}
body{font-family:'Inter','Segoe UI',system-ui,sans-serif;background:var(--bg);color:var(--tx);min-height:100vh;display:flex;flex-direction:column;-webkit-font-smoothing:antialiased;transition:background var(--t),color var(--t)}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}
::-webkit-scrollbar{width:4px;height:4px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--bd-md);border-radius:2px}

/* ══════════════════════════════════════════════════════
   HEADER
══════════════════════════════════════════════════════ */
header{background:var(--bg-s);border-bottom:1px solid var(--bd);height:54px;padding:0 20px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:300}
.brand{display:flex;align-items:center;gap:9px}
.brand-mark{width:28px;height:28px;background:linear-gradient(135deg,var(--ac),#818cf8);border-radius:7px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.brand-mark svg{color:#fff}
.brand-name{font-size:.92rem;font-weight:800;letter-spacing:.4px}
.brand-name em{color:var(--ac);font-style:normal}
.brand-sep{width:1px;height:16px;background:var(--bd-md);margin:0 2px}
.brand-tag{font-size:.68rem;color:var(--tx3);font-weight:500}
.hdr-right{display:flex;align-items:center;gap:8px}
.status-pill{display:flex;align-items:center;gap:5px;font-size:.66rem;color:var(--tx2);background:var(--bg-e);border:1px solid var(--bd);border-radius:20px;padding:3px 10px}
.sdot{width:6px;height:6px;border-radius:50%;background:var(--ok);box-shadow:0 0 5px var(--ok);animation:blink 2s infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.4}}
#theme-btn{width:32px;height:32px;border-radius:var(--r);border:1px solid var(--bd-md);background:var(--bg-e);color:var(--tx2);display:flex;align-items:center;justify-content:center;transition:all var(--t)}
#theme-btn:hover{border-color:var(--ac);color:var(--ac);background:var(--ac-d);transform:translateY(-1px)}

/* ══════════════════════════════════════════════════════
   HAMBURGER MENU (Mobile)
══════════════════════════════════════════════════════ */
.hamburger-btn {
  display: none;
  width: 36px;
  height: 36px;
  border-radius: var(--r);
  border: 1px solid var(--bd-md);
  background: var(--bg-e);
  color: var(--tx2);
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--t);
  flex-shrink: 0;
}
.hamburger-btn:hover { border-color: var(--ac); color: var(--ac); background: var(--ac-d); transform: translateY(-1px); }

/* ══════════════════════════════════════════════════════
   SHELL (sidebar + content)
══════════════════════════════════════════════════════ */
.shell{display:flex;flex:1;min-height:0;overflow:hidden}

/* ── Sidebar ── */
.sidebar{width:var(--sb-w);background:var(--bg-s);border-right:1px solid var(--bd);display:flex;flex-direction:column;padding:16px 10px;gap:4px;flex-shrink:0;transition:background var(--t), transform .25s cubic-bezier(.4,0,.2,1)}
.sb-section{font-size:.6rem;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--tx3);padding:8px 10px 4px}
.sb-item{display:flex;align-items:center;gap:9px;padding:10px 12px;border-radius:var(--r);cursor:pointer;font-size:.82rem;font-weight:500;color:var(--tx2);transition:all var(--t);border:1px solid transparent}
.sb-item:hover{background:var(--bg-e);color:var(--tx);transform:translateX(2px)}
.sb-item.active{background:var(--ac-d);color:var(--ac);border-color:rgba(34,211,238,.2)}
.sb-item svg{flex-shrink:0;color:inherit}
.sb-badge{margin-left:auto;font-size:.6rem;font-weight:700;padding:1px 6px;border-radius:20px;background:var(--ac-d);color:var(--ac)}
.sb-divider{height:1px;background:var(--bd);margin:8px 0}

/* Sidebar overlay (mobile) */
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(4px);
  z-index: 290;
  opacity: 0;
  transition: opacity .2s ease;
}
.sidebar-overlay.open { display: block; opacity: 1; }

/* ── Content area ── */
.content{flex:1;overflow-y:auto;display:flex;flex-direction:column}

/* ══════════════════════════════════════════════════════
   VIEWS (SPA)
══════════════════════════════════════════════════════ */
.view{display:none;flex:1;padding:16px 20px 24px;position:relative}
.view.active{display:flex;flex-direction:column;gap:14px}

/* ══════════════════════════════════════════════════════
   PANEL
══════════════════════════════════════════════════════ */
.panel{background:var(--bg-s);border:1px solid var(--bd);border-radius:var(--rl);padding:16px;transition:background var(--t),border-color var(--t)}
.ph{display:flex;align-items:center;gap:7px;margin-bottom:12px}
.ph-icon{width:24px;height:24px;border-radius:6px;background:var(--bg-e);display:flex;align-items:center;justify-content:center;color:var(--ac);flex-shrink:0}
.ph-title{font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--tx2)}
.ph-badge{margin-left:auto;font-size:.6rem;font-weight:700;padding:2px 7px;border-radius:20px;background:var(--ac-d);color:var(--ac)}

/* ══════════════════════════════════════════════════════
   ESTUDIO IA — layout 2 cols
══════════════════════════════════════════════════════ */
.estudio-grid{display:grid;grid-template-columns:1fr 360px;gap:14px;flex:1;min-height:0}
@media(max-width:960px){.estudio-grid{grid-template-columns:1fr}}

/* ══════════════════════════════════════════════════════
   OVERLAY DE BIENVENIDA — TAREA 1
══════════════════════════════════════════════════════ */
.welcome-overlay {
  position: absolute;
  inset: 0;
  z-index: 9000;
  background: rgba(13,16,24,.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: fadeInOverlay .35s ease;
}
.welcome-overlay.hidden {
  animation: fadeOutOverlay .4s ease forwards;
  pointer-events: none;
}
@keyframes fadeInOverlay {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes fadeOutOverlay {
  from { opacity: 1; backdrop-filter: blur(12px); }
  to   { opacity: 0; backdrop-filter: blur(0px); }
}

.welcome-card {
  background: linear-gradient(145deg, #1a1f30 0%, #141824 100%);
  border: 1px solid rgba(34,211,238,.2);
  border-radius: 28px;
  padding: 48px 44px;
  max-width: 480px;
  width: 100%;
  text-align: center;
  box-shadow: 0 0 80px rgba(34,211,238,.08), 0 40px 80px rgba(0,0,0,.6);
  animation: welcomeCardIn .5s cubic-bezier(.34,1.56,.64,1);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
@keyframes welcomeCardIn {
  from { transform: scale(.88) translateY(30px); opacity: 0; }
  to   { transform: scale(1) translateY(0); opacity: 1; }
}

.welcome-card-glow {
  position: absolute;
  top: -60px;
  left: 50%;
  transform: translateX(-50%);
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(34,211,238,.12) 0%, transparent 70%);
  pointer-events: none;
}

.welcome-logo {
  width: 60px;
  height: 60px;
  border-radius: 16px;
  background: linear-gradient(135deg, #22d3ee, #818cf8);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(34,211,238,.3);
  flex-shrink: 0;
}
.welcome-logo svg { color: #fff; }

.welcome-brand {
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: .5px;
  color: var(--tx);
}
.welcome-brand em { color: var(--ac); font-style: normal; }

.welcome-title {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--tx);
  line-height: 1.25;
  margin: 0;
}

.welcome-sub {
  font-size: .85rem;
  color: var(--tx2);
  line-height: 1.6;
  max-width: 340px;
}

.welcome-select-wrap {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: left;
}

.welcome-select-label {
  font-size: .72rem;
  font-weight: 700;
  color: var(--ac);
  text-transform: uppercase;
  letter-spacing: .8px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.welcome-select-container {
  position: relative;
}

.welcome-select {
  width: 100%;
  background: var(--bg-h);
  border: 2px solid rgba(34,211,238,.25);
  border-radius: 14px;
  color: var(--tx);
  padding: 14px 44px 14px 18px;
  font-size: 1rem;
  font-family: inherit;
  font-weight: 600;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.welcome-select:focus {
  border-color: var(--ac);
  box-shadow: 0 0 0 4px rgba(34,211,238,.12);
}
.welcome-select option { background: var(--bg-e); }

.welcome-select-arrow {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ac);
  pointer-events: none;
}

.welcome-confirm-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 36px;
  background: linear-gradient(135deg, #22d3ee, #06b6d4);
  color: #080b14;
  border: none;
  border-radius: 14px;
  font-size: .95rem;
  font-weight: 800;
  cursor: pointer;
  transition: all .25s ease;
  box-shadow: 0 4px 20px rgba(34,211,238,.35);
  width: 100%;
  justify-content: center;
}
.welcome-confirm-btn:hover:not(:disabled) {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 8px 32px rgba(34,211,238,.5);
}
.welcome-confirm-btn:disabled {
  opacity: .35;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.welcome-hint {
  font-size: .68rem;
  color: var(--tx3);
  line-height: 1.5;
}

/* ── Drive Explorer ── */
#breadcrumb{display:flex;flex-wrap:wrap;align-items:center;gap:2px;font-size:.73rem;margin-bottom:8px}
.bc-item{cursor:pointer;color:var(--ac);padding:2px 6px;border-radius:5px;font-weight:500;transition:background var(--t)}
.bc-item:hover{background:var(--ac-d)}
.bc-sep{color:var(--tx3);padding:0 1px;font-size:.62rem}
.bc-cur{color:var(--tx);padding:2px 6px;font-weight:600}
.toolbar{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:10px}

/* ── Botones principales ── */
.btn-ghost{
  display:inline-flex;align-items:center;gap:5px;
  padding:8px 14px;
  border-radius:9px;
  border:1px solid var(--bd-md);
  background:transparent;
  color:var(--tx2);
  font-size:.78rem;
  font-weight:600;
  transition:all .2s ease;
  white-space:nowrap;
}
.btn-ghost:hover{
  background:var(--bg-e);
  border-color:var(--bd-hi);
  color:var(--tx);
  transform:translateY(-2px);
  box-shadow:0 4px 12px rgba(0,0,0,.3);
}
.btn-ghost:active { transform: translateY(0); }
.btn-ghost:disabled{opacity:.35;cursor:not-allowed;transform:none;box-shadow:none}
.btn-ghost.ac{border-color:rgba(34,211,238,.3);color:var(--ac)}
.btn-ghost.ac:hover{background:var(--ac-d);border-color:var(--ac);box-shadow:0 4px 16px rgba(34,211,238,.2)}
.btn-ghost.dn{border-color:rgba(248,113,113,.25);color:var(--err)}
.btn-ghost.dn:hover{background:var(--err-d);border-color:var(--err)}

.sel-count{margin-left:auto;font-size:.66rem;color:var(--tx3);display:flex;gap:7px}
.sc-item{display:flex;align-items:center;gap:3px}
.sc-item .dot{width:5px;height:5px;border-radius:50%}
.sc-item strong{color:var(--tx);font-weight:700}
#selection-summary{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:8px}
.sel-chip{display:inline-flex;align-items:center;gap:4px;background:var(--bg-e);border:1px solid var(--bd-md);border-radius:20px;padding:2px 8px 2px 5px;font-size:.65rem;font-weight:500;color:var(--tx2);transition:all var(--t)}
.sel-chip:hover{border-color:var(--bd-hi)}
.sel-chip .dot{width:5px;height:5px;border-radius:50%;flex-shrink:0}
.dot-v{background:var(--cv)}
.dot-i{background:var(--ci)}
.sel-chip .x{cursor:pointer;color:var(--tx3);margin-left:1px;display:flex;align-items:center;transition:color var(--t)}
.sel-chip .x:hover{color:var(--err)}

/* ── File Grid — LED Card System ── */
#file-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
}

@keyframes led-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.file-card {
  position: relative;
  background: var(--bg-e);
  border: 1px solid var(--bd);
  border-radius: 10px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  overflow: hidden;
  isolation: isolate;
}
.file-card::before {
  content: '';
  position: absolute;
  inset: -60%;
  background: conic-gradient(from 0deg,transparent 0deg,#60a5fa 60deg,#34d199 120deg,#a78bfa 180deg,transparent 240deg);
  animation: led-spin 3s linear infinite;
  border-radius: 50%;
  opacity: 0.1;
  z-index: 0;
  transition: opacity .3s ease;
}
.file-card::after {
  content: '';
  position: absolute;
  inset: 2px;
  background: var(--bg-e);
  border-radius: 8px;
  z-index: 1;
}
.file-card > * { position: relative; z-index: 2; }
.file-card:hover {
  border-color: var(--bd-hi);
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,.4);
}
.file-card:hover::before { opacity: 0.35; }

.file-card.sv {
  border-color: var(--cv);
  background: rgba(96,165,250,.07);
  transform: scale(1.03);
  box-shadow: 0 0 0 1px rgba(96,165,250,.4), 0 0 18px rgba(96,165,250,.25);
}
.file-card.sv::before {
  background: conic-gradient(from 0deg,transparent 0deg,#60a5fa 90deg,transparent 180deg,#60a5fa 270deg,transparent 360deg);
  opacity: 0.7;
}
.file-card.sv::after { background: rgba(13,16,24,.92); }

.file-card.si {
  border-color: var(--ci);
  background: rgba(52,211,153,.07);
  transform: scale(1.03);
  box-shadow: 0 0 0 1px rgba(52,211,153,.4), 0 0 18px rgba(52,211,153,.25);
}
.file-card.si::before {
  background: conic-gradient(from 0deg,transparent 0deg,#34d199 90deg,transparent 180deg,#34d199 270deg,transparent 360deg);
  opacity: 0.7;
}
.file-card.si::after { background: rgba(13,16,24,.92); }

.f-badge {
  position: absolute;top: 8px;left: 8px;
  font-size: .52rem;font-weight: 700;padding: 2px 6px;border-radius: 5px;
  text-transform: uppercase;letter-spacing: .4px;z-index: 20;
  backdrop-filter: blur(8px);-webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.08);
}
.bf { background: rgba(30,20,50,.75); color: var(--cf); }
.bv { background: rgba(10,20,40,.75); color: var(--cv); }
.bi { background: rgba(10,30,25,.75); color: var(--ci); }

.f-check {
  position: absolute;top: 6px;right: 6px;
  width: 16px;height: 16px;border-radius: 50%;
  display: none;align-items: center;justify-content: center;z-index: 20;
  animation: pop-in .2s cubic-bezier(.34,1.56,.64,1);
}
@keyframes pop-in { from{transform:scale(0);opacity:0} to{transform:scale(1);opacity:1} }
.file-card.sv .f-check { display: flex; background: var(--cv); box-shadow: 0 0 8px rgba(96,165,250,.6); }
.file-card.si .f-check { display: flex; background: var(--ci); box-shadow: 0 0 8px rgba(52,211,153,.6); }
.f-check svg { color: #000; }

.f-thumb {
  width: 100%;aspect-ratio: 1/1;height: auto;border-radius: 6px;overflow: hidden;
  background: var(--bg-h);display: flex;align-items: center;justify-content: center;
  position: relative;z-index: 2;box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05);
}
.f-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.f-thumb .ti { color: var(--tx3); transition: transform var(--t); }
.file-card:hover .f-thumb .ti { transform: scale(1.08); }

.play-ov { position: absolute;inset: 0;display: flex;align-items: center;justify-content: center;background: rgba(0,0,0,.35);opacity: 0;transition: opacity var(--t); }
.file-card:hover .play-ov { opacity: 1; }
.play-ov svg { color: #fff; filter: drop-shadow(0 1px 4px rgba(0,0,0,.5)); }

.f-name { font-size: .72rem;font-weight: 600;text-align: center;word-break: break-word;color: var(--tx2);line-height: 1.4;transition: color var(--t);display: -webkit-box;-webkit-line-clamp: 2;line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden; }
.file-card:hover .f-name { color: var(--tx); }
.f-size { font-size: .62rem; color: var(--tx3); margin-top: -2px; }

.prev-btn { position: absolute;bottom: 5px;right: 5px;background: rgba(34,211,238,.15);border: 1px solid rgba(34,211,238,.3);border-radius: 4px;color: var(--ac);font-size: .56rem;font-weight: 600;padding: 2px 5px;opacity: 0;transition: opacity var(--t),background var(--t);display: flex;align-items: center;gap: 2px;z-index: 20; }
.file-card:hover .prev-btn { opacity: 1; }
.prev-btn:hover { background: rgba(34,211,238,.25); }

.state-msg { grid-column: 1/-1; text-align: center; padding: 40px 20px; color: var(--tx3); font-size: .8rem; }
.state-msg p { margin-top: 7px; }
.spinner { display: inline-block; width: 20px; height: 20px; border: 2px solid var(--bd-md); border-top-color: var(--ac); border-radius: 50%; animation: spin .6s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Chat Estudio (right col) ── */
.chat-col{display:flex;flex-direction:column;gap:10px;height:calc(100vh - 54px - 32px);position:sticky;top:calc(54px + 16px)}

/* ── Client Bar Premium ── */
.client-bar{background:linear-gradient(135deg,var(--bg-s) 0%,rgba(34,211,238,.04) 100%);border:1px solid rgba(34,211,238,.18);border-radius:var(--rl);padding:12px 16px;display:flex;align-items:center;gap:10px;box-shadow:0 2px 12px rgba(34,211,238,.06),0 1px 3px rgba(0,0,0,.3)}
.client-bar-icon{width:32px;height:32px;border-radius:8px;background:linear-gradient(135deg,rgba(34,211,238,.15),rgba(129,140,248,.15));border:1px solid rgba(34,211,238,.2);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--ac)}
.client-bar-label-wrap{display:flex;flex-direction:column;gap:1px;flex-shrink:0}
.client-bar-label{font-size:.55rem;font-weight:800;text-transform:uppercase;letter-spacing:1.2px;color:var(--ac);opacity:.8}
.client-bar-req{font-size:.58rem;color:var(--tx3)}
.sel-wrap{position:relative;flex:1}
.sel-wrap::after{content:'';position:absolute;right:10px;top:50%;transform:translateY(-50%);width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid var(--ac);pointer-events:none;opacity:.7}
.sel-wrap select{width:100%;background:var(--bg-e);border:1px solid rgba(34,211,238,.2);border-radius:8px;color:var(--tx);padding:7px 28px 7px 11px;font-size:.8rem;font-family:inherit;font-weight:600;outline:none;appearance:none;-webkit-appearance:none;transition:border-color var(--t),box-shadow var(--t)}
.sel-wrap select:focus{border-color:var(--ac);box-shadow:0 0 0 3px rgba(34,211,238,.12)}
.sel-wrap select option{background:var(--bg-e)}
.ctx-pill{display:flex;align-items:center;gap:5px;font-size:.68rem;font-weight:700;background:linear-gradient(135deg,#ff7a59,#ff5e3a);color:#fff;border:none;border-radius:20px;padding:5px 11px;white-space:nowrap;box-shadow:0 2px 8px rgba(255,122,89,.35);flex-shrink:0}
.ctx-pill .dot{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.7);animation:blink 2s infinite}
.chat-panel{background:var(--bg-s);border:1px solid var(--bd);border-radius:var(--rl);display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden}
.chat-hdr{padding:12px 14px 10px;border-bottom:1px solid var(--bd);display:flex;align-items:center;gap:7px}
.chat-hdr-icon{width:26px;height:26px;border-radius:7px;background:linear-gradient(135deg,var(--ac),#818cf8);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.chat-hdr-icon svg{color:#fff}
.chat-hdr-title{font-size:.8rem;font-weight:700}
.chat-hdr-sub{font-size:.62rem;color:var(--tx3);margin-top:1px}
#chat-messages{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:10px}

/* ── TAREA 6: Animación de entrada para mensajes de IA ── */
@keyframes msgSlideUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.msg{display:flex;gap:7px;max-width:100%;animation:msgSlideUp .25s ease both}
.msg.user{flex-direction:row-reverse}
.msg-av{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:.62rem;font-weight:700}
.msg.ai .msg-av{background:linear-gradient(135deg,var(--ac),#818cf8);color:#fff}
.msg.user .msg-av{background:var(--bg-h);color:var(--tx2)}
.msg-bubble{max-width:84%;padding:9px 13px;border-radius:12px;font-size:.76rem;line-height:1.55;word-break:break-word;transition:box-shadow .2s ease}
.msg.ai .msg-bubble{background:var(--bai);color:var(--bai-tx);border-bottom-left-radius:3px}
.msg.user .msg-bubble{background:var(--bu);color:var(--bu-tx);border-bottom-right-radius:3px}
.msg.ai .msg-bubble:hover{box-shadow:0 2px 12px rgba(0,0,0,.2)}
.msg-time{font-size:.56rem;color:var(--tx3);margin-top:2px}
.msg.user .msg-time{text-align:right}
.typing-ind{display:flex;gap:4px;align-items:center;padding:3px 0}
.typing-ind span{width:6px;height:6px;border-radius:50%;background:var(--tx3);animation:bounce 1.2s infinite}
.typing-ind span:nth-child(2){animation-delay:.2s}
.typing-ind span:nth-child(3){animation-delay:.4s}
@keyframes bounce{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-6px)}}
.ctx-summary{background:var(--bg-e);border:1px solid var(--bd);border-radius:7px;padding:7px 10px;font-size:.68rem;color:var(--tx2);line-height:1.5}
.ctx-summary strong{color:var(--tx)}
.save-draft-btn{display:inline-flex;align-items:center;gap:6px;margin-top:8px;padding:8px 16px;background:var(--ok);color:#0a1a12;border:none;border-radius:8px;font-size:.78rem;font-weight:700;cursor:pointer;transition:all .2s ease}
.save-draft-btn:hover{opacity:.85;transform:translateY(-2px);box-shadow:0 6px 16px rgba(52,211,153,.35)}
.btn-ver-diseno{display:inline-flex;align-items:center;gap:6px;margin-top:8px;margin-right:6px;padding:8px 16px;background:var(--ac);color:var(--tx-inv);border:none;border-radius:8px;font-size:.78rem;font-weight:700;cursor:pointer;transition:all .2s ease}
.btn-ver-diseno:hover{opacity:.85;transform:translateY(-2px);box-shadow:0 6px 16px rgba(34,211,238,.35)}
.diseno-generado-msg{font-size:.8rem;color:var(--ok);font-weight:600;margin-top:6px;display:flex;align-items:center;gap:5px}
.chat-input-area{padding:10px 12px;border-top:1px solid var(--bd);display:flex;flex-direction:column;gap:6px}
.chat-input-row{display:flex;gap:7px;align-items:flex-end}
.chat-textarea{flex:1;background:var(--bg-e);border:1px solid var(--bd-md);border-radius:9px;color:var(--tx);padding:8px 11px;font-size:.78rem;font-family:inherit;outline:none;resize:none;min-height:38px;max-height:110px;transition:border-color var(--t),box-shadow var(--t);line-height:1.5}
.chat-textarea:focus{border-color:var(--ac);box-shadow:0 0 0 3px rgba(34,211,238,.08)}
.chat-textarea::placeholder{color:var(--tx3)}
.send-btn{width:36px;height:36px;border-radius:8px;background:var(--ac);border:none;color:var(--tx-inv);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .2s ease}
.send-btn:hover:not(:disabled){background:var(--ac-h);transform:scale(1.08);box-shadow:0 4px 12px rgba(34,211,238,.35)}
.send-btn:disabled{opacity:.4;cursor:not-allowed}
.input-hint{font-size:.6rem;color:var(--tx3);display:flex;align-items:center;gap:3px}

/* ══════════════════════════════════════════════════════
   BANDEJA DE SALIDA — Rediseño Premium
══════════════════════════════════════════════════════ */
.bandeja-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px}
.bandeja-title{font-size:1.05rem;font-weight:700}
.bandeja-sub{font-size:.75rem;color:var(--tx2);margin-top:2px}
.bandeja-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}

.draft-card {
  background: var(--bg-s);
  border: 1px solid var(--bd);
  border-radius: 16px;
  overflow: hidden;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
  display: flex;
  flex-direction: column;
}
.draft-card:hover {
  border-color: rgba(34,211,238,.25);
  box-shadow: 0 12px 40px rgba(0,0,0,.4), 0 0 0 1px rgba(34,211,238,.08);
  transform: translateY(-3px);
}
.draft-card-header {
  padding: 16px 18px 12px;
  background: linear-gradient(135deg, var(--bg-e) 0%, rgba(34,211,238,.04) 100%);
  border-bottom: 1px solid var(--bd);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.draft-card-title-wrap { display: flex; flex-direction: column; gap: 3px; }
.draft-card-num { font-size: .72rem; font-weight: 800; color: var(--tx); letter-spacing: .3px; }
.draft-card-date { font-size: .62rem; color: var(--tx3); display: flex; align-items: center; gap: 4px; }
.draft-client-badge {
  font-size: .62rem; font-weight: 700; padding: 3px 10px; border-radius: 20px;
  background: linear-gradient(135deg, rgba(34,211,238,.15), rgba(129,140,248,.1));
  color: var(--ac); border: 1px solid rgba(34,211,238,.2); white-space: nowrap;
}
.draft-card-preview { padding: 14px 18px; flex: 1; font-size: .76rem; line-height: 1.55; color: var(--tx2); }
.draft-card-preview-text {
  display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3;
  -webkit-box-orient: vertical; overflow: hidden;
  color: var(--tx3); font-size: .72rem; font-style: italic;
}
.draft-card-footer {
  padding: 12px 18px; border-top: 1px solid var(--bd);
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap; background: var(--bg-e);
}

.btn-schedule {
  display: inline-flex; align-items: center; gap: 5px; padding: 7px 14px;
  background: linear-gradient(135deg, var(--ac), var(--ac-h)); color: var(--tx-inv);
  border: none; border-radius: 8px; font-size: .75rem; font-weight: 700; cursor: pointer;
  transition: all .2s ease; box-shadow: 0 2px 8px rgba(34,211,238,.25);
}
.btn-schedule:hover { transform: translateY(-2px) scale(1.02); box-shadow: 0 6px 20px rgba(34,211,238,.4); }

.btn-ver-preview {
  display: inline-flex; align-items: center; gap: 5px; padding: 7px 12px;
  background: transparent; border: 1px solid rgba(34,211,238,.3); color: var(--ac);
  border-radius: 8px; font-size: .72rem; font-weight: 700; cursor: pointer; transition: all .2s ease;
}
.btn-ver-preview:hover { background: var(--ac-d); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(34,211,238,.15); }

.btn-download {
  display: inline-flex; align-items: center; gap: 5px; padding: 7px 12px;
  background: transparent; border: 1px solid rgba(52,211,153,.3); color: var(--ok);
  border-radius: 8px; font-size: .72rem; font-weight: 700; cursor: pointer; transition: all .2s ease;
}
.btn-download:hover { background: var(--ok-d); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(52,211,153,.15); }

.btn-edit {
  display: inline-flex; align-items: center; gap: 5px; padding: 7px 12px;
  background: transparent; border: 1px solid rgba(167,139,250,.3); color: var(--cf);
  border-radius: 8px; font-size: .72rem; font-weight: 700; cursor: pointer; transition: all .2s ease;
}
.btn-edit:hover { background: rgba(167,139,250,.1); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(167,139,250,.15); }

.btn-delete {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; background: transparent; border: 1px solid var(--bd-md);
  border-radius: 8px; color: var(--tx3); cursor: pointer; transition: all .2s ease; margin-left: auto;
}
.btn-delete:hover { background: var(--err-d); border-color: rgba(248,113,113,.3); color: var(--err); transform: scale(1.08); }

.draft-date{font-size:.62rem;color:var(--tx3)}
.draft-actions{display:flex;gap:6px;flex-wrap:wrap;align-items:center;width:100%}
.bandeja-empty{text-align:center;padding:60px 20px;color:var(--tx3);font-size:.85rem}
.bandeja-empty p{margin-top:8px}

/* ══════════════════════════════════════════════════════
   CONTENIDO PROGRAMADO
══════════════════════════════════════════════════════ */
.scheduled-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px;flex-wrap:wrap;gap:10px}
.scheduled-controls{display:flex;align-items:center;gap:8px}
.scheduled-table-wrap{overflow-x:auto;border-radius:var(--rl);border:1px solid var(--bd)}
.scheduled-table{width:100%;border-collapse:collapse;font-size:.76rem}
.scheduled-table th{background:var(--bg-e);color:var(--tx2);font-size:.62rem;font-weight:700;text-transform:uppercase;letter-spacing:.8px;padding:10px 14px;text-align:left;border-bottom:1px solid var(--bd);white-space:nowrap}
.scheduled-table td{padding:10px 14px;border-bottom:1px solid var(--bd);color:var(--tx);vertical-align:middle}
.scheduled-table tr:last-child td{border-bottom:none}
.scheduled-table tr:hover td{background:var(--bg-e)}
.sched-badge{font-size:.6rem;font-weight:700;padding:2px 8px;border-radius:20px;background:rgba(52,211,153,.12);color:var(--ok);border:1px solid rgba(52,211,153,.2)}
.sched-client-badge{font-size:.62rem;font-weight:700;padding:2px 8px;border-radius:20px;background:var(--ac-d);color:var(--ac)}
.scheduled-empty{text-align:center;padding:60px 20px;color:var(--tx3);font-size:.85rem}
.scheduled-empty p{margin-top:8px}

/* ══════════════════════════════════════════════════════
   OFFCANVAS (Panel de Programación)
══════════════════════════════════════════════════════ */
.offcanvas-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);backdrop-filter:blur(4px);z-index:500;display:none;opacity:0;transition:opacity .2s ease}
.offcanvas-overlay.open{display:block;opacity:1}
.offcanvas{position:fixed;top:0;right:0;bottom:0;width:400px;max-width:95vw;background:var(--bg-s);border-left:1px solid var(--bd-md);z-index:501;display:flex;flex-direction:column;transform:translateX(100%);transition:transform .25s cubic-bezier(.4,0,.2,1)}
.offcanvas.open{transform:translateX(0)}
.oc-header{padding:16px 18px;border-bottom:1px solid var(--bd);display:flex;align-items:flex-start;gap:10px}
.oc-icon{width:32px;height:32px;border-radius:8px;background:linear-gradient(135deg,var(--ac),#818cf8);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.oc-icon svg{color:#fff}
.oc-title{font-size:.88rem;font-weight:700}
.oc-sub{font-size:.65rem;color:var(--tx3);margin-top:2px}
.oc-close{margin-left:auto;width:26px;height:26px;border-radius:6px;background:var(--bg-e);border:1px solid var(--bd);display:flex;align-items:center;justify-content:center;color:var(--tx3);cursor:pointer;transition:all var(--t);flex-shrink:0}
.oc-close:hover{background:var(--err-d);border-color:rgba(248,113,113,.3);color:var(--err)}
#oc-messages{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:10px}
.oc-input-area{padding:10px 12px;border-top:1px solid var(--bd);display:flex;flex-direction:column;gap:6px}

/* ══════════════════════════════════════════════════════
   MODAL PREVIEW (archivos Drive)
══════════════════════════════════════════════════════ */
#preview-modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,.7);backdrop-filter:blur(6px);z-index:600;align-items:center;justify-content:center;padding:20px}
#preview-modal.open{display:flex}
.modal-box{background:var(--bg-s);border:1px solid var(--bd-md);border-radius:var(--rxl);padding:22px;max-width:600px;width:100%;box-shadow:var(--shl);position:relative;animation:mIn .2s cubic-bezier(.34,1.56,.64,1)}
@keyframes mIn{from{transform:scale(.93) translateY(10px);opacity:0}to{transform:scale(1) translateY(0);opacity:1}}
.modal-hdr{display:flex;align-items:flex-start;gap:9px;margin-bottom:16px}
.modal-type-icon{width:32px;height:32px;border-radius:7px;background:var(--bg-e);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.modal-title{font-size:.88rem;font-weight:700;word-break:break-word;flex:1}
.modal-sub{font-size:.65rem;color:var(--tx3);margin-top:2px}
.modal-close{position:absolute;top:16px;right:16px;width:24px;height:24px;border-radius:6px;background:var(--bg-e);border:1px solid var(--bd);display:flex;align-items:center;justify-content:center;color:var(--tx3);cursor:pointer;transition:all var(--t)}
.modal-close:hover{background:var(--err-d);border-color:rgba(248,113,113,.3);color:var(--err)}
#modal-content img{width:100%;max-height:380px;object-fit:contain;border-radius:8px;background:var(--bg);display:block}
.vid-area{text-align:center;padding:24px 20px;background:var(--bg-e);border-radius:9px;border:1px solid var(--bd)}
.vid-icon{width:52px;height:52px;border-radius:50%;background:rgba(96,165,250,.1);border:1px solid rgba(96,165,250,.2);display:flex;align-items:center;justify-content:center;margin:0 auto 12px;color:var(--cv)}
.vid-link{display:inline-flex;align-items:center;gap:6px;padding:8px 18px;background:var(--cv);color:#0a1628;border-radius:7px;font-weight:700;font-size:.78rem;transition:all .2s ease}
.vid-link:hover{opacity:.85;transform:translateY(-2px);box-shadow:0 4px 12px rgba(96,165,250,.3)}
.vid-hint{font-size:.65rem;color:var(--tx3);margin-top:9px}

/* ══════════════════════════════════════════════════════
   MODAL GLOBAL DE DISEÑO HTML (amplio)
══════════════════════════════════════════════════════ */
#html-design-modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,.8);backdrop-filter:blur(8px);z-index:9000;align-items:center;justify-content:center;padding:20px}
#html-design-modal.open{display:flex}
.html-modal-box{background:var(--bg-s);border:1px solid var(--bd-md);border-radius:var(--rxl);width:80%;max-width:1100px;height:80vh;box-shadow:var(--shl);position:relative;display:flex;flex-direction:column;animation:mIn .2s cubic-bezier(.34,1.56,.64,1)}
.html-modal-hdr{padding:14px 18px;border-bottom:1px solid var(--bd);display:flex;align-items:center;gap:9px;flex-shrink:0}
.html-modal-hdr-icon{width:28px;height:28px;border-radius:7px;background:linear-gradient(135deg,var(--ac),#818cf8);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.html-modal-hdr-icon svg{color:#fff}
.html-modal-title{font-size:.88rem;font-weight:700;flex:1}
.html-modal-close{width:26px;height:26px;border-radius:6px;background:var(--bg-e);border:1px solid var(--bd);display:flex;align-items:center;justify-content:center;color:var(--tx3);cursor:pointer;transition:all var(--t);flex-shrink:0}
.html-modal-close:hover{background:var(--err-d);border-color:rgba(248,113,113,.3);color:var(--err)}
#html-design-modal-content{flex:1;overflow-y:auto;padding:20px}

/* ── Chat Tab Buttons ── */
.chat-tab-btn{display:inline-flex;align-items:center;gap:4px;padding:5px 10px;border-radius:7px;border:1px solid var(--bd-md);background:transparent;color:var(--tx3);font-size:.65rem;font-weight:600;cursor:pointer;transition:all var(--t)}
.chat-tab-btn:hover{background:var(--bg-e);color:var(--tx);border-color:var(--bd-hi);transform:translateY(-1px)}
.chat-tab-btn.active{background:var(--ac-d);color:var(--ac);border-color:rgba(34,211,238,.25)}

/* ── History panel items ── */
.hist-item{background:var(--bg-e);border:1px solid var(--bd);border-radius:var(--r);padding:12px 14px;display:flex;align-items:flex-start;gap:8px;transition:all .2s ease}
.hist-item:hover{border-color:var(--bd-hi);box-shadow:var(--sh);transform:translateY(-1px)}
.hist-item-body{flex:1;min-width:0}
.hist-item-date{font-size:.62rem;color:var(--ac);margin-bottom:3px;font-weight:600}
.hist-item-name{font-size:.76rem;color:var(--tx);font-weight:700;margin-bottom:2px}
.hist-item-count{font-size:.6rem;color:var(--tx3);margin-top:2px}
.hist-item-actions{display:flex;gap:4px;flex-shrink:0}
.hist-load-btn{display:inline-flex;align-items:center;gap:3px;padding:4px 10px;border-radius:6px;border:1px solid rgba(34,211,238,.25);background:var(--ac-d);color:var(--ac);font-size:.65rem;font-weight:600;cursor:pointer;transition:all var(--t)}
.hist-load-btn:hover{background:rgba(34,211,238,.2);transform:translateY(-1px)}
.hist-del-btn{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:6px;border:1px solid var(--bd-md);background:transparent;color:var(--tx3);cursor:pointer;transition:all var(--t)}
.hist-del-btn:hover{background:var(--err-d);border-color:rgba(248,113,113,.3);color:var(--err)}
.hist-empty{text-align:center;padding:30px 16px;color:var(--tx3);font-size:.76rem}

/* ══════════════════════════════════════════════════════
   MODAL EDICIÓN DE BORRADOR
══════════════════════════════════════════════════════ */
#edit-draft-modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,.75);backdrop-filter:blur(8px);z-index:8000;align-items:flex-start;justify-content:center;padding:20px;overflow-y:auto}
#edit-draft-modal.open{display:flex}
.edit-modal-box{background:#1a1a1a;border:1px solid #333;border-radius:var(--rxl);width:100%;max-width:960px;margin:auto;box-shadow:var(--shl);display:flex;flex-direction:column;gap:0;animation:mIn .2s cubic-bezier(.34,1.56,.64,1)}
.edit-modal-hdr{padding:16px 20px;border-bottom:1px solid var(--bd);display:flex;align-items:center;gap:10px;flex-shrink:0}
.edit-modal-hdr-icon{width:30px;height:30px;border-radius:8px;background:linear-gradient(135deg,var(--ac),#818cf8);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.edit-modal-hdr-icon svg{color:#fff}
.edit-modal-title{font-size:.9rem;font-weight:700}
.edit-modal-sub{font-size:.65rem;color:var(--tx3);margin-top:2px}
.edit-modal-close{margin-left:auto;width:26px;height:26px;border-radius:6px;background:var(--bg-e);border:1px solid var(--bd);display:flex;align-items:center;justify-content:center;color:var(--tx3);cursor:pointer;transition:all var(--t);flex-shrink:0}
.edit-modal-close:hover{background:var(--err-d);border-color:rgba(248,113,113,.3);color:var(--err)}
.edit-modal-hint{padding:8px 20px;background:var(--ac-d);border-bottom:1px solid rgba(34,211,238,.15);font-size:.65rem;color:var(--ac);display:flex;align-items:center;gap:5px;flex-shrink:0}
.edit-draft-list{padding:16px 20px;display:flex;flex-direction:column;gap:0;min-height:80px;background:transparent}
.edit-modal-footer{padding:14px 20px;border-top:1px solid var(--bd);display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-shrink:0}
.btn-save-changes{display:inline-flex;align-items:center;gap:6px;padding:9px 20px;background:var(--ac);color:var(--tx-inv);border:none;border-radius:9px;font-size:.82rem;font-weight:700;cursor:pointer;transition:all .2s ease;box-shadow:0 2px 10px rgba(34,211,238,.25)}
.btn-save-changes:hover{background:var(--ac-h);transform:translateY(-2px);box-shadow:0 6px 20px rgba(34,211,238,.4)}
.btn-save-changes:disabled{opacity:.4;cursor:not-allowed;transform:none}

/* ── TAREA 3: Divisor entre posts con botones "+ Agregar" ── */
.post-divider {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 0;
  position: relative;
}
.post-divider::before {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, transparent, #333, transparent);
}
.post-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, transparent, #333, transparent);
}
.post-divider-btns {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}
.post-divider-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  border-radius: 20px;
  border: 1px dashed;
  background: transparent;
  font-size: .62rem;
  font-weight: 700;
  cursor: pointer;
  transition: all .2s ease;
  white-space: nowrap;
}
.post-divider-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,.3);
}
.post-divider-btn.reel { color: #60a5fa; border-color: rgba(96,165,250,.4); }
.post-divider-btn.reel:hover { background: rgba(96,165,250,.1); border-color: #60a5fa; }
.post-divider-btn.carousel { color: #22d3ee; border-color: rgba(34,211,238,.4); }
.post-divider-btn.carousel:hover { background: rgba(34,211,238,.1); border-color: #22d3ee; }
.post-divider-btn.image { color: #fbbf24; border-color: rgba(251,191,36,.4); }
.post-divider-btn.image:hover { background: rgba(251,191,36,.1); border-color: #fbbf24; }

/* ── Tarjeta de post editable ── */
.edit-card-wrapper{
  display:flex;gap:20px;background:#262626;color:#fff;padding:25px;border-radius:12px;
  font-family:sans-serif;line-height:1.5;border:1px solid #333;margin-bottom:0;
  position:relative;cursor:grab;user-select:none;
  transition:opacity .15s ease,border-color .15s ease,transform .15s ease,box-shadow .15s ease;
}
.edit-card-wrapper:hover { box-shadow: 0 4px 20px rgba(0,0,0,.4); }
.edit-card-wrapper:hover .ecw-drag-handle{color:#666;}
.ecw-drag-handle:hover{color:#22d3ee !important;background:rgba(34,211,238,.08);}

/* ── Dropzone overlay sobre la portada ── */
.ecw-cover-wrap{position:relative;}
.dropzone-overlay{
  position:absolute;inset:0;background:rgba(34,211,238,.18);border:2px dashed #22d3ee;
  border-radius:8px;display:flex;align-items:center;justify-content:center;
  font-size:.6rem;font-weight:700;color:#22d3ee;text-align:center;
  opacity:0;z-index:4;transition:opacity .15s ease;pointer-events:none;padding:4px;
}
.ecw-cover-wrap.drag-over-file .dropzone-overlay{opacity:1;pointer-events:auto;}

/* ── Estilos legacy ── */
.edit-post-card{background:var(--bg-e);border:1px solid var(--bd-md);border-radius:var(--rl);padding:12px;display:flex;gap:12px;align-items:flex-start;cursor:grab;position:relative;transition:all var(--t);user-select:none}
.drag-handle{display:flex;align-items:center;justify-content:center;color:var(--tx3);flex-shrink:0;padding:2px 4px;cursor:grab;transition:color var(--t)}
.drag-handle:hover{color:var(--ac)}
.drag-handle svg{pointer-events:none}
.edit-cover-wrap{position:relative;width:90px;height:90px;flex-shrink:0;border-radius:var(--r);overflow:hidden;background:var(--bg-h)}
.edit-cover-wrap img{width:100%;height:100%;object-fit:cover;display:block;border-radius:var(--r)}
.edit-cover-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:var(--tx3);background:var(--bg-h);border-radius:var(--r)}
.edit-cover-wrap.drag-over-file .dropzone-overlay{opacity:1;pointer-events:auto}
.edit-post-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.edit-post-num{font-size:.6rem;font-weight:700;color:var(--tx3);text-transform:uppercase;letter-spacing:.8px}
.drive-link-input{width:100%;background:var(--bg-h);border:1px solid var(--bd-md);border-radius:6px;color:var(--tx);padding:5px 9px;font-size:.68rem;font-family:inherit;outline:none;transition:border-color var(--t),box-shadow var(--t)}
.drive-link-input:focus{border-color:var(--ac);box-shadow:0 0 0 2px rgba(34,211,238,.1)}
.drive-link-input::placeholder{color:var(--tx3)}
.drive-link-input.has-value{border-color:rgba(34,211,238,.4);color:var(--ac)}

/* ── TAREA 4: Carrusel horizontal estilizado ── */
.carousel-media-strip {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  gap: 15px;
  padding: 8px 0 12px;
  width: 100%;
  flex-wrap: nowrap;
  scrollbar-width: thin;
  scrollbar-color: #444 transparent;
}
.carousel-media-strip::-webkit-scrollbar { height: 4px; }
.carousel-media-strip::-webkit-scrollbar-thumb { background: #444; border-radius: 2px; }

.carousel-media-item {
  flex-shrink: 0;
  width: 140px;
  aspect-ratio: 9/16;
  border-radius: 12px;
  overflow: hidden;
  background: #111;
  border: 1px solid #444;
  position: relative;
  scroll-snap-align: start;
  box-shadow: 0 4px 16px rgba(0,0,0,.4);
  transition: transform .2s ease, box-shadow .2s ease;
}
.carousel-media-item:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.5); }
.carousel-media-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Tarjeta fantasma "+ Agregar" en el carrusel */
.carousel-add-btn {
  flex-shrink: 0;
  width: 140px;
  aspect-ratio: 9/16;
  border-radius: 12px;
  border: 2px dashed rgba(34,211,238,.35);
  background: rgba(34,211,238,.04);
  color: #22d3ee;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: .65rem;
  font-weight: 700;
  cursor: pointer;
  transition: all .2s ease;
  scroll-snap-align: start;
}
.carousel-add-btn:hover {
  border-color: #22d3ee;
  background: rgba(34,211,238,.1);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(34,211,238,.15);
}

/* ══════════════════════════════════════════════════════
   ESTADO "PROCESADO" EN TARJETAS DE ARCHIVO
══════════════════════════════════════════════════════ */
.file-card.processed{
  border-color:#10b981;background:rgba(16,185,129,.07);
  box-shadow:0 0 0 1px rgba(16,185,129,.25);pointer-events:none;cursor:default;
}
.file-card.processed .f-check{display:flex;background:#10b981;}
.file-card.processed .f-name{color:#10b981;}
.file-card.processed .f-thumb{opacity:.65;}

/* ══════════════════════════════════════════════════════
   MODAL CANVA — Selector de Diseños
══════════════════════════════════════════════════════ */
#canva-modal {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,.82); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  z-index: 9500; align-items: center; justify-content: center; padding: 20px;
}
#canva-modal.open { display: flex; }
.canva-modal-box {
  background: var(--bg-s); border: 1px solid rgba(167,139,250,.25); border-radius: var(--rxl);
  width: 100%; max-width: 860px; max-height: 85vh;
  box-shadow: 0 0 60px rgba(167,139,250,.15), var(--shl);
  display: flex; flex-direction: column; animation: mIn .22s cubic-bezier(.34,1.56,.64,1); overflow: hidden;
}
.canva-modal-hdr {
  padding: 16px 20px; border-bottom: 1px solid var(--bd); display: flex; align-items: center; gap: 10px; flex-shrink: 0;
  background: linear-gradient(135deg, var(--bg-s) 0%, rgba(167,139,250,.05) 100%);
}
.canva-modal-icon { width: 32px; height: 32px; border-radius: 8px; background: linear-gradient(135deg, #a78bfa, #818cf8); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 1rem; }
.canva-modal-title { font-size: .9rem; font-weight: 700; flex: 1; }
.canva-modal-sub { font-size: .65rem; color: var(--tx3); margin-top: 1px; }
.canva-modal-close { width: 26px; height: 26px; border-radius: 6px; background: var(--bg-e); border: 1px solid var(--bd); display: flex; align-items: center; justify-content: center; color: var(--tx3); cursor: pointer; transition: all var(--t); flex-shrink: 0; }
.canva-modal-close:hover { background: var(--err-d); border-color: rgba(248,113,113,.3); color: var(--err); }
.canva-modal-body { flex: 1; overflow-y: auto; padding: 20px; }
.canva-connect-prompt { text-align: center; padding: 40px 20px; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.canva-connect-prompt .canva-logo { font-size: 3rem; line-height: 1; }
.canva-connect-prompt h3 { font-size: .95rem; font-weight: 700; color: var(--tx); }
.canva-connect-prompt p { font-size: .76rem; color: var(--tx2); max-width: 340px; line-height: 1.55; }
.btn-canva-connect { display: inline-flex; align-items: center; gap: 8px; padding: 10px 22px; background: linear-gradient(135deg, #a78bfa, #818cf8); color: #fff; border: none; border-radius: 9px; font-size: .82rem; font-weight: 700; cursor: pointer; transition: all .2s ease; box-shadow: 0 4px 16px rgba(167,139,250,.35); }
.btn-canva-connect:hover { opacity: .88; transform: translateY(-2px); box-shadow: 0 8px 24px rgba(167,139,250,.45); }
.canva-designs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; }
.canva-design-card { background: var(--bg-e); border: 1px solid var(--bd); border-radius: 10px; overflow: hidden; cursor: pointer; transition: all .2s ease; display: flex; flex-direction: column; }
.canva-design-card:hover { border-color: rgba(167,139,250,.5); transform: translateY(-3px); box-shadow: 0 8px 24px rgba(167,139,250,.2); }
.canva-design-card.selected { border-color: #a78bfa; box-shadow: 0 0 0 2px rgba(167,139,250,.4), 0 6px 20px rgba(167,139,250,.25); }
.canva-design-thumb { width: 100%; aspect-ratio: 1/1; background: var(--bg-h); display: flex; align-items: center; justify-content: center; overflow: hidden; position: relative; }
.canva-design-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.canva-design-thumb .no-thumb { font-size: 2rem; opacity: .4; }
.canva-design-info { padding: 8px 10px; border-top: 1px solid var(--bd); }
.canva-design-name { font-size: .68rem; font-weight: 600; color: var(--tx2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.canva-modal-footer { padding: 12px 20px; border-top: 1px solid var(--bd); display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-shrink: 0; background: var(--bg-e); }
.canva-selected-info { font-size: .72rem; color: var(--tx2); }
.canva-selected-info strong { color: #a78bfa; }
.btn-canva-use { display: inline-flex; align-items: center; gap: 6px; padding: 8px 18px; background: linear-gradient(135deg, #a78bfa, #818cf8); color: #fff; border: none; border-radius: 8px; font-size: .76rem; font-weight: 700; cursor: pointer; transition: all .2s ease; }
.btn-canva-use:hover:not(:disabled) { opacity: .88; transform: translateY(-2px); }
.btn-canva-use:disabled { opacity: .35; cursor: not-allowed; }

/* ══════════════════════════════════════════════════════
   DRAG & DROP DE MULTIMEDIA (modal edición)
══════════════════════════════════════════════════════ */
.media-swap-overlay{
  position:absolute;inset:0;background:rgba(34,211,238,.15);border:2px dashed rgba(34,211,238,.5);
  border-radius:8px;display:flex;align-items:center;justify-content:center;
  font-size:.58rem;font-weight:700;color:#22d3ee;opacity:0;z-index:5;
  transition:opacity .15s ease;pointer-events:none;padding:4px;text-align:center;
}
.ecw-media-draggable:hover .media-swap-overlay{opacity:1;}
.ecw-media-draggable.media-dragging{opacity:.45;transform:scale(.97);}
.ecw-media-draggable.media-drop-target .media-swap-overlay{opacity:1;background:rgba(34,211,238,.28);border-color:#22d3ee;}
.ecw-media-draggable.media-drop-target{box-shadow:0 0 0 2px #22d3ee;border-radius:8px;}

/* ══════════════════════════════════════════════════════
   TEXTAREA EDITABLE DE COPY (modal edición)
══════════════════════════════════════════════════════ */
.edit-copy-textarea {
  background: transparent; border: 1px dashed transparent; color: #e0e0e0;
  font-family: inherit; font-size: 0.95rem; line-height: 1.5; width: 100%;
  min-height: 100px; resize: none; overflow-y: hidden; outline: none;
  transition: border-color 0.2s; padding: 6px 8px; border-radius: 4px;
  box-sizing: border-box; white-space: pre-wrap; display: block;
}
.edit-copy-textarea:hover { border-color: #555; }
.edit-copy-textarea:focus { border-color: #ff7a59; background: rgba(255,122,89,.04); }

/* ══════════════════════════════════════════════════════
   MODAL DE ALERTA — Selección de Cliente
══════════════════════════════════════════════════════ */
#client-alert-modal {
  display: none; position: fixed; inset: 0; background: rgba(0,0,0,.75);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  z-index: 9800; align-items: center; justify-content: center; padding: 20px;
}
#client-alert-modal.open { display: flex; animation: fadeInOverlay .2s ease; }
@keyframes fadeInOverlay { from{opacity:0} to{opacity:1} }
.client-alert-box {
  background: var(--bg-s); border: 1px solid rgba(248,113,113,.3); border-radius: 20px;
  padding: 36px 32px; max-width: 420px; width: 100%; text-align: center;
  box-shadow: 0 0 60px rgba(248,113,113,.2), var(--shl);
  animation: alertPop .3s cubic-bezier(.34,1.56,.64,1);
  display: flex; flex-direction: column; align-items: center; gap: 16px;
}
@keyframes alertPop { from{transform:scale(.85) translateY(20px);opacity:0} to{transform:scale(1) translateY(0);opacity:1} }
.client-alert-icon { font-size: 3.5rem; line-height: 1; animation: shake .4s ease .1s; }
@keyframes shake { 0%,100%{transform:rotate(0deg)} 20%{transform:rotate(-8deg)} 40%{transform:rotate(8deg)} 60%{transform:rotate(-5deg)} 80%{transform:rotate(5deg)} }
.client-alert-title { font-size: 1.1rem; font-weight: 800; color: var(--tx); line-height: 1.3; }
.client-alert-msg { font-size: .82rem; color: var(--tx2); line-height: 1.55; max-width: 320px; }
.client-alert-btn {
  display: inline-flex; align-items: center; gap: 8px; padding: 11px 28px;
  background: linear-gradient(135deg, var(--err), #dc2626); color: #fff; border: none;
  border-radius: 10px; font-size: .88rem; font-weight: 700; cursor: pointer;
  transition: all .2s ease; box-shadow: 0 4px 16px rgba(248,113,113,.35); margin-top: 4px;
}
.client-alert-btn:hover { transform: translateY(-2px) scale(1.02); box-shadow: 0 8px 28px rgba(248,113,113,.5); }

/* ══════════════════════════════════════════════════════
   MINI-MODAL DE COPY IA
══════════════════════════════════════════════════════ */
#ia-copy-modal {
  display: none; position: fixed; inset: 0; background: rgba(0,0,0,.7);
  backdrop-filter: blur(8px); z-index: 9700; align-items: center; justify-content: center; padding: 20px;
}
#ia-copy-modal.open { display: flex; animation: fadeInOverlay .2s ease; }
.ia-copy-modal-box {
  background: var(--bg-s); border: 1px solid rgba(167,139,250,.3); border-radius: 18px;
  padding: 30px 28px; max-width: 460px; width: 100%;
  box-shadow: 0 0 60px rgba(167,139,250,.2), var(--shl);
  animation: alertPop .3s cubic-bezier(.34,1.56,.64,1); display: flex; flex-direction: column; gap: 16px;
}
.ia-copy-modal-hdr { display: flex; align-items: center; gap: 10px; }
.ia-copy-modal-icon { width: 36px; height: 36px; border-radius: 10px; background: linear-gradient(135deg, #a78bfa, #22d3ee); display: flex; align-items: center; justify-content: center; font-size: 1.2rem; flex-shrink: 0; }
.ia-copy-modal-title { font-size: .95rem; font-weight: 800; color: var(--tx); }
.ia-copy-modal-sub { font-size: .72rem; color: var(--tx2); line-height: 1.5; }
.ia-copy-modal-input { width: 100%; background: var(--bg-e); border: 1px solid var(--bd-md); border-radius: 10px; color: var(--tx); padding: 10px 14px; font-size: .82rem; font-family: inherit; outline: none; transition: border-color var(--t), box-shadow var(--t); resize: none; min-height: 70px; }
.ia-copy-modal-input:focus { border-color: #a78bfa; box-shadow: 0 0 0 3px rgba(167,139,250,.15); }
.ia-copy-modal-input::placeholder { color: var(--tx3); }
.ia-copy-modal-footer { display: flex; gap: 8px; justify-content: flex-end; }
.ia-copy-modal-cancel { padding: 9px 18px; border-radius: 9px; border: 1px solid var(--bd-md); background: transparent; color: var(--tx2); font-size: .8rem; font-weight: 600; cursor: pointer; transition: all var(--t); }
.ia-copy-modal-cancel:hover { background: var(--bg-e); color: var(--tx); transform: translateY(-1px); }
.ia-copy-modal-accept { padding: 9px 22px; border-radius: 9px; border: none; background: linear-gradient(135deg, #a78bfa, #22d3ee); color: #fff; font-size: .82rem; font-weight: 700; cursor: pointer; transition: all .2s ease; box-shadow: 0 2px 10px rgba(167,139,250,.3); }
.ia-copy-modal-accept:hover { transform: translateY(-2px) scale(1.02); box-shadow: 0 6px 20px rgba(167,139,250,.45); }

/* ══════════════════════════════════════════════════════
   MODAL FUENTE DE IMAGEN (Carrusel) — TAREA 4
══════════════════════════════════════════════════════ */
#carousel-source-modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.75);
  backdrop-filter: blur(10px);
  z-index: 9900;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
#carousel-source-modal.open { display: flex; animation: fadeInOverlay .2s ease; }

.carousel-source-box {
  background: var(--bg-s);
  border: 1px solid rgba(34,211,238,.2);
  border-radius: 22px;
  padding: 0;
  max-width: 420px;
  width: 100%;
  box-shadow: 0 0 60px rgba(34,211,238,.1), var(--shl);
  animation: alertPop .3s cubic-bezier(.34,1.56,.64,1);
  overflow: hidden;
}

.carousel-source-hdr {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 22px;
  border-bottom: 1px solid var(--bd);
  background: linear-gradient(135deg, var(--bg-e) 0%, rgba(34,211,238,.04) 100%);
}
.carousel-source-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: linear-gradient(135deg, #22d3ee, #818cf8);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
}
.carousel-source-title { font-size: .88rem; font-weight: 700; color: var(--tx); }
.carousel-source-sub { font-size: .65rem; color: var(--tx3); margin-top: 2px; }
.carousel-source-close {
  margin-left: auto;
  width: 26px; height: 26px; border-radius: 6px;
  background: var(--bg-h); border: 1px solid var(--bd);
  display: flex; align-items: center; justify-content: center;
  color: var(--tx3); cursor: pointer; transition: all var(--t); flex-shrink: 0;
}
.carousel-source-close:hover { background: var(--err-d); border-color: rgba(248,113,113,.3); color: var(--err); }

.carousel-source-body {
  display: flex;
  gap: 14px;
  padding: 24px 22px;
}

.carousel-source-option {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 24px 16px;
  border-radius: 16px;
  border: 1px solid var(--bd-md);
  background: var(--bg-e);
  cursor: pointer;
  transition: all .2s ease;
  text-align: center;
}
.carousel-source-option:hover {
  border-color: var(--ac);
  background: var(--ac-d);
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(34,211,238,.15);
}

.carousel-source-option-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(0,0,0,.3);
}
.carousel-source-option-icon svg { color: #fff; }

.carousel-source-option-label {
  font-size: .82rem;
  font-weight: 700;
  color: var(--tx);
}
.carousel-source-option-sub {
  font-size: .65rem;
  color: var(--tx3);
  line-height: 1.4;
}

/* ══════════════════════════════════════════════════════
   TOAST
══════════════════════════════════════════════════════ */
#toast{position:fixed;bottom:20px;right:20px;max-width:340px;padding:10px 15px;border-radius:var(--r);font-size:.76rem;font-weight:600;box-shadow:var(--shl);z-index:9999;display:none;align-items:center;gap:7px;animation:tIn .22s cubic-bezier(.34,1.56,.64,1)}
#toast.show{display:flex}
#toast.ok{background:#0a2018;border:1px solid rgba(52,211,153,.3);color:var(--ok)}
#toast.bad{background:#280a0a;border:1px solid rgba(248,113,113,.3);color:var(--err)}
#toast.warn{background:#1a1200;border:1px solid rgba(251,191,36,.3);color:var(--warn)}
@keyframes tIn{from{transform:translateX(14px) scale(.95);opacity:0}to{transform:translateX(0) scale(1);opacity:1}}

/* ══════════════════════════════════════════════════════
   RESPONSIVE — MOBILE FIRST
══════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .hamburger-btn { display: flex; }
  .sidebar {
    position: fixed; top: 54px; left: 0; bottom: 0; z-index: 295;
    transform: translateX(-100%); width: 260px; box-shadow: var(--shl);
  }
  .sidebar.open { transform: translateX(0); }
  .brand-sep, .brand-tag { display: none; }
  .status-pill { display: none; }
  .estudio-grid { grid-template-columns: 1fr; }
  .chat-col { height: auto; position: static; }
  .chat-panel { min-height: 400px; }
  #file-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
  .bandeja-grid { grid-template-columns: 1fr; }
  .canva-designs-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
  .toolbar { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }
  .toolbar::-webkit-scrollbar { height: 2px; }
  .btn-ghost { padding: 8px 14px; font-size: .8rem; }
  .edit-modal-box { max-width: 100%; margin: 0; border-radius: 16px 16px 0 0; }
  #edit-draft-modal { padding: 0; align-items: flex-end; }
  .edit-card-wrapper { flex-direction: column; gap: 14px; padding: 18px; }
  .offcanvas { width: 100%; }
  .html-modal-box { width: 100%; height: 100vh; border-radius: 0; }
  .view { padding: 12px 14px 20px; }
  .draft-card-footer { gap: 8px; }
  .draft-actions { gap: 6px; }
  .welcome-card { padding: 36px 24px; }
  .welcome-title { font-size: 1.25rem; }
  .carousel-source-body { flex-direction: column; }
  .post-divider-btns { flex-wrap: wrap; justify-content: center; }
}

@media (max-width: 480px) {
  #file-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .bandeja-grid { grid-template-columns: 1fr; }
  .canva-designs-grid { grid-template-columns: repeat(2, 1fr); }
  .client-bar { flex-wrap: wrap; gap: 8px; }
  .client-bar-icon { display: none; }
  .chat-tab-btn { padding: 4px 7px; font-size: .6rem; }
  .draft-actions { flex-direction: column; }
  .btn-schedule, .btn-ver-preview, .btn-download, .btn-edit { width: 100%; justify-content: center; }
  .btn-delete { margin-left: 0; width: 100%; }
  .client-alert-box { padding: 28px 20px; }
  .ia-copy-modal-box { padding: 24px 18px; }
  .welcome-card { padding: 28px 18px; }
  .welcome-confirm-btn { padding: 12px 24px; font-size: .88rem; }
}