:root{
  --sidebar:#3b5998;
  --sidebar-dark:#314a80;
  --bg:#f8fafc;
  --card:#ffffff;
  --text:#1e293b;
  --muted:#64748b;
  --border:#e2e8f0;
  --shadow:0 8px 24px rgba(15, 23, 42, 0.07);
  --radius:16px;
  --accent:#00bfa5;
  --accent-dark:#00a18b;
  --update:#425c96;
  --danger:#dc2626;
  --success:#067647;
  --warning:#f59e0b;
}

*{
  box-sizing:border-box;
}

html,
body{
  margin:0;
  padding:0;
  font-family:Arial, Helvetica, sans-serif;
  background:var(--bg);
  color:var(--text);
  min-height:100%;
}

body{
  min-height:100vh;
  overflow:hidden;
}

a{
  color:inherit;
}

button,
input,
select,
textarea{
  font:inherit;
}

/* =================================================================
   Anti-layout-shift: layout.js mueve el <h1> de .page-header al .topbar
   poco después del primer paint. Para que ese movimiento no haga "saltar"
   el contenido visualmente, hacemos dos cosas — todo CSS, sin veil:

   1) Mientras el h1 vive aún en .page-header (estado inicial, JS aún no
      ha movido nada) lo ocultamos con `visibility:hidden` + `height:0`.
      No ocupa altura → la página renderiza ya en su posición final.
      Sólo se activa cuando hay JS (html.js) para no romper el fallback
      sin scripts.

   2) Reservamos altura mínima en el topbar para acoger el h1 que va
      a aparecer ahí — así cuando layout.js lo inserta no crece la
      cabecera y nada se mueve.

   Tras layout.js hacer el `appendChild` al topbar, el h1 ya no es hijo
   de .page-header → el selector deja de coincidir → el h1 se muestra
   normal en el topbar. Solución limpia sin overlay ni spinner; el
   sidebar y todo el contenido quedan siempre visibles al navegar. */
html.js .page-header > h1{
  visibility:hidden;
  height:0;
  margin:0;
  overflow:hidden;
}

.app{
  display:grid;
  grid-template-columns:210px 1fr;
  min-height:100vh;
  height:100vh;
}

.sidebar{
  background:linear-gradient(180deg, var(--sidebar) 0%, var(--sidebar-dark) 100%);
  color:#fff;
  padding:14px 10px;
  display:flex;
  flex-direction:column;
  min-height:100vh;
}

.logo-box{
  display:flex;
  justify-content:center;
  margin:6px 0 18px;
}

.logo-wrap{
  width:170px;
  max-width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  /* Sin fondo ni borde: respeta la transparencia del PNG. */
}

.logo-wrap img{
  width:100%;
  height:auto;
  object-fit:contain;
  display:block;
}

.menu-title{
  color:rgba(255,255,255,0.45);
  font-size:9px;
  font-weight:700;
  letter-spacing:1px;
  text-transform:uppercase;
  padding:0 12px;
  margin:4px 0 4px;
}

.sidebar-item{
  display:flex;
  align-items:center;
  gap:12px;
  width:100%;
  text-decoration:none;
  color:rgba(255,255,255,0.84);
  padding:10px 12px;
  border-radius:10px;
  margin:2px 0;
  font-size:13px;
  font-weight:500;
  transition:background .2s ease, transform .2s ease, color .2s ease;
}

.sidebar-item:hover{
  background:rgba(255,255,255,0.08);
  color:#fff;
  transform:translateX(2px);
}

.sidebar-item.active{
  background:rgba(255,255,255,0.12);
  color:#fff;
  font-weight:700;
}

.sidebar-item.preview{
  color:var(--accent);
  background:rgba(255,255,255,0.03);
}

.sidebar-icon{
  width:20px;
  height:20px;
  flex:0 0 20px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:currentColor;
  opacity:0.92;
}

.sidebar-icon svg{
  width:100%;
  height:100%;
  display:block;
}

.sidebar-item.active .sidebar-icon,
.sidebar-item:hover .sidebar-icon{
  opacity:1;
}

.sidebar-spacer{
  flex:1;
}

.main{
  background:var(--bg);
  min-width:0;
  min-height:100vh;
  overflow:auto;
}

