/* ===== Tipografía de marca: IBM Plex Sans en todo el sistema =====
   Una sola familia para textos y títulos (H1–H6, títulos de cajas, ventanas y alertas).
   Las fuentes son locales (CSS/css.css → FONT/), no dependen de internet.
   Se carga al final de cada página para prevalecer sobre el tema (que usaba Rubik / Nunito / Roboto). */
@import url("css.css");

:root { --fuente-marca: "IBM Plex Sans", "Segoe UI", Arial, sans-serif; }

body,
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.heading-font, .box-title, .page-title, .modal-title, .card-title,
.swal2-popup, .swal2-title, .swal2-html-container, .swal2-styled,
button, input, select, textarea, .btn, .form-control, .dropdown-item,
.dataTables_wrapper, table {
    font-family: var(--fuente-marca) !important;
}

/* Pesos de títulos coherentes en todas las pantallas */
h1, .h1 { font-weight: 700; letter-spacing: -.01em; }
h2, .h2, h3, .h3 { font-weight: 700; }
h4, .h4, h5, .h5, h6, .h6, .box-title { font-weight: 600; }

/* ===== Encabezado de módulo (VIEW/modulos.php → EncabezadoModulo) =====
   H1: nombre del módulo con la tipografía del menú (IBM Plex Sans, mayúsculas).
   H2: subtítulo que explica el módulo, como máximo 2 líneas. */
.mod-cabecera {
    display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
    background: #fff; border-radius: 16px; padding: 16px 22px; margin-bottom: 18px; box-shadow: 0 2px 10px rgba(23, 43, 76, .06);
}
.mod-cabecera-texto { display: flex; align-items: center; gap: 14px; min-width: 0; flex: 1 1 420px; }
.mod-cabecera h1.mod-titulo {
    margin: 0; font-size: 1.3rem; font-weight: 500; line-height: 1.25; letter-spacing: .02em; text-transform: uppercase; color: #172b4c;
}
.mod-cabecera h2.mod-subtitulo {
    margin: 3px 0 0; font-size: .88rem; font-weight: 400; line-height: 1.45; color: #7d8798; max-width: 820px;
    display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.mod-cabecera-extra { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
body.dark-skin .mod-cabecera { background: #0c1a32; box-shadow: 0 2px 12px rgba(0, 0, 0, .3); }
body.dark-skin .mod-cabecera h1.mod-titulo { color: #eef1f6; }
body.dark-skin .mod-cabecera h2.mod-subtitulo { color: #8d97aa; }
/* Títulos de tarjetas: misma tipografía que el menú y el encabezado */
.box-title, .mod-tarjeta-titulo {
    font-weight: 500 !important; text-transform: uppercase; letter-spacing: .02em; font-size: .95rem !important;
}

@media (max-width: 767px) {
    .mod-cabecera { padding: 14px 16px; border-radius: 14px; margin-bottom: 14px; }
    .mod-cabecera-texto { flex-basis: 100%; }
        .mod-cabecera h1.mod-titulo { font-size: 1.08rem; }
    .mod-cabecera h2.mod-subtitulo { font-size: .82rem; }
    .mod-cabecera-extra { width: 100%; }
}

/* Alcance de los datos (dashboard): etiqueta a la derecha del encabezado */
.mod-alcance { display: inline-flex; align-items: center; gap: 6px; border-radius: 20px; padding: 6px 12px; font-size: .8rem; font-weight: 500;
               background: #f3f4f7; color: #4d5868; }
.mod-alcance i { color: #cf0707; }
body.dark-skin .mod-alcance { background: rgba(255, 255, 255, .06); color: #c2c9d6; }