/* ============================================================================= Feeling Innovation - Tema base ---------------------------------------------------------------------------- Fase 1: tokens (variables) + tipografía base + componentes base. Las variables viven en :root (globales, sin efecto secundario). Las reglas que aplican estilos viven SCOPEADAS bajo .fi-theme, así ninguna página que no tenga `class="fi-theme"` en el body se ve afectada. Convención de naming: --fi-* → tokens del sistema (color, espacio, radio, sombra, etc.) .fi-* → componentes y utilidades del tema .fi-theme → contenedor que activa el tema (se aplica al ) Cargar SIEMPRE después de los CSS legacy del proyecto para que las sobreescrituras funcionen sin recurrir a !important salvo lo estrictamente necesario. ============================================================================= */ /* ----------------------------------------------------------------------------- 1. Tokens del sistema -------------------------------------------------------------------------- */ :root { /* Paleta — Home y Registro usan solo el subset naranja + negro + grises. Los azul/morado/rosa/amarillo de la guía están reservados para fases posteriores donde tematicemos pantallas internas. */ --fi-naranja: #EB5916; --fi-naranja-hover: #C84B0E; --fi-naranja-suave: rgba(235, 89, 22, 0.08); /* hover de outline */ --fi-naranja-focus: rgba(235, 89, 22, 0.25); /* anillo de focus */ --fi-negro: #1A1A1A; /* texto principal, topbar/footer oscuros si llegan */ --fi-antracita: #404040; /* texto secundario, según guía */ --fi-gris-700: #555555; --fi-gris-500: #888888; --fi-gris-300: #C9C9C9; --fi-gris-200: #E5E5E5; /* bordes sutiles */ --fi-gris-100: #F5F5F5; /* fondo de inputs */ --fi-gris-50: #FAFAFA; /* fondo de sección */ --fi-blanco: #FFFFFF; --fi-error: #D14343; --fi-exito: #2E8B57; /* Tipografía */ --fi-font-body: 'Avenir', 'Helvetica Neue', Helvetica, Arial, sans-serif; --fi-fw-regular: 400; --fi-fw-medium: 500; --fi-fw-bold: 700; --fi-line-height: 1.55; /* Escala de tamaños — pensada para Home/Registro, no para hero pages */ --fi-fs-xs: 0.75rem; /* 12px - helper text */ --fi-fs-sm: 0.875rem; /* 14px - small */ --fi-fs-base: 1rem; /* 16px - body */ --fi-fs-md: 1.125rem; /* 18px - h4 / lead */ --fi-fs-lg: 1.375rem; /* 22px - h3 */ --fi-fs-xl: 1.75rem; /* 28px - h2 */ --fi-fs-2xl: 2.5rem; /* 40px - h1 */ /* Espaciado — múltiplos de 4 */ --fi-space-1: 0.25rem; /* 4 */ --fi-space-2: 0.5rem; /* 8 */ --fi-space-3: 0.75rem; /* 12 */ --fi-space-4: 1rem; /* 16 */ --fi-space-5: 1.5rem; /* 24 */ --fi-space-6: 2rem; /* 32 */ --fi-space-7: 3rem; /* 48 */ /* Radios — formas redondeadas según guía */ --fi-radius-sm: 0.5rem; /* 8 - chips, badges */ --fi-radius-md: 0.75rem; /* 12 - inputs */ --fi-radius-lg: 1rem; /* 16 - cards */ --fi-radius-pill: 999px; /* botones tipo pill */ /* Sombras — sutiles pero visibles, para que la card "flote" sobre el fondo */ --fi-shadow-card: 0 1px 3px rgba(0, 0, 0, 0.06), 0 4px 12px rgba(0, 0, 0, 0.04); --fi-shadow-card-hover: 0 4px 12px rgba(0, 0, 0, 0.08), 0 8px 24px rgba(0, 0, 0, 0.06); /* Transiciones */ --fi-transition: 150ms ease-in-out; } /* ----------------------------------------------------------------------------- 2. Tipografía y reset suave (solo bajo .fi-theme) -------------------------------------------------------------------------- */ .fi-theme { font-family: var(--fi-font-body); font-weight: var(--fi-fw-regular); font-size: var(--fi-fs-base); line-height: var(--fi-line-height); color: var(--fi-negro); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Fondo de página: blanco roto (#FAFAFA) para que la card blanca pura destaque suavemente. Especificidad body.fi-theme + !important para vencer a las clases legacy de WordPress (`page`, `page-template`, etc.) que pueden imponer un background propio. */ body.fi-theme { background-color: var(--fi-gris-50) !important; } .fi-theme h1, .fi-theme h2, .fi-theme h3, .fi-theme h4, .fi-theme h5, .fi-theme h6 { font-family: var(--fi-font-body); font-weight: var(--fi-fw-bold); color: var(--fi-negro); line-height: 1.2; margin-top: 0; margin-bottom: var(--fi-space-4); } .fi-theme h1 { font-size: var(--fi-fs-2xl); } .fi-theme h2 { font-size: var(--fi-fs-xl); } .fi-theme h3 { font-size: var(--fi-fs-lg); } .fi-theme h4 { font-size: var(--fi-fs-md); font-weight: var(--fi-fw-medium); } /* h3 dentro de la card del form actúa como separador entre bloques temáticos (ej. "Datos personales", "Datos de acceso", "Protección de datos"). Lleva margen superior generoso; salvo si es el primero del bloque. */ .fi-theme .fi-card h3 { margin-top: var(--fi-space-6); margin-bottom: var(--fi-space-3); } .fi-theme .fi-card .form-wrap > h3:first-child { margin-top: 0; } .fi-theme p { margin: 0 0 var(--fi-space-4); } .fi-theme a { color: var(--fi-antracita); text-decoration: none; transition: color var(--fi-transition); } .fi-theme a:hover, .fi-theme a:focus { color: var(--fi-naranja-hover); text-decoration: underline; } /* ----------------------------------------------------------------------------- 3. Componentes base — botones (pill, según diagnostico-test) -------------------------------------------------------------------------- */ /* Estructura común */ .fi-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--fi-space-2); font-family: var(--fi-font-body); font-weight: var(--fi-fw-medium); font-size: var(--fi-fs-base); line-height: 1; padding: var(--fi-space-3) var(--fi-space-6); border-radius: var(--fi-radius-pill); border: 1px solid transparent; cursor: pointer; text-decoration: none; user-select: none; transition: background-color var(--fi-transition), border-color var(--fi-transition), color var(--fi-transition), box-shadow var(--fi-transition); } .fi-btn:focus-visible { outline: 3px solid var(--fi-naranja-focus); outline-offset: 2px; } .fi-btn:disabled, .fi-btn[disabled] { opacity: 0.5; cursor: not-allowed; } /* Primario — naranja relleno */ .fi-btn-primary { background-color: var(--fi-naranja); border-color: var(--fi-naranja); color: var(--fi-blanco); } .fi-btn-primary:hover:not([disabled]), .fi-btn-primary:focus:not([disabled]) { background-color: var(--fi-naranja-hover); border-color: var(--fi-naranja-hover); color: var(--fi-blanco); text-decoration: none; } /* Secundario — outline naranja */ .fi-btn-secondary { background-color: transparent; border-color: var(--fi-naranja); color: var(--fi-naranja); } .fi-btn-secondary:hover:not([disabled]), .fi-btn-secondary:focus:not([disabled]) { background-color: var(--fi-naranja-suave); color: var(--fi-naranja-hover); border-color: var(--fi-naranja-hover); text-decoration: none; } /* Variante full-width (típica en forms de la app de diagnóstico) */ .fi-btn-block { display: flex; width: 100%; } /* ----------------------------------------------------------------------------- 4. Componentes base — campos de formulario Estilo "soft" según referencia: fondo gris pálido, borde transparente, focus con anillo naranja. NOTA SOBRE !important: el CSS legacy del proyecto (webprivada.css / all.css / stanpa.css) pinta los inputs como una línea subrayada con !important. Para ganar la cascada sin tener que reescribir esos archivos, las propiedades visualmente críticas de .fi-input usan también !important. La regla base se prefija con .fi-theme para aumentar especificidad (0,2,0 vs el 0,0,1 del selector de elemento legacy). -------------------------------------------------------------------------- */ .fi-field { display: block; margin-bottom: var(--fi-space-4); } .fi-label { display: block; font-size: var(--fi-fs-sm); font-weight: var(--fi-fw-medium); color: var(--fi-antracita); margin-bottom: var(--fi-space-2); } .fi-theme .fi-input, .fi-theme .fi-select, .fi-theme .fi-textarea { display: block !important; width: 100% !important; box-sizing: border-box !important; font-family: var(--fi-font-body) !important; font-size: var(--fi-fs-base) !important; line-height: 1.4 !important; color: var(--fi-negro) !important; padding: var(--fi-space-3) var(--fi-space-4) !important; background-color: var(--fi-gris-100) !important; border: 1px solid transparent !important; border-radius: var(--fi-radius-md) !important; /* Margen propio para que filas seguidas tengan respiro sin necesidad de envolver cada input en un .fi-field. Si SÍ se envuelve, la regla más específica de .fi-field .fi-input lo neutraliza. */ margin-bottom: var(--fi-space-4); transition: background-color var(--fi-transition), border-color var(--fi-transition), box-shadow var(--fi-transition); } .fi-theme .fi-field .fi-input, .fi-theme .fi-field .fi-select, .fi-theme .fi-field .fi-textarea { margin-bottom: 0; /* el .fi-field aporta el margen cuando envuelve */ } .fi-theme .fi-input::placeholder, .fi-theme .fi-textarea::placeholder { color: var(--fi-gris-500) !important; opacity: 1; /* Firefox baja la opacidad por defecto */ } .fi-theme .fi-input:focus, .fi-theme .fi-select:focus, .fi-theme .fi-textarea:focus { outline: none !important; background-color: var(--fi-blanco) !important; border-color: var(--fi-naranja) !important; box-shadow: 0 0 0 3px var(--fi-naranja-focus) !important; } .fi-theme .fi-input:disabled, .fi-theme .fi-select:disabled, .fi-theme .fi-textarea:disabled { background-color: var(--fi-gris-200) !important; color: var(--fi-gris-500) !important; cursor: not-allowed; } .fi-help-text { display: block; font-size: var(--fi-fs-xs); color: var(--fi-gris-500); margin-top: var(--fi-space-1); } /* Mensaje de error — los validators de ASP.NET usan CssClass="error fi-error-text" */ .fi-theme .fi-error-text { display: block; font-size: var(--fi-fs-sm); color: var(--fi-error) !important; margin-top: var(--fi-space-1); } /* ----------------------------------------------------------------------------- 5. Componentes base — card Bajo .fi-theme + !important porque el legacy (dev-page-login-block__form, fondoblanco, etc.) impone su propio fondo/sombra/padding. `display: flow-root` resuelve el float-collapse: el HTML legacy de Home usa `form-wrap two-column column-one` con float, y sin esto la card no se expande verticalmente para contener a sus hijos flotados. -------------------------------------------------------------------------- */ .fi-theme .fi-card { display: flow-root !important; background-color: var(--fi-blanco) !important; border-radius: var(--fi-radius-lg) !important; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04) !important; padding: var(--fi-space-6) !important; border: 1px solid var(--fi-gris-200) !important; } .fi-card-title { font-size: var(--fi-fs-xl); font-weight: var(--fi-fw-bold); margin: 0 0 var(--fi-space-2); } .fi-card-subtitle { font-size: var(--fi-fs-base); color: var(--fi-antracita); margin: 0 0 var(--fi-space-5); } /* Caja informativa secundaria — más densa que .fi-card, sin sombra ni borde. Pensada para avisos legales, mensajes de ayuda largos, etc. */ .fi-note { background-color: var(--fi-gris-100); border-radius: var(--fi-radius-md); padding: var(--fi-space-4); font-size: var(--fi-fs-xs); color: var(--fi-gris-700); line-height: 1.5; text-align: justify; } .fi-note strong { color: var(--fi-antracita); } /* ----------------------------------------------------------------------------- 5b. Checkbox y radio — tinte naranja, espaciado consistente con .fi-field -------------------------------------------------------------------------- */ /* Soporta tanto `` (el HTML que genera ) como una estructura propia. */ .fi-theme .fi-checkbox, .fi-theme .fi-radio { display: inline-flex; align-items: center; gap: var(--fi-space-2); font-size: var(--fi-fs-sm); color: var(--fi-antracita); } .fi-theme .fi-checkbox input[type="checkbox"], .fi-theme .fi-radio input[type="radio"] { width: 18px !important; height: 18px !important; accent-color: var(--fi-naranja) !important; /* tinta el control con el color de marca */ margin: 0 !important; cursor: pointer; } .fi-theme .fi-checkbox label, .fi-theme .fi-radio label { margin: 0; cursor: pointer; } /* ----------------------------------------------------------------------------- 6. Utilidades mínimas -------------------------------------------------------------------------- */ .fi-section { background-color: var(--fi-gris-50); padding: var(--fi-space-7) var(--fi-space-4); } .fi-container { max-width: 1200px; margin: 0 auto; padding: 0 var(--fi-space-4); } .fi-container-narrow { max-width: 640px; margin: 0 auto; } .fi-text-muted { color: var(--fi-gris-500); } .fi-text-secondary { color: var(--fi-antracita); } .fi-text-center { text-align: center; } .fi-mt-0 { margin-top: 0; } .fi-mt-2 { margin-top: var(--fi-space-2); } .fi-mt-4 { margin-top: var(--fi-space-4); } .fi-mt-5 { margin-top: var(--fi-space-5); } .fi-mb-0 { margin-bottom: 0; } .fi-mb-2 { margin-bottom: var(--fi-space-2); } .fi-mb-4 { margin-bottom: var(--fi-space-4); } .fi-mb-5 { margin-bottom: var(--fi-space-5); } /* ----------------------------------------------------------------------------- 7. Adaptaciones para componentes legacy del proyecto -------------------------------------------------------------------------- */ /* .w3-bar (de W3.CSS) lo usa el proyecto para agrupar botones. Le damos gap consistente sin romper su comportamiento. Aplicado solo bajo .fi-theme. */ .fi-theme .w3-bar { display: flex; flex-wrap: wrap; gap: var(--fi-space-3); align-items: center; } /* ----------------------------------------------------------------------------- 8. Select2 — tematizado al estilo Feeling El widget de select2 sustituye el