/* ==========================================================================
identidad.css
Sistema de identidad visual CMCH (Colegio Marista Champagnat).
Extiende los colores institucionales (azul/rojo/amarillo) a un sistema
de tokens con propósito, tipografía propia y tratamiento de componentes
(navbar, tablas, badges, cards, botones, footer). Bootstrap 5 sigue
siendo la base funcional (grid, utilidades responsive); este archivo
sobrescribe su apariencia visual por defecto a propósito.
========================================================================== */
:root {
--cmch-azul: #0b3d91;
--cmch-azul-oscuro: #062a66;
--cmch-azul-claro: #e8edf9;
--cmch-rojo: #c0392b;
--cmch-rojo-oscuro: #a5281d;
--cmch-rojo-pastel: #f8e2df;
--cmch-amarillo: #f1c40f;
--cmch-amarillo-oscuro: #d8b40d;
--cmch-amarillo-texto: #3a2e00;
--cmch-amarillo-pastel: #fdf3d0;
--cmch-verde: #2f6b4f;
--cmch-verde-oscuro: #204a37;
--cmch-verde-pastel: #e3f1ea;
--cmch-tinta: #1a2333;
--cmch-piedra: #5b6472;
--cmch-piedra-claro: #dde1e8;
--cmch-piedra-pastel: #e7e9ed;
--cmch-fondo: #f3f5f9;
--cmch-superficie: #ffffff;
--cmch-font-display: "Fraunces", Georgia, serif;
--cmch-font-body: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
--cmch-radius: 12px;
--cmch-radius-sm: 8px;
/* Escudo simplificado en SVG: marca de agua en login/registro y sello
discreto en las tarjetas de resumen (ver más abajo). Un solo trazo
reutilizado en dos tamaños/opacidades en vez de cargar el logo
rasterizado para un elemento puramente decorativo. */
--cmch-shield: url("data:image/svg+xml;utf8,");
}
/* --------------------------------------------------------------------
Base, layout y tipografía
-------------------------------------------------------------------- */
html {
height: 100%;
}
body {
min-height: 100%;
display: flex;
flex-direction: column;
background-color: var(--cmch-fondo);
color: var(--cmch-tinta);
font-family: var(--cmch-font-body);
}
/* El contenido principal (el único
hijo directo
de , distinto del .container-fluid interno del navbar) crece
para empujar el footer al fondo en páginas cortas, en vez de dejarlo
flotando a mitad de pantalla. */
body > .container {
flex: 1 0 auto;
}
h1, h2, h3 {
font-family: var(--cmch-font-display);
font-weight: 600;
letter-spacing: -0.01em;
color: var(--cmch-tinta);
}
h1 { font-size: 2.25rem; }
h2 { font-size: 1.85rem; }
h3 { font-size: 1.4rem; }
a { color: var(--cmch-azul); }
a:hover, a:focus { color: var(--cmch-amarillo-oscuro); }
/* Foco/hover institucional: amarillo en toda la UI, no el azul default
de Bootstrap. El anillo (outline/box-shadow) puede usar el amarillo
puro porque no es texto; para texto se usa amarillo-oscuro (más arriba
y en .btn-outline-primary:hover) por legibilidad sobre fondo blanco. */
:focus-visible {
outline: 3px solid var(--cmch-amarillo);
outline-offset: 2px;
}
.form-control:focus, .form-select:focus {
border-color: var(--cmch-amarillo);
box-shadow: 0 0 0 0.2rem rgba(241, 196, 15, 0.35);
}
/* :focus-visible (no :focus a secas) para que el anillo solo aparezca
con teclado, no en cada clic de mouse. El outline se mantiene junto
al box-shadow -a propósito, no es redundancia sin sentido- porque
Modo de alto contraste de Windows ignora box-shadow por completo;
sin el outline, un usuario que navega con teclado en ese modo no ve
ningún foco en los botones. */
.btn:focus-visible {
box-shadow: 0 0 0 0.2rem rgba(241, 196, 15, 0.5) !important;
outline: 3px solid var(--cmch-amarillo);
outline-offset: 2px;
}
/* --------------------------------------------------------------------
Navbar
-------------------------------------------------------------------- */
/* Anidado con CSS nesting nativo (soporte amplio desde 2023: Chrome
112+, Safari 16.5+, Firefox 117+). Selectores con "&" explícito en
vez de la forma corta ("span { }" suelto) para que el resultado sea
idéntico sin importar la versión exacta de navegador — sigue
compilando exactamente a ".navbar-institucional .navbar-brand span",
etc., mismo resultado visual, solo mejor agrupado para leer. */
.navbar-institucional {
background: linear-gradient(90deg, var(--cmch-azul-oscuro), var(--cmch-azul));
border-bottom: 4px solid var(--cmch-amarillo);
padding-top: 0.6rem;
padding-bottom: 0.6rem;
& .navbar-brand {
display: flex;
align-items: center;
gap: 0.6rem;
& span {
font-family: var(--cmch-font-display);
font-weight: 500;
font-size: 1.1rem;
letter-spacing: 0;
}
& img {
height: 42px;
width: auto;
}
}
& .navbar-toggler {
border: 0;
padding: 0.25rem 0.5rem;
&:focus {
box-shadow: 0 0 0 0.2rem rgba(241, 196, 15, 0.4);
}
}
/* Links de navegación: sin fondo de botón, con subrayado animado */
& .nav-link {
position: relative;
color: rgba(255, 255, 255, 0.85) !important;
font-family: var(--cmch-font-body);
font-weight: 500;
font-size: 0.92rem;
padding: 0.7rem 0.85rem !important;
margin: 0 0.1rem;
border-radius: var(--cmch-radius-sm);
transition: color 0.15s ease, background-color 0.15s ease;
&::after {
content: "";
position: absolute;
left: 0.85rem;
right: 0.85rem;
bottom: 0.32rem;
height: 2px;
background: var(--cmch-amarillo);
transform: scaleX(0);
transform-origin: center;
transition: transform 0.18s ease;
}
&:hover,
&:focus,
&.active {
color: #fff !important;
background-color: rgba(255, 255, 255, 0.1);
}
&:hover::after,
&.active::after {
transform: scaleX(1);
}
}
& .dropdown-toggle::after {
vertical-align: 0.15em;
}
& .dropdown-menu {
border: 0;
border-radius: var(--cmch-radius);
box-shadow: 0 10px 30px rgba(6, 42, 102, 0.25);
margin-top: 0.6rem;
padding: 0.4rem;
min-width: 220px;
}
& .dropdown-item {
border-radius: var(--cmch-radius-sm);
padding: 0.5rem 0.75rem;
font-size: 0.9rem;
&:active,
&.active {
background-color: var(--cmch-azul);
color: #fff;
}
}
& .user-name {
max-width: 170px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
& .user-rol {
text-transform: capitalize;
}
}
.btn-cta-nav {
background-color: var(--cmch-amarillo);
border-color: var(--cmch-amarillo);
color: var(--cmch-amarillo-texto) !important;
font-weight: 600;
border-radius: var(--cmch-radius-sm);
&:hover,
&:focus {
background-color: var(--cmch-amarillo-oscuro);
border-color: var(--cmch-amarillo-oscuro);
color: var(--cmch-amarillo-texto) !important;
}
}
.avatar-nav {
width: 30px;
height: 30px;
border-radius: 50%;
object-fit: cover;
border: 2px solid var(--cmch-amarillo);
}
/* --------------------------------------------------------------------
Botones y formularios
-------------------------------------------------------------------- */
/* Área táctil mínima de 44x44px (WCAG 2.5.5) en todos los botones,
incluido .btn-sm: se logra solo con más padding vertical, no con
min-height + flex, porque algunos botones combinan .btn con
utilidades de Bootstrap que si dependen del flujo normal del texto
(.text-start + .text-truncate en el selector de tareas de Registro
diario) y forzar flex ahí les rompería el truncado con "...". */
.btn {
border-radius: var(--cmch-radius-sm);
font-weight: 600;
padding-top: 0.6rem;
padding-bottom: 0.6rem;
}
.btn-sm {
padding-top: 0.65rem;
padding-bottom: 0.65rem;
}
.btn-lg {
min-height: 48px;
}
.btn-primary {
background-color: var(--cmch-rojo);
border-color: var(--cmch-rojo);
}
.btn-primary:hover, .btn-primary:focus {
background-color: var(--cmch-rojo-oscuro);
border-color: var(--cmch-rojo-oscuro);
}
.btn-outline-primary {
color: var(--cmch-rojo);
border-color: var(--cmch-rojo);
}
.btn-outline-primary:hover, .btn-outline-primary:focus {
background-color: var(--cmch-amarillo);
border-color: var(--cmch-amarillo);
color: var(--cmch-amarillo-texto);
}
/* --------------------------------------------------------------------
Validación de formularios con :has() — sin JS ni cambios de
template. Ninguna plantilla (estudiantes/nuevo, evaluación,
registro diario, etc.) usa is-invalid/invalid-feedback de
Bootstrap: la validación es 100% nativa del navegador (required,
type="email", etc.), así que hoy no hay ningún estilo propio para
un campo inválido, solo el globo nativo -inconsistente entre
navegadores-.
:user-invalid (no :invalid a secas) para no pintar de rojo un
campo obligatorio vacío apenas se carga la página, antes de que el
usuario haya alcanzado a escribir nada: solo se activa después de
que el usuario interactuó con el campo y lo dejó inválido.
El selector de contenedor es genérico (.mb-3 y cualquier columna
.col-*) porque son los dos wrappers de campo que ya se usan en todo
el sistema — no target de :has() : solo se activa si adentro hay
un campo realmente inválido, así que no hay riesgo de falsos
positivos en un .mb-3/.col-* que no es un campo de formulario. ---
-------------------------------------------------------------- */
.mb-3:has(:user-invalid),
[class*="col-"]:has(:user-invalid) {
background-color: var(--cmch-rojo-pastel);
border-radius: var(--cmch-radius-sm);
padding: 0.6rem 0.6rem 0.1rem;
margin-left: -0.6rem;
margin-right: -0.6rem;
}
.mb-3:has(:user-invalid) .form-label,
[class*="col-"]:has(:user-invalid) .form-label {
color: var(--cmch-rojo-oscuro);
}
:user-invalid {
border-color: var(--cmch-rojo) !important;
}
/* Asterisco en el label de campos obligatorios (ver _form_macros.html:
macro field(), que agrega la clase "required" cuando el validador
DataRequired/InputRequired del campo lo marca). */
.form-label.required::after {
content: " *";
color: var(--cmch-rojo);
}
/* --------------------------------------------------------------------
Lista de casillas tipo "tarjeta" (ej. motivos de visita del Acta de
Supervisión): cada opción es su propio bloque con borde, en vez de la
lista plana de checkboxes nativos de Bootstrap uno bajo el otro — más
fácil de escanear en una lista larga. Con :has() se resalta el borde y
el fondo cuando la opción queda marcada, sin JS. Clase propia
(.checklist-cards), no aplicada a .form-check en general, para no
afectar los checkboxes sueltos que ya existen en el resto del sistema
(ej. "pertenece_pie" en el formulario de usuario).
-------------------------------------------------------------------- */
.checklist-cards .form-check {
position: relative;
margin: 0;
padding: 0.65rem 0.85rem 0.65rem 2.5rem;
min-height: 44px;
display: flex;
align-items: center;
border: 1px solid var(--cmch-piedra-claro);
border-radius: var(--cmch-radius-sm);
background-color: var(--cmch-superficie);
transition: border-color 0.15s ease, background-color 0.15s ease;
}
.checklist-cards .form-check:has(.form-check-input:checked) {
border-color: var(--cmch-azul);
background-color: var(--cmch-azul-claro);
}
.checklist-cards .form-check-input {
position: absolute;
left: 0.9rem;
margin: 0;
flex-shrink: 0;
}
.checklist-cards .form-check-label {
font-size: 0.92rem;
cursor: pointer;
}
/* --------------------------------------------------------------------
Feedback de éxito: check breve al guardar un formulario, sobre el
alert-success que ya se muestra en base.html vía
get_flashed_messages. Nada más -sin animación en el resto de
alert-*- y respeta prefers-reduced-motion.
-------------------------------------------------------------------- */
.alert-success::before {
content: "✓";
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
margin-right: 0.5rem;
border-radius: 50%;
background-color: var(--cmch-verde);
color: #fff;
font-size: 0.75rem;
font-weight: 700;
}
@media (prefers-reduced-motion: no-preference) {
.alert-success::before {
animation: cmch-check-pop 250ms ease;
}
}
@keyframes cmch-check-pop {
from {
transform: scale(0);
opacity: 0;
}
to {
transform: scale(1);
opacity: 1;
}
}
/* --------------------------------------------------------------------
Tablas de listados
Bootstrap pinta el fondo de cada celda con `background-color:
var(--bs-table-bg)` (opaco, default blanco) directamente sobre el
/
— un background-color puesto en el (su ancestro)
queda tapado por esa capa y nunca se ve. Por eso el color de fondo
del header va en el selector "thead th", no en "thead".
-------------------------------------------------------------------- */
.table-stack thead th,
.table thead th {
background-color: var(--cmch-tinta);
color: #fff;
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
padding-top: 0.9rem;
padding-bottom: 0.9rem;
border: 0;
vertical-align: middle;
}
.table td, .table th {
border-left: 0;
border-right: 0;
border-bottom: 1px solid var(--cmch-piedra-claro);
}
.table > tbody > tr:last-child > td {
border-bottom: 0;
}
.table-hover > tbody > tr:hover > * {
background-color: rgba(11, 61, 145, 0.05);
}
/* El contenedor solo se enmarca como "tarjeta" en tablet+, que es donde
.table-stack vuelve a ser una tabla real (ver responsive.css). En
mobile cada
ya es su propia tarjeta con borde/sombra propios;
sumarle un marco al contenedor ahí generaría una caja dentro de otra. */
@media (min-width: 768px) {
.table-responsive {
border: 1px solid var(--cmch-piedra-claro);
border-radius: var(--cmch-radius);
background-color: var(--cmch-superficie);
}
}
/* --------------------------------------------------------------------
Badges de estado: pastel derivado de cada color institucional + texto
en su versión oscura, en vez de los verdes/celestes genéricos de
Bootstrap.
-------------------------------------------------------------------- */
.badge {
font-family: var(--cmch-font-body);
font-weight: 700;
border-radius: 999px;
padding: 0.42em 0.75em;
border: 0;
}
/* Los badges de estado (Activo/Inactivo/Abandonada/etc.) ya llevan la
palabra en texto, así que técnicamente no dependen "solo" del color
-pero un glifo agiliza el escaneo visual para cualquiera, y en
particular para quien tiene dificultad para distinguir el pastel
verde del rojo o el amarillo a simple vista. Vía ::before, sin tocar
ningún template: aplica automáticamente a los badges de estudiantes,
usuarios, autoridades, prácticas y documentos por igual. Se excluyen
a propósito bg-info/bg-primary: ahí se usan como etiqueta de
categoría (rol, "PIE"), no como estado, y un glifo genérico no
aportaría información real. */
.badge.bg-success {
background-color: var(--cmch-verde-pastel) !important;
color: var(--cmch-verde-oscuro) !important;
}
.badge.bg-success::before {
content: "✓ ";
}
.badge.bg-secondary {
background-color: var(--cmch-piedra-pastel) !important;
color: var(--cmch-piedra) !important;
}
.badge.bg-secondary::before {
content: "– ";
}
.badge.bg-danger {
background-color: var(--cmch-rojo-pastel) !important;
color: var(--cmch-rojo-oscuro) !important;
}
.badge.bg-danger::before {
content: "✕ ";
}
.badge.bg-warning {
background-color: var(--cmch-amarillo-pastel) !important;
color: var(--cmch-amarillo-texto) !important;
}
.badge.bg-warning::before {
content: "⚠ ";
}
.badge.bg-info {
background-color: var(--cmch-azul-claro) !important;
color: var(--cmch-azul-oscuro) !important;
}
.badge.bg-primary {
background-color: var(--cmch-azul-claro) !important;
color: var(--cmch-azul) !important;
}
.badge.bg-light {
background-color: var(--cmch-piedra-pastel) !important;
color: var(--cmch-tinta) !important;
}
/* --------------------------------------------------------------------
Cards
-------------------------------------------------------------------- */
.card {
border: 0;
border-radius: var(--cmch-radius);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
background-color: var(--cmch-superficie);
}
.shadow-sm {
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
}
/* Tarjetas de resumen tipo "etiqueta + valor" (ficha de práctica, etc.):
se identifican por el patrón EtiquetaValor
como primeros hijos, no por una clase propia (no existía una). Con
:has() se les da un borde superior de color contextual sin afectar el
resto de ".card.card-body", que en este sistema también se usa como
wrapper genérico de formularios y bloques de sección. Azul por
defecto (info general); amarillo/verde/rojo cuando la tarjeta trae un
badge de ese color (estado en progreso, activo, crítico). */
.card.card-body:has(> strong:first-child + span) {
position: relative;
border-top: 3px solid var(--cmch-azul);
}
.card.card-body:has(.badge.bg-warning) { border-top-color: var(--cmch-amarillo); }
.card.card-body:has(.badge.bg-success) { border-top-color: var(--cmch-verde); }
.card.card-body:has(.badge.bg-danger) { border-top-color: var(--cmch-rojo); }
.card.card-body:has(> strong:first-child + span)::after {
content: "";
position: absolute;
top: 0.7rem;
right: 0.8rem;
width: 15px;
height: 17px;
background-image: var(--cmch-shield);
background-repeat: no-repeat;
background-size: contain;
opacity: 0.16;
pointer-events: none;
}
.card.card-body > strong:first-child {
display: block;
font-size: 0.72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--cmch-piedra);
margin-bottom: 0.35rem;
}
.card.card-body > strong:first-child + span:not(.badge) {
font-size: 1.05rem;
font-weight: 600;
color: var(--cmch-tinta);
}
/* --------------------------------------------------------------------
Firma visual: marca de agua del escudo en pantallas de acceso
(login/registro/recuperar contraseña/etc.), muy discreta, activada con
body.pagina-auth (ver {% block body_class %} en esas plantillas).
Va en ::before de la propia .card (position:absolute + inset:0), no de
body (antes era position:fixed + inset:0 sobre toda la pantalla): un
background-image nunca pinta fuera de la caja del elemento que lo
tiene, así que al anclarlo a la tarjeta en vez de al viewport completo,
queda recortado solo a su alto real -- sin esto, en tarjetas cortas
(ej. "Recuperar contraseña", con un solo campo) se alcanzaba a ver el
borde inferior del escudo asomando por debajo de la tarjeta.
-------------------------------------------------------------------- */
body.pagina-auth .card {
position: relative;
}
body.pagina-auth .card::before {
content: "";
position: absolute;
inset: 0;
background-image: var(--cmch-shield);
background-repeat: no-repeat;
background-position: center 15%;
background-size: min(60vw, 420px);
opacity: 0.035;
pointer-events: none;
z-index: 0;
}
body.pagina-auth .card-body {
position: relative;
z-index: 1;
}
/* --------------------------------------------------------------------
Vista "Mi perfil"
-------------------------------------------------------------------- */
.perfil-avatar {
border: 3px solid var(--cmch-azul);
}
.card-divisor {
border: 0;
border-top: 1px solid var(--cmch-piedra-claro);
opacity: 1;
margin: 1.25rem 0;
}
.titulo-con-icono {
display: flex;
align-items: center;
gap: 0.5rem;
}
.titulo-con-icono svg {
color: var(--cmch-azul);
flex-shrink: 0;
}
.dropzone-foto {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.35rem;
text-align: center;
padding: 1.5rem 1rem;
border: 2px dashed var(--cmch-piedra-claro);
border-radius: var(--cmch-radius-sm);
color: var(--cmch-piedra);
cursor: pointer;
transition: border-color 0.15s ease, background-color 0.15s ease;
}
.dropzone-foto:hover,
.dropzone-foto.dropzone-activa {
border-color: var(--cmch-azul);
background-color: var(--cmch-azul-claro);
}
.dropzone-foto svg {
color: var(--cmch-azul);
}
.dropzone-texto strong {
color: var(--cmch-azul);
font-weight: 600;
}
.dropzone-archivo {
font-weight: 600;
font-size: 0.85rem;
color: var(--cmch-tinta);
}
.dropzone-input {
position: absolute;
width: 1px;
height: 1px;
opacity: 0;
overflow: hidden;
}
.campo-password {
position: relative;
}
.campo-password input {
padding-right: 3.5rem;
}
/* 44x44 de área táctil real (no solo el ícono de 18px): el botón mide
44px con el ícono centrado adentro, en vez de crecer solo por el
padding alrededor de un SVG chico. */
.password-toggle {
position: absolute;
top: 50%;
right: 0.25rem;
transform: translateY(-50%);
width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
background: none;
border: 0;
padding: 0;
line-height: 1;
color: var(--cmch-piedra);
}
.password-toggle:hover {
color: var(--cmch-azul);
}
.password-toggle .icon-eye-off {
display: none;
}
.password-toggle.mostrando .icon-eye {
display: none;
}
.password-toggle.mostrando .icon-eye-off {
display: inline;
}
.password-strength {
display: flex;
gap: 0.3rem;
margin-top: 0.5rem;
}
.password-strength span {
height: 4px;
flex: 1;
border-radius: 999px;
background-color: var(--cmch-piedra-claro);
}
.password-strength span.activo.n1 { background-color: var(--cmch-rojo); }
.password-strength span.activo.n2 { background-color: var(--cmch-amarillo); }
.password-strength span.activo.n3 { background-color: var(--cmch-verde); }
.password-strength span.activo.n4 { background-color: var(--cmch-verde-oscuro); }
/* --------------------------------------------------------------------
Footer institucional: mismo tono que el navbar para enmarcar la
página entre header y footer. Estructura en grid de Bootstrap
(row/col), tipografía y colores propios.
-------------------------------------------------------------------- */
.footer-institucional {
flex-shrink: 0;
background-color: var(--cmch-azul-oscuro);
color: rgba(255, 255, 255, 0.8);
margin-top: 3rem;
}
.footer-institucional a {
color: rgba(255, 255, 255, 0.85);
text-decoration: none;
font-size: 0.9rem;
font-weight: 500;
}
.footer-institucional a:hover, .footer-institucional a:focus {
color: var(--cmch-amarillo);
}
.footer-escudo {
height: 28px !important;
width: auto !important;
max-width: 28px;
}
.footer-marca {
font-family: var(--cmch-font-display);
font-weight: 500;
font-size: 1rem;
color: #fff;
}
.footer-sub {
font-size: 0.78rem;
color: rgba(255, 255, 255, 0.6);
}
.footer-copy {
font-size: 0.78rem;
color: rgba(255, 255, 255, 0.6);
}
/* --------------------------------------------------------------------
Selector con textos largos (ej. tareas del plan de práctica): un