/* ============================================================================ * tema-v2 / componentes.css — Fase 7, PR-7.0 (primitivas globales) * ---------------------------------------------------------------------------- * Estrategia OVERRIDE-FIRST (diseño Fase 7, §3): se reusan los selectores * existentes (.btn-bosch, .form-control, …) desde este archivo, cargado de * ÚLTIMO en el → gana la cascada por orden de fuente (igual * especificidad). Se evita !important salvo donde el CSS base lo fuerce. * * ALCANCE 7.0: tipografía (ritmo), BOTONES, INPUTS, enlaces (transición). * NO toca navbar/footer/buscador (7.1), cards/home (7.2), etc. * Colores de marca con HEX EXACTOS (vía tokens). 0 cambios de lógica/JS/markup. * ========================================================================== */ /* --- Tipografía / ritmo de cuerpo ------------------------------------------ */ /* Más "aire" en el cuerpo. Familias (Open Sans / Montserrat) ya vienen del CSS * base; aquí sólo se ajusta color e interlineado. */ body { color: var(--texto); line-height: var(--lh-cuerpo); } /* Enlaces: sólo transición de color (NO se recolorea — nav/footer son 7.1). */ a { transition: color var(--transicion); } /* --- Botones (.btn-bosch*) ------------------------------------------------- */ /* Hoy todos llevan border-radius:0 (esquinas duras). El refresh los redondea y * añade micro-interacción (elevación + sombra) conservando los colores de marca. */ /* Se redondea la clase base .btn → TODOS los botones del storefront (todos la * llevan: .btn .btn-bosch, .btn .btnbuscarvehiculo, etc.). Los .btn-group siguen * planos por dentro gracias a las reglas de mayor especificidad de Bootstrap * (.btn-group>.btn:not(:first/last-child)), así que no se rompen los segmentados. */ .btn, .btn-bosch, .btn-bosch-primary, .btn-bosch-info, .btn-bosch-light, .btn-bosch-default { border-radius: var(--radio-btn); transition: background-color var(--transicion), box-shadow var(--transicion), transform var(--transicion), color var(--transicion), border-color var(--transicion); } /* Elevación sutil al pasar el cursor (sólo botones con fondo sólido). */ .btn-bosch:hover, .btn-bosch-primary:hover, .btn-bosch-info:hover { box-shadow: var(--sombra-card); transform: translateY(-1px); } .btn-bosch:active, .btn-bosch-primary:active, .btn-bosch-info:active { transform: translateY(0); box-shadow: var(--sombra-sm); } /* Azul de marca: hover un punto más profundo (mismo tono, sin recolorear). */ .btn-bosch:hover, .btn-bosch-primary:hover { background-color: var(--bosch-azul-hover); color: var(--blanco); } /* Botón "light" (contorno azul): se rellena suavemente al hover. */ .btn-bosch-light:hover { background-color: var(--gris-100); box-shadow: var(--sombra-sm); } /* Botón "default" (gris): leve oscurecido + elevación. */ .btn-bosch-default:hover { box-shadow: var(--sombra-sm); transform: translateY(-1px); } /* Foco accesible y visible (micro-interacción + a11y) en botones. */ .btn-bosch:focus-visible, .btn-bosch-primary:focus-visible, .btn-bosch-info:focus-visible, .btn-bosch-light:focus-visible, .btn-bosch-default:focus-visible { outline: none; box-shadow: var(--anillo-foco); } /* --- Inputs (.form-control) ------------------------------------------------ */ /* Bordes más suaves + esquinas redondeadas + focus ring azul de marca. */ .form-control { border-radius: var(--radio-input); border-color: var(--gris-200); transition: border-color var(--transicion), box-shadow var(--transicion); } .form-control:focus { border-color: var(--bosch-azul); box-shadow: var(--anillo-foco); } .form-control::placeholder { color: var(--gris-400); } /* --- Selects / dropdowns --------------------------------------------------- */ /* Consistencia (feedback de Víctor): TODOS los dropdowns redondeados, no sólo * algunos. Incluye los