/* ═══════════════════════════════════════════════════════════════
   ACT — Hoja de estilos principal
   Temas claro/oscuro vía variables CSS, layout adaptativo
   portrait/landscape, foco visible y prevención de gestos nativos.
   ═══════════════════════════════════════════════════════════════ */

/* ---------- Variables de tema ---------- */
:root {
  --fuente-app: 'Roboto', system-ui, sans-serif;
  --factor-fuente: 1;
  --radio: 14px;
  --sombra: 0 2px 10px rgba(0, 0, 0, 0.12);
}

/* Tema claro (por defecto) */
:root, [data-tema="claro"] {
  --fondo: #F2F6F4;
  --superficie: #FFFFFF;
  --superficie-2: #E9F0EC;
  --texto: #1F2A33;
  --texto-suave: #5A6B7A;
  --primario: #5C6BC0;
  --primario-fuerte: #3F51B5;
  --borde: #D9E2E8;
  --exito: #2E7D32;
  --peligro: #C62828;
  --aviso-fondo: #FFF8E1;
  --chip-texto: #FFFFFF;
}

/* Tema oscuro */
[data-tema="oscuro"] {
  --fondo: #10161B;
  --superficie: #1B242C;
  --superficie-2: #24303A;
  --texto: #E8EEF2;
  --texto-suave: #9FB0BE;
  --primario: #7986CB;
  --primario-fuerte: #9FA8DA;
  --borde: #2D3943;
  --exito: #3DBB73;
  --peligro: #E36A6A;
  --aviso-fondo: #3A3320;
  --chip-texto: #FFFFFF;
}

/* Tema automático: sigue la preferencia del sistema */
@media (prefers-color-scheme: dark) {
  [data-tema="automatico"] {
    --fondo: #10161B; --superficie: #1B242C; --superficie-2: #24303A;
    --texto: #E8EEF2; --texto-suave: #9FB0BE; --primario: #7986CB;
    --primario-fuerte: #9FA8DA; --borde: #2D3943; --exito: #3DBB73;
    --peligro: #E36A6A; --aviso-fondo: #3A3320;
  }
}

/* ---------- Base ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; }

/* El tamaño de fuente global se ajusta desde Configuración */
html { font-size: calc(16px * var(--factor-fuente)); }

/* overscroll-behavior none: bloquea pull-to-refresh y rebotes laterales */
html, body {
  height: 100%;
  overscroll-behavior: none;
  font-family: var(--fuente-app);
  background: var(--fondo);
  color: var(--texto);
  touch-action: manipulation; /* evita zoom por doble toque */
}

button, input, select, textarea { font-family: inherit; color: inherit; }

/* Inputs siempre a 16px reales como mínimo (evita zoom automático en iOS) */
input, select, textarea { font-size: max(1rem, 16px); }

/* Foco visible para navegación con tabulador */
:focus-visible { outline: 3px solid var(--primario); outline-offset: 2px; border-radius: 6px; }

.oculto { display: none !important; }

/* ---------- Estructura de pantallas ---------- */
#contenedorApp { height: 100dvh; overflow: hidden; }

