/* ============================================================
   CONAUT MANAGER — Workspace del operador (la cabina del CM)
   Hereda tokens de conaut.css. Estética neon-futurista compartida con el portal.
   ============================================================ */
@import url("/static/conaut.css");

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body); color: var(--text); background: var(--bg-0);
  min-height: 100vh; position: relative; overflow-x: hidden; line-height: 1.5;
}

.space {
  position: fixed; inset: 0; z-index: 0; overflow: hidden;
  background:
    linear-gradient(180deg, rgba(37, 99, 235, 0.05) 0, rgba(37, 99, 235, 0) 220px),
    var(--bg-0);
}
.space .grid { display: none; }

.wrap { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 28px; position: relative; z-index: 1; }

/* ── Top bar ── */
.topbar {
  position: sticky; top: 0; z-index: 20;
  background: rgba(250, 250, 250, 0.92);
  border-bottom: 1px solid var(--border);
}
.topbar .wrap { display: flex; align-items: center; gap: 18px; height: 64px; }
.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; color: var(--text); }
.brand .iso { width: 32px; height: 32px; }
.brand .iso .ring { transform-box: fill-box; transform-origin: center; animation: spin 16s linear infinite; }
.brand .iso .node { transform-box: fill-box; transform-origin: 256px 256px; animation: orbit 16s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes orbit { to { transform: rotate(-360deg); } }
.brand .wm { font-family: var(--font-body); font-weight: 700; font-size: 16px; letter-spacing: 0.04em; }
.topbar .crumbs { color: var(--text-mute); font-size: 0.9rem; margin-left: 4px; }
.topbar .crumbs a { color: var(--text-dim); text-decoration: none; }
.topbar .crumbs a:hover { color: var(--neon-cyan); }
.topbar .spacer { flex: 1; }
.topbar .live { font-size: 0.78rem; color: var(--neon-green); display: flex; align-items: center; gap: 7px; font-family: var(--font-body); }
.topbar .live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--neon-green); box-shadow: var(--glow-green); animation: pulse 1.8s infinite; }
@keyframes pulse { 50% { opacity: 0.35; } }

/* ── Page head ── */
.page-head { padding: 40px 0 8px; }
.kicker { font-family: var(--font-body); font-size: 12px; font-weight: 600; letter-spacing: var(--tracking-kicker); color: var(--neon-cyan); text-transform: uppercase; margin-bottom: 12px; display: inline-flex; align-items: center; gap: 9px; }
.kicker::before { content: ""; width: 24px; height: 1px; background: var(--neon-cyan); box-shadow: 0 0 8px var(--neon-cyan); }
.page-head h1 { font-family: var(--font-body); font-weight: 600; font-size: var(--fs-h1); letter-spacing: -0.015em; }
.page-head .sub { color: var(--text-dim); margin-top: 6px; max-width: 56ch; }
.page-head .head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

/* ── Stat tiles ── */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin: 28px 0; }
.tile {
  background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--r-md); padding: 16px 18px;
}
.tile .k { font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-mute); margin-bottom: 7px; }
.tile .v { font-family: var(--font-body); font-weight: 700; font-size: 30px; line-height: 1; }
.tile.cy .v { color: var(--neon-cyan); }
.tile.vi .v { color: var(--neon-violet); }
.tile.ma .v { color: var(--neon-magenta); }
.tile.gr .v { color: var(--neon-green); }

.section-title { font-family: var(--font-body); font-weight: 600; font-size: var(--fs-h2); margin: 34px 0 18px; }

