/* ─── Tokens ────────────────────────────────────────────────────────────── */
:root {
  --bg:          #f7f0e4;
  --text:        #1a1208;
  --text-2:      #7a6a52;
  --text-3:      #b0a090;
  --accent:      #c49a3c;
  --accent-lt:   #f5ead4;
  --accent-dk:   #9a7820;
  --brown:       #8b5e2d;
  --border:      #ede0c8;
  --border2:     #ddd0b8;
  --card:        #ffffff;
  --hover:       #f2e8d5;
  --sidebar-bg:  #1a1208;
  --sidebar-txt: #e8e0d0;
  --sidebar-act: #2d1e0f;
  --sidebar-acc: #c49a3c;
  --sidebar-dim: #9a8870;

  --green-bg:    #e8f5e9; --green-txt: #2e7d32;
  --amber-bg:    #fff8e1; --amber-txt: #f57f17;
  --gray-bg:     #f5f5f5; --gray-txt:  #616161;
  --blue-bg:     #e3f2fd; --blue-txt:  #1565c0;
  --red-bg:      #ffebee; --red-txt:   #c62828;

  /* Shadows tintadas al fondo — nunca negras puras (design-taste) */
  --shadow:      0 1px 2px rgba(26,18,8,.04), 0 4px 12px rgba(26,18,8,.06), 0 16px 40px rgba(26,18,8,.06);
  --shadow-sm:   0 1px 2px rgba(26,18,8,.04), 0 3px 8px rgba(26,18,8,.05);
  --shadow-lift: 0 2px 4px rgba(26,18,8,.05), 0 8px 24px rgba(26,18,8,.10), 0 24px 48px rgba(26,18,8,.08);

  --r:           4px;
  --r-lg:        12px;
  --sidebar-w:   220px;

  /* Spring physics — nunca ease-in-out lineal (design-taste) */
  --tr:          0.35s cubic-bezier(0.32,0.72,0,1);
  --tr-fast:     0.18s cubic-bezier(0.32,0.72,0,1);
  --tr-slow:     0.55s cubic-bezier(0.32,0.72,0,1);
}

/* ─── Reset ─────────────────────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html,body { height:100%; background:var(--bg); color:var(--text);
  font-family:'DM Sans',system-ui,sans-serif; font-size:14px; line-height:1.55;
  -webkit-font-smoothing:antialiased; overflow:hidden; }
input,textarea,select,button { font-family:inherit; font-size:14px; }

/* ─── App layout ─────────────────────────────────────────────────────────── */
#app { display:grid; grid-template-columns:var(--sidebar-w) 1fr; height:100vh; overflow:hidden; }

/* ─── Sidebar ────────────────────────────────────────────────────────────── */
.sidebar { background:var(--sidebar-bg); display:flex; flex-direction:column; height:100vh; overflow:hidden; }

.sidebar-brand { display:flex; align-items:center; gap:10px; padding:20px 16px 18px; border-bottom:1px solid rgba(255,255,255,.06); }
.sidebar-brand-mark { width:32px; height:32px; background:var(--sidebar-acc); border-radius:var(--r);
  display:flex; align-items:center; justify-content:center; font-family:'Cormorant Garamond',serif;
  font-size:13px; font-weight:500; color:#1a1208; letter-spacing:.5px; flex-shrink:0; }
.sidebar-brand-name { font-size:12.5px; font-weight:500; color:var(--sidebar-txt); line-height:1.2; }
.sidebar-brand-sub  { font-size:10px; color:var(--sidebar-dim); letter-spacing:.3px; }

.sidebar-nav { flex:1; overflow-y:auto; padding:10px 8px; scrollbar-width:none; }
.sidebar-nav::-webkit-scrollbar { display:none; }

.nav-item { display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:var(--r);
  cursor:pointer; transition:background var(--tr); border-left:2px solid transparent;
  margin-bottom:1px; color:var(--sidebar-dim); }
.nav-item:hover { background:rgba(255,255,255,.04); color:var(--sidebar-txt); }
.nav-item.active { background:var(--sidebar-act); border-left-color:var(--sidebar-acc);
  color:var(--sidebar-txt); }
.nav-icon  { font-size:15px; width:20px; text-align:center; flex-shrink:0; }
.nav-label { font-size:13px; font-weight:400; }
.nav-item.active .nav-label { font-weight:500; color:var(--sidebar-acc); }

/* ─── Main ───────────────────────────────────────────────────────────────── */
.main { display:flex; flex-direction:column; height:100vh; overflow:hidden; }

/* ─── Section ────────────────────────────────────────────────────────────── */
.section { display:none; flex-direction:column; height:100%; overflow:hidden; }
.section.active { display:flex; }

/* Most sections scroll their body */
.section > .page-header ~ * { flex:1; overflow-y:auto; }
.section > *:last-child:not(.page-header) { flex:1; overflow-y:auto; }

/* ─── Page header ────────────────────────────────────────────────────────── */
.page-header { display:flex; align-items:flex-start; justify-content:space-between;
  padding:24px 28px 20px; border-bottom:1px solid var(--border); flex-shrink:0; background:var(--bg); flex-wrap:wrap; gap:12px; }
.page-title { font-family:'Cormorant Garamond',serif; font-size:28px; font-weight:300;
  color:var(--text); letter-spacing:-.3px; line-height:1.1; }
.page-sub   { font-size:12px; color:var(--text-2); margin-top:3px; }
.page-actions { display:flex; align-items:center; gap:8px; flex-shrink:0; }

/* ─── Scrollable section body ────────────────────────────────────────────── */
.section-body { flex:1; overflow-y:auto; padding:20px 28px;
  scrollbar-width:thin; scrollbar-color:var(--border2) transparent; }

/* ─── Buttons — spring physics + tactile feedback (design-taste) ─────────── */
.btn-primary { background:var(--accent); color:#1a1208; border:none; border-radius:100px;
  padding:8px 20px; font-size:13px; font-weight:500; cursor:pointer; white-space:nowrap;
  transition:all var(--tr); display:inline-flex; align-items:center; gap:8px; }
.btn-primary:hover  { background:var(--accent-dk); color:#fff; transform:translateY(-1px); box-shadow:0 4px 16px rgba(196,154,60,.30); }
.btn-primary:active { transform:scale(0.97) translateY(0); box-shadow:none; }

.btn-secondary { background:transparent; color:var(--text-2); border:1px solid var(--border2);
  border-radius:100px; padding:8px 18px; font-size:13px; cursor:pointer; white-space:nowrap;
  transition:all var(--tr); }
.btn-secondary:hover  { border-color:var(--accent); color:var(--accent); transform:translateY(-1px); }
.btn-secondary:active { transform:scale(0.97); }

.btn-ghost { background:none; border:none; color:var(--text-2); cursor:pointer; padding:6px 10px;
  border-radius:var(--r-lg); font-size:13px; transition:all var(--tr); }
.btn-ghost:hover  { background:var(--hover); color:var(--text); }
.btn-ghost:active { transform:scale(0.96); }

.btn-sm { padding:5px 12px; font-size:12px; }

.btn-icon { background:var(--hover); border:1px solid var(--border); border-radius:50%;
  width:30px; height:30px; display:flex; align-items:center; justify-content:center;
  cursor:pointer; font-size:14px; color:var(--text-2); transition:all var(--tr); }
.btn-icon:hover  { border-color:var(--accent); color:var(--accent); transform:scale(1.08); }
.btn-icon:active { transform:scale(0.92); }

.btn-full { width:100%; padding:13px; font-size:14px; justify-content:center; }
.btn-danger { color:var(--red-txt) !important; border-color:var(--red-bg) !important; }
.btn-danger:hover { background:var(--red-bg) !important; }

/* ─── Cards — Double-Bezel technique (high-end-visual-design) ────────────── */
.card { background:var(--card); border:1px solid var(--border); border-radius:var(--r-lg);
  box-shadow:var(--shadow); transition:box-shadow var(--tr), transform var(--tr); }
.card:has(.card-header) { overflow:hidden; }

/* Double-Bezel wrapper — usa en cards destacadas */
.card-bezel { background:rgba(26,18,8,.03); border:1px solid var(--border); border-radius:20px; padding:5px; }
.card-bezel > .card { border-radius:17px; box-shadow:inset 0 1px 1px rgba(255,255,255,0.8); }

.card-header { display:flex; align-items:center; justify-content:space-between;
  padding:14px 20px; border-bottom:1px solid var(--border); }
.card-title { font-family:'Cormorant Garamond',serif; font-size:16px; font-weight:400; color:var(--text); }
.card > *:not(.card-header) { padding:16px 20px; }

/* ─── Metrics ────────────────────────────────────────────────────────────── */
.metrics-row { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:12px; padding:16px 28px; flex-shrink:0; }
.metric-card { background:var(--card); border:1px solid var(--border); border-radius:var(--r);
  box-shadow:var(--shadow-sm); padding:16px 18px; }
.metric-label { font-size:11px; font-weight:500; text-transform:uppercase; letter-spacing:.8px;
  color:var(--text-2); margin-bottom:6px; }
.metric-value { font-family:'Cormorant Garamond',serif; font-size:28px; font-weight:300;
  color:var(--text); line-height:1; }
.metric-sub   { font-size:11px; color:var(--text-3); margin-top:4px; }

/* ─── Toolbar / Search ───────────────────────────────────────────────────── */
.toolbar { padding:12px 28px; flex-shrink:0; }
.search-input { width:100%; max-width:420px; background:var(--card); border:1px solid var(--border2);
  border-radius:var(--r); padding:8px 14px; color:var(--text); outline:none;
  transition:border-color var(--tr); }
.search-input:focus { border-color:var(--accent); }
.search-input::placeholder { color:var(--text-3); }

/* ─── Tabs ───────────────────────────────────────────────────────────────── */
.tab-bar { display:flex; gap:2px; padding:0 28px; border-bottom:1px solid var(--border);
  flex-shrink:0; background:var(--bg); }
.tab-btn { background:none; border:none; border-bottom:2px solid transparent;
  padding:10px 16px; font-size:13px; font-weight:400; color:var(--text-2);
  cursor:pointer; transition:all var(--tr); margin-bottom:-1px; }
.tab-btn:hover { color:var(--text); }
.tab-btn.active { border-bottom-color:var(--accent); color:var(--accent); font-weight:500; }

/* ─── Tables ─────────────────────────────────────────────────────────────── */
.data-table { width:100%; border-collapse:collapse; }
.data-table th { font-size:11px; font-weight:500; text-transform:uppercase; letter-spacing:.7px;
  color:var(--text-2); padding:10px 14px; text-align:left; border-bottom:1px solid var(--border); }
.data-table td { padding:11px 14px; font-size:13px; color:var(--text); border-bottom:1px solid var(--border); }
.data-table tbody tr:hover { background:var(--hover); cursor:pointer; }
.data-table tbody tr:last-child td { border-bottom:none; }
.data-table tbody tr:nth-child(even) td { background:rgba(247,240,228,.5); }
.data-table tbody tr:nth-child(even):hover td { background:var(--hover); }
.table-wrap { overflow-x:auto; }

/* ─── Badges / Status ────────────────────────────────────────────────────── */
.badge { display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:500;
  padding:3px 8px; border-radius:2px; white-space:nowrap; }
.badge-activo     { background:var(--green-bg); color:var(--green-txt); }
.badge-seguimiento { background:var(--amber-bg); color:var(--amber-txt); }
.badge-pausado    { background:var(--gray-bg);  color:var(--gray-txt); }
.badge-completado { background:var(--blue-bg);  color:var(--blue-txt); }
.badge-activo-ads { background:var(--green-bg); color:var(--green-txt); }
.badge-pausado-ads{ background:var(--gray-bg);  color:var(--gray-txt); }
.badge-alta   { background:var(--red-bg);   color:var(--red-txt); }
.badge-media  { background:var(--amber-bg); color:var(--amber-txt); }
.badge-baja   { background:var(--green-bg); color:var(--green-txt); }
.badge-neutral { font-size:11px; color:var(--text-3); }

/* ─── Charts ─────────────────────────────────────────────────────────────── */
.chart-wrap    { padding:16px 18px; }
.chart-wrap-sm { max-height:220px; display:flex; align-items:center; justify-content:center; }

/* ─── INICIO ─────────────────────────────────────────────────────────────── */
#s-inicio .page-header { border-bottom:none; }
.inicio-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; padding:0 28px 24px; }
.inicio-grid  { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:12px; padding:0 28px 28px; }

/* Double-Bezel en metric cards (high-end-visual-design) */
.inicio-stats .metric-card {
  background:rgba(26,18,8,.025); border:1px solid var(--border); border-radius:14px; padding:4px;
}
.inicio-stats .metric-card::after { content:''; display:block; }
.metric-card { background:var(--card); border-radius:12px; box-shadow:inset 0 1px 0 rgba(255,255,255,.9); }

/* Quick cards — lift + spring */
.inicio-quick-card { background:var(--card); border:1px solid var(--border); border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm); padding:20px; cursor:pointer; transition:all var(--tr-slow);
  /* Staggered entry animation */
  animation: card-rise 0.5s cubic-bezier(0.32,0.72,0,1) both; }
