:root{
  /* Proyección de luz sobre oscuridad: fondo casi negro, texto casi blanco,
     y el color de acento (tema elegible en Ajustes) reservado para momentos
     puntuales — nunca como relleno de cajas. */
  --bg:#050506;
  --bg2:#0a0a0c;
  --text:#f2f1f5;
  --text-dim:#8c8994;
  --text-faint:#57545e;
  /* --hairline es la línea estructural neutra (separa secciones, tablas,
     inputs). --panel-border la fija applyTheme() en app.js con el color del
     tema activo — se reserva para acentos puntuales, no para encajonar todo. */
  --hairline:rgba(255,255,255,0.09);
  /* Champán y negro: oro claro como acento, un segundo tono bronce, y los
     estados en versiones que conviven con el dorado sin competir. */
  --panel-border:rgba(231,206,143,0.3);
  --cyan:#e7ce8f;
  --violet:#b79a5c;
  --green:#b9c98a;
  --amber:#e0b96b;
  --red:#d98a8a;
  --mc0:#e7ce8f;
  --mc1:#b79a5c;
  --mc2:#b9c98a;
  --mc3:#e0b96b;
  --mc4:#d98a8a;
  --mc5:#8fb6a8;
  --font-display:-apple-system,BlinkMacSystemFont,'SF Pro Display','Segoe UI',system-ui,sans-serif;
  --font-body:-apple-system,BlinkMacSystemFont,'SF Pro Text','Segoe UI',system-ui,Arial,sans-serif;
  --font-mono:ui-monospace,'SF Mono','Cascadia Code','Courier New',monospace;
  /* Identidad fija del holograma de Nova (pantalla principal): azul/cian,
     igual sea cual sea el tema de color elegido en Ajustes — es la "piel"
     de Nova, no un acento reemplazable. */
  --jarvis-cyan:#e7ce8f;
  --jarvis-blue:#b79a5c;
  --jarvis-cyan-dim:rgba(231,206,143,0.35);
  --jarvis-cyan-faint:rgba(231,206,143,0.14);
}

*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-weight:400;
  font-size:15px;
  line-height:1.5;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

#bg-canvas{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  z-index:0;
  background:var(--bg);
}

.bg-wordmark{
  position:fixed;
  inset:0;
  z-index:0;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
  overflow:hidden;
}
.bg-wordmark-text{
  position:absolute;
  font-family:var(--font-display);
  font-weight:300;
  font-size:clamp(2.6rem, 10vw, 8.5rem);
  letter-spacing:0.22em;
  text-transform:uppercase;
  white-space:nowrap;
  color:#fff;
  opacity:0.05;
}

.app{
  position:relative;
  z-index:1;
  min-height:100vh;
  display:flex;
  justify-content:center;
}

.back-home-btn{
  display:none;
  position:fixed;top:26px;left:32px;z-index:20;
  align-items:center;justify-content:center;
  background:transparent;border:none;color:var(--text-dim);
  cursor:pointer;font-size:.8rem;font-family:var(--font-body);font-weight:400;
  letter-spacing:.04em;padding:6px 0;
  transition:color .2s ease;
}
.back-home-btn:hover{color:var(--text);}
body:not([data-view="jarvis"]) .back-home-btn{display:flex;}

.toggle{display:flex;align-items:center;gap:10px;color:var(--text-dim);font-size:.85rem;cursor:pointer;}
.clock{font-family:var(--font-display);font-weight:300;color:var(--text-dim);font-size:.85rem;letter-spacing:2px;text-align:center;}

.jarvis-settings{
  max-width:420px;margin:40px auto 0;padding-top:26px;
  border-top:1px solid var(--hairline);
  display:flex;flex-direction:column;gap:12px;align-items:stretch;
}

/* ---------- Content / views ---------- */
.content{padding:48px 56px 80px;max-width:1180px;width:100%;}
.view{display:none;animation:fadeIn .4s ease;}
.view.active{display:block;}
@keyframes fadeIn{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}

.view-header h1{
  font-family:var(--font-display);
  font-weight:300;
  font-size:1.9rem;
  letter-spacing:.01em;
  margin:0 0 8px;
  color:var(--text);
}
.subtitle{color:var(--text-dim);margin:0 0 34px;font-size:.92rem;font-weight:300;}

#view-jarvis .view-header{text-align:center;}
#view-jarvis .view-header h1{
  font-size:clamp(2.1rem, 4vw, 3rem);
  letter-spacing:-0.01em;
}

.jarvis-status{color:var(--text-dim);font-size:.92rem;font-weight:300;margin:0;min-height:1.2em;}

.transcript{
  max-width:640px;margin:0 auto 20px;
  max-height:260px;overflow-y:auto;
  display:flex;flex-direction:column;gap:12px;
  padding-right:4px;
}
.msg{padding:2px 0 2px 14px;font-size:.92rem;font-weight:300;line-height:1.5;max-width:85%;border-left:1px solid var(--hairline);}
.msg.user{align-self:flex-end;text-align:right;border-left:none;border-right:1px solid var(--hairline);padding:2px 14px 2px 0;color:var(--text-dim);}
.msg.jarvis{align-self:flex-start;color:var(--text);border-left-color:rgba(231,206,143,0.4);}

.cmd-form{display:flex;gap:14px;max-width:640px;margin:0 auto 16px;align-items:center;}
.cmd-form input{
  flex:1;background:transparent;border:none;border-bottom:1px solid var(--hairline);
  border-radius:0;padding:10px 2px;color:var(--text);font-family:var(--font-body);font-weight:300;font-size:.92rem;
  transition:border-color .2s ease;
}
.cmd-form input:focus{outline:none;border-color:var(--cyan);}
.cmd-form input::placeholder{color:var(--text-faint);}
.cmd-form button{
  background:transparent;color:var(--text-dim);border:1px solid var(--hairline);border-radius:20px;
  padding:9px 20px;font-weight:400;font-size:.85rem;cursor:pointer;font-family:var(--font-body);
  transition:all .2s ease;
}
.cmd-form button:hover{color:var(--text);border-color:var(--text-dim);}

.ghost-btn{
  display:block;margin:0 auto;background:transparent;
  border:1px solid var(--hairline);color:var(--text-dim);
  padding:10px 20px;border-radius:20px;cursor:pointer;font-family:var(--font-body);font-size:.85rem;
  transition:all .2s ease;
}
.ghost-btn:hover{border-color:var(--text-dim);color:var(--text);}
.ghost-btn.small{padding:7px 14px;font-size:.8rem;margin:0;}
.hidden{display:none !important;}

/* ---------- Filter bar ---------- */
.filter-bar{
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;
  border-bottom:1px solid var(--hairline);
  padding:0 0 20px;margin-bottom:34px;
}
.filter-presets{display:flex;gap:22px;}
.preset-btn{
  background:transparent;border:none;color:var(--text-faint);
  padding:2px 0;cursor:pointer;font-size:.82rem;font-family:var(--font-body);font-weight:400;
  letter-spacing:.02em;border-bottom:1px solid transparent;
  transition:color .2s ease,border-color .2s ease;
}
.preset-btn:hover{color:var(--text-dim);}
.preset-btn.active{color:var(--text);border-color:var(--cyan);}
.filter-dates{display:flex;gap:20px;color:var(--text-faint);font-size:.82rem;}
.filter-dates input{
  background:transparent;border:none;border-bottom:1px solid var(--hairline);color:var(--text-dim);
  border-radius:0;padding:4px 2px;margin-left:8px;font-family:var(--font-body);font-size:.82rem;
}
.filter-dates input:focus{outline:none;border-color:var(--cyan);}

/* ---------- Stat cards ---------- */
.stat-grid{display:flex;flex-wrap:wrap;gap:52px;margin-bottom:44px;}
.stat-card{
  padding:0 0 2px;position:relative;min-width:150px;
  border-bottom:1px solid var(--hairline);
}
.stat-label{display:block;color:var(--text-faint);font-size:.7rem;font-weight:400;text-transform:uppercase;letter-spacing:.14em;margin-bottom:10px;}
.stat-value{display:block;font-family:var(--font-display);font-size:2.1rem;font-weight:300;letter-spacing:-.01em;padding-bottom:14px;}
.stat-sub{display:block;color:var(--text-faint);font-size:.75rem;font-weight:300;margin-top:8px;}
.glow-cyan .stat-value{color:var(--cyan);}
.glow-cyan{border-color:rgba(231,206,143,0.35);}
.glow-violet .stat-value{color:var(--violet);}
.glow-violet{border-color:rgba(124,92,255,0.35);}
.glow-green .stat-value{color:var(--green);}
.glow-green{border-color:rgba(200,255,91,0.3);}
.glow-amber .stat-value{color:var(--amber);}
.glow-amber{border-color:rgba(255,181,71,0.3);}

/* ---------- Panels / tables ---------- */
.panel{
  border-top:1px solid var(--hairline);
  padding:28px 0;margin-bottom:6px;
}
.panel h2{margin:0 0 18px;font-family:var(--font-display);font-size:.92rem;font-weight:500;letter-spacing:.03em;color:var(--text-dim);text-transform:uppercase;}
.table-wrap{overflow-x:auto;}
table{width:100%;border-collapse:collapse;font-size:.88rem;font-weight:300;}
thead th{
  text-align:left;color:var(--text-faint);text-transform:uppercase;font-size:.68rem;font-weight:500;letter-spacing:.1em;
  padding:0 10px 10px 0;border-bottom:1px solid var(--hairline);
}
tbody td{padding:12px 10px 12px 0;border-bottom:1px solid var(--hairline);color:var(--text);}
tbody tr:hover{color:var(--text);}
tbody tr:hover td{background:rgba(255,255,255,0.015);}
.row-actions{display:flex;gap:10px;}
.icon-btn{
  background:transparent;border:none;color:var(--text-faint);
  border-radius:0;width:24px;height:24px;cursor:pointer;font-size:.85rem;
  transition:color .2s ease;
}
.icon-btn:hover{color:var(--cyan);}
.icon-btn.danger:hover{color:var(--red);}
.pill{padding:2px 0;font-size:.76rem;font-weight:400;border-bottom:1px solid transparent;}
.pill.good{color:var(--green);border-color:var(--green);}
.pill.mid{color:var(--amber);border-color:var(--amber);}
.pill.low{color:var(--red);border-color:var(--red);}

/* ---------- Forms ---------- */
.inline-form{display:flex;flex-wrap:wrap;gap:22px;margin-bottom:28px;align-items:flex-end;}
.inline-form input,.inline-form select{
  background:transparent;border:none;border-bottom:1px solid var(--hairline);color:var(--text);
  border-radius:0;padding:8px 2px;font-family:var(--font-body);font-weight:300;font-size:.88rem;
  transition:border-color .2s ease;
}
.inline-form input::placeholder,.inline-form textarea::placeholder{color:var(--text-faint);}
.inline-form textarea{
  background:transparent;border:none;border-bottom:1px solid var(--hairline);color:var(--text);
  border-radius:0;padding:8px 2px;font-family:var(--font-body);font-weight:300;font-size:.88rem;
  line-height:1.45;resize:none;overflow-y:auto;transition:border-color .2s ease;
}
.inline-form textarea:focus{outline:none;border-color:var(--cyan);}
#task-text{flex:1 1 320px;min-width:0;max-width:100%;}
.inline-form input:focus,.inline-form select:focus{outline:none;border-color:var(--cyan);}
.inline-form input[type=number]{width:120px;}
.inline-form input[type=text]{width:180px;}
.inline-form button[type=submit]{
  background:transparent;color:var(--text);border:1px solid var(--hairline);border-radius:20px;
  padding:9px 20px;font-weight:400;font-size:.85rem;cursor:pointer;transition:border-color .2s ease;
}
.inline-form button[type=submit]:hover{border-color:var(--cyan);}