/* ── Brand cards (cabina) ── */
.brand-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; padding-bottom: 24px; }
.brand-card {
  display: block; text-decoration: none; color: var(--text); position: relative;
  border-radius: var(--r-lg); padding: 20px;
  background: var(--surface);
  border: 1px solid var(--border); box-shadow: var(--shadow-card);
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.brand-card:hover { transform: translateY(-4px); border-color: var(--border-strong); box-shadow: var(--shadow-card), var(--glow-cyan); }
.brand-card .bc-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.brand-card .avatar { width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-family: var(--font-body); font-weight: 700; color: var(--bg-0); font-size: 16px; }
.brand-card h3 { font-family: var(--font-body); font-weight: 600; font-size: 1.05rem; }
.brand-card .meta { font-size: 0.8rem; color: var(--text-mute); }
.brand-card .bc-stats { display: flex; gap: 8px; }
.pill { font-size: var(--fs-xs); font-weight: 600; padding: 4px 10px; border-radius: var(--r-pill); border: 1px solid var(--border); color: var(--text-dim); }
.pill.hot { color: var(--neon-amber); border-color: rgba(180, 83, 9, 0.35); background: rgba(180, 83, 9, 0.08); }
.pill.ok { color: var(--neon-green); border-color: rgba(5, 150, 105, 0.3); }
.pill.sch { color: var(--neon-violet); border-color: rgba(79, 70, 229, 0.3); }

/* ── Attention feed ── */
.attention { display: flex; flex-direction: column; gap: 10px; padding-bottom: 60px; }
.att-row {
  display: flex; align-items: center; gap: 14px; padding: 13px 16px; border-radius: var(--r-md);
  background: var(--surface); border: 1px solid var(--border); text-decoration: none; color: var(--text);
  transition: border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.att-row:hover { border-color: var(--border-strong); transform: translateX(3px); }
.att-row .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--neon-amber); box-shadow: 0 0 10px var(--neon-amber); flex: 0 0 auto; }
.att-row .who { font-family: var(--font-body); font-weight: 600; font-size: 0.9rem; min-width: 130px; }
.att-row .what { color: var(--text-dim); font-size: 0.9rem; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.att-row .go { color: var(--neon-cyan); font-size: 0.82rem; font-family: var(--font-body); }

.empty { color: var(--text-dim); padding: 40px; text-align: center; border: 1px dashed var(--border-strong); border-radius: var(--r-lg); background: var(--surface-glass); }

/* ── Brand console: layout ── */
.console { display: grid; grid-template-columns: 360px 1fr; gap: 24px; align-items: start; padding-bottom: 70px; }
@media (max-width: 940px) { .console { grid-template-columns: 1fr; } }

.panel {
  border-radius: var(--r-lg); padding: 20px;
  background: var(--surface);
  border: 1px solid var(--border-strong); box-shadow: var(--shadow-card);
}
.panel.sticky { position: sticky; top: 84px; }
/* En columna única el panel sticky flota tapando el contenido que scrollea por
   debajo (misma clase de bug que movió "Usuarios del portal" fuera del grid):
   sin columna lateral, va estático. Cada regla usa el breakpoint en el que SU
   grid colapsa a una columna. */
@media (max-width: 940px) { .console .panel.sticky { position: static; } }
@media (max-width: 1080px) { .inbox-grid .panel.sticky { position: static; } }
.panel h2 { font-family: var(--font-body); font-weight: 600; font-size: 1.1rem; margin-bottom: 4px; }
.panel .hint { color: var(--text-dim); font-size: 0.85rem; margin-bottom: 14px; }
.field { margin-bottom: 12px; }
.field label { display: block; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-mute); margin-bottom: 6px; }
input[type="text"], input[type="month"], textarea, select {
  width: 100%; font-family: var(--font-body); font-size: 0.92rem; color: var(--text);
  background: #FFFFFF; border: 1px solid var(--border-strong); border-radius: var(--r-md);
  padding: 10px 12px; outline: none; transition: border-color var(--dur-fast) var(--ease);
}
textarea { min-height: 90px; resize: vertical; }
input:focus, textarea:focus, select:focus { border-color: var(--neon-cyan); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12); }