.inicio-quick-card:hover { border-color:var(--accent); transform:translateY(-2px); box-shadow:var(--shadow-lift); }
.inicio-quick-card:active { transform:scale(0.98) translateY(0); }
.inicio-quick-icon { font-size:22px; margin-bottom:10px; }
.inicio-quick-name { font-size:13px; font-weight:500; color:var(--text); }
.inicio-quick-desc { font-size:11.5px; color:var(--text-2); margin-top:3px; line-height:1.5; }

@keyframes card-rise {
  from { opacity:0; transform:translateY(16px); }
  to   { opacity:1; transform:translateY(0); }
}

/* ─── DASHBOARD DINÁMICO ─────────────────────────────────────────────────── */
.dashboard-metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}
.dash-metric-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 18px 16px 14px;
  box-shadow: var(--shadow-sm);
  transition: transform var(--tr-fast), box-shadow var(--tr-fast);
}
.dash-metric-card:hover { transform: translateY(-1px); box-shadow: var(--shadow-lift); }
.dash-metric-clickable { cursor: pointer; }
.dash-metric-clickable:active { transform: scale(0.97); }
.dash-metric-card.dash-metric-urgent { border-color: #f5c5c5; background: #fff8f8; }
.dash-metric-skeleton {
  background: linear-gradient(90deg, var(--hover) 25%, var(--border) 50%, var(--hover) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
  border-radius: var(--r-lg);
  height: 110px;
}
@keyframes shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }
.dash-metric-icon  { font-size: 20px; margin-bottom: 8px; }
.dash-metric-value { font-size: 28px; font-weight: 600; color: var(--accent); line-height: 1; margin-bottom: 4px; font-family: 'Cormorant Garamond', serif; }
.dash-metric-label { font-size: 11px; font-weight: 500; color: var(--text-2); text-transform: uppercase; letter-spacing: .5px; }
.dash-metric-sub   { font-size: 11px; color: var(--text-3); margin-top: 3px; }
.dash-metric-urgent .dash-metric-value { color: #c62828; }
.dash-metric-progress-wrap {
  height: 4px;
  background: var(--border);
  border-radius: 2px;
  margin-top: 10px;
  overflow: hidden;
}
.dash-metric-progress-bar {
  height: 100%;
  background: var(--accent);
  border-radius: 2px;
  transition: width 0.6s cubic-bezier(0.32,0.72,0,1);
}
.dash-metric-pct { font-size: 10px; color: var(--text-3); margin-top: 4px; text-align: right; }

.dashboard-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
}
.dashboard-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 20px;
  box-shadow: var(--shadow-sm);
  margin-bottom: 12px;
}
.dashboard-two-col .dashboard-card { margin-bottom: 0; }
.dash-briefing-card { background: #fff8ed; border-color: #edd9b0; }

.dash-section-title {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 14px;
}

/* Eventos del día */
.dash-event-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.dash-event-card:last-child { border-bottom: none; }
.dash-event-time  { font-size: 12px; font-weight: 600; color: var(--accent); min-width: 40px; font-variant-numeric: tabular-nums; }
.dash-event-info  { flex: 1; min-width: 0; }
.dash-event-title { font-size: 13px; font-weight: 500; color: var(--text); }
.dash-event-client { font-size: 11px; color: var(--text-2); margin-top: 2px; }
.dash-prep-btn {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 500;
  color: var(--accent);
  background: var(--accent-lt);
  border: 1px solid #e8d090;
  border-radius: var(--r);
  padding: 4px 10px;
  cursor: pointer;
  transition: background var(--tr-fast);
  white-space: nowrap;
}
.dash-prep-btn:hover { background: #f0e0a0; }

/* Briefing IA */
.dash-briefing-text {
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--text);
}

/* Acciones prioritarias */
.dash-action-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--border);
}
.dash-action-item:last-child { border-bottom: none; }
.dash-action-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.dash-action-text { flex: 1; font-size: 13px; color: var(--text); line-height: 1.4; }
.dash-action-btn {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-2);
  background: var(--hover);
  border: 1px solid var(--border2);
  border-radius: var(--r);
  padding: 4px 10px;
  cursor: pointer;
  transition: all var(--tr-fast);
}
.dash-action-btn:hover { background: var(--accent-lt); color: var(--accent-dk); border-color: var(--accent); }

