/* =========================================================================
   Academia Online — hoja de estilos principal
   ========================================================================= */

:root {
  --bg: #f6f3ee;
  --surface: #ffffff;
  --surface-muted: #faf8f4;
  --border: #e7e2d8;
  --text: #2a2b28;
  --text-muted: #6b6a63;
  --text-soft: #9a978c;

  --brand: #0f766e;
  --brand-dark: #0b5e57;
  --brand-light: #ccfbf1;
  --accent: #ea7c3a;
  --accent-dark: #c2601f;
  --accent-light: #fde3cd;

  --success: #15803d;
  --success-bg: #dcfce7;
  --danger: #b91c1c;
  --danger-bg: #fee2e2;
  --info: #2563eb;
  --info-bg: #dbeafe;

  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 20px;
  --shadow: 0 1px 2px rgba(20, 20, 15, 0.04), 0 8px 24px -12px rgba(20, 20, 15, 0.12);
  --shadow-lift: 0 4px 10px -2px rgba(20, 20, 15, 0.08), 0 16px 32px -16px rgba(20, 20, 15, 0.18);

  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 0.15s;
  --dur: 0.25s;
  --dur-slow: 0.4s;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: 'Manrope', ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
.icon, svg.lucide { display: inline-block; vertical-align: middle; flex-shrink: 0; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { margin: 0 0 0.4em; line-height: 1.25; }
p { margin: 0 0 0.75em; }
ul { margin: 0; padding-left: 1.2em; }
button { font-family: inherit; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

/* ---------------------------------------------------------------------
   Aviso "estás viendo como [alumno]" — solo aparece mientras un admin ha
   entrado como alumno desde /admin/alumnos (ver Auth::impersonate()). Va
   en flujo normal (no sticky) arriba del todo de la página para no pelear
   por el mismo top:0 con el sidebar/mobile-topbar, que ya son sticky por
   su cuenta — el botón "Volver a admin" está SIEMPRE alcanzable de todos
   modos porque también se repite en el pie fijo del sidebar (ver
   .sidebar-footer .impersonation-note más abajo).
   --------------------------------------------------------------------- */
.impersonation-banner {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: 6px 14px;
  background: var(--accent-dark);
  color: #fff;
  padding: 9px 20px;
  font-size: 13.5px; font-weight: 600;
  text-align: center;
}
.impersonation-banner form { margin: 0; }
.impersonation-banner .btn {
  background: rgba(255,255,255,0.16); color: #fff; padding: 5px 13px;
}
.impersonation-banner .btn:hover { background: rgba(255,255,255,0.28); }

.sidebar-footer .impersonation-note {
  display: flex; align-items: center; gap: 6px;
  background: var(--accent-light); color: var(--accent-dark);
  border-radius: var(--radius-sm); padding: 7px 8px;
  font-size: 11.5px; font-weight: 600; line-height: 1.35;
  margin-bottom: 8px;
}
.sidebar-footer .impersonation-note .icon { flex-shrink: 0; }
.sidebar-footer form.impersonation-return { margin-bottom: 6px; }

/* ---------------------------------------------------------------------
   Layout general con sidebar
   --------------------------------------------------------------------- */
.app-shell { display: flex; min-height: 100vh; }

.sidebar {
  width: 250px;
  flex-shrink: 0;
  background: var(--surface);
  border-right: 1px solid var(--border);
  padding: 20px 14px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  /* El sidebar es un panel independiente del scroll de .main: se queda
     "pegado" a la ventana (no a la altura del contenido central, que puede
     ser mucho más largo) y ocupa siempre el alto completo de la pantalla,
     para que el pie (usuario + cerrar sesión) quede fijo abajo del todo en
     vez de desplazarse junto con el contenido. align-self:flex-start evita
     que el "stretch" por defecto de flex lo estire a la altura de .main. */
  position: sticky;
  top: 0;
  align-self: flex-start;
  height: 100vh;
}
.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px 10px;
  font-weight: 800;
  font-size: 16px;
  letter-spacing: 0.02em;
  color: var(--brand-dark);
  text-transform: uppercase;
}
.sidebar-brand .mark-icon { color: var(--accent); transition: transform var(--dur) var(--ease-spring); width: 20px; height: 20px; }
.sidebar-brand:hover .mark-icon { transform: scale(1.15) rotate(8deg); }
.sidebar-brand .sidebar-logo { height: 28px; max-height: 28px; width: auto; display: block; object-fit: contain; font-size: 0; color: transparent; }

.nav-group-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-soft);
  padding: 0 10px;
  margin-bottom: 6px;
}
.nav-list { list-style: none; margin: 0 0 4px; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.nav-link {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 10px;
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 14px;
  font-weight: 500;
  position: relative;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), padding-left var(--dur) var(--ease);
}
.nav-link .nav-icon { width: 17px; height: 17px; color: var(--text-soft); flex-shrink: 0; transition: color var(--dur-fast) var(--ease); }
.nav-link:hover { background: var(--surface-muted); padding-left: 14px; }
.nav-link.active { background: var(--accent-light); color: var(--accent-dark); font-weight: 700; }
.nav-link.active .nav-icon { color: var(--accent-dark); }
.nav-link .badge-count {
  background: rgba(0,0,0,0.06);
  color: var(--text-muted);
  font-size: 11px;
  padding: 1px 7px;
  border-radius: 999px;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.nav-link.active .badge-count { background: rgba(234,124,58,0.18); color: var(--accent-dark); }

/* Grupo desplegable en el menú (secciones con subsecciones, ej. "Avanzado"):
   <details>/<summary> nativo, sin JS. El <summary> reutiliza el estilo de
   .nav-link (icono + texto) y añade un chevron que gira al abrirse; las
   subsecciones van en una lista indentada dentro de <details>. */
.nav-group-toggle { list-style: none; }
.nav-group-toggle summary.nav-link-toggle {
  cursor: pointer;
  list-style: none;
}
.nav-group-toggle summary.nav-link-toggle::-webkit-details-marker { display: none; }
.nav-group-toggle summary.nav-link-toggle::marker { content: ""; }
.nav-link-toggle .nav-caret {
  margin-left: auto;
  width: 15px;
  height: 15px;
  color: var(--text-soft);
  flex-shrink: 0;
  transition: transform var(--dur-fast) var(--ease);
}
.nav-group-toggle[open] > summary.nav-link-toggle .nav-caret { transform: rotate(180deg); }
.nav-sublist {
  padding-left: 20px;
  margin-top: 2px;
  border-left: 1.5px solid var(--border);
  margin-left: 19px;
}

/* Envuelve TODOS los grupos de navegación (fases/secciones o, en admin,
   Contenido/Alumnos/Configuración...) entre la marca de arriba y el pie de
   abajo. Es la única parte del sidebar que hace scroll internamente si
   hay más enlaces de los que caben en la pantalla — la marca y el pie
   (usuario + cerrar sesión) se quedan siempre fijos y visibles. */
.sidebar-nav-scroll {
  flex: 1;
  min-height: 0; /* imprescindible para que un hijo flex pueda scrollear en vez de desbordar */
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.sidebar-footer { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--border); flex-shrink: 0; }
.sidebar-user { display: flex; align-items: center; gap: 8px; padding: 8px; }
.sidebar-user .avatar {
  width: 32px; height: 32px; border-radius: 50%; background: var(--brand);
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 13px; flex-shrink: 0;
}
.sidebar-user .who { min-width: 0; }
.sidebar-user .who .name { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-user .who .role { font-size: 11px; color: var(--text-soft); }

.main { flex: 1; min-width: 0; }
.main-inner { max-width: 1080px; margin: 0 auto; padding: 28px 32px 60px; }

.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 32px; border-bottom: 1px solid var(--border); background: var(--surface);
}
.topbar-actions { display: flex; align-items: center; gap: 12px; }

/* ---------------------------------------------------------------------
   Menú lateral en móvil: por debajo de 880px el sidebar deja de ocupar
   sitio en el flujo y se convierte en un panel deslizante (oculto por
   defecto, fuera de la pantalla a la izquierda) que se abre con el botón
   "hamburguesa" de la barra superior móvil. Por encima de 880px todo esto
   no aplica y el sidebar se ve exactamente igual que siempre.
   --------------------------------------------------------------------- */
.mobile-topbar {
  display: none;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 150;
}
.sidebar-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.sidebar-toggle:hover { background: var(--surface-muted); border-color: var(--text-soft); }
.sidebar-toggle .icon { width: 20px; height: 20px; }
.mobile-topbar-brand { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 15px; letter-spacing: 0.02em; color: var(--brand-dark); text-transform: uppercase; }
.mobile-topbar-brand .mark-icon { color: var(--accent); width: 18px; height: 18px; }
.mobile-topbar-brand .topbar-logo { height: 22px; max-height: 22px; width: auto; display: block; object-fit: contain; font-size: 0; color: transparent; }

.sidebar-overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(20, 20, 15, 0.4);
  z-index: 190;
}
body.sidebar-locked { overflow: hidden; }

@media (max-width: 880px) {
  .mobile-topbar { display: flex; }
  .app-shell { display: block; }
  .sidebar {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    height: auto;
    width: 84vw;
    max-width: 300px;
    z-index: 200;
    box-shadow: var(--shadow-lift);
    transform: translateX(-100%);
    transition: transform var(--dur-slow) var(--ease-out);
    /* El scroll interno ahora lo lleva .sidebar-nav-scroll (ver arriba),
       no el panel entero, para que el pie de usuario/cerrar sesión
       también se quede fijo abajo en el menú móvil. */
  }
  .sidebar.is-open { transform: translateX(0); }
  .sidebar-overlay.is-open { display: block; }
  .main { width: 100%; }
  .main-inner { padding: 20px 18px 48px; }
  .topbar { padding: 12px 18px; }
}

/* ---------------------------------------------------------------------
   Page load / content transitions
   --------------------------------------------------------------------- */
@keyframes fadeSlideUp {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
.main-inner { animation: fadeSlideUp var(--dur-slow) var(--ease-out); }

/* El cambio entre pestañas/pasos del asistente es instantaneo a proposito
   (sin fundido ni desplazamiento): #wizard-root no anima su propio cambio
   de contenido, y NINGUN bloque que entra dentro de el hereda su
   animacion de entrada (fadeSlideUp/repeaterIn) para que el cambio de
   paso se sienta inmediato de verdad — el contenido entero de #wizard-root
   se reconstruye en cada navegacion (innerHTML), asi que cualquier clase
   con "animation:" dentro de el se relanzaria en cada cambio de pestaña
   si no se anula aqui. Se anula con el selector universal en vez de listar
   clase por clase, para que ningun bloque nuevo pueda reintroducir este
   problema por accidente. */
#wizard-root, #wizard-root.is-transitioning { opacity: 1; transform: none; }
#wizard-root *,
#wizard-root *::before,
#wizard-root *::after { animation: none !important; }
/* Excepciones deliberadas: micro-interacciones que SI deben animar dentro
   de #wizard-root porque son respuesta a una accion del alumno (click),
   no parte del contenido que aparece al cambiar de paso. Se repite el
   valor exacto de la animacion original (en vez de "revert") para que
   funcione igual en todos los navegadores. */
#wizard-root .is-loading::after,
#wizard-root .is-thinking svg { animation: spin 0.7s linear infinite !important; }
#wizard-root .is-thinking svg { animation-name: aiSpin !important; }
#wizard-root .ai-suggestion-panel { animation: fadeSlideUp var(--dur-slow) var(--ease-out) !important; }

/* ---------------------------------------------------------------------
   Botones
   --------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 10px 17px; border-radius: 10px; border: 1px solid transparent;
  font-size: 14px; font-weight: 600; cursor: pointer; line-height: 1.2;
  transition: filter var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease-spring), box-shadow var(--dur-fast) var(--ease);
  position: relative;
}
.btn:hover { filter: brightness(0.96); transform: translateY(-1px); box-shadow: 0 4px 10px -4px rgba(20,20,15,0.25); }
.btn:active { transform: translateY(0) scale(0.97); box-shadow: none; }
.btn-primary { background: var(--brand); color: #fff; }
.btn-accent { background: var(--accent); color: #fff; }
.btn-outline { background: var(--surface); border-color: var(--border); color: var(--text); }
.btn-ghost { background: transparent; color: var(--text-muted); }
.btn-danger { background: var(--danger-bg); color: var(--danger); }
.btn-success { background: var(--success); color: #fff; }
.btn-sm { padding: 7px 12px; font-size: 13px; border-radius: 8px; }
.btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none !important; box-shadow: none !important; filter: none !important; }
.btn-block { width: 100%; }
.btn-add-row { border-style: dashed; }

.btn.is-loading { color: transparent !important; pointer-events: none; }
.btn.is-loading::after {
  content: ''; position: absolute; width: 15px; height: 15px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.4); border-top-color: #fff;
  animation: spin 0.7s linear infinite;
}
.btn-outline.is-loading::after, .btn-ghost.is-loading::after {
  border: 2px solid rgba(15,23,22,0.15); border-top-color: var(--text-muted);
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------------------------------------------------------------------
   Tarjetas
   --------------------------------------------------------------------- */
.card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 20px; box-shadow: var(--shadow);
  transition: box-shadow var(--dur) var(--ease);
}
.card + .card { margin-top: 16px; }
.card-flat { background: var(--surface-muted); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; }