.btn {
  font-family: var(--font-body); font-weight: 600; font-size: 0.88rem; cursor: pointer;
  padding: 11px 18px; border-radius: var(--r-sm); color: var(--text); background: transparent;
  border: 1px solid var(--border-strong);
  transition: transform var(--dur-fast) var(--ease), background-position 500ms var(--ease),
              box-shadow var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.btn:hover { transform: translateY(-1px); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.btn-primary { background: var(--grad-neon); background-size: 160% auto; color: var(--bg-0); border: 1px solid transparent; }
.btn-primary:hover { background-position: 100% center; }
.btn-ghost:hover { border-color: var(--neon-cyan); color: var(--neon-cyan); }
.btn-block { width: 100%; }
.btn-row { display: flex; gap: 8px; margin-top: 6px; }

/* Resultado de revisión de Claude */
.review { margin-top: 16px; border-top: 1px solid var(--border); padding-top: 14px; display: none; }
.review.show { display: block; animation: fade var(--dur) var(--ease); }
@keyframes fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.score { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.score .ring-score { font-family: var(--font-body); font-weight: 700; font-size: 1.6rem; color: var(--neon-green); }
.review h4 { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-mute); margin: 10px 0 5px; }
.review ul { list-style: none; display: flex; flex-direction: column; gap: 4px; }
.review li { font-size: 0.85rem; color: var(--text-dim); padding-left: 16px; position: relative; }
.review li::before { content: "›"; position: absolute; left: 0; color: var(--neon-cyan); }
.review .improved { font-size: 0.88rem; color: var(--text); background: rgba(37, 99, 235, 0.06); border: 1px solid var(--border); border-radius: var(--r-md); padding: 10px 12px; white-space: pre-wrap; }
.review .use-improved { margin-top: 8px; }

/* ── Parrilla editable ── */
.posts { display: flex; flex-direction: column; gap: 14px; }
.post-row {
  border-radius: var(--r-lg); padding: 16px 18px;
  background: var(--surface);
  border: 1px solid var(--border);
}
.post-row .pr-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.chip { font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; padding: 4px 10px; border-radius: var(--r-pill); color: var(--neon-cyan); background: rgba(37, 99, 235, 0.1); border: 1px solid rgba(37, 99, 235, 0.3); }
.chip-approved, .chip-published { color: var(--neon-green); background: rgba(5, 150, 105, 0.1); border-color: rgba(5, 150, 105, 0.3); }
.chip-rejected, .chip-failed { color: var(--neon-red); background: rgba(220, 38, 38, 0.1); border-color: rgba(220, 38, 38, 0.3); }
.chip-scheduled { color: var(--neon-violet); background: rgba(79, 70, 229, 0.1); border-color: rgba(79, 70, 229, 0.3); }
.pr-head .ptype { font-size: var(--fs-xs); color: var(--text-mute); font-family: var(--font-body); letter-spacing: 0.06em; text-transform: uppercase; }
.pr-head .spacer { flex: 1; }
.pr-head .edit-toggle { font-size: 0.82rem; color: var(--neon-cyan); background: none; border: 0; cursor: pointer; font-family: var(--font-body); }
.post-row .hook { font-family: var(--font-body); font-weight: 600; font-size: 1rem; margin-bottom: 5px; }
.post-row .caption { font-size: 0.9rem; color: var(--text-dim); line-height: 1.5; white-space: pre-wrap; }
.post-row .editor { display: none; margin-top: 12px; }
.post-row .editor.show { display: block; }
.post-row .editor .field { margin-bottom: 10px; }
.post-row.saved { border-color: rgba(5, 150, 105, 0.5); }

.media-type-row { display: flex; gap: 8px; align-items: center; }

/* ── Toasts (compartido) ── */
.toasts { position: fixed; bottom: 24px; right: 24px; z-index: 60; display: flex; flex-direction: column; gap: 10px; }
.toast { font-family: var(--font-body); font-weight: 500; font-size: 0.88rem; padding: 13px 18px; border-radius: var(--r-md); color: #FAFAFA; background: #0A0A0A; border: 1px solid rgba(9, 9, 11, 0.9); box-shadow: var(--shadow-card); animation: toast-in var(--dur) var(--ease-spring); }
.toast.ok { border-color: #059669; }
.toast.err { border-color: #DC2626; }
.toast.leaving { animation: toast-out var(--dur-exit) var(--ease-exit) forwards; }
@keyframes toast-in { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
@keyframes toast-out { to { opacity: 0; transform: translateX(16px); } }

/* ── Calendario ── */
.cal-nav { display: flex; align-items: center; gap: 12px; }
.cal-month { font-family: var(--font-body); font-weight: 600; font-size: 1.05rem; min-width: 150px; text-align: center; text-transform: capitalize; }
.weekdays { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; margin: 24px 0 8px; }
.weekdays span { font-family: var(--font-body); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-mute); text-align: center; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; padding-bottom: 40px; }
.cal-day {
  min-height: 104px; border-radius: var(--r-md); padding: 8px; position: relative;
  background: var(--surface); border: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 5px;
  opacity: 0; transform: translateY(10px); animation: rise var(--dur) var(--ease) forwards;
  transition: border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
@keyframes rise { to { opacity: 1; transform: none; } }
.cal-day:hover { border-color: var(--border-strong); transform: translateY(-2px); }
.cal-day.out { opacity: 0.4; }
.cal-day.today { border-color: var(--neon-cyan); }
.cal-day .day-num { font-family: var(--font-body); font-weight: 600; font-size: 0.82rem; color: var(--text-dim); }
.cal-day.today .day-num { color: var(--neon-cyan); }
.day-posts { display: flex; flex-direction: column; gap: 4px; }
.day-post { display: flex; align-items: center; gap: 6px; text-decoration: none; padding: 3px 5px; border-radius: 7px; background: rgba(79, 70, 229, 0.12); border: 1px solid rgba(79, 70, 229, 0.22); transition: transform var(--dur-fast) var(--ease); }
.day-post:hover { transform: translateX(2px); }
.day-post.status-scheduled { background: rgba(79, 70, 229, 0.14); border-color: rgba(79, 70, 229, 0.3); }
.day-post.status-approved { background: rgba(5, 150, 105, 0.12); border-color: rgba(5, 150, 105, 0.28); }
.day-post.status-published { background: rgba(37, 99, 235, 0.1); border-color: rgba(37, 99, 235, 0.28); }
.dp-avatar { width: 16px; height: 16px; flex: 0 0 auto; border-radius: 5px; display: grid; place-items: center; font-family: var(--font-body); font-weight: 700; font-size: 9px; color: var(--bg-0); background: var(--grad-neon); }
.dp-text { font-size: 0.72rem; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Días con más de 3 posts: se muestran 3 y el resto se despliega con "+N más".
   Sin el toggle, los posts 4+ quedaban renderizados pero inalcanzables. */
.day-posts.has-overflow .day-post:nth-of-type(n+4) { display: none; }
.day-posts.has-overflow.expanded .day-post:nth-of-type(n+4) { display: flex; }
.more { font: inherit; font-size: 0.7rem; color: var(--text-mute); padding: 1px 4px; background: none; border: 0; cursor: pointer; text-align: left; border-radius: 6px; transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease); }
.more:hover { color: var(--neon-cyan); background: rgba(37, 99, 235, 0.1); }
.cal-tray { display: flex; flex-wrap: wrap; gap: 10px; padding-bottom: 16px; }
.tray-card { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--border); text-decoration: none; transition: border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); }
.tray-card:hover { border-color: var(--border-strong); transform: translateY(-2px); }
.tray-card .dp-avatar { width: 30px; height: 30px; border-radius: 9px; font-size: 12px; }
.tc-brand { font-family: var(--font-body); font-weight: 600; font-size: 0.85rem; }
.tc-hook { font-size: 0.78rem; color: var(--text-dim); max-width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── Biblioteca de medios ── */
.media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; padding-bottom: 16px; }
.media-tile {
  position: relative; aspect-ratio: 1 / 1; border-radius: var(--r-md); overflow: hidden;
  border: 1px solid var(--border); display: block; text-decoration: none;
  opacity: 0; transform: scale(0.96); animation: tile-in var(--dur) var(--ease) forwards;
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
@keyframes tile-in { to { opacity: 1; transform: none; } }
.media-tile:hover { transform: translateY(-3px) scale(1.02); border-color: var(--border-strong); box-shadow: var(--shadow-card), var(--glow-cyan); z-index: 2; }
.media-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mt-video { width: 100%; height: 100%; display: grid; place-items: center; color: var(--neon-cyan); background: #FFFFFF; }
.mt-kind { position: absolute; bottom: 8px; left: 8px; font-size: var(--fs-xs); font-weight: 600; padding: 3px 8px; border-radius: var(--r-pill); color: var(--text); background: rgba(250, 250, 250, 0.92); border: 1px solid var(--border); }

/* ── Formulario de alta de marca ── */
.brand-form { max-width: 780px; padding-bottom: 60px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 22px; }
.form-grid .field { margin-bottom: 0; }
.form-grid .field.span-2 { grid-column: 1 / -1; }
.brand-form .btn-row { justify-content: flex-end; }
@media (max-width: 680px) { .form-grid { grid-template-columns: 1fr; } }

/* ── Scheduling inline en la parrilla ── */
.pr-head .edit-toggle.schedule { color: var(--neon-violet); }
.pr-sched { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); color: var(--neon-violet); background: rgba(79, 70, 229, 0.1); border: 1px solid rgba(79, 70, 229, 0.28); padding: 3px 9px; border-radius: var(--r-pill); margin-top: 8px; }
.pr-sched::before { content: ""; width: 6px; height: 6px; border-radius: 2px; background: var(--neon-violet); box-shadow: var(--glow-violet); }
.scheduler { display: none; margin-top: 12px; gap: 8px; align-items: center; flex-wrap: wrap; }
.scheduler.show { display: flex; animation: fade var(--dur) var(--ease); }
.scheduler input[type="datetime-local"] { width: auto; flex: 1; min-width: 200px; color-scheme: light; }

/* ════════════════════════════════════════════════════════════
   Portal del cliente — ventana flotante in-app (vive en el botón)
   ════════════════════════════════════════════════════════════ */
.portal-trigger { position: relative; }
.portal-trigger.is-docked { border-color: var(--neon-cyan); color: var(--neon-cyan); }
.portal-trigger.is-docked::after {
  content: ""; width: 6px; height: 6px; border-radius: 50%; margin-left: 2px;
  background: var(--neon-cyan); box-shadow: var(--glow-cyan); animation: pulse 1.8s infinite;
}

.portal-win {
  position: fixed; z-index: 80; left: 0; top: 0; width: 460px; height: 720px;
  display: flex; flex-direction: column; overflow: hidden;
  background: linear-gradient(180deg, var(--bg-1), var(--bg-1));
  border: 1px solid var(--border-strong); border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
  opacity: 0; visibility: hidden; pointer-events: none; will-change: transform, opacity;
}
.portal-win[data-state="open"], .portal-win[data-state="max"] { opacity: 1; visibility: visible; pointer-events: auto; }
.portal-win.is-animating { transition: transform var(--dur) var(--ease-spring), opacity var(--dur) var(--ease), filter var(--dur) var(--ease), width var(--dur) var(--ease), height var(--dur) var(--ease), left var(--dur) var(--ease), top var(--dur) var(--ease); }
.portal-win.is-max { border-radius: var(--r-md); }

/* Materialización: el contenido entra escalonado cuando la ventana se despliega. */
.portal-win.is-revealing .pw-titlebar { animation: pw-slidedown 440ms var(--ease) both; }
.portal-win.is-revealing .pw-body { animation: pw-fadeup 500ms 70ms var(--ease) both; }
@keyframes pw-slidedown { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } }
@keyframes pw-fadeup { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

.pw-titlebar {
  flex: 0 0 auto; display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 8px 0 14px;
  background: var(--bg-1); border-bottom: 1px solid var(--border);
  cursor: grab; user-select: none; touch-action: none;
}
.pw-titlebar:active { cursor: grabbing; }
.portal-win.is-max .pw-titlebar { cursor: default; }
.pw-title { display: flex; align-items: center; gap: 9px; font-family: var(--font-body); font-weight: 600; font-size: 0.85rem; color: var(--text); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.pw-title .iso { width: 18px; height: 18px; flex: 0 0 auto; }
.pw-controls { display: flex; align-items: center; gap: 2px; margin-left: auto; flex: 0 0 auto; }
.pw-btn { width: 30px; height: 30px; display: grid; place-items: center; border: 0; border-radius: 8px; background: transparent; color: var(--text-dim); cursor: pointer; transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.pw-btn:hover { background: rgba(9, 9, 11, 0.12); color: var(--text); }
.pw-btn.pw-close:hover { background: rgba(220, 38, 38, 0.18); color: var(--neon-red); }
.pw-btn svg { width: 15px; height: 15px; }

.pw-body { position: relative; flex: 1; min-height: 0; background: var(--bg-0); }
.pw-frame { width: 100%; height: 100%; border: 0; display: block; opacity: 0; transition: opacity var(--dur) var(--ease); }
.pw-frame.loaded { opacity: 1; }
.pw-loader { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 10px; color: var(--text-dim); font-family: var(--font-body); font-size: 0.85rem; transition: opacity var(--dur) var(--ease); }
.pw-spin { width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(9, 9, 11, 0.25); border-top-color: var(--neon-cyan); animation: spin 0.7s linear infinite; }
.pw-body.loaded .pw-loader { opacity: 0; pointer-events: none; }

.pw-resize { position: absolute; right: 0; bottom: 0; width: 20px; height: 20px; cursor: nwse-resize; z-index: 2; touch-action: none; }
.pw-resize::after { content: ""; position: absolute; right: 4px; bottom: 4px; width: 8px; height: 8px; border-right: 2px solid var(--border-strong); border-bottom: 2px solid var(--border-strong); }
.portal-win.is-max .pw-resize { display: none; }

@media (max-width: 560px) { .portal-win { width: 100vw !important; height: calc(100vh - 44px) !important; } }

/* ════════════════════════════════════════════════════════════
   Biblioteca — lightbox in-app (popup sobre fondo difuminado)
   ════════════════════════════════════════════════════════════ */
.media-tile { cursor: zoom-in; background: none; padding: 0; font: inherit; color: inherit; width: 100%; }
.media-tile:focus-visible { outline: 2px solid var(--neon-cyan); outline-offset: 2px; }

.lightbox {
  position: fixed; inset: 0; z-index: 210; display: flex; align-items: center; justify-content: center;
  padding: clamp(20px, 5vw, 80px);
  background: rgba(9, 9, 11, 0); backdrop-filter: blur(0px);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity var(--dur) var(--ease), backdrop-filter var(--dur) var(--ease), background var(--dur) var(--ease), visibility 0s linear var(--dur);
}
.lightbox.open { opacity: 1; visibility: visible; pointer-events: auto; background: rgba(9, 9, 11, 0.3); backdrop-filter: blur(10px); transition: opacity var(--dur) var(--ease), backdrop-filter var(--dur) var(--ease), background var(--dur) var(--ease); }

.lb-stage {
  position: relative; max-width: 100%; max-height: 100%; margin: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--r-md); overflow: hidden;
  box-shadow: 0 30px 100px rgba(9, 9, 11, 0.30), 0 0 0 1px var(--border-strong);
  will-change: transform, opacity;
}
.lb-stage img, .lb-stage video { display: block; max-width: 100%; max-height: 86vh; width: auto; height: auto; object-fit: contain; background: #0A0A0A; }
.lb-stage.swap { animation: lb-swap var(--dur) var(--ease); }
@keyframes lb-swap { from { opacity: 0; transform: scale(0.97); } to { opacity: 1; transform: none; } }

.lb-ctl { position: fixed; border: 1px solid var(--border-strong); background: var(--bg-1); color: var(--text); display: grid; place-items: center; cursor: pointer; opacity: 0; transition: background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), opacity var(--dur) var(--ease); }
.lightbox.open .lb-ctl { opacity: 1; }
.lb-nav { top: 50%; transform: translateY(-50%); width: 52px; height: 52px; border-radius: 50%; }
.lb-nav:hover { background: rgba(37, 99, 235, 0.14); border-color: var(--neon-cyan); }
.lb-prev { left: clamp(12px, 3vw, 40px); }
.lb-next { right: clamp(12px, 3vw, 40px); }
.lb-prev:hover { transform: translateY(-50%) translateX(-3px); }
.lb-next:hover { transform: translateY(-50%) translateX(3px); }
.lb-nav svg { width: 24px; height: 24px; }
.lb-nav.hidden { display: none; }
.lb-close { top: clamp(16px, 3vw, 30px); right: clamp(16px, 3vw, 30px); width: 44px; height: 44px; border-radius: 50%; }
.lb-close:hover { background: rgba(220, 38, 38, 0.18); border-color: var(--neon-red); color: var(--neon-red); transform: rotate(90deg); }
.lb-close svg { width: 18px; height: 18px; }
.lb-caption { position: fixed; bottom: clamp(14px, 3vw, 26px); left: 50%; transform: translateX(-50%); font-family: var(--font-body); font-size: 0.82rem; color: var(--text-dim); background: var(--bg-1); border: 1px solid var(--border); padding: 7px 14px; border-radius: var(--r-pill); opacity: 0; transition: opacity var(--dur) var(--ease); white-space: nowrap; max-width: 70vw; overflow: hidden; text-overflow: ellipsis; }
.lightbox.open .lb-caption { opacity: 1; }

/* Entrada escalonada de los controles + flash de glow al aterrizar la imagen.
   fill-mode backwards: aplica el frame inicial durante el delay y vuelve al
   estado base al terminar (sin romper los transforms de :hover). */
.lightbox.open .lb-close { animation: lb-ctl-in 380ms var(--ease-spring) backwards; }
.lightbox.open .lb-prev { animation: lb-nav-in-l 440ms 40ms var(--ease-spring) backwards; }
.lightbox.open .lb-next { animation: lb-nav-in-r 440ms 40ms var(--ease-spring) backwards; }
.lightbox.open .lb-caption { animation: lb-cap-in 440ms 90ms var(--ease) backwards; }
.lightbox.open .lb-stage { animation: lb-stage-glow 720ms var(--ease); }
@keyframes lb-ctl-in { from { opacity: 0; transform: scale(0.6) rotate(-40deg); } to { opacity: 1; transform: none; } }
@keyframes lb-nav-in-l { from { opacity: 0; transform: translateY(-50%) translateX(-24px) scale(0.85); } to { opacity: 1; transform: translateY(-50%) translateX(0) scale(1); } }
@keyframes lb-nav-in-r { from { opacity: 0; transform: translateY(-50%) translateX(24px) scale(0.85); } to { opacity: 1; transform: translateY(-50%) translateX(0) scale(1); } }
@keyframes lb-cap-in { from { opacity: 0; transform: translateX(-50%) translateY(12px); } to { opacity: 1; transform: translateX(-50%); } }
@keyframes lb-stage-glow { 0% { box-shadow: 0 30px 100px rgba(9, 9, 11, 0.30), 0 0 0 1px var(--neon-cyan); } 100% { box-shadow: 0 30px 100px rgba(9, 9, 11, 0.30), 0 0 0 1px var(--border-strong); } }

/* ════════════════════════════════════════════════════════════
   Calendario — arrastrar posts a un día para programar
   ════════════════════════════════════════════════════════════ */
.cal-hint-inline { color: var(--neon-cyan); font-size: 0.82rem; }
[data-post] { cursor: grab; touch-action: none; user-select: none; -webkit-user-drag: none; }
[data-post]:active { cursor: grabbing; }
[data-post].is-dragging-src { opacity: 0.28; filter: saturate(0.6); }
body.dragging, body.dragging * { cursor: grabbing !important; user-select: none !important; }

.cal-day { transition: border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease); }
.cal-day.drop-hot {
  border-color: var(--neon-cyan);
  box-shadow: 0 0 0 30px rgba(37, 99, 235, 0.35);
  transform: translateY(-3px) scale(1.03);
  background: rgba(37, 99, 235, 0.07);
  z-index: 4;
}
.cal-day.drop-hot .day-num { color: var(--neon-cyan); }

.drag-ghost {
  position: fixed; left: 0; top: 0; z-index: 120; margin: 0; pointer-events: none;
  border-color: var(--neon-violet) !important;
  box-shadow: 0 22px 55px rgba(9, 9, 11, 0.30);
  will-change: transform, opacity; opacity: 0.98;
}

.day-post.settle { animation: settle-pop 360ms var(--ease-spring); }
@keyframes settle-pop { 0% { opacity: 0; transform: scale(0.55); } 60% { opacity: 1; } 100% { opacity: 1; transform: none; } }

/* Botón × para retirar un post programado del calendario.
   Descubrible: siempre tenuemente visible (no solo al hover), y plena
   opacidad al hover/foco del chip o al foco de teclado del propio botón.
   Es focusable por teclado (es un <button>) con anillo de foco visible, y
   un área táctil ampliada (~44px) vía ::before sin agrandar el círculo ni
   romper la grilla densa del calendario. */
.day-post[data-post] { position: relative; }
.dp-remove {
  position: absolute; top: 50%; right: 2px; transform: translateY(-50%) scale(0.9);
  width: 17px; height: 17px; padding: 0; border-radius: 50%;
  border: 1px solid var(--border-strong); background: var(--bg-1); color: var(--text-dim);
  font-family: var(--font-body); font-size: 13px; line-height: 1; cursor: pointer;
  display: grid; place-items: center; opacity: 0.5; z-index: 3;
  transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
/* Blanco táctil ~44px de ancho centrado en el círculo, sin cambiar su tamaño
   visible. Alto acotado a 34px para no invadir el chip vecino apilado. */
.dp-remove::before {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: 44px; height: 34px; transform: translate(-50%, -50%);
}
.day-post:hover .dp-remove,
.day-post:focus-within .dp-remove,
.dp-remove:focus,
.dp-remove:focus-visible { opacity: 1; transform: translateY(-50%) scale(1); }
.dp-remove:focus-visible { outline: 2px solid var(--neon-cyan); outline-offset: 2px; }
.dp-remove:hover { background: rgba(220, 38, 38, 0.2); color: var(--neon-red); border-color: var(--neon-red); }

/* ── "Postear ya": burbuja flotante de publicación inmediata (hover sobre el post) ── */
.pub-bubble {
  position: fixed; z-index: 70;
  transform: translate(-50%, -100%) scale(0.92); transform-origin: 50% 100%;
  display: flex; align-items: center; gap: 7px; padding: 6px;
  border-radius: 12px; white-space: nowrap;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-card);
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur-fast) var(--ease), transform var(--dur) var(--ease-spring);
}
.pub-bubble.show { opacity: 1; pointer-events: auto; transform: translate(-50%, -100%) scale(1); }
.pub-bubble::after {
  content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  border: 6px solid transparent; border-top-color: rgba(9, 9, 11, 0.92);
}
body.dragging .pub-bubble { display: none; }
.pub-bubble button {
  font-family: var(--font-body); font-weight: 600; font-size: 0.82rem;
  padding: 7px 12px; border-radius: 8px; cursor: pointer; border: 1px solid transparent;
  transition: filter var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.pub-bubble .pub-now, .pub-bubble .pub-yes { background: var(--grad-neon); color: var(--bg-0); }
.pub-bubble .pub-now:hover, .pub-bubble .pub-yes:hover { filter: brightness(1.12); }
.pub-bubble .pub-yes:disabled { opacity: 0.7; cursor: progress; filter: none; }
.pub-bubble .pub-q { font-family: var(--font-body); font-weight: 500; font-size: 0.82rem; color: var(--text-dim); padding: 0 4px; }
.pub-bubble .pub-no { background: transparent; color: var(--text-mute); border-color: var(--border); box-shadow: none; }
.pub-bubble .pub-no:hover { color: var(--text); border-color: var(--border-strong); }
/* Borrar (acción destructiva): tono rojo, separado visualmente de publicar. */
.pub-bubble .pub-del { background: transparent; color: var(--neon-red); border-color: rgba(220, 38, 38, 0.35); box-shadow: none; }
.pub-bubble .pub-del:hover { background: rgba(220, 38, 38, 0.14); border-color: var(--neon-red); }
.pub-bubble .pub-yes.danger { background: linear-gradient(180deg, #DC2626, #B91C1C); color: #fff; }

/* ── "Limpiar aprobados": acción masiva debajo de la bandeja ── */
.tray-foot { padding-bottom: 50px; }
.tray-clear {
  font-family: var(--font-body); font-weight: 500; font-size: 0.85rem;
  padding: 9px 16px; border-radius: var(--r-md); cursor: pointer;
  background: transparent; color: var(--text-mute);
  border: 1px solid var(--border); box-shadow: none;
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.tray-clear:hover { color: var(--neon-red); border-color: rgba(220, 38, 38, 0.4); }
.tray-clear.armed { color: #fff; background: linear-gradient(180deg, #DC2626, #B91C1C); border-color: transparent; }
.tray-clear:disabled { opacity: 0.7; cursor: progress; }

/* ── Tech minimal: titulares con tracking apretado (Apple/EL), números tabulares ── */
.page-head h1 { letter-spacing: -0.035em; font-weight: 650; }
.section-title, .panel h2, .brand-card h3 { letter-spacing: -0.02em; font-weight: 600; }
.tile .v { letter-spacing: -0.03em; font-weight: 650; }
.camp-table td, .tile .v { font-variant-numeric: tabular-nums; }
/* Botón primario pill (ElevenLabs) */
.btn-primary { border-radius: var(--r-pill); }
/* Orbes vivos: el color de la marca respira en los avatares, no en el chrome */
.brand-card .avatar, .dp-avatar { border-radius: 50%; }

/* Orbes vivos en las tarjetas de marca (cabina): el elemento con vida de la
   página, estilo ElevenLabs — el resto del chrome queda monocromo. */
.brand-card .avatar {
  background:
    radial-gradient(120% 120% at 30% 25%, var(--orb-a) 0%, transparent 52%),
    radial-gradient(130% 130% at 72% 70%, var(--orb-b) 0%, transparent 56%),
    radial-gradient(150% 150% at 50% 100%, var(--orb-c) 0%, transparent 58%),
    #0E0E11;
  background-size: 190% 190%, 200% 200%, 210% 210%, 100% 100%;
  animation: orb-drift 12s ease-in-out infinite alternate;
  color: #FFFFFF; border-radius: 50%;
}
.brand-card:nth-child(2) .avatar { animation-duration: 16s; animation-delay: -5s; }
.brand-card:nth-child(3) .avatar { animation-duration: 20s; animation-delay: -8s; }
.brand-card:nth-child(4) .avatar { animation-duration: 24s; animation-delay: -12s; }

/* ============================================================
   Aprobación de contenido en la parrilla — port del portal del cliente.
   Reusa .btn / .chip / .toast de arriba; solo aporta lo que faltaba
   (variantes de botón, feedback, modal e hilo) para que apliquen aquí.
   ============================================================ */
.approval-actions { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.btn-approve { flex: 1; background: var(--grad-neon); background-size: 160% auto; color: var(--bg-0); border: 1px solid transparent; border-radius: var(--r-pill); }
.btn-approve:hover { background-position: 100% center; }
.btn-approve:disabled:hover { background-position: 0 center; }
.btn-reject:hover { border-color: var(--neon-magenta); color: var(--neon-magenta); }
.post-row .feedback { font-size: 0.85rem; color: var(--neon-amber); background: rgba(180, 83, 9, 0.08); border-left: 2px solid var(--neon-amber); padding: 8px 12px; border-radius: 0 var(--r-sm) var(--r-sm) 0; margin-top: 10px; }
/* Aprobar deshabilitado: no hay media todavía. Se ve inerte + guía "subí la foto". */
.btn-approve:disabled { opacity: 0.45; cursor: not-allowed; filter: grayscale(0.4); }
.post-row .media-missing { font-size: 0.85rem; color: var(--neon-amber); background: rgba(180, 83, 9, 0.08); border-left: 2px solid var(--neon-amber); padding: 8px 12px; border-radius: 0 var(--r-sm) var(--r-sm) 0; margin-top: 10px; }

/* Panel "Usuarios del portal": fuera de .console, fila propia full-width. Card
   consistente con .panel; ancho acotado para lectura. */
.team-panel { margin-top: 22px; border-radius: var(--r-lg); padding: 20px; background: var(--surface); border: 1px solid var(--border-strong); box-shadow: var(--shadow-card); }
.team-panel h3 { font-family: var(--font-body); font-weight: 600; font-size: 1.05rem; margin-bottom: 4px; }
.team-panel .team-hint { color: var(--text-dim); font-size: 0.85rem; margin-bottom: 14px; max-width: 60ch; }
.team-list { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.team-invite { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.team-invite input[type="email"] { flex: 1 1 240px; }
.team-invite select { flex: 0 0 auto; width: auto; }
.team-toggle { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 0.85rem; color: var(--text-dim); }
.team-toggle input { width: auto; }

/* Modal "pedir cambios" (mata el prompt()) */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 50; display: none;
  align-items: center; justify-content: center; padding: 24px;
  background: rgba(9, 9, 11, 0.29); backdrop-filter: blur(4px);
}
.modal-backdrop.open { display: flex; animation: wa-fade var(--dur) var(--ease); }
@keyframes wa-fade { from { opacity: 0; } to { opacity: 1; } }
.modal {
  width: 100%; max-width: 480px; border-radius: var(--r-lg); padding: 24px;
  background: var(--surface); border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-card); animation: wa-pop var(--dur) var(--ease-spring);
}
@keyframes wa-pop { from { opacity: 0; transform: translateY(20px) scale(0.97); } to { opacity: 1; transform: none; } }
.modal h3 { font-family: var(--font-body); font-weight: 600; font-size: 1.2rem; letter-spacing: -0.02em; margin-bottom: 6px; }
.modal p.hint { color: var(--text-dim); font-size: 0.88rem; margin-bottom: 16px; }
.modal textarea {
  width: 100%; min-height: 110px; resize: vertical; font-family: var(--font-body); font-size: 0.92rem;
  color: var(--text); background: #FFFFFF; border: 1px solid var(--border-strong);
  border-radius: var(--r-md); padding: 12px 14px; outline: none; transition: border-color var(--dur-fast) var(--ease);
}
.modal textarea:focus { border-color: var(--neon-cyan); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12); }
.modal .modal-acts { display: flex; gap: 10px; margin-top: 18px; }

/* Hilo de cambios dentro del modal */
.thread { margin: 14px 0; max-height: 180px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }
.thread:empty { display: none; }
.msg { padding: 9px 12px; border-radius: var(--r-md); font-size: 0.85rem; max-width: 88%; }
.msg .who { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-mute); margin-bottom: 3px; }
.msg.client { align-self: flex-end; background: rgba(37, 99, 235, 0.1); border: 1px solid rgba(37, 99, 235, 0.25); }
.msg.agency { align-self: flex-start; background: rgba(79, 70, 229, 0.1); border: 1px solid rgba(79, 70, 229, 0.25); }