/* Actividad reciente */
.dash-activity-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--border);
}
.dash-activity-item:last-child { border-bottom: none; }
.dash-activity-icon { font-size: 16px; flex-shrink: 0; margin-top: 1px; }
.dash-activity-info { flex: 1; min-width: 0; }
.dash-activity-text { font-size: 12.5px; color: var(--text); font-weight: 500; }
.dash-activity-detail { font-size: 11px; color: var(--text-2); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-activity-time { font-size: 11px; color: var(--text-3); flex-shrink: 0; font-variant-numeric: tabular-nums; }

/* Estados genéricos */
.dash-loading { font-size: 12.5px; color: var(--text-3); padding: 12px 0; }
.dash-error   { font-size: 12.5px; color: #c62828; padding: 12px 0; }
.dash-empty   { font-size: 12.5px; color: var(--text-3); padding: 12px 0; font-style: italic; }

@media (max-width: 900px) {
  .dashboard-metrics  { grid-template-columns: repeat(2, 1fr); }
  .dashboard-two-col  { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .dashboard-metrics  { grid-template-columns: 1fr 1fr; }
}

/* ─── AGENTES ────────────────────────────────────────────────────────────── */
#s-agentes { overflow:hidden; }
.agentes-layout { display:grid; grid-template-columns:300px 1fr; flex:1; height:100%; overflow:hidden; }

.agents-panel { background:var(--card); border-right:1px solid var(--border);
  display:flex; flex-direction:column; overflow:hidden; }
.agents-panel-header { display:flex; align-items:center; justify-content:space-between;
  padding:14px 14px 10px; border-bottom:1px solid var(--border); flex-shrink:0; }
.agents-panel-title { font-family:'Cormorant Garamond',serif; font-size:17px; font-weight:400; }
.agents-search-wrap { padding:10px 12px; border-bottom:1px solid var(--border); flex-shrink:0; }
.agents-search { width:100%; background:var(--bg); border:1px solid var(--border);
  border-radius:var(--r); padding:7px 12px; font-size:13px; color:var(--text); outline:none; }
.agents-search:focus { border-color:var(--accent); }
.agents-list { flex:1; overflow-y:auto; scrollbar-width:thin; scrollbar-color:var(--border2) transparent; }

.agent-item { display:flex; align-items:flex-start; gap:10px; padding:11px 13px;
  cursor:pointer; border-bottom:1px solid var(--border); transition:background var(--tr); border-left:3px solid transparent; }
.agent-item:hover { background:var(--hover); }
.agent-item.active { background:var(--accent-lt); border-left-color:var(--accent); }
.agent-item-emoji { font-size:20px; flex-shrink:0; width:32px; height:32px; display:flex;
  align-items:center; justify-content:center; background:var(--bg); border-radius:var(--r); }
.agent-item-body { flex:1; min-width:0; }
.agent-item-name { font-size:13px; font-weight:500; color:var(--text);
  display:flex; align-items:center; gap:6px; }
.agent-item.active .agent-item-name { color:var(--accent-dk); }
.agent-conv-count { background:var(--accent-lt); color:var(--accent-dk); border:1px solid var(--border);
  font-size:10px; font-weight:600; padding:1px 6px; border-radius:10px; line-height:1.4; }
.agent-item-desc { font-size:11.5px; color:var(--text-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.agent-item-last { font-size:11px; color:var(--text-3); margin-top:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.agent-item-ts   { color:var(--text-3); opacity:.7; }

/* Chat panel */
.chat-panel { display:flex; flex-direction:column; overflow:hidden; background:var(--bg); }

.chat-welcome { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:40px 24px; text-align:center; overflow-y:auto; }
.chat-welcome-mark  { font-family:'Cormorant Garamond',serif; font-size:40px; font-weight:300;
  color:var(--accent); margin-bottom:12px; }
.chat-welcome-title { font-family:'Cormorant Garamond',serif; font-size:22px; font-weight:300; margin-bottom:8px; }
.chat-welcome-sub   { font-size:13px; color:var(--text-2); margin-bottom:28px; }
.chat-agent-cards   { display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr));
  /* Bento-style: primeras 2 cards más anchas */
  gap:8px; width:100%; max-width:600px; }
.chat-agent-card    { background:var(--card); border:1px solid var(--border); border-radius:var(--r-lg);
  /* Staggered spring entry */
  animation:card-rise 0.5s cubic-bezier(0.32,0.72,0,1) both;
  padding:12px; cursor:pointer; text-align:left; transition:all var(--tr); }
.chat-agent-card:hover  { border-color:var(--accent); background:var(--accent-lt);
  transform:translateY(-2px); box-shadow:var(--shadow); }
.chat-agent-card:active { transform:scale(0.97); }
.chat-agent-card-emoji { font-size:18px; margin-bottom:5px; }
.chat-agent-card-name  { font-size:12px; font-weight:500; color:var(--text); }
.chat-agent-card-desc  { font-size:11px; color:var(--text-2); margin-top:2px; }

.chat-active { flex:1; display:flex; flex-direction:column; overflow:hidden; }
.chat-header { display:flex; align-items:center; justify-content:space-between;
  padding:12px 18px; border-bottom:1px solid var(--border); background:var(--card); flex-shrink:0; }
.chat-header-left { display:flex; align-items:center; gap:10px; }
.chat-header-emoji { font-size:22px; }
.chat-header-name  { font-size:14px; font-weight:500; }
.chat-header-desc  { font-size:11.5px; color:var(--text-2); }

.messages { flex:1; overflow-y:auto; padding:20px 24px;
  scrollbar-width:thin; scrollbar-color:var(--border2) transparent; display:flex; flex-direction:column; gap:0; }

.msg-user  { display:flex; justify-content:flex-end; margin-bottom:14px; }
.msg-agent { display:flex; gap:10px; margin-bottom:14px; align-items:flex-start; }
.msg-avatar{ width:28px; height:28px; border-radius:50%; background:var(--accent-lt); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center; font-size:14px; flex-shrink:0; margin-top:2px; }
/* User message bubble — pill shape, spring appear */
.msg-bubble-user  { background:var(--accent); color:#1a1208; padding:11px 16px;
  border-radius:18px 18px 4px 18px; max-width:70%; font-size:14px; line-height:1.5;
  animation:msg-in 0.35s cubic-bezier(0.32,0.72,0,1) both;
  box-shadow:0 2px 8px rgba(196,154,60,.25); }

@keyframes msg-in {
  from { opacity:0; transform:translateY(8px) scale(0.96); }
  to   { opacity:1; transform:translateY(0) scale(1); }
}
.msg-content-agent{ max-width:680px; font-size:14px; line-height:1.75; color:var(--text); }
.msg-content-agent p { margin-bottom:8px; }
.msg-content-agent p:last-child { margin-bottom:0; }
.msg-content-agent h1 { font-family:'Cormorant Garamond',serif; font-size:20px; margin:14px 0 6px; }
.msg-content-agent h2 { font-family:'Cormorant Garamond',serif; font-size:17px; margin:12px 0 5px; }
.msg-content-agent h3 { font-size:14px; font-weight:500; margin:10px 0 4px; color:var(--brown); }
.msg-content-agent strong { font-weight:500; }
.msg-content-agent ul,
.msg-content-agent ol  { padding-left:18px; margin-bottom:8px; }
.msg-content-agent li  { margin-bottom:3px; }
.msg-content-agent code{ font-family:monospace; font-size:12.5px; background:var(--hover);
  border:1px solid var(--border); border-radius:2px; padding:1px 5px; color:var(--brown); }
.msg-content-agent pre { background:var(--hover); border:1px solid var(--border); border-radius:var(--r);
  padding:12px 14px; overflow-x:auto; margin:8px 0; }
.msg-content-agent pre code { background:none; border:none; padding:0; }
.msg-content-agent hr  { border:none; border-top:1px solid var(--border); margin:12px 0; }
.msg-content-agent blockquote { border-left:3px solid var(--accent); padding-left:12px; color:var(--text-2); margin:8px 0; font-style:italic; }

.typing-indicator { display:flex; gap:4px; padding:10px 4px; align-items:center; }
.typing-indicator span { width:5px; height:5px; background:var(--text-3); border-radius:50%;
  animation:tdot 1.3s ease-in-out infinite; }
.typing-indicator span:nth-child(2) { animation-delay:.18s; }
.typing-indicator span:nth-child(3) { animation-delay:.36s; }
@keyframes tdot { 0%,80%,100%{transform:translateY(0);opacity:.4;} 40%{transform:translateY(-4px);opacity:1;} }

.chat-input-bar { padding:14px 18px; border-top:1px solid var(--border); background:var(--card);
  display:flex; gap:10px; align-items:flex-end; flex-shrink:0; }
#message-input { flex:1; background:var(--bg); border:1px solid var(--border2); border-radius:var(--r);
  padding:9px 13px; color:var(--text); resize:none; max-height:130px; outline:none;
  transition:border-color var(--tr); scrollbar-width:thin; }
#message-input:focus { border-color:var(--accent); }
#message-input::placeholder { color:var(--text-3); }
.chat-send-btn { width:36px; height:36px; background:var(--accent); border:none; border-radius:var(--r);
  display:flex; align-items:center; justify-content:center; cursor:pointer; color:#1a1208;
  flex-shrink:0; transition:background var(--tr); }
.chat-send-btn:hover { background:var(--accent-dk); color:#fff; }
.chat-send-btn:disabled { opacity:.45; cursor:not-allowed; }

/* ─── CLIENTES ───────────────────────────────────────────────────────────── */
.clients-layout { flex:1; display:grid; grid-template-columns:1fr; overflow:hidden; }
.clients-layout.panel-open { grid-template-columns:1fr 380px; }
.clients-layout .table-wrap { overflow:auto; padding:0 28px 28px; }

.client-side-panel { border-left:1px solid var(--border); background:var(--card);
  overflow-y:auto; padding:20px; scrollbar-width:thin; scrollbar-color:var(--border2) transparent; }
.csp-header { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:18px; }
.csp-avatar { width:44px; height:44px; border-radius:50%; background:var(--accent-lt);
  border:1px solid var(--border); display:flex; align-items:center; justify-content:center;
  font-family:'Cormorant Garamond',serif; font-size:18px; color:var(--accent-dk); flex-shrink:0; }
.csp-name   { font-family:'Cormorant Garamond',serif; font-size:18px; font-weight:400; }
.csp-prog   { font-size:12px; color:var(--text-2); }
.csp-field  { margin-bottom:13px; }
.csp-label  { font-size:10.5px; font-weight:500; text-transform:uppercase; letter-spacing:.7px;
  color:var(--text-3); margin-bottom:3px; }
.csp-value  { font-size:13.5px; color:var(--text); }
.csp-input  { width:100%; background:var(--bg); border:1px solid var(--border2); border-radius:var(--r);
  padding:7px 10px; color:var(--text); outline:none; transition:border-color var(--tr); }
.csp-input:focus { border-color:var(--accent); }
.csp-textarea { width:100%; background:var(--bg); border:1px solid var(--border2); border-radius:var(--r);
  padding:7px 10px; color:var(--text); outline:none; resize:vertical; min-height:60px;
  transition:border-color var(--tr); }
.csp-textarea:focus { border-color:var(--accent); }
.csp-section-title { font-size:11px; font-weight:500; text-transform:uppercase; letter-spacing:.7px;
  color:var(--text-3); margin:16px 0 8px; padding-top:14px; border-top:1px solid var(--border); }
.session-entry { background:var(--bg); border:1px solid var(--border); border-radius:var(--r);
  padding:10px 12px; margin-bottom:6px; }
.session-date { font-size:11px; color:var(--accent-dk); font-weight:500; margin-bottom:4px; }
.session-text { font-size:12.5px; color:var(--text-2); line-height:1.5; }
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:10px; }

/* ─── CALENDARIO ─────────────────────────────────────────────────────────── */
.cal-wrapper {
  flex:1; display:flex; flex-direction:column; overflow:hidden; min-height:0;
}
.cal-wrapper .gcal-status-bar {
  flex-shrink:0; margin:0; border-radius:0;
  border-left:none; border-right:none; border-top:none;
  padding:9px 28px;
}
.cal-wrapper .cal-legend {
  flex-shrink:0; margin:0; padding:6px 28px 7px;
  border-bottom:1px solid var(--border);
}
.cal-wrapper .cal-container { flex:1; overflow:hidden; min-height:0; }

.cal-nav-controls { display:flex; align-items:center; gap:6px; }
.cal-container { flex:1; overflow:hidden; display:flex; flex-direction:column; }
.cal-grid-wrap { flex:1; display:flex; overflow:hidden; }
.cal-times-col { width:56px; flex-shrink:0; border-right:1px solid var(--border);
  background:var(--card); overflow:hidden; }
.cal-times-header { height:52px; border-bottom:1px solid var(--border); }
.cal-time-label { height:60px; display:flex; align-items:flex-start; padding-top:6px;
  justify-content:flex-end; padding-right:10px; font-size:10.5px; color:var(--text-3); }
.cal-days-wrap { flex:1; overflow:auto; }
.cal-days-header { display:grid; height:52px; border-bottom:1px solid var(--border);
  background:var(--card); position:sticky; top:0; z-index:2; }
.cal-day-header-cell { display:flex; flex-direction:column; align-items:center; justify-content:center;
  border-right:1px solid var(--border); }
.cal-day-header-cell:last-child { border-right:none; }
.cal-day-name-s { font-size:10.5px; font-weight:500; text-transform:uppercase;
  letter-spacing:.5px; color:var(--text-2); }
.cal-day-num-s  { font-size:18px; font-weight:300; color:var(--text); line-height:1.2; font-family:'Cormorant Garamond',serif; }
.cal-day-header-cell.today .cal-day-num-s { color:var(--accent-dk); }
.cal-day-header-cell.today { background:rgba(196,154,60,.06); }

.cal-days-grid { display:grid; position:relative; }
.cal-day-col   { border-right:1px solid var(--border); position:relative; min-height:720px; }
.cal-day-col:last-child { border-right:none; }
.cal-hour-line { height:60px; border-bottom:1px solid rgba(237,224,200,.6); }

.cal-event-block { position:absolute; left:3px; right:3px; border-radius:2px;
  padding:3px 6px; cursor:pointer; transition:opacity var(--tr); min-height:22px; }
.cal-event-block:hover { opacity:.85; }
.cal-event-title { font-size:11px; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cal-event-time  { font-size:10px; opacity:.8; }

/* ─── FINANZAS ───────────────────────────────────────────────────────────── */
.fin-grid { display:grid; grid-template-columns:1fr 260px; gap:14px; padding:0 28px; }
.fin-chart-card { grid-column:auto; }
.mt-16 { margin:16px 28px 0; }
.prog-bar-wrap  { display:flex; flex-direction:column; gap:8px; }
.prog-bar-row   { display:flex; flex-direction:column; gap:3px; }
.prog-bar-label { display:flex; justify-content:space-between; font-size:12px; color:var(--text-2); }
.prog-bar-track { height:5px; background:var(--border); border-radius:2px; overflow:hidden; }
.prog-bar-fill  { height:100%; background:var(--accent); border-radius:2px; transition:width .4s ease; }

/* ─── META ADS ───────────────────────────────────────────────────────────── */
#s-metaads .metrics-row,
#s-metaads .card,
#s-metaads .tab-bar ~ * { padding-left:28px; padding-right:28px; }
#s-metaads .card { margin:0 28px; }
#s-metaads .card + .card { margin-top:14px; }
#s-metaads .metrics-row { padding:14px 28px; }

.swipe-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:10px; }
.swipe-card { background:var(--bg); border:1px solid var(--border); border-radius:var(--r);
  padding:13px; position:relative; }
.swipe-card-header { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:6px; }
.swipe-card-handle { font-size:12.5px; font-weight:500; color:var(--text); }
.swipe-card-type   { font-size:10.5px; color:var(--text-2); }
.swipe-card-note   { font-size:12px; color:var(--text-2); line-height:1.45; }
.swipe-card-date   { font-size:10px; color:var(--text-3); margin-top:6px; }
.swipe-del { position:absolute; top:8px; right:8px; background:none; border:none;
  color:var(--text-3); cursor:pointer; font-size:16px; line-height:1; transition:color var(--tr); }
.swipe-del:hover { color:var(--red-txt); }
.filter-select { background:var(--bg); border:1px solid var(--border2); border-radius:var(--r);
  padding:5px 10px; font-size:12px; color:var(--text); cursor:pointer; outline:none; }

/* ─── COMPETIDORES ───────────────────────────────────────────────────────── */
.compet-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:14px; padding:20px 28px; overflow-y:auto; }
.compet-card { background:var(--card); border:1px solid var(--border); border-radius:var(--r);
  box-shadow:var(--shadow-sm); padding:18px; cursor:pointer; transition:all var(--tr); position:relative; }
.compet-card:hover { border-color:var(--accent); transform:translateY(-1px); }
.compet-name   { font-family:'Cormorant Garamond',serif; font-size:17px; font-weight:400; margin-bottom:2px; }
.compet-handle { font-size:12px; color:var(--accent-dk); margin-bottom:12px; }
.compet-stats  { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.compet-stat   { background:var(--bg); border-radius:var(--r); padding:8px 10px; }
.compet-stat-label { font-size:10px; text-transform:uppercase; letter-spacing:.5px; color:var(--text-3); }
.compet-stat-value { font-size:15px; font-weight:500; color:var(--text); font-family:'Cormorant Garamond',serif; }
.compet-del { position:absolute; top:10px; right:10px; background:none; border:none;
  color:var(--text-3); cursor:pointer; font-size:18px; transition:color var(--tr); }
.compet-del:hover { color:var(--red-txt); }

/* ─── FUNNELS ────────────────────────────────────────────────────────────── */
.funnel-layout { flex:1; display:grid; grid-template-columns:420px 1fr; overflow:hidden; }
.funnel-wizard { display:flex; flex-direction:column; border-right:1px solid var(--border);
  background:var(--card); overflow:hidden; }
.funnel-steps  { display:flex; align-items:center; gap:0; padding:14px 20px;
  border-bottom:1px solid var(--border); flex-shrink:0; overflow-x:auto; }
.funnel-step-dot { width:22px; height:22px; border-radius:50%; display:flex; align-items:center;
  justify-content:center; font-size:10px; font-weight:600; flex-shrink:0; transition:all var(--tr); }
.funnel-step-dot.done   { background:var(--accent);    color:#1a1208; }
.funnel-step-dot.active { background:var(--accent-lt); border:2px solid var(--accent); color:var(--accent-dk); }
.funnel-step-dot.pending{ background:var(--bg);        border:1px solid var(--border2); color:var(--text-3); }
.funnel-step-line { flex:1; height:1px; background:var(--border2); max-width:24px; }

.funnel-body { flex:1; overflow-y:auto; padding:20px; scrollbar-width:thin; scrollbar-color:var(--border2) transparent; }
.funnel-step { display:none; }
.funnel-step.active { display:block; }
.step-h { font-family:'Cormorant Garamond',serif; font-size:20px; font-weight:300; margin-bottom:14px; }

.radio-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:16px; }
.radio-card { cursor:pointer; }
.radio-card input { display:none; }
.radio-inner { display:flex; flex-direction:column; align-items:center; gap:6px;
  padding:12px 8px; background:var(--bg); border:1px solid var(--border2); border-radius:var(--r);
  font-size:12px; color:var(--text-2); text-align:center; transition:all var(--tr); }
.radio-inner span:first-child { font-size:20px; }
.radio-card input:checked + .radio-inner { border-color:var(--accent); background:var(--accent-lt); color:var(--text); }

.field-block { display:block; font-size:12px; color:var(--text-2); font-weight:500; margin-bottom:12px; }
.field-input { display:block; margin-top:5px; width:100%; background:var(--bg); border:1px solid var(--border2);
  border-radius:var(--r); color:var(--text); padding:8px 11px; outline:none; transition:border-color var(--tr); }
.field-input:focus { border-color:var(--accent); }
.field-input[rows] { resize:vertical; }
.mt12 { margin-top:12px; }

.dyn-list { display:flex; flex-direction:column; gap:5px; margin-top:5px; }
.dyn-line  { display:flex; gap:6px; align-items:center; }
.dyn-line input { flex:1; background:var(--bg); border:1px solid var(--border2);
  border-radius:var(--r); color:var(--text); padding:7px 10px; outline:none; transition:border-color var(--tr); }
.dyn-line input:focus { border-color:var(--accent); }
.dyn-remove { background:none; border:none; color:var(--text-3); cursor:pointer;
  font-size:17px; line-height:1; transition:color var(--tr); }
.dyn-remove:hover { color:var(--red-txt); }
.btn-add-line { background:none; border:1px dashed var(--border2); border-radius:var(--r);
  color:var(--text-2); font-size:12px; padding:6px 12px; cursor:pointer; margin-top:5px;
  transition:all var(--tr); }
.btn-add-line:hover { border-color:var(--accent); color:var(--accent); }

.testimonio-card { background:var(--bg); border:1px solid var(--border); border-radius:var(--r);
  padding:12px; margin-bottom:8px; }
.tcard-row { display:flex; gap:8px; margin-bottom:7px; }
.tcard-row input { flex:1; background:var(--card); border:1px solid var(--border);
  border-radius:var(--r); color:var(--text); padding:6px 9px; outline:none; font-size:12px; }
.tcard-del { background:none; border:none; color:var(--text-3); cursor:pointer; font-size:17px; transition:color var(--tr); }
.tcard-del:hover { color:var(--red-txt); }
.tcard-textarea { width:100%; background:var(--card); border:1px solid var(--border);
  border-radius:var(--r); color:var(--text); padding:7px 9px; resize:none; font-size:12px; outline:none; }

/* ─── Landing Builder — Vista Input ──────────────────────────────────────── */
.fl-input-view { display:flex; flex-direction:column; flex:1; overflow:hidden; }
.fl-input-area { flex:1; overflow-y:auto; padding:24px 40px 40px;
  display:flex; flex-direction:column; gap:20px; max-width:820px; width:100%; }

.fl-prompt-textarea { width:100%; min-height:180px; background:var(--card);
  border:1px solid var(--border); border-radius:var(--r); color:var(--text);
  font-family:'DM Sans',sans-serif; font-size:14px; padding:16px 18px; outline:none;
  resize:vertical; line-height:1.65; transition:border-color var(--tr);
  box-shadow:var(--shadow-sm); }
.fl-prompt-textarea:focus { border-color:var(--accent); }
.fl-prompt-textarea::placeholder { color:var(--text-3); }

.fl-opts-row { display:flex; flex-direction:column; gap:12px; }
.fl-opt-group { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.fl-opt-label { font-size:10.5px; font-weight:600; letter-spacing:.8px; text-transform:uppercase;
  color:var(--text-3); min-width:64px; }
.fl-chips { display:flex; gap:7px; flex-wrap:wrap; }
.fl-chip { background:var(--card); border:1px solid var(--border2); border-radius:20px;
  padding:5px 13px; font-size:12.5px; color:var(--text-2); cursor:pointer;
  transition:all var(--tr); }
.fl-chip:hover { border-color:var(--accent); color:var(--accent); }
.fl-chip.active { background:var(--accent); border-color:var(--accent); color:#1a1208; font-weight:500; }

.fl-generate-btn { background:var(--accent); color:#1a1208; border:none; border-radius:var(--r);
  padding:14px 32px; font-size:15px; font-weight:600; cursor:pointer;
  transition:background var(--tr), transform .1s; align-self:flex-start; }
.fl-generate-btn:hover { background:var(--accent-dk); color:#fff; }
.fl-generate-btn:active { transform:scale(.97); }
.fl-generate-btn:disabled { opacity:.5; cursor:not-allowed; }

/* ─── Landing Builder — Skeleton ─────────────────────────────────────────── */
.fl-skeleton-view { flex:1; display:flex; align-items:center; justify-content:center; }
.fl-skeleton-inner { text-align:center; max-width:400px; }
.fl-skeleton-spinner { width:40px; height:40px; border:3px solid var(--border2);
  border-top-color:var(--accent); border-radius:50%; animation:spin .8s linear infinite;
  margin:0 auto 20px; }
.fl-skeleton-title { font-family:'Cormorant Garamond',serif; font-size:22px; font-weight:300;
  color:var(--text); margin-bottom:6px; }
.fl-skeleton-sub { font-size:13px; color:var(--text-3); margin-bottom:24px; }
.fl-skeleton-bars { display:flex; flex-direction:column; gap:8px; }
.fl-skel-bar { height:10px; background:linear-gradient(90deg, var(--border) 25%, var(--hover) 50%, var(--border) 75%);
  background-size:200% 100%; border-radius:2px; animation:shimmer 1.5s infinite; }
@keyframes shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

/* ─── Landing Builder — Builder view ─────────────────────────────────────── */
.fl-builder-view { display:flex; flex-direction:column; flex:1; overflow:hidden; }

.fl-builder-topbar { display:flex; align-items:center; justify-content:space-between;
  padding:10px 18px; border-bottom:1px solid var(--border); background:var(--card);
  flex-shrink:0; gap:12px; flex-wrap:wrap; }
.fl-builder-topbar-left  { display:flex; align-items:center; gap:10px; flex:1; min-width:0; }
.fl-builder-topbar-right { display:flex; align-items:center; gap:8px; flex-shrink:0; }

.fl-version-pills { display:flex; gap:5px; flex-wrap:wrap; }
.fl-version-pill { background:var(--bg); border:1px solid var(--border2); border-radius:20px;
  padding:3px 10px; font-size:11.5px; color:var(--text-2); cursor:pointer;
  transition:all var(--tr); font-family:'DM Sans',sans-serif; }
.fl-version-pill:hover { border-color:var(--accent); color:var(--accent); }
.fl-version-pill.active { background:var(--accent); border-color:var(--accent);
  color:#1a1208; font-weight:600; }

.fl-view-toggle { display:flex; background:var(--bg); border:1px solid var(--border2);
  border-radius:var(--r); overflow:hidden; }
.fl-view-btn { background:none; border:none; padding:5px 12px; font-size:12.5px;
  color:var(--text-2); cursor:pointer; transition:all var(--tr); }
.fl-view-btn.active { background:var(--accent); color:#1a1208; font-weight:500; }

.fl-builder-layout { flex:1; min-height:0; display:grid; grid-template-columns:340px 1fr; grid-template-rows:1fr; overflow:hidden; }

/* Editor panel */
.fl-editor-panel { border-right:1px solid var(--border); background:var(--card);
  display:flex; flex-direction:column; overflow-y:auto; gap:0;
  scrollbar-width:thin; scrollbar-color:var(--border2) transparent; }
.fl-editor-section { padding:16px 18px; border-bottom:1px solid var(--border); }
.fl-editor-label { font-size:10.5px; font-weight:600; letter-spacing:.8px; text-transform:uppercase;
  color:var(--text-3); margin-bottom:9px; }
.fl-editor-textarea { width:100%; min-height:120px; background:var(--bg); border:1px solid var(--border2);
  border-radius:var(--r); color:var(--text); font-family:'DM Sans',sans-serif; font-size:12.5px;
  padding:9px 11px; outline:none; resize:vertical; line-height:1.6;
  transition:border-color var(--tr); }
.fl-editor-textarea:focus { border-color:var(--accent); }

.fl-refine-chips { display:flex; flex-wrap:wrap; gap:5px; margin-bottom:10px; }
.fl-refine-chip { background:var(--bg); border:1px solid var(--border2); border-radius:20px;
  padding:4px 11px; font-size:11.5px; color:var(--text-2); cursor:pointer;
  transition:all var(--tr); }
.fl-refine-chip:hover { border-color:var(--accent); color:var(--accent); }

.fl-refine-input-row { display:flex; gap:7px; }
.fl-refine-input { flex:1; background:var(--bg); border:1px solid var(--border2);
  border-radius:var(--r); color:var(--text); padding:7px 11px; font-size:13px; outline:none;
  transition:border-color var(--tr); }
.fl-refine-input:focus { border-color:var(--accent); }

/* Preview panel */
/* Autosave badge */
.fl-autosave-badge { font-size:11.5px; font-weight:500; color:#2e7d32; background:#e8f5e9;
  border:1px solid #b8e6c8; border-radius:100px; padding:3px 10px; white-space:nowrap;
  transition:opacity var(--tr); }
.fl-autosave-badge.hidden { display:none; }

.fl-preview-panel { display:flex; flex-direction:column; overflow:hidden; background:#e8e0d4; }
.fl-iframe-container { flex:1; display:flex; justify-content:center; overflow:hidden;
  padding:0; transition:all .3s ease; position:relative; }

/* Code editor */
.fl-code-editor-wrap { display:flex; flex-direction:column; flex:1; overflow:hidden; background:var(--sidebar-bg); }
.fl-code-editor-wrap.hidden { display:none; }
.fl-code-editor-toolbar { display:flex; align-items:center; justify-content:space-between;
  padding:8px 12px; border-bottom:1px solid rgba(255,255,255,.08); flex-shrink:0; }
.fl-code-editor-label { font-size:12px; font-weight:500; color:rgba(255,255,255,.6); }
.fl-code-editor { flex:1; border:none; outline:none; resize:none; padding:14px;
  font-family:'Monaco','Menlo','Courier New',monospace; font-size:12px; line-height:1.6;
  background:#0f0f10; color:#e8e0d0; tab-size:2; }
.fl-code-editor-toolbar .btn-secondary { background:transparent; color:rgba(255,255,255,.6);
  border-color:rgba(255,255,255,.15); }
.fl-code-editor-toolbar .btn-secondary:hover { border-color:var(--accent); color:var(--accent); }
.fl-code-editor-toolbar .btn-ghost { color:rgba(255,255,255,.4); }
.fl-code-editor-toolbar .btn-ghost:hover { background:rgba(255,255,255,.06); color:rgba(255,255,255,.8); }
.fl-code-btn.active { color:var(--accent); background:var(--accent-lt); }

/* Version history panel */
.fl-version-history-panel { background:#1a1a1b; border-top:1px solid rgba(255,255,255,.08);
  padding:10px 12px; flex-shrink:0; max-height:140px; overflow-y:auto; }
.fl-version-history-panel.hidden { display:none; }
.fl-vh-label { font-size:9.5px; font-weight:600; letter-spacing:.8px; text-transform:uppercase;
  color:rgba(255,255,255,.3); margin-bottom:8px; }
.fl-vh-row { display:flex; align-items:center; gap:10px; padding:4px 0;
  border-bottom:1px solid rgba(255,255,255,.05); }
.fl-vh-row:last-child { border-bottom:none; }
.fl-vh-ver  { font-size:11px; font-weight:600; color:var(--accent); width:24px; flex-shrink:0; }
.fl-vh-date { font-size:11px; color:rgba(255,255,255,.4); flex:1; }

/* Editable name in drawer */
.hdrawer-item-name { cursor:pointer; }
.hdrawer-item-name:hover span { text-decoration:underline; text-decoration-style:dashed; }
.hdrawer-name-input { background:transparent; border:none; border-bottom:1px solid var(--accent);
  outline:none; font-size:13px; font-weight:500; color:var(--text); width:100%;
  padding:0 0 2px; font-family:inherit; }
.fl-iframe-container.desktop { align-items:stretch; }
.fl-iframe-container.mobile  { align-items:center; background:#c8bfb0; padding:20px; }

.fl-preview-iframe { border:none; width:100%; height:100%;
  background:#fff; transition:width .3s ease, box-shadow .3s ease; }
.fl-iframe-container.mobile .fl-preview-iframe {
  width:375px; height:100%; flex-shrink:0;
  border:1px solid var(--border); border-radius:6px;
  box-shadow:0 8px 40px rgba(0,0,0,.2), 0 0 0 1px var(--border2); }

/* ─── CONTENIDO ──────────────────────────────────────────────────────────── */
.contenido-wrap { flex:1; overflow-y:auto; padding:20px 28px; }
.weekly-plan-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:10px; }
.day-col-header { font-size:11px; font-weight:500; text-transform:uppercase; letter-spacing:.6px;
  color:var(--text-2); margin-bottom:8px; text-align:center; }
.content-slot { background:var(--card); border:1px solid var(--border); border-radius:var(--r);
  padding:10px; margin-bottom:8px; min-height:80px; cursor:pointer; transition:all var(--tr); }
.content-slot:hover { border-color:var(--accent); }
.content-slot-label { font-size:9.5px; font-weight:500; text-transform:uppercase; letter-spacing:.5px;
  color:var(--text-3); margin-bottom:5px; }
.content-slot-title { font-size:12px; color:var(--text); line-height:1.4; }
.content-slot-type  { font-size:10.5px; color:var(--accent-dk); margin-top:4px; }
.content-slot.empty { background:var(--bg); border-style:dashed; }
.content-slot.empty .content-slot-title { color:var(--text-3); font-style:italic; }

/* ─── PROYECTOS / KANBAN ─────────────────────────────────────────────────── */
.kanban-board { flex:1; display:grid; grid-template-columns:repeat(3,1fr);
  gap:14px; padding:20px 28px; overflow:hidden; align-items:start; }
.kanban-col   { background:var(--card); border:1px solid var(--border); border-radius:var(--r);
  min-height:200px; max-height:calc(100vh - 180px); display:flex; flex-direction:column; }
.kanban-col.drag-over { border-color:var(--accent); background:var(--accent-lt); }
.kanban-col-header { display:flex; align-items:center; justify-content:space-between;
  padding:12px 14px; border-bottom:1px solid var(--border); flex-shrink:0; }
.kanban-col-title  { font-size:13px; font-weight:500; color:var(--text); }
.kanban-col-count  { font-size:11.5px; font-weight:500; background:var(--bg);
  border:1px solid var(--border); border-radius:2px; padding:2px 7px; color:var(--text-2); }
.kanban-cards { flex:1; overflow-y:auto; padding:8px; display:flex; flex-direction:column; gap:6px;
  scrollbar-width:thin; scrollbar-color:var(--border2) transparent; }
.kanban-card  { background:var(--bg); border:1px solid var(--border); border-radius:var(--r);
  padding:11px 12px; cursor:grab; transition:box-shadow var(--tr), border-color var(--tr); user-select:none; }
.kanban-card:hover { box-shadow:var(--shadow-sm); border-color:var(--border2); }
.kanban-card.dragging { opacity:.5; cursor:grabbing; }
.kcard-title    { font-size:13px; font-weight:500; color:var(--text); margin-bottom:4px; line-height:1.35; }
.kcard-desc     { font-size:11.5px; color:var(--text-2); line-height:1.4; margin-bottom:8px; }
.kcard-footer   { display:flex; align-items:center; justify-content:space-between; }
.kcard-date     { font-size:10.5px; color:var(--text-3); }
.kcard-actions  { display:flex; gap:5px; }
.kcard-btn      { background:none; border:none; color:var(--text-3); cursor:pointer;
  font-size:13px; padding:2px; transition:color var(--tr); }
.kcard-btn:hover { color:var(--accent-dk); }
.kcard-del      { color:var(--text-3); }
.kcard-del:hover{ color:var(--red-txt); }

/* ─── COMPETIDORES v3 ─── Creator Tracker ───────────────────────────────── */
#s-competidores { display:flex; flex-direction:column; background:#f9f8f6;
  overflow:hidden; padding:0; }

/* Header bar */
.compet-header { display:flex; align-items:center; justify-content:space-between;
  padding:18px 24px 0; flex-shrink:0; }

/* Tabs */
.compet-tabs { display:flex; gap:4px; }
.compet-tab { background:none; border:none; font-family:'DM Sans',sans-serif; font-size:13.5px;
  font-weight:500; color:#888; padding:8px 16px; border-radius:20px; cursor:pointer;
  transition:all .2s; border-bottom:2px solid transparent; }
.compet-tab:hover { color:#1a1208; background:rgba(196,154,60,.08); }
.compet-tab.active { color:#c49a3c; border-bottom-color:#c49a3c; background:rgba(196,154,60,.08); }

/* Add button */
.compet-add-btn { background:#1a1208; color:#f7f0e4; border:none; font-family:'DM Sans',sans-serif;
  font-size:13px; font-weight:500; padding:8px 18px; border-radius:20px; cursor:pointer;
  transition:background .2s; white-space:nowrap; }
.compet-add-btn:hover { background:#2d2010; }

/* Tab content */
.compet-tab-content { display:none; flex:1; overflow-y:auto; padding:20px 24px;
  scrollbar-width:thin; scrollbar-color:rgba(0,0,0,.1) transparent; }
.compet-tab-content.active { display:block; }

/* Free text areas (Feed / Hook Library) */
.compet-free-text { width:100%; min-height:calc(100vh - 180px); background:#fff;
  border:1px solid #e8e4dc; border-radius:12px; padding:20px; font-family:'DM Sans',sans-serif;
  font-size:14px; line-height:1.7; color:#1a1208; resize:none; outline:none;
  box-shadow:0 1px 4px rgba(0,0,0,.06); transition:border-color .2s; }
.compet-free-text:focus { border-color:#c49a3c; }

/* Creators grid */
.creators-grid { display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:16px; }

/* Creator card */
.creator-card { background:#fff; border:1px solid #e8e4dc; border-radius:14px;
  padding:0; box-shadow:0 1px 6px rgba(0,0,0,.07); position:relative;
  transition:box-shadow .2s, transform .15s; overflow:hidden; display:flex; flex-direction:column; }
.creator-card:hover { box-shadow:0 4px 16px rgba(0,0,0,.11); transform:translateY(-1px); }

/* Delete button */
.card-delete-btn { position:absolute; top:8px; right:8px; background:rgba(255,255,255,.9);
  border:1px solid #e0dbd0; border-radius:50%; width:24px; height:24px; display:none;
  align-items:center; justify-content:center; cursor:pointer; font-size:14px; color:#888;
  transition:all .15s; z-index:2; line-height:1; }
.creator-card:hover .card-delete-btn { display:flex; }
.card-delete-btn:hover { background:#fff0f0; color:#c0392b; border-color:#e8c0c0; }

/* Image zone */
.card-image-zone { width:100%; aspect-ratio:4/3; background:#f2ede6; position:relative;
  cursor:pointer; overflow:hidden; flex-shrink:0; }
.card-image-zone.drag-over { background:#ede8df; outline:2px dashed #c49a3c; outline-offset:-4px; }
.card-screenshot { width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .3s; }
.creator-card:hover .card-screenshot { transform:scale(1.02); }
.card-initial-circle { width:56px; height:56px; border-radius:50%; background:#c49a3c;
  display:flex; align-items:center; justify-content:center; font-size:22px; font-weight:700;
  color:#fff; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  font-family:'DM Sans',sans-serif; }
.card-drop-hint { position:absolute; bottom:8px; left:50%; transform:translateX(-50%);
  background:rgba(26,18,8,.55); color:#fff; font-size:10px; font-weight:500;
  padding:3px 9px; border-radius:10px; white-space:nowrap; opacity:0; transition:opacity .2s; }
.card-image-zone:hover .card-drop-hint { opacity:1; }

/* Card body */
.card-body { padding:12px 14px 14px; display:flex; flex-direction:column; gap:4px; flex:1; }
.card-handle { font-family:'DM Sans',sans-serif; font-size:13px; font-weight:700;
  color:#c49a3c; letter-spacing:.2px; }
.card-name { font-family:'DM Sans',sans-serif; font-size:12.5px; font-weight:500;
  color:#1a1208; line-height:1.3; }
.card-bio { font-family:'DM Sans',sans-serif; font-size:11.5px; color:#888; line-height:1.5;
  margin-top:2px; outline:none; min-height:32px; cursor:text; border-radius:4px;
  transition:background .15s; }
.card-bio:hover { background:#f7f4ef; }
.card-bio:focus { background:#f7f4ef; }
.card-bio:empty:before { content:attr(data-placeholder); color:#bbb; pointer-events:none; }

/* Metrics 2x2 grid */
.card-metrics { display:grid; grid-template-columns:1fr 1fr; gap:1px;
  background:#ece8e0; border-radius:8px; overflow:hidden; margin-top:8px; }
.metric-cell { background:#fff; display:flex; flex-direction:column; align-items:center;
  justify-content:center; padding:8px 4px; gap:2px; }
.metric-val { font-family:'DM Sans',sans-serif; font-size:14px; font-weight:700;
  color:#1a1208; line-height:1; cursor:pointer; border-radius:4px; padding:1px 4px;
  transition:background .15s; outline:none; min-width:24px; text-align:center; }
.metric-val:hover { background:#f7f4ef; }
.metric-val:focus { background:#f7f4ef; outline:1px solid #c49a3c; }
.metric-label { font-family:'DM Sans',sans-serif; font-size:9px; font-weight:600;
  text-transform:uppercase; letter-spacing:.8px; color:#aaa; }

/* Card footer */
.card-footer { display:flex; align-items:center; justify-content:space-between;
  margin-top:10px; padding-top:8px; border-top:1px solid #f0ece4; }
.card-scraped { font-size:10.5px; color:#bbb; font-family:'DM Sans',sans-serif; }
.card-view-posts { background:none; border:none; font-family:'DM Sans',sans-serif;
  font-size:11.5px; color:#c49a3c; font-weight:600; cursor:pointer; padding:0;
  transition:color .15s; }
.card-view-posts:hover { color:#8b5e2d; }

/* Scrape button */
.card-scrape-btn { margin:0 14px 12px; background:none; border:1px solid #e0dbd0;
  border-radius:8px; font-family:'DM Sans',sans-serif; font-size:11px; font-weight:500;
  color:#888; padding:6px; cursor:pointer; transition:all .15s; width:calc(100% - 28px); }
.card-scrape-btn:hover { background:#f7f4ef; color:#1a1208; border-color:#c49a3c; }

/* Add creator modal */
.compet-modal { position:fixed; inset:0; background:rgba(26,18,8,.45); display:flex;
  align-items:center; justify-content:center; z-index:200; backdrop-filter:blur(3px); }
.compet-modal.hidden { display:none; }
.compet-modal-box { background:#fff; border-radius:16px; padding:28px 28px 24px;
  width:380px; box-shadow:0 8px 40px rgba(0,0,0,.18); }
.compet-modal-title { font-family:'Cormorant Garamond',serif; font-size:22px; font-weight:400;
  color:#1a1208; margin-bottom:16px; }
.compet-modal-input { width:100%; border:1px solid #ddd; border-radius:10px; padding:10px 14px;
  font-family:'DM Sans',sans-serif; font-size:14px; color:#1a1208; outline:none;
  transition:border-color .2s; }
.compet-modal-input:focus { border-color:#c49a3c; }
.compet-modal-actions { display:flex; gap:8px; justify-content:flex-end; margin-top:16px; }
.compet-modal-cancel { background:none; border:1px solid #e0dbd0; border-radius:8px;
  font-family:'DM Sans',sans-serif; font-size:13px; color:#888; padding:8px 16px; cursor:pointer; }
.compet-modal-cancel:hover { background:#f7f4ef; }
.compet-modal-confirm { background:#1a1208; border:none; border-radius:8px;
  font-family:'DM Sans',sans-serif; font-size:13px; font-weight:600; color:#f7f0e4;
  padding:8px 20px; cursor:pointer; transition:background .2s; }
.compet-modal-confirm:hover { background:#2d2010; }

/* Fullscreen image overlay */
.compet-img-overlay { position:fixed; inset:0; background:rgba(0,0,0,.85); display:flex;
  align-items:center; justify-content:center; z-index:300; cursor:zoom-out; }
.compet-img-overlay.hidden { display:none; }
.compet-img-overlay img { max-width:92vw; max-height:92vh; border-radius:8px;
  box-shadow:0 8px 60px rgba(0,0,0,.6); }

/* Empty state */
.creators-empty { grid-column:1/-1; display:flex; flex-direction:column; align-items:center;
  justify-content:center; padding:80px 40px; color:#bbb; text-align:center; gap:12px; }
.creators-empty-icon { font-size:48px; opacity:.4; }
.creators-empty-title { font-family:'Cormorant Garamond',serif; font-size:20px; color:#999; }
.creators-empty-desc { font-size:13px; line-height:1.6; max-width:300px; }

/* Responsive */
@media (max-width:1400px) { .creators-grid { grid-template-columns:repeat(4,1fr); } }
@media (max-width:1100px) { .creators-grid { grid-template-columns:repeat(3,1fr); } }
@media (max-width:750px)  { .creators-grid { grid-template-columns:repeat(2,1fr); } }

/* ─── INFORMES ───────────────────────────────────────────────────────────── */
.informes-charts { display:grid; grid-template-columns:1fr 1fr; gap:14px; padding:0 28px 28px; }

/* ─── MODAL ──────────────────────────────────────────────────────────────── */
.modal-overlay { position:fixed; inset:0; background:rgba(26,18,8,.5); display:flex;
  align-items:center; justify-content:center; z-index:100; backdrop-filter:blur(3px); }
.modal-overlay.hidden { display:none; }
.modal-box { background:var(--card); border:1px solid var(--border2); border-radius:var(--r);
  box-shadow:var(--shadow); max-width:500px; width:92%; max-height:86vh; overflow-y:auto;
  padding:26px; position:relative; scrollbar-width:thin; }
.modal-close { position:absolute; top:12px; right:12px; background:var(--hover); border:none;
  border-radius:50%; width:24px; height:24px; display:flex; align-items:center; justify-content:center;
  cursor:pointer; color:var(--text-2); transition:all var(--tr); }
.modal-close:hover { background:var(--border); color:var(--text); }
.modal-title { font-family:'Cormorant Garamond',serif; font-size:20px; font-weight:400; margin-bottom:18px; }
.modal-field { margin-bottom:13px; }
.modal-field label { display:block; font-size:11.5px; font-weight:500; color:var(--text-2); margin-bottom:4px; }
.modal-field input,
.modal-field select,
.modal-field textarea { width:100%; background:var(--bg); border:1px solid var(--border2);
  border-radius:var(--r); color:var(--text); padding:8px 11px; outline:none; transition:border-color var(--tr); }
.modal-field input:focus,
.modal-field select:focus,
.modal-field textarea:focus { border-color:var(--accent); }
.modal-field select { cursor:pointer; }
.modal-field textarea { resize:vertical; }
.modal-row { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.modal-actions { display:flex; gap:8px; justify-content:flex-end; margin-top:18px; }

/* ─── Utility ────────────────────────────────────────────────────────────── */
.hidden { display:none !important; }
.mt8  { margin-top:8px; }
.mt12 { margin-top:12px; }

/* ─── Finanzas — clientes activos ────────────────────────────────────────── */
.fin-mrr-badge { font-size:13px; font-weight:600; color:var(--accent-dk);
  background:var(--accent-lt); border:1px solid var(--border); border-radius:var(--r);
  padding:3px 10px; }
.fin-client-row { display:grid; grid-template-columns:1fr 160px 110px 90px 80px;
  align-items:center; padding:11px 18px; border-bottom:1px solid var(--border);
  transition:background var(--tr); gap:12px; }
.fin-client-row:last-child { border-bottom:none; }
.fin-client-row:hover { background:var(--hover); }
.fin-client-row-header { font-size:10.5px; font-weight:500; text-transform:uppercase;
  letter-spacing:.7px; color:var(--text-2); padding:9px 18px;
  border-bottom:1px solid var(--border); display:grid;
  grid-template-columns:1fr 160px 110px 90px 80px; gap:12px; }
.fin-client-name { font-size:13.5px; font-weight:500; color:var(--text); }
.fin-client-prog { font-size:12px; color:var(--text-2); }
.fin-client-pago { font-size:15px; font-weight:600; color:var(--accent-dk);
  font-family:'Cormorant Garamond',serif; text-align:right; }
.fin-client-estado { text-align:center; }
.fin-client-sessions { font-size:12px; color:var(--text-3); text-align:right; }

/* ─── Transcript button ──────────────────────────────────────────────────── */
.chat-transcript-bar { padding:8px 18px 12px; border-top:1px solid var(--border);
  background:var(--card); flex-shrink:0; }
.btn-transcript { background:var(--accent-lt); border:1px solid var(--border2);
  color:var(--accent-dk); border-radius:var(--r); padding:7px 14px; font-size:12.5px;
  font-weight:500; cursor:pointer; width:100%; text-align:left; transition:all var(--tr); }
.btn-transcript:hover { border-color:var(--accent); background:rgba(196,154,60,.18); }

/* ─── Transcript modal textarea ──────────────────────────────────────────── */
.transcript-area { width:100%; min-height:300px; background:var(--bg); border:1px solid var(--border2);
  border-radius:var(--r); color:var(--text); font-family:var(--font); font-size:13px;
  padding:12px 14px; outline:none; resize:vertical; transition:border-color var(--tr);
  line-height:1.6; }
.transcript-area:focus { border-color:var(--accent); }
.transcript-area::placeholder { color:var(--text-3); }

/* ─── Análisis de transcript ─────────────────────────────────────────────── */
.analysis-card { background:var(--card); border:1px solid var(--border);
  border-radius:var(--r); box-shadow:var(--shadow-sm); margin-bottom:12px; overflow:hidden; }
.analysis-card-header { display:flex; align-items:center; gap:10px; padding:12px 16px;
  background:var(--hover); border-bottom:1px solid var(--border); }
.analysis-card-icon { font-size:16px; }
.analysis-card-title { font-size:13px; font-weight:600; color:var(--text); }
.analysis-card-body { padding:14px 16px; font-size:13px; color:var(--text-2); line-height:1.6; }

.problema-tag { display:inline-flex; align-items:center; gap:5px; padding:4px 10px;
  border-radius:2px; font-size:12px; font-weight:500; margin:3px; }
.problema-alta   { background:#ffebee; color:#c62828; }
.problema-media  { background:#fff8e1; color:#f57f17; }
.problema-baja   { background:#e8f5e9; color:#2e7d32; }

.insight-item { background:var(--hover); border-left:3px solid var(--accent);
  border-radius:0 var(--r) var(--r) 0; padding:8px 12px; margin-bottom:6px;
  font-size:13px; color:var(--text); font-style:italic; line-height:1.5; }

.paso-item { display:flex; align-items:flex-start; gap:8px; padding:5px 0;
  font-size:13px; color:var(--text-2); }
.paso-item::before { content:'→'; color:var(--accent); font-weight:600; flex-shrink:0; }

/* ─── Patrones identificados (ficha cliente) ─────────────────────────────── */
.patron-tag { display:inline-flex; align-items:center; gap:6px; padding:5px 11px;
  border-radius:2px; font-size:12px; font-weight:500; margin:3px; cursor:default;
  position:relative; transition:opacity var(--tr); }
.patron-tag:hover { opacity:.85; }
.patron-tag .patron-frec { background:rgba(0,0,0,.12); border-radius:2px;
  padding:1px 5px; font-size:10px; }
.patron-tooltip { position:absolute; bottom:calc(100% + 6px); left:0;
  background:var(--text); color:var(--card); font-size:11.5px; padding:6px 10px;
  border-radius:var(--r); white-space:nowrap; max-width:260px; white-space:normal;
  line-height:1.4; z-index:10; pointer-events:none; opacity:0; transition:opacity .15s; }
.patron-tag:hover .patron-tooltip { opacity:1; }

/* ─── Biblioteca de Ideas ────────────────────────────────────────────────── */
.bib-tab { position:relative; }
.bib-badge { background:var(--accent); color:#1a1208; font-size:10px; font-weight:700;
  padding:1px 6px; border-radius:10px; margin-left:5px; vertical-align:middle; }

.biblioteca-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:14px; padding:20px 28px; overflow-y:auto; flex:1;
  scrollbar-width:thin; scrollbar-color:var(--border2) transparent; }

.bib-card { background:var(--card); border:1px solid var(--border); border-radius:var(--r);
  box-shadow:var(--shadow-sm); padding:16px; display:flex; flex-direction:column; gap:10px;
  transition:all var(--tr); }
.bib-card:hover { border-color:var(--accent); transform:translateY(-1px); }

.bib-card-badges { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }

.fmt-reel     { background:#fce4ec; color:#880e4f; font-size:10.5px; font-weight:700;
  padding:3px 8px; border-radius:2px; }
.fmt-carrusel { background:#e3f2fd; color:#1565c0; font-size:10.5px; font-weight:700;
  padding:3px 8px; border-radius:2px; }
.fmt-youtube  { background:#ffebee; color:#c62828; font-size:10.5px; font-weight:700;
  padding:3px 8px; border-radius:2px; }

.badge-nuevo { background:var(--accent); color:#1a1208; font-size:10px; font-weight:700;
  padding:2px 7px; border-radius:2px; }
.badge-usado { background:var(--gray-bg); color:var(--gray-txt); font-size:10px;
  font-weight:600; padding:2px 7px; border-radius:2px; }

.bib-card-tema  { font-family:'Cormorant Garamond',serif; font-size:16px; font-weight:400;
  color:var(--text); line-height:1.3; }
.bib-card-angulo { font-size:12.5px; color:var(--text-2); line-height:1.5; }
.bib-card-fecha { font-size:11px; color:var(--text-3); }
.bib-card-actions { display:flex; gap:8px; margin-top:4px; }

.bib-empty { display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:12px; padding:60px 28px; color:var(--text-3); text-align:center; flex:1; }
.bib-empty-icon { font-size:36px; opacity:.4; }
.bib-empty-title { font-size:15px; color:var(--text-2); font-family:'Cormorant Garamond',serif; }
.bib-empty-desc { font-size:13px; max-width:320px; line-height:1.5; }

/* ─── Generar contenido modal ────────────────────────────────────────────── */
.gen-result { background:var(--bg); border:1px solid var(--border); border-radius:var(--r);
  padding:16px; margin-top:14px; max-height:400px; overflow-y:auto;
  font-size:13px; line-height:1.75; color:var(--text);
  scrollbar-width:thin; scrollbar-color:var(--border2) transparent; }
.gen-result h2 { font-family:'Cormorant Garamond',serif; font-size:17px; margin:14px 0 6px; }
.gen-result h3 { font-size:13.5px; font-weight:600; margin:10px 0 4px; color:var(--brown); }
.gen-result strong { font-weight:600; }
.gen-result ul, .gen-result ol { padding-left:18px; margin:6px 0; }
.gen-result li { margin-bottom:3px; }
.gen-result code { background:var(--hover); border:1px solid var(--border);
  border-radius:2px; padding:1px 5px; font-size:12px; font-family:monospace; }

/* ─── Save indicator ─────────────────────────────────────────────────────── */
.save-indicator { position:fixed; bottom:16px; right:20px; font-size:12px; font-weight:500;
  padding:6px 12px; border-radius:20px; z-index:50; pointer-events:none;
  transition:opacity 0.4s ease, transform 0.4s cubic-bezier(0.32,0.72,0,1); }
.save-indicator.saved  { background:var(--green-bg); color:var(--green-txt); }
.save-indicator.saving { background:var(--amber-bg); color:var(--amber-txt); }
.save-indicator.unsaved{ background:var(--red-bg);   color:var(--red-txt); }
.save-indicator.hidden { opacity:0; transform:translateY(8px); pointer-events:none; }

/* ─── History Drawer (slide-in panel) ────────────────────────────────────── */
.history-drawer { position:absolute; top:0; right:0; bottom:0; width:320px;
  background:var(--card); border-left:1px solid var(--border);
  display:flex; flex-direction:column; z-index:20;
  transform:translateX(100%); transition:transform 0.35s cubic-bezier(0.32,0.72,0,1);
  box-shadow:-4px 0 24px rgba(26,18,8,.08); }
.history-drawer.open { transform:translateX(0); }
.history-drawer.hidden { display:none; }

.hdrawer-header { display:flex; align-items:center; justify-content:space-between;
  padding:14px 16px; border-bottom:1px solid var(--border); flex-shrink:0; }
.hdrawer-title { font-family:'Cormorant Garamond',serif; font-size:17px; font-weight:400; color:var(--text); }

.hdrawer-search-wrap { padding:10px 12px; border-bottom:1px solid var(--border); flex-shrink:0; }
.hdrawer-search { width:100%; background:var(--bg); border:1px solid var(--border);
  border-radius:var(--r); padding:7px 12px; font-size:13px; color:var(--text); outline:none; }
.hdrawer-search:focus { border-color:var(--accent); }

.hdrawer-list { flex:1; overflow-y:auto; padding:8px;
  scrollbar-width:thin; scrollbar-color:var(--border2) transparent; }

.hdrawer-item { padding:11px 12px; border-radius:var(--r); cursor:pointer;
  border:1px solid transparent; transition:all var(--tr); margin-bottom:4px; }
.hdrawer-item:hover { background:var(--hover); border-color:var(--border); }
.hdrawer-item.active { background:var(--accent-lt); border-color:var(--accent); }
.hdrawer-item-title { font-size:13px; font-weight:500; color:var(--text); margin-bottom:3px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hdrawer-item-meta  { font-size:11px; color:var(--text-3); display:flex; gap:8px; }
.hdrawer-item-last  { font-size:11.5px; color:var(--text-2); margin-top:3px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hdrawer-item-actions { display:flex; gap:5px; margin-top:6px; }
.hdrawer-btn { font-size:11.5px; padding:3px 8px; border-radius:20px; border:1px solid var(--border2);
  background:none; color:var(--text-2); cursor:pointer; transition:all var(--tr); }
.hdrawer-btn:hover { border-color:var(--accent); color:var(--accent); }
.hdrawer-btn.danger:hover { border-color:var(--red-txt); color:var(--red-txt); }
.hdrawer-empty { padding:24px; text-align:center; font-size:13px; color:var(--text-3); font-style:italic; }

.conv-badge-saved { font-size:10px; background:var(--green-bg); color:var(--green-txt);
  padding:2px 7px; border-radius:10px; margin-left:8px; font-weight:500; }

/* ─── Generating spinner ─────────────────────────────────────────────────── */
.spin-wrap   { display:flex; flex-direction:column; align-items:center; gap:14px; padding:32px; }
.spinner     { width:34px; height:34px; border:3px solid var(--border2);
  border-top-color:var(--accent); border-radius:50%; animation:spin .8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.spin-label  { font-size:13px; color:var(--text-2); }

/* ─── Google Calendar status bar ─────────────────────────────────────────── */
.gcal-status-bar {
  display:flex; align-items:center; gap:10px; padding:10px 16px;
  border-radius:var(--r); margin-bottom:12px; font-size:13px;
  border:1px solid var(--border2); transition:all var(--tr);
}
.gcal-status-bar.gcal-disconnected { background:#fff8f0; border-color:#e8c97a; color:var(--brown); }
.gcal-status-bar.gcal-connected    { background:#f0faf4; border-color:#6abf8a; color:#2a6b42; }
.gcal-status-bar span { flex:1; }
.gcal-connect-btn {
  font-size:12px; font-weight:500; color:var(--accent); text-decoration:none;
  padding:5px 12px; border:1px solid var(--accent); border-radius:var(--r);
  transition:all var(--tr); white-space:nowrap;
}
.gcal-connect-btn:hover { background:var(--accent); color:#fff; }
.gcal-disconnect-btn {
  font-size:12px; color:var(--text-3); background:none; border:none; cursor:pointer;
  padding:4px 8px; border-radius:var(--r); transition:all var(--tr);
}
.gcal-disconnect-btn:hover { color:var(--red-txt); }

/* Leyenda del calendario */
.cal-legend {
  display:flex; align-items:center; gap:14px; font-size:12px; color:var(--text-2);
  margin-bottom:12px;
}
.cal-legend-dot { width:10px; height:10px; border-radius:50%; display:inline-block; margin-right:4px; }
.cal-legend-dot.local  { background:#8b5e2d; }
.cal-legend-dot.google { background:#4285f4; }

/* Eventos de Google en el calendario */
.cal-event-block.gcal { background:#4285f4 !important; }
.cal-event-client-badge {
  font-size:9px; font-weight:600; letter-spacing:.04em; text-transform:uppercase;
  background:rgba(255,255,255,.25); border-radius:3px; padding:1px 5px; margin-top:2px;
  display:inline-block;
}
.cal-prep-btn {
  font-size:10px; font-weight:500; background:rgba(255,255,255,.9); color:#1a1208;
  border:none; border-radius:3px; padding:2px 7px; cursor:pointer; margin-top:3px;
  transition:all .2s;
}
.cal-prep-btn:hover { background:#fff; }