/** * @file * portalfged — Kit de diseño "Conoce el estatus de tu trámite". * Subtema Bootstrap para Drupal 10/11. * * Peso 100 en portalfged.libraries.yml: se carga DESPUÉS de bootstrap.min.css * y de colors.css, por lo que gana la cascada sin necesidad de !important * (salvo en los selectores que el módulo Color reescribe). * * Los colores viven en variables --mx-*; colors.css sólo asigna las que el * módulo Color de Drupal puede reescribir desde la interfaz de administración. */ /* ============================================================ Kit de diseño — "Conoce el estatus de tu trámite" Tema institucional para Bootstrap 5.3 + Lucide Archivo único de cascada: cargar DESPUÉS de bootstrap.min.css ============================================================ */ /* ---------- 1. Tokens de color ---------- */ :root { /* Marca. Ojo: --mx-vino-900 / -800 / -700 NO se declaran aquí. Viven en colors.css, que es el único archivo que el módulo Color de Drupal reescribe (ver color/color.inc). Así, cambiar el esquema en Apariencia > Colores propaga a todo el sistema visual. Aquí sólo quedan los tonos derivados que el módulo no controla. */ --mx-vino-600: #8A2B4F; --mx-vino-300: #C98CA4; --mx-vino-100: #F3E4EA; /* Acentos institucionales (bandera) */ --mx-verde-700: #14653F; --mx-verde-100: #E1F0E7; --mx-rojo-700: #C1102A; --mx-rojo-100: #FBE4E7; --mx-oro-700: #9C7326; --mx-oro-500: #C9A227; --mx-oro-100: #F7EFDA; --mx-teal-700: #1F6B7A; --mx-teal-100: #E1EFF2; /* Superficies (--mx-arena-50 y --mx-blanco los define colors.css) */ --mx-arena-100: #F3ECDD; --mx-arena-200: #E6D9BE; /* Neutros (cálidos) */ --mx-gris-50: #F7F6F4; --mx-gris-100: #EDEBE7; --mx-gris-300: #C4BFB7; --mx-gris-500: #8A837A; --mx-gris-700: #55504A; /* --mx-gris-200 y --mx-gris-900 los define colors.css */ /* Semánticos de estatus de trámite */ --mx-estatus-recibido: var(--mx-teal-700); --mx-estatus-proceso: var(--mx-oro-700); --mx-estatus-resuelto: var(--mx-verde-700); --mx-estatus-requiere: var(--mx-rojo-700); --mx-estatus-cancelado: var(--mx-gris-500); /* Tipografía */ --mx-font-titulo: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif; --mx-font-texto: "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; --mx-font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace; /* Forma y elevación */ --mx-radio-sm: 4px; --mx-radio: 8px; --mx-radio-lg: 14px; --mx-sombra-1: 0 1px 2px rgba(43, 39, 36, .08); --mx-sombra-2: 0 4px 14px rgba(43, 39, 36, .10); --mx-sombra-3: 0 12px 32px rgba(43, 39, 36, .14); --mx-foco: 0 0 0 .25rem rgba(107, 30, 60, .30); /* ---------- 2. Puente hacia Bootstrap ---------- */ --bs-primary: var(--mx-vino-700); --bs-primary-rgb: 107, 30, 60; --bs-secondary: var(--mx-gris-700); --bs-secondary-rgb: 85, 80, 74; --bs-success: var(--mx-verde-700); --bs-success-rgb: 20, 101, 63; --bs-danger: var(--mx-rojo-700); --bs-danger-rgb: 193, 16, 42; --bs-warning: var(--mx-oro-700); --bs-warning-rgb: 156, 115, 38; --bs-info: var(--mx-teal-700); --bs-info-rgb: 31, 107, 122; --bs-light: var(--mx-arena-100); --bs-light-rgb: 243, 236, 221; --bs-dark: var(--mx-gris-900); --bs-dark-rgb: 43, 39, 36; --bs-body-font-family: var(--mx-font-texto); --bs-body-font-size: 1rem; --bs-body-color: var(--mx-gris-900); --bs-body-color-rgb: 43, 39, 36; --bs-body-bg: var(--mx-blanco); --bs-secondary-color: var(--mx-gris-700); --bs-border-color: var(--mx-gris-200); --bs-border-radius: var(--mx-radio); --bs-border-radius-sm: var(--mx-radio-sm); --bs-border-radius-lg: var(--mx-radio-lg); --bs-link-color: var(--mx-vino-700); --bs-link-color-rgb: 107, 30, 60; --bs-link-hover-color: var(--mx-vino-900); --bs-focus-ring-color: rgba(107, 30, 60, .3); --bs-heading-color: var(--mx-vino-800); } /* ---------- 3. Base ---------- */ body { font-family: var(--mx-font-texto); color: var(--mx-gris-900); background: var(--mx-blanco); text-wrap: pretty; } h1, h2, h3, h4, h5, h6, .mx-titulo { font-family: var(--mx-font-titulo); font-weight: 700; letter-spacing: -.01em; color: var(--mx-vino-800); } h1 { font-size: clamp(1.9rem, 3vw, 2.6rem); } h2 { font-size: clamp(1.5rem, 2.2vw, 1.95rem); } h3 { font-size: 1.35rem; } a { color: var(--mx-vino-700); text-underline-offset: .18em; } a:hover { color: var(--mx-vino-900); } code, kbd, pre, samp, .mx-mono { font-family: var(--mx-font-mono); } :focus-visible { outline: none; box-shadow: var(--mx-foco); border-radius: var(--mx-radio-sm); } .mx-fondo-arena { background: var(--mx-arena-50); } .mx-fondo-vino { background: var(--mx-vino-700); color: #fff; } .mx-fondo-grafito { background: var(--mx-gris-900); color: var(--mx-arena-100); } /* Franja tricolor decorativa */ .mx-franja { height: 4px; background: linear-gradient(90deg, var(--mx-verde-700) 0 33.33%, var(--mx-arena-200) 33.33% 66.66%, var(--mx-rojo-700) 66.66% 100%); } /* ---------- 4. Botones ---------- */ .btn { --bs-btn-font-family: var(--mx-font-texto); font-weight: 600; border-radius: 999px; padding: .55rem 1.25rem; transition: background-color .15s ease, color .15s ease, box-shadow .15s ease; } .btn-lg { padding: .8rem 1.7rem; font-size: 1.0625rem; } .btn-sm { padding: .35rem .85rem; font-size: .875rem; } .btn-primary { --bs-btn-bg: var(--mx-vino-700); --bs-btn-border-color: var(--mx-vino-700); --bs-btn-hover-bg: var(--mx-vino-800); --bs-btn-hover-border-color: var(--mx-vino-800); --bs-btn-active-bg: var(--mx-vino-900); --bs-btn-active-border-color: var(--mx-vino-900); --bs-btn-disabled-bg: var(--mx-vino-300); --bs-btn-disabled-border-color: var(--mx-vino-300); } .btn-outline-primary { --bs-btn-color: var(--mx-vino-700); --bs-btn-border-color: var(--mx-vino-700); --bs-btn-hover-bg: var(--mx-vino-700); --bs-btn-hover-border-color: var(--mx-vino-700); --bs-btn-active-bg: var(--mx-vino-900); } .btn-secondary { --bs-btn-bg: var(--mx-gris-700); --bs-btn-border-color: var(--mx-gris-700); --bs-btn-hover-bg: var(--mx-gris-900); --bs-btn-hover-border-color: var(--mx-gris-900); } .btn-success { --bs-btn-bg: var(--mx-verde-700); --bs-btn-border-color: var(--mx-verde-700); --bs-btn-hover-bg: #0F5334; --bs-btn-hover-border-color: #0F5334; } .btn-danger { --bs-btn-bg: var(--mx-rojo-700); --bs-btn-border-color: var(--mx-rojo-700); --bs-btn-hover-bg: #9E0C22; --bs-btn-hover-border-color: #9E0C22; } .btn-warning { --bs-btn-bg: var(--mx-oro-500); --bs-btn-border-color: var(--mx-oro-500); --bs-btn-color: var(--mx-gris-900); --bs-btn-hover-bg: var(--mx-oro-700); --bs-btn-hover-border-color: var(--mx-oro-700); --bs-btn-hover-color: #fff; } .btn-info { --bs-btn-bg: var(--mx-teal-700); --bs-btn-border-color: var(--mx-teal-700); --bs-btn-color: #fff; --bs-btn-hover-bg: #17545F; --bs-btn-hover-color: #fff; } .btn-light { --bs-btn-bg: var(--mx-arena-100); --bs-btn-border-color: var(--mx-arena-200); --bs-btn-hover-bg: var(--mx-arena-200); } .btn-dark { --bs-btn-bg: var(--mx-gris-900); --bs-btn-border-color: var(--mx-gris-900); --bs-btn-hover-bg: #191614; } .btn-link { --bs-btn-color: var(--mx-vino-700); --bs-btn-hover-color: var(--mx-vino-900); font-weight: 600; } .btn:focus-visible { box-shadow: var(--mx-foco); } .btn .mx-ico { width: 1.05em; height: 1.05em; vertical-align: -.15em; } /* ---------- 5. Formularios ---------- */ .form-label { font-weight: 600; font-size: .9375rem; margin-bottom: .35rem; color: var(--mx-gris-900); } .form-text { color: var(--mx-gris-500); } .form-control, .form-select { border-radius: var(--mx-radio); border-color: var(--mx-gris-300); padding: .6rem .85rem; font-size: 1rem; background-color: #fff; } .form-control:focus, .form-select:focus { border-color: var(--mx-vino-600); box-shadow: var(--mx-foco); } .form-control::placeholder { color: var(--mx-gris-300); } .form-control-lg { padding: .85rem 1.1rem; font-size: 1.0625rem; border-radius: var(--mx-radio-lg); } .form-control:disabled, .form-select:disabled { background-color: var(--mx-gris-50); color: var(--mx-gris-500); } .form-check-input { border-color: var(--mx-gris-300); } .form-check-input:checked { background-color: var(--mx-vino-700); border-color: var(--mx-vino-700); } .form-check-input:focus { border-color: var(--mx-vino-600); box-shadow: var(--mx-foco); } .form-switch .form-check-input { width: 2.5em; height: 1.25em; } .form-range::-webkit-slider-thumb { background: var(--mx-vino-700); } .form-range::-moz-range-thumb { background: var(--mx-vino-700); } .input-group-text { background: var(--mx-arena-100); border-color: var(--mx-gris-300); color: var(--mx-gris-700); } .was-validated .form-control:valid, .form-control.is-valid { border-color: var(--mx-verde-700); } .was-validated .form-control:invalid, .form-control.is-invalid { border-color: var(--mx-rojo-700); } .valid-feedback { color: var(--mx-verde-700); font-weight: 600; } .invalid-feedback { color: var(--mx-rojo-700); font-weight: 600; } .mx-campo-folio { font-family: var(--mx-font-mono); letter-spacing: .12em; text-transform: uppercase; } /* ---------- 6. Tarjetas, listas, tablas ---------- */ .card { border-radius: var(--mx-radio-lg); border-color: var(--mx-gris-200); box-shadow: var(--mx-sombra-1); } .card-header { background: var(--mx-arena-50); border-bottom-color: var(--mx-gris-200); font-family: var(--mx-font-titulo); font-weight: 600; } .card-footer { background: var(--mx-arena-50); border-top-color: var(--mx-gris-200); } .mx-card-hover { transition: box-shadow .18s ease, transform .18s ease; } .mx-card-hover:hover { box-shadow: var(--mx-sombra-2); transform: translateY(-2px); } .list-group-item { border-color: var(--mx-gris-200); } .list-group-item.active { background: var(--mx-vino-700); border-color: var(--mx-vino-700); } .list-group-item-action:hover { background: var(--mx-arena-50); } .table { --bs-table-color: var(--mx-gris-900); --bs-table-border-color: var(--mx-gris-200); --bs-table-striped-bg: var(--mx-arena-50); --bs-table-hover-bg: var(--mx-vino-100); } .table > thead th { background: var(--mx-vino-800); color: #fff; font-family: var(--mx-font-titulo); font-weight: 600; font-size: .875rem; letter-spacing: .02em; text-transform: uppercase; border-color: var(--mx-vino-800); } .table-borderless > thead th { background: transparent; color: var(--mx-vino-800); } /* ---------- 7. Navegación ---------- */ .mx-barra-institucional { background: var(--mx-vino-800); color: #fff; font-size: .875rem; } .mx-barra-institucional a { color: rgba(255,255,255,.88); text-decoration: none; font-weight: 600; } .mx-barra-institucional a:hover { color: #fff; text-decoration: underline; } .navbar { --bs-navbar-color: var(--mx-gris-700); --bs-navbar-hover-color: var(--mx-vino-700); --bs-navbar-active-color: var(--mx-vino-700); } .navbar-dark, .navbar[data-bs-theme="dark"] { --bs-navbar-color: rgba(255,255,255,.85); --bs-navbar-hover-color: #fff; } .navbar-nav .nav-link { font-weight: 600; } .navbar-nav .nav-link.active { box-shadow: inset 0 -3px 0 var(--mx-oro-500); } .nav-tabs { --bs-nav-tabs-border-color: var(--mx-gris-200); --bs-nav-tabs-link-active-color: var(--mx-vino-700); --bs-nav-tabs-link-active-border-color: var(--mx-gris-200) var(--mx-gris-200) #fff; border-bottom-width: 1px; } .nav-tabs .nav-link { font-weight: 600; color: var(--mx-gris-700); border-top-left-radius: var(--mx-radio); border-top-right-radius: var(--mx-radio); } .nav-tabs .nav-link.active { box-shadow: inset 0 3px 0 var(--mx-vino-700); } .nav-pills { --bs-nav-pills-link-active-bg: var(--mx-vino-700); } .nav-pills .nav-link { border-radius: 999px; font-weight: 600; color: var(--mx-gris-700); } .breadcrumb { --bs-breadcrumb-divider-color: var(--mx-gris-300); font-size: .9375rem; } .breadcrumb-item.active { color: var(--mx-gris-500); } .pagination { --bs-pagination-color: var(--mx-vino-700); --bs-pagination-active-bg: var(--mx-vino-700); --bs-pagination-active-border-color: var(--mx-vino-700); --bs-pagination-hover-bg: var(--mx-vino-100); --bs-pagination-focus-box-shadow: var(--mx-foco); --bs-pagination-border-color: var(--mx-gris-200); } /* ---------- 8. Retroalimentación ---------- */ .badge { font-weight: 600; letter-spacing: .01em; border-radius: 999px; padding: .4em .8em; } .alert { border-radius: var(--mx-radio); border-width: 0 0 0 4px; } .alert-primary { background: var(--mx-vino-100); color: var(--mx-vino-900); border-color: var(--mx-vino-700); } .alert-success { background: var(--mx-verde-100); color: #0C4429; border-color: var(--mx-verde-700); } .alert-danger { background: var(--mx-rojo-100); color: #7C0A1B; border-color: var(--mx-rojo-700); } .alert-warning { background: var(--mx-oro-100); color: #6A4D14; border-color: var(--mx-oro-500); } .alert-info { background: var(--mx-teal-100); color: #144A55; border-color: var(--mx-teal-700); } .progress { background: var(--mx-gris-100); border-radius: 999px; } .progress-bar { background: var(--mx-vino-700); } .spinner-border, .spinner-grow { color: var(--mx-vino-700); } .toast { border-radius: var(--mx-radio); box-shadow: var(--mx-sombra-2); } .tooltip-inner { background: var(--mx-gris-900); font-weight: 600; border-radius: var(--mx-radio-sm); } .modal-content { border-radius: var(--mx-radio-lg); border: none; box-shadow: var(--mx-sombra-3); } .modal-header { background: var(--mx-arena-50); border-bottom-color: var(--mx-gris-200); border-top-left-radius: var(--mx-radio-lg); border-top-right-radius: var(--mx-radio-lg); } .accordion { --bs-accordion-btn-focus-box-shadow: var(--mx-foco); --bs-accordion-active-color: var(--mx-vino-800); --bs-accordion-active-bg: var(--mx-vino-100); --bs-accordion-border-color: var(--mx-gris-200); --bs-accordion-border-radius: var(--mx-radio); } .accordion-button { font-family: var(--mx-font-titulo); font-weight: 600; } .offcanvas { --bs-offcanvas-bg: #fff; } /* ---------- 9. Estatus de trámite (producto) ---------- */ .mx-estatus { display: inline-flex; align-items: center; gap: .45rem; font-weight: 700; font-size: .8125rem; letter-spacing: .04em; text-transform: uppercase; padding: .38rem .8rem; border-radius: 999px; } .mx-estatus::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: currentColor; } .mx-estatus--recibido { color: var(--mx-estatus-recibido); background: var(--mx-teal-100); } .mx-estatus--proceso { color: var(--mx-estatus-proceso); background: var(--mx-oro-100); } .mx-estatus--resuelto { color: var(--mx-estatus-resuelto); background: var(--mx-verde-100); } .mx-estatus--requiere { color: var(--mx-estatus-requiere); background: var(--mx-rojo-100); } .mx-estatus--cancelado { color: var(--mx-estatus-cancelado); background: var(--mx-gris-100); } /* Línea de tiempo del trámite */ .mx-linea { list-style: none; margin: 0; padding: 0; } .mx-linea > li { position: relative; padding: 0 0 1.6rem 2.4rem; } .mx-linea > li::before { content: ""; position: absolute; left: .32rem; top: 1.5rem; bottom: -.1rem; width: 2px; background: var(--mx-gris-200); } .mx-linea > li:last-child::before { display: none; } .mx-linea > li::after { content: ""; position: absolute; left: 0; top: .3rem; width: .85rem; height: .85rem; border-radius: 50%; background: #fff; border: 2px solid var(--mx-gris-300); } .mx-linea > li.mx-linea--hecho::after { background: var(--mx-verde-700); border-color: var(--mx-verde-700); } .mx-linea > li.mx-linea--actual::after { background: var(--mx-oro-500); border-color: var(--mx-oro-500); box-shadow: 0 0 0 4px var(--mx-oro-100); } .mx-linea > li.mx-linea--hecho::before { background: var(--mx-verde-700); } /* Código de verificación (6 dígitos) */ .mx-otp { display: flex; gap: .5rem; } .mx-otp input { width: 3.25rem; height: 3.75rem; text-align: center; font-family: var(--mx-font-mono); font-size: 1.5rem; font-weight: 500; border: 1px solid var(--mx-gris-300); border-radius: var(--mx-radio); background: #fff; color: var(--mx-gris-900); } .mx-otp input:focus { outline: none; border-color: var(--mx-vino-600); box-shadow: var(--mx-foco); } .mx-otp input:disabled { background: var(--mx-gris-50); } .mx-otp--error input { border-color: var(--mx-rojo-700); } @media (max-width: 420px) { .mx-otp input { width: 2.5rem; height: 3rem; font-size: 1.2rem; } } /* Pasos del acceso */ .mx-pasos { display: flex; align-items: center; gap: .6rem; font-size: .8125rem; font-weight: 600; color: var(--mx-gris-500); } .mx-pasos span.mx-paso { display: inline-flex; align-items: center; gap: .45rem; } .mx-pasos .mx-paso-num { display: inline-flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--mx-gris-100); color: var(--mx-gris-500); font-family: var(--mx-font-mono); } .mx-pasos .mx-paso--activo { color: var(--mx-vino-700); } .mx-pasos .mx-paso--activo .mx-paso-num { background: var(--mx-vino-700); color: #fff; } .mx-pasos .mx-paso--hecho .mx-paso-num { background: var(--mx-verde-700); color: #fff; } /* Buscador de folio destacado */ .mx-hero { background: linear-gradient(160deg, var(--mx-vino-800) 0%, var(--mx-vino-700) 55%, var(--mx-vino-600) 100%); color: #fff; } .mx-hero h1, .mx-hero h2 { color: #fff; } /* Iconos Lucide */ .mx-ico { width: 20px; height: 20px; stroke-width: 1.9; } .mx-ico-sm { width: 16px; height: 16px; } .mx-ico-lg { width: 28px; height: 28px; } .mx-ico-caja { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: var(--mx-radio); background: var(--mx-vino-100); color: var(--mx-vino-700); } /* ---------- 10. Integración Drupal (subtema portalfged) ---------- */ /* Compatible con Bootstrap 4 y 5: se declaran ambas sintaxis donde difieren. */ /* Barras de navegación del subtema */ /* El fondo de #navbar-top y #navbar-main lo pone colors.css (campos "Header background top/bottom" del módulo Color). No lo repitas aquí. */ #navbar-top { color: #fff; font-size: .875rem; } #navbar-top a, #navbar-top .nav-link { color: rgba(255,255,255,.88); font-weight: 600; text-decoration: none; } #navbar-top a:hover, #navbar-top .nav-link:hover, #navbar-top .nav-link:focus { color: #fff; text-decoration: underline; } #navbar-main { box-shadow: var(--mx-sombra-1); position: relative; } #navbar-main::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 4px; background: linear-gradient(90deg, var(--mx-verde-700) 0 33.33%, var(--mx-arena-200) 33.33% 66.66%, var(--mx-rojo-700) 66.66% 100%); } #navbar-main .nav-link, #navbar-main .navbar-brand { color: #fff; font-weight: 600; } #navbar-main .nav-link:hover, #navbar-main .nav-link:focus { color: #fff; } #navbar-main .navbar-toggler { border-color: rgba(255,255,255,.4); } /* El estado activo del menú principal se define en la sección 12. */ .region-header .site-branding__text, .region-header .site-branding__text a, .region-header .site-branding a, .region-secondary-menu .menu-item a { text-decoration: none; } /* el color lo pone colors.css: campo "Title and slogan" */ /* Logotipo, nombre y lema del sitio: ver sección 12. */ /* Cuerpo de página */ /* El fondo de #page y #main-wrapper lo pone colors.css (campo "Main background"). */ /* El padding-top no es decorativo: sin él, el margen superior del primer hijo de #main se colapsa hacia afuera y el título queda montado sobre la franja tricolor de la barra. */ #main { padding-top: 1.5rem; padding-bottom: 3rem; } .page-title, h1.page-title { font-family: var(--mx-font-titulo); color: var(--mx-vino-800); margin: 1.75rem 0 1rem; } .region-breadcrumb { padding-top: 1.25rem; } .region-highlighted { margin-top: 1rem; } /* Bloques y barras laterales */ .block { margin-bottom: 1.75rem; } .block > h2, .block-title { font-family: var(--mx-font-titulo); font-size: 1.125rem; font-weight: 700; color: var(--mx-vino-800); padding-bottom: .5rem; margin-bottom: 1rem; border-bottom: 2px solid var(--mx-arena-200); } /* Fondo y color de borde vienen de colors.css (campos "Sidebar background" y "Sidebar borders"); aquí sólo el grosor, el radio y el relleno. */ .sidebar .block { border-style: solid; border-width: 1px; border-radius: var(--mx-radio-lg); padding: 1.25rem; } .sidebar .block > h2, .sidebar .block-title { border-bottom-color: var(--mx-arena-200); } /* Pestañas de tareas locales (.tabs) */ .tabs { margin: 0 0 1.5rem; } .tabs ul.primary { display: flex; flex-wrap: wrap; gap: .25rem; list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--mx-gris-200); } .tabs ul.primary li a { display: inline-block; padding: .55rem 1rem; font-weight: 600; color: var(--mx-gris-700); text-decoration: none; border: 1px solid transparent; border-radius: var(--mx-radio) var(--mx-radio) 0 0; } .tabs ul.primary li a:hover { background: var(--mx-arena-50); color: var(--mx-vino-700); } .tabs ul.primary li a.is-active, .tabs ul.primary li.is-active a { color: var(--mx-vino-700); border-top-color: var(--mx-gris-200); border-right-color: var(--mx-gris-200); border-left-color: var(--mx-gris-200); box-shadow: inset 0 3px 0 var(--mx-vino-700); } /* background-color y border-bottom-color los pone colors.css */ .tabs ul.secondary { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; padding: .75rem 0 0; margin: 0; } .tabs ul.secondary li a { font-size: .875rem; font-weight: 600; padding: .3rem .75rem; border-radius: 999px; background: var(--mx-gris-100); color: var(--mx-gris-700); text-decoration: none; } .tabs ul.secondary li a.is-active { background: var(--mx-vino-700); color: #fff; } /* Mensajes del sistema (Drupal messages) */ .messages, div[data-drupal-messages] .messages { border-radius: var(--mx-radio); border: 0; border-left: 4px solid; padding: .9rem 1.1rem; margin-bottom: 1.25rem; font-size: .9375rem; } .messages--status { background: var(--mx-verde-100); border-left-color: var(--mx-verde-700); color: #0C4429; } .messages--warning { background: var(--mx-oro-100); border-left-color: var(--mx-oro-500); color: #6A4D14; } .messages--error { background: var(--mx-rojo-100); border-left-color: var(--mx-rojo-700); color: #7C0A1B; } .messages__list { margin: 0; padding-left: 1.1rem; } .messages a { color: inherit; font-weight: 700; } /* Formularios Drupal */ .form-item { margin-bottom: 1.15rem; } .form-item label, label.form-label { font-weight: 600; font-size: .9375rem; color: var(--mx-gris-900); } .form-required::after { content: " *"; color: var(--mx-rojo-700); font-weight: 700; } .description, .form-item .description { font-size: .8125rem; color: var(--mx-gris-500); margin-top: .3rem; } .form-item--error-message { color: var(--mx-rojo-700); font-weight: 600; font-size: .8125rem; margin-top: .3rem; } input.error, textarea.error, select.error, .form-item--error input { border-color: var(--mx-rojo-700) !important; } .form-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.5rem; } .form-actions .button, .button { border-radius: 999px; font-weight: 600; padding: .55rem 1.25rem; border: 1px solid var(--mx-vino-700); background: var(--mx-vino-700); color: #fff; text-decoration: none; } .form-actions .button:hover, .button:hover { background: var(--mx-vino-800); border-color: var(--mx-vino-800); color: #fff; } .button--danger { background: var(--mx-rojo-700); border-color: var(--mx-rojo-700); } .form-actions .button--secondary, .button--secondary { background: #fff; color: var(--mx-vino-700); } /* Vistas, tablas y paginador de Drupal */ table.views-table, table.sticky-enabled, .views-table { width: 100%; border-collapse: collapse; } .views-table th, table.sticky-enabled th { background: var(--mx-vino-800); color: #fff; font-family: var(--mx-font-titulo); font-size: .8125rem; text-transform: uppercase; letter-spacing: .02em; padding: .7rem .85rem; } .views-table th a, table.sticky-enabled th a { color: #fff; text-decoration: none; } .views-table td { padding: .7rem .85rem; border-bottom: 1px solid var(--mx-gris-200); } .views-table tbody tr:hover { background: var(--mx-vino-100); } .views-row + .views-row { border-top: 1px solid var(--mx-gris-200); padding-top: 1.25rem; margin-top: 1.25rem; } .pager__items { display: flex; flex-wrap: wrap; gap: .25rem; list-style: none; padding: 0; margin: 1.75rem 0 0; } .pager__item a { display: inline-block; padding: .4rem .8rem; border: 1px solid var(--mx-gris-200); border-radius: var(--mx-radio-sm); color: var(--mx-vino-700); font-weight: 600; text-decoration: none; } .pager__item a:hover { background: var(--mx-vino-100); } .pager__item.is-active a { background: var(--mx-vino-700); border-color: var(--mx-vino-700); color: #fff; } .page-item.active .page-link { color: #fff; } /* fondo y borde: colors.css */ /* Pie institucional */ /* El fondo lo pone colors.css (campo "Footer background"). */ .site-footer { color: var(--mx-arena-100); padding: 2.5rem 0 0; border-top: 4px solid var(--mx-vino-700); } .site-footer a { color: var(--mx-arena-200); text-decoration: none; } .site-footer a:hover { color: #fff; text-decoration: underline; } .site-footer__top { display: flex; flex-wrap: wrap; gap: 2.5rem; padding-bottom: 2rem; } .site-footer__top > .region { flex: 1 1 200px; } .site-footer .block > h2, .site-footer .block-title { color: #fff; border-bottom-color: rgba(255,255,255,.15); font-size: 1rem; } .site-footer__bottom { border-top: 1px solid rgba(255,255,255,.15); padding: 1rem 0; font-size: .8125rem; color: var(--mx-gris-300); } .site-footer .region-footer-fifth p { margin: 0; } /* Enlace "saltar al contenido" */ .visually-hidden.focusable:focus, #skip-link a:focus { background: var(--mx-vino-700); color: #fff; padding: .6rem 1rem; border-radius: 0 0 var(--mx-radio) 0; } /* Utilidades del kit */ .mx-sombra-1 { box-shadow: var(--mx-sombra-1); } .mx-sombra-2 { box-shadow: var(--mx-sombra-2); } .mx-sombra-3 { box-shadow: var(--mx-sombra-3); } .mx-borde { border: 1px solid var(--mx-gris-200); } .mx-radio-lg { border-radius: var(--mx-radio-lg); } /* ============================================================ 11. Capa de compatibilidad entre versiones de Bootstrap ------------------------------------------------------------ CORRECCIÓN: este sitio corre BOOTSTRAP 5, no 4. Se comprobó contra el HTML que emite el servidor: la barra sale como `navbar navbar-dark bg-primary navbar-expand-lg` y el botón usa `data-bs-toggle` / `data-bs-target`. El tema base bootstrap 5.0.2 apunta a bootstrap.bundle.min.js y sus temas Bootswatch a la 5.2.0. El marcado de Bootstrap 4 que se ve en templates/_page.html.twig del subtema NO cuenta: ese archivo lleva guion bajo, así que Drupal no lo mapea a ningún hook y nunca se usa. Es residuo del starterkit. Entonces, ¿para qué sigue esta sección? Porque las secciones 4-8 están escritas con variables --bs-* de Bootstrap 5, que ya funcionan de forma nativa, pero el tema base todavía puede emitir clases de la era Bootstrap 4: config/install/portalfged.settings.yml trae bootstrap_radio, bootstrap_select y bootstrap_file en 'custom', que producen .custom-select y .custom-control-*. Esas reglas siguen haciendo falta. El resto son declaraciones literales con los MISMOS valores que las variables --bs-*: en Bootstrap 5 son redundantes pero inocuas, y sostienen el diseño si algún día el sitio carga una versión distinta. NO se repite aquí el fondo de .btn-primary: ése lo controla colors.css a través del módulo Color. ============================================================ */ /* ---------- 11.1 Botones ---------- */ .btn-primary { color: #fff; } .btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active { background-color: var(--mx-vino-900); border-color: var(--mx-vino-900); color: #fff; } .btn-primary.disabled, .btn-primary:disabled { background-color: var(--mx-vino-300); border-color: var(--mx-vino-300); color: #fff; opacity: 1; } .btn-primary:focus, .btn-primary.focus, .btn-secondary:focus, .btn-secondary.focus, .btn-success:focus, .btn-success.focus, .btn-danger:focus, .btn-danger.focus, .btn-warning:focus, .btn-warning.focus, .btn-info:focus, .btn-info.focus, .btn-outline-primary:focus, .btn-outline-primary.focus, .btn-link:focus, .btn-link.focus { box-shadow: var(--mx-foco); } .btn-secondary { background-color: var(--mx-gris-700); border-color: var(--mx-gris-700); color: #fff; } .btn-secondary:hover, .btn-secondary:not(:disabled):not(.disabled):active { background-color: var(--mx-gris-900); border-color: var(--mx-gris-900); color: #fff; } .btn-success { background-color: var(--mx-verde-700); border-color: var(--mx-verde-700); color: #fff; } .btn-success:hover, .btn-success:not(:disabled):not(.disabled):active { background-color: #0F5334; border-color: #0F5334; color: #fff; } .btn-danger { background-color: var(--mx-rojo-700); border-color: var(--mx-rojo-700); color: #fff; } .btn-danger:hover, .btn-danger:not(:disabled):not(.disabled):active { background-color: #9E0C22; border-color: #9E0C22; color: #fff; } .btn-warning { background-color: var(--mx-oro-500); border-color: var(--mx-oro-500); color: var(--mx-gris-900); } .btn-warning:hover, .btn-warning:not(:disabled):not(.disabled):active { background-color: var(--mx-oro-700); border-color: var(--mx-oro-700); color: #fff; } .btn-info { background-color: var(--mx-teal-700); border-color: var(--mx-teal-700); color: #fff; } .btn-info:hover, .btn-info:not(:disabled):not(.disabled):active { background-color: #17545F; border-color: #17545F; color: #fff; } .btn-light { background-color: var(--mx-arena-100); border-color: var(--mx-arena-200); color: var(--mx-gris-900); } .btn-light:hover, .btn-light:not(:disabled):not(.disabled):active { background-color: var(--mx-arena-200); border-color: var(--mx-arena-200); color: var(--mx-gris-900); } .btn-dark { background-color: var(--mx-gris-900); border-color: var(--mx-gris-900); color: #fff; } .btn-dark:hover, .btn-dark:not(:disabled):not(.disabled):active { background-color: #191614; border-color: #191614; color: #fff; } .btn-link { color: var(--mx-vino-700); } .btn-link:hover { color: var(--mx-vino-900); } .btn-outline-primary { color: var(--mx-vino-700); border-color: var(--mx-vino-700); background-color: transparent; } .btn-outline-primary:hover { background-color: var(--mx-vino-700); border-color: var(--mx-vino-700); color: #fff; } .btn-outline-primary:not(:disabled):not(.disabled):active { background-color: var(--mx-vino-900); border-color: var(--mx-vino-900); color: #fff; } .btn-outline-secondary { color: var(--mx-gris-700); border-color: var(--mx-gris-700); } .btn-outline-secondary:hover { background-color: var(--mx-gris-700); border-color: var(--mx-gris-700); color: #fff; } .btn-outline-success { color: var(--mx-verde-700); border-color: var(--mx-verde-700); } .btn-outline-success:hover { background-color: var(--mx-verde-700); border-color: var(--mx-verde-700); color: #fff; } .btn-outline-danger { color: var(--mx-rojo-700); border-color: var(--mx-rojo-700); } .btn-outline-danger:hover { background-color: var(--mx-rojo-700); border-color: var(--mx-rojo-700); color: #fff; } .btn-outline-info { color: var(--mx-teal-700); border-color: var(--mx-teal-700); } .btn-outline-info:hover { background-color: var(--mx-teal-700); border-color: var(--mx-teal-700); color: #fff; } .btn-outline-light { color: #fff; border-color: rgba(255,255,255,.7); } .btn-outline-light:hover { background-color: #fff; border-color: #fff; color: var(--mx-vino-700); } /* ---------- 11.2 Formularios (.custom-* de Bootstrap 4) ---------- */ .custom-select { border-radius: var(--mx-radio); border-color: var(--mx-gris-300); padding: .6rem 1.75rem .6rem .85rem; height: auto; font-size: 1rem; } .custom-select:focus { border-color: var(--mx-vino-600); box-shadow: var(--mx-foco); } .custom-select-lg { padding: .85rem 1.75rem .85rem 1.1rem; font-size: 1.0625rem; border-radius: var(--mx-radio-lg); } .custom-control-input:checked ~ .custom-control-label::before { background-color: var(--mx-vino-700); border-color: var(--mx-vino-700); } .custom-control-input:focus ~ .custom-control-label::before { box-shadow: var(--mx-foco); } .custom-control-input:focus:not(:checked) ~ .custom-control-label::before { border-color: var(--mx-vino-600); } .custom-control-label::before { border-color: var(--mx-gris-300); } .custom-file-label { border-radius: var(--mx-radio); border-color: var(--mx-gris-300); } .custom-file-label::after { background: var(--mx-arena-100); color: var(--mx-gris-700); } .custom-range::-webkit-slider-thumb { background: var(--mx-vino-700); } .custom-range::-moz-range-thumb { background: var(--mx-vino-700); } .custom-range::-ms-thumb { background: var(--mx-vino-700); } .custom-switch .custom-control-input:checked ~ .custom-control-label::after { background-color: #fff; } select.form-control { border-radius: var(--mx-radio); border-color: var(--mx-gris-300); height: auto; padding: .6rem .85rem; } select.form-control:focus { border-color: var(--mx-vino-600); box-shadow: var(--mx-foco); } .form-control:focus { box-shadow: var(--mx-foco); } /* ---------- 11.3 Tablas ---------- */ .table thead th { background: var(--mx-vino-800); color: #fff; border-color: var(--mx-vino-800); } .table th, .table td { border-top-color: var(--mx-gris-200); } .table-bordered, .table-bordered th, .table-bordered td { border-color: var(--mx-gris-200); } .table-striped tbody tr:nth-of-type(odd) { background-color: var(--mx-arena-50); } .table-hover tbody tr:hover { background-color: var(--mx-vino-100); color: var(--mx-gris-900); } /* ---------- 11.4 Navegación ---------- */ .nav-tabs { border-bottom-color: var(--mx-gris-200); } .nav-tabs .nav-link { color: var(--mx-gris-700); } .nav-tabs .nav-link:hover { border-color: var(--mx-gris-200) var(--mx-gris-200) var(--mx-gris-200); } .nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link { color: var(--mx-vino-700); border-color: var(--mx-gris-200) var(--mx-gris-200) #fff; } .nav-pills .nav-link { color: var(--mx-gris-700); } .nav-pills .nav-link.active, .nav-pills .show > .nav-link { background-color: var(--mx-vino-700); color: #fff; } .navbar-light .navbar-nav .nav-link { color: var(--mx-gris-700); } .navbar-light .navbar-nav .nav-link:hover, .navbar-light .navbar-nav .nav-link:focus, .navbar-light .navbar-nav .active > .nav-link, .navbar-light .navbar-nav .nav-link.active { color: var(--mx-vino-700); } .navbar-dark .navbar-nav .nav-link { color: rgba(255,255,255,.85); } .navbar-dark .navbar-nav .nav-link:hover, .navbar-dark .navbar-nav .nav-link:focus, .navbar-dark .navbar-nav .nav-link.active { color: #fff; } .breadcrumb-item + .breadcrumb-item::before { color: var(--mx-gris-300); } .breadcrumb-item.active { color: var(--mx-gris-500); } .page-link { color: var(--mx-vino-700); border-color: var(--mx-gris-200); } .page-link:hover { background-color: var(--mx-vino-100); border-color: var(--mx-gris-200); color: var(--mx-vino-900); } .page-link:focus { box-shadow: var(--mx-foco); } .dropdown-item.active, .dropdown-item:active { background-color: var(--mx-vino-700); color: #fff; } .dropdown-item:hover, .dropdown-item:focus { background-color: var(--mx-arena-50); color: var(--mx-vino-800); } .dropdown-menu { border-color: var(--mx-gris-200); border-radius: var(--mx-radio); box-shadow: var(--mx-sombra-2); } /* ---------- 11.5 Insignias y utilidades de color ---------- */ .badge-primary { background-color: var(--mx-vino-700); color: #fff; } .badge-secondary { background-color: var(--mx-gris-700); color: #fff; } .badge-success { background-color: var(--mx-verde-700); color: #fff; } .badge-danger { background-color: var(--mx-rojo-700); color: #fff; } .badge-warning { background-color: var(--mx-oro-500); color: var(--mx-gris-900); } .badge-info { background-color: var(--mx-teal-700); color: #fff; } .badge-light { background-color: var(--mx-arena-100); color: var(--mx-gris-900); } .badge-dark { background-color: var(--mx-gris-900); color: #fff; } /* Bootstrap 5 retiró .badge-* en favor de .text-bg-*. */ .text-bg-primary { background-color: var(--mx-vino-700) !important; color: #fff !important; } .text-bg-secondary { background-color: var(--mx-gris-700) !important; color: #fff !important; } .text-bg-success { background-color: var(--mx-verde-700) !important; color: #fff !important; } .text-bg-danger { background-color: var(--mx-rojo-700) !important; color: #fff !important; } .text-bg-warning { background-color: var(--mx-oro-500) !important; color: var(--mx-gris-900) !important; } .text-bg-info { background-color: var(--mx-teal-700) !important; color: #fff !important; } .text-bg-light { background-color: var(--mx-arena-100) !important; color: var(--mx-gris-900) !important; } .text-bg-dark { background-color: var(--mx-gris-900) !important; color: #fff !important; } .text-primary { color: var(--mx-vino-700) !important; } .text-secondary { color: var(--mx-gris-700) !important; } .text-success { color: var(--mx-verde-700) !important; } .text-danger { color: var(--mx-rojo-700) !important; } .text-warning { color: var(--mx-oro-700) !important; } .text-info { color: var(--mx-teal-700) !important; } .text-muted { color: var(--mx-gris-500) !important; } .bg-primary { background-color: var(--mx-vino-700) !important; } .bg-secondary { background-color: var(--mx-gris-700) !important; } .bg-success { background-color: var(--mx-verde-700) !important; } .bg-danger { background-color: var(--mx-rojo-700) !important; } .bg-warning { background-color: var(--mx-oro-500) !important; } .bg-info { background-color: var(--mx-teal-700) !important; } .bg-light { background-color: var(--mx-arena-50) !important; } .bg-dark { background-color: var(--mx-gris-900) !important; } .border-primary { border-color: var(--mx-vino-700) !important; } .border-success { border-color: var(--mx-verde-700) !important; } .border-danger { border-color: var(--mx-rojo-700) !important; } .border-warning { border-color: var(--mx-oro-500) !important; } .border-info { border-color: var(--mx-teal-700) !important; } /* ---------- 11.6 Superposiciones ---------- */ .modal-header .close { color: var(--mx-gris-700); text-shadow: none; opacity: .8; } .modal-header .close:hover { color: var(--mx-vino-800); opacity: 1; } .alert .close { color: inherit; text-shadow: none; } .progress-bar { background-color: var(--mx-vino-700); } .close:focus { box-shadow: var(--mx-foco); outline: none; } /* ============================================================ 12. Cabecera: marca y menú principal ------------------------------------------------------------ Escrita contra el marcado que emite de verdad el tema base (bootstrap 5.0.2, plantilla templates/layout/page.html.twig):