/* ---------- Barra de orden y filtros de Modelos ---------- */
.models-toolbar{display:flex;flex-wrap:wrap;gap:22px;align-items:center;}
.models-toolbar .table-search{margin-bottom:0;flex:1 1 220px;}
.sort-field{display:flex;align-items:center;gap:10px;color:var(--text-dim);font-size:.8rem;font-weight:300;}
.sort-field select{
  background:transparent;border:none;border-bottom:1px solid var(--hairline);color:var(--text);
  border-radius:0;padding:8px 2px;font-family:var(--font-body);font-weight:300;font-size:.88rem;
  transition:border-color .2s ease;
}
.sort-field select:focus{outline:none;border-color:var(--cyan);}
.filter-chips{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 8px;}
.chip{
  background:transparent;border:1px solid var(--hairline);color:var(--text-dim);border-radius:20px;
  padding:5px 14px;font-family:var(--font-body);font-weight:300;font-size:.78rem;cursor:pointer;
  transition:border-color .2s ease,color .2s ease;
}
.chip:hover{border-color:var(--text-dim);color:var(--text);}
.chip.active{border-color:var(--cyan);color:var(--cyan);}
#models-count{margin:0 0 18px;}

/* ---------- Models grid ---------- */
.models-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1px;background:var(--hairline);}
.model-card{
  background:var(--bg);
  padding:24px;position:relative;
}
.model-card .avatar{
  width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-weight:500;font-size:.8rem;color:#0a0a0c;margin-bottom:16px;
}
.model-card h3{margin:0 0 16px;font-size:1.05rem;font-weight:400;}
.model-card .m-row{display:flex;justify-content:space-between;font-size:.82rem;font-weight:300;color:var(--text-faint);padding:5px 0;}
.model-card .m-row b{color:var(--text-dim);font-weight:500;}
/* Varias cuentas (Instagram u OnlyFans): separadas y, si no caben, en otra línea */
.model-card .m-ig-list{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:2px 10px;min-width:0;text-align:right;margin-left:12px;}
.model-card .m-ig-list a{overflow-wrap:anywhere;}
.model-card .row-actions{position:absolute;top:24px;right:24px;}

/* ---------- Toasts ---------- */
#toast-container{position:fixed;bottom:28px;right:28px;display:flex;flex-direction:column;gap:10px;z-index:50;}
.error-banner{
  position:fixed;top:0;left:0;right:0;z-index:100;
  background:#0e0508;color:#ff9aa8;border-bottom:1px solid var(--red);
  padding:10px 20px;font-size:.85rem;text-align:center;cursor:pointer;
}
.error-banner.hidden{display:none;}
.toast{
  min-width:260px;max-width:340px;
  background:rgba(5,5,6,0.94);border-left:1px solid var(--green);
  padding:14px 18px;
  animation:toastIn .3s ease;
}
@keyframes toastIn{from{opacity:0;transform:translateX(40px);}to{opacity:1;transform:none;}}
.toast.leaving{animation:toastOut .3s ease forwards;}
@keyframes toastOut{to{opacity:0;transform:translateX(40px);}}
.toast-title{font-weight:500;color:var(--green);font-size:.85rem;margin-bottom:4px;}
.toast-msg{font-size:.82rem;font-weight:300;color:var(--text-dim);}

/* ---------- Color utilities (no inline styles, CSP-friendly) ---------- */
.mc0{color:var(--mc0);} .mc1{color:var(--mc1);} .mc2{color:var(--mc2);}
.mc3{color:var(--mc3);} .mc4{color:var(--mc4);} .mc5{color:var(--mc5);}
.mbg0{background:var(--mc0);} .mbg1{background:var(--mc1);} .mbg2{background:var(--mc2);}
.mbg3{background:var(--mc3);} .mbg4{background:var(--mc4);} .mbg5{background:var(--mc5);}
.dot{font-weight:700;}
.dim{color:var(--text-dim);}

/* ---------- Voice selector ---------- */
.voice-select{
  width:100%;background:transparent;border:none;border-bottom:1px solid var(--hairline);color:var(--text);
  border-radius:0;padding:8px 2px;font-family:var(--font-body);font-weight:300;font-size:.85rem;margin:4px 0 4px;
}
.voice-select:focus{outline:none;border-color:var(--cyan);}
.wake-note{font-size:.72rem;font-weight:300;color:var(--text-faint);line-height:1.5;margin:-4px 0 4px;}

/* ---------- Crecimiento / Instagram ---------- */
.disclaimer{
  border-left:1px solid var(--amber);
  padding:2px 0 2px 16px;color:var(--text-dim);font-size:.85rem;font-weight:300;line-height:1.6;margin-bottom:30px;
}
.small-note{font-size:.78rem;font-weight:300;color:var(--text-faint);margin:-8px 0 16px;}
.playbook-list{margin:0;padding-left:0;list-style:none;display:flex;flex-direction:column;gap:14px;}
.playbook-list li{font-size:.88rem;font-weight:300;line-height:1.6;color:var(--text-dim);padding-left:16px;border-left:1px solid var(--hairline);}
.playbook-list li b{color:var(--text);font-weight:500;}
.ig-link{color:var(--cyan);text-decoration:none;font-size:.85rem;}
.ig-link:hover{text-decoration:underline;}
.pill.neutral{color:var(--text-faint);border-color:var(--text-faint);}
.tip-card{
  border-left:1px solid var(--hairline);
  padding:2px 0 2px 16px;margin-bottom:18px;
}
.tip-card h3{margin:0 0 10px;font-size:.92rem;font-weight:500;}
.tip-card ul{margin:0;padding-left:16px;}
.tip-card li{font-size:.84rem;font-weight:300;color:var(--text-dim);line-height:1.6;margin-bottom:4px;}
.trending-result{margin-top:16px;color:var(--text-dim);font-size:.88rem;font-weight:300;line-height:1.7;white-space:pre-wrap;}
.example-block{margin-bottom:24px;}
.example-block:last-child{margin-bottom:0;}
.example-block h3{margin:0 0 10px;font-size:.9rem;font-weight:500;color:var(--cyan);}

/* ---------- Ajustes ---------- */
.settings-btn{
  position:fixed;bottom:26px;right:32px;z-index:20;
  width:auto;height:auto;border-radius:0;
  display:flex;align-items:center;justify-content:center;
  background:transparent;border:none;color:var(--text-dim);
  cursor:pointer;font-size:1.05rem;
  transition:transform .3s ease,color .2s ease;
}
.settings-btn:hover{color:var(--text);transform:rotate(35deg);}

