:root{
  /* FONDO DE LA PANTALLA: Gris muy oscuro (Casi negro) */
  --bg:#121212; 
  
  /* TARJETA: Blanca (como la imagen que pasaste) */
  --card-bg:#FFFFFF;
  --card-text:#1f2937;  /* Texto gris oscuro para leer bien sobre blanco */
  
  /* COLORES DE MARCA */
  --accent:#ac1c26;     /* Rojo exacto */
  --warm:#a56a4a;       /* Marrón */
  --muted:#6b7280;      /* Gris medio */
  
  /* INPUTS (Campos de texto) */
  --input-bg: #f9fafb;  /* Gris muy clarito */
  --input-border: #d1d5db;
  --input-text: #111827;
}

*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--text);font-family:'Inter', system-ui, -apple-system, sans-serif;-webkit-tap-highlight-color: transparent}
.wrap{min-height:100%;display:flex;align-items:center;justify-content:center;padding:20px}

/* --- TARJETA BLANCA ESTILO CRM --- */
.card {
  position: relative;
  width: 100%;
  max-width: 760px;
  
  /* ESTADO BASE (Para el menú de registro): Altura automática */
  height: auto;           
  min-height: 550px;      /* Altura mínima para que no se vea chica en pantallas grandes */
  
  /* ESTÉTICA */
  background: #FFFFFF !important; /* Blanco puro forzado */
  color: #1f2937;
  border-top: 6px solid var(--accent);
  border-radius: 12px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.6);
  padding: 30px 40px;
  
  /* Flexbox para organizar */
  display: flex;
  flex-direction: column;
}

/* Títulos */
h1{ 
  color: #111827; /* Negro suave */
  font-size: 24px; 
  font-weight: 800; 
  margin: 0 0 5px 0; 
  letter-spacing: -0.02em;
}
h2{ margin:0 0 8px; color: #111827; }
p{ margin:0 0 20px; color:var(--muted); font-size: 15px; line-height:1.5; }

/* --- GRID & INPUTS (Mantenemos tu estructura) --- */
.grid{ display: grid; gap: 15px; }
.grid.two{ grid-template-columns: 1fr 1fr; }
@media (max-width: 600px){ .grid.two{ grid-template-columns: 1fr; } }

.input{ display:flex; flex-direction:column; gap:6px; margin:0; }

.input label{
  font-size: 11px;
  text-transform: uppercase;
  font-weight: 700;
  color: #4b5563; /* Gris medio oscurecido */
  letter-spacing: 0.05em;
  margin-left: 2px;
}

/* Inputs claros sobre fondo blanco */
.input input, 
.input select,
select{
  background: var(--input-bg) !important;
  border: 1px solid var(--input-border) !important;
  border-radius: 6px !important;
  color: var(--input-text) !important;
  padding: 10px 12px !important;
  font-size: 15px !important;
  width: 100%;
  transition: all .2s;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.03);
}

.input input:focus, 
.input select:focus{
  outline: none;
  background: #fff !important;
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(172, 28, 38, 0.1);
}

