/* ============================================
   TOKENS — Tema oscuro (por defecto)
   ============================================ */
:root {
  --bg-dark: #0f0f11;
  --bg-card: #18181b;
  --bg-input: #27272a;
  --bg-hover: #2a2a2e;
  --border: #2a2a2e;
  --border-strong: #3a3a3f;
  --text-main: #f4f4f5;
  --text-muted: #a1a1aa;
  --text-faint: #6b6b71;

  --accent: #6366f1;
  --accent-hover: #4f46e5;
  --accent-soft: rgba(99, 102, 241, 0.14);

  --success: #10b981;
  --success-soft: rgba(16, 185, 129, 0.14);
  --danger: #f87171;
  --danger-soft: rgba(248, 113, 113, 0.14);
  --gold: #C9A84C;
  --gold-soft: rgba(201, 168, 76, 0.14);

  --shadow-card: none;
  --shadow-modal: 0 24px 48px rgba(0, 0, 0, 0.45);

  /* Escala de espaciado */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;

  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
}

/* ============================================
   TOKENS — Tema claro
   ============================================ */
[data-theme="light"] {
  --bg-dark: #f7f7f8;
  --bg-card: #ffffff;
  --bg-input: #f1f1f3;
  --bg-hover: #ececee;
  --border: #e4e4e7;
  --border-strong: #d4d4d8;
  --text-main: #18181b;
  --text-muted: #6b6b71;
  --text-faint: #a1a1aa;

  --accent: #6366f1;
  --accent-hover: #4f46e5;
  --accent-soft: rgba(99, 102, 241, 0.09);

  --success: #059669;
  --success-soft: rgba(5, 150, 105, 0.10);
  --danger: #dc2626;
  --danger-soft: rgba(220, 38, 38, 0.08);
  --gold: #a3812f;
  --gold-soft: rgba(163, 129, 47, 0.10);

  --shadow-card: 0 1px 2px rgba(24, 24, 27, 0.04), 0 1px 8px rgba(24, 24, 27, 0.03);
  --shadow-modal: 0 24px 48px rgba(24, 24, 27, 0.18);
}

/* ============================================
   BASE
   ============================================ */
* { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }

html { color-scheme: dark; }
[data-theme="light"] html, html[data-theme="light"] { color-scheme: light; }

/* El body ya no fija height:100vh + overflow:hidden. Eso hacía que en un celular
   la página quedara atrapada en una ventana sin scroll, con una barra lateral
   de 240px fijos comiéndose la pantalla. Ahora el documento crece y hace scroll
   como cualquier página, y la barra lateral se vuelve un cajón en pantallas
   chicas (ver el bloque RESPONSIVE al final del archivo). */
body {
  background-color: var(--bg-dark);
  color: var(--text-main);
  display: flex;
  min-height: 100vh;
  transition: background-color 0.2s ease, color 0.2s ease;
}

/* ============================================
   SIDEBAR
   ============================================ */
sidebar {
  width: 240px;
  background: var(--bg-card);
  border-right: 1px solid var(--border);
  padding: 24px 16px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  flex-shrink: 0;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}
.sidebar-brand { display: flex; align-items: center; gap: 10px; padding: 0 8px; }
.sidebar-cerrar { display: none; margin-left: auto; background: none; border: none; color: var(--text-muted); cursor: pointer; padding: 4px; }

/* Barra superior y fondo oscuro del cajón: ocultos en escritorio. */
.topbar { display: none; }
.sidebar-backdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 90; }
.brand-logo { color: var(--accent); flex-shrink: 0; }
sidebar h2 {
  font-size: 0.92rem;
  color: var(--text-main);
  font-weight: 700;
  letter-spacing: -0.2px;
  line-height: 1.25;
}
sidebar nav { display: flex; flex-direction: column; gap: 2px; }
sidebar button {
  background: none;
  border: none;
  border-left: 3px solid transparent;
  color: var(--text-muted);
  text-align: left;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: background 0.15s ease, color 0.15s ease;
}
.nav-icon { width: 18px; height: 18px; flex-shrink: 0; }
sidebar button:hover { background: var(--bg-hover); color: var(--text-main); }
sidebar button.active { background: var(--accent-soft); color: var(--accent); border-left-color: var(--accent); font-weight: 600; }

.sidebar-footer { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--border); }

/* Selector de negocios (lista + acciones integradas) */
.negocio-switch { padding: 0 8px; position: relative; }
.negocio-switch-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  color: var(--text-main);
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  font-size: 0.8rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: border-color 0.15s ease;
}
.negocio-switch-trigger:hover { border-color: var(--text-muted); }
.negocio-switch-nombre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.negocio-switch-chevron { flex-shrink: 0; color: var(--text-muted); transition: transform 0.15s ease; }
.negocio-switch.abierto .negocio-switch-chevron { transform: rotate(180deg); }
.negocio-switch.abierto .negocio-switch-trigger { border-color: var(--accent); }

.negocio-switch-panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 8px;
  right: 8px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-modal);
  padding: 6px;
  z-index: 50;
  max-height: 320px;
  overflow-y: auto;
}

.negocio-item { display: flex; align-items: center; gap: 2px; border-radius: var(--radius-sm); }
.negocio-item:hover { background: var(--bg-hover); }
.negocio-item.activo { background: var(--accent-soft); }

.negocio-item-principal {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: none;
  border: none;
  text-align: left;
  padding: 8px 8px;
  cursor: pointer;
  min-width: 0;
  font-family: inherit;
}
.negocio-item-textos { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.negocio-item-nombre { font-size: 0.84rem; font-weight: 600; color: var(--text-main); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.negocio-item-desc { font-size: 0.72rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.negocio-item-check { color: var(--accent); font-weight: 700; flex-shrink: 0; }

.negocio-item-crear {
  width: 100%;
  background: none;
  border: none;
  border-top: 1px solid var(--border);
  margin-top: 4px;
  padding: 10px 8px 6px;
  color: var(--accent);
  font-size: 0.82rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
}
.negocio-item-crear:hover { color: var(--accent-hover); }

/* Checklist de plataformas (wizard de nuevo perfil) */
.plataforma-checklist { display:grid; grid-template-columns: 1fr 1fr; gap:6px; }
.plataforma-item { display:flex; align-items:center; gap:8px; background:var(--bg-input); border:1px solid var(--border); border-radius:var(--radius-sm); padding:8px 10px; font-weight:normal; font-size:0.85rem; cursor: pointer; min-width: 0; }
/* Sin min-width:0 los hijos flex no pueden encogerse y la insignia "Aquí
   cierras la venta" empujaba la tarjeta fuera del panel. */
.plataforma-item > * { min-width: 0; }
.plataforma-nombre, .onb-red-recomendada-rol { overflow-wrap: anywhere; }
/* Este listado vive dentro de un panel a media pantalla: en dos columnas no
   entra nada. Una por fila y se acabó el desborde. */
#onb-redes-recomendadas { grid-template-columns: 1fr; }
#onb-redes-recomendadas .plataforma-item { flex-wrap: wrap; row-gap: 6px; }
#onb-redes-recomendadas .insignia-cierre,
#onb-redes-recomendadas .insignia-cierre-mover { margin-left: auto; flex-shrink: 0; }
.plataforma-item input[type="checkbox"] { width:auto; }
.plataforma-nombre { flex:1; }
#onb-redes-otros-texto { grid-column: 1 / -1; }
.plataforma-principal { display:flex; align-items:center; gap:4px; font-size:0.72rem; color:var(--text-muted); white-space:nowrap; }
.plataforma-principal input[type="radio"] { width:auto; }
.onb-red-recomendada-texto { display:flex; flex-direction:column; flex:1; gap:2px; }
.onb-red-recomendada-rol { font-size:0.72rem; color:var(--text-muted); font-weight:400; }

/* Theme toggle */
.theme-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 8px 10px;
  font-size: 0.78rem;
  color: var(--text-muted);
  font-weight: 500;
}
.theme-icons { display: flex; gap: 4px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 2px; }
.theme-icon-btn {
  width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: none; border-radius: 4px;
  color: var(--text-faint); cursor: pointer;
}
.theme-icon-btn svg { width: 15px; height: 15px; }
.theme-icon-btn:hover { color: var(--text-main); }
.theme-icon-btn.active { background: var(--accent-soft); color: var(--accent); }

/* ============================================
   MAIN CONTENT
   ============================================ */
main { flex: 1; padding: 32px 36px; min-width: 0; }
.tab-content { display: none; max-width: 900px; margin: 0 auto; }
#tab-director.tab-content { max-width: 1180px; }
.tab-content.active { display: block; }

.breadcrumb { font-size: 0.78rem; color: var(--text-faint); margin-bottom: 4px; font-weight: 500; }
.breadcrumb span { margin: 0 4px; }

.resumen-dia-grid {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  grid-template-areas:
    "meta rutina"
    "consejo rutina";
  gap: 14px;
  margin-bottom: 16px;
  align-items: start;
}
.resumen-dia-grid .card { margin-bottom: 0; }
.resumen-dia-grid .termometro-card { grid-area: meta; }
.resumen-dia-grid .calendario-card { grid-area: rutina; }
.resumen-dia-grid #consejo-diario { grid-area: consejo; }
@media (max-width: 720px) {
  .resumen-dia-grid {
    grid-template-columns: 1fr;
    grid-template-areas: "meta" "rutina" "consejo";
  }
}

h1 { font-size: 1.2rem; margin-bottom: 8px; font-weight: 700; letter-spacing: -0.4px; }

/* ============================================
   CARDS & FORMS
   ============================================ */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 24px;
  margin-bottom: 14px;
}
.card h3 { font-size: 0.88rem; font-weight: 600; margin-bottom: 10px; letter-spacing: -0.2px; }

.form-group { margin-bottom: var(--sp-3); }
label { display: block; font-size: 0.8rem; color: var(--text-muted); margin-bottom: var(--sp-2); font-weight: 500; }
input, textarea, select {
  width: 100%;
  background: var(--bg-input);
  border: 1px solid var(--border);
  color: var(--text-main);
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  font-size: 0.88rem;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
input:focus, textarea:focus, select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.select-resaltado { animation: resaltar-select 1.2s ease; }
@keyframes resaltar-select { 0% { box-shadow: 0 0 0 4px var(--accent-soft); } 100% { box-shadow: none; } }
.bienvenida-banner {
  background: var(--accent-soft); border: 1px solid var(--accent); color: var(--text-main);
  padding: 12px 16px; border-radius: var(--radius-sm); margin-bottom: 14px;
  font-size: 0.88rem; font-weight: 500;
}
.wizard-panel-resaltado { animation: resaltar-select 1.6s ease; border-radius: var(--radius-md, 10px); }
textarea { resize: vertical; min-height: 80px; }

/* ============================================
   BUTTONS — jerarquía primario / secundario / venta
   ============================================ */
.btn {
  background: var(--accent);
  color: white;
  border: none;
  padding: 10px 18px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-weight: 600;
  font-size: 0.86rem;
  transition: background 0.15s ease, transform 0.05s ease;
}
.btn:hover { background: var(--accent-hover); }
.btn:active { transform: scale(0.97); }
.btn:disabled, .btn-secundario:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-secundario {
  background: transparent;
  color: var(--text-muted);
  border: 1px solid var(--border-strong);
  margin-left: 10px;
  font-weight: 500;
}
.btn-secundario:hover { background: var(--bg-hover); color: var(--text-main); border-color: var(--text-muted); }

/* Output Box */
.output-box { background: var(--bg-input); border: 1px solid var(--border); padding: 15px; border-radius: var(--radius-md); font-family: 'SF Mono', 'Consolas', monospace; font-size: 0.85rem; white-space: pre-wrap; color: var(--success); margin-top: 15px; }

/* Termómetro de Ventas */
.termometro-header { display:flex; justify-content:space-between; font-size:0.85rem; color:var(--text-muted); margin-bottom:10px; font-weight: 500; }
/* Meta de ventas mensual (estilo tarjeta grande) */
.meta-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; }
.meta-label { font-size:0.78rem; color:var(--text-muted); font-weight:500; }
.meta-pct { font-size:0.8rem; font-weight:700; color:var(--success); background:var(--success-soft); padding:3px 10px; border-radius:20px; }
.meta-stat-row { display:flex; align-items:baseline; gap:8px; margin-bottom:10px; }
.meta-stat-num { font-size:2.6rem; font-weight:800; letter-spacing:-1px; color:var(--text-main); line-height:1; }
.meta-stat-den { font-size:0.95rem; color:var(--text-muted); font-weight:600; }

.tendencia-svg { width:100%; height:60px; display:block; margin-bottom:12px; }
.btn-venta { background:var(--success); }
.btn-venta:hover { background:#0ea570; }

/* Resultado estructurado con botones de copiar */
.output-grid { display:grid; grid-template-columns: 1fr 1fr; gap:14px; background:transparent; border:none; padding:0; }
.output-grid .output-block:first-child,
.output-grid .output-block:last-child { grid-column: 1 / -1; }
@media (max-width: 640px) {
  .output-grid { grid-template-columns: 1fr; }
}
.output-block { background:var(--bg-input); border:1px solid var(--border); border-radius:var(--radius-md); padding:16px; opacity:1; transform:translateY(0); transition:opacity 0.3s ease, transform 0.3s ease; }
.output-block-oculto { opacity:0; transform:translateY(6px); }
.output-block-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; font-size:0.8rem; color:var(--text-muted); font-weight:600; text-transform: uppercase; letter-spacing: 0.3px; }
.btn-copiar { background:var(--bg-card); color:var(--text-main); border:1px solid var(--border-strong); padding:5px 10px; border-radius:5px; font-size:0.75rem; cursor:pointer; font-weight: 500; }
.btn-copiar:hover { background:var(--accent); border-color:var(--accent); color: #fff; }
.output-block-texto { font-family:'SF Mono', 'Consolas', monospace; font-size:0.85rem; white-space:pre-wrap; color:var(--success); margin:0; line-height: 1.5; }

/* Chat de Consultoría */
.chat-card { display:flex; flex-direction:column; height:65vh; }
.chat-historial { flex:1; overflow-y:auto; display:flex; flex-direction:column; gap:10px; padding:5px; margin-bottom:15px; }
.chat-msg { max-width:80%; padding:10px 14px; border-radius:12px; font-size:0.89rem; line-height:1.45; white-space:pre-wrap; }
.chat-msg-user { align-self:flex-end; background:var(--accent); color:white; border-bottom-right-radius: 3px; }
.chat-msg-ia { align-self:flex-start; background:var(--bg-input); color:var(--text-main); border-bottom-left-radius: 3px; }
.chat-input-row { display:flex; gap:10px; }
.chat-input-row input { flex:1; }

.termometro-botones { display:flex; gap:10px; }
.btn-venta-restar { background:var(--bg-input); color:var(--text-muted); border:1px solid var(--border); }
.btn-venta-restar:hover { background:var(--danger-soft); color:var(--danger); border-color:var(--danger); }

/* Productos con foto */
.prod-foto-preview { margin-top:10px; max-width:120px; max-height:120px; border-radius:var(--radius-md); border:1px solid var(--border); object-fit:cover; }

.producto-card { display:flex; gap:12px; align-items:flex-start; border-bottom:1px solid var(--border); padding:14px 0; }
.producto-card:last-child { border-bottom: none; }
.producto-card img { width:56px; height:56px; object-fit:cover; border-radius:var(--radius-sm); flex-shrink:0; background:var(--bg-input); border: 1px solid var(--border); }
.producto-card-info { flex:1; }
.producto-card-info strong { font-weight: 600; }
.producto-card-acciones { display:flex; gap:8px; }
.producto-card-acciones button { background:none; border:1px solid var(--border-strong); color:var(--text-muted); border-radius:5px; padding:4px 8px; font-size:0.75rem; cursor:pointer; }
.producto-card-acciones button:hover { background:var(--bg-hover); color:var(--text-main); }
.btn-eliminar-prod:hover { color:var(--danger); border-color:var(--danger); }

/* Modal Venta */
.modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.55); display:flex; align-items:center; justify-content:center; z-index:100; backdrop-filter: blur(2px); }
.modal-box { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow: var(--shadow-modal); padding:26px; width:400px; max-width:90vw; }
.modal-box h3 { margin-bottom:16px; font-weight: 700; }
.modal-botones { display:flex; gap:10px; margin-top:10px; }