.theme-row{display:flex;gap:16px;flex-wrap:wrap;}
.theme-swatch{
  width:76px;height:50px;border-radius:2px;border:1px solid var(--hairline);
  color:#fff;font-family:var(--font-body);font-weight:400;font-size:.76rem;
  cursor:pointer;text-shadow:0 1px 3px rgba(0,0,0,0.8);
  display:flex;align-items:flex-end;padding:6px 8px;
  transition:border-color .2s ease;
}
.theme-swatch.active{border-color:#fff;}
.theme-swatch.theme-champan{background:linear-gradient(135deg,#0a0805,#b79a5c 45%,#e7ce8f);}
.theme-swatch.theme-aurora{background:linear-gradient(135deg,#160a2e,#7b5cff 55%,#ff3da8);}
.theme-swatch.theme-cyan{background:linear-gradient(135deg,#061018,#00e5ff 55%,#0a2a33);}
.theme-swatch.theme-mono{background:linear-gradient(135deg,#0c0c0e,#8f8f98 55%,#d8d8de);}

.file-label-btn{cursor:pointer;display:inline-flex;align-items:center;}

.pin-lock-overlay{
  position:fixed;inset:0;z-index:100;
  background:rgba(3,3,4,0.97);
  display:flex;align-items:center;justify-content:center;
}
.pin-lock-overlay.hidden{display:none;}
.pin-lock-box{
  padding:0;text-align:center;display:flex;flex-direction:column;gap:16px;
  min-width:280px;
}
.pin-lock-box h2{margin:0;font-family:var(--font-display);font-weight:300;letter-spacing:.05em;color:var(--text);}
.pin-lock-box p{margin:0;color:var(--text-dim);font-size:.88rem;font-weight:300;}
.pin-lock-box input{
  background:transparent;border:none;border-bottom:1px solid var(--hairline);color:var(--text);
  border-radius:0;padding:10px;text-align:center;font-size:1.2rem;letter-spacing:6px;
}
.pin-lock-box input:focus{outline:none;border-color:var(--cyan);}
.pin-lock-box button{
  background:transparent;color:var(--text);border:1px solid var(--hairline);border-radius:20px;
  padding:10px;font-weight:400;cursor:pointer;transition:border-color .2s ease;
}
.pin-lock-box button:hover{border-color:var(--cyan);}
.pin-lock-error{color:var(--red) !important;min-height:1.2em;font-size:.85rem;}

.billing-chart{width:100%;height:180px;display:block;}

.table-search{
  width:100%;max-width:340px;margin-bottom:18px;
  background:transparent;border:none;border-bottom:1px solid var(--hairline);color:var(--text);
  border-radius:0;padding:8px 2px;font-family:var(--font-body);font-weight:300;font-size:.88rem;
}
.table-search:focus{outline:none;border-color:var(--cyan);}
.commission-input{
  width:64px;background:transparent;border:none;border-bottom:1px solid var(--hairline);color:var(--text);
  border-radius:0;padding:4px 2px;font-family:var(--font-body);font-weight:300;font-size:.85rem;text-align:center;
}
.commission-input:focus{outline:none;border-color:var(--cyan);}

/* ---------- Tareas / Eventos ---------- */
.task-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;}
.task-item,.event-item{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  border-bottom:1px solid var(--hairline);
  padding:14px 0;
}
.task-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px;}
.task-check{display:flex;align-items:flex-start;gap:14px;cursor:pointer;min-width:0;}
.task-check input[type=checkbox]{width:16px;height:16px;accent-color:var(--cyan);flex-shrink:0;cursor:pointer;margin:3px 0 0;}
.task-text{font-size:.9rem;font-weight:300;color:var(--text);line-height:1.45;
  white-space:pre-wrap;overflow-wrap:anywhere;min-width:0;}
.task-text.plegada{display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
.task-pie{display:flex;align-items:center;gap:12px;padding-left:30px;font-size:.76rem;}
.task-pie:empty{display:none;}
.task-modelo{color:var(--text-faint);font-weight:300;}
.task-mas{background:none;border:0;padding:0;color:var(--cyan);font:inherit;font-size:.76rem;cursor:pointer;}
.task-mas:hover{text-decoration:underline;}
.task-item.done .task-text,.event-item.done .event-title{color:var(--text-faint);text-decoration:line-through;}
.event-main{display:flex;flex-direction:column;gap:4px;min-width:0;}
.event-title{font-size:.9rem;font-weight:300;color:var(--text);}
.event-meta{font-size:.76rem;font-weight:300;color:var(--text-faint);}
.priority-badge{
  display:inline-block;padding:0 0 1px;font-size:.68rem;font-weight:500;
  text-transform:uppercase;letter-spacing:.08em;border-bottom:1px solid currentColor;
}
.priority-badge.priority-alta{color:var(--red);}
.priority-badge.priority-media{color:var(--amber);}
.priority-badge.priority-baja{color:var(--green);}
.event-item.priority-alta{border-left:1px solid var(--red);padding-left:14px;}
.event-item.priority-media{border-left:1px solid var(--amber);padding-left:14px;}
.event-item.priority-baja{border-left:1px solid var(--green);padding-left:14px;}

/* ============================================================
   Pantalla de Nova — HUD estilo J.A.R.V.I.S. (busto wireframe azul/cian)
   Todo lo de aquí abajo vive dentro de #view-jarvis salvo #boot-screen,
   que es una capa de arranque independiente del resto de la app.
   ============================================================ */

/* ---------- Secuencia de arranque ---------- */
#boot-screen{
  position:fixed;inset:0;z-index:90;
  background:var(--bg);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;
  transition:opacity .6s ease;
}
#boot-screen.hidden{opacity:0;pointer-events:none;}
.boot-title{
  font-family:var(--font-display);font-weight:700;font-size:1.3rem;letter-spacing:.5em;
  color:var(--jarvis-cyan);text-shadow:0 0 18px var(--jarvis-cyan-dim);padding-left:.5em;
}
#boot-log{font-family:var(--font-mono);font-size:.78rem;color:var(--jarvis-cyan);min-height:100px;width:340px;max-width:80vw;line-height:1.9;opacity:.9;}
#boot-log div{opacity:0;animation:bootLine .25s ease forwards;}
@keyframes bootLine{to{opacity:1;}}
.boot-bar-track{width:340px;max-width:80vw;height:2px;background:rgba(231,206,143,0.15);position:relative;overflow:hidden;}
.boot-bar-fill{position:absolute;inset:0 100% 0 0;background:linear-gradient(90deg, var(--jarvis-blue), var(--jarvis-cyan));transition:right 2s linear;box-shadow:0 0 10px var(--jarvis-cyan);}
.boot-bar-fill.go{right:0;}

/* ---------- Encabezado ---------- */
#view-jarvis .view-header h1{
  font-family:var(--font-mono);font-weight:400;text-transform:uppercase;letter-spacing:.3em;
  font-size:1rem;color:var(--jarvis-cyan);text-shadow:0 0 12px var(--jarvis-cyan-dim);
}
.jarvis-eyebrow{
  text-align:center;font-family:var(--font-mono);font-size:.68rem;letter-spacing:.35em;
  color:var(--jarvis-cyan-dim);text-transform:uppercase;margin:-4px 0 18px;
}

/* ---------- Anillos concéntricos + ticks (decorativos, detrás del busto) ---------- */
.hud-rings{position:absolute;top:50%;left:50%;transform:translate(-50%,-52%);width:0;height:0;pointer-events:none;}
.hud-ring{position:absolute;top:50%;left:50%;border-radius:50%;border:1px solid var(--jarvis-cyan-dim);transform:translate(-50%,-50%);}
.hud-ring-1{width:320px;height:320px;animation:hudSpin 46s linear infinite;}
.hud-ring-2{width:380px;height:380px;border-style:dashed;opacity:.5;animation:hudSpin 64s linear infinite reverse;}
.hud-ring-3{width:440px;height:440px;opacity:.35;animation:hudSpin 90s linear infinite;}
.hud-ring-3::before{
  content:'';position:absolute;inset:-1px;border-radius:50%;
  background:repeating-conic-gradient(var(--jarvis-cyan) 0deg 2deg, transparent 2deg 9deg);
  -webkit-mask:radial-gradient(closest-side, transparent calc(100% - 6px), black calc(100% - 6px));
  mask:radial-gradient(closest-side, transparent calc(100% - 6px), black calc(100% - 6px));
  opacity:.5;
}
@keyframes hudSpin{from{transform:translate(-50%,-50%) rotate(0deg);}to{transform:translate(-50%,-50%) rotate(360deg);}}

/* ---------- Holograma: busto wireframe (cabeza + hombros con circuitos) ---------- */
.orb-stage{position:relative;display:flex;flex-direction:column;align-items:center;gap:26px;margin:6px 0 34px;}
.orb-wrap{position:relative;width:260px;height:320px;display:flex;align-items:center;justify-content:center;animation:jarvisFloat 6s ease-in-out infinite;}
@keyframes jarvisFloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-8px);}}
/* Disco de proyección bajo el busto. */
.orb-ring{
  position:absolute;left:50%;bottom:2px;width:170px;height:170px;margin-left:-85px;
  border-radius:50%;border:1px solid var(--jarvis-cyan-dim);
  transform:scaleY(.14);
  animation:ringPulse 3.2s ease-in-out infinite;
}
@keyframes ringPulse{
  0%,100%{transform:scaleY(.14) scale(.94);opacity:.35;}
  50%{transform:scaleY(.18) scale(1.04);opacity:.7;}
}
.orb{
  width:100%;height:100%;
  display:flex;align-items:center;justify-content:center;
  position:relative;
  transition:filter .3s ease;
}
#orb-canvas{width:100%;height:100%;display:block;}
.orb.listening{filter:drop-shadow(0 0 22px var(--jarvis-cyan-dim));}
.orb.thinking{filter:drop-shadow(0 0 18px rgba(26,106,255,0.4));}
.orb.speaking{filter:drop-shadow(0 0 24px var(--jarvis-cyan-dim));}
.orb.waking{filter:drop-shadow(0 0 26px rgba(231,206,143,0.5));}
#orb-wrap:has(.orb.thinking) .orb-ring{border-color:rgba(26,106,255,0.55);animation-duration:1.6s;}
#orb-wrap:has(.orb.listening) .orb-ring{border-color:rgba(231,206,143,0.6);animation-duration:2.2s;}
#orb-wrap:has(.orb.speaking) .orb-ring{border-color:rgba(231,206,143,0.65);animation-duration:.9s;}
#orb-wrap:has(.orb.waking) .orb-ring{border-color:rgba(232,246,255,0.7);animation-duration:.5s;}

/* Atenuado cosmético (botón LIGHTS) — solo la pantalla de Nova. */
#view-jarvis.hud-dim .hologram-zone,
#view-jarvis.hud-dim .hud-corner{filter:brightness(.5) saturate(.7);}

/* ---------- Widgets de esquina ----------
   Fijos a las esquinas reales de la ventana (como el botón de ajustes),
   no alrededor del holograma: así los datos quedan repartidos por la
   pantalla en vez de amontonados en el centro. */
.hologram-zone{position:relative;}
.hud-corner{position:fixed;z-index:4;display:flex;flex-direction:column;gap:6px;}
.hud-corner .hud-label{font-family:var(--font-body);font-size:.64rem;font-weight:600;letter-spacing:.22em;color:var(--jarvis-cyan-dim);text-transform:uppercase;}
.hud-corner-tl{top:36px;left:44px;}
.hud-corner-tr{top:36px;right:44px;text-align:right;align-items:flex-end;}
.hud-corner-bl{bottom:84px;left:44px;}
.hud-corner-br{bottom:84px;right:44px;align-items:flex-end;}

#view-jarvis .clock{font-family:var(--font-mono);font-weight:400;font-size:1.3rem;letter-spacing:.06em;color:var(--white,var(--text));text-shadow:0 0 10px var(--jarvis-cyan-dim);}
.hud-date{font-family:var(--font-mono);font-size:.7rem;color:var(--jarvis-cyan);opacity:.8;}

.hud-status-line{font-family:var(--font-mono);font-size:.92rem;color:var(--jarvis-cyan);text-shadow:0 0 8px var(--jarvis-cyan-dim);}
.hud-status-line .hud-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--jarvis-cyan);box-shadow:0 0 8px var(--jarvis-cyan);margin-right:7px;animation:hudPulseDot 2s ease-in-out infinite;}
@keyframes hudPulseDot{0%,100%{opacity:1;}50%{opacity:.3;}}
.hud-status-sub{font-family:var(--font-mono);font-size:.68rem;color:var(--text-dim);letter-spacing:.06em;}

.hud-metric-value{font-family:var(--font-mono);font-size:1.1rem;color:var(--jarvis-cyan);text-shadow:0 0 8px var(--jarvis-cyan-dim);}
#jarvis-wave-canvas{width:120px;height:36px;display:block;}

/* ---------- Botones laterales ---------- */
.hud-side-buttons{position:fixed;top:50%;right:44px;transform:translateY(-50%);z-index:4;display:flex;flex-direction:column;gap:10px;}
.hud-btn{
  font-family:var(--font-body);font-weight:600;font-size:.68rem;letter-spacing:.14em;
  color:var(--jarvis-cyan);background:rgba(231,206,143,0.05);
  border:1px solid var(--jarvis-cyan-dim);padding:8px 12px;cursor:pointer;
  text-transform:uppercase;transition:all .2s ease;text-align:center;
}
.hud-btn:hover{background:rgba(231,206,143,0.14);border-color:var(--jarvis-cyan);}
.hud-btn.active{background:rgba(231,206,143,0.22);color:var(--white,var(--text));}

/* ---------- Transcripción y barra de comandos: piel HUD ---------- */
#view-jarvis .transcript{max-width:640px;}
#view-jarvis .msg{font-family:var(--font-mono);font-size:.86rem;}
#view-jarvis .msg.jarvis{color:var(--jarvis-cyan);border-left-color:var(--jarvis-cyan-dim);text-shadow:0 0 6px var(--jarvis-cyan-dim);}
#view-jarvis .msg.user::before{content:'> ';opacity:.6;}
#view-jarvis .cmd-form input{font-family:var(--font-mono);border-bottom-color:var(--jarvis-cyan-dim);}
#view-jarvis .cmd-form input:focus{border-color:var(--jarvis-cyan);}
#view-jarvis .cmd-form button{font-family:var(--font-body);letter-spacing:.14em;text-transform:uppercase;border-color:var(--jarvis-cyan-dim);}
#view-jarvis .cmd-form button:hover{border-color:var(--jarvis-cyan);color:var(--jarvis-cyan);}
#view-jarvis .jarvis-status{font-family:var(--font-mono);}

/* ---------- Objetivos mensuales (Dashboard) ---------- */
.goal-row{display:flex;flex-direction:column;gap:6px;padding:14px 0;border-bottom:1px solid var(--hairline);}
.goal-row:last-child{border-bottom:none;}
.goal-row-head{display:flex;justify-content:space-between;align-items:baseline;font-size:.85rem;}
.goal-row-head b{font-weight:500;}
.goal-track{height:4px;background:var(--hairline);position:relative;overflow:hidden;}
.goal-fill{position:absolute;inset:0;width:0;background:var(--cyan);transition:width .4s ease;}
.goal-fill.goal-reached{background:var(--green);}
.goal-pct{font-size:.76rem;color:var(--text-faint);}

/* ---------- Notas CRM (tarjeta de modelo) ---------- */
.model-notes{margin-top:14px;padding-top:14px;border-top:1px solid var(--hairline);}
.model-notes-list{list-style:none;margin:0 0 10px;padding:0;display:flex;flex-direction:column;gap:6px;max-height:110px;overflow-y:auto;}
.model-notes-list li{font-size:.78rem;color:var(--text-dim);line-height:1.4;}
.model-notes-list .note-date{color:var(--text-faint);margin-right:6px;}
.model-note-form{display:flex;gap:8px;}
.model-note-form input{
  flex:1;background:transparent;border:none;border-bottom:1px solid var(--hairline);color:var(--text);
  font-family:var(--font-body);font-weight:300;font-size:.78rem;padding:4px 2px;
}
.model-note-form input:focus{outline:none;border-color:var(--cyan);}
.model-note-form button{background:transparent;border:none;color:var(--text-faint);cursor:pointer;font-size:.9rem;}
.model-note-form button:hover{color:var(--cyan);}

@media (max-width:860px){
  .hud-side-buttons{position:static;transform:none;flex-direction:row;justify-content:center;margin:18px 0 0;}
  .hud-corner{position:static;align-items:center !important;text-align:center !important;margin-bottom:14px;}
  .hologram-zone{display:flex;flex-direction:column;align-items:center;}
  .hud-rings{position:absolute;}
  .hud-ring-1{width:240px;height:240px;}
  .hud-ring-2{width:290px;height:290px;}
  .hud-ring-3{width:340px;height:340px;}
  .content{padding:32px 24px;}
}

/* ---------- Redes: pestañas por modelo ---------- */
.field-label{display:block;font-size:.68rem;color:var(--text-faint);text-transform:uppercase;letter-spacing:.14em;margin-bottom:6px;}
.model-tabs{display:flex;gap:22px;flex-wrap:wrap;border-bottom:1px solid var(--hairline);padding-bottom:16px;margin-bottom:30px;}
.model-tab{background:transparent;border:none;color:var(--text-faint);cursor:pointer;font-size:.88rem;font-family:var(--font-body);padding:2px 0;border-bottom:1px solid transparent;transition:color .2s ease,border-color .2s ease;}
.model-tab:hover{color:var(--text-dim);}
.model-tab.active{color:var(--text);border-color:var(--cyan);}

/* ---------- Editor de Reels ---------- */
.reel-editor{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-bottom:24px;}
.reel-col{display:flex;flex-direction:column;gap:10px;}
.reel-video{width:100%;max-height:420px;background:#000;border:1px solid var(--hairline);object-fit:contain;}
.reel-stage{position:relative;}
.reel-text-overlay{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  color:#fff;font-family:var(--font-display);font-weight:700;text-align:center;
  text-shadow:0 1px 6px rgba(0,0,0,0.8);cursor:grab;user-select:none;
  padding:4px 8px;max-width:86%;
  /* Sin límite de longitud: se respetan los saltos escritos y el texto largo
     se reparte en varias líneas en vez de desbordar el vídeo. */
  white-space:pre-wrap;overflow-wrap:break-word;line-height:1.2;
}
.reel-text-overlay:active{cursor:grabbing;}
.reel-controls{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-bottom:20px;}
.reel-control-group{display:flex;flex-direction:column;gap:10px;}
.reel-control-group label{display:flex;flex-direction:column;gap:4px;font-size:.78rem;color:var(--text-dim);}
.reel-control-group input[type=range]{width:100%;}
.reel-control-group input[type=text]{
  background:transparent;border:none;border-bottom:1px solid var(--hairline);color:var(--text);
  font-family:var(--font-body);font-weight:300;font-size:.88rem;padding:6px 2px;
}
.reel-control-group input[type=text]:focus{outline:none;border-color:var(--cyan);}
.reel-control-group input[type=color]{width:40px;height:28px;background:transparent;border:1px solid var(--hairline);cursor:pointer;}
.reel-filter-presets{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:4px;}
#reel-music-audio{width:100%;height:32px;}

@media (max-width:860px){
  .reel-editor,.reel-controls{grid-template-columns:1fr;}
}

/* ============================================================
   Pantallas de acceso (login / recuperación)
   Identidad de Nova: aurora rosa-violeta-lima sobre casi negro.
   ============================================================ */
.auth-body{
  display:flex;align-items:center;justify-content:center;min-height:100vh;
  padding:24px;position:relative;overflow:hidden;background:var(--bg);
}

/* --- Aurora de fondo: tres manchas desenfocadas en deriva lenta --- */
.auth-aurora{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;}
.aurora-blob{
  position:absolute;display:block;border-radius:50%;
  filter:blur(90px);opacity:.5;will-change:transform;
}
.blob-pink{
  width:46vmax;height:46vmax;top:-16vmax;left:-12vmax;
  background:radial-gradient(circle,#e7ce8f 0%,rgba(231,206,143,0) 70%);
  animation:auroraDrift 26s ease-in-out infinite;
}
.blob-violet{
  width:40vmax;height:40vmax;bottom:-14vmax;right:-10vmax;
  background:radial-gradient(circle,#b79a5c 0%,rgba(183,154,92,0) 70%);
  animation:auroraDrift 34s ease-in-out infinite reverse;
}
.blob-lime{
  width:26vmax;height:26vmax;top:42%;left:52%;opacity:.22;
  background:radial-gradient(circle,#8fb6a8 0%,rgba(53,226,176,0) 70%);
  animation:auroraDrift 44s ease-in-out infinite;
}
@keyframes auroraDrift{
  0%,100%{transform:translate3d(0,0,0) scale(1);}
  33%{transform:translate3d(6vmax,4vmax,0) scale(1.12);}
  66%{transform:translate3d(-4vmax,7vmax,0) scale(.94);}
}

/* --- Tarjeta --- */
.auth-card{
  position:relative;z-index:1;width:100%;max-width:390px;padding:44px 38px 34px;
  border-radius:22px;border:1px solid rgba(255,255,255,0.10);
  background:rgba(10,10,12,0.66);
  backdrop-filter:blur(22px) saturate(140%);
  -webkit-backdrop-filter:blur(22px) saturate(140%);
  box-shadow:0 30px 80px rgba(0,0,0,0.6),inset 0 1px 0 rgba(255,255,255,0.06);
}

/* --- Marca --- */
.auth-brand{text-align:center;margin-bottom:32px;}
.auth-mark{display:block;margin:0 auto 16px;line-height:0;}
.auth-title{
  font-family:var(--font-display);font-weight:200;font-size:2.15rem;
  letter-spacing:.34em;margin:0 0 0 .34em;
  background:linear-gradient(100deg,#e7ce8f 0%,#b79a5c 52%,#8fb6a8 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.auth-kicker{
  font-family:var(--font-display);font-size:.62rem;font-weight:400;
  letter-spacing:.62em;margin:6px 0 0 .62em;color:var(--text-faint);text-transform:uppercase;
}

/* --- Paneles --- */
.auth-panel{animation:authFade .3s ease both;}
@keyframes authFade{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}
.auth-sub{color:var(--text-dim);font-size:.83rem;font-weight:300;line-height:1.55;margin:0 0 26px;text-align:center;}
.auth-panel form{display:flex;flex-direction:column;gap:20px;}

.auth-field{display:flex;flex-direction:column;gap:7px;text-align:left;}
.auth-field span{
  font-size:.68rem;font-weight:400;letter-spacing:.16em;text-transform:uppercase;color:var(--text-faint);
}
.auth-field input{
  background:rgba(255,255,255,0.03);border:1px solid var(--hairline);border-radius:11px;
  color:var(--text);padding:12px 14px;font-family:var(--font-body);font-weight:300;font-size:.92rem;
  transition:border-color .2s ease,background .2s ease,box-shadow .2s ease;
}
.auth-field input::placeholder{color:var(--text-faint);}
.auth-field input:focus{
  outline:none;border-color:#e7ce8f;background:rgba(255,255,255,0.05);
  box-shadow:0 0 0 3px rgba(231,206,143,0.14);
}

.auth-btn{
  margin-top:6px;padding:13px 20px;border:none;border-radius:11px;cursor:pointer;
  font-family:var(--font-body);font-weight:500;font-size:.9rem;letter-spacing:.02em;color:#0a0a0c;
  background:linear-gradient(100deg,#e7ce8f 0%,#b79a5c 100%);
  transition:filter .2s ease,transform .12s ease,box-shadow .2s ease;
  box-shadow:0 8px 26px rgba(231,206,143,0.24);
}
.auth-btn:hover:not(:disabled){filter:brightness(1.12);box-shadow:0 10px 32px rgba(231,206,143,0.34);}
.auth-btn:active:not(:disabled){transform:translateY(1px);}
.auth-btn:disabled{opacity:.45;cursor:default;box-shadow:none;}

.auth-link{
  display:block;width:100%;margin-top:22px;padding:0;background:none;border:none;
  color:var(--text-dim);font-family:var(--font-body);font-size:.8rem;font-weight:300;
  cursor:pointer;text-align:center;text-decoration:none;transition:color .2s ease;
}
.auth-link:hover{color:#e7ce8f;}

.auth-msg{
  margin:18px 0 0;padding:11px 14px;border-radius:10px;
  font-size:.81rem;font-weight:300;line-height:1.5;text-align:center;
}
.auth-msg.is-error{color:#d98a8a;background:rgba(217,138,138,0.09);border:1px solid rgba(217,138,138,0.28);}
.auth-msg.is-ok{color:#8fb6a8;background:rgba(53,226,176,0.09);border:1px solid rgba(53,226,176,0.28);}

.auth-foot{color:var(--text-faint);font-size:.7rem;font-weight:300;text-align:center;margin:30px 0 0;}

@media (max-width:420px){
  .auth-card{padding:34px 24px 26px;}
  .auth-title{font-size:1.8rem;}
}
/* Respeta a quien pide menos movimiento en el sistema. */
@media (prefers-reduced-motion:reduce){
  .aurora-blob{animation:none;}
  .auth-panel{animation:none;}
}

/* Fila del selector de voz, con el botón de prueba al lado */
.voice-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center;}
.voice-row .voice-select{flex:1 1 220px;}

/* Instagram: tarjeta de cuenta analizada y fila de sincronización */
.ig-sync-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:18px;}
.ig-card{border:1px solid var(--hairline);border-radius:14px;padding:22px;margin-top:18px;}
.ig-card h3{margin:0 0 4px;font-weight:400;font-size:1.05rem;}
.ig-card .m-row{display:flex;justify-content:space-between;gap:16px;padding:7px 0;border-bottom:1px solid var(--hairline);font-size:.86rem;}
.ig-card .m-row:last-of-type{border-bottom:none;}

/* ============================================================
   Reels — rejilla visual con las visualizaciones en primer plano
   ============================================================ */
.reels-summary{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:1px;background:var(--hairline);border:1px solid var(--hairline);
  border-radius:14px;overflow:hidden;margin:18px 0 22px;
}
.reels-summary > div{background:var(--bg);padding:18px 20px;display:flex;flex-direction:column;gap:4px;}
.reels-summary b{font-size:1.5rem;font-weight:300;color:var(--cyan);letter-spacing:-.01em;}
.reels-summary span{font-size:.72rem;color:var(--text-dim);letter-spacing:.04em;}

.reels-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
  gap:20px;margin-top:6px;
}
.reel-card{margin:0;border:1px solid var(--hairline);border-radius:14px;overflow:hidden;background:var(--bg2);}

.reel-media{
  position:relative;aspect-ratio:9/16;background:#000;overflow:hidden;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}
.reel-media img{width:100%;height:100%;object-fit:cover;display:block;}
.reel-video{width:100%;height:100%;object-fit:contain;background:#000;display:block;}
.reel-noimg{color:var(--text-faint);font-size:.78rem;}

.reel-play{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:54px;height:54px;border-radius:50%;border:1px solid rgba(255,255,255,0.5);
  background:rgba(0,0,0,0.45);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  color:#fff;font-size:1.1rem;cursor:pointer;padding-left:4px;
  transition:transform .18s ease,background .18s ease;
}
.reel-card:hover .reel-play{transform:translate(-50%,-50%) scale(1.1);background:rgba(0,0,0,0.65);}

.reel-duration{
  position:absolute;right:8px;bottom:8px;padding:2px 7px;border-radius:6px;
  background:rgba(0,0,0,0.66);color:#fff;font-size:.7rem;font-variant-numeric:tabular-nums;
}

.reel-card figcaption{padding:14px 15px 15px;}
.reel-views{display:flex;flex-direction:column;gap:1px;margin-bottom:9px;}
.reel-views b{font-size:1.25rem;font-weight:300;color:var(--text);letter-spacing:-.01em;font-variant-numeric:tabular-nums;}
.reel-views span{font-size:.68rem;color:var(--text-faint);letter-spacing:.06em;text-transform:uppercase;}
.reel-stats{display:flex;flex-wrap:wrap;gap:11px;align-items:center;font-size:.78rem;color:var(--text-dim);margin-bottom:9px;}
.reel-caption{margin:0 0 9px;font-size:.76rem;line-height:1.45;color:var(--text-dim);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.reel-foot{margin:0;display:flex;justify-content:space-between;align-items:center;font-size:.72rem;}
.reel-foot a{color:var(--cyan);text-decoration:none;}
.reel-foot a:hover{text-decoration:underline;}

@media (max-width:520px){
  .reels-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px;}
  .reels-summary b{font-size:1.25rem;}
}

/* ---------- Barra de navegación ---------- */
.main-nav{
  position:fixed;top:0;left:0;right:0;z-index:19;
  display:flex;flex-wrap:wrap;gap:2px;justify-content:center;align-items:center;
  padding:12px 130px;
  background:rgba(5,5,6,0.82);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--hairline);
}
.main-nav a{
  color:var(--text-dim);text-decoration:none;font-size:.78rem;font-weight:300;
  letter-spacing:.03em;padding:6px 13px;border-radius:16px;white-space:nowrap;
  transition:color .18s ease,background .18s ease;
}
.main-nav a:hover{color:var(--text);background:rgba(255,255,255,0.05);}
.main-nav a.active{color:var(--cyan);background:rgba(255,255,255,0.05);}
/* La barra desplaza el contenido para no taparlo */
body{padding-top:46px;}
.back-home-btn{top:58px;}

@media (max-width:760px){
  .main-nav{padding:10px 12px;gap:0;overflow-x:auto;justify-content:flex-start;}
  .main-nav a{padding:6px 10px;font-size:.74rem;}
  body{padding-top:44px;}
  .back-home-btn{top:54px;left:14px;}
}

/* Botón para llevar un reel analizado al editor */
.reel-use{
  width:100%;margin-top:9px;background:transparent;border:1px solid var(--hairline);
  color:var(--text-dim);border-radius:16px;padding:6px 10px;font-family:var(--font-body);
  font-weight:300;font-size:.74rem;cursor:pointer;transition:border-color .2s ease,color .2s ease;
}
.reel-use:hover{border-color:var(--cyan);color:var(--cyan);}
.reel-card.is-reference{border-color:var(--cyan);}

/* ============================================================
   Chat con Nova — panel flotante, cerrado por defecto
   ============================================================ */
.chat-launcher{
  position:fixed;bottom:24px;right:78px;z-index:22;
  width:46px;height:46px;border-radius:50%;
  background:rgba(10,10,12,0.85);border:1px solid var(--hairline);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  color:var(--text);font-size:1.05rem;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:border-color .2s ease,transform .15s ease;
}
.chat-launcher:hover{border-color:var(--cyan);transform:translateY(-2px);}
.chat-dot{
  position:absolute;top:9px;right:9px;width:9px;height:9px;border-radius:50%;
  background:var(--cyan);box-shadow:0 0 0 2px rgba(10,10,12,0.9);
}

.nova-chat{
  position:fixed;bottom:82px;right:24px;z-index:22;
  width:min(360px,calc(100vw - 32px));max-height:min(70vh,540px);
  display:flex;flex-direction:column;
  background:rgba(10,10,12,0.92);border:1px solid var(--hairline);border-radius:16px;
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  box-shadow:0 24px 60px rgba(0,0,0,0.6);
  animation:chatIn .18s ease both;overflow:hidden;
}
@keyframes chatIn{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}

.nova-chat-head{
  display:flex;justify-content:space-between;align-items:center;
  padding:13px 16px;border-bottom:1px solid var(--hairline);
  font-size:.82rem;font-weight:400;color:var(--text-dim);letter-spacing:.03em;
}
.chat-close{
  background:none;border:none;color:var(--text-faint);cursor:pointer;
  font-size:.9rem;padding:2px 4px;transition:color .18s ease;
}
.chat-close:hover{color:var(--text);}

.nova-chat .transcript{
  flex:1;overflow-y:auto;padding:14px 16px;margin:0;min-height:120px;max-height:none;
}
.nova-chat .cmd-form{
  display:flex;gap:9px;padding:12px 14px;border-top:1px solid var(--hairline);margin:0;
}
.nova-chat .cmd-form input{
  flex:1;background:rgba(255,255,255,0.04);border:1px solid var(--hairline);border-radius:10px;
  color:var(--text);padding:9px 12px;font-family:var(--font-body);font-weight:300;font-size:.85rem;
}
.nova-chat .cmd-form input:focus{outline:none;border-color:var(--cyan);}
.nova-chat .cmd-form button{
  background:transparent;color:var(--text);border:1px solid var(--hairline);border-radius:10px;
  padding:9px 15px;font-family:var(--font-body);font-size:.82rem;cursor:pointer;
  transition:border-color .2s ease;
}
.nova-chat .cmd-form button:hover{border-color:var(--cyan);}

@media (max-width:520px){
  .nova-chat{right:12px;left:12px;width:auto;bottom:76px;}
  .chat-launcher{right:70px;bottom:18px;}
}

/* ---------- Editor: copia automática y plantillas ---------- */
.reel-auto{margin:24px 0 18px;padding:22px;border:1px solid var(--hairline);border-radius:14px;background:rgba(255,255,255,0.02);}
.reel-auto .model-new-btn{margin-bottom:14px;}
.reel-auto-done{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:8px;}
.reel-auto-done li{
  font-size:.8rem;font-weight:300;color:var(--text-dim);padding-left:20px;position:relative;line-height:1.5;
}
.reel-auto-done li::before{content:'✓';position:absolute;left:0;color:var(--green);}

.reel-styles-block{margin-bottom:20px;}
.reel-preset-row{display:flex;flex-wrap:wrap;gap:9px;align-items:center;margin-bottom:10px;}
.reel-preset-row select,.reel-preset-row input[type=text]{
  flex:1 1 130px;background:transparent;border:none;border-bottom:1px solid var(--hairline);
  color:var(--text);border-radius:0;padding:7px 2px;font-family:var(--font-body);
  font-weight:300;font-size:.84rem;
}
.reel-preset-row select:focus,.reel-preset-row input[type=text]:focus{outline:none;border-color:var(--cyan);}

/* ============================================================
   Modo invitado — se oculta todo lo que sirve para editar

   Se listan los formularios uno a uno en vez de esconder todos los
   .inline-form: los de Instagram (analizar cuenta y ver reels) son consulta,
   no edición, y el invitado debe poder usarlos.
   ============================================================ */
body.is-guest #model-new-btn,
body.is-guest #model-form-panel,
body.is-guest #model-form,
body.is-guest #income-form,
body.is-guest #ppv-form,
body.is-guest #expense-form,
body.is-guest #task-form,
body.is-guest #event-form,
body.is-guest #chatter-form,
body.is-guest #post-form,
body.is-guest #social-api-form,
body.is-guest #pin-form,
body.is-guest .model-note-form,
body.is-guest .row-actions,
body.is-guest #ig-sync-btn,
body.is-guest #reel-export-btn,
body.is-guest #clear-memory-btn,
body.is-guest .file-label-btn{
  display:none !important;
}
/* Las casillas de tareas y eventos se ven, pero no se pueden marcar */
body.is-guest .task-list input[type=checkbox],
body.is-guest table input[type=checkbox],
body.is-guest .commission-input{
  pointer-events:none;opacity:.5;
}

/* Texto superpuesto: área multilínea, sin límite de caracteres */
.reel-control-group textarea{
  background:transparent;border:1px solid var(--hairline);border-radius:10px;
  color:var(--text);font-family:var(--font-body);font-weight:300;font-size:.88rem;
  padding:9px 11px;resize:vertical;min-height:64px;line-height:1.5;
  transition:border-color .2s ease;
}
.reel-control-group textarea:focus{outline:none;border-color:var(--cyan);}
.reel-control-group textarea::placeholder{color:var(--text-faint);}

/* ---------- Panel de OnlyMonster ---------- */
.om-panel{margin-bottom:26px;}
.om-controls{display:flex;flex-wrap:wrap;gap:20px;align-items:flex-end;margin:16px 0 4px;}
.om-controls .mf-field{gap:6px;}
.om-controls select{
  background:transparent;border:none;border-bottom:1px solid var(--hairline);color:var(--text);
  padding:8px 2px;font-family:var(--font-body);font-weight:300;font-size:.88rem;
}
.om-controls select:focus{outline:none;border-color:var(--cyan);}
.om-controls .model-new-btn{margin-bottom:0;}
.om-detail{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-direction:column;gap:7px;}
.om-detail li{font-size:.82rem;font-weight:300;color:var(--text-dim);display:flex;justify-content:space-between;gap:16px;
  padding:7px 0;border-bottom:1px solid var(--hairline);}
.om-detail li:last-child{border-bottom:none;}
.om-detail b{color:var(--text);font-weight:400;}

/* ============================================================
   Alta de modelo — panel con bloques desplegables
   ============================================================ */
.model-form-panel{
  border:1px solid var(--hairline);border-radius:18px;background:var(--bg2);
  margin-bottom:30px;overflow:hidden;animation:authFade .22s ease both;
}
.mf-head{
  display:flex;justify-content:space-between;align-items:center;
  padding:20px 26px;border-bottom:1px solid var(--hairline);
  background:rgba(255,255,255,0.02);
}
.mf-head h2{margin:0;font-family:var(--font-display);font-weight:300;font-size:1.05rem;letter-spacing:.03em;}

/* Cada bloque se abre solo cuando lo necesitas */
.mf-acc{border-bottom:1px solid var(--hairline);}
.mf-acc:last-of-type{border-bottom:none;}
.mf-acc > summary{
  display:flex;align-items:center;gap:12px;cursor:pointer;list-style:none;
  padding:17px 26px;font-size:.86rem;font-weight:400;color:var(--text);
  transition:background .18s ease,color .18s ease;
}
.mf-acc > summary::-webkit-details-marker{display:none;}
.mf-acc > summary:hover{background:rgba(255,255,255,0.03);}
.mf-acc > summary::after{
  content:'⌄';margin-left:auto;color:var(--text-faint);font-size:1.05rem;
  transition:transform .22s ease;
}
.mf-acc[open] > summary{color:var(--cyan);}
.mf-acc[open] > summary::after{transform:rotate(180deg);}
.mf-num{
  display:flex;align-items:center;justify-content:center;flex:0 0 auto;
  width:23px;height:23px;border-radius:50%;border:1px solid var(--hairline);
  font-size:.7rem;color:var(--text-dim);transition:border-color .18s ease,color .18s ease;
}
.mf-acc[open] .mf-num{border-color:var(--cyan);color:var(--cyan);}
.mf-hint{font-size:.74rem;font-weight:300;color:var(--text-faint);}

.mf-body{
  padding:2px 26px 24px;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:18px 24px;
  animation:authFade .18s ease both;
}
.mf-body > .ghost-btn{grid-column:1/-1;justify-self:start;}
.mf-wide{grid-column:1/-1;}

.mf-field{display:flex;flex-direction:column;gap:7px;}
.mf-field > span{font-size:.72rem;color:var(--text-dim);letter-spacing:.03em;}
.mf-field input{
  background:rgba(255,255,255,0.03);border:1px solid var(--hairline);border-radius:10px;
  color:var(--text);padding:10px 12px;font-family:var(--font-body);font-weight:300;font-size:.88rem;
  transition:border-color .2s ease,box-shadow .2s ease;
}
.mf-field input::placeholder{color:var(--text-faint);}
.mf-field input:focus{outline:none;border-color:var(--cyan);box-shadow:0 0 0 3px rgba(231,206,143,0.12);}

.mf-ig-list{grid-column:1/-1;display:flex;flex-direction:column;gap:10px;}
.mf-ig-row{display:flex;gap:10px;align-items:center;}
.mf-ig-row .mf-ig-at{color:var(--text-faint);font-size:.9rem;}
.mf-ig-row input{
  flex:1;background:rgba(255,255,255,0.03);border:1px solid var(--hairline);border-radius:10px;
  color:var(--text);padding:10px 12px;font-family:var(--font-body);font-weight:300;font-size:.88rem;
}
.mf-ig-row input:focus{outline:none;border-color:var(--cyan);}
.mf-ig-row .mf-ig-main{font-size:.66rem;color:var(--cyan);letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;}
.mf-ig-del{background:none;border:none;color:var(--text-faint);cursor:pointer;font-size:.95rem;padding:4px;}
.mf-ig-del:hover{color:var(--red);}
.mf-of-ok{font-size:.66rem;color:var(--green);letter-spacing:.06em;white-space:nowrap;}

.mf-actions{display:flex;gap:12px;align-items:center;padding:22px 26px;border-top:1px solid var(--hairline);}
.mf-actions button[type=submit]{
  background:transparent;color:var(--text);border:1px solid var(--hairline);border-radius:20px;
  padding:10px 22px;font-family:var(--font-body);font-size:.86rem;cursor:pointer;
  transition:border-color .2s ease;
}
.mf-actions button[type=submit]:hover{border-color:var(--cyan);}

/* Subtítulo del panel de administración */
.admin-sub{
  margin:26px 0 14px;font-family:var(--font-display);font-weight:300;
  font-size:.92rem;letter-spacing:.04em;color:var(--text-dim);
}

/* ---------- Filtros de la tabla de ingresos ---------- */
.filtros{
  display:flex;flex-wrap:wrap;gap:18px 22px;align-items:flex-end;
  padding:20px 22px;margin-bottom:18px;
  border:1px solid var(--hairline);border-radius:14px;background:rgba(255,255,255,0.02);
}
.filtro{display:flex;flex-direction:column;gap:6px;}
.filtro > span{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-faint);}
.filtro select,.filtro input[type=date]{
  background:transparent;border:none;border-bottom:1px solid var(--hairline);color:var(--text);
  border-radius:0;padding:7px 2px;font-family:var(--font-body);font-weight:300;font-size:.86rem;
  min-width:130px;transition:border-color .2s ease;
}
.filtro select:focus,.filtro input[type=date]:focus{outline:none;border-color:var(--cyan);}
.filtro-atajos{display:flex;flex-wrap:wrap;gap:8px;margin-left:auto;}

/* Totales que responden a lo que has filtrado */
.resumen-filtro{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:1px;background:var(--hairline);border:1px solid var(--hairline);
  border-radius:14px;overflow:hidden;margin-bottom:18px;
}
.resumen-filtro > div{background:var(--bg);padding:16px 18px;display:flex;flex-direction:column;gap:3px;}
.resumen-filtro b{font-size:1.35rem;font-weight:300;color:var(--cyan);font-variant-numeric:tabular-nums;}
.resumen-filtro span{font-size:.7rem;color:var(--text-dim);letter-spacing:.04em;}

@media (max-width:760px){
  .filtros{padding:16px;gap:14px;}
  .filtro select,.filtro input[type=date]{min-width:110px;}
  .filtro-atajos{margin-left:0;}
}

/* ---------- Reparto financiero ---------- */
.reparto-resumen{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:1px;background:var(--hairline);border:1px solid var(--hairline);
  border-radius:14px;overflow:hidden;margin:18px 0 24px;
}
.reparto-resumen > div{background:var(--bg);padding:17px 19px;display:flex;flex-direction:column;gap:3px;}
.reparto-resumen b{font-size:1.3rem;font-weight:300;color:var(--text);font-variant-numeric:tabular-nums;}
.reparto-resumen span{font-size:.71rem;color:var(--text-dim);letter-spacing:.04em;}

.reparto-sobres{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px;}
.sobre{border:1px solid var(--hairline);border-radius:14px;padding:18px;}
.sobre-cab{display:flex;align-items:center;gap:6px;font-size:.86rem;font-weight:400;}
.sobre-pct{margin-left:auto;font-size:.74rem;color:var(--text-faint);}
.sobre-cifra{font-size:1.5rem;font-weight:300;margin:10px 0 12px;font-variant-numeric:tabular-nums;}
.sobre-barra{height:5px;border-radius:3px;background:rgba(255,255,255,0.07);overflow:hidden;}
.sobre-fill{height:100%;width:0;background:var(--cyan);transition:width .35s ease;}
.sobre-fill.pasado{background:var(--red);}
.sobre-detalle{display:flex;justify-content:space-between;gap:10px;margin-top:9px;font-size:.75rem;color:var(--text-dim);}
.sobre-bien{color:var(--green);}
.sobre-mal{color:var(--red);}
.sobre-nota{margin:12px 0 0;font-size:.73rem;font-weight:300;line-height:1.5;color:var(--text-faint);}

.reparto-config{margin-top:24px;border-top:1px solid var(--hairline);padding-top:18px;}
.reparto-config > summary{cursor:pointer;font-size:.82rem;color:var(--text-dim);list-style:none;}
.reparto-config > summary::-webkit-details-marker{display:none;}
.reparto-config > summary::before{content:'⌄ ';}
.reparto-config[open] > summary::before{content:'⌃ ';}
.reparto-controles{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:16px;margin:16px 0 4px;}
.reparto-alerta{color:var(--amber);}

/* ---------- Cuentas de referencia vigiladas ---------- */
.watch-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px;margin-top:18px;}
.watch-card{border:1px solid var(--hairline);border-radius:14px;padding:18px;}
.watch-cab{display:flex;align-items:center;gap:9px;margin-bottom:14px;font-size:.92rem;}
.watch-cab .mf-ig-del{margin-left:auto;}
.watch-tag{
  font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:var(--cyan);
  border:1px solid var(--cyan);border-radius:12px;padding:2px 9px;
}
.watch-metricas{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:14px 12px;}
.watch-metricas > div{display:flex;flex-direction:column;gap:2px;}
.watch-metricas b{font-size:1.05rem;font-weight:300;font-variant-numeric:tabular-nums;}
.watch-metricas span{font-size:.68rem;color:var(--text-faint);line-height:1.4;}
.delta-sube{color:var(--green);}
.delta-baja{color:var(--red);}

.watch-mejor{margin-top:16px;padding-top:14px;border-top:1px solid var(--hairline);}
.watch-mejor-tit{font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-faint);}
.watch-mejor-fila{display:flex;gap:12px;margin-top:10px;}
.watch-mejor-fila img{width:58px;height:100px;object-fit:cover;border-radius:8px;flex:0 0 auto;background:#000;}
.watch-mejor-fila b{font-size:.9rem;font-weight:400;}
.watch-mejor-fila p{margin:3px 0;font-size:.75rem;}
.watch-cap{color:var(--text-dim);line-height:1.4;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.watch-mejor-fila a{color:var(--cyan);text-decoration:none;font-size:.75rem;}
.watch-mejor-fila a:hover{text-decoration:underline;}

/* Acciones del panel de cuentas vigiladas */
.watch-acciones{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin:4px 0 6px;}
.watch-acciones .model-new-btn{margin-bottom:0;}

/* Los pasos que restan en la cadena del dinero se marcan en rojo */
.reparto-resumen > div.resta b{color:var(--red);}

/* ---------- Historia: dossier por modelo ---------- */
.historia-acciones{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:16px;}
.historia-acciones .model-new-btn{margin-bottom:0;}
.historia-vacia{color:var(--amber);margin-left:4px;}

/* ============================================================
   El cerebro de Nova — grafo interactivo
   ============================================================ */
.grafo-barra{display:flex;flex-wrap:wrap;gap:16px;align-items:center;margin:16px 0 12px;}
.grafo-lienzo{
  position:relative;width:100%;height:min(70vh,560px);
  border:1px solid var(--hairline);border-radius:16px;overflow:hidden;
  background:radial-gradient(ellipse at 50% 45%,rgba(183,154,92,0.07),transparent 65%),var(--bg);
  touch-action:none;cursor:grab;
}
.grafo-lienzo:active{cursor:grabbing;}
#grafo{width:100%;height:100%;display:block;}

.g-linea{stroke:rgba(255,255,255,0.10);stroke-width:1;transition:stroke .2s ease;}
.g-linea.viva{stroke:var(--cyan);stroke-width:1.6;}

.g-nodo{cursor:pointer;}
.g-nodo circle{transition:filter .2s ease,stroke-width .2s ease;}
.g-nodo:hover circle{filter:brightness(1.35);stroke-width:2.4;}
.g-nodo text{
  font-family:var(--font-body);font-weight:300;fill:var(--text);
  pointer-events:none;user-select:none;
}
.g-nodo .g-sub{fill:var(--text-faint);}
.g-nodo.apagado{opacity:.22;}
.g-nodo.apagado text{opacity:.5;}

/* ---------- Archivos por modelo ---------- */
.subida{
  display:flex;flex-wrap:wrap;gap:14px;align-items:center;
  border:1px dashed var(--hairline);border-radius:14px;padding:22px;margin:16px 0 8px;
  transition:border-color .2s ease,background .2s ease;
}
.subida.encima{border-color:var(--cyan);background:rgba(231,206,143,0.05);}
.subida .model-new-btn{margin-bottom:0;}

.archivos-lista{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px;margin-top:16px;}
.archivo{border:1px solid var(--hairline);border-radius:14px;overflow:hidden;background:var(--bg2);}
.archivo-vista{
  height:140px;background:#000;display:flex;align-items:center;justify-content:center;
  overflow:hidden;position:relative;
}
.archivo-vista img,.archivo-vista video{width:100%;height:100%;object-fit:cover;}
.archivo-vista audio{width:92%;}
.archivo-icono{font-size:2.2rem;opacity:.5;}
.archivo-cuerpo{padding:13px 14px;}
.archivo-nom{font-size:.82rem;font-weight:400;word-break:break-word;line-height:1.35;}
.archivo-meta{display:flex;gap:9px;align-items:center;margin:6px 0 9px;font-size:.7rem;color:var(--text-faint);}
.archivo-desc{
  width:100%;background:rgba(255,255,255,0.03);border:1px solid var(--hairline);border-radius:9px;
  color:var(--text);padding:8px 10px;font-family:var(--font-body);font-weight:300;font-size:.76rem;
  resize:vertical;min-height:52px;line-height:1.45;
}
.archivo-desc:focus{outline:none;border-color:var(--cyan);}
.archivo-pie{display:flex;justify-content:space-between;align-items:center;margin-top:9px;font-size:.72rem;}
.archivo-pie a{color:var(--cyan);text-decoration:none;}

/* Botón de guardado de la descripción de cada archivo */
.archivo-guardar{
  background:transparent;border:1px solid var(--hairline);border-radius:14px;
  color:var(--text-faint);padding:4px 12px;font-family:var(--font-body);
  font-weight:300;font-size:.72rem;cursor:pointer;
  transition:border-color .2s ease,color .2s ease;
}
.archivo-guardar:disabled{cursor:default;opacity:.65;}
.archivo-guardar.pendiente{border-color:var(--cyan);color:var(--cyan);}
.archivo-guardar:not(:disabled):hover{border-color:var(--cyan);color:var(--cyan);}

/* Archivo cuya ficha existe pero cuyo contenido no llegó al almacén */
.archivo.roto{border-color:rgba(255,120,120,.35);}
.archivo-icono.roto{color:#ff8080;}
.aviso-roto{color:#ff8080;font-size:.72rem;font-weight:300;}

/* Confirmación de borrado en la propia tarjeta */
.icon-btn.confirmando{
  width:auto;padding:2px 10px;font-size:.7rem;letter-spacing:.02em;
  border-color:rgba(255,120,120,.55);color:#ff8080;
}

/* Lo que Nova ha visto en una imagen */
.archivo-ia{
  margin-top:8px;padding:8px 10px;border-radius:10px;
  background:rgba(0,229,255,.05);border:1px solid rgba(0,229,255,.18);
  font-size:.74rem;font-weight:300;line-height:1.5;color:var(--text-dim);
  white-space:pre-wrap;
}
.archivo-ia span{
  display:block;margin-bottom:4px;color:var(--cyan);
  font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;
}
.archivo-mirar{
  background:transparent;border:1px solid rgba(0,229,255,.3);border-radius:14px;
  color:var(--cyan);padding:4px 12px;font-family:var(--font-body);
  font-weight:300;font-size:.72rem;cursor:pointer;transition:background .2s ease;
}
.archivo-mirar:hover:not(:disabled){background:rgba(0,229,255,.1);}
.archivo-mirar:disabled{opacity:.55;cursor:default;}

/* ============================================================
   Mesa de reels — siete puestos de edición a la vez
   ============================================================ */
.mesa-global{display:flex;flex-direction:column;gap:12px;}
.mesa-global textarea{
  width:100%;background:var(--bg2);border:1px solid var(--hairline);border-radius:12px;
  color:var(--text);padding:10px 12px;font-family:var(--font-body);font-weight:300;
  font-size:.82rem;resize:vertical;
}
.mesa-global-acciones{display:flex;flex-wrap:wrap;gap:10px;align-items:center;}

.mesa-reels{
  display:grid;gap:16px;
  grid-template-columns:repeat(auto-fill,minmax(320px,1fr));
}
.mesa-puesto{
  background:var(--bg2);border:1px solid var(--hairline);border-radius:16px;
  padding:14px;display:flex;flex-direction:column;gap:10px;
}
.mesa-cab{display:flex;align-items:center;gap:10px;}
.mesa-num{
  width:24px;height:24px;flex:0 0 24px;border-radius:50%;
  border:1px solid var(--cyan);color:var(--cyan);
  display:grid;place-items:center;font-size:.7rem;font-weight:500;
}
.mesa-nombre{
  flex:1;background:transparent;border:none;border-bottom:1px solid var(--hairline);
  color:var(--text);font-family:var(--font-body);font-weight:300;font-size:.82rem;
  padding:3px 2px;
}
.mesa-nombre:focus{outline:none;border-bottom-color:var(--cyan);}

.mesa-videos{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.mesa-col{display:flex;flex-direction:column;gap:6px;min-width:0;}
.mesa-video{
  width:100%;aspect-ratio:9/16;object-fit:cover;background:#000;
  border-radius:10px;border:1px solid var(--hairline);
}
.mesa-stage{position:relative;border-radius:10px;overflow:hidden;}
.mesa-stage .mesa-video{border-radius:0;border:none;}
.mesa-overlay{
  position:absolute;transform:translate(-50%,-50%);
  max-width:88%;text-align:center;line-height:1.15;
  font-family:var(--font-display);font-weight:700;
  text-shadow:0 2px 8px rgba(0,0,0,.85);
  cursor:grab;touch-action:none;white-space:pre-wrap;word-break:break-word;
}
.mesa-overlay:active{cursor:grabbing;}
.mesa-overlay.vacio{
  min-width:60px;min-height:16px;border:1px dashed rgba(255,255,255,.25);border-radius:6px;
}

.mesa-controles summary{
  cursor:pointer;color:var(--text-dim);font-size:.74rem;font-weight:300;
  padding:4px 0;list-style:none;
}
.mesa-controles summary::-webkit-details-marker{display:none;}
.mesa-controles summary::before{content:'▸ ';color:var(--cyan);}
.mesa-controles[open] summary::before{content:'▾ ';}
.mesa-controles > *:not(summary){margin-top:8px;}
.mesa-rango{
  display:flex;align-items:center;gap:8px;
  color:var(--text-dim);font-size:.7rem;font-weight:300;
}
.mesa-rango input[type=range]{flex:1;min-width:0;}
.mesa-fila{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.mesa-check{
  display:flex;align-items:center;gap:6px;
  color:var(--text-dim);font-size:.7rem;font-weight:300;cursor:pointer;
}
.mesa-texto{
  width:100%;background:var(--bg);border:1px solid var(--hairline);border-radius:10px;
  color:var(--text);padding:8px 10px;font-family:var(--font-body);font-weight:300;
  font-size:.78rem;resize:vertical;
}
.mesa-audio{width:100%;height:32px;}
.mesa-pie{display:flex;gap:8px;flex-wrap:wrap;}

/* ============================================================
   Marketing — el estratega de redes
   ============================================================ */
.mk-chat{
  display:flex;flex-direction:column;gap:12px;
  max-height:min(56vh,560px);overflow-y:auto;padding:4px 2px 12px;
}
.mk-msg{
  max-width:min(88%,720px);padding:11px 14px;border-radius:14px;
  font-size:.84rem;font-weight:300;line-height:1.6;white-space:pre-wrap;
}
.mk-msg.tu{
  align-self:flex-end;background:rgba(231,206,143,.12);
  border:1px solid rgba(231,206,143,.28);color:var(--text);
}
.mk-msg.experto{
  align-self:flex-start;background:var(--bg2);
  border:1px solid var(--hairline);color:var(--text);
}
.mk-msg.pensando{color:var(--text-faint);font-style:italic;}
.mk-form{display:flex;gap:10px;align-items:flex-end;margin-top:8px;}
.mk-form textarea{
  flex:1;background:var(--bg2);border:1px solid var(--hairline);border-radius:14px;
  color:var(--text);padding:11px 14px;font-family:var(--font-body);font-weight:300;
  font-size:.84rem;resize:vertical;min-height:46px;
}
.mk-form textarea:focus{outline:none;border-color:var(--cyan);}
.mk-sugerencias{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;}
.mk-sugerencias .chip{
  background:transparent;border:1px solid var(--hairline);border-radius:14px;
  color:var(--text-dim);padding:5px 12px;font-family:var(--font-body);
  font-weight:300;font-size:.72rem;cursor:pointer;transition:border-color .2s,color .2s;
}
.mk-sugerencias .chip:hover{border-color:var(--cyan);color:var(--cyan);}

/* El equipo de marketing no ve el resto del panel */
body.is-marketing .readonly-banner{display:none;}
.role-pill.role-marketing{border-color:rgba(183,154,92,.45);color:var(--violet);}

/* La referencia puede ser vídeo o foto: el marco los sostiene igual */
.mesa-marco{position:relative;}
.mesa-marco img.mesa-video{display:block;}
.mesa-stage img.mesa-video{width:100%;aspect-ratio:9/16;object-fit:cover;display:block;}

/* Plantillas de estilo de la mesa */
.mesa-plantillas{
  margin-top:16px;padding-top:16px;border-top:1px solid var(--hairline);
  display:flex;flex-direction:column;gap:8px;
}
.mesa-plantilla-fila{display:flex;flex-wrap:wrap;gap:8px;align-items:center;}
.mesa-plantilla-fila select,
.mesa-plantilla-fila input[type=text]{
  background:var(--bg2);border:1px solid var(--hairline);border-radius:12px;
  color:var(--text);padding:7px 12px;font-family:var(--font-body);
  font-weight:300;font-size:.78rem;
}
.mesa-plantilla-fila select:focus,
.mesa-plantilla-fila input[type=text]:focus{outline:none;border-color:var(--cyan);}
.mesa-plantilla-fila .mesa-check select{padding:4px 8px;}

/* Presencia del equipo en la tabla de cuentas */
.estado-punto{
  display:inline-block;width:7px;height:7px;border-radius:50%;
  margin-right:7px;vertical-align:middle;background:var(--text-faint);
}
.estado-punto.online{
  background:var(--green);
  box-shadow:0 0 0 3px rgba(200,255,91,.15);
  animation:latido-punto 2.4s ease-in-out infinite;
}
.estado-punto.fuera{background:var(--text-faint);}
.estado-punto.nunca{background:transparent;border:1px solid var(--hairline);}
@keyframes latido-punto{
  0%,100%{box-shadow:0 0 0 3px rgba(200,255,91,.15);}
  50%{box-shadow:0 0 0 5px rgba(200,255,91,.05);}
}
.enlace-usuario{
  background:none;border:none;padding:0;cursor:pointer;
  color:var(--text);font-family:var(--font-body);font-weight:300;font-size:inherit;
  border-bottom:1px dotted var(--hairline);
}
.enlace-usuario:hover{color:var(--cyan);border-bottom-color:var(--cyan);}
.fila-actividad > td{background:rgba(255,255,255,.02);}
.tabla-jornadas{width:auto;margin:4px 0;border:none;}
.tabla-jornadas td{
  border:none;padding:3px 18px 3px 0;
  font-size:.74rem;font-weight:300;color:var(--text-dim);
}

/* Historia por apartados */
.historia-atajos{display:flex;flex-wrap:wrap;gap:7px;margin:12px 0 18px;}
.historia-atajos .atajo{
  background:transparent;border:1px solid var(--hairline);border-radius:13px;
  color:var(--text-faint);padding:4px 11px;font-family:var(--font-body);
  font-weight:300;font-size:.7rem;cursor:pointer;
  transition:border-color .2s ease,color .2s ease;
}
.historia-atajos .atajo:hover{border-color:var(--cyan);color:var(--cyan);}
.historia-atajos .atajo.lleno{color:var(--text-dim);border-color:rgba(255,255,255,.16);}
.historia-atajos .atajo.lleno::before{content:'● ';color:var(--green);font-size:.6rem;}

.historia-campos{display:flex;flex-direction:column;gap:18px;}
.historia-apartado{
  border-left:2px solid var(--hairline);padding-left:14px;
  transition:border-color .2s ease;
}
.historia-apartado.lleno{border-left-color:var(--cyan);}
.historia-apartado label{display:block;margin-bottom:7px;cursor:pointer;}
.historia-apartado label b{
  display:block;font-family:var(--font-display);font-weight:400;
  font-size:.9rem;color:var(--text);letter-spacing:.01em;
}
.historia-apartado label span{
  display:block;margin-top:2px;font-size:.72rem;font-weight:300;
  color:var(--text-faint);line-height:1.5;
}
.historia-apartado textarea{
  width:100%;background:var(--bg2);border:1px solid var(--hairline);border-radius:12px;
  color:var(--text);padding:10px 13px;font-family:var(--font-body);font-weight:300;
  font-size:.82rem;line-height:1.6;resize:vertical;
}
.historia-apartado textarea:focus{outline:none;border-color:var(--cyan);}

/* Tapar la vista previa de un archivo: el ojo de Historia */
.archivo-ojo{
  background:transparent;border:1px solid var(--hairline);border-radius:14px;
  color:var(--text-faint);padding:3px 10px;font-size:.8rem;line-height:1.3;
  cursor:pointer;transition:border-color .2s ease,color .2s ease;
}
.archivo-ojo:hover{border-color:var(--cyan);color:var(--cyan);}
.archivo-ojo.tapado{border-color:var(--amber);color:var(--amber);}

.archivo-pixel{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;image-rendering:pixelated;
}
/* Lo de debajo se difumina además del pixelado: si el lienzo no llegara a
   dibujarse (un vídeo que no carga), la tarjeta sigue sin enseñar nada. */
.archivo.tapado .archivo-vista img,
.archivo.tapado .archivo-vista video{filter:blur(14px) saturate(.35);transform:scale(1.1);}
.archivo.tapado .archivo-icono{filter:blur(5px);opacity:.25;}
.archivo.tapado .archivo-vista::after{
  content:'🔒';position:absolute;right:8px;bottom:6px;
  font-size:.85rem;opacity:.8;filter:none;
}

/* El panel de las modelos, dentro de Tareas */
.app-cifras{
  display:grid;gap:12px;margin:16px 0 4px;
  grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
}
.app-cifra{
  border:1px solid var(--hairline);border-radius:14px;padding:12px 14px;
  display:flex;flex-direction:column;gap:2px;background:var(--bg2);
}
.app-cifra .app-num{font-family:var(--font-display);font-size:1.5rem;font-weight:300;color:var(--text);}
.app-cifra .app-eti{font-size:.7rem;font-weight:300;color:var(--text-faint);}
.app-cifra.ojo .app-num{color:var(--amber);}
.app-cifra.mal .app-num{color:var(--red);}
.app-cifra.aviso .app-num{color:var(--violet);}
.app-acciones{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:14px;}
.app-acciones .model-new-btn{margin-bottom:0;text-decoration:none;display:inline-block;}

/* Formulario "mandar tarea a una modelo" en Tareas */
.nt-form{display:flex;flex-direction:column;gap:14px;margin-top:8px;}
.nt-campo{display:flex;flex-direction:column;gap:5px;}
.nt-campo>span{font-size:.72rem;font-weight:300;color:var(--text-dim);letter-spacing:.02em;}
.nt-form input[type=text],.nt-form input[type=date],.nt-form input[type=time],
.nt-form input[type=number],.nt-form select,.nt-form textarea{
  background:var(--bg2);border:1px solid var(--hairline);border-radius:12px;
  color:var(--text);padding:9px 12px;font-family:var(--font-body);font-weight:300;font-size:.85rem;
}
.nt-form textarea{resize:vertical;}
.nt-form input:focus,.nt-form select:focus,.nt-form textarea:focus{outline:none;border-color:var(--cyan);}
.nt-fila{display:flex;gap:12px;flex-wrap:wrap;}
.nt-fila .nt-campo{flex:1;min-width:130px;}
.nt-fila .nt-corto{flex:0 0 120px;}
.nt-tipos{display:flex;flex-wrap:wrap;gap:7px;}
.nt-tipo{
  background:transparent;border:1px solid var(--hairline);border-radius:14px;
  color:var(--text-dim);padding:5px 13px;font-family:var(--font-body);
  font-weight:300;font-size:.74rem;cursor:pointer;transition:border-color .2s,color .2s,background .2s;
}
.nt-tipo:hover{border-color:var(--cyan);color:var(--cyan);}
.nt-tipo.activo{border-color:var(--cyan);color:var(--bg);background:var(--cyan);}

/* Disponibilidad de las modelas y plan semanal (sección Tareas) */
.disp-lista{display:flex;flex-direction:column;gap:2px;margin-top:8px;}
.disp-fila{display:flex;align-items:center;gap:12px;padding:7px 0;border-bottom:1px solid var(--hairline);font-size:.82rem;}
.disp-punto{width:8px;height:8px;border-radius:50%;flex:0 0 8px;}
.disp-punto.ok{background:var(--green);}
.disp-punto.no{background:var(--text-faint);}
.disp-nom{flex:1;min-width:90px;color:var(--text);}
.disp-dias{display:flex;gap:4px;}
.disp-dia{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-size:.62rem;
  border:1px solid var(--hairline);color:var(--text-faint);}
.disp-dia.on{background:var(--cyan);border-color:var(--cyan);color:var(--bg);}
.disp-horas{flex:0 0 auto;font-size:.74rem;}
.plan-previo-cab{margin:16px 0 10px;font-size:.85rem;color:var(--text);}
.plan-lista{list-style:none;margin:0 0 16px;padding:0;display:flex;flex-direction:column;gap:4px;}
.plan-lista li{display:flex;align-items:center;gap:12px;padding:7px 10px;background:var(--bg2);border-radius:10px;font-size:.82rem;}
.plan-dia{flex:0 0 110px;color:var(--cyan);font-weight:300;font-size:.76rem;}
.plan-tit{flex:1;color:var(--text);}
.plan-cat{display:inline-block;font-size:.62rem;text-transform:uppercase;letter-spacing:.06em;
  color:var(--bg);background:var(--cyan);border-radius:8px;padding:1px 7px;margin-right:6px;vertical-align:middle;}
.plan-pasos{display:block;font-size:.68rem;color:var(--amber);margin-top:2px;}

/* ============================================================
   Programar publicaciones (Redes)
   ============================================================ */
.pub-grid{
  display:grid;gap:22px;margin-top:18px;
  grid-template-columns:minmax(0,1.6fr) minmax(260px,1fr);
}
@media (max-width:900px){ .pub-grid{grid-template-columns:1fr;} }

.pub-form{display:flex;flex-direction:column;gap:20px;min-width:0;}
.pub-lateral{min-width:0;}
.pub-bloque{
  background:var(--bg2);border:1px solid var(--hairline);border-radius:16px;
  padding:16px 18px;display:flex;flex-direction:column;gap:14px;
}
.pub-titulo{
  font-family:var(--font-display);font-size:.72rem;font-weight:500;
  letter-spacing:.07em;text-transform:uppercase;color:var(--cyan);
}
.pub-form .nt-campo>span,.pub-lateral .nt-campo>span{font-size:.72rem;color:var(--text-dim);}
.pub-form input[type=text],.pub-form input[type=date],.pub-form input[type=time],
.pub-form select,.pub-form textarea,
.pub-lateral input[type=text]{
  width:100%;background:var(--bg);border:1px solid var(--hairline);border-radius:12px;
  color:var(--text);padding:9px 12px;font-family:var(--font-body);font-weight:300;font-size:.85rem;
}
.pub-form textarea{resize:vertical;}
.pub-form input:focus,.pub-form select:focus,.pub-form textarea:focus,
.pub-lateral input:focus{outline:none;border-color:var(--cyan);}
.pub-ayuda{line-height:1.55;margin:2px 0 0;}
.pub-ayuda code{background:var(--bg);padding:1px 5px;border-radius:5px;font-size:.92em;}

/* Cola de programadas */
.pub-cola{margin-top:22px;border-top:1px solid var(--hairline);padding-top:16px;}
.pub-cola-cab{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px;}
.pub-item{
  display:flex;align-items:center;gap:14px;padding:10px 12px;
  background:var(--bg2);border:1px solid var(--hairline);border-radius:12px;margin-bottom:7px;
}
.pub-cuando{flex:0 0 128px;font-size:.76rem;color:var(--cyan);}
.pub-que{flex:1;min-width:0;font-size:.84rem;color:var(--text);}
.pub-que small{display:block;color:var(--text-faint);font-size:.72rem;margin-top:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.pub-badge{
  font-size:.62rem;text-transform:uppercase;letter-spacing:.05em;border-radius:8px;
  padding:2px 8px;border:1px solid var(--hairline);color:var(--text-dim);flex:0 0 auto;
}
.pub-badge.pendiente{border-color:rgba(231,206,143,.45);color:var(--cyan);}
.pub-badge.publicada{border-color:rgba(185,201,138,.5);color:var(--green);}
.pub-badge.error{border-color:rgba(217,138,138,.5);color:var(--red);}
.pub-badge.sin_instagram{border-color:rgba(224,185,107,.5);color:var(--amber);}
.pub-detector{border-top:1px solid var(--hairline);padding-top:12px;margin-top:4px;}
.pub-canal-op{
  display:block;width:100%;text-align:left;background:var(--bg);border:1px solid var(--hairline);
  border-radius:10px;padding:7px 11px;margin-top:6px;cursor:pointer;
  color:var(--text);font-family:var(--font-body);font-weight:300;font-size:.78rem;
}
.pub-canal-op:hover{border-color:var(--cyan);color:var(--cyan);}
.pub-canal-op small{display:block;color:var(--text-faint);font-size:.68rem;}

/* Enlace de un solo uso para que una modelo autorice su Instagram. */
.pub-enlace-ig {
  width: 100%;
  margin: 6px 0 4px;
  padding: 7px 9px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-dim);
  background: rgba(0, 0, 0, .25);
  border: 1px solid var(--panel-border);
  border-radius: 8px;
}
.pub-enlace-ig:focus { color: var(--text); outline: 1px solid var(--amber); }

/* Lo que Nova ha aprendido sola: una fila por hecho, con su botón de olvidar. */
.memoria-fila {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--panel-border);
}
.memoria-fila:last-child { border-bottom: 0; }
.memoria-texto { flex: 1; min-width: 0; line-height: 1.5; color: var(--text); }
.memoria-fila .ghost-btn { flex: 0 0 auto; }

/* ---- Tareas por día: tira de la semana con marcador ---- */
.task-semana {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.task-dias {
  display: flex;
  gap: 5px;
  flex: 1;
  min-width: 250px;
}
.task-dia {
  position: relative;
  flex: 1;
  min-width: 38px;
  padding: 7px 2px 9px;
  border: 1px solid var(--panel-border);
  border-radius: 10px;
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}
.task-dia:hover { border-color: var(--amber); color: var(--text); }
.task-dia.vacio { opacity: .55; }
.task-dia.hoy { border-color: var(--amber); }
.task-dia.elegido {
  background: color-mix(in srgb, var(--amber) 16%, transparent);
  border-color: var(--amber);
  color: var(--text);
}
.task-dia-letra { display: block; font-size: 10px; letter-spacing: .09em; text-transform: uppercase; }
.task-dia-num { display: block; font-size: 15px; font-weight: 600; line-height: 1.25; }
.task-dia-marca {
  position: absolute;
  top: -6px;
  right: -4px;
  min-width: 17px;
  padding: 1px 4px;
  font-size: 10px;
  font-weight: 700;
  line-height: 15px;
  color: #241a0c;
  background: var(--amber);
  border-radius: 9px;
}
.task-dia-marca.hechas { background: var(--green); }

.task-filtros {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.task-filtros select { flex: 0 1 auto; }

/* ---- Historia: guardado por apartado ---- */
.historia-apartado-pie {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 6px;
}
.historia-apartado-estado {
  font-size: 11px;
  color: var(--text-dim);
}
.historia-apartado.sin-guardar .historia-apartado-estado { color: var(--amber); }
.historia-apartado.sin-guardar textarea { border-color: var(--amber); }

/* ---- Desglose de la checklist antes de crear las tareas ---- */
.plan-abrir {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  font: inherit;
  font-size: 11px;
  color: var(--text-dim);
  background: transparent;
  border: 1px solid var(--panel-border);
  border-radius: 999px;
  cursor: pointer;
}
.plan-abrir:hover { border-color: var(--amber); color: var(--text); }
.plan-pasos-lista {
  grid-column: 1 / -1;
  margin: 8px 0 4px;
  padding: 10px 12px;
  background: rgba(0, 0, 0, .22);
  border: 1px solid var(--panel-border);
  border-radius: 10px;
}
.plan-paso { display: flex; gap: 8px; align-items: center; margin-bottom: 6px; }
.plan-paso input[type="text"] {
  flex: 1;
  min-width: 0;
  padding: 6px 9px;
  font-size: 12.5px;
  color: var(--text);
  background: rgba(0, 0, 0, .3);
  border: 1px solid var(--panel-border);
  border-radius: 7px;
}
.plan-paso input[type="text"]:focus { outline: 1px solid var(--amber); }
.plan-paso-pie {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 10px;
}
.plan-piezas { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-dim); }
.plan-piezas input { width: 62px; padding: 5px 7px; border-radius: 7px;
  background: rgba(0,0,0,.3); border: 1px solid var(--panel-border); color: var(--text); }

/* La mesa: el número del tamaño y el selector de formato. */
.mesa-rango [data-valor-tam] {
  min-width: 26px;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: var(--text-dim);
  text-align: right;
}
.mesa-formato { margin-top: 8px; }
.mesa-formato select {
  flex: 1;
  min-width: 0;
  padding: 5px 8px;
  font-size: 12px;
  color: var(--text);
  background: rgba(0, 0, 0, .3);
  border: 1px solid var(--panel-border);
  border-radius: 7px;
}

/* El selector de calidad de la mesa, en la barra de acciones. */
.mesa-calidad { flex: 0 0 auto; gap: 7px; }
.mesa-calidad select {
  padding: 5px 8px;
  font-size: 12px;
  color: var(--text);
  background: rgba(0, 0, 0, .3);
  border: 1px solid var(--panel-border);
  border-radius: 7px;
}

/* Resumen por modelo cuando el plan va a todas. */
.plan-modelos {
  margin: 10px 0 14px;
  padding: 10px 12px;
  background: rgba(0, 0, 0, .22);
  border: 1px solid var(--panel-border);
  border-radius: 10px;
}
.plan-modelo-fila {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  padding: 6px 0;
  border-bottom: 1px solid var(--panel-border);
  font-size: 12.5px;
}
.plan-modelo-fila:last-child { border-bottom: 0; }
.plan-modelo-fila b { min-width: 96px; color: var(--text); }
.plan-modelo-fila span { color: var(--text-dim); }
.plan-modelo-fila i { font-style: normal; font-size: 11.5px; color: var(--amber); opacity: .8; }

/* ---- Menú de secciones en el móvil ----
   En el escritorio las doce secciones caben en la barra y esto no existe. En el
   móvil la barra se volvía un carrusel con scroll horizontal: se cambia por un
   botón que despliega la lista. */
.nav-toggle { display: none; }

@media (max-width: 760px) {
  .main-nav {
    display: block;
    padding: 0;
    overflow: visible;
    gap: 0;
  }
  .nav-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 12px 16px;
    font: inherit;
    color: var(--text);
    background: none;
    border: 0;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .nav-actual {
    font-size: .86rem;
    font-weight: 400;
    letter-spacing: .04em;
    color: var(--text);
  }
  /* Los tres puntos, dibujados: así no dependen de ninguna fuente. */
  .nav-puntos {
    position: relative;
    width: 20px;
    height: 4px;
    flex: 0 0 auto;
  }
  .nav-puntos::before,
  .nav-puntos::after,
  .nav-puntos {
    transition: transform .22s ease, opacity .22s ease;
  }
  .nav-puntos::before,
  .nav-puntos::after {
    content: '';
    position: absolute;
    top: 0;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--amber);
  }
  .nav-puntos::before { left: 0; box-shadow: 8px 0 0 var(--amber); }
  .nav-puntos::after { left: 16px; }
  .main-nav.abierta .nav-puntos { transform: rotate(90deg); }

  /* La lista: cerrada de alto cero, para que se deslice en vez de aparecer. */
  .main-nav a {
    display: block;
    max-height: 0;
    padding: 0 16px;
    margin: 0;
    border-radius: 0;
    font-size: .82rem;
    opacity: 0;
    overflow: hidden;
    transition: max-height .22s ease, opacity .18s ease, padding .22s ease;
  }
  .main-nav.abierta {
    border-bottom-color: var(--panel-border);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .55);
  }
  .main-nav.abierta a {
    max-height: 46px;
    padding: 12px 16px;
    opacity: 1;
    border-top: 1px solid var(--hairline);
  }
  .main-nav.abierta a.active {
    color: var(--amber);
    background: color-mix(in srgb, var(--amber) 10%, transparent);
    box-shadow: inset 3px 0 0 var(--amber);
  }
  .main-nav.abierta a.hidden { display: none; }

  body { padding-top: 46px; }
  .back-home-btn { top: 56px; left: 14px; }
}

/* ---- A quién va el plan semanal: varias modelos a la vez ---- */
.plan-quien {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 4px;
}
.plan-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px 7px 9px;
  font-size: 12.5px;
  color: var(--text-dim);
  background: rgba(0, 0, 0, .25);
  border: 1px solid var(--panel-border);
  border-radius: 999px;
  cursor: pointer;
  transition: color .15s, border-color .15s, background .15s;
}
.plan-chip:hover { border-color: var(--amber); }
.plan-chip input { accent-color: var(--amber); margin: 0; }
.plan-chip:has(input:checked) {
  color: var(--text);
  border-color: var(--amber);
  background: color-mix(in srgb, var(--amber) 12%, transparent);
}
.plan-chip.sin-cuenta { opacity: .45; cursor: not-allowed; }
.plan-chip.sin-cuenta:hover { border-color: var(--panel-border); }
.plan-quien-pie {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 10px;
}

/* Indicador de que los ingresos se están refrescando solos. */
.en-vivo {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: 12px;
  padding: 3px 10px 3px 8px;
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--green);
  background: color-mix(in srgb, var(--green) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--green) 32%, transparent);
  border-radius: 999px;
  vertical-align: middle;
  animation: vivo-latido 2.4s ease-in-out infinite;
}
@keyframes vivo-latido { 0%,100% { opacity: 1; } 50% { opacity: .55; } }
@media (prefers-reduced-motion:reduce) { .en-vivo { animation: none; } }