.pantalla {
  display: none;
  height: 100dvh;
  flex-direction: column;
  overflow: hidden;
  /* Respetar muescas y barras del sistema */
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
.pantalla.activa { display: flex; }

/* ---------- Cabeceras ---------- */
.cabecera {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.6rem 0.9rem;
  background: var(--superficie);
  border-bottom: 1px solid var(--borde);
  flex-shrink: 0;
}
/* El nombre de la app es largo: escala con el ancho disponible y se
   recorta con puntos suspensivos antes de empujar los botones */
.logo {
  font-size: clamp(1rem, 4.2vw, 1.35rem);
  font-weight: 700; letter-spacing: 0.5px; color: var(--primario);
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.titulo-pantalla { font-size: 1.15rem; font-weight: 600; }
.cabecera-acciones { margin-left: auto; display: flex; gap: 0.3rem; }

/* ---------- Botones e iconos ---------- */
button { cursor: pointer; border: none; background: none; }

.btn-icono {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%;
  transition: background 0.15s;
  flex-shrink: 0;
}
.btn-icono:hover { background: var(--superficie-2); }

.btn-icono svg, .btn-redondo svg { width: 24px; height: 24px; }

.btn-primario, .btn-secundario, .btn-exito, .btn-peligro {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 48px; padding: 0.6rem 1.2rem;
  border-radius: var(--radio); font-size: 1rem; font-weight: 600;
  color: #fff; transition: filter 0.15s;
}
.btn-primario { background: var(--primario); }
.btn-secundario { background: var(--superficie-2); color: var(--texto); border: 1px solid var(--borde); }
.btn-exito { background: var(--exito); }
.btn-peligro { background: var(--peligro); }
.btn-primario:hover, .btn-exito:hover, .btn-peligro:hover { filter: brightness(1.1); }

/* Iconos SVG dentro de botones grandes: SIN tamaño explícito, un <svg>
   con solo viewBox colapsa a tamaño 0 dentro de su contenedor y el
   icono resulta invisible (era el caso de "+ Añadir bloque", Guardar…) */
.btn-primario svg, .btn-secundario svg, .btn-exito svg, .btn-peligro svg {
  width: 20px; height: 20px; flex-shrink: 0;
}

.btn-pequeno {
  background: var(--primario); color: #fff; font-weight: 600;
  padding: 0.35rem 0.9rem; border-radius: 999px; min-height: 36px;
}
.btn-fichero {
  display: inline-flex; align-items: center; gap: 0.4rem;
  background: var(--superficie-2); border: 1px dashed var(--primario);
  color: var(--texto); padding: 0.5rem 0.9rem; border-radius: 10px; font-size: 0.95rem;
}
/* Iconos de los botones "Elegir…" siempre del mismo tamaño */
.btn-fichero svg { width: 20px; height: 20px; flex-shrink: 0; }

/* FAB: solo el símbolo +, en negrita (tamaño reducido un 15%) */
.fab {
  position: fixed;
  right: calc(1.2rem + env(safe-area-inset-right));
  bottom: calc(1.4rem + env(safe-area-inset-bottom));
  width: 54px; height: 54px; border-radius: 50%;
  background: var(--primario); box-shadow: var(--sombra);
  display: flex; align-items: center; justify-content: center;
  z-index: 30;
}
.fab svg { width: 30px; height: 30px; }

/* Botón Instalar APP (centrado abajo, solo si no está instalada).
   Color verde con letras blancas: acción afirmativa de instalación */
.btn-instalar {
  position: fixed;
  left: 50%; transform: translateX(-50%);
  bottom: calc(1.2rem + env(safe-area-inset-bottom));
  z-index: 25;
  background: var(--exito); color: #fff;
  padding: 0.7rem 1.4rem; border-radius: 999px; font-weight: 600;
  box-shadow: var(--sombra);
  display: flex; align-items: center; gap: 0.5rem;
}

/* ---------- Pantalla 1: lista ---------- */
.lista-cabecera { padding: 0.9rem 1rem 0.3rem; color: var(--texto-suave); flex-shrink: 0; }
.lista-cabecera h2 { font-size: 1rem; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; }

.lista-actividades {
  flex: 1; min-height: 0;
  overflow-y: auto; overscroll-behavior-y: none;
  padding: 0.6rem 1rem 6.5rem;
  display: grid; gap: 0.8rem;
  grid-template-columns: 1fr;
  align-content: start;
}

/* Rejilla al apaisar / pantallas anchas */
@media (orientation: landscape) and (min-width: 640px) {
  .lista-actividades { grid-template-columns: repeat(2, 1fr); }
}
@media (orientation: landscape) and (min-width: 1100px) {
  .lista-actividades { grid-template-columns: repeat(3, 1fr); }
}

.tarjeta-actividad {
  position: relative;
  background: var(--superficie); border: 1px solid var(--borde);
  border-radius: var(--radio); padding: 0.9rem 1rem;
  box-shadow: var(--sombra); user-select: none;
  /* El color personalizado de la actividad se aplica por JS (inline) */
}
.tarjeta-actividad:active { filter: brightness(0.97); }
.tarjeta-fila { display: flex; align-items: center; gap: 0.4rem; min-width: 0; }
.tarjeta-titulo { font-size: 1.1rem; font-weight: 600; margin-bottom: 0.2rem; flex: 1; min-width: 0; }
/* La info hereda el color de la tarjeta (tema o personalizado) con opacidad */
.tarjeta-info { font-size: 0.9rem; opacity: 0.75; }

/* Botón de menú pegado a la derecha de la tarjeta */
.btn-tres-puntos { margin-left: auto; }

/* Menú de tres puntos dentro de cada tarjeta */
.menu-tarjeta {
  position: absolute; right: 0.6rem; top: 2.7rem; z-index: 20;
  background: var(--superficie); border: 1px solid var(--borde);
  border-radius: 12px; box-shadow: var(--sombra);
  display: flex; flex-direction: column; min-width: 200px; overflow: hidden;
}
.menu-tarjeta button {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.7rem 1rem; text-align: left; font-size: 0.95rem;
  color: var(--texto); /* el menú siempre legible aunque la tarjeta tenga color propio */
}
.menu-tarjeta button:hover { background: var(--superficie-2); }
.menu-tarjeta button.peligroso { color: var(--peligro); }
.menu-tarjeta svg { width: 18px; height: 18px; flex-shrink: 0; }

/* Flechas del modo reordenación */
.controles-orden { display: none; gap: 0.2rem; }
body.modo-reordenar .controles-orden { display: flex; }
body.modo-reordenar .btn-tres-puntos { display: none; }

.banner {
  position: fixed; top: calc(0.8rem + env(safe-area-inset-top)); left: 50%;
  transform: translateX(-50%); z-index: 40;
  background: var(--primario-fuerte); color: #fff;
  padding: 0.6rem 1rem; border-radius: 999px;
  display: flex; align-items: center; gap: 0.8rem; box-shadow: var(--sombra);
}
.banner .btn-pequeno { background: #fff; color: var(--primario-fuerte); }

/* Aviso privacidad minimalista */
.aviso-privacidad {
  position: fixed; left: 1rem; right: 1rem;
  bottom: calc(4.6rem + env(safe-area-inset-bottom));
  z-index: 35; background: var(--aviso-fondo);
  border: 1px solid var(--borde); border-radius: 12px;
  padding: 0.7rem 0.9rem; font-size: 0.85rem; color: var(--texto);
  display: flex; align-items: center; gap: 0.8rem; box-shadow: var(--sombra);
}

/* Estado vacío de la lista */
.lista-vacia {
  grid-column: 1 / -1; text-align: center; color: var(--texto-suave);
  padding: 3rem 1.2rem;
}
.lista-vacia .lista-vacia-principal { font-size: 1.1rem; font-weight: 600; color: var(--texto); }
.lista-vacia .lista-vacia-ayuda { margin-top: 0.5rem; font-size: 0.92rem; line-height: 1.5; }

/* ---------- Pantalla 2: editor ---------- */
/* min-height: 0 es imprescindible para que el scroll funcione
   dentro de un contenedor flex en columnas */
.editor-contenido {
  flex: 1; min-height: 0;
  overflow-y: auto; overscroll-behavior-y: none;
  padding: 1rem; display: flex; flex-direction: column; gap: 1.2rem;
}

/* Apaisado: dos columnas con scroll propio.
   La fila del grid se define como minmax(0, 1fr) para que los items
   puedan encoger por debajo de su contenido (si no, la lista de
   bloques crece infinita y el scroll no aparece). */
@media (orientation: landscape) and (min-width: 640px) {
  .editor-contenido {
    display: grid;
    grid-template-columns: minmax(280px, 1fr) 2fr;
    grid-template-rows: minmax(0, 1fr);
    gap: 1.5rem;
    overflow: hidden;
  }
  .editor-datos { overflow-y: auto; overscroll-behavior-y: none; min-height: 0; }
  .editor-bloques { display: flex; flex-direction: column; overflow: hidden; min-height: 0; }
  .bloques-cabecera { flex-shrink: 0; }
  .lista-bloques { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior-y: none; }
}

.etiqueta { display: block; font-weight: 600; margin: 0.9rem 0 0.35rem; color: var(--texto-suave); font-size: 0.95rem; }
.campo-color .etiqueta { margin-top: 0; }
.editor-datos > .etiqueta:first-child { margin-top: 0; }

.input-titulo {
  width: 100%; font-size: 1.4rem; font-weight: 600;
  padding: 0.7rem 0.9rem; border-radius: var(--radio);
  border: 2px solid var(--borde); background: var(--superficie);
}
.input-titulo:focus { border-color: var(--primario); outline: none; }

.zona-fichero {
  background: var(--superficie); border: 1px solid var(--borde);
  border-radius: var(--radio); padding: 0.8rem;
  display: flex; flex-direction: column; gap: 0.6rem;
}
/* Resaltado al arrastrar un fichero encima (drag & drop) */
.zona-fichero.arrastrando {
  border: 2px dashed var(--primario);
  background: var(--superficie-2);
}
.zona-fichero-botones { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.chip-fichero {
  font-size: 0.9rem; color: var(--texto-suave);
  background: var(--superficie-2); border-radius: 8px; padding: 0.35rem 0.6rem;
  max-width: 100%; overflow-wrap: anywhere;
}

/* Selección de colores de la actividad */
.fila-colores { display: flex; gap: 1rem; margin-top: 1rem; }
.fila-colores .campo-color { flex: 1; }
input[type="color"] {
  width: 100%; height: 48px; padding: 4px;
  border: 1.5px solid var(--borde); border-radius: 10px;
  background: var(--superficie); cursor: pointer;
}

.bloques-cabecera { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.7rem; }
.bloques-cabecera h3 { font-size: 1rem; text-transform: uppercase; letter-spacing: 1px; color: var(--texto-suave); }

.lista-bloques { display: flex; flex-direction: column; gap: 0.8rem; padding-bottom: 1rem; }

.tarjeta-bloque {
  background: var(--superficie); border: 1px solid var(--borde);
  border-radius: var(--radio); overflow: hidden;
  /* IMPRESCINDIBLE en landscape: .lista-bloques es un flex-column con
     altura limitada; sin flex-shrink: 0, las tarjetas (con overflow:
     hidden, cuyo tamaño mínimo automático es 0) se COMPRIMEN y RECORTAN
     su contenido en vez de desbordar el contenedor con scroll. */
  flex-shrink: 0;
}
.bloque-cabecera {
  display: flex; align-items: center; gap: 0.4rem;
  padding: 0.7rem 0.8rem; cursor: pointer;
}
.bloque-num {
  background: var(--primario); color: #fff; font-weight: 700;
  width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.bloque-titulo-mini { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
.bloque-duracion-mini { color: var(--texto-suave); font-size: 0.85rem; flex-shrink: 0; }
.bloque-cuerpo { padding: 0.4rem 1rem 1rem; border-top: 1px solid var(--borde); }
.tarjeta-bloque.colapsado .bloque-cuerpo { display: none; }

.bloque-cuerpo input[type="text"],
.bloque-cuerpo input[type="number"] {
  width: 100%; padding: 0.55rem 0.7rem;
  border: 1.5px solid var(--borde); border-radius: 10px;
  background: var(--superficie);
}
.bloque-cuerpo .etiqueta { margin-top: 0.8rem; }

/* Checks */
.check-fila {
  display: flex; align-items: center; gap: 0.6rem;
  margin-top: 0.7rem; font-size: 0.95rem; cursor: pointer;
}
.check-fila input { width: 20px; height: 20px; accent-color: var(--primario); flex-shrink: 0; }

/* Interruptores (switch) e intervalos */
.interruptor { appearance: none; width: 48px; height: 26px; border-radius: 999px;
  background: var(--borde); position: relative; cursor: pointer; transition: background 0.2s; flex-shrink: 0; }
.interruptor::after { content: ""; position: absolute; top: 3px; left: 3px;
  width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: left 0.2s; }
.interruptor:checked { background: var(--primario); }
.interruptor:checked::after { left: 25px; }

input[type="range"] { accent-color: var(--primario); width: 100%; min-height: 44px; }

.editor-pie {
  flex-shrink: 0; display: flex; gap: 0.8rem; justify-content: center;
  padding: 0.8rem 1rem calc(0.8rem + env(safe-area-inset-bottom));
  background: var(--superficie); border-top: 1px solid var(--borde);
}
.editor-pie button { flex: 1; max-width: 320px; }

/* ---------- Pantalla 3: ejecución ---------- */
.ejecucion-cabecera {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.5rem 0.8rem; flex-shrink: 0;
  background: var(--superficie); border-bottom: 1px solid var(--borde);
}
.btn-redondo {
  width: 46px; height: 46px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--superficie-2); flex-shrink: 0;
}
.btn-redondo.desactivado { background: var(--borde); opacity: 0.55; }

.ejecucion-titulos { min-width: 0; flex: 1; }
.ejecucion-titulo { font-weight: 700; font-size: 1.05rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ejecucion-bloque-info { font-size: 0.85rem; color: var(--texto-suave); text-transform: uppercase; letter-spacing: 1px; }

/* Grupo cronómetro: botones −/+ flanqueando el reloj */
.grupo-crono { display: flex; align-items: center; gap: 0.25rem; flex-shrink: 0; }
.btn-crono {
  width: 34px; height: 34px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--superficie-2); flex-shrink: 0;
}
.btn-crono svg { width: 16px; height: 16px; }

/* El tamaño de la fuente del cronómetro lo controla la preferencia
   "tamanoCronometro" (70%–250%) aplicada como variable por JS */
.cuenta-atras {
  font-family: ui-monospace, 'Courier New', monospace;
  font-size: calc(1.7rem * var(--escala-cronometro, 1));
  font-weight: 700; letter-spacing: 2px;
  font-variant-numeric: tabular-nums; flex-shrink: 0;
}
.cuenta-atras.urgente { color: var(--peligro); }

.ejecucion-principal {
  flex: 1; min-height: 0;
  display: flex; flex-direction: column;
}

/* Zona multimedia: el elemento llena TODO el contenedor y el
   contenido (imagen/vídeo) se ajusta dentro sin deformarse */
.ejecucion-media {
  position: relative; flex: 1; min-height: 0;
  background: #000; overflow: hidden;
}
.media-zona { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; position: relative; }
.media-zona img, .media-zona video {
  width: 100%; height: 100%;
  object-fit: contain; /* ocupa el máximo sin deformación */
  background: #000;
}
.media-placeholder {
  width: 100%; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.6rem; color: #9FB0BE; background: #10161B;
}
.media-placeholder svg { width: 48px; height: 48px; }

/* ---------- Controles personalizados del vídeo (estilo YouTube) ----------
   Aparecen al pasar el ratón o al tocar el vídeo; se ocultan tras 3 s
   sin interacción. No afectan al rótulo, que se reubica arriba cuando
   hay vídeo para evitar solapamientos.

   Estructura: el contenedor .video-controles ocupa TODO el ancho (left:0;
   right:0) con su fondo degradado. Un contenedor interior .video-controles-inner
   lleva padding-left:100px para desplazar los botones 100px a la derecha
   sin recortar el fondo. */
.video-controles {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: linear-gradient(transparent, rgba(0,0,0,0.85));
  color: #fff;
  opacity: 0; pointer-events: none;
  transition: opacity 0.22s ease;
  z-index: 2;
}
.video-controles-inner {
  display: flex; align-items: center; gap: 0.4rem;
  padding: 0.55rem 0.7rem calc(0.55rem + env(safe-area-inset-bottom)) 100px;
}
.media-zona.controles-visibles .video-controles {
  opacity: 1; pointer-events: auto;
}
.video-control-btn {
  background: none; border: none; color: #fff;
  width: 38px; height: 38px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; border-radius: 6px;
  -webkit-tap-highlight-color: transparent;
}
.video-control-btn:active { background: rgba(255,255,255,0.18); }
.video-control-btn svg { width: 22px; height: 22px; display: block; }
.video-volumen-slider {
  flex: 1; max-width: 130px; height: 4px;
  accent-color: #fff; cursor: pointer;
  background: rgba(255,255,255,0.4); border-radius: 2px;
}
.video-volumen-slider::-webkit-slider-thumb { background: #fff; }
.video-volumen-slider::-moz-range-thumb { background: #fff; }

/* Rótulo del bloque sobre el multimedia, con degradado para legibilidad.
   Cuando hay vídeo, el rótulo se reubica ARRIBA para evitar solapamiento
   con la barra de controles del vídeo (que va abajo).

   Estructura: el contenedor .rotulo-overlay ocupa TODO el ancho (left:0;
   right:0) con su fondo degradado. Un contenedor interior .rotulo-overlay-inner
   lleva padding-left:100px para desplazar el texto 100px a la derecha
   sin recortar el fondo. */
.rotulo-overlay {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: linear-gradient(transparent, rgba(0,0,0,0.75));
  color: #fff; font-size: 1.3rem; font-weight: 600;
  text-shadow: 0 1px 3px rgba(0,0,0,0.6);
  pointer-events: none;
  z-index: 1;
}
.rotulo-overlay-inner {
  padding: 1.6rem 1rem 0.7rem 100px;
}
.ejecucion-media.tiene-video .rotulo-overlay {
  bottom: auto; top: 0;
  background: linear-gradient(rgba(0,0,0,0.75), transparent);
}
.ejecucion-media.tiene-video .rotulo-overlay-inner {
  padding: 0.7rem 1rem 1.6rem 100px;
}

/* Lateral (portrait: debajo del media; landscape: columna derecha) */
.ejecucion-lateral {
  flex-shrink: 0; display: flex; flex-direction: column;
  align-items: center; gap: 0.5rem;
  padding: 0.8rem 1rem calc(0.9rem + env(safe-area-inset-bottom));
}

/* Botón Continuar: SIEMPRE azul con letras blancas (fijo, no configurable).
   Como la palabra clave es configurable y puede tener varias palabras
   (p.e. "Mesa grande"), permitimos que el botón crezca a lo alto (wrap)
   con un ancho máximo para no salirse del lateral. */
.btn-continuamos {
  background: #2563EB; color: #FFFFFF;
  font-size: 1.15rem; font-weight: 700; letter-spacing: 0.5px;
  border-radius: 999px; padding: 0.9rem 2rem;
  min-height: 56px; display: inline-flex; align-items: center; gap: 0.7rem;
  box-shadow: var(--sombra);
  max-width: 100%;
  text-align: center;
  white-space: normal; word-break: break-word; overflow-wrap: anywhere;
  line-height: 1.2;
}
.btn-continuamos:active { transform: scale(0.97); }
.btn-continuamos svg { width: 22px; height: 22px; flex-shrink: 0; }
.btn-continuamos #textoContinuamos { flex: 1; }

.aviso-siguiente { font-size: 0.85rem; color: var(--texto-suave); min-height: 1.1em; }

.estado-micro { font-size: 0.8rem; color: var(--texto-suave); display: flex; align-items: center; gap: 0.4rem; }
.estado-micro::before {
  content: ""; width: 9px; height: 9px; border-radius: 50%;
  background: var(--peligro); animation: pulso 1.2s infinite;
}
@keyframes pulso { 50% { opacity: 0.25; } }

/* Apaisado: media a la izquierda (~70%), controles a la derecha */
@media (orientation: landscape) and (min-width: 640px) {
  .ejecucion-principal {
    display: grid;
    grid-template-columns: 1fr minmax(230px, 300px);
  }
  .ejecucion-media { grid-row: 1; }
  .ejecucion-lateral {
    grid-row: 1; justify-content: center;
    padding: 1rem; border-left: 1px solid var(--borde);
    background: var(--superficie);
  }
  .btn-continuamos { width: 100%; justify-content: center; }
}

/* ---------- Modales ---------- */
.modal-fondo {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(0, 0, 0, 0.55);
  display: flex; align-items: flex-end; justify-content: center;
}
.modal {
  background: var(--superficie); width: 100%;
  max-width: 560px; max-height: 92dvh;
  border-radius: 20px 20px 0 0;
  display: flex; flex-direction: column;
  animation: subir 0.25s ease-out;
}
.modal-pequeno { max-width: 400px; }
@keyframes subir { from { transform: translateY(40px); opacity: 0.4; } }

@media (min-width: 700px) and (orientation: landscape) {
  .modal-fondo { align-items: center; }
  .modal { border-radius: 20px; }
}

.modal-cabecera {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 1.2rem; border-bottom: 1px solid var(--borde); flex-shrink: 0;
}
/* min-height: 0 para que el scroll interno funcione dentro del modal */
.modal-cuerpo { padding: 1.2rem; overflow-y: auto; overscroll-behavior-y: none; min-height: 0; }
.modal-pie {
  padding: 0.9rem 1.2rem calc(0.9rem + env(safe-area-inset-bottom));
  border-top: 1px solid var(--borde); flex-shrink: 0;
  display: flex; flex-direction: column; gap: 0.5rem; align-items: stretch;
}
.modal-pie.dos-botones { flex-direction: row; justify-content: flex-end; }
.modal-pie.dos-botones button { flex: 0 1 auto; min-width: 110px; }
.texto-confirmacion { padding: 1.4rem 1.2rem 0.4rem; font-size: 1.05rem; }

/* Config: filas */
.config-fila {
  display: flex; flex-direction: column; gap: 0.45rem;
  padding: 0.7rem 0; border-bottom: 1px solid var(--borde);
}
.config-fila:last-of-type { border-bottom: none; }
.config-fila > label { font-weight: 600; font-size: 0.95rem; }
.config-fila select,
.config-fila input[type="text"] {
  padding: 0.5rem 0.7rem; border-radius: 10px;
  border: 1.5px solid var(--borde); background: var(--superficie);
  color: var(--texto);
}
/* Placeholder atenuado en cualquier tema (gris suave, no semi-transparente) */
.config-fila input[type="text"]::placeholder {
  color: var(--texto-suave);
  opacity: 0.7;
}
/* AutoFill en tema oscuro: forzar fondo oscuro para que no se vea blanco */
.config-fila input[type="text"]:-webkit-autofill {
  -webkit-text-fill-color: var(--texto);
  -webkit-box-shadow: 0 0 0 1000px var(--superficie) inset;
}
.fila-volumen { display: flex; align-items: center; gap: 0.8rem; }

.grupo-segmentado { display: flex; border: 1.5px solid var(--borde); border-radius: 12px; overflow: hidden; }
.grupo-segmentado button { flex: 1; padding: 0.55rem 0.4rem; font-weight: 600; min-height: 44px; }
.grupo-segmentado button.seleccionado { background: var(--primario); color: #fff; }

.config-botones-datos { display: flex; gap: 0.7rem; flex-wrap: wrap; padding-top: 1rem; }
.config-botones-datos .btn-secundario { flex: 1; min-width: 180px; }

/* Nota discreta sobre persistencia local */
.nota-persistencia { font-size: 0.78rem; color: var(--texto-suave); padding-top: 0.9rem; line-height: 1.5; }

/* ---------- Modal de copia de seguridad ---------- */
.backup-cuerpo { display: flex; flex-direction: column; gap: 0.9rem; min-width: 0; }
.backup-aviso {
  background: var(--aviso-fondo);
  color: var(--texto);
  padding: 0.8rem 1rem;
  border-radius: 10px;
  font-size: 0.92rem;
  line-height: 1.45;
  border-left: 4px solid var(--primario);
}
.backup-check {
  display: flex; align-items: center; gap: 0.6rem;
  font-weight: 600; font-size: 0.95rem;
  cursor: pointer; user-select: none;
}
.backup-checks { display: flex; flex-direction: column; gap: 0.55rem; }
.backup-check input { width: 20px; height: 20px; accent-color: var(--primario); cursor: pointer; }
.backup-progreso-wrap { display: flex; flex-direction: column; gap: 0.5rem; }
.backup-progreso-barra {
  width: 100%; height: 10px;
  background: var(--superficie-2);
  border-radius: 6px; overflow: hidden;
  border: 1px solid var(--borde);
}
.backup-progreso-relleno {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--primario), var(--primario-fuerte));
  border-radius: 6px;
  transition: width 0.18s ease;
}
.backup-progreso-texto {
  font-size: 0.85rem; color: var(--texto-suave);
  text-align: center;
}

/* Pie de versión: separado del botón "Guardar y cerrar" y con
   enlace discreto (mismo estilo, solo subrayado) */
.pie-version { text-align: center; font-size: 0.8rem; color: var(--texto-suave); margin-top: 1.1rem; }
.pie-version a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* ---------- Historial y resumen ---------- */
.lista-historial { display: flex; flex-direction: column; gap: 1rem; }
.sesion-historial {
  background: var(--superficie-2); border-radius: var(--radio); padding: 0.9rem 1rem;
}
.sesion-fecha { font-size: 0.85rem; color: var(--texto-suave); margin-bottom: 0.2rem; }
.sesion-titulo { font-weight: 700; margin-bottom: 0.6rem; }
.sesion-bloques { display: flex; flex-direction: column; gap: 0.35rem; }
.sesion-bloque-fila { display: flex; align-items: center; gap: 0.55rem; font-size: 0.92rem; }
.chip-bloque {
  color: var(--chip-texto); font-weight: 700; font-size: 0.78rem;
  min-width: 26px; height: 22px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center; padding: 0 0.5rem;
  flex-shrink: 0;
}
.sesion-bloque-tiempo { margin-left: auto; font-family: ui-monospace, monospace; font-weight: 600; flex-shrink: 0; }
.sesion-total {
  margin-top: 0.6rem; font-weight: 700; display: flex; justify-content: space-between;
  border-top: 1px dashed var(--borde); padding-top: 0.5rem;
}
.sesion-acciones { display: flex; justify-content: flex-end; margin-top: 0.6rem; }
.sesion-acciones .btn-pequeno { display: inline-flex; align-items: center; gap: 0.4rem; }
.sesion-acciones svg { width: 16px; height: 16px; }
.resumen-duracion-total { font-weight: 700; margin: 0.4rem 0 0.8rem; }

/* ---------- Toast ----------
   Convención de contraste: tema CLARO = fondo negro / texto blanco;
   tema OSCURO = fondo blanco / texto negro. Se aplica a TODOS los
   toasts, sin excepción (las clases 'ok'/'error' ya no cambian color). */
.toast {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(5.4rem + env(safe-area-inset-bottom));
  z-index: 200; background: #000000; color: #FFFFFF;
  padding: 0.7rem 1.2rem; border-radius: 999px; font-weight: 600;
  box-shadow: var(--sombra); max-width: 90vw; text-align: center;
  animation: subir 0.2s ease-out;
}
[data-tema="oscuro"] .toast { background: #FFFFFF; color: #000000; }
@media (prefers-color-scheme: dark) {
  [data-tema="automatico"] .toast { background: #FFFFFF; color: #000000; }
}

/* ═══════════════════════════════════════════════════════════════
   PANEL ESTADÍSTICO (dashboard)
   ═══════════════════════════════════════════════════════════════ */

/* Modal del dashboard: más ancho y alto que los modales normales,
   para que las gráficas y la tabla respiren. En desktop ocupa casi
   toda la pantalla; en móvil se ajusta al viewport. */
.modal-dashboard {
  width: min(95vw, 1100px);
  max-height: 92vh;
  display: flex; flex-direction: column;
}
.dashboard-cuerpo {
  display: flex; flex-direction: column; gap: 1.1rem;
  padding: 1.2rem;
}

/* Filtros: dos selectores en fila (responsive) */
.dashboard-filtros {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.7rem;
}
@media (max-width: 600px) {
  .dashboard-filtros { grid-template-columns: 1fr; }
}
.dashboard-fila-filtro { display: flex; flex-direction: column; gap: 0.3rem; }
.dashboard-fila-filtro label { font-weight: 600; font-size: 0.85rem; color: var(--texto-suave); }
.dashboard-fila-filtro select {
  padding: 0.55rem 0.7rem; border-radius: 10px;
  border: 1.5px solid var(--borde); background: var(--superficie);
  color: var(--texto); font-size: 1rem;
}

/* KPIs: tarjetas con número grande + etiqueta */
.dashboard-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.7rem;
}
.dashboard-kpi {
  background: var(--superficie-2);
  border-radius: 12px;
  padding: 0.9rem 1rem;
  display: flex; flex-direction: column; gap: 0.2rem;
  border: 1px solid var(--borde);
}
.dashboard-kpi-valor {
  font-size: 1.6rem; font-weight: 700;
  color: var(--primario-fuerte);
  font-family: ui-monospace, monospace;
  line-height: 1.1;
}
.dashboard-kpi-etiqueta {
  font-size: 0.78rem; color: var(--texto-suave);
  text-transform: uppercase; letter-spacing: 0.04em;
}
.dashboard-kpi-tendencia {
  display: inline-flex; align-items: center; gap: 0.3rem;
  font-size: 0.85rem; font-weight: 600; margin-top: 0.2rem;
}
.dashboard-kpi-tendencia.mejorando { color: var(--exito); }
.dashboard-kpi-tendencia.empeorando { color: var(--peligro); }
.dashboard-kpi-tendencia.estable { color: var(--texto-suave); }
.dashboard-kpi-tendencia.insuficiente { color: var(--texto-suave); opacity: 0.6; }

/* Gráficas: una columna en móvil, dos en desktop */
.dashboard-graficas {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.9rem;
}
@media (min-width: 800px) {
  .dashboard-graficas { grid-template-columns: 1fr 1fr; }
  .dashboard-grafica-full { grid-column: 1 / -1; }
}
.dashboard-grafica {
  background: var(--superficie-2);
  border-radius: 12px;
  padding: 0.9rem;
  border: 1px solid var(--borde);
}
.dashboard-grafica h4 {
  font-size: 0.95rem; font-weight: 600;
  margin-bottom: 0.5rem; color: var(--texto);
}
.dashboard-grafica canvas {
  width: 100% !important;
  max-height: 240px;
}

/* Tabla con ordenación */
.dashboard-tabla-wrap {
  background: var(--superficie-2);
  border-radius: 12px;
  border: 1px solid var(--borde);
  overflow: hidden;
}
.dashboard-tabla-titulo {
  font-size: 0.95rem; font-weight: 600;
  padding: 0.7rem 0.9rem;
  border-bottom: 1px solid var(--borde);
  color: var(--texto);
}
.dashboard-tabla {
  width: 100%; border-collapse: collapse;
  font-size: 0.88rem;
}
.dashboard-tabla th, .dashboard-tabla td {
  padding: 0.5rem 0.7rem;
  text-align: left;
  border-bottom: 1px solid var(--borde);
}
.dashboard-tabla th {
  background: var(--superficie);
  font-weight: 600;
  cursor: pointer; user-select: none;
  white-space: nowrap;
  position: relative;
  padding-right: 1.6rem;
}
.dashboard-tabla th:hover { background: var(--superficie-2); }
.dashboard-tabla th::after {
  content: "↕"; position: absolute; right: 0.5rem;
  opacity: 0.35; font-size: 0.75rem;
}
.dashboard-tabla th.orden-asc::after { content: "↑"; opacity: 1; color: var(--primario-fuerte); }
.dashboard-tabla th.orden-desc::after { content: "↓"; opacity: 1; color: var(--primario-fuerte); }
.dashboard-tabla tbody tr:hover { background: var(--superficie); }
.dashboard-tabla td.num { font-family: ui-monospace, monospace; text-align: right; }
.dashboard-tabla tr:last-child td { border-bottom: none; }

.dashboard-vacio {
  padding: 2rem 1rem; text-align: center;
  color: var(--texto-suave); font-size: 0.95rem;
}

/* Footer del modal del dashboard: dos botones a la derecha */
.modal-dashboard .modal-pie {
  flex-direction: row;
  justify-content: flex-end;
  gap: 0.6rem;
}