/* Tabla de Análisis */
.tabla-analisis { width:100%; border-collapse:collapse; font-size:0.85rem; }
.tabla-analisis th { text-align:left; color:var(--text-muted); font-weight:600; padding:10px 8px; border-bottom:1px solid var(--border); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.3px; }
.tabla-analisis td { padding:10px 8px; border-bottom:1px solid var(--border); }
.tabla-analisis tr:last-child td { border-bottom:none; }
.tabla-analisis tr:hover td { background: var(--bg-hover); }
.btn-wa { background:var(--success); color:white; border:none; border-radius:5px; padding:4px 8px; font-size:0.75rem; cursor:pointer; text-decoration:none; display:inline-block; font-weight: 500; }

/* Calendario de Rutina — checklist de 1 columna, compacto */
.calendario-slots { display:flex; flex-direction:column; gap:4px; margin-bottom:10px; }
.calendario-slot { display:flex; align-items:center; gap:10px; background:var(--bg-input); border: 1px solid var(--border); border-radius:var(--radius-sm, 6px); padding:6px 8px; transition:background 0.15s ease, border-color 0.15s ease; cursor:pointer; }
.calendario-slot:hover { background:var(--bg-hover); border-color:var(--border-strong); }
.calendario-slot-completado { opacity:0.5; }
.calendario-slot-completado .calendario-slot-fase { text-decoration:line-through; }
.slot-check {
  width:18px; height:18px; border-radius:50%; flex-shrink:0;
  border:2px solid var(--border-strong); background:transparent; cursor:pointer;
  display:flex; align-items:center; justify-content:center; padding:0;
}
.slot-check svg { width:10px; height:10px; }
.slot-check-on { background:var(--success); border-color:var(--success); }
.slot-info { flex:1; min-width:0; }
.calendario-slot-fase { font-size:0.8rem; font-weight:600; color:var(--text-main); }
.calendario-slot-hora { font-size:0.7rem; color:var(--text-muted); margin-top:1px; }
.calendario-vacio {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  background: var(--bg-input);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-md);
  padding: 16px;
  text-align: left;
}
.calendario-vacio p {
  color: var(--text-muted);
  font-size: 0.85rem;
  margin: 0;
}
.slot-usar-link { background:none; border:none; color:var(--accent); font-size:0.72rem; font-weight:600; cursor:pointer; padding:2px 0; white-space:nowrap; }
.slot-usar-link:hover { text-decoration:underline; }

