/* ========================================================================== style.css — UAA Vocacional: estilos unificados -------------------------------------------------------------------------- Estructura: 01) Variables y resets 02) Utilidades 03) Layouts por página (formulario / test) 04) Componentes comunes (botones) 05) Formulario centrado (.container) 06) Sección introductoria del test 07) Tabla del test (sticky header, zebra, radios, colores por columna) 08) Responsivo 09) Impresión ========================================================================== */ /* ========================================================================== 01) Variables y resets ========================================================================== */ :root{ --color-bg-site: #f9fbfd; --color-card: #ffffff; --color-text: #2c3e50; --color-border: #ccc; --color-shadow: rgba(0,0,0,.1); --color-green: #4caf50; --color-green-hover: #45a049; --color-red: #ff0000; --color-red-hover: #e50000; --color-th-red: #ff0000; /* Mantener rojo original (#4) */ } *, *::before, *::after{ box-sizing: border-box; /* Box model predecible */ } html, body{ margin: 0; padding: 0; min-height: 100%; line-height: 1.5; font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; color: var(--color-text); background-color: var(--color-bg-site); } /* Fondo global para ambas páginas */ body{ background-image: url("img/fondo.jpg"); background-size: cover; background-repeat: no-repeat; background-position: center center; background-attachment: fixed; /* se desactiva en móviles abajo */ } /* ========================================================================== 02) Utilidades ========================================================================== */ /* Solo para lectores de pantalla */ .sr-only{ position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* Espaciados */ .mt0{ margin-top: 0; } .mt10{ margin-top: 10px; } .mt15{ margin-top: 15px; } .mt20{ margin-top: 20px; } .mb10{ margin-bottom: 10px; } .mb15{ margin-bottom: 15px; } .mb20{ margin-bottom: 20px; } .pt0{ padding-top: 0; } /* Text */ .text-center{ text-align: center; } /* ========================================================================== 03) Layouts por página -------------------------------------------------------------------------- Añadí una clase al para evitar conflictos entre páginas: - → vista de formulario centrado - → vista del test (ambas usan el fondo del body) ========================================================================== */ /* 3.1) Formulario centrado */ .page-form{ /* transparente para ver el fondo global del body */ background-color: transparent; display: flex; justify-content: center; align-items: center; min-height: 100vh; /* usa min-height para evitar problemas en móviles */ width: 100%; position: relative; } /* 3.2) Test (sin fondo propio; hereda del body) */ .page-test{ background-color: transparent; min-height: 100vh; padding: 20px; } /* ========================================================================== 04) Componentes comunes ========================================================================== */ /* Enlace con aspecto de botón (mejor semántica que