/** * @file temporizador.css * @description Estilos del temporizador descendente. * Organizado en secciones: variables de tema, layout general, * barra superior, display de tiempo, barra de progreso, * formulario de configuración, controles, modales. */ /* ───────────────────────────────────────── Reset mínimo ───────────────────────────────────────── */ /** * Elimina márgenes, rellenos y fuerza border-box en todos los elementos. */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* ───────────────────────────────────────── Variables de tema — claro (por defecto) ───────────────────────────────────────── */ /** * @var --bg Color de fondo de la página. * @var --surface Color de superficies elevadas (inputs, botones secundarios). * @var --border Color de bordes y separadores. * @var --accent Color principal de texto e iconos activos. * @var --muted Color de texto secundario y etiquetas. * @var --danger Color de alerta: últimos segundos del temporizador y botón Pausar. * @var --success Color de acción positiva: botón Iniciar / Continuar. * @var --radius Radio de esquinas para botones e inputs. */ :root { --bg: #f5f4f0; --surface: #eae9e4; --border: #d0cfc9; --accent: #1a1a1a; --muted: #888; --danger: #c0392b; --success: #27ae60; --radius: 16px; /* Colores corporativos */ --texto-contador: #0066A1; --color-barra: #0066A1; --fondo-barra: #E5EFF5; /* Azul 10%*/ } /** * Sobreescritura de variables para el tema oscuro. * Se activa añadiendo data-theme="dark" en . * El verde se oscurece ligeramente para no saturar sobre el fondo negro. */ [data-theme="dark"] { --bg: #0f0f0f; --surface: #1a1a1a; --border: #2a2a2a; --accent: #e8e8e8; --muted: #555; --success: #1e8449; --texto-contador: #E5EFF5; --color-barra: #E5EFF5; --fondo-barra: #05476D; /* Azul 80% */ } /* ───────────────────────────────────────── Layout general — body ───────────────────────────────────────── */ /** * Centra vertical y horizontalmente todos los elementos de la página. * Usa min-height: 100dvh para cubrir toda la ventana incluso en móvil. */ body { background: var(--bg); color: var(--accent); font-family: 'Segoe UI', system-ui, sans-serif; min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2rem; padding: 2rem; transition: background 0.35s, color 0.35s; user-select: none; } /* ───────────────────────────────────────── Barra superior de iconos (#topbar) ───────────────────────────────────────── */ /** * Contenedor fijo en la esquina superior derecha con los botones de * cambio de tema, visibilidad de segundos, ayuda y pantalla completa. */ #topbar { position: fixed; top: 1rem; right: 1.25rem; display: flex; gap: 0.5rem; align-items: center; transition: opacity 0.5s; } /** * Estilo base para cada botón icónico de la barra superior. * Cuadrado de 2.4rem con bordes suaves y transición de color. */ .icon-btn { background: transparent; border: 1px solid var(--border); border-radius: 10px; color: var(--muted); cursor: pointer; font-size: 1rem; width: 2.4rem; height: 2.4rem; display: flex; align-items: center; justify-content: center; transition: background 0.15s, color 0.15s, transform 0.1s; } /** Estado hover: resalta el fondo y el color del icono. */ .icon-btn:hover { background: var(--surface); color: var(--accent); } /** Estado presionado: reduce ligeramente la escala para dar feedback táctil. */ .icon-btn:active { transform: scale(0.92); } /** * Estado activo del botón de segundos (#btn-secs). * Se aplica cuando los segundos están ocultos. */ #btn-secs.active { color: var(--accent); border-color: var(--accent); } /* ───────────────────────────────────────── Título (h1) ───────────────────────────────────────── */ /** * Texto "TEMPORIZADOR" en mayúsculas, pequeño y con letra espaciada. * Tamaño fluido entre 0.7rem y 0.9rem según el ancho de ventana. */ h1 { font-size: clamp(0.7rem, 1.8vw, 0.9rem); font-weight: 500; letter-spacing: 0.35em; text-transform: uppercase; color: var(--muted); } /* ───────────────────────────────────────── Display de tiempo (#display) ───────────────────────────────────────── */ /** * Contenedor principal del display. Dispone los tres grupos * (horas, minutos, segundos) en fila con separadores entre ellos. */ #display { display: flex; align-items: flex-start; gap: clamp(0.3rem, 1.5vw, 1rem); } /** * Cada grupo (hora / minuto / segundo): columna con dígitos arriba * y etiqueta de unidad debajo. */ .time-group { display: flex; flex-direction: column; align-items: center; gap: 0.3em; } /** * Dígitos grandes del display. Tamaño fluido entre 4rem y 13rem. * font-variant-numeric: tabular-nums garantiza ancho fijo por cifra * para evitar saltos visuales al cambiar el valor. */ .time-digits { font-size: clamp(4rem, 18vw, 13rem); font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1; color: var(--texto-contador); transition: color 0.35s; } /** * Etiqueta de unidad bajo cada grupo de dígitos (HORAS, MINUTOS, SEGUNDOS). * Tamaño fluido proporcional al display. */ .time-unit { font-size: clamp(0.55rem, 1.6vw, 1rem); font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); transition: color 0.35s; } /** * Separador ":" entre grupos de dígitos. Alineado en la parte inferior * del display mediante padding-bottom para alinearse visualmente * con los dígitos, no con las etiquetas. */ .disp-sep { font-size: clamp(3rem, 13vw, 10rem); font-weight: 300; color: var(--muted); line-height: 1; padding-bottom: 0.55em; transition: color 0.35s; } /** * Estado de alerta: colorea dígitos y separadores en rojo * cuando quedan 10 segundos o menos. */ #display.danger .time-digits { color: var(--danger); } #display.danger .disp-sep { color: var(--danger); } /** * Oculta el separador y el grupo de segundos cuando el usuario * activa la opción "ocultar segundos" (clase .hide-secs en #display). */ #display.hide-secs #sep-s, #display.hide-secs #group-s { display: none; } /* ───────────────────────────────────────── Barra de progreso (#progress-wrap / #progress-bar) ───────────────────────────────────────── */ /** * Pista de la barra de progreso: línea fina de 3px de alto. * Ancho máximo de 480px, responsive con 90vw. */ #progress-wrap { width: min(480px, 90vw); height: 2vh; background: var(--fondo-barra); border-radius: 2px; overflow: hidden; } /** * Relleno animado de la barra. Su anchura se actualiza en JS * en proporción al tiempo restante. La transición linear de 0.9s * sincroniza con el intervalo de 1 segundo del temporizador. */ #progress-bar { height: 100%; background: var(--color-barra); border-radius: 1vh; transition: width 0.9s linear, background 0.35s; width: 100%; } /** Estado de alerta: cambia el color del relleno a rojo. */ #progress-bar.danger { background: var(--danger); } /* ───────────────────────────────────────── Formulario de configuración (#config) ───────────────────────────────────────── */ /** * Fila de inputs para establecer horas, minutos y segundos iniciales. * Centrada y con wrap para pantallas estrechas. */ #config { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; justify-content: center; transition: opacity 0.5s; } /** * Columna de cada campo: etiqueta encima del input. */ .time-input { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; } /** Etiqueta de cada campo de configuración (H, MIN, SEG). */ .time-input label { font-size: 0.65rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); } /** * Input numérico de configuración. Oculta los controles nativos * del navegador mediante apariencia uniforme y centrado de texto. */ .time-input input { width: 4.5rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); color: var(--accent); font-size: 1.5rem; font-weight: 600; text-align: center; padding: 0.5rem 0.25rem; outline: none; transition: border-color 0.2s, background 0.35s; font-variant-numeric: tabular-nums; } /** Resalta el borde al enfocar el input. */ .time-input input:focus { border-color: var(--muted); } /** Atenúa los inputs mientras el temporizador está en marcha. */ .time-input input:disabled { opacity: 0.35; } /** * Separador ":" entre los campos del formulario de configuración. * Diferente del separador del display (.disp-sep). */ .time-sep { font-size: 1.8rem; font-weight: 700; color: var(--muted); margin-top: 1.2rem; } /* ───────────────────────────────────────── Controles (#controls y botones) ───────────────────────────────────────── */ /** * Fila de botones de acción: Iniciar, Pausar, Reiniciar. */ #controls { display: flex; gap: 0.75rem; flex-wrap: wrap; justify-content: center; transition: opacity 0.5s; } /** * Estilo base para todos los botones de acción. * Tipografía en mayúsculas con feedback visual al pulsar. */ button { border: none; border-radius: var(--radius); cursor: pointer; font-size: 0.85rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.8rem 2rem; transition: opacity 0.15s, transform 0.1s, background 0.2s; } /** Feedback visual al pulsar cualquier botón. */ button:active { transform: scale(0.96); } /** Botón deshabilitado: semitransparente y cursor bloqueado. */ button:disabled { opacity: 0.25; cursor: default; } /** * Botón principal "Iniciar / Continuar". * Fondo verde semántico (--success) con texto blanco para máximo contraste. * El verde cambia a una tonalidad más profunda en modo oscuro. */ #btn-start { background: var(--success); color: #fff; } /** * Botón "Pausar": visible solo mientras el temporizador corre. * Fondo rojo (--danger) con texto blanco; misma variable que la alerta * del display para coherencia visual. Oculto por defecto (display: none). */ #btn-pause { background: var(--success); color: #fff; display: none; } /** Botón "Reiniciar": transparente con borde. */ #btn-reset { background: transparent; color: var(--danger); border: 1px solid var(--border); display: none; } /* ───────────────────────────────────────── Modal de fin de tiempo (#done-msg) ───────────────────────────────────────── */ /** * Overlay oscuro que cubre toda la pantalla al terminar el tiempo. * Invisible y sin eventos por defecto; se activa con la clase .visible. */ #done-msg { position: fixed; inset: 0; background: rgba(0,0,0,0.75); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.5rem; opacity: 0; pointer-events: none; transition: opacity 0.5s; } /** Hace visible el overlay y activa los eventos de ratón/toque. */ #done-msg.visible { opacity: 1; pointer-events: all; } /** Mensaje "TIEMPO COMPLETADO" en blanco sobre el overlay. */ #done-msg p { font-size: clamp(1.5rem, 6vw, 3rem); font-weight: 300; letter-spacing: 0.2em; text-transform: uppercase; color: #fff; } /** Botón "Cerrar" del overlay de fin: blanco sobre negro. */ #done-msg button { background: #fff; color: #000; font-weight: 700; } /* ───────────────────────────────────────── Modal de atajos de teclado (#help-overlay) ───────────────────────────────────────── */ /** * Overlay del modal de ayuda. Mismo patrón de visibilidad que #done-msg. * z-index 100 para situarse por encima de cualquier otro elemento. */ #help-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.6); display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.25s; z-index: 100; } /** Hace visible el modal de ayuda. */ #help-overlay.visible { opacity: 1; pointer-events: all; } /** * Tarjeta interior del modal con la lista de atajos. * Ancho máximo 380px, responsive. */ #help-box { background: var(--bg); border: 1px solid var(--border); border-radius: 20px; padding: 2rem 2.5rem; width: min(380px, 90vw); display: flex; flex-direction: column; gap: 1.25rem; } /** Título del modal de atajos. */ #help-box h2 { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.3em; text-transform: uppercase; color: var(--muted); } /** * Fila de cada atajo: acción a la izquierda, tecla(s) a la derecha. */ .shortcut-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; } /** Texto descriptivo de cada acción en la lista de atajos. */ .shortcut-row span { font-size: 0.9rem; color: var(--accent); } /** * Representación visual de una tecla de teclado. * Imita el aspecto físico de una tecla con borde inferior más grueso. */ kbd { background: var(--surface); border: 1px solid var(--border); border-bottom-width: 2px; border-radius: 6px; font-family: inherit; font-size: 0.78rem; font-weight: 600; padding: 0.2rem 0.55rem; color: var(--accent); white-space: nowrap; } /** Botón "Cerrar" del modal de ayuda, alineado a la derecha. */ #help-close { align-self: flex-end; background: var(--accent); color: var(--bg); font-size: 0.78rem; padding: 0.55rem 1.5rem; border-radius: 10px; margin-top: 0.25rem; } /* ───────────────────────────────────────── Inactividad — UI oculta ───────────────────────────────────────── */ #topbar.ui-idle, #config.ui-idle, #controls.ui-idle { opacity: 0; pointer-events: none; }