.btn-mini { background:var(--bg-card); border:1px solid var(--border-strong); color:var(--text-main); padding:6px 10px; border-radius:5px; font-size:0.75rem; cursor:pointer; white-space:nowrap; font-weight: 500; }
.btn-mini:hover { background:var(--accent); border-color:var(--accent); color: #fff; }
.calendario-nota { font-size:0.73rem; color:var(--text-muted); margin-bottom:10px; line-height: 1.45; }

/* Packs */
.pack-checklist { display:flex; flex-direction:column; gap:6px; background:var(--bg-input); border: 1px solid var(--border); border-radius:var(--radius-md); padding:12px; }
.pack-checklist-item { display:flex; align-items:center; gap:8px; font-size:0.85rem; font-weight:normal; }
.pack-checklist-item input { width:auto; }

/* Chat - botones rápidos */
.chat-quick-botones { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px; }
.chat-quick-btn { background:var(--bg-input); color:var(--text-main); border:1px solid var(--border); padding:6px 12px; border-radius:20px; font-size:0.78rem; cursor:pointer; font-weight: 500; }
.chat-quick-btn:hover { background:var(--accent); border-color:var(--accent); color: #fff; }
.chat-quick-star { border-color:var(--gold); color:var(--gold); }
.chat-quick-star:hover { background:var(--gold); color:#0f0f11; }

/* Consultoría flotante */
.consultoria-fab {
  position: fixed; right: 24px; bottom: 24px; width: 56px; height: 56px;
  border-radius: 50%; background: var(--accent); color: #fff; border: none;
  box-shadow: 0 8px 20px rgba(0,0,0,0.28); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  z-index: 80; transition: transform 0.15s ease, background 0.15s ease;
}
.consultoria-fab:hover { background: var(--accent-hover); transform: scale(1.06); }
.consultoria-fab-badge {
  position: absolute; top: 2px; right: 2px; width: 12px; height: 12px;
  border-radius: 50%; background: var(--gold); border: 2px solid var(--bg-card);
}
.consultoria-flotante {
  position: fixed; right: 24px; bottom: 92px; width: 380px;
  max-width: calc(100vw - 32px); height: min(600px, 75vh);
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-modal);
  display: flex; flex-direction: column; overflow: hidden; z-index: 80;
}
.consultoria-flotante-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.consultoria-flotante-header h3 { margin: 0; font-size: 0.92rem; font-weight: 700; }
.consultoria-flotante-cerrar {
  background: none; border: none; color: var(--text-muted); cursor: pointer;
  font-size: 1.05rem; line-height: 1; padding: 4px;
}
.consultoria-flotante-cerrar:hover { color: var(--text-main); }
.consultoria-flotante-body { flex: 1; overflow-y: auto; padding: 14px 16px 0; }
.consultoria-flotante-footer { padding: 12px 16px 16px; border-top: 1px solid var(--border); flex-shrink: 0; }
@media (max-width: 480px) {
  .consultoria-flotante { right: 16px; left: 16px; width: auto; bottom: 84px; }
  .consultoria-fab { right: 16px; bottom: 16px; }
}

/* Análisis IA */
.analisis-ia-box { background:var(--bg-input); border:1px solid var(--border); border-radius:var(--radius-md); padding:15px; margin-top:12px; font-size:0.85rem; white-space:pre-wrap; color:var(--success); line-height: 1.5; }

/* Stepper */
.stepper { display:flex; align-items:flex-start; justify-content:center; gap:0; margin:10px auto 14px; width:100%; }
.stepper-item { display:flex; flex-direction:column; align-items:center; gap:6px; flex:1 1 0; min-width:0; text-align:center; }
.stepper-dot { width:30px; height:30px; border-radius:50%; background:var(--bg-input); border:1px solid var(--border-strong); color:var(--text-muted); display:flex; align-items:center; justify-content:center; font-size:0.8rem; font-weight:700; transition:all 0.25s ease; margin:0 auto; }
.stepper-label { font-size:0.72rem; color:var(--text-muted); font-weight:500; white-space:nowrap; }
.stepper-item.active .stepper-dot { background:var(--accent); border-color:var(--accent); color:#fff; }
.stepper-item.active .stepper-label { color:var(--text-main); font-weight: 700; }
.stepper-item.done .stepper-dot { background:var(--success); border-color:var(--success); color:#fff; }
/* El número vive suelto dentro de .stepper-dot, no dentro de un <span>: la regla
   anterior apuntaba a un elemento que no existe, así que el número se quedaba
   debajo del check. font-size:0 lo apaga sin tocar el marcado. */
.stepper-item.done .stepper-dot { font-size: 0; }
.stepper-item.done .stepper-dot::after {
  content: '';
  width: 14px;
  height: 14px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / contain no-repeat;
}
.stepper-line { flex:1 1 0; min-width:12px; height:1px; background:var(--border-strong); margin:15px 4px 0; transition:background 0.25s ease; align-self:flex-start; }
.stepper-line.done { background:var(--success); }
.onb-stepper { max-width: 100%; }

/* Stepper del wizard diario (Generar): más compacto y en dorado,
   para no confundirse visualmente con el stepper de 4 pasos del onboarding. */
.stepper-mini { max-width: 320px; margin: 16px 0 18px; }
.stepper-mini .stepper-dot { width: 22px; height: 22px; font-size: 0.7rem; border-color: var(--gold); }
.stepper-mini .stepper-item.active .stepper-dot { background: var(--gold); border-color: var(--gold); color: #0f0f11; }
.stepper-mini .stepper-item.done .stepper-dot { background: var(--gold); border-color: var(--gold); }
.stepper-mini .stepper-label { font-size: 0.65rem; }


.director-layout { display:grid; grid-template-columns: minmax(0, 1fr) 420px; gap:28px; align-items:start; }
.director-main { min-width:0; }
.wizard-panel { min-width:0; }
.wizard-titulo { font-size:1.1rem; font-weight:700; letter-spacing:-0.3px; margin-bottom:4px; }
.wizard-subtitulo { font-size:0.85rem; color:var(--text-muted); margin-bottom:16px; line-height: 1.5; }
.wizard-preview {
  position:sticky;
  top:16px;
  max-height:calc(100vh - 32px);
  overflow-y:auto;
  background:var(--bg-input);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  padding:16px;
}
#wizard-mockup-preview { transform-origin: top center; }

.wizard-preview-label { font-size:0.65rem; text-transform:uppercase; letter-spacing:0.6px; color:var(--text-muted); font-weight:600; margin-bottom:10px; }
.wizard-botones { display:flex; justify-content:space-between; gap:10px; margin-top:20px; }
.btn-full { width:100%; margin-top:6px; }
.btn-link-cancelar { display:block; width:100%; text-align:center; background:none; border:none; color:var(--text-muted); font-size:0.78rem; padding:14px 0 0; cursor:pointer; text-decoration:underline; }
.btn-link-cancelar:hover { color:var(--danger); }
.wizard-final { text-align:center; padding:40px 20px; }
.wizard-final-icono { font-size:2.2rem; margin-bottom:10px; }
.wizard-final .btn { margin-top:16px; }
@media (max-width: 1000px) {
  .director-layout { grid-template-columns: 1fr; }
  .wizard-preview { position:static; max-height:none; }
  #wizard-mockup-preview { transform:none; }
}

/* Mockup de Publicación — clon visual pixel-perfect de Facebook/Instagram */
.mockup-post { background:#fff; color:#050505; border:1px solid var(--border); border-radius:12px; overflow:hidden; box-shadow:0 1px 2px rgba(0,0,0,0.2); font-family:'Segoe UI', Helvetica, Arial, sans-serif; }
[data-theme="dark"] .mockup-post { background:#242526; color:#e4e6eb; }
.mockup-header { display:flex; align-items:center; gap:8px; padding:12px 12px 0 12px; }
.mockup-avatar { width:40px; height:40px; border-radius:50%; background:linear-gradient(135deg, var(--accent), #6b8cff); flex-shrink:0; }
[id$="-instagram"] .mockup-avatar { background:linear-gradient(135deg, #feda75 0%, #d62976 55%, #4f5bd5 100%); border:2px solid #fff; box-sizing:border-box; }
.mockup-nombre { font-size:0.9375rem; font-weight:600; color:inherit; line-height:1.3; }
.mockup-fecha { font-size:0.8125rem; color:#65676b; }
[data-theme="dark"] .mockup-fecha { color:#b0b3b8; }
.mockup-texto {
  font-size:0.9375rem;
  line-height:1.4;
  white-space:pre-wrap;
  color:inherit;
  padding:8px 12px 2px;
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.mockup-texto.mockup-texto-expandido { display:block; -webkit-line-clamp:unset; overflow:visible; }
.mockup-ver-mas { display:block; margin:0 12px 8px; font-size:0.9375rem; font-weight:600; color:#65676b; cursor:pointer; background:none; border:none; padding:0; text-align:left; }
[data-theme="dark"] .mockup-ver-mas { color:#b0b3b8; }
.mockup-ver-mas:hover { text-decoration:underline; }
.mockup-skeleton-texto { padding:10px 12px; }
.mockup-skeleton-line { height:10px; background:var(--border); border-radius:4px; margin-bottom:8px; }
.mockup-skeleton-line.w-90 { width:90%; }
.mockup-skeleton-line.w-70 { width:70%; }
.mockup-skeleton-line.w-40 { width:40%; margin-bottom:0; }
.mockup-skeleton-img { width:100%; height:160px; background:var(--bg-hover); border-top:1px solid var(--border); border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:center; color:var(--text-faint); font-size:0.8rem; }
/* Dentro del preview compacto del Onboarding, se reduce el mockup completo
   (imagen, cabecera, textos) para que la tarjeta quepa sin obligar a hacer
   scroll. OJO: usamos alto/padding reales, no transform:scale(), porque
   scale() no reduce el espacio que el elemento ocupa en el flujo. */
.onb-mockup-preview .mockup-post .mockup-skeleton-img { height: 80px; }
.onb-mockup-preview .mockup-post .mockup-header { padding: 8px 10px 0 10px; }
.onb-mockup-preview .mockup-post .mockup-skeleton-texto { padding: 6px 10px; }
.onb-mockup-preview .mockup-post .mockup-skeleton-line { margin-bottom: 5px; }
.onb-mockup-preview .mockup-post .mockup-texto { padding: 6px 10px 2px; }
.onb-mockup-preview .mockup-post .mockup-reacciones { padding: 4px 10px; }
.onb-mockup-preview .mockup-post .mockup-acciones span { padding: 5px 0; }
.mockup-img { width:100%; display:block; max-height:340px; object-fit:cover; }
.mockup-reacciones { display:flex; justify-content:space-between; align-items:center; font-size:0.8125rem; color:#65676b; padding:6px 12px; border-bottom:1px solid rgba(0,0,0,0.08); }
[data-theme="dark"] .mockup-reacciones { color:#b0b3b8; border-bottom-color:rgba(255,255,255,0.08); }
.mockup-acciones { display:flex; justify-content:space-around; font-size:0.85rem; color:#65676b; font-weight:600; padding:2px 8px; }
[data-theme="dark"] .mockup-acciones { color:#b0b3b8; }
.mockup-acciones span { flex:1; text-align:center; padding:8px 0; border-radius:6px; cursor:pointer; }
.mockup-acciones span:hover { background:rgba(0,0,0,0.05); }
[data-theme="dark"] .mockup-acciones span:hover { background:rgba(255,255,255,0.08); }
.mockup-cta-box { background:var(--accent-soft); padding:12px; text-align:center; font-size:0.9rem; font-weight:700; color:var(--accent); border-top:1px solid var(--border); }

/* Seguimiento de Clientes */
.seguimiento-item { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; border-bottom:1px solid var(--border); padding:14px 0; flex-wrap:wrap; }
.seguimiento-item:last-child { border-bottom:none; }
.seguimiento-urgente { border-left:3px solid var(--danger); padding-left:10px; }
.seguimiento-info { flex:1; min-width:200px; }
.seguimiento-dias-urgente { color:var(--danger); font-weight:600; }
.seguimiento-acciones { display:flex; gap:6px; flex-wrap:wrap; align-items:flex-start; }
/* ============================================
   ONBOARDING
   ============================================ */
#onboarding-view {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(2px);
  z-index: 100;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.onboarding-container {
  width: 100%;
  max-width: 900px;
  max-height: 92vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-modal);
  padding: 20px 28px;
}
.onboarding-header {
  position: relative;
  flex: 0 0 auto;
}
.onb-salir-btn {
  position: absolute;
  top: 0;
  right: 0;
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  padding: 4px 8px;
}
.onb-salir-btn:hover { color: var(--text-main); text-decoration: underline; }
.onb-salir-btn { display: inline-flex; align-items: center; gap: 6px; }
.onb-atras-btn { display: inline-flex; align-items: center; gap: 6px; }
.onb-banner-icono { flex-shrink: 0; display: inline-flex; }
.icono-inline { display: inline-flex; vertical-align: -2px; margin-right: 5px; flex-shrink: 0; }
.icono-inline svg { display: block; }
.onb-header-top {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 18px;
}
.onb-header-icono {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  animation: onbPulseVida 2.6s ease-in-out infinite;
}
@keyframes onbPulseVida {
  0%, 100% { box-shadow: 0 0 0 0 rgba(104, 80, 248, 0.35); }
  50% { box-shadow: 0 0 0 8px rgba(104, 80, 248, 0); }
}
.onb-paso-header-titulo {
  display: flex;
  align-items: center;
  gap: 10px;
}
.onb-paso-header-icono {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
}
.onb-paso-header-icono-success {
  background: color-mix(in srgb, var(--success) 18%, transparent);
  color: var(--success);
}
.onb-eyebrow-icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 4px;
  vertical-align: -2px;
  color: var(--accent);
}
.onb-header-textos { min-width: 0; }
.onboarding-header h2 {
  font-size: 1.4rem;
  font-weight: 700;
  text-align: left;
  margin-bottom: 4px;
}
.onb-header-subtitulo {
  font-size: 0.88rem;
  color: var(--text-muted);
  line-height: 1.45;
  margin: 0;
}
.onb-nav-botones {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
.onb-atras-btn {
  background: transparent;
  border: 1px solid var(--border-strong);
  color: var(--text-muted);
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  font-size: 0.86rem;
  font-weight: 500;
  cursor: pointer;
}
.onb-atras-btn:hover { background: var(--bg-hover); color: var(--text-main); border-color: var(--text-muted); }
.onboarding-progreso {
  text-align: center;
  font-size: 0.78rem;
  color: var(--text-muted);
  font-weight: 600;
  margin: 4px 0 12px;
}
.onboarding-content {
  padding-top: 4px;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}
.onb-paso5 .onb-error-banner,
.onb-paso5 .onb-info-banner {
  margin-bottom: 12px;
}
.onb-nombre-grupo { max-width: 340px; }
.onb-campo-principal { margin-bottom: 18px; }
.onb-intro-card {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 18px 20px;
  margin-bottom: 20px;
  overflow: hidden;
}
.onb-intro-icono {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  background: var(--accent-soft);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
}
.onb-intro-icono svg { display: block; }
.onb-intro-textos { min-width: 0; }
.onb-intro-textos h2 { margin-bottom: 4px; }
.onb-intro-textos p { margin: 0; color: var(--text-muted); }
.onb-intro-decoracion {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0.9;
  pointer-events: none;
}
@media (max-width: 720px) {
  .onb-intro-decoracion { display: none; }
}
.onb-confidencial-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: var(--accent-soft);
  border-radius: var(--radius-md);
  padding: 14px 18px;
  margin-top: 20px;
  flex-wrap: wrap;
}
.onb-confidencial-texto {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--accent);
  font-size: 0.85rem;
  font-weight: 500;
}
.onb-shield-icon { flex-shrink: 0; }
#onb-analizar-btn { display: inline-flex; align-items: center; gap: 8px; }
.onb-paso1-grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 20px;
  align-items: start;
}
@media (max-width: 560px) {
  .onb-nombre-grupo { max-width: none; }
  .onb-paso1-grid { grid-template-columns: 1fr; gap: 0; }
}
.wizard-paso1-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 560px) {
  .wizard-paso1-grid { grid-template-columns: 1fr; gap: 0; }
}
.onb-resumen-stats {
  display: grid;
  /* Los 4 datos en una sola fila: en 2x2 el Paso 3 no entraba en pantalla y
     había que scrollear para llegar a las redes recomendadas.
     Categoría y Objetivo son campos editables con texto largo; Etapa es una
     palabra. Repartir a partes iguales cortaba justo los dos que importan. */
  grid-template-columns: 1.55fr 0.85fr 0.9fr 1.05fr;
  gap: 10px;
  margin: 12px 0 14px;
}
@media (max-width: 1080px) { .onb-resumen-stats { grid-template-columns: 1fr 1fr; } }
.onb-resumen-stat {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.onb-stat-icono {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: var(--radius-sm);
  background: var(--accent-soft);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
}
.onb-resumen-stat-textos {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.onb-resumen-stat-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--text-muted);
  font-weight: 600;
}
.onb-resumen-stat-valor {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text-main);
}
.onb-resumen-oportunidad {
  line-height: 1.5;
  color: var(--text-main);
}
@media (max-width: 560px) {
  .onb-resumen-stats { grid-template-columns: 1fr; }
}
.onb-paso2 {
  position: relative;
  overflow: hidden;
  /* Alto fijo mientras se analiza: sin esto el panel se encoge y crece a medida
     que van apareciendo los estados, y el mockup de fondo termina encima del
     título. La pantalla de espera es de las primeras que ve el usuario. */
  min-height: 380px;
  display: flex;
  align-items: center;
  padding: 32px 28px;
}
.onb-paso2-fondo-mockup {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.15;
  pointer-events: none;
  z-index: 0;
}
.onb-paso2-fondo-mockup .mockup-post {
  width: 100%;
  max-width: 320px;
}
.onb-paso2-primer-plano {
  position: relative;
  z-index: 1;
  width: 100%;
}
/* El mockup decorativo se corre a la derecha: centrado quedaba justo debajo del
   texto y se leían las dos capas encima. */
.onb-paso2-fondo-mockup { opacity: 0.10; justify-content: flex-end; padding-right: 6%; }
@media (max-width: 780px) { .onb-paso2-fondo-mockup { display: none; } }
.onb-paso2 #onb-carga-titulo { font-size: 1.5rem; margin-bottom: 6px; }
.onboarding-paso h2 {
  font-size: 1.25rem;
  margin-bottom: 8px;
}
.onboarding-paso p {
  color: var(--text-muted);
  margin-bottom: 14px;
}
/* Los estados del análisis: sin bordes ni checks de texto. Un punto que se
   llena, la línea que se aclara, y nada que aparezca antes de tiempo. */
#onb-estados { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 11px; }
#onb-estados li {
  list-style: none;
  display: flex; align-items: center; gap: 11px;
  padding: 0; border: 0;
  font-size: 0.9rem;
  color: var(--text-faint);
  opacity: 1; transform: translateY(0);
  transition: opacity .35s ease, transform .35s ease, color .35s ease;
}
#onb-estados li::before {
  content: ''; flex-shrink: 0;
  width: 16px; height: 16px; border-radius: 50%;
  border: 1.5px solid var(--border-strong); background: transparent;
  transition: background .3s ease, border-color .3s ease;
}
#onb-estados li.onb-estado-oculto { opacity: 0; transform: translateY(6px); }
#onb-estados li.onb-estado-completado { color: var(--text-main); }
#onb-estados li.onb-estado-completado::before {
  content: '';
  background: var(--success); border-color: var(--success);
  box-shadow: inset 0 0 0 3px var(--bg-card);
}
/* Un solo bloque de captura, sin h4 ni label repitiendo la palabra "producto"
   cuatro veces en la misma pantalla: el placeholder ya dice qué va ahí. */
.onb-captura {
  margin-top: 16px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px;
}
.onb-lista-bloque { margin-top: 16px; }
.onb-lista-bloque[hidden] { display: none; }
.onb-lista-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.onb-lista-titulo {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.onb-lista-contador {
  font-size: 0.74rem;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}
#onb-productos-lista {
  max-height: 116px;
  overflow-y: auto;
}
#onb-prod-aviso[hidden] { display: none; }
.onb-cadencia-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 28px;
  align-items: start;
}
.onb-cadencia-grid .form-group { margin-bottom: 0; min-width: 0; }
@media (max-width: 720px) {
  .onb-cadencia-grid { grid-template-columns: 1fr; gap: 2px; }
}
.onb-mockup-preview {
  margin-top: 0;
}
.onb-mockup-preview h3 {
  margin-bottom: 6px;
  font-size: 0.95rem;
  text-align: center;
}
.onb-mockup-preview .mockup-post {
  max-width: 300px;
  margin: 0 auto;
  font-size: 0.9em; /* escala proporcional todo el contenido interno del mockup */
  transform-origin: top center;
}
.onb-grid-2col {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 16px;
  align-items: start;
}
@media (max-width: 560px) {
  .onb-grid-2col { grid-template-columns: 1fr; gap: 12px; }
}
.onb-panel {
  min-width: 0;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.onb-panel:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
  border-color: var(--accent-soft);
}
.onb-resumen-stat {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.onb-resumen-stat:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.1);
}
.onb-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 28px 12px;
  color: var(--text-muted);
  text-align: center;
}
.onb-empty-state svg { opacity: 0.45; }
.onb-empty-state p { margin: 0; font-size: 0.85rem; }
.onb-panel-center { display: flex; align-items: center; justify-content: center; }
.onb-titulo-barra {
  position: relative;
  padding-left: 12px;
}
.onb-titulo-barra::before {
  content: '';
  position: absolute;
  left: 0;
  top: 2px;
  bottom: 2px;
  width: 3px;
  border-radius: 2px;
  background: var(--accent);
}
.onb-panel-oportunidad { position: relative; overflow: hidden; }
.onb-panel-titulo { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.onb-panel-icono {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
}
.onb-oportunidad-decoracion {
  position: absolute;
  right: -14px;
  bottom: -10px;
  /* Al 0.5 el radar se leía a través del texto de la oportunidad, que es lo
     único que hay que leer en ese panel. */
  opacity: 0.18;
  pointer-events: none;
}
.plataforma-icono {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--bg-card);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
}
.plataforma-icono img { width: 22px; height: 22px; display: block; }
.onb-estrategia-eyebrow {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 6px;
}
.onb-estrategia-titular {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-main);
  line-height: 1.35;
  margin-bottom: 12px;
  min-height: 1.4em;
}
.onb-estrategia-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: stretch;
}
@media (max-width: 560px) {
  .onb-estrategia-grid { grid-template-columns: 1fr; gap: 12px; }
}
.onb-estrategia-panel {
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 18px 20px;
}
.onb-estrategia-panel-principal { justify-content: center; }
.onb-estrategia-panel-acciones { margin-top: 20px; }
@media (max-width: 560px) {
  .onb-estrategia-panel-acciones { margin-top: 12px; }
}
/* El paso de estrategia también tiene que caber entero: con textos largos de la
   IA, en un portátil de 640px de alto se salía por unos pocos píxeles. Se aprietan
   paddings y separaciones, nunca el tamaño del texto que hay que leer. */
@media (max-height: 760px) {
  .onb-estrategia-grid { gap: 14px; }
  .onb-estrategia-panel { padding: 13px 15px; }
  .onb-estrategia-panel-acciones { margin-top: 13px; }
  .onb-estrategia-titular { font-size: 1.05rem; margin-bottom: 9px; }
  .onb-estrategia-bullets { gap: 9px; }
  .onb-estrategia-bullets li:not(:last-child) { padding-bottom: 9px; }
  #onboarding-paso-5 .onb-paso-header-titulo { font-size: 1.1rem; }
  #onboarding-paso-5 .onb-paso-header-icono { width: 28px; height: 28px; }
}
@media (max-height: 700px) {
  .onb-estrategia-grid { gap: 12px; }
  .onb-estrategia-panel { padding: 10px 13px; }
  .onb-estrategia-panel-acciones { margin-top: 10px; }
  .onb-estrategia-titular { font-size: 1rem; margin-bottom: 8px; }
  .onb-acciones-numeradas { gap: 6px; }
  .onb-acciones-numeradas li:not(:last-child) { padding-bottom: 6px; }
}
.onb-estrategia-panel .onb-estrategia-eyebrow { margin-bottom: 8px; }
.onb-chips-canales {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 0;
}
/* El chip ahora también dice para qué sirve ese canal, así que deja de ser una
   píldora y pasa a ser una tarjeta corta. La principal se distingue por relleno,
   no por un texto extra. */
.onb-chip-canal {
  display: inline-flex;
  flex-direction: column;
  gap: 1px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  color: var(--text-main);
  padding: 7px 12px;
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 600;
  min-width: 60px;
  min-height: 1.4em;
  max-width: 220px;
}
.onb-chip-canal-principal {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}
.onb-chip-canal-nombre { line-height: 1.2; }
.onb-chip-canal-rol {
  font-size: 0.7rem;
  font-weight: 400;
  line-height: 1.25;
  color: var(--text-faint);
}
.onb-chip-canal-principal .onb-chip-canal-rol { color: var(--accent); opacity: 0.85; }
.onb-estrategia-bullets {
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--text-muted);
  font-size: 0.88rem;
  line-height: 1.4;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.onb-estrategia-bullets li:not(:last-child) {
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
/* "Con lo que arrancas" es una secuencia y tiene que leerse como tal. El <ol> ya
   estaba en el HTML pero el list-style:none de arriba le borraba los números, así
   que se veían tres frases sueltas. El número va en un contador propio para poder
   darle forma sin depender del marcador del navegador. */
.onb-acciones-numeradas {
  counter-reset: onb-paso;
  gap: 8px;
}
.onb-acciones-numeradas li:not(:last-child) {
  padding-bottom: 8px;
}
.onb-acciones-numeradas li {
  counter-increment: onb-paso;
  display: grid;
  grid-template-columns: 22px 1fr auto;
  align-items: baseline;
  gap: 4px 10px;
}
.onb-acciones-numeradas li::before {
  content: counter(onb-paso);
  grid-row: 1 / span 2;
  align-self: center;
  width: 22px;
  height: 22px;
  border-radius: 7px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 0.72rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.onb-acciones-numeradas li.onb-skeleton-shimmer { display: block; }
.onb-acciones-numeradas li.onb-skeleton-shimmer::before { content: none; }
.onb-accion-texto { color: var(--text-main); line-height: 1.35; }
.onb-accion-meta {
  font-size: 0.74rem;
  color: var(--text-faint);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.onb-dato-clave { display: block; }
.onb-dato-clave strong {
  display: block;
  color: var(--text-main);
  font-weight: 700;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-bottom: 3px;
}
.onb-dato-clave span {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: break-word;
}

@media (max-height: 760px) {
  .onboarding-header h2 { font-size: 1.15rem; margin-bottom: 4px; }
  .stepper { margin: 6px 0 8px; }
  /* El nombre de cada paso se queda: es lo que le dice al usuario cuánto falta
     y qué viene. Se achica en vez de desaparecer. */
  .stepper-label { font-size: 0.66rem; }
  .stepper-dot { width: 22px; height: 22px; }
  .stepper-line { margin-top: 11px; }
  .onboarding-progreso { margin: 2px 0 8px; }
  #onboarding-view .mockup-skeleton-img { height: 90px; }
}
.onb-chip-input-row {
  display: flex;
  gap: 8px;
}
.onb-chip-input-row input { flex: 1; }
.onb-chip-nota {
  font-size: 0.74rem;
  color: var(--text-faint);
  margin-top: 6px;
  margin-bottom: 0;
}
.onb-ejemplos-texto {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin: 0 2px 0 0;
  align-self: center;
}
.onb-ejemplos-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 10px 0 0;
}
.onb-ejemplo-chip {
  display: inline-flex;
  align-items: center;
  background: none;
  border: 1px dashed var(--border);
  padding: 4px 10px;
  border-radius: 7px;
  font-size: 0.78rem;
  color: var(--text-muted);
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.onb-ejemplo-chip:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--bg-hover);
}
.onb-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 2px;
}
.onb-chip {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  padding: 2px 4px 2px 2px;
  border-radius: 8px;
  font-size: 0.83rem;
  color: var(--text-main);
  transition: border-color 0.15s ease;
}
.onb-chip:hover { border-color: var(--text-faint); }
/* El nombre es un botón: tocarlo devuelve el producto al formulario para editarlo. */
.onb-chip-texto {
  background: none;
  border: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  padding: 4px 6px 4px 8px;
  border-radius: 6px;
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.onb-chip-texto:hover { color: var(--accent); }
.onb-chip-eliminar {
  background: none;
  border: none;
  color: var(--text-faint);
  cursor: pointer;
  font-size: 0.8rem;
  line-height: 1;
  padding: 4px;
  border-radius: 6px;
  display: inline-flex;
}
.onb-chip-eliminar:hover { color: var(--danger); background: var(--bg-hover); }
.onb-opcional-tag {
  font-size: 0.72rem;
  color: var(--text-faint);
  font-weight: 400;
}
.onb-error-banner {
  background: var(--danger-soft);
  border: 1px solid var(--danger);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin-bottom: 16px;
}
.onb-error-banner p {
  color: var(--danger);
  margin: 0 0 10px;
  font-size: 0.85rem;
}
.onb-info-banner {
  background: var(--accent-soft);
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin-bottom: 16px;
}
.onb-info-banner p {
  color: var(--accent);
  margin: 0;
  font-size: 0.85rem;
}
.onb-error-acciones {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.onb-precio-input {
  max-width: 140px;
  flex: 0 0 auto;
}
.onb-subtabs {
  display: flex;
  gap: 14px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--border);
}
.onb-subtab-btn {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-muted);
  font-size: 0.88rem;
  font-weight: 600;
  padding: 8px 2px 10px;
  cursor: pointer;
}
.onb-subtab-btn:hover { color: var(--text-main); }
.onb-subtab-btn.active { color: var(--accent); border-bottom-color: var(--accent); }
.onb-subtab-panel h3:first-child { margin-top: 0; }

/* Tabs del mockup multi-vista (Facebook/Instagram/WhatsApp): clase propia,
   separada de .onb-subtabs (Estrategia/Plan de acción), como pastillas con
   fondo/borde para que sean claramente visibles y clickeables sobre el mockup. */
.mockup-switch-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.mockup-switch-btn {
  background: var(--bg-input);
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 0.82rem;
  font-weight: 600;
  padding: 7px 16px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.mockup-switch-btn:hover { color: var(--text-main); border-color: var(--text-muted); }
.mockup-switch-btn.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.mockup-switch-contador {
  align-self: center;
  margin-left: auto;
  font-size: 0.72rem;
  color: var(--text-faint);
  font-weight: 600;
}

/* Tabs del mockup multi-vista dentro del panel angosto del Wizard Diario
   (a diferencia de .onb-mockup-preview, sin margen/borde superior extra). */
#wizard-mockup-preview .mockup-switch-tabs { margin-bottom: 14px; }
#wizard-mockup-preview .mockup-post { margin: 0; max-width: none; }
#wizard-mockup-preview .mockup-post { margin: 0; max-width: none; }

/* --- SIMULADOR DE CHAT WHATSAPP (motor compartido Onboarding + Wizard Diario) --- */
.whatsapp-chat-contenedor {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 18px 14px;
  min-height: 160px;
  max-height: 300px;
  overflow-y: auto;
  background-image: radial-gradient(var(--border-strong) 0.6px, transparent 0.6px);
  background-size: 14px 14px;
}
.whatsapp-chat-cargando {
  color: var(--text-muted);
  font-size: 0.85rem;
  text-align: center;
  padding: 24px 10px;
  margin: 0;
}
.whatsapp-burbuja-fila {
  display: flex;
  width: 100%;
  animation: whatsapp-aparecer 0.25s ease;
}
.whatsapp-burbuja-fila.cliente { justify-content: flex-start; }
.whatsapp-burbuja-fila.vendedor { justify-content: flex-end; }
.whatsapp-burbuja {
  max-width: 82%;
  padding: 8px 10px 4px;
  border-radius: 10px;
  font-size: 0.85rem;
  line-height: 1.42;
  white-space: pre-wrap;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
}
.whatsapp-burbuja.cliente {
  background: var(--bg-card);
  color: var(--text-main);
  border: 1px solid var(--border);
  border-top-left-radius: 2px;
}
.whatsapp-burbuja.vendedor {
  background: var(--success-soft);
  color: var(--text-main);
  border: 1px solid transparent;
  border-top-right-radius: 2px;
}
.whatsapp-burbuja-hora {
  display: block;
  text-align: right;
  font-size: 0.65rem;
  color: var(--text-faint);
  margin-top: 2px;
}
.whatsapp-chat-acciones {
  display: flex;
  justify-content: center;
  margin-top: 14px;
}
@keyframes whatsapp-aparecer {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Código eliminado por limpieza */
#onb-carga-pagina {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--bg-dark);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
}
#onb-carga-pagina p {
  color: var(--text-muted);
  font-size: 0.92rem;
  margin: 0;
}
.onb-carga-pagina-spinner {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 3px solid var(--border-strong);
  border-top-color: var(--accent);
  animation: onb-girar 0.8s linear infinite;
}
@keyframes onb-girar {
  to { transform: rotate(360deg); }
}
@keyframes onb-shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.onb-skeleton-shimmer {
  color: transparent !important;
  border-color: transparent !important;
  background-image: linear-gradient(90deg, var(--border) 25%, var(--bg-hover) 50%, var(--border) 75%);
  background-size: 200% 100%;
  animation: onb-shimmer 1.4s ease-in-out infinite;
  border-radius: 4px;
  pointer-events: none;
}
@keyframes onb-btn-sweep {
  0% { background-position: 0% 0; }
  100% { background-position: 200% 0; }
}
.onb-btn-cargando {
  position: relative;
  color: #fff !important;
  background-image: linear-gradient(100deg, var(--accent) 0%, var(--accent-hover) 35%, #818cf8 50%, var(--accent-hover) 65%, var(--accent) 100%);
  background-size: 250% 100%;
  animation: onb-btn-sweep 2.2s linear infinite;
  cursor: not-allowed;
  border: none;
  opacity: 1 !important;
}
/* Adelanto de próximas acciones ("rutina" a nivel interno) mostrado en el
   Paso 5 del Onboarding, dentro de "Estrategia encontrada". */
.onb-adelanto-titulo {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-main);
  margin: 10px 0 6px;
}
.onb-adelanto-lista {
  display: flex;
  flex-direction: column;
}
.onb-rutina-item {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 7px 10px;
  margin-bottom: 6px;
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.onb-rutina-item strong { font-size: 0.85rem; line-height: 1.3; }
/* Un solo nivel de énfasis por fila: la acción y su hora arriba, todo lo demás
   como apoyo debajo. Antes la fase competía en tamaño con la acción. */
.onb-rutina-linea {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.onb-rutina-hora {
  flex-shrink: 0;
  font-size: 0.72rem;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}
.onb-rutina-canal {
  display: block;
  margin-top: 1px;
  color: var(--text-faint);
}
/* El peso del día, al lado del título del panel y no como otra fila de texto. */
.onb-plan-resumen {
  margin-left: auto;
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}
.onb-rutina-desc {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 0.78rem;
  line-height: 1.3;
}
.onb-rutina-item small { font-size: 0.72rem; color: var(--text-faint); }
.onb-rutina-item {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.onb-rutina-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.1);
}
.onb-rutina-meta {
  display: flex;
  align-items: center;
  gap: 14px;
}
.onb-rutina-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.onb-rutina-meta-item svg { flex-shrink: 0; opacity: 0.8; }
.onb-rutina-item-oculto { opacity: 0; transform: translateY(6px); }
.opciones-radio {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.opciones-radio label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: normal;
  color: var(--text-main);
  cursor: pointer;
}
.opciones-radio input[type="radio"] {
  width: auto;
}

/* Menú secundario (⋮) de cada negocio: editar / eliminar */
.negocio-item-menu-wrap { position: relative; flex-shrink: 0; padding-right: 4px; }
.negocio-item-kebab {
  background: none;
  border: none;
  color: var(--text-faint);
  font-size: 1rem;
  line-height: 1;
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.negocio-item-kebab:hover { background: var(--bg-hover); color: var(--text-main); }

.negocio-item-menu {
  position: fixed;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-modal);
  min-width: 130px;
  z-index: 200;
  overflow: hidden;
}
.negocio-item-menu button {
  width: 100%;
  background: none;
  border: none;
  text-align: left;
  padding: 8px 10px;
  font-size: 0.78rem;
  color: var(--text-main);
  cursor: pointer;
  font-family: inherit;
}
.negocio-item-menu button:hover { background: var(--bg-hover); }
/* ============================================
   HOME "HOY" — una sola cosa que hacer
   ============================================
   Reemplaza el tablero de cuatro módulos que competían por la atención. La
   tarjeta principal ocupa el lugar de honor; plan, consejo y ventas quedan
   debajo y en segundo plano. */
.home-hoy { display: flex; flex-direction: column; gap: 14px; }
.home-hoy.home-compacto { display: none; }

.home-principal { min-width: 0; }
.hoy-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 26px 28px;
}
.hoy-card-feedback { border-left-color: var(--gold); }
.hoy-card-seguimiento { border-left-color: var(--danger); }
.hoy-card-ok { border-left-color: var(--success); }

.hoy-etiqueta {
  display: inline-block;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 8px;
}
.hoy-card-feedback .hoy-etiqueta { color: var(--gold); }
.hoy-card-seguimiento .hoy-etiqueta { color: var(--danger); }
.hoy-card-ok .hoy-etiqueta { color: var(--success); }

.hoy-titulo { font-size: 1.35rem; font-weight: 700; letter-spacing: -0.4px; line-height: 1.3; margin-bottom: 6px; }
.hoy-descripcion { color: var(--text-muted); font-size: 0.92rem; line-height: 1.5; margin-bottom: 14px; }
.hoy-nota { color: var(--text-faint); font-size: 0.78rem; margin-top: 10px; }

.hoy-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.hoy-meta-item {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 0.78rem;
  color: var(--text-muted);
  font-weight: 500;
}
.hoy-acciones { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.hoy-acciones .btn-secundario { margin-left: 0; }
.btn-grande { padding: 13px 30px; font-size: 0.95rem; }

/* Plan del día: colapsable, cerrado por defecto */
.home-bloque {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.home-bloque-titulo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 16px 20px;
  cursor: pointer;
  font-size: 0.88rem;
  font-weight: 600;
  list-style: none;
}
.home-bloque-titulo::-webkit-details-marker { display: none; }
.home-bloque-titulo-texto { display: inline-flex; align-items: center; gap: 8px; }
.home-bloque-titulo-texto svg { color: var(--text-muted); flex-shrink: 0; }
.home-bloque-meta { font-size: 0.78rem; color: var(--text-muted); font-weight: 500; }
.home-bloque[open] .home-bloque-titulo { border-bottom: 1px solid var(--border); }
.home-bloque-cuerpo { padding: 14px 20px 18px; }

.home-secundario { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
.home-secundario .card { margin-bottom: 0; }

/* ============================================
   WIZARD (aparece bajo demanda)
   ============================================ */
.wizard-barra { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.wizard-barra .stepper-mini { margin: 6px 0 14px; }
.wizard-cerrar {
  background: var(--bg-input);
  border: 1px solid var(--border);
  color: var(--text-muted);
  border-radius: var(--radius-sm);
  padding: 8px;
  cursor: pointer;
  display: inline-flex;
  flex-shrink: 0;
}
.wizard-cerrar:hover { background: var(--bg-hover); color: var(--text-main); }
.wizard-botones-derecha { display: flex; gap: 10px; flex-wrap: wrap; }
.wizard-final-acciones { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 16px; }
.wizard-final-acciones .btn-secundario { margin-left: 0; }

/* ============================================
   FEEDBACK "¿CÓMO TE FUE?"
   ============================================
   Tres botones y ningún campo de texto: es la única forma de que alguien que
   está atendiendo su negocio responda de verdad. */
.wizard-feedback { margin: 18px 0 4px; }
.feedback-pregunta { font-size: 0.9rem; color: var(--text-main); margin-bottom: 12px; line-height: 1.45; }
.feedback-listo { color: var(--success); font-weight: 600; }
.feedback-nota { font-size: 0.75rem; color: var(--text-faint); margin-top: 10px; }
.feedback-botones { display: flex; gap: 10px; flex-wrap: wrap; }
.feedback-btn {
  flex: 1 1 140px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px 12px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-main);
  cursor: pointer;
  font-family: inherit;
  transition: border-color 0.15s ease, transform 0.1s ease, background 0.15s ease;
}
.feedback-btn:hover { border-color: var(--accent); background: var(--bg-hover); transform: translateY(-2px); }
.feedback-btn-exito:hover { border-color: var(--success); }
.feedback-btn-emoji { font-size: 1.35rem; line-height: 1; }

/* ============================================
   AVISOS (reemplazan a alert())
   ============================================ */
.avisos-container {
  position: fixed;
  right: 20px;
  bottom: 92px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 300;
  pointer-events: none;
}
.aviso {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bg-card);
  border: 1px solid var(--border-strong);
  border-left: 3px solid var(--success);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-modal);
  padding: 12px 16px;
  font-size: 0.85rem;
  color: var(--text-main);
  max-width: 340px;
  animation: aviso-entrar 0.22s ease;
}
.aviso-icono { display: inline-flex; flex-shrink: 0; }
.aviso-ok { border-left-color: var(--success); }
.aviso-ok .aviso-icono { color: var(--success); }
.aviso-error { border-left-color: var(--danger); }
.aviso-error .aviso-icono { color: var(--danger); }
.aviso-info { border-left-color: var(--accent); }
.aviso-info .aviso-icono { color: var(--accent); }
.aviso-saliendo { opacity: 0; transform: translateX(12px); transition: opacity 0.3s ease, transform 0.3s ease; }
@keyframes aviso-entrar {
  from { opacity: 0; transform: translateX(16px); }
  to { opacity: 1; transform: translateX(0); }
}

/* Modal de confirmación propio (reemplaza a confirm()) */
.modal-confirmar-texto { color: var(--text-muted); font-size: 0.9rem; line-height: 1.5; margin-bottom: 18px; }
.modal-botones-derecha { justify-content: flex-end; }
.btn-peligro { background: var(--danger); }
.btn-peligro:hover { background: var(--danger); filter: brightness(0.92); }

/* ============================================
   COPY LEGIBLE
   ============================================
   El copy es lo que el usuario va a pegar en Facebook: debe leerse como un
   post. Solo el prompt de imagen conserva la fuente monoespaciada, porque sí
   es un texto técnico que se copia a otra herramienta. */
.output-block-texto-texto {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--text-main);
}
.output-block-texto-tecnico {
  font-family: 'SF Mono', 'Consolas', monospace;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--text-muted);
}
.output-block-ayuda { font-size: 0.75rem; color: var(--text-faint); margin: -4px 0 8px; }

/* ============================================
   VARIOS
   ============================================ */
.opciones-pastillas { display: flex; flex-wrap: wrap; gap: 8px; }
.opcion-pastilla {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 0.84rem;
  font-weight: 500;
  color: var(--text-main);
  cursor: pointer;
  margin-bottom: 0;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.opcion-pastilla input { width: auto; margin: 0; }
.opcion-pastilla:hover { border-color: var(--text-muted); }
.opcion-pastilla:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.onb-cadencia { border-top: 1px solid var(--border); margin-top: 18px; padding-top: 16px; }
.onb-cadencia > .onb-lista-titulo { display: block; margin-bottom: 10px; }
.onb-cadencia .opciones-pastillas { gap: 6px; }
.onb-cadencia .opcion-pastilla { padding: 6px 12px; font-size: 0.82rem; }

.precio-sugerido { color: var(--gold); font-weight: 600; }
.onb-editable-tag {
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: 4px;
  padding: 1px 5px;
  margin-left: 4px;
}
.onb-input-editable { border-style: dashed; }
.onb-input-editable:focus { border-style: solid; }

.plataforma-icono-facebook { color: #1877f2; }
.plataforma-icono-instagram { color: #d62976; }
.plataforma-icono-tiktok { color: var(--text-main); }
.plataforma-icono-whatsapp { color: #25d366; }
.plataforma-icono-marketplace { color: var(--accent); }

/* ============================================
   RESPONSIVE — la app se usa desde el celular
   ============================================
   Este era el problema más caro de todos: el público objetivo de Kreos
   vende por WhatsApp desde un Android, y la app estaba pensada solo para una
   pantalla de escritorio. */
@media (max-width: 900px) {
  body { display: block; padding-top: 56px; }

  .topbar {
    display: flex;
    align-items: center;
    gap: 12px;
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 56px;
    padding: 0 14px;
    background: var(--bg-card);
    border-bottom: 1px solid var(--border);
    z-index: 95;
  }
  .topbar-menu { background: none; border: none; color: var(--text-main); cursor: pointer; display: inline-flex; padding: 4px; }
  .topbar-marca { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; font-size: 0.92rem; color: var(--accent); }
  .topbar-negocio {
    margin-left: auto;
    font-size: 0.78rem;
    color: var(--text-muted);
    max-width: 40%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  sidebar {
    position: fixed;
    top: 0; bottom: 0; left: 0;
    z-index: 100;
    width: 268px;
    max-width: 84vw;
    height: 100%;
    transform: translateX(-100%);
    transition: transform 0.22s ease;
  }
  body.sidebar-abierta sidebar { transform: translateX(0); }
  .sidebar-cerrar { display: inline-flex; }

  main { padding: 18px 16px 96px; }
  .tab-content, #tab-director.tab-content { max-width: 100%; }

  .home-secundario { grid-template-columns: 1fr; }
  .hoy-card { padding: 20px 18px; }
  .hoy-titulo { font-size: 1.15rem; }
  .hoy-acciones { flex-direction: column; align-items: stretch; }
  .hoy-acciones .btn, .hoy-acciones a.btn { width: 100%; text-align: center; }

  .director-layout { grid-template-columns: 1fr; gap: 18px; }
  .wizard-preview { position: static; max-height: none; }
  #wizard-mockup-preview { transform: none; }
  .output-grid { grid-template-columns: 1fr; }
  .wizard-paso1-grid, .onb-paso1-grid, .onb-grid-2col, .onb-estrategia-grid, .onb-resumen-stats { grid-template-columns: 1fr; }
  .wizard-botones { flex-direction: column; align-items: stretch; }
  .wizard-botones-derecha { flex-direction: column; }
  .wizard-botones .btn, .wizard-botones .btn-secundario { width: 100%; margin-left: 0; }

  .card { padding: 18px 16px; }
  h1 { font-size: 1.1rem; }

  .avisos-container { right: 12px; left: 12px; bottom: 84px; }
  .aviso { max-width: none; }

  .consultoria-fab { right: 16px; bottom: 16px; width: 50px; height: 50px; }

  .onboarding-container { padding: 16px 16px 20px; max-height: 96vh; }
  #onboarding-view { padding: 10px; }
  .onb-confidencial-bar { flex-direction: column; align-items: stretch; gap: 12px; }
  .onb-confidencial-bar .btn { width: 100%; justify-content: center; }
  .onb-chip-input-row { flex-wrap: wrap; }
  .onb-chip-input-row input { flex: 1 1 100%; }
  .onb-chip-input-row .btn { flex: 1 1 100%; justify-content: center; }
  .onb-precio-input { max-width: none; }
  #onb-productos-lista { max-height: 140px; }
  .onb-chip-texto { max-width: 190px; }
  .plataforma-checklist { grid-template-columns: 1fr 1fr; gap: 6px; }
  .plataforma-item { padding: 8px; font-size: 0.8rem; }

  .tabla-analisis { font-size: 0.78rem; }
  .tabla-analisis th, .tabla-analisis td { padding: 8px 5px; }
  .seguimiento-item { flex-direction: column; }
  .modal-box { padding: 20px; }
  .feedback-btn { flex: 1 1 100%; flex-direction: row; justify-content: center; }
}

@media (max-width: 480px) {
  .stepper-label { display: none; }
  .termometro-botones { flex-direction: column; }
  .termometro-botones .btn { width: 100%; }
}
/* ============================================
   VISTA PREVIA REALISTA
   ============================================
   El mockup pasa de "miniatura decorativa" a algo que se lee como la
   publicación real: mismos tamaños de fuente, mismo alto de imagen y misma
   jerarquía que Facebook e Instagram. El usuario tiene que poder juzgar su
   propio post sin publicarlo. */
.wizard-preview .mockup-post {
  border-radius: 10px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.22);
}
.wizard-preview .mockup-header { padding: 14px 14px 0; gap: 10px; }
.wizard-preview .mockup-avatar { width: 44px; height: 44px; }
.wizard-preview .mockup-nombre { font-size: 0.97rem; }
.wizard-preview .mockup-fecha { font-size: 0.8rem; margin-top: 1px; }
.wizard-preview .mockup-texto { font-size: 0.97rem; line-height: 1.42; padding: 10px 14px 4px; }
.wizard-preview .mockup-ver-mas { margin: 0 14px 10px; font-size: 0.95rem; }
.wizard-preview .mockup-skeleton-img { height: 300px; font-size: 0.85rem; }
.wizard-preview .mockup-img { max-height: 420px; }
.wizard-preview .mockup-reacciones { padding: 10px 14px; font-size: 0.85rem; }
.wizard-preview .mockup-acciones { font-size: 0.9rem; padding: 4px 8px; }
.wizard-preview .mockup-acciones span { padding: 10px 0; }
.wizard-preview .mockup-cta-box { padding: 14px; font-size: 0.95rem; }
.wizard-preview .whatsapp-chat-contenedor { min-height: 340px; max-height: 460px; padding: 20px 16px; }
.wizard-preview .whatsapp-burbuja { font-size: 0.9rem; max-width: 78%; }
/* Instagram muestra la imagen antes del texto y en formato 4:5. */
.wizard-preview #wizard-mockup-vista-instagram .mockup-skeleton-img { height: 380px; }
.wizard-preview .mockup-switch-btn { padding: 8px 16px; font-size: 0.8rem; }

/* Con la columna de vista previa ancha, el contenido central necesita más aire. */
#tab-director.tab-content { max-width: 1320px; }

@media (max-width: 1180px) {
  .director-layout { grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; }
}
@media (max-width: 1000px) {
  .director-layout { grid-template-columns: 1fr; }
  .wizard-preview { position: static; max-height: none; }
  .wizard-preview .mockup-skeleton-img { height: 220px; }
}

/* ============================================
   PANEL "CÓMO QUIERES QUE SUENE" (voz de marca)
   ============================================ */
.voz-panel {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  margin: 4px 0 14px;
  overflow: hidden;
}
.voz-panel-titulo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 14px;
  cursor: pointer;
  font-size: 0.83rem;
  font-weight: 600;
  list-style: none;
}
.voz-panel-titulo::-webkit-details-marker { display: none; }
.voz-panel-titulo-texto { display: inline-flex; align-items: center; gap: 8px; }
.voz-panel-titulo-texto svg { color: var(--text-muted); flex-shrink: 0; }
.voz-resumen { font-size: 0.75rem; color: var(--accent); font-weight: 500; text-align: right; }
.voz-panel[open] .voz-panel-titulo { border-bottom: 1px solid var(--border); }
.voz-panel-cuerpo { padding: 14px; }
.voz-panel-nota { font-size: 0.76rem; color: var(--text-muted); margin-bottom: 14px; line-height: 1.45; }
.voz-grupo { margin-bottom: 14px; }
.voz-grupo:last-child { margin-bottom: 0; }
.voz-grupo-titulo {
  display: block;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--text-muted);
  font-weight: 600;
  margin-bottom: 7px;
}
.voz-grupo .opcion-pastilla { padding: 6px 12px; font-size: 0.8rem; }

/* Insignia "aquí cierras la venta" sobre las redes recomendadas del Paso 3 */
.plataforma-item-cierre { border-color: var(--success); background: var(--success-soft); }
.insignia-cierre {
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  font-weight: 700;
  color: var(--success);
  background: var(--bg-card);
  border: 1px solid var(--success);
  border-radius: 20px;
  padding: 3px 8px;
  white-space: nowrap;
  flex-shrink: 0;
}
.insignia-cierre-mover {
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--text-faint);
  background: none;
  border: 1px dashed var(--border-strong);
  border-radius: 20px;
  padding: 3px 8px;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  font-family: inherit;
}
.insignia-cierre-mover:hover { color: var(--success); border-color: var(--success); border-style: solid; }

/* Dos acciones por bloque generado: enviar y copiar */
.output-block-acciones { display: inline-flex; gap: 6px; flex-shrink: 0; }

/* ============================================
   CALENDARIO DE 7 DÍAS
   ============================================
   Tira, no cuadrícula. Una cuadrícula mensual muestra 30 casillas y las 22
   vacías se leen como fracaso: es lo contrario a "todo está controlado".
   Aquí no hay rojos ni la palabra "atrasado". */
.calendario-semana {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 14px 18px 16px;
}
.semana-cabecera { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; gap: 10px; }
.semana-titulo { font-size: 0.8rem; font-weight: 700; letter-spacing: -0.1px; }
.semana-resumen { font-size: 0.74rem; color: var(--text-muted); }
.semana-tira { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.dia-celda {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 8px 2px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
}
.dia-letra { font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.4px; color: var(--text-faint); font-weight: 600; }
.dia-numero { font-size: 0.72rem; color: var(--text-faint); font-variant-numeric: tabular-nums; }
.dia-punto {
  width: 22px; height: 22px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-input); border: 1px solid var(--border);
  color: #fff;
}
.dia-hecho .dia-punto { background: var(--success); border-color: var(--success); }
.dia-plan .dia-punto { background: var(--accent-soft); border-color: var(--accent); }
.dia-pasado .dia-punto { background: transparent; border-style: dashed; }
.dia-descanso .dia-punto { background: transparent; border-color: var(--border); opacity: 0.5; }
.dia-es-hoy { background: var(--bg-input); border-color: var(--border-strong); }
.dia-es-hoy .dia-letra, .dia-es-hoy .dia-numero { color: var(--text-main); font-weight: 700; }
.dia-hoy .dia-punto { border-color: var(--accent); border-width: 2px; }

/* ============================================
   CARTAS DE INTENSIDAD
   ============================================ */
.cartas-intensidad:empty { display: none; }
.cartas-titulo { font-size: 0.82rem; font-weight: 600; margin-bottom: 10px; }
.cartas-motivo { font-weight: 400; color: var(--text-muted); font-size: 0.78rem; }
.cartas-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
@media (max-width: 720px) { .cartas-grid { grid-template-columns: 1fr; } }
.carta {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  text-align: left;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px 14px 13px;
  cursor: pointer;
  font-family: inherit;
  transition: border-color .15s ease, transform .1s ease, background .15s ease;
}
.carta:hover { border-color: var(--border-strong); transform: translateY(-2px); }
.carta-activa { border-color: var(--accent); background: var(--accent-soft); }
.carta-icono { color: var(--text-muted); display: inline-flex; }
.carta-activa .carta-icono { color: var(--accent); }
.carta-nombre { font-size: 0.92rem; font-weight: 700; color: var(--text-main); }
.carta-datos { font-size: 0.75rem; color: var(--accent); font-weight: 600; }
.carta-promesa { font-size: 0.74rem; color: var(--text-muted); line-height: 1.4; }
.carta-recomendada {
  position: absolute; top: -8px; right: 10px;
  font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.4px; font-weight: 700;
  color: var(--gold); background: var(--bg-card);
  border: 1px solid var(--gold); border-radius: 20px; padding: 2px 8px;
}

/* --- BANCO DE PUBLICACIONES --- */
.nav-badge {
  margin-left: auto;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 20px; font-size: 0.68rem; font-weight: 700;
  background: var(--accent); color: #fff;
}
.banco-resumen { color: var(--text-muted); font-size: 0.86rem; margin: 0 0 18px; max-width: 640px; }
.banco-titulo {
  font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.6px;
  color: var(--text-faint); font-weight: 700; margin: 22px 0 10px;
}
.banco-vacio {
  border: 1px dashed var(--border-strong); border-radius: var(--radius-md);
  padding: 28px 22px; text-align: center; color: var(--text-muted);
}
.banco-vacio p { margin: 0 0 14px; font-size: 0.88rem; max-width: 460px; margin-inline: auto; }
.pub-lista { display: flex; flex-direction: column; gap: 12px; }
.pub-card {
  display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 14px;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: 12px; align-items: start;
}
.pub-card-hecha { opacity: 0.72; }
.pub-card-media {
  width: 128px; height: 128px; border-radius: var(--radius-sm); overflow: hidden;
  background: var(--bg-soft); display: flex; align-items: center; justify-content: center;
}
.pub-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pub-card-sinimagen {
  font-size: 0.72rem; color: var(--text-faint); text-align: center; padding: 8px; line-height: 1.4;
}
.pub-card-sinimagen span { font-size: 0.64rem; opacity: 0.75; }
.pub-card-cuerpo { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.pub-card-header { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pub-card-titulo { font-weight: 700; color: var(--text-main); font-size: 0.94rem; }
.pub-card-canal {
  font-size: 0.68rem; font-weight: 600; color: var(--text-muted);
  background: var(--bg-soft); border: 1px solid var(--border);
  border-radius: 20px; padding: 2px 9px;
}
.pub-card-extracto {
  margin: 0; font-size: 0.82rem; color: var(--text-muted); line-height: 1.5;
  white-space: pre-wrap; word-break: break-word;
}
.pub-card-hashtags { margin: 0; font-size: 0.74rem; color: var(--accent); word-break: break-word; }
.pub-card-dia { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pub-card-dia label { font-size: 0.74rem; color: var(--text-faint); font-weight: 600; }
.pub-card-dia select { max-width: 220px; padding: 6px 9px; font-size: 0.8rem; }
.pub-card-atrasada { font-size: 0.72rem; color: var(--gold); }
.pub-card-acciones { display: flex; gap: 8px; flex-wrap: wrap; }
.pub-card-acciones .btn { padding: 8px 14px; font-size: 0.82rem; }
.pub-card-acciones-mini { display: flex; gap: 10px; flex-wrap: wrap; }
.btn-mini-peligro { color: var(--danger); }
.pub-card-estado-final { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: 0.76rem; color: var(--text-faint); }
.pub-card-resultado { color: var(--text-muted); font-weight: 600; }
.pub-card-resultado-pendiente { color: var(--gold); }
.hoy-card-lista { border-color: var(--accent); }
.hoy-extracto {
  margin: 0 0 4px; padding: 10px 12px; border-radius: var(--radius-sm);
  background: var(--bg-soft); border: 1px solid var(--border);
  font-size: 0.82rem; color: var(--text-muted); line-height: 1.5; white-space: pre-wrap;
}
.btn-enlace {
  background: none; border: none; padding: 0; cursor: pointer;
  color: var(--accent); font: inherit; font-size: inherit; text-decoration: underline;
}
.feedback-dia { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 12px; }
.feedback-dia label { font-size: 0.78rem; color: var(--text-faint); font-weight: 600; }
.feedback-dia select { max-width: 230px; padding: 7px 10px; font-size: 0.82rem; }
@media (max-width: 720px) {
  .pub-card { grid-template-columns: 1fr; }
  .pub-card-media { width: 100%; height: 170px; }
}

/* --- PANEL DE ESTILO DE IMAGEN --- */
#panel-estilo-imagen { display: flex; flex-direction: column; gap: 12px; margin: 4px 0 12px; }
.estilo-grupo { display: flex; flex-direction: column; gap: 7px; }
.estilo-grupo-titulo {
  font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.5px;
  color: var(--text-faint); font-weight: 700;
}
.estilo-pastillas { display: flex; gap: 7px; flex-wrap: wrap; }
.estilo-pastilla {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  background: var(--bg-soft); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 7px 11px; cursor: pointer;
  font-family: inherit; text-align: left; transition: border-color .15s ease, background .15s ease;
}
.estilo-pastilla:hover { border-color: var(--border-strong); }
.estilo-pastilla-activa { border-color: var(--accent); background: var(--accent-soft); }
.estilo-pastilla-nombre { font-size: 0.8rem; font-weight: 700; color: var(--text-main); }
.estilo-pastilla-fuerza { font-size: 0.66rem; color: var(--text-faint); letter-spacing: 0.5px; }
.estilo-pastilla-activa .estilo-pastilla-fuerza { color: var(--accent); }
.estilo-ayuda { margin: 0; font-size: 0.74rem; color: var(--text-muted); line-height: 1.45; }
.estilo-ayuda-aviso { color: var(--gold); }

/* --- PANEL DE FORMATO (cambiar después de ver el resultado) --- */
.panel-formato { display: flex; flex-direction: column; gap: 8px; margin: 0 0 14px; }
.panel-formato:empty { display: none; }
.formato-etiqueta { font-size: 0.78rem; color: var(--text-muted); }
.formato-etiqueta strong { color: var(--text-main); }

/* --- ONBOARDING: pantalla de análisis --- */
.onb-carga-sub { color: var(--text-muted); font-size: 0.88rem; margin: 6px 0 18px; }
.onb-carga-barra {
  display: block; height: 4px; width: 100%; max-width: 420px;
  border-radius: 4px; background: var(--border); overflow: hidden; margin-bottom: 20px;
}
.onb-carga-barra-fill {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--accent), var(--gold));
  transition: width .6s cubic-bezier(.4,0,.2,1);
}
.aviso-canal-fallback { color: var(--gold); }

/* La ilustración del Paso 1 va superpuesta a la derecha del banner: el texto
   necesita su propio carril o se leen las dos capas encima. */
.onb-intro-textos { padding-right: 116px; }

/* --- PANTALLA DE INICIO DE DÍA (cartas de intensidad a pantalla completa) --- */
/* No usa el lenguaje visual de una tabla de precios a propósito: si parece un
   paywall, el usuario aprende a descartarla — y el patrón queda quemado para
   cuando existan planes de verdad. */
body.dia-overlay-abierto { overflow: hidden; }
.dia-overlay {
  position: fixed; inset: 0; z-index: 120;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background: color-mix(in srgb, var(--bg-dark) 90%, transparent);
  backdrop-filter: blur(10px);
  animation: diaFade .25s ease;
}
@keyframes diaFade { from { opacity: 0; } to { opacity: 1; } }
.dia-panel {
  width: 100%; max-width: 900px;
  max-height: 92vh; overflow-y: auto;
  animation: diaSubir .35s cubic-bezier(.2,.7,.3,1);
}
@keyframes diaSubir { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.dia-fecha {
  margin: 0 0 6px; font-size: 0.72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 1px; color: var(--accent);
}
.dia-titulo { margin: 0 0 8px; font-size: 1.9rem; line-height: 1.15; color: var(--text-main); }
.dia-bajada { margin: 0 0 26px; color: var(--text-muted); font-size: 0.95rem; max-width: 620px; }
.dia-cartas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 26px; }
.dia-carta {
  position: relative; text-align: left;
  display: flex; flex-direction: column; gap: 7px;
  min-height: 210px;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: 20px 18px 18px;
  cursor: pointer; font-family: inherit;
  transition: border-color .15s ease, transform .12s ease, background .15s ease;
}
.dia-carta:hover { border-color: var(--border-strong); transform: translateY(-2px); }
/* Fondo en capas: con solo accent-soft (translúcido) se veía el dashboard
   desenfocado a través de la carta seleccionada. */
.dia-carta-activa {
  border-color: var(--accent);
  background: linear-gradient(var(--accent-soft), var(--accent-soft)), var(--bg-card);
}
.dia-carta-tag {
  position: absolute; top: -9px; left: 16px;
  font-size: 0.6rem; text-transform: uppercase; letter-spacing: .5px; font-weight: 700;
  color: var(--gold); background: var(--bg-card);
  border: 1px solid var(--gold); border-radius: 20px; padding: 3px 9px;
}
.dia-carta-head { display: flex; align-items: center; gap: 8px; }
.dia-carta-icono { color: var(--text-muted); display: inline-flex; }
.dia-carta-activa .dia-carta-icono { color: var(--accent); }
.dia-carta-nombre { font-size: 1.05rem; font-weight: 700; color: var(--text-main); }
.dia-carta-esfuerzo { font-size: 0.8rem; font-weight: 700; color: var(--accent); }
.dia-carta-promesa { font-size: 0.8rem; color: var(--text-muted); line-height: 1.45; }
/* Solo la primera acción y un contador. Listar las 6 hacía que la carta de
   Fuerte fuera un muro de texto y la de Suave un hueco vacío: el usuario tiene
   que poder comparar de un vistazo, no ponerse a leer a las 7 de la mañana. */
.dia-carta-lista {
  display: flex; flex-direction: column; gap: 4px;
  margin-top: auto; padding-top: 12px; border-top: 1px solid var(--border);
}
.dia-carta-item {
  font-size: 0.76rem; color: var(--text-muted); line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.dia-carta-mas { font-size: 0.72rem; color: var(--text-faint); }
.dia-carta-activa .dia-carta-item { color: var(--text-main); }
.dia-acciones { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.dia-acciones .btn-grande { min-width: 190px; }
.cartas-cambiar { margin-left: 8px; font-size: 0.76rem; }
@media (max-width: 780px) {
  .dia-cartas { grid-template-columns: 1fr; gap: 11px; }
  .dia-titulo { font-size: 1.45rem; }
  .dia-carta { min-height: 0; }
  .dia-acciones .btn-grande { width: 100%; }
}
@media (max-width: 720px) { .onb-intro-textos { padding-right: 0; } }

/* --- ONBOARDING: campo de descripción con motivo en vez de regla --- */
.onb-desc-mensaje { display: block; margin-bottom: 6px; }
.onb-desc-barra {
  display: block; height: 3px; border-radius: 3px;
  background: var(--border); overflow: hidden;
}
/* --- ONBOARDING PASO 3: que entre sin scroll --- */
/* Los valores son inputs de ancho fijo: sin width:100% + min-width:0 el texto
   se cortaba ("Artesanía y Pe|", "Aumentar ven"). */
.onb-resumen-stat { padding: 10px 12px; gap: 9px; min-width: 0; }
.onb-resumen-stat-textos { min-width: 0; flex: 1; }
.onb-resumen-stat-valor { width: 100%; min-width: 0; font-size: 0.86rem; }
input.onb-resumen-stat-valor { padding: 3px 6px; }
.onb-resumen-stat-label { font-size: 0.62rem; letter-spacing: .4px; }
.onb-resumen-stat .onb-panel-icono, .onb-resumen-stat > svg { flex-shrink: 0; }

/* Las redes recomendadas ocupaban 4 filas de 64px: comprimidas entran junto al
   resto del paso sin obligar a scrollear. */
#onb-redes-recomendadas .plataforma-item { padding: 6px 9px; gap: 7px; }
#onb-redes-recomendadas .plataforma-icono { width: 26px; height: 26px; }
#onb-redes-recomendadas .plataforma-nombre { font-size: 0.82rem; }
#onb-redes-recomendadas .onb-red-recomendada-rol { font-size: 0.68rem; line-height: 1.25; }
#onb-redes-recomendadas .insignia-cierre,
#onb-redes-recomendadas .insignia-cierre-mover { font-size: 0.6rem; padding: 2px 7px; }
.onb-panel-oportunidad { padding: 14px 16px; }
.onb-resumen-oportunidad { font-size: 0.88rem; line-height: 1.5; }

/* --- PASO 1: un solo bloque de atención --- */
/* Antes había una tarjeta-banner con título propio encima del título que ya
   trae el contenedor: dos encabezados apilados. Ahora es un encabezado plano. */
.onb-encabezado {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; margin-bottom: 22px;
}
.onb-encabezado h2 { margin: 0 0 4px; font-size: 1.45rem; line-height: 1.2; color: var(--text-main); }
.onb-encabezado p { margin: 0; color: var(--text-muted); font-size: 0.9rem; max-width: 620px; }
.onb-encabezado-arte { flex-shrink: 0; opacity: .85; }
@media (max-width: 720px) { .onb-encabezado-arte { display: none; } }

/* El campo héroe: caja, barra y contador viven dentro del mismo recuadro, así
   se leen como una sola pieza en vez de cuatro elementos sueltos. */
.onb-campo-principal { margin-bottom: 20px; }
.onb-campo-principal label {
  display: block; margin-bottom: 8px;
  font-size: 1rem; font-weight: 600; color: var(--text-main);
}
.onb-campo-caja {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 4px 4px 8px;
  transition: border-color .15s ease;
}
.onb-campo-caja:focus-within { border-color: var(--accent); }
.onb-campo-caja textarea {
  width: 100%; min-height: 84px; resize: none;
  background: transparent; border: 0; outline: none;
  padding: 12px 14px 6px;
  line-height: 1.55; font-size: 0.93rem; color: var(--text-main);
}
.onb-desc-barra {
  display: block; height: 2px; margin: 0 14px;
  border-radius: 2px; background: var(--border); overflow: hidden;
}
.onb-desc-barra-fill {
  display: block; height: 100%; width: 0;
  background: var(--text-faint);
  transition: width .25s ease, background .25s ease;
}
.onb-desc-barra-fill.onb-desc-barra-lista { background: var(--success); }
.onb-desc-pie {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 8px 14px 2px;
}
.onb-desc-pie .onb-chip-nota { margin: 0; font-size: 0.78rem; }
.onb-desc-contador {
  flex-shrink: 0; font-size: 0.72rem; font-weight: 600;
  color: var(--text-faint); font-variant-numeric: tabular-nums;
}
.onb-desc-contador-tope { color: var(--gold); }

/* Eco en vivo: sin llamadas a la IA, puras reglas locales. */
.onb-eco {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  margin-top: 12px;
  animation: ecoAparece .3s ease;
}
@keyframes ecoAparece { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }
.onb-eco-label {
  font-size: 0.66rem; text-transform: uppercase; letter-spacing: .7px;
  font-weight: 700; color: var(--text-faint); margin-right: 2px;
}
.onb-eco-chip {
  font-size: 0.74rem; font-weight: 600; color: var(--accent);
  background: var(--accent-soft); border: 1px solid transparent;
  border-radius: 20px; padding: 3px 10px;
}

/* Las redes de "¿dónde vendes hoy?" pasan a chips en línea: eran 6 cajas
   apiladas para un dato opcional. */
.onb-chips-redes { display: flex; flex-wrap: wrap; gap: 6px; }
.onb-chips-redes .plataforma-item {
  padding: 6px 11px; border-radius: 20px; background: var(--bg-input);
  font-size: 0.8rem; gap: 6px; width: auto;
}
.onb-chips-redes .plataforma-item:has(input:checked) {
  border-color: var(--accent);
  background: linear-gradient(var(--accent-soft), var(--accent-soft)), var(--bg-input);
}
.onb-chips-redes input[type="checkbox"] { width: 14px; height: 14px; }
.onb-chips-redes #onb-redes-otros-texto { flex-basis: 100%; margin-top: 4px; }

/* El pie deja de ser un panel de color: una línea discreta y el botón. */
.onb-confidencial-bar { background: transparent; border: 0; border-top: 1px solid var(--border); border-radius: 0; padding: 16px 0 0; margin-top: 4px; }
.onb-confidencial-texto { color: var(--text-faint); font-size: 0.78rem; }
.onb-confidencial-texto .onb-shield-icon { width: 16px; height: 16px; opacity: .7; }

/* --- PASO 1: acabado del mockup --- */
/* Más aire y una sombra real, pero con radios contenidos: la referencia no es
   redonda, es sobria. */
.onboarding-container { border-radius: 12px; box-shadow: 0 32px 64px rgba(0,0,0,.5); }
.onb-encabezado { margin-bottom: 26px; }
.onb-encabezado h2 { font-size: 1.6rem; letter-spacing: -0.01em; }
.onb-campo-caja { border-radius: 10px; padding: 6px 6px 10px; }
.onb-campo-caja textarea { min-height: 104px; padding: 14px 16px 8px; font-size: 0.95rem; }
.onb-desc-barra { margin: 0 16px; }
.onb-desc-pie { padding: 10px 16px 2px; }
.onb-paso1-grid { gap: 24px; margin-top: 4px; }
.onb-campo-principal { margin-bottom: 22px; }
#onboarding-paso-1 .form-group input[type="text"] { border-radius: 8px; padding: 12px 14px; }
/* Rectángulo redondeado, no cápsula: es lo que se ve en la referencia. */
.onb-chips-redes .plataforma-item { border-radius: 8px; padding: 8px 14px; }
.onb-stepper .stepper-item.active .stepper-label { color: var(--accent); font-weight: 700; }

/* Va al final de la frase a propósito: con la palabra en medio había que
   reservarle un ancho fijo y quedaba un hueco antes del punto. */
.onb-rota {
  display: inline-block;
  color: var(--text-main); font-weight: 600;
  transition: opacity .26s ease, transform .26s ease;
}
.onb-rota-saliendo { opacity: 0; transform: translateY(-4px); }

/* Los chips de "voy entendiendo" son informativos: nada que invite a tocarlos. */
.onb-eco-chip { cursor: default; user-select: none; }

/* Destello único al desbloquearse, y después un estado sólido un punto más vivo
   que el normal. Nunca en bucle. */
.btn-listo { box-shadow: 0 0 0 1px var(--accent-hover), 0 6px 18px rgba(99,102,241,.28); }
.btn-destello { position: relative; overflow: hidden; }
.btn-destello::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.42) 50%, transparent 65%);
  transform: translateX(-120%);
  animation: btnBarrido .85s ease-out 1;
  pointer-events: none;
}
@keyframes btnBarrido { to { transform: translateX(120%); } }
@media (prefers-reduced-motion: reduce) {
  .btn-destello::after { animation: none; display: none; }
  .onb-rota { transition: none; }
}

/* Sin casillas: la píldora entera es el control. El input sigue ahí para el
   teclado y los lectores de pantalla, pero no se ve. */
.onb-chips-redes input[type="checkbox"] {
  position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none;
}
.onb-chips-redes .plataforma-item {
  position: relative; gap: 0; border: 1px solid var(--border-strong);
  color: var(--text-muted); font-weight: 500;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.onb-chips-redes .plataforma-item:hover { border-color: var(--text-faint); color: var(--text-main); }
.onb-chips-redes .plataforma-item:has(input:checked) {
  color: var(--text-main); font-weight: 600;
  border-color: var(--accent);
  background: linear-gradient(var(--accent-soft), var(--accent-soft)), var(--bg-input);
}
.onb-chips-redes .plataforma-item:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }

/* --- PASO "ESTO ENTENDIMOS": ajustes --- */
/* Los cuatro datos ahora son corregibles: selects e inputs se ven igual para
   que la fila lea como una sola pieza. */
select.onb-resumen-stat-valor {
  appearance: none; -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--text-faint) 50%),
                    linear-gradient(135deg, var(--text-faint) 50%, transparent 50%);
  background-position: calc(100% - 11px) center, calc(100% - 7px) center;
  background-size: 4px 4px, 4px 4px;
  background-repeat: no-repeat;
  padding-right: 20px; cursor: pointer;
}
.onb-stat-icono { color: var(--accent); display: inline-flex; flex-shrink: 0; }

/* "Cierro aquí" era un botón que parecía texto apagado. Ahora se ve como lo que
   es: la acción para mover dónde cierras la venta. */
.insignia-cierre-mover {
  border-style: solid !important;
  border-color: var(--border-strong) !important;
  color: var(--text-muted) !important;
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.insignia-cierre-mover:hover {
  border-color: var(--success) !important;
  color: var(--success) !important;
  background: var(--success-soft);
}

/* Las dos columnas quedaban con alturas muy distintas y dejaban un hueco de
   ~180px bajo la oportunidad. Ahora se estiran igual y el radar se ancla abajo. */
.onb-grid-2col { align-items: stretch; }
.onb-panel-oportunidad { display: flex; flex-direction: column; position: relative; overflow: hidden; }
.onb-panel-oportunidad .onb-resumen-oportunidad { flex: 1; }

/* La etiqueta "editable" no debe partir el nombre del dato en dos líneas. */
.onb-resumen-stat-label { display: flex; align-items: center; gap: 5px; white-space: nowrap; }
.onb-resumen-stat-label .onb-editable-tag { flex-shrink: 0; }

/* El radar crece y se ancla abajo a la derecha: con el panel estirado, un dibujo
   diminuto en una esquina se veía como un error, no como decoración. */
/* El grafo ya trae sus propias opacidades bajas: apagarlo otra vez al 22% lo
   volvía invisible y parecía un error de render. */
.onb-panel-oportunidad .onb-oportunidad-decoracion {
  width: 200px; height: auto; right: 6px; bottom: 6px; opacity: 0.9;
}
.onb-resumen-stat-valor { font-size: 0.83rem; }
.onb-resumen-stat { gap: 8px; }

/* --- PASO "ESTO ENTENDIMOS": limpieza --- */
/* Las cuatro etiquetas "EDITABLE" repetían cuatro veces lo mismo y alargaban el
   label hasta romper la tarjeta. Se dice una vez arriba y los campos se ven
   como campos: eso ya comunica que se pueden tocar. */
.onb-entendimos-head { margin-bottom: 14px; }
.onb-entendimos-head .onb-titulo-barra { margin-bottom: 2px; }
.onb-entendimos-nota { margin: 0 0 0 12px; font-size: 0.78rem; color: var(--text-faint); }
.onb-resumen-stat-label {
  display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-size: 0.63rem; letter-spacing: .5px; text-transform: uppercase;
  color: var(--text-faint); font-weight: 700; margin-bottom: 3px;
}
.onb-resumen-stat {
  align-items: center; gap: 10px;
  border-radius: 10px;
}
.onb-stat-icono {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; flex-shrink: 0; border-radius: 8px;
  background: var(--accent-soft); color: var(--accent);
}
/* Los valores se leen como campos: fondo propio y foco claro. */
.onb-resumen-stat-valor {
  width: 100%; min-width: 0;
  background: transparent; border: 1px solid transparent; border-radius: 6px;
  padding: 3px 6px; font-size: 0.86rem; font-weight: 600; color: var(--text-main);
  transition: background .15s ease, border-color .15s ease;
}
.onb-resumen-stat-valor:hover { background: var(--bg-hover); }
.onb-resumen-stat-valor:focus { background: var(--bg-input); border-color: var(--accent); outline: none; }

/* Pantallas bajas (portátiles de 1366x768 y menos): el Paso 1 tiene que entrar
   entero, con los nombres de los pasos incluidos. Se recorta aire, no contenido. */
@media (max-height: 760px) {
  .onboarding-container { padding: 18px 24px 20px; max-height: 95vh; }
  .onb-encabezado { margin-bottom: 12px; }
  .onb-encabezado h2 { font-size: 1.3rem; }
  .onb-encabezado-arte svg { width: 76px; height: 62px; }
  .onb-campo-caja textarea { min-height: 66px; padding: 11px 14px 6px; }
  .onb-campo-principal { margin-bottom: 14px; }
  .onb-campo-principal label { margin-bottom: 6px; font-size: 0.94rem; }
  .onb-eco { margin-top: 9px; }
  .onb-paso1-grid { gap: 18px; }
  .onb-confidencial-bar { padding-top: 12px; }
}

/* ============================================================
   PANTALLA DE ACCESO
   Sobria a propósito: es lo primero que ve alguien que todavía no confía en ti.
   Un formulario corto y limpio genera más registros que una portada vistosa.
   ============================================================ */
.auth-view {
  position: fixed;
  inset: 0;
  /* Por encima de todo lo demás: el menú lateral llega a 80, los modales a 100 y
     la pantalla de inicio de día a 300. Sin sesión no se ve nada de la app. */
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: var(--bg-dark);
  overflow-y: auto;
}
.auth-caja {
  width: 100%;
  max-width: 380px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 32px 28px;
}
.auth-marca {
  margin: 0 0 18px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}
.auth-titulo {
  margin: 0 0 4px;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--text-main);
}
.auth-bajada {
  margin: 0 0 22px;
  font-size: 0.85rem;
  color: var(--text-muted);
}
.auth-caja .form-group { margin-bottom: 14px; }
.auth-btn { width: 100%; justify-content: center; margin-top: 6px; }
/* El aviso ocupa su sitio solo cuando hay algo que decir, para que el formulario
   no salte hacia abajo al aparecer un error. */
.auth-aviso {
  margin: 0 0 12px;
  padding: 9px 11px;
  border-radius: var(--radius-sm);
  background: var(--danger-soft);
  border: 1px solid var(--danger);
  color: var(--danger);
  font-size: 0.8rem;
  line-height: 1.35;
}
.auth-aviso-ok {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}
.auth-aviso[hidden] { display: none; }
.auth-enlaces {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 16px;
  flex-wrap: wrap;
}
.auth-enlaces .btn-enlace { font-size: 0.78rem; }
@media (max-width: 420px) {
  .auth-caja { padding: 26px 20px; }
  .auth-enlaces { flex-direction: column; align-items: flex-start; gap: 6px; }
}
.config-ia-nota { margin: 0; font-size: 0.88rem; line-height: 1.45; color: var(--text-muted); }
.config-ia-nota strong { color: var(--text-main); }


/* ============================================================
   RECORRIDO DE BIENVENIDA (3 pasos)
   ============================================================
   El foco no es una imagen ni un recorte: es una caja transparente con una
   sombra enorme alrededor. Así el agujero siempre queda perfectamente encima
   del elemento real, aunque cambie de tamaño o el usuario gire el teléfono. */
.tour-capa {
  position: fixed;
  inset: 0;
  z-index: 9500;
}

.tour-foco {
  position: fixed;
  border-radius: var(--radius-lg);
  box-shadow: 0 0 0 9999px rgba(9, 9, 11, 0.74);
  transition: top .25s ease, left .25s ease, width .25s ease, height .25s ease;
  pointer-events: none;
}

.tour-globo {
  position: fixed;
  width: min(330px, calc(100vw - 24px));
  background: var(--bg-card);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  padding: var(--sp-4);
  box-shadow: var(--shadow-modal);
}

.tour-paso-num {
  display: block;
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: var(--sp-2);
}

.tour-titulo {
  margin: 0 0 var(--sp-2);
  font-size: 15px;
  color: var(--text-main);
}

.tour-texto {
  margin: 0 0 var(--sp-4);
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text-muted);
}

.tour-acciones {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
}

.tour-saltar {
  background: none;
  border: none;
  padding: 0;
  font-size: 13px;
  color: var(--text-faint);
  cursor: pointer;
}

.tour-saltar:hover { color: var(--text-muted); }

.tour-acciones .btn { padding: 8px 18px; font-size: 13.5px; }

/* ---- Entrar con Google ---- */
.auth-google {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; padding: 12px 16px; margin-bottom: 4px;
  background: #fff; color: #1f1f1f;
  border: none; border-radius: var(--radius-md);
  font-size: 0.95rem; font-weight: 600; cursor: pointer;
  transition: opacity .15s ease;
}
.auth-google:hover { opacity: .9; }
.auth-google:disabled { opacity: .55; cursor: default; }

.auth-separador {
  display: flex; align-items: center; gap: 12px;
  margin: 18px 0; color: var(--text-faint); font-size: 0.8rem;
}
.auth-separador::before,
.auth-separador::after {
  content: ""; flex: 1; height: 1px; background: var(--border);
}

/* ---- Pregunta de origen ---- */
.origen-bajada { margin: 0 0 var(--sp-4); color: var(--text-muted); font-size: 0.92rem; line-height: 1.5; }
.origen-opciones { display: grid; gap: 8px; margin-bottom: var(--sp-4); }
.origen-opcion {
  text-align: left; width: 100%;
  background: var(--bg-input); color: var(--text-main);
  border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: 11px 14px; font-size: 0.92rem; cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.origen-opcion:hover { border-color: var(--accent); background: var(--bg-hover); }

/* ---- Ritmo del día, en una línea ---- */
.ritmo-linea {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: 10px var(--sp-4);
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-size: 0.88rem; color: var(--text-muted);
}
.ritmo-icono { display: inline-flex; color: var(--accent); flex: 0 0 auto; }
.ritmo-texto { flex: 1; min-width: 0; }
.ritmo-texto strong { color: var(--text-main); font-weight: 600; }
.ritmo-linea .btn-enlace { flex: 0 0 auto; font-size: 0.84rem; }

@media (prefers-reduced-motion: reduce) {
  .tour-foco { transition: none; }
}


/* ---- Tu cuenta ---- */
.cuenta-datos { margin: 0 0 var(--sp-5); display: grid; gap: var(--sp-3); }
.cuenta-datos > div { display: flex; justify-content: space-between; gap: var(--sp-4); align-items: baseline; }
.cuenta-datos dt { margin: 0; color: var(--text-muted); font-size: 0.88rem; }
.cuenta-datos dd { margin: 0; color: var(--text-main); font-size: 0.92rem; font-weight: 500; text-align: right; }

.cuenta-acciones { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-5); }

/* La zona de borrar va separada y en frío, no en rojo chillón: el rojo grande
   asusta a quien solo estaba mirando, y no detiene a quien de verdad quiere irse. */
.cuenta-peligro {
  border-top: 1px solid var(--border);
  padding-top: var(--sp-4);
  display: flex; flex-wrap: wrap; gap: var(--sp-3);
  align-items: center; justify-content: space-between;
}
.cuenta-peligro-texto {
  margin: 0; flex: 1 1 260px;
  font-size: 0.85rem; line-height: 1.5; color: var(--text-muted);
}
.cuenta-peligro-texto strong { color: var(--text-main); }
.btn-peligro {
  background: transparent; color: var(--danger);
  border: 1px solid var(--danger-soft); border-radius: var(--radius-md);
  padding: 9px 16px; font-size: 0.88rem; cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.btn-peligro:hover { background: var(--danger-soft); border-color: var(--danger); }

/* ---- Bienvenida ----
   La caja de entrar es estrecha a propósito: son dos campos. Esta tiene cuatro
   cosas y con el mismo ancho se leía como un formulario de trámite. */
.auth-caja-ancha { max-width: 480px; padding: 40px 38px; }
.auth-caja-ancha .auth-bajada { margin-bottom: 30px; }
.auth-caja-ancha .form-group { margin-bottom: 26px; }
.auth-caja-ancha label { margin-bottom: 10px; }
.auth-caja-ancha .auth-btn { margin-top: 4px; padding: 15px 30px; }

/* Dos columnas iguales en vez de pastillas de distinto ancho amontonadas en
   cuatro filas irregulares. Lo mismo ocupa menos y se lee de un vistazo. */
.registro-chips { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.registro-chip {
  background: var(--bg-input); color: var(--text-muted);
  border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: 12px 14px; font-size: 0.88rem; cursor: pointer; text-align: center;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.registro-chip:hover { border-color: var(--border-strong); color: var(--text-main); }
.registro-chip.activo { border-color: var(--accent); color: var(--text-main); background: var(--accent-soft); }

.etiqueta-opcional {
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--text-faint); margin-left: 6px;
}
.campo-motivo { margin: 6px 0 0; font-size: 0.78rem; line-height: 1.45; color: var(--text-faint); }

.registro-permiso {
  display: flex; gap: 10px; align-items: flex-start;
  margin: 4px 0 26px; padding: 14px 16px; cursor: pointer;
  background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius-md);
  font-size: 0.86rem; line-height: 1.5; color: var(--text-muted);
}
/* El ancho explícito es obligatorio: la hoja tiene una regla global que le da
   width:100% a todos los input, y una casilla de 322px se comía el texto. */
.registro-permiso input {
  width: 16px; height: 16px; margin: 3px 0 0; flex: 0 0 16px; accent-color: var(--accent);
}
.registro-permiso span { flex: 1; }

.registro-legal {
  margin: 18px 0 0; text-align: center;
  font-size: 0.76rem; line-height: 1.5; color: var(--text-faint);
}
.registro-legal a { color: var(--text-muted); }

@media (max-width: 520px) {
  .auth-caja-ancha { padding: 30px 20px; }
  /* Se mantienen las dos columnas: en una sola, seis opciones se convertían en
     una lista larguísima que obliga a hacer scroll antes de ver el botón. */
  .registro-chip { padding: 11px 8px; font-size: 0.82rem; }
}