/* Modo compacto activado desde Ajustes — reduce paddings y radios. */
body.ui-compact .content{ padding:12px 14px 12px; }
body.ui-compact .sidebar-item{ padding:7px 10px; margin:1px 0; font-size:12.5px; }
body.ui-compact .sidebar-icon{ width:18px; height:18px; flex:0 0 18px; }
body.ui-compact .page-header h1{ font-size:24px; }
body.ui-compact .page-header p{ font-size:12px; }

.content{
  padding:18px 20px 18px;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  gap:14px;
}

.topbar{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:8px;
  flex:0 0 auto;
  min-height:46px;
}

/* Modal de generación de informe — selector de rango temporal y botón único */
.range-options{
  display:grid;
  gap:8px;
  margin:14px 0 6px;
}
.range-option{
  display:flex;
  align-items:center;
  gap:14px;
  width:100%;
  padding:14px 16px;
  border:1.5px solid #cbd5e1;
  background:#fff;
  border-radius:14px;
  cursor:pointer;
  text-align:left;
  font-family:inherit;
  color:#0f172a;
  transition:border-color .15s ease, background .15s ease, transform .15s ease;
}
.range-option:hover{
  border-color:#94a3b8;
  background:#f8fafc;
  transform:translateY(-1px);
}
.range-option.sel{
  border-color:#3b82f6;
  background:rgba(59,130,246,.08);
  box-shadow:0 0 0 3px rgba(59,130,246,.10);
}
.range-option .ro-icon{
  width:38px;
  height:38px;
  border-radius:11px;
  background:rgba(59,130,246,.12);
  color:#1d4ed8;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}
.range-option .ro-icon svg{ width:20px; height:20px; }
.range-option.sel .ro-icon{
  background:#3b82f6;
  color:#fff;
}
.range-option .ro-text{ flex:1; min-width:0; }
.range-option .ro-title{
  font-size:14px;
  font-weight:800;
  color:#0f172a;
  line-height:1.2;
}
.range-option .ro-sub{
  font-size:12px;
  color:#64748b;
  margin-top:2px;
  line-height:1.4;
}
.range-option .ro-check{
  width:22px;
  height:22px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#3b82f6;
  color:#fff;
  opacity:0;
  transform:scale(.6);
  transition:.15s;
  flex-shrink:0;
}
.range-option .ro-check svg{ width:14px; height:14px; }
.range-option.sel .ro-check{ opacity:1; transform:scale(1); }

/* Modo oscuro */
[data-theme="dark"] .range-option{
  background:#15203a;
  border-color:#2a3450;
  color:#e6edf7;
}
[data-theme="dark"] .range-option:hover{
  background:#1a2540;
  border-color:#5b8def;
}
[data-theme="dark"] .range-option.sel{
  background:rgba(91,141,239,.15);
  border-color:#5b8def;
  box-shadow:0 0 0 3px rgba(91,141,239,.12);
}
[data-theme="dark"] .range-option .ro-icon{
  background:rgba(91,141,239,.18);
  color:#93c5fd;
}
[data-theme="dark"] .range-option .ro-title{ color:#f1f5f9; }
[data-theme="dark"] .range-option .ro-sub{ color:#94a3b8; }

/* Opción "Incluir respuestas demo" del modal de reporte — mismo modal en
   encuestas.html, informes.html y resultados.html. */
.demo-option{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:10px 12px;
  margin-top:14px;
  border:1.5px solid #e2e8f0;
  border-radius:12px;
  background:#f8fafc;
  cursor:pointer;
  user-select:none;
}
.demo-option input[type="checkbox"]{
  margin-top:2px;
  width:16px; height:16px;
  accent-color:#3b82f6;
  flex-shrink:0;
}
.demo-option .do-text{
  font-size:13px;
  color:#1e293b;
  line-height:1.4;
}
.demo-option .do-text strong{ display:block; font-weight:700; margin-bottom:2px; }
.demo-option .do-text .do-sub{ color:#64748b; font-size:12px; }
[data-theme="dark"] .demo-option{
  background:#15203a;
  border-color:#2a3450;
}
[data-theme="dark"] .demo-option .do-text{ color:#e6edf7; }
[data-theme="dark"] .demo-option .do-text .do-sub{ color:#94a3b8; }

/* Título de la página inyectado en el topbar por layout.js — queda a la
   misma altura que el badge de email y los botones. `flex:1` empuja
   automáticamente todos los demás items hacia la derecha. */
.topbar-title{
  margin:0 12px 0 0;
  font-size:22px;
  line-height:1.1;
  font-weight:800;
  color:var(--text);
  letter-spacing:-.02em;
  flex:1 1 auto;
  min-width:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
@media (max-width: 720px){
  .topbar{ flex-wrap:wrap; }
  .topbar-title{
    flex-basis:100%;
    margin:0;
    order:-1;
    font-size:20px;
  }
}

.user-badge{
  background:#fff;
  border:1px solid var(--border);
  border-radius:999px;
  padding:8px 12px;
  font-size:12px;
  color:var(--muted);
  white-space:nowrap;
  max-width:300px;
  overflow:hidden;
  text-overflow:ellipsis;
}

.logout-btn{
  border:none;
  background:#fff;
  border:1px solid var(--border);
  color:var(--text);
  border-radius:10px;
  padding:8px 12px;
  font-size:12px;
  font-weight:700;
  cursor:pointer;
  transition:transform .2s ease, box-shadow .2s ease;
}

.logout-btn:hover{
  transform:translateY(-1px);
  box-shadow:0 4px 10px rgba(15,23,42,0.08);
}

/* Chip "DEMO" en el topbar — se muestra mientras la cuenta del usuario
   tenga `productionMode !== true`. Lo inyecta layout.js leyendo
   `users/{uid}` tras el login. Cuando el cliente compra la licencia y
   un admin pone `productionMode: true`, el chip desaparece. */
.demo-chip{
  display:inline-flex;
  align-items:center;
  height:28px;
  padding:0 10px;
  border-radius:999px;
  background:linear-gradient(135deg,#f59e0b,#fbbf24);
  color:#7c2d12;
  font-size:11px;
  font-weight:800;
  letter-spacing:.8px;
  border:1px solid rgba(146,64,14,.25);
  box-shadow:0 1px 2px rgba(15,23,42,.08);
  user-select:none;
  cursor:default;
}
[data-theme="dark"] .demo-chip{
  background:linear-gradient(135deg,#7c2d12,#92400e);
  color:#fde68a;
  border-color:rgba(253,230,138,.25);
}

.theme-toggle-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:36px;
  height:36px;
  border:1px solid var(--border);
  background:#fff;
  color:var(--text);
  border-radius:10px;
  padding:0;
  cursor:pointer;
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.theme-toggle-btn:hover{
  transform:translateY(-1px);
  box-shadow:0 4px 10px rgba(15,23,42,0.08);
}
.theme-toggle-btn svg{ width:16px; height:16px; }
[data-theme="dark"] .theme-toggle-btn{
  background:#1a2236;
  border-color:#2a3450;
  color:#fcd34d; /* sol amarillo cálido sobre azul oscuro */
}
[data-theme="dark"] .theme-toggle-btn:hover{
  background:#243155;
  box-shadow:0 4px 10px rgba(0,0,0,.35);
}

.page-header{
  margin:0;
}

/* Fallback si la página carga sin JS: el h1 sigue visible donde estaba.
   Cuando layout.js corre, mueve el h1 al .topbar y este selector deja de
   aplicar (el h1 ya no es descendiente de .page-header). */
.page-header h1{
  margin:0 0 4px;
  font-size:24px;
  line-height:1.1;
  font-weight:800;
  color:var(--text);
}

/* === Anti layout-shift al cargar ===
   Cuando JS está disponible (clase `js` aplicada inline en <head>) y la
   página tiene `.topbar`, layout.js va a mover el `<h1>` del page-header
   al topbar. Antes de que eso ocurra el h1 se pintaba en su sitio
   original durante unas milésimas, y al moverse el contenido de debajo
   subía bruscamente. Lo ocultamos preventivamente — JS lo reinserta en
   el topbar (sin la clase oculta) cuando arranca, sin parpadeo.

   Las páginas sin `.topbar` (login, alta-clientes, offline) NO entran
   en este selector y el h1 sigue visible donde estaba. */
html.js body:has(.topbar) .page-header h1{
  visibility:hidden;
}
/* Mientras tanto, reservamos espacio vertical para que el page-header
   no colapse a 0 y el contenido inferior no salte. La altura es la
   misma que la del h1 (~24 line-height + margen). */
html.js body:has(.topbar) .page-header{
  min-height:32px;
}
/* Cuando layout.js ya ha movido el título al topbar, marca <html> con la
   clase `app-ready` (al final del bootstrap). En ese momento dejamos
   visible cualquier h1 que pudiera quedar (no debería) y soltamos la
   reserva del page-header. */
html.app-ready body:has(.topbar) .page-header h1{ visibility:visible; }
html.app-ready body:has(.topbar) .page-header{ min-height:0; }

/* Reservamos el espacio del .topbar antes de que JS inyecte sus
   contenidos extras (botón tema, chip DEMO, título). Con min-height
   fijo en .topbar (definido más arriba) ya hay 46px, pero algunos
   navegadores aún calculaban menos por la ausencia de hijos. Forzamos
   el mínimo. */
.topbar{ min-height:46px; }

.page-header p{
  margin:0;
  font-size:13px;
  color:var(--muted);
}

.meta{
  color:var(--muted);
  font-size:12px;
  margin-top:5px;
}

.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:16px;
  box-shadow:0 2px 8px rgba(15,23,42,0.04);
  padding:18px;
}

.card-title{
  margin:0 0 14px;
  font-size:17px;
  font-weight:800;
  color:var(--text);
}

.field{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-bottom:12px;
}

.field label{
  font-size:13px;
  font-weight:700;
  color:#334155;
}

.field input[type="text"],
.field input[type="email"],
.field input[type="password"],
.field textarea,
.field select{
  width:100%;
  min-height:44px;
  border:1px solid var(--border);
  border-radius:12px;
  padding:10px 14px;
  font-size:14px;
  outline:none;
  background:#fff;
}

.field textarea{
  min-height:110px;
  resize:vertical;
}

.field input:focus,
.field textarea:focus,
.field select:focus{
  border-color:#94a3b8;
}

.setting-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  background:#f8fafc;
  border-radius:12px;
  padding:12px;
  margin-top:10px;
}

.setting-info strong{
  display:block;
  font-size:13px;
  margin-bottom:2px;
}

.setting-info span{
  font-size:11px;
  color:#6b7280;
}

.switch{
  position:relative;
  width:48px;
  height:28px;
  flex:0 0 48px;
}

.switch input{
  display:none;
}

.slider{
  position:absolute;
  inset:0;
  background:#cbd5e1;
  border-radius:999px;
  cursor:pointer;
  transition:.2s;
}

.slider:before{
  content:"";
  position:absolute;
  width:22px;
  height:22px;
  left:3px;
  top:3px;
  background:#fff;
  border-radius:50%;
  transition:.2s;
  box-shadow:0 1px 4px rgba(0,0,0,0.18);
}

.switch input:checked + .slider{
  background:var(--accent);
}

.switch input:checked + .slider:before{
  transform:translateX(20px);
}

.primary-btn{
  width:100%;
  height:50px;
  border:none;
  border-radius:12px;
  background:var(--accent);
  color:#fff;
  font-size:14px;
  font-weight:800;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}

.primary-btn.update{
  background:var(--update);
}

.primary-btn:disabled{
  opacity:.55;
  cursor:not-allowed;
}

.secondary-btn{
  height:42px;
  border:none;
  border-radius:12px;
  padding:0 16px;
  background:#e2e8f0;
  color:#0f172a;
  font-weight:700;
  cursor:pointer;
}

.small-btn{
  height:36px;
  border:none;
  border-radius:10px;
  padding:0 14px;
  background:var(--accent);
  color:#fff;
  font-size:13px;
  font-weight:700;
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:6px;
}

.small-btn:disabled{
  opacity:.55;
  cursor:not-allowed;
}

.icon-btn{
  width:34px;
  height:34px;
  border:none;
  border-radius:10px;
  background:#fff;
  border:1px solid var(--border);
  cursor:pointer;
  font-size:14px;
}

.icon-btn.delete{
  color:var(--danger);
}

.text-btn{
  border:none;
  background:transparent;
  color:var(--update);
  cursor:pointer;
  font-weight:700;
  padding:6px 0;
  font-size:14px;
}

.danger-btn{
  border:none;
  background:#fff1f2;
  color:#b91c1c;
  border-radius:10px;
  height:42px;
  padding:0 12px;
  cursor:pointer;
  font-weight:700;
}

.dashboard-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  grid-template-rows:repeat(2, minmax(120px, 1fr));
  gap:10px;
  flex:1 1 auto;
  min-height:0;
  align-items:stretch;
}

.hub-card{
  height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  background:var(--card);
  border-radius:16px;
  text-decoration:none;
  color:inherit;
  padding:10px;
  box-shadow:0 2px 6px rgba(15,23,42,0.04);
  border:1px solid rgba(226,232,240,0.9);
  transition:transform .2s ease, box-shadow .2s ease;
}

.hub-card:hover{
  transform:translateY(-2px);
  box-shadow:var(--shadow);
}

.hub-icon-wrap{
  width:42px;
  height:42px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:6px;
  font-size:18px;
  font-weight:700;
}

.hub-card h2{
  margin:0 0 4px;
  font-size:12.5px;
  line-height:1.1;
  font-weight:800;
  color:var(--text);
}

.hub-card p{
  margin:0;
  font-size:9.5px;
  line-height:1.25;
  color:var(--muted);
  max-width:170px;
}

.icon-green{ background:rgba(0,191,165,0.10); color:#00bfa5; }
.icon-blue{ background:rgba(59,130,246,0.10); color:#3b82f6; }
.icon-red{ background:rgba(239,68,68,0.10); color:#ef4444; }
.icon-purple{ background:rgba(142,36,170,0.10); color:#8e24aa; }
.icon-yellow{ background:rgba(245,158,11,0.10); color:#f59e0b; }
.icon-slate{ background:rgba(100,116,139,0.10); color:#64748b; }

.creator-layout{
  display:grid;
  grid-template-columns:0.42fr 0.58fr;
  gap:20px;
  flex:1 1 auto;
  min-height:0;
}

.left-column{
  min-height:0;
  overflow:auto;
  display:flex;
  flex-direction:column;
  gap:14px;
  padding-right:4px;
}

.right-column{
  min-height:0;
  display:flex;
  flex-direction:column;
}

.questions-card{
  display:flex;
  flex-direction:column;
  height:100%;
  min-height:0;
}

.questions-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:14px;
}

.questions-title{
  font-size:17px;
  font-weight:800;
  color:var(--text);
}

.questions-list{
  overflow:auto;
  display:flex;
  flex-direction:column;
  gap:10px;
  min-height:0;
  flex:1 1 auto;
}

.question-item{
  display:flex;
  align-items:center;
  gap:12px;
  background:#f8fafc;
  border-radius:10px;
  padding:12px;
}

.question-index{
  width:24px;
  font-size:14px;
  font-weight:800;
  color:var(--update);
  flex:0 0 24px;
}

.question-body{
  flex:1 1 auto;
  min-width:0;
}

.question-body strong{
  display:block;
  font-size:14px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.question-body span{
  display:block;
  font-size:11px;
  color:#6b7280;
  margin-top:3px;
}

.empty-state{
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  color:#64748b;
  font-size:14px;
  height:100%;
  min-height:220px;
  background:#f8fafc;
  border-radius:14px;
  border:1px dashed #cbd5e1;
  padding:20px;
}

.identity-row{
  display:grid;
  grid-template-columns:auto 1px 1fr;
  gap:20px;
  align-items:center;
}

.divider-v{
  width:1px;
  height:60px;
  background:#f1f5f9;
}

.logo-upload{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
}

.logo-preview{
  width:64px;
  height:64px;
  border-radius:14px;
  background:#f1f5f9;
  border:1px solid #e2e8f0;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  cursor:pointer;
}

.logo-preview img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.logo-upload .link{
  font-size:11px;
  font-weight:700;
  cursor:pointer;
  color:var(--accent);
}

.logo-upload .remove{
  font-size:10px;
  cursor:pointer;
  color:var(--danger);
}

.colors-box label{
  font-size:12px;
  color:#6b7280;
  font-weight:700;
  display:block;
  margin-bottom:8px;
}

.color-list{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.color-dot{
  width:28px;
  height:28px;
  border-radius:999px;
  border:1px solid #e2e8f0;
  cursor:pointer;
}

.color-dot.selected{
  border:2px solid var(--update);
}

.modal-backdrop{
  position:fixed;
  inset:0;
  background:rgba(15, 23, 42, 0.40);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:1000;
  padding:20px;
}

.modal-backdrop.show{
  display:flex;
}

.modal{
  width:100%;
  max-width:560px;
  background:#fff;
  border-radius:18px;
  box-shadow:0 16px 50px rgba(0,0,0,.20);
  padding:22px;
  max-height:90vh;
  overflow:auto;
}

.modal h3{
  margin:0 0 14px;
  font-size:22px;
}

.option-item{
  margin-bottom:10px;
}

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

.option-row input{
  flex:1 1 auto;
  height:42px;
  border:1px solid var(--border);
  border-radius:12px;
  padding:0 12px;
  font-size:14px;
}

.modal-actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  margin-top:18px;
}

.overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.4);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:1100;
}

.overlay.show{
  display:flex;
}

.loading-card{
  background:#fff;
  border-radius:16px;
  padding:32px;
  min-width:260px;
  text-align:center;
  box-shadow:0 16px 50px rgba(0,0,0,0.18);
}

.spinner{
  width:44px;
  height:44px;
  border:4px solid #dbeafe;
  border-top:4px solid var(--accent);
  border-radius:50%;
  margin:0 auto 18px;
  animation:spin 1s linear infinite;
}

@keyframes spin{
  from{transform:rotate(0deg);}
  to{transform:rotate(360deg);}
}

.hidden{
  display:none !important;
}

@media (max-width: 1200px){
  body{
    overflow:auto;
  }

  .dashboard-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    grid-template-rows:auto;
  }

  .creator-layout{
    grid-template-columns:0.44fr 0.56fr;
    gap:16px;
  }

  .content{
    min-height:auto;
  }

  .page-header h1{
    font-size:26px;
  }
}

@media (max-width: 900px){
  body{
    overflow:auto;
  }

  .app{
    height:auto;
  }

  /* El menú lateral permanece siempre visible en todas las secciones. */

  .dashboard-grid{
    grid-template-columns:1fr;
    grid-template-rows:auto;
  }

  .creator-layout{
    grid-template-columns:1fr;
  }

  .right-column{
    min-height:500px;
  }

  .content{
    min-height:auto;
    padding:16px 14px 20px;
  }

  .page-header h1{
    font-size:24px;
  }

  .page-header p{
    font-size:13px;
  }

  .identity-row{
    grid-template-columns:1fr;
  }

  .divider-v{
    display:none;
  }

  .topbar{
    flex-wrap:wrap;
    justify-content:flex-start;
  }
}

/* ═══════════════════════════════════════════════════════════
   BLOQUEADOR EN MÓVIL
   ─────────────────────────────────────────────────────────
   El panel admin se ha diseñado para pantallas grandes
   (tablet / ordenador). En pantallas estrechas (<= 720 px) se
   muestra un mensaje y se ocultan las páginas internas para
   evitar que el usuario intente usarlo en un teléfono.
   ═══════════════════════════════════════════════════════════ */

.mobile-blocker{
  display:none;
  position:fixed;
  inset:0;
  z-index:99999;
  background:linear-gradient(180deg,#0b1220 0%, #15203a 100%);
  color:#e6edf7;
  padding:32px 24px;
  overflow:auto;
}
.mobile-blocker .mb-inner{
  max-width:420px;
  margin:auto;
  min-height:100%;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  gap:18px;
}
.mobile-blocker .mb-logo{
  width:200px;
  max-width:80%;
}
.mobile-blocker .mb-logo img{
  width:100%;
  height:auto;
  display:block;
}
.mobile-blocker .mb-icon{
  width:88px; height:88px;
  border-radius:24px;
  background:rgba(91,141,239,0.18);
  color:#93c5fd;
  display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(91,141,239,0.30);
}
.mobile-blocker .mb-icon svg{ width:48px; height:48px; }
.mobile-blocker .mb-title{
  margin:0;
  font-size:1.45rem;
  font-weight:800;
  color:#f1f5f9;
  letter-spacing:-0.01em;
  line-height:1.2;
}
.mobile-blocker .mb-text{
  margin:0;
  font-size:0.96rem;
  line-height:1.55;
  color:#94a3b8;
}
.mobile-blocker .mb-cta{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:12px 22px;
  border-radius:14px;
  background:#3b82f6;
  color:#fff;
  text-decoration:none;
  font-weight:700;
  font-size:0.95rem;
  transition:transform .15s ease, background .15s ease;
}
.mobile-blocker .mb-cta:hover{ background:#2563eb; transform:translateY(-1px); }
.mobile-blocker .mb-foot{
  margin-top:4px;
  font-size:0.78rem;
  color:#64748b;
}
.mobile-blocker .mb-foot a{ color:#93c5fd; text-decoration:none; }

@media (max-width: 720px){
  body.has-mobile-blocker .mobile-blocker{ display:block; }
  body.has-mobile-blocker .app,
  body.has-mobile-blocker > .shell{
    display:none !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   TEMA OSCURO
   ─────────────────────────────────────────────────────────
   El selector `:root[data-theme="dark"]` tiene mayor especificidad
   que el `:root { … }` que algunas páginas redeclaran en sus <style>
   embebidos, así que las variables se sobrescriben de forma fiable
   en todo el panel.
   ═══════════════════════════════════════════════════════════ */

:root[data-theme="dark"]{
  /* Variables globales del shell */
  --bg:#0b1220;
  --card:#1a2236;
  --text:#e6edf7;
  --muted:#94a3b8;
  --border:#2a3450;
  --shadow:0 8px 24px rgba(0, 0, 0, 0.45);

  /* Variables usadas por las páginas embebidas (ajustes, ayuda,
     resultados, crear-encuesta, encuestas, etc.). Sobreescribir aquí
     evita tener que tocar cada <style> embebido. */
  --c-primary:#5b8def;
  --c-tp:#f1f5f9;
  --c-ts:#94a3b8;
  --c-border:#2a3450;
  --c-surface:#15203a;
  --c-danger:#f87171;
  --c-success:#34d399;
  --c-warn:#fbbf24;

  color-scheme: dark;
}

/* Cuerpo y contenedor principal */
[data-theme="dark"] body,
[data-theme="dark"] .main{
  background:var(--bg);
  color:var(--text);
}

/* Topbar */
[data-theme="dark"] .user-badge{
  background:var(--card);
  border-color:var(--border);
  color:var(--muted);
}
[data-theme="dark"] .logout-btn{
  background:var(--card);
  border-color:var(--border);
  color:var(--text);
}
[data-theme="dark"] .logout-btn:hover{
  box-shadow:0 4px 10px rgba(0,0,0,0.5);
}

/* Cards genéricas */
[data-theme="dark"] .card{
  background:var(--card);
  border-color:var(--border);
  box-shadow:0 2px 8px rgba(0,0,0,0.35);
}

/* Dashboard hub cards */
[data-theme="dark"] .hub-card{
  background:var(--card);
  border-color:var(--border);
  box-shadow:0 2px 6px rgba(0,0,0,0.35);
}
[data-theme="dark"] .hub-card h2{ color:var(--text); }
[data-theme="dark"] .hub-card p{ color:var(--muted); }

/* Question / empty / divider */
[data-theme="dark"] .question-item{ background:#111a2e; }
[data-theme="dark"] .question-body span{ color:var(--muted); }
[data-theme="dark"] .empty-state{
  background:#111a2e;
  border-color:#2a3450;
  color:var(--muted);
}
[data-theme="dark"] .divider-v{ background:#2a3450; }

/* Inputs, textareas, selects */
[data-theme="dark"] .field input[type="text"],
[data-theme="dark"] .field input[type="email"],
[data-theme="dark"] .field input[type="password"],
[data-theme="dark"] .field input[type="number"],
[data-theme="dark"] .field input[type="search"],
[data-theme="dark"] .field input[type="date"],
[data-theme="dark"] .field textarea,
[data-theme="dark"] .field select,
[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
[data-theme="dark"] textarea,
[data-theme="dark"] select{
  background:#0f1729;
  border-color:var(--border);
  color:var(--text);
}
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder{ color:#64748b; }

[data-theme="dark"] .field input:focus,
[data-theme="dark"] .field textarea:focus,
[data-theme="dark"] .field select:focus,
[data-theme="dark"] input:focus{
  border-color:#5b8def;
  outline:none;
}

/* Color dots / pickers */
[data-theme="dark"] .color-dot{ border-color:var(--border); }
[data-theme="dark"] .colors-box label{ color:var(--muted); }

/* Modal global */
[data-theme="dark"] .modal{
  background:var(--card);
  color:var(--text);
  box-shadow:0 20px 60px rgba(0,0,0,.6);
}
[data-theme="dark"] .modal-backdrop{
  background:rgba(0,0,0,.65);
}
[data-theme="dark"] .loading-card{
  background:var(--card);
  color:var(--text);
}
[data-theme="dark"] .spinner{ border-color:#1e2a47; border-top-color:#5b8def; }

/* Botones */
[data-theme="dark"] .icon-btn{
  background:var(--card);
  border-color:var(--border);
  color:var(--text);
}
[data-theme="dark"] .secondary-btn{
  background:#2a3450;
  color:var(--text);
}
[data-theme="dark"] .text-btn{ color:#5b8def; }
[data-theme="dark"] .danger-btn{
  background:rgba(220,38,38,.18);
  color:#fca5a5;
}

/* Página de ajustes — fondos blancos hardcodeados */
[data-theme="dark"] .settings-card,
[data-theme="dark"] .help-card,
[data-theme="dark"] .settings-card .action-item,
[data-theme="dark"] .data-action,
[data-theme="dark"] .toggle-row,
[data-theme="dark"] .info-link,
[data-theme="dark"] .biz-field input,
[data-theme="dark"] .survey-dropdown,
[data-theme="dark"] .help-search input,
[data-theme="dark"] .kiosk-code-chip{
  background:var(--card) !important;
  border-color:var(--border) !important;
  color:var(--text);
}

[data-theme="dark"] .info-row,
[data-theme="dark"] .kv-row,
[data-theme="dark"] .admin-row,
[data-theme="dark"] .signage-item{
  background:var(--c-surface) !important;
  border-color:var(--border) !important;
  color:var(--text);
}

[data-theme="dark"] .segmented{ background:#0f1729; }
[data-theme="dark"] .segmented button{ color:var(--muted); }
[data-theme="dark"] .segmented button.sel{
  background:var(--card);
  color:#5b8def;
  box-shadow:0 1px 3px rgba(0,0,0,.4);
}

/* Encuestas list — survey-item */
[data-theme="dark"] .survey-item{
  background:var(--card) !important;
  border-color:var(--border) !important;
  color:var(--text);
}
[data-theme="dark"] .survey-thumb{ border-color:var(--border); }

/* Resultados — chart-card y métricas */
[data-theme="dark"] .metric-card,
[data-theme="dark"] .chart-card,
[data-theme="dark"] .empty-stats .empty-box,
[data-theme="dark"] .selector-card,
[data-theme="dark"] .survey-select-card{
  background:var(--card) !important;
  border-color:var(--border) !important;
  color:var(--text);
}
[data-theme="dark"] .progress{ background:#0f1729; }

/* Ayuda — TOC y callout boxes */
[data-theme="dark"] .help-toc{
  background:var(--card);
  border-color:var(--border);
}
[data-theme="dark"] .help-toc a{ color:var(--text); }
[data-theme="dark"] .help-toc a:hover{ background:rgba(91,141,239,.10); color:#5b8def; }
[data-theme="dark"] .help-no-results{
  background:var(--card);
  border-color:var(--border);
  color:var(--muted);
}
[data-theme="dark"] .help-no-results h3{ color:var(--text); }
[data-theme="dark"] .help-pub-type{
  background:var(--c-surface);
  border-color:var(--border);
}
[data-theme="dark"] .help-pub-type h4{ color:var(--text); }
[data-theme="dark"] .help-callout{
  background:rgba(91,141,239,.10);
  color:var(--text);
}
[data-theme="dark"] .help-callout.warn{ background:rgba(251,191,36,.12); }
[data-theme="dark"] .help-callout.ok{   background:rgba(52,211,153,.12); }
[data-theme="dark"] .help-badge{ background:#0f1729; color:var(--text); }
[data-theme="dark"] mark.help-hit{
  background:rgba(251,191,36,.35);
  color:var(--text);
}

/* Page header */
[data-theme="dark"] .page-header h1{ color:var(--text); }
[data-theme="dark"] .page-header p{ color:var(--muted); }

/* Settings page-specific overrides (los <style> embebidos definen sus
   propios fondos directamente) */
[data-theme="dark"] .biz-field label,
[data-theme="dark"] .toggle-row .tr-title,
[data-theme="dark"] .action-item .ai-title,
[data-theme="dark"] .data-action .da-title,
[data-theme="dark"] .help-card h2,
[data-theme="dark"] .admin-info .value,
[data-theme="dark"] .kv-row .kv-value,
[data-theme="dark"] .info-row .ir-label{
  color:var(--text);
}

[data-theme="dark"] .toggle-row .tr-sub,
[data-theme="dark"] .action-item .ai-sub,
[data-theme="dark"] .data-action .da-sub,
[data-theme="dark"] .help-card p,
[data-theme="dark"] .help-card-head .help-card-sub,
[data-theme="dark"] .admin-info .label,
[data-theme="dark"] .kv-row .kv-label,
[data-theme="dark"] .info-row .ir-value{
  color:var(--muted);
}

/* Sidebar logo — invertir el PNG si es necesario para verlo bien sobre
   el gradiente oscuro. Lo dejamos como está: el sidebar ya es oscuro. */