.hero-card {
  border-radius: var(--radius-lg);
  padding: 24px 28px;
  background: linear-gradient(135deg, var(--accent-light), #fff6ec);
  border: 1px solid var(--accent-light);
  margin-bottom: 20px;
  animation: fadeSlideUp var(--dur-slow) var(--ease-out);
}
.hero-card .hero-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.hero-card h1 { font-size: 24px; font-weight: 800; letter-spacing: -0.02em; }
.hero-progress-bar {
  margin-top: 14px; height: 9px; border-radius: 999px; background: rgba(0,0,0,0.08); overflow: hidden;
}
.hero-progress-bar > span {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), var(--accent-dark));
  transition: width 0.6s var(--ease-out);
  position: relative; overflow: hidden;
}
.hero-progress-bar > span::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent);
  animation: shimmer 2.2s ease-in-out infinite;
}
@keyframes shimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
.hero-note { margin-top: 10px; font-size: 13px; color: var(--text-muted); display: flex; align-items: center; gap: 6px; }

/* ---------------------------------------------------------------------
   Pastillas de progreso / pasos
   --------------------------------------------------------------------- */
.step-pills { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 20px; }
.step-pill {
  display: inline-flex; align-items: center; gap: 12px; padding: 14px 20px;
  border-radius: 16px; border: 2px solid var(--border); background: var(--surface);
  font-size: 14px; font-weight: 700; color: var(--text-muted);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
              border-color var(--dur) var(--ease), transform var(--dur-fast) var(--ease-spring),
              box-shadow var(--dur) var(--ease);
}
.step-pill:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.step-pill:active { transform: translateY(0) scale(0.97); }
.step-pill .icon { width: 18px; height: 18px; }
.step-pill .dot { display: none; }
.step-pill.is-completed {
  background: rgba(5,150,105,0.1); border-color: rgba(5,150,105,0.25); color: #059669;
}
.step-pill.is-validation {
  background: rgba(124,58,237,0.1); border-color: rgba(124,58,237,0.25); color: #7c3aed;
}
.step-pill.is-active {
  background: linear-gradient(135deg, #8b5cf6, rgba(139,92,246,0.85)); border-color: transparent;
  color: #fff; box-shadow: 0 8px 25px -6px rgba(139,92,246,0.5); transform: scale(1.03);
}
.step-pill.is-active:hover { transform: scale(1.03) translateY(-2px); }

/* ---------------------------------------------------------------------
   Cabecera de paso (bloque de color)
   --------------------------------------------------------------------- */
.step-header {
  border-radius: 16px; padding: 40px; color: #fff; margin-bottom: 18px;
  display: flex; align-items: center; gap: 20px;
  animation: fadeSlideUp var(--dur-slow) var(--ease-out);
  box-shadow: 0 12px 28px -18px rgba(0,0,0,0.45);
  position: relative; overflow: hidden;
}
.step-header .icon-badge {
  width: 64px; height: 64px; border-radius: 16px; background: rgba(255,255,255,0.2);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  backdrop-filter: blur(2px); box-shadow: 0 10px 15px -3px rgba(0,0,0,0.15);
}
.step-header .icon-badge .icon { width: 32px; height: 32px; }
.step-header h2 { font-size: 36px; margin-bottom: 4px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; }
.step-header p { margin: 0; color: rgba(255,255,255,0.8); font-size: 18px; line-height: 1.5; }

.help-box {
  background: linear-gradient(to bottom right, #fff7ed, rgba(255,251,235,0.5));
  border: 2px solid rgba(254,215,170,0.6); border-radius: 16px;
  padding: 32px; margin-bottom: 18px; font-size: 16px; line-height: 1.65; color: var(--text);
  box-shadow: 0 1px 3px rgba(0,0,0,0.1), 0 1px 2px -1px rgba(0,0,0,0.1);
  animation: fadeSlideUp var(--dur-slow) var(--ease-out);
  display: flex; gap: 16px; align-items: flex-start;
}
.help-box .help-icon-badge {
  width: 48px; height: 48px; border-radius: 16px; background: #ffedd5; color: #ea580c;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.help-box .help-icon-badge .icon { width: 24px; height: 24px; }
.help-box .help-body { flex: 1; min-width: 0; }
.help-box .help-title { display: block; margin: 0 0 8px; font-size: 18px; font-weight: 600; color: var(--text); }
.help-box .help-copy { color: #6b6b74; }
.help-box .help-copy strong { font-weight: 700; color: var(--text); }
.help-box .help-copy p { margin: 0 0 0.75em; }
.help-box .help-copy p:last-child { margin-bottom: 0; }
.help-box .help-copy ul, .help-box .help-copy ol { margin: 0 0 0.75em 1.2em; padding: 0; }
.help-box .help-copy a { color: var(--brand); }
.help-box .help-formula {
  margin-top: 16px; background: rgba(255,255,255,0.8); border: 1px solid rgba(254,215,170,0.5);
  border-radius: 16px; padding: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1), 0 1px 2px -1px rgba(0,0,0,0.1);
}
.help-box .help-formula .formula-intro { margin: 0 0 4px; font-size: 15px; color: var(--text); }
.help-box .help-formula .formula-text { margin: 0; font-size: 18px; font-weight: 600; font-style: italic; color: #ea580c; }

.help-box .help-example { margin-top: 16px; }
.help-box .help-example-title {
  display: flex; align-items: center; gap: 7px; margin: 0 0 10px; font-size: 15px; font-weight: 700; color: #9a3412;
}
.help-box .help-example-title .icon { width: 16px; height: 16px; color: #ea580c; }
.help-box .help-example-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px;
}
.help-box .help-example-card {
  background: rgba(255,255,255,0.85); border: 1px solid rgba(254,215,170,0.6); border-radius: 12px;
  padding: 14px 16px; box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.help-box .help-example-label { display: block; font-size: 14.5px; color: var(--text); margin-bottom: 5px; }
.help-box .help-example-body { margin: 0 0 8px; font-size: 13.5px; color: #6b6b74; line-height: 1.55; }
.help-box .help-example-note { margin: 0; font-size: 12.5px; font-style: italic; color: #c2410c; }

/* ---------------------------------------------------------------------
   Bloque de video-lecciones (por paso), con seguimiento de progreso
   --------------------------------------------------------------------- */
.video-block {
  background: linear-gradient(to bottom right, #fff7ed, rgba(255,251,235,0.5));
  border: 2px solid rgba(254,215,170,0.6); border-radius: 20px;
  padding: 22px 26px; margin-bottom: 18px;
  animation: fadeSlideUp var(--dur-slow) var(--ease-out);
}
.video-block-header { display: flex; align-items: center; gap: 14px; cursor: pointer; }
.video-block-icon {
  width: 46px; height: 46px; border-radius: 14px; flex-shrink: 0;
  background: linear-gradient(135deg, #f97316, #fb923c); color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 16px -8px rgba(234,88,12,0.5);
}
.video-block-icon .icon { width: 22px; height: 22px; }
.video-block-heading { flex: 1; min-width: 0; }
.video-block-title-line { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.video-block-title-text { font-size: 18px; font-weight: 800; color: var(--text); }
.video-block-count {
  font-size: 12.5px; font-weight: 700; color: #c2410c; background: #fed7aa;
  padding: 5px 12px; border-radius: 999px; white-space: nowrap;
}
.video-block-chevron {
  width: 32px; height: 32px; border-radius: 10px; border: none; flex-shrink: 0;
  background: rgba(255,255,255,0.7); color: var(--text-soft);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: background var(--dur-fast) var(--ease), transform var(--dur) var(--ease);
}
.video-block-chevron:hover { background: #fff; }
.video-block-chevron .icon { width: 16px; height: 16px; }
.video-block.is-collapsed .video-block-chevron { transform: rotate(180deg); }

.video-block-progress-row { display: flex; align-items: center; gap: 10px; margin-top: 16px; }
.video-block-progress { flex: 1; height: 7px; border-radius: 999px; background: rgba(255,255,255,0.7); overflow: hidden; }
.video-block-progress > span { display: block; height: 100%; background: linear-gradient(to right, #f97316, #fb923c); border-radius: 999px; transition: width 0.5s var(--ease-out); }
.video-block-progress-pct { font-size: 12.5px; font-weight: 700; color: #c2410c; flex-shrink: 0; }

.video-block.is-collapsed .video-block-collapsible { display: none; }

.video-list { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.video-row {
  background: #fff; border: 1.5px solid rgba(254,215,170,0.7); border-radius: 12px; overflow: hidden;
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.video-row.is-watched { border-color: var(--brand-light); background: rgba(204,251,241,0.25); }
.video-row-main { display: flex; align-items: center; gap: 12px; padding: 12px 14px; cursor: pointer; }
.video-row-check { position: relative; display: flex; flex-shrink: 0; width: 21px; height: 21px; cursor: pointer; }
.video-row-check input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.video-row-check-circle {
  width: 21px; height: 21px; border-radius: 999px; border: 2px solid var(--border);
  display: flex; align-items: center; justify-content: center; color: #fff; background: #fff;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.video-row-check-circle .icon { width: 12px; height: 12px; opacity: 0; transition: opacity var(--dur-fast) var(--ease); }
.video-row-check input:checked + .video-row-check-circle { background: var(--brand); border-color: var(--brand); }
.video-row-check input:checked + .video-row-check-circle .icon { opacity: 1; }
.video-row-play {
  width: 28px; height: 28px; border-radius: 999px; flex-shrink: 0;
  background: #ffedd5; color: #ea580c; display: flex; align-items: center; justify-content: center;
}
.video-row-play .icon { width: 12px; height: 12px; margin-left: 1px; }
.video-row.is-watched .video-row-play { background: var(--brand-light); color: var(--brand-dark); }
.video-row-title { flex: 1; min-width: 0; font-size: 14.5px; font-weight: 600; color: var(--text); }
.video-row-chevron { display: flex; color: var(--text-soft); flex-shrink: 0; transition: transform var(--dur) var(--ease); }
.video-row-chevron .icon { width: 16px; height: 16px; }
.video-row.is-expanded .video-row-chevron { transform: rotate(180deg); }
.video-row-player { padding: 0 14px 14px; }
.video-embed-wrap { position: relative; width: 100%; padding-top: 56.25%; border-radius: 10px; overflow: hidden; background: #000; }
.video-embed-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---------------------------------------------------------------------
   Formularios
   --------------------------------------------------------------------- */
/* Tarjeta que agrupa varios campos consecutivos bajo una misma cabecera
   (ej. "Mecanismo Unico 1" / "Mecanismo Unico 2"), configurable desde el
   admin (group_label/group_icon en cualquier campo de cualquier paso). */
.field-group-card {
  border: 1.5px solid #e9d5ff; border-radius: 14px; margin-bottom: 22px; overflow: hidden;
  background: #fff;
  /* Sombra un poco mas marcada que la generica --shadow (usada en tarjetas
     sobre fondo blanco) porque estos bloques van sueltos directamente
     sobre el fondo beige de la pagina (--bg), con menos contraste natural
     entre ambos: hace falta algo mas de profundidad para que se distingan
     bien unos de otros, a juego con la referencia. */
  box-shadow: 0 2px 4px rgba(20, 20, 15, 0.05), 0 10px 28px -10px rgba(20, 20, 15, 0.2);
}
.field-group-card-header {
  display: flex; align-items: center; gap: 8px; padding: 12px 18px;
  background: linear-gradient(to right, #f5f3ff, #ede9fe); border-bottom: 1.5px solid #e9d5ff;
  font-weight: 700; font-size: 14.5px; color: #6d28d9;
}
.field-group-card-header .icon { width: 17px; height: 17px; color: #7c3aed; }
.field-group-card-body { padding: 18px 18px 2px; }
.field-group-card-body .field-group:last-child { margin-bottom: 0; }

/* Tarjeta de un campo SUELTO (sin group_label) — "todo en bloques
   separados": cada campo individual del paso (texto, archivos, redes
   sociales, deseos profundos...) sale en su propia tarjeta, igual que en
   la plataforma de referencia, en vez de compartir una unica tarjeta
   grande para todo el paso. Reutiliza .field-group-card como envoltorio
   (mismo radio/sombra/margen) pero con .is-solo para un tono de cabecera
   neutro (blanco) en vez del morado fijo de las tarjetas de GRUPO
   admin-configuradas, que se dejan tal cual estaban. */
.field-group-card.is-solo { border-color: var(--border); }
.field-group-card.is-solo > .field-group-card-header-solo,
.field-group-card.is-solo > .field-group-card-header-split {
  background: var(--surface-muted); border-bottom: 1.5px solid var(--border);
}
.field-group-card-header-solo,
.field-group-card-header-split {
  display: flex; align-items: center; gap: 14px; padding: 20px 22px;
}
.field-group-card-header-split { justify-content: space-between; flex-wrap: wrap; }
.field-group-card-icon {
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 40px; height: 40px; border-radius: 11px;
}
.field-group-card-icon .icon { width: 20px; height: 20px; }
.field-group-card-icon.accent-purple { background: #ede9fe; color: #6d28d9; }
.field-group-card-icon.accent-orange { background: #ffedd5; color: #c2410c; }
.field-group-card-icon.accent-blue { background: #dbeafe; color: #1d4ed8; }
.field-group-card-heading { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.field-group-card-title-plain { font-size: 20px; font-weight: 800; letter-spacing: -0.01em; color: var(--text); display: flex; align-items: center; flex-wrap: wrap; gap: 10px; line-height: 1.3; }
.field-group-card-subtitle { font-size: 13.5px; color: var(--text-muted); font-weight: 400; line-height: 1.55; }
.field-group-card-subtitle p { margin: 0 0 4px; }
.field-group-card-subtitle p:last-child { margin-bottom: 0; }
.field-group-card-header-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.field-group-card.is-solo > .field-group-card-body { padding: 20px 22px; }
.field-group-card.is-solo > .field-group-card-body .field-group { margin-bottom: 0; }

/* Tinte de color SOLO en la cabecera (el cuerpo se queda blanco) — a
   juego exacto con la referencia, donde cada tarjeta especial (frase de
   oferta, precio y valor percibido...) lleva el color unicamente en la
   franja superior y el contenido de debajo va sobre fondo blanco. Se
   anade como clase modificadora extra sobre .field-group-card (junto a
   .is-solo), reutilizando el mismo color que ya tenia el icono de la
   cabecera (accent-orange/blue/purple) para que ambos coincidan.
   card-tint-mint es unicamente para el bloque "Precio y valor percibido". */
.field-group-card.card-tint-orange { border-color: #f6d9ae; }
.field-group-card.card-tint-orange > .field-group-card-header-solo,
.field-group-card.card-tint-orange > .field-group-card-header-split { background: #fff7ee; border-bottom-color: #f6d9ae; }
.field-group-card.card-tint-blue { border-color: #bcd9fb; }
.field-group-card.card-tint-blue > .field-group-card-header-solo,
.field-group-card.card-tint-blue > .field-group-card-header-split { background: #f0f6ff; border-bottom-color: #bcd9fb; }
.field-group-card.card-tint-purple { border-color: #ddd0fb; }
.field-group-card.card-tint-purple > .field-group-card-header-solo,
.field-group-card.card-tint-purple > .field-group-card-header-split { background: #f8f5ff; border-bottom-color: #ddd0fb; }
.field-group-card.card-tint-mint { border-color: #99e6d9; }
.field-group-card.card-tint-mint > .field-group-card-header-solo { background: #f0fdfa; border-bottom-color: #99e6d9; }

.field-group { margin-bottom: 20px; animation: fadeSlideUp var(--dur) var(--ease-out) backwards; }
.field-group label.field-label { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; font-weight: 700; font-size: 17px; margin-bottom: 8px; }
.field-group .field-help { font-size: 12.5px; color: var(--text-soft); margin-top: 5px; line-height: 1.5; }
.field-group .field-help p { margin: 0 0 4px; }
.field-group .field-help p:last-child { margin-bottom: 0; }
.field-group .field-help a { color: var(--brand); }
/* Indicador de campo obligatorio: icono de interrogacion + "(obligatorio)"
   en naranja, en vez del asterisco pequeno de antes — a juego con la
   referencia. requiredBadge() en helpers.php genera este markup. */
.required-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12px; font-weight: 700; color: var(--accent-dark);
  text-transform: none; white-space: nowrap;
}
.required-badge .icon { width: 14px; height: 14px; }

/* Recuadro "tip" del texto de ayuda de un campo (fieldTipBox() en
   helpers.php) — borde suave, icono de bombilla, y si el texto empieza
   por "Tip:" la primera frase sale en negrita a modo de titulo con el
   resto como cuerpo debajo, igual que en la referencia. */
.field-tip-box {
  display: flex; gap: 10px; align-items: flex-start; margin-top: 10px;
  background: var(--surface); border: 1.5px solid var(--border); border-radius: 12px;
  padding: 13px 15px;
}
.field-tip-box-icon { display: flex; color: #f59e0b; flex-shrink: 0; margin-top: 1px; }
.field-tip-box-icon .icon { width: 15px; height: 15px; }
.field-tip-box-content { flex: 1; min-width: 0; }
.field-tip-box-title { font-size: 13px; font-weight: 700; color: var(--text); line-height: 1.5; }
.field-tip-box-body { font-size: 12.5px; color: var(--text-soft); line-height: 1.55; }
.field-tip-box-title + .field-tip-box-body { margin-top: 3px; }
.field-tip-box-body p { margin: 0 0 4px; }
.field-tip-box-body p:last-child { margin-bottom: 0; }
.field-tip-box-body a { color: var(--brand); }

/* ---------------------------------------------------------------------
   Bloque "Precio y valor percibido" (paso Ensamblaje Final) — ver
   $isPricingBlockStart en section_wizard.php y initPricingBlock() en
   wizard.js. "Valor caracteristicas" y "Valor total percibido" se
   calculan solos (no son inputs); solo "Tu precio" es rellenable.
   --------------------------------------------------------------------- */
.pricing-help-icon { display: inline-flex; color: var(--accent); vertical-align: middle; cursor: help; }
.pricing-help-icon .icon { width: 17px; height: 17px; }
.pricing-card-body { display: flex; flex-direction: column; gap: 18px; }
.pricing-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 720px) { .pricing-stats { grid-template-columns: 1fr; } }
.pricing-stat {
  border-radius: 12px; padding: 18px 16px; text-align: center; border: 1.5px solid transparent;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.pricing-stat-label { font-size: 13px; color: var(--text-muted); font-weight: 600; }
.pricing-stat-value { font-size: 26px; font-weight: 800; color: var(--text); letter-spacing: -0.01em; }
.pricing-stat-neutral { background: var(--surface-muted); border-color: var(--border); }
.pricing-stat-green { background: var(--success-bg); border-color: #bbf7d0; }
.pricing-stat-green .pricing-stat-value { color: var(--success); }
.pricing-stat-yellow { background: #fefce8; border-color: #fef08a; }
.pricing-price-input-wrap { display: flex; align-items: center; gap: 8px; justify-content: center; }
.pricing-price-input-wrap input[type=number] {
  width: auto; max-width: 130px; text-align: center; font-size: 20px; font-weight: 700;
  padding: 9px 12px; background: #fff;
}
.pricing-price-currency { font-size: 20px; font-weight: 800; color: var(--text); }
.pricing-ratio-message { text-align: center; font-size: 15px; color: var(--text-muted); margin: 0; min-height: 1.4em; }
.pricing-ratio-message strong { font-weight: 800; }
.pricing-ratio-message.is-good { color: var(--success); }
.pricing-ratio-message.is-warning { color: var(--accent-dark); }

input[type=text], input[type=email], input[type=password], input[type=number], input[type=url], input[type=date],
input[type=datetime-local], input[type=time],
textarea, select {
  width: 100%; padding: 11px 13px; border: 1.5px solid var(--border); border-radius: 10px;
  font-size: 14.5px; font-family: inherit; background: #fff; color: var(--text);
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
/* Todos los <textarea> de la plataforma crecen solos con el contenido
   (ver autoGrow/autoGrowAll en ui.js) en vez de llevar scroll interno o
   tirador de redimensionado manual — de ahí resize:none + overflow:hidden. */
textarea { min-height: 96px; resize: none; overflow: hidden; }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px rgba(15,118,110,0.12); }
input:hover, textarea:hover, select:hover { border-color: #cfc9ba; }
.checkbox-line { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.checkbox-line input { width: auto; }

/* ---------------------------------------------------------------------
   Selector visual de icono (iconPickerField() en helpers.php + admin.js
   → initIconPicker()) — sustituye a las antiguas casillas de "texto libre"
   / <datalist> para elegir un icono de lucide.dev sin tener que saber su
   nombre de memoria: se ve una rejilla con todos los iconos disponibles y
   se elige con un clic.
   --------------------------------------------------------------------- */
.icon-picker { position: relative; }
.icon-picker-trigger {
  width: 100%; display: flex; align-items: center; gap: 10px;
  padding: 10px 13px; border: 1.5px solid var(--border); border-radius: 10px;
  background: #fff; cursor: pointer; font-size: 14.5px; font-family: inherit;
  color: var(--text); text-align: left;
  transition: border-color var(--dur-fast) var(--ease);
}
.icon-picker-trigger:hover { border-color: #cfc9ba; }
.icon-picker-trigger:focus-visible { outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px rgba(15,118,110,0.12); }
.icon-picker-preview {
  display: flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; flex-shrink: 0; color: var(--text-muted);
}
.icon-picker-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.icon-picker-caret { display: flex; color: var(--text-soft); flex-shrink: 0; transition: transform var(--dur-fast) var(--ease); }
.icon-picker[data-open] .icon-picker-caret { transform: rotate(180deg); }

.icon-picker-dropdown {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 60;
  background: #fff; border: 1px solid var(--border); border-radius: 12px;
  box-shadow: var(--shadow-lift); padding: 10px;
  flex-direction: column; gap: 8px;
  /* Sin "display:flex" en la regla base a propósito: así el atributo
     [hidden] (display:none por defecto del navegador) sigue funcionando.
     Si pusiéramos "display:flex" aquí directamente, ganaría siempre al
     estilo por defecto de [hidden] y el desplegable nunca se ocultaría
     de verdad aunque JS le quitara el atributo "hidden" correctamente. */
}
.icon-picker-dropdown:not([hidden]) { display: flex; }
.icon-picker-search {
  width: 100%; padding: 8px 11px; border: 1.5px solid var(--border); border-radius: 8px;
  font-size: 13.5px; font-family: inherit;
}
.icon-picker-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 3px;
  overflow-y: auto; max-height: 248px; padding-right: 2px;
}
.icon-picker-item {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 8px 4px; border-radius: 8px; border: 1px solid transparent;
  background: none; cursor: pointer; color: var(--text-muted);
  font-size: 10px; font-family: inherit; text-align: center;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.icon-picker-item:hover, .icon-picker-item.is-active { background: var(--surface-muted); border-color: var(--border); color: var(--text); }
.icon-picker-item-icon { display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; }
.icon-picker-item-label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.icon-picker-empty { font-size: 12.5px; color: var(--text-soft); text-align: center; padding: 6px 0; margin: 0; }

/* ---------------------------------------------------------------------
   Editor de texto enriquecido (Quill) en el panel de administracion
   --------------------------------------------------------------------- */
.ql-toolbar.ql-snow {
  border: 1.5px solid var(--border); border-bottom: none; border-radius: 10px 10px 0 0;
  background: var(--surface-muted);
}
.richtext-mount.ql-container.ql-snow {
  border: 1.5px solid var(--border); border-radius: 0 0 10px 10px;
  font-family: inherit; font-size: 14.5px; background: #fff;
}
.richtext-mount .ql-editor { min-height: 110px; padding: 11px 13px; line-height: 1.6; }
.richtext-mount-sm .ql-editor { min-height: 56px; }
.ql-editor.ql-blank::before { color: var(--text-soft); font-style: normal; }
.ql-editor a { color: var(--brand); text-decoration: underline; }

/* Botón "HTML avanzado" / textarea de HTML en bruto (ver initRichText en
   admin.js): alterna el campo de texto de ayuda entre el editor visual
   Quill y un textarea plano con el HTML tal cual, para bloques a medida
   (rejillas de color, tarjetas...) que Quill no sabe conservar. */
.richtext-html-toggle {
  display: inline-block; margin-bottom: 6px; padding: 3px 10px;
  font-size: 12px; font-weight: 600; color: var(--text-muted);
  background: var(--surface-muted); border: 1px solid var(--border); border-radius: 999px;
  cursor: pointer;
}
.richtext-html-toggle:hover { color: var(--brand); border-color: var(--brand); }
textarea.richtext-raw-textarea:not([hidden]) {
  display: block; width: 100%; min-height: 260px; box-sizing: border-box;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px; line-height: 1.5; padding: 11px 13px;
  border: 1.5px solid var(--border); border-radius: 10px; resize: vertical;
}

/* ---------------------------------------------------------------------
   Barra inferior del asistente: Anterior / auto-guardado / Guardar y continuar
   Vive FUERA de la tarjeta blanca del formulario (sobre el fondo de la
   pagina), igual que en la plataforma de referencia — no dentro de ella.
   --------------------------------------------------------------------- */
.wizard-bottom-nav {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  margin-top: 18px; flex-wrap: wrap;
}
.wizard-bottom-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* "Anterior": enlace de texto plano, sin caja ni borde, igual que la referencia. */
.wizard-nav-link {
  display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600;
  color: var(--text-muted); text-decoration: none; padding: 10px 4px;
  transition: color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease-spring);
}
.wizard-nav-link .icon { width: 16px; height: 16px; }
.wizard-nav-link:hover { color: var(--text); transform: translateX(-2px); }

/* "Guardar y continuar": degradado del propio paso activo (mismos colores
   que su cabecera), no un color de marca fijo — se aplica inline con
   style="background: ...", esta clase solo pone el resto del boton. */
.btn-wizard-save {
  color: #fff; border: none; padding: 12px 22px; font-size: 14.5px;
  box-shadow: 0 8px 20px -8px rgba(79,70,229,0.5);
}
.btn-wizard-save:hover { filter: brightness(1.06); box-shadow: 0 10px 22px -8px rgba(79,70,229,0.6); }
.btn-wizard-save:active { transform: translateY(1px); }

.autosave-indicator {
  display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600;
  color: var(--text-soft); background: var(--surface-muted); border: 1px solid var(--border);
  padding: 7px 13px; border-radius: 999px; white-space: nowrap;
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.autosave-indicator .icon { width: 14px; height: 14px; color: var(--brand); flex-shrink: 0; }
.autosave-indicator.is-saving { color: var(--text-soft); }
.autosave-indicator.is-saving .icon { color: var(--text-soft); }
.autosave-indicator.is-ok { color: var(--success); background: var(--success-bg); border-color: transparent; }
.autosave-indicator.is-ok .icon { color: var(--success); }
.autosave-indicator.is-error { color: var(--danger); background: var(--danger-bg); border-color: transparent; }
.autosave-indicator.is-error .icon { color: var(--danger); }

@media (max-width: 640px) {
  .wizard-bottom-nav { justify-content: center; text-align: center; }
  .wizard-bottom-nav > * { flex: 1 1 100%; justify-content: center; }
}

/* ---------------------------------------------------------------------
   Listas repetibles (repeater) — tarjetas numeradas
   --------------------------------------------------------------------- */
.repeater-block { display: flex; flex-direction: column; gap: 12px; }
.repeater-item {
  border: 1.5px solid var(--border); border-radius: var(--radius); padding: 16px;
  background: var(--surface-muted); position: relative;
  animation: repeaterIn var(--dur-slow) var(--ease-out);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.repeater-item:hover { border-color: #d8d2c2; box-shadow: var(--shadow); }
@keyframes repeaterIn { from { opacity: 0; transform: scale(0.97) translateY(6px); } to { opacity: 1; transform: scale(1) translateY(0); } }
.repeater-item-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.repeater-item-badge {
  display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 26px;
  padding: 0 8px; border-radius: 999px; background: var(--brand-light); color: var(--brand-dark);
  font-size: 12px; font-weight: 800;
}
.repeater-item-grid { display: grid; grid-template-columns: repeat(var(--cols, 2), 1fr); gap: 12px; }
@media (max-width: 640px) { .repeater-item-grid { grid-template-columns: 1fr !important; } }
.repeater-cell-label { display: block; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-soft); margin-bottom: 4px; }
.repeater-cell textarea { min-height: 64px; }

.repeater-block-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* Repeater en modo "jerarquia" (ej. Deseos Profundos): cada fila guardada
   se muestra como una tarjeta con las columnas del esquema APILADAS una
   debajo de otra y progresivamente sangradas (deseo -> por que -> por
   que -> raiz emocional), cada una precedida por una flecha repetida por
   nivel, y la ultima columna ("raiz emocional") resaltada en negrita y
   color. El modo edicion reutiliza EXACTAMENTE el mismo envoltorio
   (misma insignia, mismo apilado/sangrado) sustituyendo los <span> de
   solo lectura por <textarea> sin borde que se auto-ajustan en altura,
   para que editar no cambie el aspecto visual de la tarjeta. */
.hierarchy-item {
  padding: 0; overflow: hidden; background: #fff;
  border: 1.5px solid var(--border); border-radius: var(--radius);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.hierarchy-item:hover { border-color: #d8d2c2; box-shadow: var(--shadow); }
.hierarchy-view { display: flex; align-items: flex-start; gap: 14px; padding: 16px; }
.hierarchy-edit-form { display: flex; align-items: flex-start; gap: 14px; padding: 16px; background: var(--surface-muted); }
/* El atributo HTML "hidden" solo gana por especificidad si ninguna regla
   de mas abajo en la cascada vuelve a fijar "display" sobre el mismo
   elemento — como aqui ambas clases fijan "display: flex", se anula
   explicitamente para que ocultar/mostrar vista y formulario siga
   funcionando (el toggle de wizard.js solo alterna este atributo). */
.hierarchy-view[hidden], .hierarchy-edit-form[hidden] { display: none; }
.hierarchy-badge {
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 30px; height: 30px; border-radius: 999px; background: #fce7f3; color: #be185d;
  font-size: 13px; font-weight: 800; margin-top: 1px;
}
.hierarchy-chain { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 9px; }
.hierarchy-chain-row {
  display: flex; align-items: flex-start; gap: 8px; font-size: 13.5px; color: var(--text-muted);
  line-height: 1.5;
}
.hierarchy-chain-row[data-level="1"] { margin-left: 20px; }
.hierarchy-chain-row[data-level="2"] { margin-left: 40px; }
.hierarchy-chain-row[data-level="3"] { margin-left: 60px; }
.hierarchy-chain-row[data-level="4"] { margin-left: 80px; }
.hierarchy-arrow { display: flex; color: var(--text-soft); flex-shrink: 0; margin-top: 2px; }
.hierarchy-arrow .icon { width: 14px; height: 14px; }
.hierarchy-chain-text { flex: 1; min-width: 0; word-break: break-word; }
.hierarchy-chain-row.is-root .hierarchy-chain-text { font-weight: 800; color: #be185d; }
.hierarchy-chain-row.is-root .hierarchy-arrow { color: #be185d; }
.hierarchy-chain-input {
  flex: 1; min-width: 0; width: 100%; border: none; background: transparent; padding: 0;
  resize: none; overflow: hidden; font: inherit; color: var(--text-muted); line-height: 1.5;
  font-size: 13.5px; min-height: 20px;
}
.hierarchy-chain-input:focus { outline: none; box-shadow: none; border-color: transparent; }
.hierarchy-chain-row.is-root .hierarchy-chain-input { font-weight: 800; color: #be185d; }
.hierarchy-actions { display: flex; gap: 6px; flex-shrink: 0; }
.icon-btn {
  width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--border); background: #fff;
  color: var(--text-soft); cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.icon-btn .icon { width: 15px; height: 15px; }
.icon-btn:hover { background: var(--surface-muted); color: var(--text); }
.icon-btn-danger:hover { background: var(--danger-bg); border-color: var(--danger-bg); color: var(--danger); }

/* Repeater en modo "cards" (ej. Caracteristicas de tu programa): cada fila
   guardada se ve como una tarjeta de solo lectura (numero + nombre +
   precio + editar/quitar), y el lapiz la abre en un formulario de campos
   grandes uno debajo de otro — ver _repeater_row_cards.php e
   initCardsRepeater() en wizard.js. El "Valor total percibido" de la
   cabecera de la tarjeta exterior reutiliza el mismo azul que la insignia
   numerada, para que ambos se lean como parte del mismo sistema. */
.repeater-total-value { color: #1d4ed8; }
.cards-item {
  padding: 0; overflow: hidden; background: #fff;
  border: 1.5px solid var(--border); border-radius: var(--radius);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  /* [data-repeater-rows] no es un contenedor flex (solo .repeater-block lo
     es, y ese "gap" separa el propio [data-repeater-rows] del boton
     "Anadir elemento", no las tarjetas entre si) — sin este margen las
     tarjetas quedaban con los bordes tocandose una debajo de otra segun se
     iban anadiendo elementos. */
  margin-bottom: 16px;
}
.cards-item:last-child { margin-bottom: 0; }
.cards-item:hover { border-color: #d8d2c2; box-shadow: var(--shadow); }
.repeater-card-header { display: flex; align-items: center; gap: 12px; padding: 16px 18px; }
.repeater-card-badge {
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 34px; height: 34px; border-radius: 999px; background: #dbeafe; color: #1d4ed8;
  font-size: 14.5px; font-weight: 800;
}
.repeater-card-name { flex: 1; min-width: 0; font-size: 17px; font-weight: 700; color: var(--text); word-break: break-word; }
.repeater-card-price {
  flex-shrink: 0; background: #dbeafe; color: #1d4ed8; font-weight: 700; font-size: 13.5px;
  padding: 5px 13px; border-radius: 999px;
}
.repeater-card-header-actions { display: flex; gap: 6px; flex-shrink: 0; }
.repeater-card-view {
  padding: 16px 18px; border-top: 1.5px solid var(--border);
  display: flex; flex-direction: column; gap: 10px;
}
.repeater-card-view[hidden] { display: none; }
.repeater-card-view p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--text-muted); }
.repeater-card-view p strong { color: var(--text); font-weight: 700; }
.repeater-card-edit {
  padding: 18px; border-top: 1.5px solid var(--border); background: var(--surface-muted);
  display: flex; flex-direction: column; gap: 18px;
}
.repeater-card-edit[hidden] { display: none; }
.repeater-card-field { display: flex; flex-direction: column; gap: 8px; }
.repeater-card-field label { font-size: 13.5px; font-weight: 700; color: var(--text); }
.repeater-card-field textarea,
.repeater-card-field input,
.repeater-card-field select {
  font-size: 15.5px; padding: 13px 15px; border-radius: 11px;
}
.repeater-card-field textarea { resize: none; overflow: hidden; min-height: 68px; }

/* Repeater en modo "compacto" (ej. Tus paginas web y redes sociales):
   caja informativa + cabecera con icono + filas en linea sin tarjeta. */
.compact-repeater-infobox {
  background: var(--surface-muted); border: 1px solid var(--border); border-radius: 10px;
  padding: 10px 14px; font-size: 13px; color: var(--text-muted); margin-bottom: 12px;
}
.compact-repeater-infobox p:last-child { margin-bottom: 0; }
.compact-repeater-header {
  display: flex; align-items: center; gap: 8px; font-size: 15.5px; font-weight: 700; color: var(--text);
  margin-bottom: 12px;
}
.compact-repeater-header .icon { width: 17px; height: 17px; color: var(--brand); }
.repeater-block-compact { gap: 8px; }
.compact-repeater-row {
  display: flex; align-items: center; gap: 10px; padding: 0; background: transparent; border: none;
  animation: fadeSlideUp var(--dur) var(--ease-out);
  /* Igual que en .cards-item: [data-repeater-rows] no es un contenedor
     flex, así que sin este margen las filas quedaban con los bordes
     tocándose una debajo de otra según se iban añadiendo. */
  margin-bottom: 10px;
}
.compact-repeater-row:last-child { margin-bottom: 0; }
/* .compact-repeater-row hereda de .repeater-item (más abajo) su estilo de
   "tarjeta" en hover (borde + sombra) porque comparte esa clase base, pero
   aquí no hay tarjeta que resaltar (fondo transparente, sin borde) — sin
   este reset, al pasar el ratón por encima aparecía una sombra flotando
   debajo de la caja de texto y el desplegable, sin ningún borde que la
   contuviera. */
.compact-repeater-row:hover { border-color: transparent; box-shadow: none; }
.compact-repeater-row .compact-repeater-select { flex: 0 0 168px; }
.compact-repeater-row .compact-repeater-input { flex: 1; min-width: 0; }
@media (max-width: 640px) {
  .compact-repeater-row { flex-wrap: wrap; }
  .compact-repeater-row .compact-repeater-select { flex: 1 1 100%; }
}

/* Filas simples usadas en el panel de admin (opciones de select, columnas de repeater) */
.repeater-row {
  display: flex; align-items: center; gap: 10px; margin-bottom: 10px;
  animation: fadeSlideUp var(--dur) var(--ease-out);
}
.repeater-row.repeater-row-enter { opacity: 0; transform: translateY(-6px); }
.repeater-row .repeater-cell { flex: 1; min-width: 0; }

.remove-row {
  flex-shrink: 0; width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--border);
  background: #fff; color: var(--danger); cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  transition: background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease-spring), border-color var(--dur-fast) var(--ease);
}
.remove-row:hover { background: var(--danger-bg); border-color: var(--danger-bg); transform: rotate(90deg) scale(1.05); }

/* ---------------------------------------------------------------------
   Subida de archivos
   --------------------------------------------------------------------- */
.file-upload-block { display: flex; flex-direction: column; gap: 10px; }
.file-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.file-list-item {
  display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: 12px;
  background: linear-gradient(to bottom right, var(--accent-light), #fffaf3); border: 1.5px solid #f6d9b3; font-size: 13.5px;
  animation: fadeSlideUp var(--dur) var(--ease-out);
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.file-list-item:hover { border-color: var(--accent); box-shadow: var(--shadow); }
.file-list-icon { display: flex; color: var(--accent-dark); flex-shrink: 0; }
.file-list-icon .icon { width: 17px; height: 17px; }
.file-list-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); font-weight: 600; }
.file-list-name:hover { text-decoration: underline; color: var(--accent-dark); }
.file-list-check {
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 22px; height: 22px; border-radius: 999px; background: var(--success); color: #fff;
}
.file-list-check .icon { width: 12px; height: 12px; }
.file-remove-btn {
  flex-shrink: 0; width: 28px; height: 28px; border-radius: 8px; border: none;
  background: transparent; color: var(--text-soft); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease-spring);
}
.file-remove-btn .icon { width: 15px; height: 15px; }
.file-remove-btn:hover { background: var(--danger-bg); color: var(--danger); transform: scale(1.1); }

.file-drop-zone {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  border: 2px dashed var(--border); border-radius: var(--radius); padding: 18px;
  color: var(--text-muted); font-size: 13.5px; font-weight: 600; cursor: pointer;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease), color var(--dur) var(--ease);
  position: relative;
}
.file-drop-zone:hover, .file-drop-zone.is-dragover { border-color: var(--brand); background: var(--brand-light); color: var(--brand-dark); }
.file-drop-zone input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.file-drop-zone em { font-style: normal; color: var(--text-soft); font-weight: 400; }
/* Estado "subiendo": el contenido normal se oculta (via color transparente,
   igual que .btn.is-loading) y se muestra un spinner centrado, mientras la
   subida del fichero esta en curso por AJAX (ver initFileUpload() en
   wizard.js). */
.file-drop-zone.is-loading { color: transparent !important; pointer-events: none; border-style: solid; border-color: var(--brand); background: var(--brand-light); }
.file-drop-zone.is-loading::after {
  content: ''; position: absolute; width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid rgba(15,23,22,0.15); border-top-color: var(--brand-dark);
  animation: spin 0.7s linear infinite;
}

/* ---------------------------------------------------------------------
   Stat tiles (precio, valor percibido...)
   --------------------------------------------------------------------- */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 18px 0; }
.stat-tile {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; text-align: center;
  transition: transform var(--dur) var(--ease-spring), box-shadow var(--dur) var(--ease);
}
.stat-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.stat-tile .stat-label { font-size: 12px; color: var(--text-soft); margin-bottom: 6px; }
.stat-tile .stat-value { font-size: 22px; font-weight: 800; color: var(--brand-dark); }

/* ---------------------------------------------------------------------
   Alerts / flash
   --------------------------------------------------------------------- */
.alert { padding: 12px 16px; border-radius: 10px; font-size: 13.5px; margin-bottom: 16px; animation: fadeSlideUp var(--dur) var(--ease-out); }
.alert-success { background: var(--success-bg); color: var(--success); }
.alert-error { background: var(--danger-bg); color: var(--danger); }
.alert-info { background: var(--info-bg); color: var(--info); }

/* ---------------------------------------------------------------------
   Tablas admin
   --------------------------------------------------------------------- */
table.data-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.data-table th, table.data-table td { text-align: left; padding: 11px 12px; border-bottom: 1px solid var(--border); }
table.data-table th { color: var(--text-soft); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; }
table.data-table tr { transition: background var(--dur-fast) var(--ease); }
table.data-table tbody tr:hover { background: var(--surface-muted); }
table.data-table tr:last-child td { border-bottom: none; }
.row-actions { display: flex; gap: 8px; }

.page-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; flex-wrap: wrap; gap: 10px; }
.page-header h1 { font-size: 22px; font-weight: 800; }
.breadcrumbs { font-size: 13px; color: var(--text-soft); margin-bottom: 6px; }
.breadcrumbs a { color: var(--brand); transition: opacity var(--dur-fast) var(--ease); }
.breadcrumbs a:hover { opacity: 0.7; }

.empty-state { text-align: center; padding: 40px 20px; color: var(--text-soft); }

/* ---------------------------------------------------------------------
   Herramienta bloqueada (sin acceso por programa)
   --------------------------------------------------------------------- */
.tool-blocked-wrap { display: flex; align-items: center; justify-content: center; min-height: 60vh; padding: 20px; }
.tool-blocked-card {
  max-width: 420px; text-align: center; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 40px 34px; animation: fadeSlideUp var(--dur-slow) var(--ease-out);
}
.tool-blocked-icon {
  width: 56px; height: 56px; border-radius: 50%; margin: 0 auto 18px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #fef3c7, #fde68a); color: #92400e;
}
.tool-blocked-icon .icon { width: 26px; height: 26px; }
.tool-blocked-card h1 { font-size: 19px; font-weight: 800; margin: 0 0 8px; color: var(--text); }
.tool-blocked-card p { font-size: 14px; color: var(--text-muted); line-height: 1.55; margin: 0; }

.badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 700; transition: transform var(--dur-fast) var(--ease-spring); }
.badge-on { background: var(--success-bg); color: var(--success); }
.badge-off { background: var(--danger-bg); color: var(--danger); }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 720px) { .grid-2 { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------------
   Dashboard alumno
   --------------------------------------------------------------------- */
.phase-block { margin-bottom: 26px; }
.phase-title { font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-soft); margin-bottom: 10px; }
.section-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.section-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 20px; display: flex; flex-direction: column; gap: 10px; box-shadow: var(--shadow);
  transition: transform var(--dur) var(--ease-spring), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
  animation: fadeSlideUp var(--dur-slow) var(--ease-out) backwards;
}
.section-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); border-color: var(--accent-light); }
.section-card h3 { font-size: 17px; font-weight: 700; }
.section-card .mini-progress { height: 7px; border-radius: 999px; background: var(--border); overflow: hidden; }
.section-card .mini-progress > span { display: block; height: 100%; background: var(--brand); border-radius: 999px; transition: width 0.6s var(--ease-out); }
.section-card .mini-progress-label { font-size: 12px; color: var(--text-soft); }

/* Tarjeta "grupo" del dashboard (sección con subsecciones, ej. "Avanzado"):
   no es un enlace en sí misma (no tiene pasos propios) — su progreso es la
   suma del de sus subsecciones, y debajo lleva la lista de subsecciones,
   cada una como su propio mini-enlace con su progreso individual. */
.section-card-group:hover { transform: none; box-shadow: var(--shadow); border-color: var(--border); }
.section-card-group h3 { display: flex; align-items: center; gap: 8px; }
.section-card-sublist { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 2px; border-top: 1px solid var(--border); padding-top: 10px; }
.section-card-sublist a {
  display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: var(--radius-sm);
  color: var(--text); font-size: 13.5px; font-weight: 500;
  transition: background var(--dur-fast) var(--ease);
}
.section-card-sublist a:hover { background: var(--surface-muted); }
.section-card-sublist a .icon { color: var(--text-soft); flex-shrink: 0; }
.section-card-sublist a span:first-of-type { flex: 1; }
.section-card-sublist-progress { font-size: 11px; color: var(--text-soft); flex-shrink: 0; }

/* ---------------------------------------------------------------------
   Login
   --------------------------------------------------------------------- */
.auth-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--bg); padding: 20px; }
.auth-card {
  width: 100%; max-width: 380px; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 32px; box-shadow: var(--shadow-lift);
  animation: fadeSlideUp var(--dur-slow) var(--ease-out);
}
.auth-card .auth-logo { height: 40px; max-height: 40px; width: auto; display: block; margin-bottom: 18px; object-fit: contain; font-size: 0; color: transparent; }
.auth-card h1 { font-size: 21px; font-weight: 800; margin-bottom: 4px; }
.auth-card p.sub { color: var(--text-soft); font-size: 13.5px; margin-bottom: 22px; }
.auth-demo { margin-top: 18px; font-size: 12px; color: var(--text-soft); border-top: 1px solid var(--border); padding-top: 12px; }

/* ---------------------------------------------------------------------
   Documento (Resumen): ver DocumentBuilder::toHtml() — cada paso sale
   como su propia tarjeta (.doc-section) con el icono del paso, y cada
   pregunta separa la etiqueta (caption pequeña) del valor en líneas
   distintas en vez de "Etiqueta: valor" en una sola línea, para que las
   respuestas largas se lean bien.
   --------------------------------------------------------------------- */
.document-preview { animation: fadeSlideUp var(--dur-slow) var(--ease-out); }

.doc-hero {
  background: linear-gradient(135deg, var(--brand-dark), var(--brand));
  border-radius: var(--radius); padding: 26px 30px; margin-bottom: 20px;
}
.doc-hero h1 { font-size: 23px; font-weight: 800; color: #fff; margin: 0; }

.doc-section {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  margin-bottom: 16px; overflow: hidden;
}
.doc-section-head {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 22px; background: var(--surface-muted); border-bottom: 1px solid var(--border);
}
.doc-section-icon {
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 34px; height: 34px; border-radius: 10px;
  background: var(--brand-light); color: var(--brand-dark);
}
.doc-section-icon .icon { width: 18px; height: 18px; }
.doc-section-head h2 { font-size: 15.5px; font-weight: 700; color: var(--text); margin: 0; }

.doc-section-body { padding: 6px 22px 4px; }
.doc-item { padding: 14px 0; border-bottom: 1px solid var(--border); }
.doc-item:last-child { border-bottom: none; }
.doc-item-label { font-size: 12.5px; font-weight: 700; color: var(--text-soft); text-transform: uppercase; letter-spacing: .03em; margin: 0 0 6px; }
.doc-item-value { font-size: 14.5px; line-height: 1.65; color: var(--text); margin: 0; white-space: pre-line; }
.doc-item-list { margin: 0; padding-left: 20px; font-size: 14.5px; line-height: 1.6; color: var(--text); }
.doc-item-list li { margin-bottom: 5px; }

.doc-item-markdown { font-size: 14.5px; line-height: 1.65; color: var(--text); }
.doc-item-markdown h3, .doc-item-markdown h4 { margin: 12px 0 6px; color: var(--text); font-weight: 800; }
.doc-item-markdown h3:first-child, .doc-item-markdown h4:first-child { margin-top: 0; }
.doc-item-markdown p { margin: 0 0 8px; }
.doc-item-markdown ul, .doc-item-markdown ol { margin: 0 0 10px; padding-left: 20px; }
.doc-item-markdown li { margin-bottom: 4px; }
.doc-item-markdown strong { color: var(--text); font-weight: 800; }

@media (max-width: 640px) {
  .doc-hero { padding: 20px; }
  .doc-section-head { padding: 14px 16px; }
  .doc-section-body { padding: 2px 16px 2px; }
}

.icon { display: inline-flex; }

/* ---------------------------------------------------------------------
   TomSelect — tema a juego con la app
   --------------------------------------------------------------------- */
.ts-wrapper { font-size: 15px; }
.ts-wrapper.single .ts-control, .ts-wrapper .ts-control {
  /* Mismo padding vertical y tamaño de letra que un <input>/<select>
     normal (ver la regla "input[type=text], ... , select" más abajo) para
     que el control de TomSelect quede exactamente igual de alto y con la
     misma tipografía que la caja de texto de al lado (ej. la URL en
     "Tus páginas web y redes sociales") — antes el tema por defecto de
     TomSelect traía su propio font-size (13px) y 1px menos de padding, y
     el control salía visiblemente más bajo y con letra más pequeña. */
  padding: 10px 13px; font-size: 15px; border: 1.5px solid var(--border) !important; border-radius: 10px !important;
  background: #fff !important; box-shadow: none !important; transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.ts-wrapper.focus .ts-control { border-color: var(--brand) !important; box-shadow: 0 0 0 4px rgba(15,118,110,0.12) !important; }
.ts-dropdown {
  border: 1px solid var(--border) !important; border-radius: 12px !important; overflow: hidden;
  box-shadow: var(--shadow-lift) !important; margin-top: 6px !important;
  animation: fadeSlideUp 0.18s var(--ease-out);
  z-index: 1000 !important;
}
.ts-dropdown .option { padding: 9px 13px; font-size: 14px; transition: background var(--dur-fast) var(--ease); }
.ts-dropdown .active { background: var(--accent-light) !important; color: var(--accent-dark) !important; }
.ts-control > input { font-family: inherit !important; }
.ts-wrapper, .ts-wrapper .ts-control { min-width: 0; }
.ts-control > input { min-width: 0 !important; }
.plugin-clear_button .clear-button { opacity: 0.5; }

/* ---------------------------------------------------------------------
   SweetAlert2 — tema a juego con la app
   --------------------------------------------------------------------- */
.swal2-popup.aca-popup { border-radius: var(--radius-lg) !important; font-family: inherit !important; padding: 28px 24px !important; }
.swal2-popup.aca-popup .swal2-title { font-size: 19px !important; font-weight: 800 !important; color: var(--text) !important; }
.swal2-popup.aca-popup .swal2-html-container { font-size: 14.5px !important; color: var(--text-muted) !important; }
.aca-confirm-btn {
  background: #fb2c36 !important; color: #fff !important; border-radius: 10px !important;
  padding: 10px 20px !important; font-weight: 600 !important; font-size: 14px !important; box-shadow: none !important;
}
.aca-cancel-btn {
  background: var(--surface-muted) !important; color: var(--text) !important; border-radius: 10px !important;
  padding: 10px 20px !important; font-weight: 600 !important; font-size: 14px !important; box-shadow: none !important;
}
.aca-danger-btn { background: #fb2c36 !important; }
.swal2-toast.aca-toast {
  border-radius: 12px !important; box-shadow: var(--shadow-lift) !important;
  padding: 10px 14px !important;
}
.swal2-toast.aca-toast .swal2-title { font-size: 13.5px !important; font-weight: 600 !important; }

/* ---------------------------------------------------------------------
   Confetti canvas (celebracion al completar la oferta)
   --------------------------------------------------------------------- */
#confetti-canvas { position: fixed; inset: 0; pointer-events: none; z-index: 9999; }

/* ---------------------------------------------------------------------
   Inteligencia artificial (entrevista de validacion + sugerencias)
   --------------------------------------------------------------------- */
.ai-badge {
  display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px;
  border-radius: 999px; font-size: 11px; font-weight: 800; letter-spacing: 0.02em;
  background: linear-gradient(135deg, #a855f7, #6366f1); color: #fff; flex-shrink: 0;
}
.ai-badge .icon { width: 12px; height: 12px; }
.ai-suggest-btn .icon, .ai-empty-card .btn .icon { width: 14px; height: 14px; }

.ai-empty-card {
  border: 1.5px dashed #c9bff5; border-radius: var(--radius); padding: 22px;
  text-align: center; background: linear-gradient(135deg, #f5f2ff, #fdf3ff);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  animation: fadeSlideUp var(--dur-slow) var(--ease-out);
}
.ai-empty-card p { margin: 0; color: var(--text-muted); font-size: 13.5px; max-width: 440px; }

.ai-question-list { display: flex; flex-direction: column; gap: 12px; margin-bottom: 12px; }
.ai-question-card {
  border: 1.5px solid #e4defa; border-left: 4px solid #8b5cf6; border-radius: var(--radius);
  padding: 14px 16px; background: #fbfaff;
  animation: repeaterIn var(--dur-slow) var(--ease-out);
  transition: box-shadow var(--dur) var(--ease);
}
.ai-question-card:hover { box-shadow: var(--shadow); }
.ai-question-text { display: flex; align-items: flex-start; gap: 8px; font-weight: 600; font-size: 14px; margin-bottom: 10px; line-height: 1.5; }
.ai-question-card textarea { min-height: 72px; }

.ai-suggest-wrap { position: relative; }
.ai-suggest-btn {
  display: inline-flex; align-items: center; gap: 5px; margin-top: 8px;
  padding: 5px 11px; border-radius: 999px; border: 1px solid #dcd2fb; background: #f8f5ff;
  color: #6d28d9; font-size: 12px; font-weight: 700; cursor: pointer;
  transition: background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease-spring), box-shadow var(--dur-fast) var(--ease);
}
.ai-suggest-btn:hover { background: #efe7ff; transform: translateY(-1px); box-shadow: 0 4px 10px -6px rgba(109,40,217,0.4); }
.ai-suggest-btn:active { transform: translateY(0) scale(0.96); }
.ai-suggest-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.ai-suggest-btn svg { transition: transform 0.5s var(--ease); }

.is-thinking svg { animation: aiSpin 0.9s linear infinite; }
@keyframes aiSpin { to { transform: rotate(360deg); } }

/* ---------------------------------------------------------------------
   Toggle "Ya se cuales son" / "Que la IA los descubra" (grupos de campos)
   --------------------------------------------------------------------- */
.ai-group-toggle {
  display: inline-flex; align-items: stretch; gap: 4px; padding: 4px;
  border-radius: 999px; background: var(--surface-muted); border: 1px solid var(--border);
  margin-bottom: 16px; flex-wrap: wrap;
}
.ai-group-toggle-option {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px;
  border-radius: 999px; border: none; background: transparent; cursor: pointer;
  font-size: 13.5px; font-weight: 700; color: var(--text-muted);
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.ai-group-toggle-option .icon { width: 15px; height: 15px; }
.ai-group-toggle-option.is-active { background: #fff; color: var(--text); box-shadow: var(--shadow); }
.ai-group-toggle-option.ai-group-toggle-ai { color: #7c3aed; }
.ai-group-toggle-option.ai-group-toggle-ai:hover { background: #f3ecff; }
.ai-group-toggle-option.ai-group-toggle-ai.is-active,
.ai-group-toggle-option.ai-group-toggle-ai:active {
  background: linear-gradient(135deg, #a855f7, #6366f1); color: #fff; box-shadow: 0 4px 10px -6px rgba(109,40,217,0.5);
}

/* ---------------------------------------------------------------------
   Resumen de contexto con IA (campo 'ai_summary' — bloque "Contexto listo")
   --------------------------------------------------------------------- */
.context-ready-block {
  border: 1.5px solid #b7ecd9; border-radius: var(--radius); background: linear-gradient(135deg, #f2fdf8, #f7fbff);
  padding: 18px 20px; animation: fadeSlideUp var(--dur-slow) var(--ease-out);
}
.context-ready-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.context-ready-badge {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px;
  border-radius: 999px; font-size: 12.5px; font-weight: 800; letter-spacing: 0.01em;
  background: linear-gradient(135deg, #10b981, #059669); color: #fff;
}
.context-ready-badge .icon { width: 13px; height: 13px; }
.context-ready-body { font-size: 14px; line-height: 1.65; color: var(--text); }
.context-ready-body h3, .context-ready-body h4 { margin: 14px 0 6px; color: var(--text); font-weight: 800; }
.context-ready-body h3:first-child, .context-ready-body h4:first-child { margin-top: 0; }
.context-ready-body p { margin: 0 0 8px; }
.context-ready-body ul, .context-ready-body ol { margin: 0 0 10px; padding-left: 22px; }
.context-ready-body li { margin-bottom: 4px; }
.context-ready-body strong { color: var(--text); font-weight: 800; }

.ai-suggestion-panel {
  margin-top: 10px; padding: 13px 15px; border-radius: var(--radius);
  background: linear-gradient(135deg, #f5f2ff, #fdf3ff); border: 1px solid #e4defa;
  animation: fadeSlideUp var(--dur-slow) var(--ease-out);
}
.ai-suggestion-label { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: #6d28d9; margin-bottom: 6px; }
.ai-suggestion-text { margin: 0 0 10px; font-size: 13.5px; line-height: 1.6; color: var(--text); white-space: pre-wrap; }
.ai-suggestion-actions { display: flex; gap: 8px; }

/* =======================================================================
   Calendario de contenidos (social media planner)
   ======================================================================= */

.cal-page { --cal-ig: linear-gradient(135deg, #f9ce34, #ee2a7b 55%, #6228d7); --cal-ig-solid: #dd2a7b; --cal-fb: #1877f2; --cal-tt: #101114; --cal-tt-accent: #25F4EE; }

/* El calendario necesita más aire que el resto de páginas (formularios,
   tablas...), que sí quedan bien en el .main-inner de 1080px de siempre —
   así que esta página en concreto ensancha su propio contenedor en vez de
   tocar el max-width global. */
.main-inner:has(> .cal-page) { max-width: 1700px; width: 80%; }
@media (max-width: 1400px) { .main-inner:has(> .cal-page) { width: 92%; } }

.cal-subtitle { margin: 4px 0 0; font-size: 13.5px; color: var(--text-muted); max-width: 560px; line-height: 1.5; }
.page-header h1 { display: flex; align-items: center; gap: 9px; }
.page-header h1 .icon { color: var(--brand); }

/* --- Resumen de estados (idea/borrador/listo/publicado) --- */
.cal-summary { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
.cal-summary-item {
  display: flex; align-items: center; gap: 7px; padding: 9px 14px; border-radius: 999px;
  background: var(--surface); border: 1.5px solid var(--border); font-size: 13px; font-weight: 600; color: var(--text-muted);
  box-shadow: var(--shadow); animation: fadeSlideUp var(--dur-slow) var(--ease-out) backwards;
}
.cal-summary-count { font-size: 15px; font-weight: 800; color: var(--text); }
.cal-summary-idea .icon { color: var(--text-soft); }
.cal-summary-borrador .icon { color: var(--accent-dark); }
.cal-summary-listo .icon { color: var(--info); }
.cal-summary-publicado .icon { color: var(--success); }

/* --- Barra de herramientas: pestañas vista / navegación / filtro --- */
.cal-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 18px; }

.cal-view-toggle { display: inline-flex; padding: 4px; background: var(--surface-muted); border: 1.5px solid var(--border); border-radius: 999px; gap: 2px; }
.cal-view-toggle a {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 15px; border-radius: 999px;
  font-size: 13px; font-weight: 700; color: var(--text-muted); transition: all var(--dur-fast) var(--ease);
}
.cal-view-toggle a:hover { color: var(--text); }
.cal-view-toggle a.is-active { background: var(--surface); color: var(--brand); box-shadow: var(--shadow); }

.cal-nav { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cal-nav-btn { width: 44px; height: 44px; padding: 0 !important; display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; }
.cal-nav-today { padding: 11px 20px !important; font-size: 15px !important; font-weight: 700; border-radius: 12px; }
.cal-nav-label { font-size: 17px; font-weight: 800; color: var(--text); margin-left: 8px; min-width: 180px; text-transform: capitalize; }

.cal-filter-form select { min-width: 260px; }
.cal-filter-form .ts-wrapper { min-width: 260px; }

/* --- Vista mensual --- */
.cal-month { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.cal-month-weekdays { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); background: var(--surface-muted); border-bottom: 1px solid var(--border); }
.cal-month-weekday { padding: 10px 8px; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-soft); text-align: center; }
.cal-month-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }

/* Todas las celdas del mes tienen SIEMPRE el mismo ancho y el mismo alto,
   tengan o no publicaciones — minmax(0,1fr) arriba evita que el contenido
   de un día (un título largo, varias fichas...) empuje su columna a ser
   más ancha que las demás, y height (no min-height) + overflow:hidden
   aquí evita que un día con más fichas haga más alta su fila entera. Si
   hay más de 4 publicaciones ese día, el enlace "+N más" (ver la vista)
   es la forma de verlas todas — la celda nunca se estira para caber. */
.cal-day {
  height: 148px; padding: 8px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 6px; min-width: 0; overflow: hidden;
  transition: background var(--dur-fast) var(--ease);
}
.cal-day:nth-child(7n) { border-right: none; }
.cal-day:hover { background: var(--surface-muted); }
.cal-day.is-outside { background: var(--surface-muted); opacity: 0.55; }
.cal-day.is-today { background: var(--brand-light); }

.cal-day-head { display: flex; align-items: center; justify-content: space-between; }
.cal-day-num { font-size: 13px; font-weight: 700; color: var(--text-muted); display: flex; align-items: center; gap: 5px; }
.cal-day.is-today .cal-day-num { color: var(--brand-dark); font-weight: 800; }
.cal-day-today-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--brand); display: inline-block; }

.cal-day-add {
  width: 20px; height: 20px; border-radius: 6px; border: none; background: transparent; color: var(--text-soft);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0;
  transition: all var(--dur-fast) var(--ease);
}
.cal-day:hover .cal-day-add { opacity: 1; }
.cal-day-add:hover { background: var(--brand); color: #fff; transform: scale(1.1); }

.cal-day-posts { display: flex; flex-direction: column; gap: 4px; }

.cal-chip {
  display: flex; align-items: center; gap: 5px; padding: 4px 7px; border-radius: 7px; border: none;
  border-left: 3px solid transparent; background: var(--surface-muted); cursor: pointer; text-align: left;
  font-family: inherit; transition: transform var(--dur-fast) var(--ease-spring), box-shadow var(--dur-fast) var(--ease);
  animation: fadeSlideUp var(--dur) var(--ease-out) backwards;
}
.cal-chip:hover { transform: translateX(2px) scale(1.02); box-shadow: var(--shadow); z-index: 1; position: relative; }
.cal-chip-icon { flex: 0 0 auto; width: 15px; height: 15px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; }
.cal-chip-time { font-size: 10.5px; font-weight: 800; color: var(--text-soft); flex: 0 0 auto; }
.cal-chip-title { flex: 1 1 auto; min-width: 0; font-size: 11.5px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-chip .cal-badge-dot { flex: 0 0 auto; margin-left: 2px; }

.cal-chip--instagram { border-left-color: var(--cal-ig-solid); background: rgba(221,42,123,0.08); }
.cal-chip--instagram .cal-chip-icon { background: var(--cal-ig); }
.cal-chip--facebook { border-left-color: var(--cal-fb); background: rgba(24,119,242,0.08); }
.cal-chip--facebook .cal-chip-icon { background: var(--cal-fb); }
.cal-chip--tiktok { border-left-color: var(--cal-tt); background: rgba(37,244,238,0.10); }
.cal-chip--tiktok .cal-chip-icon { background: var(--cal-tt); color: var(--cal-tt-accent); }

.cal-day-more { display: block; font-size: 11px; font-weight: 700; color: var(--brand); padding: 2px 7px; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-day-more:hover { text-decoration: underline; }

/* --- Vista semanal --- */
.cal-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 12px; align-items: start; }
.cal-week-day {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 12px; display: flex; flex-direction: column; gap: 10px; min-height: 220px;
  transition: box-shadow var(--dur) var(--ease);
}
.cal-week-day.is-today { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-light); }
.cal-week-day-head { text-align: center; }
.cal-week-day-name { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-soft); }
.cal-week-day-num { font-size: 22px; font-weight: 800; color: var(--text); display: flex; align-items: center; justify-content: center; gap: 6px; }
.cal-week-day.is-today .cal-week-day-num { color: var(--brand-dark); }

.cal-week-add {
  border: 1.5px dashed var(--border); background: transparent; border-radius: 8px; padding: 6px; font-size: 12px;
  font-weight: 700; color: var(--text-soft); display: flex; align-items: center; justify-content: center; gap: 5px;
  cursor: pointer; transition: all var(--dur-fast) var(--ease);
}
.cal-week-add:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-light); }

.cal-week-day-posts { display: flex; flex-direction: column; gap: 8px; }
.cal-empty-hint { font-size: 12px; color: var(--text-soft); text-align: center; padding: 10px 0; font-style: italic; }

.cal-post-card {
  display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 12px; overflow: hidden;
  background: var(--surface); cursor: pointer; text-align: left; padding: 0; font-family: inherit;
  transition: transform var(--dur-fast) var(--ease-spring), box-shadow var(--dur) var(--ease);
  animation: fadeSlideUp var(--dur-slow) var(--ease-out) backwards;
}
.cal-post-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.cal-post-card-cover { position: relative; width: 100%; aspect-ratio: 4 / 3; background: var(--surface-muted); overflow: hidden; }
.cal-post-card-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cal-post-card-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: #fff; }
.cal-post-card-placeholder.cal-chip--instagram { background: var(--cal-ig); border: none; }
.cal-post-card-placeholder.cal-chip--facebook { background: var(--cal-fb); border: none; }
.cal-post-card-placeholder.cal-chip--tiktok { background: var(--cal-tt); border: none; }
.cal-post-card-time {
  position: absolute; top: 6px; right: 6px; padding: 2px 7px; border-radius: 999px; font-size: 10.5px; font-weight: 800;
  background: rgba(20,20,15,0.65); color: #fff; backdrop-filter: blur(2px);
}
.cal-post-card-body { padding: 8px 10px 10px; display: flex; flex-direction: column; gap: 4px; }
.cal-post-card-title { font-size: 12.5px; font-weight: 700; color: var(--text); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cal-post-card-meta { font-size: 11px; color: var(--text-muted); display: flex; align-items: center; gap: 5px; }

.cal-badge-dot { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; background: var(--text-soft); }
.cal-badge-dot.cal-status-idea { background: var(--text-soft); }
.cal-badge-dot.cal-status-borrador { background: var(--accent); }
.cal-badge-dot.cal-status-listo { background: var(--info); }
.cal-badge-dot.cal-status-publicado { background: var(--success); }

/* =======================================================================
   Modal (vista de publicación + formulario) — primer modal de la
   plataforma: backdrop centrado, con dos tamaños (compacto tipo "popup"
   desde el mes, grande desde la semana — ver calendar.js).
   ======================================================================= */
.cal-modal-backdrop {
  position: fixed; inset: 0; background: rgba(20,20,15,0.55); backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center; padding: 24px; z-index: 200;
  animation: calFadeIn var(--dur) var(--ease-out);
}
.cal-modal-backdrop[hidden] { display: none; }
@keyframes calFadeIn { from { opacity: 0; } to { opacity: 1; } }

.cal-modal {
  background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-lift);
  width: 100%; max-width: 480px; max-height: 88vh; overflow-y: auto; position: relative;
  animation: calPopIn var(--dur-slow) var(--ease-spring);
}
@keyframes calPopIn { from { opacity: 0; transform: scale(0.94) translateY(10px); } to { opacity: 1; transform: scale(1) translateY(0); } }
.cal-modal--large { max-width: 720px; }

.cal-modal-close {
  position: absolute; top: 12px; right: 12px; z-index: 2; width: 32px; height: 32px; border-radius: 50%;
  background: rgba(20,20,15,0.5); color: #fff; border: none; display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all var(--dur-fast) var(--ease);
}
.cal-modal-close:hover { background: rgba(20,20,15,0.75); transform: rotate(90deg); }

/* --- Modal "ver todo el día" (botón "+N más" de la vista mensual) --- */
.cal-modal--daylist { max-width: 460px; padding: 22px 20px 14px; }
.cal-daylist-title {
  display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 800; color: var(--text);
  margin: 0 30px 14px 0; text-transform: capitalize;
}
.cal-daylist { display: flex; flex-direction: column; gap: 6px; max-height: 60vh; overflow-y: auto; }
.cal-daylist-item {
  display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; border: none;
  border-left: 3px solid transparent; border-radius: 10px; padding: 9px 10px; cursor: pointer;
  background: var(--surface-muted); font: inherit; color: inherit; transition: all var(--dur-fast) var(--ease);
}
.cal-daylist-item:hover { transform: translateX(2px); box-shadow: var(--shadow); }
.cal-daylist-item .cal-chip-icon { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; }
.cal-daylist-item .cal-chip-icon svg { width: 13px; height: 13px; }
.cal-daylist-item--instagram, .cal-daylist-item.cal-chip--instagram { border-left-color: var(--cal-ig-solid); background: rgba(221,42,123,0.08); }
.cal-daylist-item.cal-chip--instagram .cal-chip-icon { background: var(--cal-ig); }
.cal-daylist-item.cal-chip--facebook { border-left-color: var(--cal-fb); background: rgba(24,119,242,0.08); }
.cal-daylist-item.cal-chip--facebook .cal-chip-icon { background: var(--cal-fb); }
.cal-daylist-item.cal-chip--tiktok { border-left-color: var(--cal-tt); background: rgba(37,244,238,0.10); }
.cal-daylist-item.cal-chip--tiktok .cal-chip-icon { background: var(--cal-tt); color: var(--cal-tt-accent); }
.cal-daylist-item-time { flex: 0 0 auto; font-size: 12px; font-weight: 800; color: var(--text-soft); }
.cal-daylist-item-title { flex: 1 1 auto; min-width: 0; font-size: 13.5px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-daylist-item .cal-badge-dot { flex: 0 0 auto; }

/* --- Ficha resumen al pasar el ratón (vista mensual) --- */
.cal-hover-card {
  position: fixed; z-index: 210; width: 280px; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-lift); padding: 14px 15px;
  pointer-events: none; opacity: 0; transform: translateY(4px); transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.cal-hover-card.is-visible { opacity: 1; transform: translateY(0); }
.cal-hover-card[hidden] { display: none; }
.cal-hover-card-title { font-size: 14.5px; font-weight: 800; color: var(--text); line-height: 1.3; margin-bottom: 4px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.cal-hover-card-datetime { display: flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; color: var(--text-soft); margin-bottom: 10px; }
.cal-hover-card-main { display: flex; gap: 10px; margin-bottom: 10px; }
.cal-hover-card-cover { flex: 0 0 auto; width: 52px; height: 52px; border-radius: 9px; overflow: hidden; border: 1px solid var(--border); position: relative; }
.cal-hover-card-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cal-hover-card-cover img[hidden] { display: none; }
.cal-hover-card-cover-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: #fff; }
.cal-hover-card-cover-placeholder[hidden] { display: none; }
.cal-hover-card-cover-placeholder.cal-chip--instagram { background: var(--cal-ig); }
.cal-hover-card-cover-placeholder.cal-chip--facebook { background: var(--cal-fb); }
.cal-hover-card-cover-placeholder.cal-chip--tiktok { background: var(--cal-tt); color: var(--cal-tt-accent); }
.cal-hover-card-cover-placeholder .icon { width: 18px; height: 18px; }
.cal-hover-card-copy { flex: 1 1 auto; min-width: 0; font-size: 12.5px; line-height: 1.45; color: var(--text-muted); margin: 0; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.cal-hover-card-copy.is-empty { font-style: italic; color: var(--text-soft); }
.cal-hover-card-badges { display: flex; gap: 6px; flex-wrap: wrap; }
.cal-hover-card-badges .cal-badge { padding: 3px 9px; font-size: 10.5px; }
.cal-hover-card-notes { display: flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 700; color: var(--brand-dark); margin-top: 9px; padding-top: 9px; border-top: 1px solid var(--border); }
.cal-hover-card-notes[hidden] { display: none; }

/* --- Vista de solo lectura --- */
.cal-view-cover { position: relative; width: 100%; aspect-ratio: 16 / 8; background: var(--surface-muted); }
.cal-modal--large .cal-view-cover { aspect-ratio: 16 / 7; }
.cal-view-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cal-view-cover img[hidden] { display: none; }
.cal-view-cover-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: #fff; }
.cal-view-cover-placeholder[hidden] { display: none; }
.cal-view-cover-placeholder .icon { width: 44px; height: 44px; }
.cal-view-cover-placeholder.cal-chip--instagram { background: var(--cal-ig); }
.cal-view-cover-placeholder.cal-chip--facebook { background: var(--cal-fb); }
.cal-view-cover-placeholder.cal-chip--tiktok { background: var(--cal-tt); }

.cal-view-body { padding: 20px 22px 4px; }
.cal-view-badges { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 10px; }
.cal-badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 11px; border-radius: 999px; font-size: 11.5px; font-weight: 700; color: #fff; }
.cal-badge-muted { background: var(--surface-muted) !important; color: var(--text-muted) !important; border: 1px solid var(--border); }
.cal-badge.is-instagram { background: var(--cal-ig); }
.cal-badge.is-facebook { background: var(--cal-fb); }
.cal-badge.is-tiktok { background: var(--cal-tt); color: var(--cal-tt-accent); }
.cal-badge-status.is-idea { background: var(--text-soft); }
.cal-badge-status.is-borrador { background: var(--accent); }
.cal-badge-status.is-listo { background: var(--info); }
.cal-badge-status.is-publicado { background: var(--success); }

.cal-view-title { font-size: 21px; font-weight: 800; color: var(--text); line-height: 1.3; margin-bottom: 8px; }
.cal-view-datetime { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--text-muted); margin-bottom: 14px; }
.cal-view-datetime .icon { color: var(--text-soft); }

.cal-view-section { padding: 12px 0; border-top: 1px solid var(--border); }
.cal-view-section h4 { display: flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-soft); margin-bottom: 6px; }
.cal-view-section p { font-size: 13.5px; line-height: 1.65; color: var(--text); white-space: pre-wrap; margin: 0; }
.cal-view-section-notes { background: #fffbeb; margin: 12px -22px -4px; padding: 14px 22px; border-top: 1px solid #f6e8b8; }
.cal-view-section-notes h4 { color: #92600a; }

.cal-view-actions { display: flex; gap: 10px; padding: 16px 22px 22px; }
.cal-view-actions .btn { flex: 1; }

/* --- Formulario (crear / editar) --- */
.cal-form { padding: 26px 22px 22px; }
.cal-form-title { font-size: 20px; font-weight: 800; margin-bottom: 16px; }
.cal-form .field-group { margin-bottom: 14px; }
.cal-form .grid-2 { margin-bottom: 0; }
.cal-form .grid-2 .field-group { margin-bottom: 14px; }

[data-cal-cover-remove][hidden] { display: none; }
[data-cal-cover-dropzone][hidden] { display: none; }
[data-cal-cover-preview][hidden] { display: none; }

/* Portada arriba del todo del formulario, antes incluso del título — caja
   de "elegir archivo" con borde discontinuo, icono + texto centrados,
   igual que el bloque de subida de capturas de la auditoría de Instagram
   (drop-zone), adaptado a la paleta de esta página. Sin cover: se ve la
   caja de arrastrar/elegir. Con cover: se sustituye por la vista previa
   de la imagen con una "x" para quitarla. */
.cal-cover-dropzone {
  border: 1.5px dashed var(--border); border-radius: var(--radius-lg);
  padding: 20px 20px 16px; text-align: center; cursor: pointer; margin-bottom: 20px;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.cal-cover-dropzone:hover, .cal-cover-dropzone.is-drag-over { background: var(--surface-muted); border-color: var(--brand); }
.cal-cover-dropzone:focus-visible { outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px rgba(15,118,110,0.12); }
.cal-cover-dropzone-icon {
  width: 52px; height: 52px; border-radius: 50%; margin: 0 auto 10px;
  background: var(--brand-light); border: 2px solid #99f0e6; color: var(--brand-dark);
  display: flex; align-items: center; justify-content: center;
}
.cal-cover-dropzone-title { font-size: 15.5px; font-weight: 700; color: var(--text); margin-bottom: 3px; }
.cal-cover-dropzone-sub { font-size: 13.5px; color: var(--text-muted); margin-bottom: 6px; }
.cal-cover-dropzone-formats { font-size: 12px; color: var(--text-soft); }

.cal-cover-preview-wrap { position: relative; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); margin-bottom: 20px; }
.cal-cover-preview-wrap img { display: block; width: 100%; max-height: 220px; object-fit: contain; background: var(--surface-muted); }
.cal-cover-preview-remove {
  position: absolute; top: 8px; right: 8px; width: 30px; height: 30px; border-radius: 50%;
  background: rgba(20,20,15,0.6); color: #fff; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center; transition: background var(--dur-fast) var(--ease);
}
.cal-cover-preview-remove:hover { background: rgba(20,20,15,0.8); }

/* Fecha (nativa) + hora (desplegable TomSelect cada 30 min), uno junto al otro. */
.cal-datetime-row { display: flex; gap: 8px; }
.cal-datetime-row input[type=date] { flex: 1 1 60%; min-width: 0; }
.cal-datetime-row .ts-wrapper { flex: 1 1 40%; min-width: 92px; }

.cal-form-actions { display: flex; gap: 10px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border); }
.cal-form-actions .btn { flex: 1; }

@media (max-width: 980px) {
  .cal-week { grid-template-columns: repeat(7, minmax(150px, 1fr)); overflow-x: auto; padding-bottom: 6px; }
}
@media (max-width: 780px) {
  .cal-month-weekday { font-size: 10px; padding: 7px 3px; }
  .cal-day { height: 146px; padding: 6px; }
  .cal-chip-title { display: none; }
  .cal-day-more { font-size: 10px; padding: 2px 4px; }
  .cal-nav-label { min-width: 0; font-size: 13.5px; }
  .cal-toolbar { flex-direction: column; align-items: stretch; }
  .cal-filter-form select { width: 100%; }
}

/* =======================================================================
   Editor de demo de plantillas de landing (vista previa en directo)
   ======================================================================= */

/* El editor de demo (campos + vista previa en directo lado a lado)
   necesita todo el ancho posible para que ambas columnas respiren —
   igual que el calendario, ensancha su propio contenedor en vez de tocar
   el max-width global de .main-inner (dejando sitio de sobra al menú
   lateral, que vive fuera de .main-inner). */
.main-inner:has(> .demo-edit-page) { max-width: none; width: 100%; }