/* Placeholders */
.input input::placeholder{ color: #9ca3af; opacity: 1; }

/* --- BOTONES --- */
.actions{ display:flex; gap:10px; margin-top:24px; padding-top:20px; border-top:1px solid #e5e7eb; }

.btn{
  appearance:none;
  border:none;
  background: var(--accent);
  color:#fff;
  border-radius: 8px;
  padding: 12px 24px;
  font-size: 15px;
  font-weight: 700;
  cursor:pointer;
  transition: background .2s;
  box-shadow: 0 4px 6px rgba(172, 28, 38, 0.2);
}
.btn:hover{ background: #be1f2b; }
.btn[disabled]{ opacity:0.6; cursor:not-allowed; background: #9ca3af; box-shadow:none; }

/* --- PREGUNTAS (Adaptadas al fondo blanco) --- */
.q{ margin:10px 0; }
.title{ color:#111827; font-weight:700; margin-bottom:12px; font-size:18px; }

.opt{
  border:1px solid var(--input-border);
  background:#fff;
  border-radius:8px;
  padding:14px;
  cursor:pointer;
  color: #374151;
  transition: all .2s;
}
/* --- OPCIONES DE RESPUESTA --- */
/* --- OPCIONES DE RESPUESTA (Corrección Mobile) --- */
.opt {
  border: 1px solid var(--input-border);
  background: #fff;
  border-radius: 8px;
  padding: 14px;
  cursor: pointer;
  color: #374151;
  transition: transform 0.1s, background 0.2s;
  
  /* IMPORTANTE: Quita el resaltado azul nativo de Android/iOS */
  -webkit-tap-highlight-color: transparent; 
  user-select: none;
  outline: none; 
}

/* --- OPCIONES DE RESPUESTA (SOLUCIÓN FINAL MOBILE) --- */
.opt {
  /* 1. ESTADO POR DEFECTO: SIEMPRE BLANCO */
  background: #fff !important; 
  border: 1px solid var(--input-border) !important;
  border-radius: 8px;
  padding: 14px;
  cursor: pointer;
  color: #374151;
  transition: transform 0.1s; /* Quitamos transition de background para evitar lag visual */
  
  /* Quita el parpadeo azul nativo de tap */
  -webkit-tap-highlight-color: transparent; 
  user-select: none;
  outline: none; 
}

/* 2. HOVER: SOLO PARA MOUSE (Puntero fino) 
   Esta regla ignora completamente a los dedos en pantallas táctiles. */
@media (pointer: fine) {
  .opt:hover { 
    background: #fff1f2 !important; 
    border-color: var(--accent) !important; 
  }
}

/* 3. ACTIVE: FEEDBACK VISUAL AL TOCAR
   Esto es lo único que se iluminará en el celular, y solo MIENTRAS el dedo toca la pantalla. */
.opt:active { 
  transform: scale(0.98); 
  background: #fff1f2 !important; 
  border-color: var(--accent) !important;
}

/* 4. FOCUS: LIMPIEZA TOTAL
   Si el navegador intenta dejar el botón "enfocado" después del click, lo forzamos a blanco. */
.opt:focus, .opt:focus-visible {
  background: #fff !important;
  border-color: var(--input-border) !important;
  outline: none !important;
  box-shadow: none !important;
}

.opt.pulse { 
  animation: pulse .28s ease-out; 
}

/* Barra de progreso */
.progress{ margin-top:20px; background:#e5e7eb; height:8px; border-radius:999px; overflow:hidden; }
.bar{ height:8px; background:var(--accent); width:0%; }
.count{ font-size:12px; color:var(--muted); margin-top:6px; text-align:right; font-family:monospace; }

/* Mensajes */
.msg{ margin-top:14px; background:#f9fafb; border:1px solid #e5e7eb; padding:20px; border-radius:8px; }

/* Header Título + Logo */
.title-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom: 20px; border-bottom: 1px solid #e5e7eb; padding-bottom: 15px; }
.logo-inline{ height:32px; width:auto; display:block; object-fit:contain; }

.consent, .consent label{ color: var(--muted) !important; font-size: 13px; }
/* --- PIE DE PÁGINA (Forzado) --- */
.system-footer {
  margin-top: 30px;
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  /* Usamos !important para obligar a que sea gris oscuro como los labels */
  color: #4b5563 !important; 
  font-family: monospace;
  opacity: 1 !important; /* Quitamos transparencias viejas */
  width: 100%;
}

/* Ocultar logos viejos */
.logo-hero, .logo-top{ display:none !important; }
.card{ overflow:visible !important; }

/* --- CABECERA DE PREGUNTA (Logo + Timer) --- */
.q-header {
  display: flex;
  align-items: center;
  justify-content: space-between; /* Empuja elementos a los extremos */
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid #f3f4f6; /* Línea divisoria sutil */
}

.q-logo {
  height: 28px; /* Tamaño ajustado para no robar atención */
  width: auto;
  object-fit: contain;
  /* Si tu logo es blanco y el fondo blanco, invierte colores. 
     Si tu logo ya tiene color oscuro, quita el filter. */
  filter: brightness(0); 
  opacity: 0.7;
}

.timer-badge {
  font-size: 14px;
  font-weight: 800;
  color: #9ca3af;
  background: #f3f4f6;
  padding: 6px 16px;
  border-radius: 99px;
  border: 1px solid #e5e7eb;
  min-width: 60px;
  text-align: center;
  transition: all 0.3s ease;
}

/* Estado URGENTE */
.timer-badge.urgent {
  color: #fff;
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 2px 8px rgba(172, 28, 38, 0.3);
  animation: pulse-text 1s infinite;
}

@keyframes pulse-text {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

/* Estado URGENTE (Cuando llega a 0) */
.timer-float.urgent {
  color: #fff;
  background: var(--accent); /* Rojo */
  border-color: var(--accent);
  transform: scale(1.1);
  box-shadow: 0 4px 15px rgba(172, 28, 38, 0.4);
  animation: pulse-text 1s infinite;
}

@keyframes pulse-text {
  0% { transform: scale(1.1); opacity: 1; }
  50% { transform: scale(1.15); opacity: 0.9; }
  100% { transform: scale(1.1); opacity: 1; }
}

/* --- REGLAS ESPECÍFICAS PARA MODO PREGUNTAS --- */

/* 1. AHORA la tarjeta de preguntas se adapta al contenido */
body.questions .card {
  height: auto;        /* Sin altura fija */
  min-height: 0;       /* Sobrescribe el min-height: 550px del estado base */
  overflow: visible;   /* Sin scrollbar interno */
}

/* 2. Contenedor interno: dejamos que el contenido marque la altura */
body.questions #app {
  height: auto;
  display: flex;
  flex-direction: column;
}

/* 3. Pregunta: comportamiento natural, sin estirar de más */
body.questions .q {
  margin: 10px 0;
  display: block;
}

/* 4. Ajustes finos para header y barra de progreso */
body.questions .q-header {
  flex-shrink: 0;
  margin-bottom: 10px;
}

body.questions .progress {
  flex-shrink: 0;
  margin-top: 20px;
}

/* --- MODO POPUP PARA MENSAJES INTERMEDIOS --- */
body.popup-mode .card {
  height: auto;
  min-height: 0;
  display: flex;
  align-items: center;      /* Centra verticalmente el contenido */
  justify-content: center;  /* Centra horizontalmente */
}

body.popup-mode #app {
  width: 100%;
}

body.popup-mode .msg {
  max-width: 80%;
  margin: 0 auto;
}
/* --- CONTADOR ESPECIAL PARA POPUPS --- */

/* Caja del popup centrada ya la tenemos con popup-mode.
   Ahora centramos SOLO el contador debajo del texto. */
body.popup-mode .popup-timer-wrapper {
  margin-top: 16px;
  display: flex;
  justify-content: center;   /* Centrado horizontal */
}

/* La pill del contador en los popups: rojo, texto blanco */
body.popup-mode .timer-badge {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

/* Animación de latido */
@keyframes popup-beat {
  0%   { transform: scale(1);   box-shadow: 0 0 0 0 rgba(172,28,38,0.5); }
  50%  { transform: scale(1.15); box-shadow: 0 0 0 10px rgba(172,28,38,0); }
  100% { transform: scale(1);   box-shadow: 0 0 0 0 rgba(172,28,38,0); }
}

/* Clase que activa el latido en cada número */
body.popup-mode .timer-badge.beat {
  animation: popup-beat 0.35s ease-out;
}