/* theme.css definicion variables css etc para colores corporativos etc, me lo ha pasado chatgpt adaptado a nuestro logo etc */ /* customizar primary color de bootstrap 5.1 (si no estamos compilando SCSS) */ /*D MOMENTO LO HAGO AQUI, PERO CREO QUE HABRIA OTRO SITIO MEJOR DONDE DEFINIR O REDEFINIR VARIABLES CSS...*/ /* a ver, habria 2 formas de customizar este tipo de cosas: o a pelo modificando los estilos css q es lo q hacemos aqui, o modificar los SCSS de bootstrap y recompilar SASS... el tema es q a partir de la v5 de bootstrap, hay muchas coass que vienen precocinadas desde el SCSS, y por eso pej. no basta con cambiar las variables css d colores (--bs-primary, etc), pq muchos componentes (botones checkboxes...) ya traen el color precocinado y no obedecen esa variable... */ /* nota - aunque mi color primario corporativo es #e3ef51, ese queda demasiado claro para usarlo aqui (en botones todavia, pero en otras cosas pej. links, checkboxes etc, queda demasiado claro) asi q voy a probar con ese color pero algo mas oscuro, #c1d00b... */ :root { /* ========================= Brand / corporate palette ========================= */ --brand-dark: #2F3A40; --brand-dark-elevated: #3A464D; --brand-dark-soft: #4B5961; --brand-lime: #D7EA4A; --brand-lime-hover: #C6DA34; --brand-lime-active: #A7BA22; --brand-lime-dark: #8FA11C; --brand-lime-soft: #F2F7C8; --brand-coral: #FF7A50; --brand-coral-hover: #F0673E; --brand-coral-soft: #FFE0D4; /* ========================= App semantic colors ========================= */ --app-bg: #F8F9FA; --app-surface: #FFFFFF; --app-surface-alt: #F4F6F8; --app-text: #212529; --app-text-muted: #6C757D; --app-border: #DDE3E7; /* ========================= Bootstrap bridge ========================= */ --bs-primary: var(--brand-lime); --bs-primary-rgb: 215, 234, 74; --bs-link-color: var(--brand-lime-dark); --bs-link-hover-color: var(--brand-lime); --bs-body-bg: var(--app-bg); --bs-body-color: var(--app-text); --bs-border-color: var(--app-border); } /* ========================= Global base ========================= */ body { background-color: var(--app-bg); color: var(--app-text); /*font-family: "Nunito", sans-serif;*/ font-family: "Baloo Bhaina 2", "Nunito", sans-serif; /* Baloo Bhaina 2 es la fuente del logo, de momento la aplicamos a toda la app (hay q tener un en el para cargarla desde google fonts) */ } a { color: var(--brand-lime-dark); } a:hover { color: var(--brand-lime); } /* ========================= Header / footer helpers ========================= */ .app-header { background-color: var(--brand-dark); color: #fff; } .app-header a, .app-header .nav-link, .app-header .navbar-brand { color: #fff; } .app-header a:hover, .app-header .nav-link:hover, .app-header .navbar-brand:hover { color: var(--brand-lime); } .app-footer { background-color: var(--brand-dark); color: #fff; } .app-footer a { color: var(--brand-lime); } .app-footer a:hover { color: #fff; } /* Variante footer suave, por si luego quieres probarla .app-footer { background-color: var(--brand-lime-soft); color: var(--brand-dark); } */ /* Headings con personalidad (usando la fuente del logo) */ /* ojo, estos en ppio no los estamos usando pq estamos usando la fuente del logo para toda la app... */ h1, h2, h3, .heading-brand { font-family: "Baloo Bhaina 2", "Nunito", sans-serif; letter-spacing: 0.5px; } /* ========================= Bootstrap component overrides ========================= */ /* Buttons */ .btn-primary { background-color: var(--brand-lime) !important; border-color: var(--brand-lime) !important; color: #1f2328 !important; } .btn-primary:hover, .btn-primary:focus { background-color: var(--brand-lime-hover) !important; border-color: var(--brand-lime-hover) !important; color: #1f2328 !important; } .btn-primary:active, .btn-primary.active, .btn-primary.dropdown-toggle.show { background-color: var(--brand-lime-active) !important; border-color: var(--brand-lime-active) !important; color: #1f2328 !important; } .btn-outline-primary { color: var(--brand-lime-dark) !important; border-color: var(--brand-lime-dark) !important; } .btn-outline-primary:hover, .btn-outline-primary:focus { background-color: var(--brand-lime-dark) !important; border-color: var(--brand-lime-dark) !important; color: #fff !important; } /* Botones: quitar el azul por defecto */ .btn:focus, .btn:active, .btn:focus-visible { outline: none; box-shadow: none; } /* Opcional: aņadir focus personalizado (recomendado) */ .btn:focus-visible { box-shadow: 0 0 0 2px var(--brand-lime-soft); } .btn.disabled, .btn:disabled, fieldset:disabled .btn { opacity: .35; } /* Links / text helpers */ .text-primary { color: var(--brand-lime-dark) !important; } .bg-primary { background-color: var(--brand-lime) !important; color: #1f2328 !important; } /* Forms */ .form-check-input:checked { background-color: var(--brand-lime-dark) !important; border-color: var(--brand-lime-dark) !important; } .form-check-input:focus { border-color: var(--brand-lime-dark) !important; box-shadow: 0 0 0 0.25rem rgba(143, 161, 28, 0.25) !important; } .form-control:focus, .form-select:focus { border-color: var(--brand-lime-dark) !important; box-shadow: 0 0 0 0.25rem rgba(143, 161, 28, 0.18) !important; } /* Pagination */ .page-link { color: var(--brand-lime-dark) !important; } .page-link:hover { color: var(--brand-lime) !important; } .page-item.active .page-link { background-color: var(--brand-lime) !important; border-color: var(--brand-lime) !important; color: #1f2328 !important; } /* Badges */ .badge.bg-primary { background-color: var(--brand-lime) !important; color: #1f2328 !important; } /* Alerts / soft highlight helpers */ .bg-brand-soft { background-color: var(--brand-lime-soft) !important; } .border-brand { border-color: var(--brand-lime-dark) !important; } .text-brand-dark { color: var(--brand-lime-dark) !important; } .text-brand-coral { color: var(--brand-coral) !important; } /* Cards / panels */ .card, .modal-content, .list-group-item { border-color: var(--app-border); } /* Tables */ .table { --bs-table-striped-bg: #f4f7da; --bs-table-hover-bg: #eef4c0; } /* Navbar toggler on dark headers */ .app-header .navbar-toggler { border-color: rgba(255, 255, 255, 0.25); } .app-header .navbar-toggler-icon { filter: invert(1); } /* ========================= Global control style ========================= estilos globales para todos los controles de la app (bordes rectos, transiciones suaves...) */ /* Quitar bordes redondeados en toda la app */ .btn, .form-control, .form-select, .form-check-input, .input-group-text { border-radius: 0 !important; } /* Transiciones suaves globales */ .btn, .form-control, .form-select, .form-check-input { transition: all 0.15s ease-in-out; } /* Inputs base */ .form-control, .form-select { border: 1px solid var(--app-border); background-color: #fff; } /* Focus elegante (muy importante para UX) */ .form-control:focus, .form-select:focus { border-color: var(--brand-lime-dark); box-shadow: 0 0 0 0.2rem rgba(143, 161, 28, 0.15); } /* Botones base */ .btn { font-weight: 500; letter-spacing: 0.2px; }