/* ============================================================================
AMOCVIES — capa de identidad y sistema de componentes
Hoja única del proyecto. Sustituye a amocvies-theme.css,
amocvies-admin-theme.css y amocvies-frest-theme.css: se consolidó aquí para
dejar de corregir unas hojas con otras, que era de donde salían los choques
de paleta, de radios y de tipografía.
QUÉ SE TOMA DE LA INTERFAZ DE REFERENCIA (OIC2)
La estructura, no los colores: la jerarquía tipográfica, la integración de
pestañas con tarjetas, las tarjetas anidadas, los radios, las sombras, los
espaciados, los estados activos, las transiciones y el comportamiento
responsive.
QUÉ ES DE AMOCVIES Y NO SE TOCA
Los colores, el logotipo y la identidad. Cada token de color apunta a la
paleta oficial de AMOCVIES:
#EF6808 Naranja institucional — acento y acción primaria
#173F7A Azul institucional — color de estructura (menú, títulos)
#102A4C Azul profundo — fondo del menú lateral
#DEB482 Arena — familia cálida, tramos claros
#6B2F11 Café — familia cálida, tramos oscuros
Tipografía: Archivo (titulares) y Raleway (cuerpos), ambas de Google Fonts y
ya enlazadas en header.php. Se retiró "IBM Plex Sans", que venía declarada en
una de las hojas anteriores y competía con estas dos.
POR QUÉ LOS TOKENS SE SIGUEN LLAMANDO --amoc-navy-* Y --amoc-gold
Los nombres se conservan a propósito: las mil quinientas líneas de
componentes de más abajo ya están escritas contra ellos. Lo que cambia es a
qué color apunta cada uno. El nombre describe el PAPEL, no el tinte:
--amoc-navy-* color de estructura → azul de AMOCVIES
--amoc-gold acento de selección → naranja de AMOCVIES
--amoc-bronze-* bloque activo → familia cálida arena/café
La base Frest (core-inst.css, theme-inst.css) se genera con
tools/build-amocvies-theme.php, que gira la familia azul de la plantilla al
azul de AMOCVIES. Esta hoja se carga después.
============================================================================ */
:root {
/* --- Color de marca, tal como lo define AMOCVIES ------------------------ */
--amoc-orange: #ef6808; /* acción primaria y acento */
--amoc-orange-hover: #d95e07;
--amoc-blue: #173f7a; /* azul institucional */
--amoc-blue-deep: #102a4c; /* fondo del menú */
--amoc-sand: #deb482;
--amoc-brown: #6b2f11;
/* --- Papel «estructura»: el azul institucional y su rampa --------------- */
/* Derivada a tono constante (215.8°) desde #173F7A, que queda en el paso 800.
Las claridades conservan las proporciones de la referencia, así que los
fondos suaves y los estados hover mantienen su relación. */
--amoc-navy: var(--amoc-blue);
--amoc-navy-950: #08162b;
--amoc-navy-900: #102a4c; /* = azul profundo oficial */
--amoc-navy-800: #173f7a; /* = azul institucional oficial */
--amoc-navy-700: #1c4b92;
--amoc-navy-600: #2159ab;
--amoc-navy-500: #3569b6; /* estructura interactiva; 5.46:1 con blanco */
--amoc-navy-400: #4d80cb;
--amoc-navy-300: #799fd8;
--amoc-navy-200: #bac9de;
--amoc-navy-100: #dde4ee;
--amoc-navy-50: #f3f5f9;
/* --- Papel «bloque activo»: la familia cálida --------------------------- */
/* Va de la arena al café. Ojo con el sentido: la arena es CLARA (1.9:1 con
blanco), así que el bloque activo del menú usa los tramos oscuros, que sí
admiten texto blanco. La arena se reserva para texto sobre el azul profundo,
donde da 7.5:1. */
--amoc-bronze: #8b4618;
--amoc-bronze-700: #6b2f11; /* = café oficial; 10.3:1 con blanco */
--amoc-bronze-600: #8b4618; /* 7.0:1 con blanco */
--amoc-bronze-400: #c2732e;
--amoc-bronze-200: #deb482; /* = arena oficial */
--amoc-bronze-50: #f6ecdf;
/* --- Papel «acento»: el naranja ---------------------------------------- */
/* Mismas reglas que el oro en la referencia: marca jerarquía, nunca es texto
sobre fondo claro. Sobre blanco da 3.16:1 —suficiente para un botón o un
borde, insuficiente para leer—. Sobre el azul profundo da 4.56:1 y ahí sí
puede ser texto. */
--amoc-gold: var(--amoc-orange);
--amoc-gold-600: var(--amoc-orange-hover);
--amoc-gold-100: #fdeadb;
--amoc-on-gold: #ffffff; /* 3.16:1 — sólo botones e iconos, no párrafos */
--amoc-on-bronze: #ffffff; /* válido sobre bronze-600 y -700 */
/* --- Superficies y texto ------------------------------------------------ */
--amoc-surface: #ffffff;
--amoc-surface-sunken: #f5f7fa;
--amoc-border: #e4e7ec;
--amoc-text: #2d3748;
--amoc-text-muted: #718096;
/* --- Semáforo ----------------------------------------------------------- */
--amoc-success: #2e8b57;
--amoc-danger: #d9534f;
--amoc-warning: var(--amoc-bronze-400);
--amoc-info: var(--amoc-navy-500);
/* --- Tipografía --------------------------------------------------------- */
/* Archivo tiene eje de ancho variable: de ahí el font-stretch de los titulares. */
--amoc-font-display: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
--amoc-font-display-stretch: 112%;
--amoc-font-ui: "Raleway", system-ui, -apple-system, "Segoe UI", sans-serif;
/* ========================================================================
Variables de diseño
Éstas son la parte estructural que se replica de la referencia. Están aquí
como variables y no como valores sueltos para que un cambio de radio o de
sombra se haga en un sitio y no en ochenta.
======================================================================== */
/* Radios: la escala de la plantilla. La tarjeta usa el paso `lg`.
Las hojas anteriores traían 16px en tarjetas y 10px en campos, muy por
encima de esta escala; de ahí que la interfaz no se sintiera como la
referencia aunque los colores coincidieran. */
--amoc-radius-sm: 0.1875rem;
--amoc-radius: 0.25rem;
--amoc-radius-lg: 0.3125rem;
--amoc-radius-xl: 0.375rem;
--amoc-radius-pill: 50rem;
/* Espaciado: el paso de la tarjeta de la plantilla es 1.375rem, y de ahí
salen los demás. */
--amoc-space-1: 0.25rem;
--amoc-space-2: 0.5rem;
--amoc-space-3: 0.75rem;
--amoc-space-4: 1rem;
--amoc-space-5: 1.375rem;
--amoc-space-6: 2rem;
--amoc-card-spacer: 1.375rem;
/* Sombras: bajas y difusas, teñidas del azul institucional. Una sombra
neutra sobre fondo azulado se ve sucia. */
--amoc-shadow-card: 0 4px 18px 0 rgba(23, 63, 122, 0.06);
--amoc-shadow-navbar: 0 2px 10px rgba(23, 63, 122, 0.08);
--amoc-shadow-raised: 0 6px 22px rgba(23, 63, 122, 0.1);
--amoc-shadow-pop: 0 14px 36px rgba(23, 63, 122, 0.14);
--amoc-shadow-inset: inset 0 1px 2px rgba(23, 63, 122, 0.075);
/* Realce de un boton de accion: la sombra se tiñe del propio naranja. */
--amoc-shadow-accent: 0 8px 18px rgba(239, 104, 8, 0.25);
/* Anillo de foco: un solo valor para campos, botones y enlaces. */
--amoc-focus-ring: 0 0 0 0.15rem rgba(239, 104, 8, 0.22);
--amoc-focus-ring-blue: 0 0 0 0.15rem rgba(23, 63, 122, 0.18);
/* Transiciones: una corta para estados y una larga para despliegues. */
--amoc-ease: cubic-bezier(0.4, 0, 0.2, 1);
--amoc-transition: 150ms var(--amoc-ease);
--amoc-transition-slow: 250ms var(--amoc-ease);
/* Bootstrap toma el naranja como primario: es la acción de AMOCVIES. */
--bs-primary: var(--amoc-orange);
--bs-primary-rgb: 239, 104, 8;
--bs-secondary: var(--amoc-blue);
--bs-border-radius: var(--amoc-radius);
--bs-border-radius-sm: var(--amoc-radius-sm);
--bs-border-radius-lg: var(--amoc-radius-lg);
}
/* ============================================================================
0.b Nombres heredados
Las vistas y los JS que aún no se han tocado escriben --amocvies-*. Se
mantienen como alias de los tokens de arriba —no al revés— para que exista
una sola fuente de verdad. Cuando ninguna vista los use, este bloque se borra.
La hoja anterior hacía justo lo contrario: apuntaba el naranja de AMOCVIES al
azul de la Universidad de Guanajuato, y como cargaba al final, la marca
quedaba sustituida. Eso es lo que se deshace aquí.
============================================================================ */
:root {
--amocvies-orange: var(--amoc-orange);
--amocvies-orange-hover: var(--amoc-orange-hover);
--amocvies-orange-dark: var(--amoc-orange-hover);
--amocvies-orange-soft: var(--amoc-gold-100);
--amocvies-blue: var(--amoc-blue);
--amocvies-blue-hover: var(--amoc-navy-700);
--amocvies-blue-dark: var(--amoc-blue-deep);
--amocvies-navy: var(--amoc-blue);
--amocvies-menu: var(--amoc-blue-deep);
--amocvies-sand: var(--amoc-sand);
--amocvies-brown: var(--amoc-brown);
--amocvies-page: var(--amoc-surface-sunken);
--amocvies-surface: var(--amoc-surface);
--amocvies-surface-soft: var(--amoc-surface-sunken);
--amocvies-border: var(--amoc-border);
--amocvies-line: var(--amoc-border);
--amocvies-text: var(--amoc-text);
--amocvies-ink: var(--amoc-text);
--amocvies-muted: var(--amoc-text-muted);
--amocvies-row-hover: var(--amoc-navy-50);
--amocvies-shadow: var(--amoc-shadow-pop);
--amocvies-shadow-soft: var(--amoc-shadow-card);
}
body {
background-color: var(--amoc-surface-sunken);
color: var(--amoc-text);
}
/* Arena sobre blanco da 1.9:1: como fondo de aviso necesita texto oscuro. */
.badge-warning {
background-color: var(--amoc-bronze-200) !important;
color: var(--amoc-brown) !important;
}
/* ============================================================================
1. Tipografía
============================================================================ */
body,
.menu,
.btn,
.form-control,
.form-select,
.table {
font-family: var(--amoc-font-ui);
}
h1, h2, h3, h4, h5, h6,
.card-title,
.app-brand-text {
font-family: var(--amoc-font-display);
font-stretch: var(--amoc-font-display-stretch, 112%); /* aproxima el ancho de Novecento Wide en Archivo */
letter-spacing: 0.01em;
color: var(--amoc-navy);
}
/* Titulares de primera importancia: la guía los quiere en versalitas anchas */
.amoc-display {
font-family: var(--amoc-font-display);
font-stretch: calc(var(--amoc-font-display-stretch, 112%) + 13%);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
}
/* ============================================================================
2. Barra lateral — azul institucional con acento oro
============================================================================ */
/* El tema declara `.bg-menu-theme { background-color: #f3f4f4 !important }`, un gris
casi blanco. Como el aside lleva las dos clases y ambas reglas son !important con
la misma especificidad, quién gana depende del orden de carga de las hojas: si el
navegador servía la del tema al final, la barra salía blanca y el texto claro se
volvía ilegible. Encadenar las dos clases sube la especificidad y lo resuelve pase
lo que pase con el orden. */
.layout-menu,
.layout-menu.bg-menu-theme,
aside.layout-menu.bg-menu-theme {
background-color: var(--amoc-navy) !important;
}
.app-brand {
background-color: var(--amoc-navy-900) !important;
border-bottom: 2px solid var(--amoc-gold) !important;
}
.app-brand-text {
color: #fff !important;
}
/* Bajo el nombre va el del sistema: dos renglones como mucho, para que la
cabecera del menú no crezca cuando el nombre configurado es largo. */
.amoc-brand-subtitulo {
color: #8aa0b5;
font-size: 8px;
letter-spacing: 0.07em;
line-height: 1.2;
margin-top: 4px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* Logo institucional: la guía exige privilegiarlo por tamaño o posición */
.amoc-logo {
height: 34px;
width: auto;
flex-shrink: 0;
}
/* Marcador tipográfico mientras no se coloca el archivo oficial del logo */
.amoc-logo-fallback {
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
border: 2px solid var(--amoc-gold);
border-radius: 50%;
color: var(--amoc-gold);
font-family: var(--amoc-font-display);
font-weight: 700;
font-size: 13px;
letter-spacing: 0.02em;
flex-shrink: 0;
}
.amoc-logo-fallback.amoc-logo-lg {
width: 132px;
height: 132px;
border-width: 3px;
font-size: 44px;
}
.amoc-logo-fallback.amoc-logo-sm {
width: 76px;
height: 76px;
font-size: 26px;
border-color: var(--amoc-bronze);
color: var(--amoc-bronze);
}
/* Se nombra también .bg-menu-theme porque amocvies-frest-theme.css pinta ahí
el encabezado casi en blanco y le ganaba por especificidad. */
.menu-header,
.bg-menu-theme .menu-header,
.bg-menu-theme .menu-header-text {
color: #8aa0b5 !important;
}
.menu-header {
margin-top: 1.5rem !important;
letter-spacing: 0.08em;
}
/* Con !important para que el color del texto no quede a merced del orden de las
hojas: el tema lo deja en un gris pensado para fondos claros. */
.layout-menu .menu-item .menu-link,
.menu-vertical .menu-item .menu-link {
color: #c8d5e0 !important;
}
.layout-menu .menu-item .menu-link .menu-icon,
.layout-menu .menu-item .menu-link .amoc-menu-subicon {
color: #c8d5e0;
}
/* Al pasar el cursor: fondo OPACO, no un velo translúcido.
Con `rgba(255,255,255,.06)` el texto blanco dependía de que abajo hubiera azul;
cuando el panel salía claro —el desplegable flotante del menú contraído— las
letras quedaban blancas sobre blanco. Un fondo sólido garantiza el par. */
.layout-menu .menu-item:not(.active) > .menu-link:hover,
.menu-vertical .menu-item:not(.active) > .menu-link:hover,
html:not(.layout-menu-collapsed) .bg-menu-theme .menu-inner .menu-item:not(.active) .menu-link:hover,
.layout-menu-hover.layout-menu-collapsed .bg-menu-theme .menu-inner .menu-item:not(.active) .menu-link:hover {
background-color: var(--amoc-navy-600) !important;
color: #fff !important;
}
.layout-menu .menu-item:not(.active) > .menu-link:hover .menu-icon,
.layout-menu .menu-item:not(.active) > .menu-link:hover .amoc-menu-subicon {
color: var(--amoc-gold) !important;
opacity: 1;
}
/* El submenú y el desplegable flotante del menú contraído llevan el azul
institucional de forma explícita: la plantilla los deja claros. */
.layout-menu .menu-sub,
.bg-menu-theme .menu-sub,
.layout-menu-collapsed .layout-menu .menu-item .menu-sub,
.layout-menu-hover.layout-menu-collapsed .bg-menu-theme .menu-inner > .menu-item > .menu-sub {
background-color: var(--amoc-navy) !important;
}
/* Los puntos que la plantilla dibuja antes de cada página sobran: ahora cada
una lleva su propio icono. */
.bg-menu-theme .menu-sub > .menu-item > .menu-link::before,
.layout-menu .menu-sub > .menu-item > .menu-link::before,
.layout-menu .menu-item .menu-link::before {
display: none !important;
content: none !important;
}
/* Separación entre el icono y el texto: la plantilla los deja casi pegados */
.layout-menu .menu-icon,
.layout-menu .amoc-menu-subicon {
margin-right: 0.75rem !important;
flex-shrink: 0;
}
/* Iconos de submódulo y de página: la plantilla no reserva sitio para ellos */
.layout-menu .amoc-menu-subicon {
font-size: 1.05rem;
line-height: 1;
width: 1.35rem;
text-align: center;
opacity: 0.85;
}
.layout-menu .menu-sub .menu-link {
display: flex;
align-items: center;
}
/* Encabezado del módulo (nivel 1): azul claro institucional, para distinguirlo
de sus páginas sin recurrir al dorado, que queda reservado a la selección. */
.layout-menu .menu-inner > .menu-item > .menu-link,
.layout-menu .menu-inner > .menu-item > .menu-link .menu-icon {
color: var(--amoc-navy-300) !important;
}
.layout-menu .menu-inner > .menu-item > .menu-link {
font-weight: 600;
}
.layout-menu .menu-inner > .menu-item > .menu-link:hover,
.layout-menu .menu-inner > .menu-item > .menu-link:hover .menu-icon {
color: var(--amoc-navy-200) !important;
}
/* Elemento activo: degradado dorado, el acento que la guía reserva para marcar
jerarquía.
La plantilla lo pinta con `background-color: rgb(218,227,243)`, un azul casi
blanco pensado para barras laterales claras: sobre el azul institucional
resulta un bloque chillante. Se sustituye por completo y se enumeran también
los selectores del tema para ganarles por especificidad, no sólo por orden.
El degradado se mantiene dentro de la gama dorada de punta a punta. Sobre oro
el único texto legible es el azul institucional (10.7:1); el blanco daría
1.4:1, por eso las letras se invierten a azul al seleccionar. */
/* Ojo con el combinador: el tema usa `.menu-item.active .menu-link` (descendiente),
que alcanza a todos los hijos del módulo abierto y les pinta el bloque bronce.
Aquí va `>` para que sólo afecte al enlace del propio elemento activo. */
.layout-menu .menu-item.active > .menu-link,
.bg-menu-theme .menu-item.active > .menu-link:not(.menu-toggle),
.layout-wrapper:not(.layout-horizontal) .bg-menu-theme .menu-inner .menu-item.active > .menu-link,
.menu-vertical .menu-item.active:not(.menu-item-closing) > .menu-link {
background:
/* Trama diagonal tenue, como la de los fondos institucionales */
repeating-linear-gradient(115deg,
rgba(255, 255, 255, 0.07) 0 2px,
rgba(255, 255, 255, 0) 2px 9px),
linear-gradient(90deg, var(--amoc-bronze) 0%, var(--amoc-bronze-700) 100%) !important;
background-color: var(--amoc-bronze) !important;
color: var(--amoc-on-bronze) !important;
border-left: 3px solid var(--amoc-gold) !important;
padding-left: 1.8rem !important;
font-weight: 600;
}
.layout-menu .menu-item.active > .menu-link .menu-icon,
.layout-menu .menu-item.active > .menu-link .amoc-menu-subicon,
.menu-vertical .menu-item.active > .menu-link .menu-icon {
color: var(--amoc-on-bronze) !important;
opacity: 1;
}
/* Un padre abierto no es la pantalla actual: basta el texto en oro, sin bloque,
para que no compita con la hoja realmente seleccionada.
Los selectores llevan el mismo prefijo largo que la regla de arriba porque si
no, aquélla gana por especificidad y el padre se pinta de dorado sólido, con
su icono dorado encima: invisible. */
.layout-wrapper:not(.layout-horizontal) .bg-menu-theme .menu-inner .menu-item.open > .menu-link.menu-toggle,
.layout-wrapper:not(.layout-horizontal) .bg-menu-theme .menu-inner .menu-item.active.open > .menu-link.menu-toggle,
.layout-menu .menu-item.open > .menu-link.menu-toggle {
background: transparent !important;
color: var(--amoc-navy-200) !important;
border-left-color: transparent !important;
font-weight: 700;
}
.layout-wrapper:not(.layout-horizontal) .bg-menu-theme .menu-inner .menu-item.open > .menu-link.menu-toggle .menu-icon,
.layout-wrapper:not(.layout-horizontal) .bg-menu-theme .menu-inner .menu-item.open > .menu-link.menu-toggle .amoc-menu-subicon,
.layout-menu .menu-item.open > .menu-link.menu-toggle .menu-icon,
.layout-menu .menu-item.open > .menu-link.menu-toggle .amoc-menu-subicon {
color: var(--amoc-navy-200) !important;
}
/* Una hoja de primer nivel también puede ser la pantalla activa: AMOCVIES
cuelga varias del menú sin agruparlas en un módulo. La regla de nivel 1 de
más arriba pinta esos enlaces de azul claro y, al empatar en especificidad
con la del elemento activo, dejaba el texto azul sobre el bronce. Con el
`.active` en el propio selector gana el color de la selección. */
.layout-menu .menu-inner > .menu-item.active > .menu-link,
.layout-menu .menu-inner > .menu-item.active > .menu-link .menu-icon,
.layout-menu .menu-inner > .menu-item.active > .menu-link .amoc-menu-subicon {
color: var(--amoc-on-bronze) !important;
}
/* …salvo cuando ese elemento es un módulo abierto: ahí no hay bronce que
contrastar y el texto vuelve al azul claro de la barra. */
.layout-menu .menu-inner > .menu-item.active.open > .menu-link.menu-toggle,
.layout-menu .menu-inner > .menu-item.active.open > .menu-link.menu-toggle .menu-icon {
color: var(--amoc-navy-200) !important;
}
/* Dentro de un submenú, el mismo bronce */
.layout-menu .menu-sub .menu-item.active > .menu-link,
.bg-menu-theme .menu-inner .menu-sub > .menu-item.active > .menu-link {
background:
repeating-linear-gradient(115deg,
rgba(255, 255, 255, 0.07) 0 2px,
rgba(255, 255, 255, 0) 2px 9px),
linear-gradient(90deg, var(--amoc-bronze) 0%, var(--amoc-bronze-700) 100%) !important;
color: var(--amoc-on-bronze) !important;
}
.menu-divider {
border-color: rgba(255, 255, 255, 0.08) !important;
}
/* ============================================================================
3. Barra superior
============================================================================ */
.layout-navbar,
#layout-navbar {
position: sticky !important;
top: 0 !important;
z-index: 1025 !important;
margin: 0 !important;
padding: 0 !important;
border-radius: 0 !important;
background-color: var(--amoc-surface) !important;
border-bottom: 1px solid var(--amoc-border) !important;
box-shadow: var(--amoc-shadow-navbar) !important;
min-height: 54px !important;
}
.layout-navbar .container-xxl {
padding-top: 0.35rem !important;
padding-bottom: 0.35rem !important;
min-height: 54px !important;
}
/* Título de pantalla en la barra superior */
.amoc-screen-title {
font-family: var(--amoc-font-display);
font-stretch: var(--amoc-font-display-stretch, 112%);
font-weight: 600;
color: var(--amoc-navy);
letter-spacing: 0.01em;
}
/* ============================================================================
4. Botones y acentos
============================================================================ */
/* La accion primaria de AMOCVIES es el naranja. Sobre blanco da 3.16:1: vale
como fondo de boton -es un componente de interfaz, no un parrafo- pero el
naranja NUNCA debe ser texto sobre fondo claro. Para eso esta .amoc-text-gold,
que usa el cafe. */
.btn-primary {
background-color: var(--amoc-orange) !important;
border-color: var(--amoc-orange) !important;
color: #fff !important;
box-shadow: 0 0.125rem 0.25rem 0 rgba(239, 104, 8, 0.28) !important;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active {
background-color: var(--amoc-orange-hover) !important;
border-color: var(--amoc-orange-hover) !important;
}
/* El contorno lleva el cafe y no el naranja: sobre blanco, el naranja como
texto no llega a 4.5:1 y el rotulo del boton hay que leerlo. */
.btn-outline-primary {
color: var(--amoc-bronze-700) !important;
border-color: var(--amoc-orange) !important;
}
.btn-outline-primary:hover,
.btn-outline-primary:active {
background-color: var(--amoc-orange) !important;
border-color: var(--amoc-orange) !important;
color: #fff !important;
}
/* El azul institucional se queda con la accion secundaria. Las vistas de
AMOCVIES lo pintan con contorno y fondo blanco, no solido: se respeta. */
.btn-secondary,
.btn-label-secondary {
background-color: var(--amoc-surface) !important;
border: 1px solid var(--amoc-navy) !important;
color: var(--amoc-navy) !important;
}
.btn-secondary:hover,
.btn-label-secondary:hover {
background-color: var(--amoc-navy-50) !important;
}
.btn-outline-secondary {
color: var(--amoc-navy) !important;
border-color: var(--amoc-navy-200) !important;
}
.btn-outline-secondary:hover,
.btn-outline-secondary:active {
background-color: var(--amoc-navy) !important;
border-color: var(--amoc-navy) !important;
color: #fff !important;
}
/* Botón de acento institucional: oro con texto azul. La combinación inversa
(texto blanco sobre oro) no alcanza contraste y no debe usarse. */
.btn-amoc-gold {
background-color: var(--amoc-gold);
border-color: var(--amoc-gold);
color: var(--amoc-on-gold);
font-weight: 600;
}
.btn-amoc-gold:hover,
.btn-amoc-gold:focus,
.btn-amoc-gold:active {
background-color: var(--amoc-gold-600);
border-color: var(--amoc-gold-600);
color: var(--amoc-on-gold);
}
/* El naranja como texto sobre claro no llega a 4.5:1: .text-primary usa el cafe,
que si se lee, y reserva el naranja para fondos. */
.text-primary { color: var(--amoc-bronze-700) !important; }
.bg-primary { background-color: var(--amoc-orange) !important; }
.bg-label-primary {
background-color: var(--amoc-gold-100) !important;
color: var(--amoc-bronze-700) !important;
}
.bg-label-secondary {
background-color: var(--amoc-navy-100) !important;
color: var(--amoc-navy-700) !important;
}
.amoc-text-gold { color: var(--amoc-bronze-700) !important; }
.amoc-bg-navy { background-color: var(--amoc-navy) !important; }
.amoc-border-gold { border-color: var(--amoc-gold) !important; }
/* Chips de estado en oro (avisos, pendientes) */
.bg-label-amoc-gold {
background-color: var(--amoc-gold-100) !important;
color: var(--amoc-bronze-700) !important;
}
/* Los enlaces van en azul: 10.35:1 sobre blanco. El naranja se guarda para
botones y acentos, donde es fondo y no texto. */
a { color: var(--amoc-navy); }
a:hover { color: var(--amoc-navy-700); }
.form-control:focus,
.form-select:focus {
border-color: var(--amoc-orange) !important;
box-shadow: var(--amoc-focus-ring) !important;
}
/* ============================================================================
5. Tarjetas, tablas y pie
============================================================================ */
/* .card se define en la seccion 10, junto con el anidamiento y la cabecera. */
.card-header .card-title {
color: var(--amoc-navy);
}
.table > thead {
background-color: var(--amoc-navy-50);
}
/* Encabezado claro con texto oscuro, como en la referencia: pesa menos que una
banda solida y deja que el dato mande. Se nombran las dos formas -con y sin
el hijo directo- porque DataTables emite su propia estructura. */
.table thead th,
.table > thead th,
table.dataTable thead th,
table.dataTable thead td {
background-color: var(--amoc-navy-50) !important;
color: var(--amoc-navy) !important;
font-family: var(--amoc-font-ui);
font-weight: 700;
letter-spacing: 0.04em;
border-bottom: 2px solid var(--amoc-navy-100) !important;
}
.content-footer {
border-top: 1px solid var(--amoc-border);
background-color: var(--amoc-surface) !important;
}
/* Encabezado de bloque dentro de formularios largos */
.amoc-form-section {
font-family: var(--amoc-font-display);
font-stretch: var(--amoc-font-display-stretch, 112%);
text-transform: uppercase;
letter-spacing: 0.06em;
font-size: 0.8rem;
font-weight: 700;
color: var(--amoc-navy-600);
padding-bottom: 0.5rem;
margin-bottom: 1rem;
border-bottom: 2px solid var(--amoc-navy-100);
}
.amoc-form-section::before {
content: "";
display: inline-block;
width: 3px;
height: 0.85em;
margin-right: 0.55rem;
vertical-align: -1px;
background-color: var(--amoc-gold);
}
/* Área de trabajo activa en la barra superior */
.amoc-area-activa {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding-left: 0.9rem;
border-left: 1px solid var(--amoc-border);
color: var(--amoc-navy-500);
max-width: 32rem;
}
.amoc-area-activa > i {
font-size: 1.05rem;
flex-shrink: 0;
}
.amoc-area-select {
width: auto;
max-width: 28rem;
border: 0;
background-color: transparent;
box-shadow: none !important;
color: var(--amoc-navy);
font-weight: 600;
font-size: 0.82rem;
padding-left: 0;
cursor: pointer;
}
.amoc-area-select:focus {
border: 0;
background-color: var(--amoc-navy-50);
}
.amoc-area-fija {
color: var(--amoc-navy);
font-weight: 600;
font-size: 0.82rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* En móvil el título de pantalla se oculta, así que el área ya no necesita
separador; el selector se encoge para no empujar los iconos de la derecha. */
@media (max-width: 991.98px) {
.amoc-area-activa {
padding-left: 0;
border-left: 0;
min-width: 0;
max-width: 100%;
}
.amoc-area-select,
.amoc-area-fija {
max-width: 11rem;
font-size: 0.78rem;
}
}
/* ============================================================================
Menú del usuario
============================================================================ */
.amoc-menu-usuario {
min-width: 15rem;
overflow: hidden;
border: 1px solid var(--amoc-border);
box-shadow: 0 8px 28px rgba(10, 38, 61, 0.16);
}
/* Cabecera: el logo institucional al fondo, muy tenue, sobre el azul */
.amoc-usuario-tarjeta {
position: relative;
padding: 1.25rem 1rem 1rem;
text-align: center;
background-color: var(--amoc-navy);
background-image:
linear-gradient(180deg, rgba(10, 38, 61, 0.82) 0%, rgba(10, 38, 61, 0.95) 100%),
var(--amoc-logo-marca, none);
background-size: auto 150%;
background-position: center 28%;
background-repeat: no-repeat;
border-bottom: 3px solid var(--amoc-gold);
}
/* Las fotos del personal vienen en vertical (3:4). La plantilla estira el
![]()
al 100% de la caja sin recortar, así que en un círculo salían
deformadas: `cover` las encuadra en vez de aplastarlas. */
.layout-navbar .avatar img,
.amoc-usuario-foto .avatar img {
object-fit: cover;
object-position: center top;
}
/* La foto sobresale sobre el fondo con un aro claro */
.amoc-usuario-foto .avatar {
width: 84px;
height: 84px;
margin: 0 auto;
border-radius: 50%;
box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.9), 0 4px 12px rgba(0, 0, 0, 0.35);
}
/* La foto es un botón: al pasar el cursor aparece la cámara encima */
.amoc-foto-boton {
position: relative;
display: block;
margin: 0 auto 0.75rem;
padding: 0;
border: 0;
background: transparent;
border-radius: 50%;
cursor: pointer;
line-height: 0;
}
.amoc-foto-capa {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background-color: rgba(10, 38, 61, 0.65);
color: var(--amoc-gold);
font-size: 1.6rem;
opacity: 0;
transition: opacity 0.15s ease-in-out;
}
.amoc-foto-boton:hover .amoc-foto-capa,
.amoc-foto-boton:focus-visible .amoc-foto-capa {
opacity: 1;
}
.amoc-foto-boton:focus-visible {
outline: 2px solid var(--amoc-gold);
outline-offset: 3px;
}
.amoc-foto-quitar {
display: block;
margin: 0 auto 0.75rem;
padding: 0;
border: 0;
background: transparent;
color: #93a9c0;
font-size: 0.72rem;
text-decoration: underline;
cursor: pointer;
}
.amoc-foto-quitar:hover {
color: var(--amoc-gold);
}
.amoc-usuario-foto .avatar-initial {
font-size: 1.75rem;
font-weight: 700;
}
.amoc-usuario-datos {
display: flex;
flex-direction: column;
gap: 0.15rem;
}
.amoc-usuario-nombre {
color: #fff;
font-weight: 700;
font-size: 0.95rem;
line-height: 1.25;
}
.amoc-usuario-correo {
color: #b9cade;
font-size: 0.78rem;
word-break: break-all;
}
.amoc-usuario-dato {
color: #93a9c0;
font-size: 0.75rem;
}
.amoc-menu-usuario .dropdown-item {
padding: 0.6rem 1rem;
font-size: 0.875rem;
}
.amoc-menu-usuario .dropdown-item:hover {
background-color: var(--amoc-navy-50);
}
/* Pestañas de formulario dentro de un modal: mantienen acotada su altura */
.amoc-form-tabs,
.card .nav-tabs,
.card .bar_tabs {
border-bottom: 1px solid var(--amoc-border);
flex-wrap: wrap;
gap: 0.25rem;
}
.amoc-form-tabs .nav-link,
.card .nav-tabs .nav-link,
.card .bar_tabs .nav-link {
border: 0;
border-bottom: 3px solid transparent;
border-radius: 0;
padding: 0.6rem 1rem;
font-weight: 600;
font-size: 0.875rem;
color: var(--amoc-text-muted);
background: transparent;
/* Sin transición de color: la de Bootstrap dejaba el subrayado pegado en la
pestaña anterior al cambiar de una a otra. */
transition: none;
}
.amoc-form-tabs .nav-link:hover:not(.active),
.card .nav-tabs .nav-link:hover:not(.active),
.card .bar_tabs .nav-link:hover:not(.active) {
color: var(--amoc-navy-500);
border-bottom-color: var(--amoc-navy-200);
}
/* Se marca por clase y por atributo: Bootstrap mantiene ambos y así el estilo
no depende de cuál actualice primero. */
.amoc-form-tabs .nav-link.active,
.amoc-form-tabs .nav-link[aria-selected="true"],
.card .nav-tabs .nav-link.active,
.card .bar_tabs .nav-link.active {
color: var(--amoc-navy);
background: transparent;
border-bottom-color: var(--amoc-gold);
}
.amoc-form-tabs .nav-link:not(.active)[aria-selected="false"] {
border-bottom-color: transparent;
}
/* Altura estable: el modal no salta al cambiar de pestaña */
.amoc-form-tab-content {
padding-top: 1.5rem;
min-height: 20rem;
}
/* La lista de perfiles crece con cada módulo: se desplaza dentro de su propia
pestaña en vez de estirar el modal. */
.amoc-perfiles-lista {
max-height: 24rem;
overflow-y: auto;
padding-right: 0.5rem;
}
.amoc-perfiles-lista .amoc-form-section:first-child {
margin-top: 0 !important;
}
@media (max-width: 767.98px) {
.amoc-perfiles-lista { max-height: 18rem; }
}
/* En pantallas angostas las pestañas se deslizan en una sola fila: envolverlas
robaba tres renglones de alto, que es justo lo que se quiere ahorrar. */
@media (max-width: 767.98px) {
.amoc-form-tabs,
.card .nav-tabs,
.card .bar_tabs {
flex-wrap: nowrap;
overflow-x: auto;
overflow-y: hidden;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}
.amoc-form-tabs::-webkit-scrollbar { display: none; }
.amoc-form-tabs .nav-item { flex: 0 0 auto; }
.amoc-form-tabs .nav-link,
.card .nav-tabs .nav-link,
.card .bar_tabs .nav-link {
padding: 0.5rem 0.7rem;
font-size: 0.8rem;
white-space: nowrap;
}
.amoc-form-tab-content {
padding-top: 1.15rem;
min-height: 0;
}
}
/* ============================================================================
5.b DataTables
La librería pinta sus controles con clases sueltas de Bootstrap; aquí se
igualan al resto de la aplicación y se les da el marco institucional.
El idioma y la disposición viven en assets/js/amocvies-datatables.js.
============================================================================ */
/* El buscador manda en la fila superior, pero no debe empujar al selector de
tamaño fuera de la tarjeta en pantallas medianas */
.dataTables_wrapper .dataTables_filter input {
min-width: 14rem;
max-width: 100%;
}
.dataTables_wrapper .dataTables_filter label,
.dataTables_wrapper .dataTables_length label {
margin-bottom: 0;
display: flex;
align-items: center;
gap: 0.5rem;
color: var(--amoc-text-muted);
font-size: 0.82rem;
white-space: nowrap;
}
.dataTables_wrapper .dataTables_length select {
width: auto;
}
/* Cabecera: el mismo tratamiento que las tablas normales, y se queda fija al
desplazar dentro del contenedor para no perder de vista las columnas */
/* Se antepone el envoltorio porque DataTables fija `position: relative` en
`table.dataTable thead > tr > th.sorting`, que gana por especificidad. */
.dataTables_wrapper table.dataTable > thead > tr > th {
position: sticky;
top: 0;
z-index: 2;
background-color: var(--amoc-navy-50);
white-space: nowrap;
}
table.dataTable > tbody > tr > td {
vertical-align: middle;
}
table.dataTable > tbody > tr:hover > td {
background-color: var(--amoc-navy-50);
}
/* Marca de la columna por la que se ordena */
table.dataTable > thead > tr > th.sorting_asc,
table.dataTable > thead > tr > th.sorting_desc {
box-shadow: inset 0 -3px 0 0 var(--amoc-gold);
}
/* El contenedor con scroll necesita alto acotado para que `sticky` sirva */
.dataTables_wrapper .table-responsive {
max-height: 65vh;
overflow-y: auto;
}
/* Paginación */
.dataTables_wrapper .dataTables_paginate .paginate_button.current > .page-link,
.dataTables_wrapper .pagination .page-item.active .page-link {
background-color: var(--amoc-navy-500) !important;
border-color: var(--amoc-navy-500) !important;
}
.dataTables_wrapper .pagination {
margin-bottom: 0;
}
/* Botones de exportación: discretos, en la esquina de la tarjeta */
.amoc-dt-botones {
display: flex;
flex-wrap: wrap;
gap: 0.35rem;
margin: 0.75rem 1rem 0;
}
.amoc-dt-botones .btn {
font-size: 0.78rem;
}
/* Sin registros: un renglón vacío no debería parecer un error */
table.dataTable > tbody > tr.odd > td.dataTables_empty,
table.dataTable > tbody > tr > td.dataTables_empty {
padding: 2.5rem 1rem;
text-align: center;
color: var(--amoc-text-muted);
}
/* ============================================================================
5.c Marcos
Encabezado de tarjeta con filo institucional y una barra de herramientas
para los controles que acompañan a una tabla (filtros, altas, exportación).
============================================================================ */
.amoc-panel > .card-header {
border-bottom: 1px solid var(--amoc-border);
background-color: var(--amoc-surface);
padding-block: 0.9rem;
}
.amoc-panel > .card-header .card-title,
.amoc-cabecera .card-title {
margin-bottom: 0;
}
/* Filo dorado a la izquierda del título: el mismo recurso que el menú usa
para marcar jerarquía */
.amoc-panel > .card-header .card-title::before,
.amoc-cabecera .card-title::before {
content: "";
display: inline-block;
width: 3px;
height: 0.9em;
margin-right: 0.6rem;
vertical-align: -1px;
background-color: var(--amoc-gold);
}
.amoc-panel-sub {
display: block;
color: var(--amoc-text-muted);
font-size: 0.8rem;
margin-top: 0.2rem;
}
/* Barra de herramientas sobre la tabla */
.amoc-barra {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem;
padding: 0.85rem 1rem;
background-color: var(--amoc-surface-sunken);
border-bottom: 1px solid var(--amoc-border);
}
.amoc-barra .form-control,
.amoc-barra .form-select {
max-width: 16rem;
}
/* Contador de renglones junto al título */
.amoc-conteo {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 1.9rem;
padding: 0.1rem 0.5rem;
border-radius: 999px;
background-color: var(--amoc-navy-100);
color: var(--amoc-navy-700);
font-size: 0.75rem;
font-weight: 700;
}
.amoc-footer-rule {
border-top: 2px solid var(--amoc-gold);
}
/* ============================================================================
5.d Piezas de pantalla
Los patrones que se repiten en las pantallas de listado: cabecera con
descripción, avatar de iniciales, celda de dos renglones y panel de alta
embebido. Están aquí y no en cada vista para que todas las pantallas se
parezcan sin copiar marcado.
============================================================================ */
/* --- Cabecera de tarjeta: título, descripción y acción ------------------- */
.amoc-cabecera {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
justify-content: space-between;
gap: 1rem;
padding: 1.25rem 1.5rem;
border-bottom: 1px solid var(--amoc-border);
}
.amoc-cabecera h5 {
margin-bottom: 0.15rem;
}
.amoc-cabecera .amoc-descripcion {
display: block;
color: var(--amoc-text-muted);
font-size: 0.82rem;
margin-bottom: 0;
max-width: 70ch;
}
/* --- Avatar de iniciales -------------------------------------------------
Cuando no hay fotografía, las iniciales sobre un disco azul claro dan a la
lista un punto de anclaje visual por renglón. */
.amoc-iniciales {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.25rem;
height: 2.25rem;
flex-shrink: 0;
border-radius: 50%;
background-color: var(--amoc-navy-100);
color: var(--amoc-navy-600);
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.02em;
text-transform: uppercase;
}
/* --- Celda de dos renglones ---------------------------------------------
Un dato principal y su contexto en gris: el cargo bajo el nombre, la
dependencia bajo el área. Evita multiplicar columnas. */
.amoc-persona {
display: flex;
align-items: center;
gap: 0.65rem;
}
.amoc-dato {
min-width: 0;
}
.amoc-dato-principal {
display: block;
color: var(--amoc-text);
font-weight: 600;
line-height: 1.3;
}
.amoc-dato-secundario {
display: block;
color: var(--amoc-text-muted);
font-size: 0.78rem;
line-height: 1.3;
}
/* Un dato ausente se marca como tal, en vez de dejar el hueco en blanco */
.amoc-dato-vacio {
color: var(--amoc-text-muted);
font-style: italic;
}
/* --- Grupo de acciones --------------------------------------------------- */
.amoc-acciones {
display: inline-flex;
gap: 0.25rem;
white-space: nowrap;
}
/* --- Panel de alta embebido en una tarjeta ------------------------------- */
.amoc-subpanel {
border: 1px solid var(--amoc-border);
border-radius: 0.4rem;
padding: 1.25rem;
margin-top: 1.25rem;
background-color: var(--amoc-surface);
}
.amoc-subpanel > h6 {
margin-bottom: 1rem;
color: var(--amoc-navy);
}
/* Etiqueta de campo en versalitas: la usan los formularios de alta */
.amoc-etiqueta {
display: block;
text-transform: uppercase;
letter-spacing: 0.06em;
font-size: 0.7rem;
font-weight: 700;
color: var(--amoc-text-muted);
margin-bottom: 0.35rem;
}
.amoc-etiqueta .obligatorio {
color: var(--amoc-bronze);
}
/* --- Encabezados de tabla en versalitas ----------------------------------
Es el rasgo que más distingue las tablas institucionales de las de la
plantilla; se aplica a todas para que no convivan dos estilos. */
.table > thead th,
table.dataTable > thead > tr > th {
text-transform: uppercase;
font-size: 0.72rem;
}
/* Renglones separados por una línea tenue, sin rejilla completa */
.table > tbody > tr > td {
border-bottom: 1px solid var(--amoc-border);
padding-block: 0.85rem;
}
.table > tbody > tr:last-child > td {
border-bottom: 0;
}
/* ============================================================================
5.e Aplicación al resto del proyecto
Las quince pantallas de listado pintan sus botones desde JavaScript, cada una
con su propio marcado. En lugar de reescribirlas una por una, aquí se les da
el aspecto institucional desde la hoja: así ninguna se queda fuera y no hay
riesgo de romper el comportamiento de tablas que no se pueden probar sin
entrar al sistema.
============================================================================ */
/* --- Cabecera de tarjeta -------------------------------------------------
Conviven dos formas en el proyecto: y un
.card-header con un .card-title dentro. Ambas reciben el filo dorado. */
.card > h6.card-header::before,
.card > h5.card-header::before,
.card > .card-header > .card-title::before {
content: "";
display: inline-block;
width: 3px;
height: 0.9em;
margin-right: 0.6rem;
vertical-align: -1px;
background-color: var(--amoc-gold);
}
.card > h6.card-header,
.card > h5.card-header {
font-family: var(--amoc-font-display);
font-stretch: var(--amoc-font-display-stretch, 112%);
color: var(--amoc-navy);
border-bottom: 1px solid var(--amoc-border);
background-color: var(--amoc-surface);
}
/* --- Botones de acción dentro de las tablas ------------------------------
Las pantallas los emiten como `btn btn-primary btn-xs` con un icono dentro.
Un botón que sólo lleva icono se convierte en cuadrado y de tono suave, que
es como se ven en las pantallas del referente; los que llevan texto se
quedan como están. */
.table td .btn-xs,
.dataTables_wrapper .table td .btn-xs {
padding: 0.28rem 0.5rem;
font-size: 0.78rem;
line-height: 1.2;
border-radius: 0.3rem;
}
.table td .btn + .btn {
margin-left: 0.25rem;
}
.table td .btn:has(> i:only-child),
.table td .btn:has(> span:only-child > i:only-child) {
width: 1.9rem;
height: 1.9rem;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
}
/* Tonos suaves: el mismo lenguaje que `bg-label-*`, sin tener que cambiar las
clases que ya emiten las pantallas */
.table td .btn-primary:has(> i:only-child) {
background-color: var(--amoc-navy-100) !important;
border-color: transparent !important;
color: var(--amoc-navy-600) !important;
}
.table td .btn-danger:has(> i:only-child) {
background-color: #f8dcdb !important;
border-color: transparent !important;
color: #a33b38 !important;
}
.table td .btn-success:has(> i:only-child) {
background-color: #d8ece1 !important;
border-color: transparent !important;
color: #246140 !important;
}
.table td .btn-warning:has(> i:only-child),
.table td .btn-info:has(> i:only-child) {
background-color: var(--amoc-bronze-50) !important;
border-color: transparent !important;
color: var(--amoc-bronze-700) !important;
}
.table td .btn-secondary:has(> i:only-child) {
background-color: var(--amoc-surface-sunken) !important;
border-color: transparent !important;
color: var(--amoc-text-muted) !important;
}
.table td .btn:has(> i:only-child):hover {
filter: brightness(0.95);
}
/* --- Etiquetas de estado -------------------------------------------------
Varias tablas devuelven el estatus como texto suelto («Activo»,
«Desactivado»). No se puede reconocer desde CSS, así que se marca con la
clase que ya usan las que sí traen insignia. */
.table td > .badge {
font-weight: 600;
}
/* ============================================================================
6. Ajustes de layout heredados de la plantilla
============================================================================ */
html, body,
.layout-wrapper,
.layout-container,
.layout-page {
margin-top: 0 !important;
padding-top: 0 !important;
}
/* amocvies-admin-theme.css conserva un bloque entero de la plantilla anterior
(.layout-sidenav / .layout-content / .layout-inner) que sigue actuando sobre
el marcado actual y rompe el desplazamiento de la página:
html, body -> overflow: hidden
.layout-wrapper -> height: 100vh; overflow: hidden
.layout-container -> height: 100vh; overflow: hidden; padding-left: 250px
El desplazamiento lo hacía .layout-content, que en Frest no existe: aquí el
contenedor es .content-wrapper. Resultado: nada podía desplazarse, no salía
barra y todo lo que pasaba del alto de la ventana quedaba recortado por
debajo del pie.
Se devuelve el desplazamiento al documento, que es como funciona Frest. */
@media (min-width: 992px) {
html,
body {
height: auto !important;
min-height: 100%;
/* `visible` en los dos ejes a propósito: basta con `overflow-x: hidden`
para que el eje vertical se calcule como `auto`, y un ancestro
desplazable rompe el anclaje de la barra superior y del pie. */
overflow: visible !important;
}
.layout-wrapper,
.layout-container,
.layout-page {
height: auto !important;
min-height: 100vh !important;
overflow: visible !important;
}
.layout-container {
padding-left: 0 !important;
}
}
/* El nombre del sistema es largo y la caja de marca no tiene ancho propio: sin
esto se sale de los 260px de la barra en vez de partirse en dos renglones. */
.app-brand-link {
overflow: hidden;
}
.app-brand-text {
flex: 1 1 auto;
min-width: 0;
}
.layout-navbar-fixed .layout-wrapper:not(.layout-without-menu) .layout-page,
.layout-navbar-fixed .layout-page,
.layout-page {
padding-top: 0 !important;
margin-top: 0 !important;
}
.content-wrapper {
padding-top: 0.5rem !important;
}
/* ============================================================================
7. Pantalla de acceso
============================================================================ */
/* Rejilla: una sola columna en móvil; panel ancho + formulario angosto en
escritorio, siguiendo la proporción 9/3 del sistema anterior. */
.amoc-auth {
min-height: 100vh;
min-height: 100dvh;
display: grid;
grid-template-columns: 1fr;
background-color: var(--amoc-surface-sunken);
}
@media (min-width: 992px) {
.amoc-auth { grid-template-columns: minmax(0, 2.2fr) minmax(400px, 1fr); }
}
@media (min-width: 1400px) {
.amoc-auth { grid-template-columns: minmax(0, 3fr) minmax(440px, 1fr); }
}
/* --- Panel institucional (oculto por debajo de lg) ---------------------- */
.amoc-auth-brand {
display: none;
position: relative;
flex-direction: column;
justify-content: space-between;
padding: clamp(2.5rem, 4vw, 4.5rem);
color: #fff;
overflow: hidden;
}
@media (min-width: 992px) {
.amoc-auth-brand { display: flex; }
}
/* Remate inferior en oro y bronce institucionales */
.amoc-auth-brand::after {
content: "";
position: absolute;
inset: auto 0 0 0;
height: 6px;
background: linear-gradient(90deg, var(--amoc-gold) 0%, var(--amoc-bronze) 100%);
}
.amoc-auth-brand-content {
margin-top: auto;
margin-bottom: auto;
max-width: 40rem;
}
/* El logo debe estar privilegiado por tamaño (guía institucional, sec. X) */
/* El lockup de AMOCVIES es vertical, no horizontal como el del referente: sin
tope de alto medía 576px y empujaba toda la pantalla fuera de la ventana.
Manda la restricción que primero se cumpla, así que sigue escalando bien
tanto si el archivo es apaisado como si es vertical. */
.amoc-auth-lockup {
width: auto;
max-width: min(420px, 60%);
max-height: 32vh;
height: auto;
margin-bottom: 2.5rem;
}
/* El nombre va en blanco sobre el panel: es como está compuesta la marca.
El oro se reserva para los remates —el filo inferior y el borde del lema—,
que es donde funciona como acento sin competir con el título. */
.amoc-auth-brand h1 {
color: #fff;
font-size: clamp(2.75rem, 5vw, 4.5rem);
line-height: 1;
margin-bottom: 0.5rem;
}
.amoc-auth-tagline {
font-family: var(--amoc-font-display);
font-stretch: var(--amoc-font-display-stretch, 112%);
font-size: clamp(1rem, 1.5vw, 1.35rem);
font-weight: 500;
color: #fff;
margin-bottom: 1.25rem;
}
.amoc-auth-lead {
color: #b9cade;
max-width: 46ch;
line-height: 1.65;
margin-bottom: 0;
}
.amoc-auth-motto {
position: relative;
margin: 0;
padding-left: 1rem;
border-left: 3px solid var(--amoc-gold);
font-style: italic;
color: #93a9c0;
font-size: 0.9rem;
}
/* --- Columna del formulario -------------------------------------------- */
.amoc-auth-form {
display: flex;
align-items: center;
justify-content: center;
padding: clamp(1.5rem, 5vw, 3rem) 1.25rem;
background-color: var(--amoc-surface);
}
.amoc-auth-card {
width: 100%;
max-width: 380px;
}
/* En móvil el panel institucional no existe: la marca encabeza la tarjeta */
.amoc-auth-lockup-sm {
width: min(230px, 62%);
height: auto;
}
.amoc-auth-logo {
height: 92px;
width: auto;
}
.amoc-auth-title {
font-size: 1.5rem;
margin-bottom: 0.25rem;
text-align: center;
}
.amoc-auth-subtitle {
color: var(--amoc-text-muted);
text-align: center;
margin-bottom: 1.75rem;
}
.amoc-auth-form .input-group-text {
background-color: var(--amoc-navy-50);
color: var(--amoc-navy-500);
}
.amoc-auth-form .btn-primary {
padding-block: 0.6rem;
font-weight: 600;
}
.amoc-auth-foot {
text-align: center;
font-size: 0.78rem;
color: var(--amoc-text-muted);
line-height: 1.6;
margin-bottom: 0;
}
/* En móvil, un remate superior en oro sustituye al panel institucional */
@media (max-width: 991.98px) {
.amoc-auth-form {
border-top: 4px solid var(--amoc-gold);
}
}
/* ============================================================================
6.b Barra superior y pie fijos
Los dos se anclan con `sticky` y no con `fixed`: así se quedan dentro de
.layout-page y heredan solos el hueco que deja el menú lateral, sin tener que
calcular desplazamientos ni rehacerlos cuando el menú se pliega o desaparece
en móvil.
La barra superior ya venía anclada por la plantilla; aquí sólo se asegura el
orden de apilado para que el contenido pase por debajo.
============================================================================ */
.layout-navbar {
position: sticky !important;
top: 0;
z-index: 1030;
}
.content-footer.footer {
position: sticky;
bottom: 0;
z-index: 1020;
background-color: var(--amoc-surface) !important;
border-top: 1px solid var(--amoc-border);
}
/* El contenido va entre los dos: crece hasta empujar el pie al final, y
mientras tanto se desliza por debajo de ambos */
.layout-page > .content-wrapper {
flex-grow: 1;
}
/* Un remate dorado sobre el pie, del mismo grosor que el del menú: marca
dónde acaba el contenido ahora que la línea ya no se desplaza con él */
.content-footer.footer::before {
content: "";
position: absolute;
inset: -2px 0 auto 0;
height: 2px;
background: linear-gradient(90deg, var(--amoc-gold) 0%, var(--amoc-bronze) 100%);
}
/* En pantallas bajas el pie se lleva demasiado sitio: se suelta y vuelve a
quedar al final del documento */
@media (max-height: 520px) {
.content-footer.footer {
position: static;
}
}
/* ============================================================================
5.f Tamaños heredados de la plantilla anterior
Dynamic_artefactos emite las fotos con `ui-w-30` y `ui-w-40`, clases de la
plantilla que había antes. Frest no las define, así que las imágenes salían
a su tamaño natural —en la lista de usuarios conectados, enormes—. Se
reponen aquí en vez de tocar la librería, que las emite en varios sitios.
============================================================================ */
.ui-w-20 { width: 1.25rem; height: 1.25rem; }
.ui-w-30 { width: 1.875rem; height: 1.875rem; }
.ui-w-40 { width: 2.5rem; height: 2.5rem; }
.ui-w-60 { width: 3.75rem; height: 3.75rem; }
.ui-w-20,
.ui-w-30,
.ui-w-40,
.ui-w-60 {
flex-shrink: 0;
/* Las fotos del personal son verticales: se encuadran en vez de deformarse */
object-fit: cover;
object-position: center top;
}
/* La lista de usuarios conectados no debe crecer con el nombre ni con la
pantalla en la que esté cada quien */
.dropdown-notifications-item h6,
.dropdown-notifications-item small {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 11rem;
}
/* ============================================================================
8. Pestañas, y su integración con la tarjeta
El patrón de la interfaz de referencia: la tira de pestañas va SOBRE la
tarjeta, pegada a ella, y la pestaña activa se funde con el panel de abajo
porque comparten fondo y pierden el borde que las separa. Así el conjunto se
lee como una sola pieza y no como dos elementos apilados.
Marcado:
`.amoc-tabs` funciona igual sin `.amoc-tab-content`: en ese caso las pestañas
quedan sueltas sobre el fondo de la página, que es como las usan las
pantallas que aún no se han tocado.
============================================================================ */
.nav-tabs {
border-bottom: 1px solid var(--amoc-border);
gap: 0.125rem;
}
.nav-tabs .nav-link {
border: 1px solid transparent;
border-bottom: none;
border-radius: var(--amoc-radius-lg) var(--amoc-radius-lg) 0 0;
padding: 0.55rem 1.1rem;
font-weight: 600;
color: var(--amoc-text-muted);
background-color: transparent;
transition: color var(--amoc-transition), background-color var(--amoc-transition);
}
.nav-tabs .nav-link:hover:not(.active) {
color: var(--amoc-navy);
background-color: var(--amoc-navy-50);
border-color: transparent;
}
.nav-tabs .nav-link.active {
color: var(--amoc-navy);
background-color: var(--amoc-surface);
border-color: var(--amoc-border);
}
/* El filo de acento sobre la pestaña activa: es el mismo recurso que marca la
página seleccionada en el menú. */
.nav-tabs .nav-link.active::before {
content: "";
position: absolute;
inset: 0 0 auto 0;
height: 2px;
background-color: var(--amoc-gold);
border-radius: var(--amoc-radius-lg) var(--amoc-radius-lg) 0 0;
}
.nav-tabs .nav-link {
position: relative;
}
/* La pestaña activa se come el borde inferior de la tira para fundirse con el
panel. Sin esto queda una línea cruzando por debajo y las dos piezas se ven
separadas. */
.nav-tabs .nav-link.active::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -1px;
height: 1px;
background-color: var(--amoc-surface);
}
/* Panel unido a las pestañas: mismo fondo, esquinas sólo abajo. */
.amoc-tab-content {
background-color: var(--amoc-surface);
border: 1px solid var(--amoc-border);
border-top: none;
border-radius: 0 0 var(--amoc-radius-lg) var(--amoc-radius-lg);
box-shadow: var(--amoc-shadow-card);
padding: var(--amoc-card-spacer);
}
/* Dentro de un panel así, las tarjetas ya no necesitan su propia sombra ni su
propio borde exterior: el panel hace de marco. */
.amoc-tab-content > .card {
box-shadow: none;
border-color: var(--amoc-border);
}
.amoc-tab-content > .card:last-child {
margin-bottom: 0 !important;
}
/* Aparición del panel: corta y sin desplazamiento lateral, que en tablas anchas
provoca rebote horizontal. */
.tab-pane.fade {
transition: opacity var(--amoc-transition-slow);
}
/* Tira de pestañas que no cabe: se desplaza en horizontal en lugar de partirse
en dos renglones, y se oculta la barra de desplazamiento. */
.amoc-tabs {
flex-wrap: nowrap;
overflow-x: auto;
overflow-y: hidden;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}
.amoc-tabs::-webkit-scrollbar {
display: none;
}
.amoc-tabs .nav-item {
flex: 0 0 auto;
}
/* ============================================================================
9. Acordeón
La referencia lo usa para cuestionarios y expedientes largos: cada apartado
se abre y se cierra, y el encabezado lleva su cuenta a la derecha. La
plantilla lo trae con un azul de relleno cuando está abierto; aquí el abierto
se marca con el acento a la izquierda, igual que el elemento activo del menú,
para que el sistema de señales sea uno solo en toda la aplicación.
============================================================================ */
.accordion {
--bs-accordion-border-color: var(--amoc-border);
--bs-accordion-border-radius: var(--amoc-radius-lg);
--bs-accordion-inner-border-radius: var(--amoc-radius-lg);
--bs-accordion-btn-focus-box-shadow: var(--amoc-focus-ring);
}
.accordion-item {
border: 1px solid var(--amoc-border);
background-color: var(--amoc-surface);
margin-bottom: var(--amoc-space-2);
border-radius: var(--amoc-radius-lg);
overflow: hidden;
}
.accordion-item:last-child {
margin-bottom: 0;
}
.accordion-button {
font-family: var(--amoc-font-display);
font-stretch: var(--amoc-font-display-stretch, 112%);
font-weight: 600;
color: var(--amoc-navy);
background-color: var(--amoc-surface);
padding: 0.9rem var(--amoc-space-5);
transition: background-color var(--amoc-transition), color var(--amoc-transition);
}
.accordion-button:hover {
background-color: var(--amoc-navy-50);
}
/* Abierto: fondo tenue y filo de acento. Nada de relleno saturado, que compite
con el contenido. */
.accordion-button:not(.collapsed) {
background-color: var(--amoc-navy-50);
color: var(--amoc-navy);
box-shadow: none;
border-left: 3px solid var(--amoc-gold);
padding-left: calc(var(--amoc-space-5) - 3px);
}
.accordion-button:focus {
box-shadow: var(--amoc-focus-ring);
border-color: var(--amoc-border);
}
.accordion-body {
padding: var(--amoc-space-5);
}
/* El despliegue usa la transición larga; con la corta el salto se ve brusco en
apartados con muchas preguntas. */
.accordion-collapse.collapsing {
transition: height var(--amoc-transition-slow);
}
/* ============================================================================
10. Tarjetas, anidamiento y distribución
La referencia compone las pantallas con tres piezas: una tarjeta de cabecera
con el título y las acciones, una rejilla de tarjetas hijas dentro de otra
tarjeta, y cajas con borde dentro del cuerpo. Lo que sigue es cada una.
============================================================================ */
.card {
border: 1px solid var(--amoc-border);
border-radius: var(--amoc-radius-lg);
box-shadow: var(--amoc-shadow-card);
background-color: var(--amoc-surface);
}
.card-header {
background-color: transparent;
border-bottom: none;
padding: var(--amoc-card-spacer);
padding-bottom: var(--amoc-space-3);
}
.card-body {
padding: var(--amoc-card-spacer);
}
.card-header + .card-body {
padding-top: 0;
}
.card-title {
color: var(--amoc-navy);
margin-bottom: 0;
}
/* Cabecera con acciones a la derecha: el patrón que repite toda la referencia.
Se ofrece como clase para no tener que recordar la ristra de utilidades. */
.amoc-card-head {
display: flex;
justify-content: space-between;
align-items: flex-start;
flex-wrap: wrap;
gap: var(--amoc-space-3);
}
.amoc-card-head > :last-child {
text-align: right;
white-space: nowrap;
}
/* Bajo el título va la explicación de la pantalla, un renglón en gris. Es lo
que da la jerarquía: título en Archivo, apoyo en Raleway pequeño. */
.amoc-card-head small,
.amoc-subtitulo {
color: var(--amoc-text-muted);
font-size: 0.8125rem;
line-height: 1.45;
}
/* Tarjeta dentro de tarjeta. La hija pierde la sombra —dos sombras encajadas
ensucian el borde— y se queda con el borde y un fondo apenas hundido. */
.card .card,
.amoc-subcard {
box-shadow: none;
border: 1px solid var(--amoc-border);
background-color: var(--amoc-surface);
}
.card .card .card-header,
.card .card .card-body {
padding: var(--amoc-space-4);
}
.card .card .card-header + .card-body {
padding-top: 0;
}
/* Rejilla de tarjetas hijas de igual altura. En la referencia se consigue con
`h-100` en cada una; aquí basta poner la clase en la fila. */
.amoc-grid > [class*="col"] > .card {
height: 100%;
margin-bottom: 0;
}
.amoc-grid {
row-gap: var(--amoc-space-4);
}
/* Caja con borde dentro del cuerpo: cada pregunta, cada documento, cada renglón
editable de la referencia va en una de éstas. */
.amoc-caja {
border: 1px solid var(--amoc-border);
border-radius: var(--amoc-radius-lg);
padding: var(--amoc-space-4);
margin-bottom: var(--amoc-space-2);
transition: border-color var(--amoc-transition), box-shadow var(--amoc-transition);
}
.amoc-caja:last-child {
margin-bottom: 0;
}
.amoc-caja:hover {
border-color: var(--amoc-navy-200);
}
/* Confirmación de guardado: el borde parpadea en verde y vuelve. La referencia
la usa al contestar una pregunta, para no recargar la pantalla. */
.amoc-caja.amoc-guardado {
border-color: var(--amoc-success);
box-shadow: 0 0 0 0.15rem rgba(46, 139, 87, 0.15);
}
/* Tarjeta de cifra: número grande, rótulo debajo, icono en la esquina. */
.amoc-cifra {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: var(--amoc-space-3);
}
.amoc-cifra-numero {
font-family: var(--amoc-font-display);
font-stretch: var(--amoc-font-display-stretch, 112%);
font-weight: 700;
font-size: 1.75rem;
line-height: 1.1;
color: var(--amoc-navy);
}
.amoc-cifra-rotulo {
color: var(--amoc-text-muted);
font-size: 0.8125rem;
}
.amoc-cifra-icono {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.5rem;
height: 2.5rem;
border-radius: var(--amoc-radius-lg);
font-size: 1.35rem;
flex-shrink: 0;
}
/* Una tarjeta que es enlace: se levanta al pasar el cursor. */
a.card {
color: inherit;
text-decoration: none;
transition: box-shadow var(--amoc-transition), transform var(--amoc-transition);
}
a.card:hover {
box-shadow: var(--amoc-shadow-raised);
transform: translateY(-2px);
}
/* ============================================================================
11. Separadores y jerarquía dentro de un formulario largo
La referencia parte los formularios con un encabezado de bloque en versalitas
y un filo de acento. Ya existe como .amoc-form-section más arriba; aquí se le
añade la variante en dos columnas y la separación entre bloques.
============================================================================ */
.amoc-bloque + .amoc-bloque {
margin-top: var(--amoc-space-6);
}
.amoc-dato-etiqueta {
display: block;
font-size: 0.75rem;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--amoc-text-muted);
margin-bottom: 0.15rem;
}
/* ============================================================================
12. Estados, foco y transiciones
Un solo anillo de foco para toda la aplicación, y una sola curva de
aceleración. Antes había tres: la de la plantilla, la de una hoja de parches
y la de los campos.
============================================================================ */
.btn,
.form-control,
.form-select,
.nav-link,
.page-link,
.list-group-item-action,
.accordion-button {
transition:
color var(--amoc-transition),
background-color var(--amoc-transition),
border-color var(--amoc-transition),
box-shadow var(--amoc-transition);
}
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
border-color: var(--amoc-orange);
box-shadow: var(--amoc-focus-ring);
}
.btn:focus-visible,
.nav-link:focus-visible,
.page-link:focus-visible,
a:focus-visible {
outline: none;
box-shadow: var(--amoc-focus-ring);
}
.form-check-input:checked {
background-color: var(--amoc-orange);
border-color: var(--amoc-orange);
}
/* Radios y casillas con forma de botón: el patrón con el que la referencia
pinta «Sí / Tal vez / No». */
.btn-check:checked + .btn-outline-primary {
background-color: var(--amoc-orange);
border-color: var(--amoc-orange);
color: #fff;
}
/* Barra de avance: fina, con el acento. */
.progress {
background-color: var(--amoc-navy-50);
border-radius: var(--amoc-radius-pill);
}
.progress-bar {
transition: width var(--amoc-transition-slow);
}
.progress-bar.bg-primary {
background-color: var(--amoc-orange) !important;
}
/* Lista con elementos seleccionables (equipos, personas, expedientes). */
.list-group-item-action:hover {
background-color: var(--amoc-navy-50);
}
.list-group-item.active {
background-color: var(--amoc-navy);
border-color: var(--amoc-navy);
}
/* Quien pide menos movimiento no debe recibir ninguno. */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
a.card:hover {
transform: none;
}
}
/* ============================================================================
13. Desplazamiento
Sólo el contenido central se desplaza; la barra superior y el menú se quedan.
Las tablas anchas se desplazan dentro de su propio marco y nunca empujan la
página a lo ancho, que es lo que rompe la maquetación en pantallas chicas.
============================================================================ */
html {
scroll-behavior: smooth;
}
.table-responsive {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
/* Un contenedor que se desplaza por dentro, para listas largas dentro de una
tarjeta (perfiles, personas, resultados de búsqueda). */
.amoc-scroll {
overflow-y: auto;
overscroll-behavior: contain;
scrollbar-width: thin;
scrollbar-color: var(--amoc-navy-200) transparent;
}
.amoc-scroll::-webkit-scrollbar {
width: 8px;
height: 8px;
}
.amoc-scroll::-webkit-scrollbar-thumb {
background-color: var(--amoc-navy-200);
border-radius: var(--amoc-radius-pill);
}
.amoc-scroll::-webkit-scrollbar-track {
background: transparent;
}
/* ============================================================================
14. Comportamiento responsive
Los tres cortes de la plantilla. Lo que cambia en cada uno es la densidad, no
la estructura: la referencia conserva las mismas piezas en móvil y sólo las
apila.
============================================================================ */
@media (max-width: 991.98px) {
:root {
--amoc-card-spacer: 1rem;
}
.amoc-card-head {
gap: var(--amoc-space-2);
}
.amoc-card-head > :last-child {
text-align: left;
}
.amoc-tab-content {
padding: var(--amoc-space-4);
}
}
@media (max-width: 767.98px) {
.amoc-cifra-numero {
font-size: 1.5rem;
}
.nav-tabs .nav-link {
padding: 0.5rem 0.75rem;
font-size: 0.875rem;
}
.accordion-button {
padding: 0.75rem var(--amoc-space-4);
}
.accordion-body {
padding: var(--amoc-space-4);
}
/* En móvil las acciones de una cabecera ocupan el ancho y se reparten. */
.amoc-card-head > :last-child {
width: 100%;
display: flex;
gap: var(--amoc-space-2);
}
}
@media (max-width: 575.98px) {
.amoc-caja {
padding: var(--amoc-space-3);
}
}
/* ============================================================================
15. Alias de Bootstrap 4
Vienen de amocvies-frest-theme.css, que se retira. Las vistas heredadas usan
la nomenclatura de Bootstrap 4 (`ml-`, `mr-`, `text-left`); mientras existan,
estos alias evitan tener que tocarlas. Cuando no quede ninguna, se borra el
bloque entero.
============================================================================ */
.ml-auto { margin-left: auto !important; }
.mr-auto { margin-right: auto !important; }
.ml-1 { margin-left: var(--amoc-space-1) !important; }
.ml-2 { margin-left: var(--amoc-space-2) !important; }
.ml-3 { margin-left: var(--amoc-space-4) !important; }
.ml-4 { margin-left: 1.5rem !important; }
.mr-1 { margin-right: var(--amoc-space-1) !important; }
.mr-2 { margin-right: var(--amoc-space-2) !important; }
.mr-3 { margin-right: var(--amoc-space-4) !important; }
.mr-4 { margin-right: 1.5rem !important; }
.pl-1 { padding-left: var(--amoc-space-1) !important; }
.pl-2 { padding-left: var(--amoc-space-2) !important; }
.pl-3 { padding-left: var(--amoc-space-4) !important; }
.pr-1 { padding-right: var(--amoc-space-1) !important; }
.pr-2 { padding-right: var(--amoc-space-2) !important; }
.pr-3 { padding-right: var(--amoc-space-4) !important; }
.text-left { text-align: left !important; }
.text-right { text-align: right !important; }
.input-group-prepend,
.input-group-append {
display: flex;
}
.input-group > .input-group-prepend > .input-group-text,
.input-group > .input-group-prepend > .btn {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.input-group > .input-group-append > .input-group-text,
.input-group > .input-group-append > .btn {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.modal-header .close {
padding: var(--amoc-space-2);
margin: calc(var(--amoc-space-2) * -1) calc(var(--amoc-space-2) * -1)
calc(var(--amoc-space-2) * -1) auto;
background: transparent;
border: 0;
font-size: 1.25rem;
}
.btn-xs {
--bs-btn-padding-y: 0.15rem;
--bs-btn-padding-x: 0.45rem;
--bs-btn-font-size: 0.75rem;
--bs-btn-border-radius: var(--amoc-radius-sm);
}
/* ============================================================================
16. Piezas que venian de amocvies-frest-theme.css
Esa hoja se retira. Traia estas siete clases y nada mas que no estuviera ya
cubierto; se reescriben aqui contra los tokens, que es lo que les faltaba:
alli el radio, el borde y los colores iban en literales.
============================================================================ */
/* Cabecera del menu: logotipo grande centrado sobre el nombre. */
.amocvies-frest-brand {
min-height: 86px;
justify-content: center;
}
.amocvies-frest-brand .app-brand-link {
flex-direction: column;
gap: 0.45rem;
overflow: visible;
}
.amocvies-frest-brand .app-brand-logo img {
width: 64px;
height: 64px;
object-fit: contain;
}
/* Con el menu plegado queda solo el logotipo. */
.layout-menu-collapsed .amocvies-frest-brand .app-brand-text {
display: none !important;
}
.layout-menu-collapsed .amocvies-frest-brand .app-brand-link {
align-items: center;
}
/* Buscador de la barra superior. */
.navbar-search-wrapper {
display: flex;
align-items: center;
min-width: 260px;
padding: var(--amoc-space-1) var(--amoc-space-3);
background-color: var(--amoc-surface);
border: 1px solid var(--amoc-border);
border-radius: var(--amoc-radius-pill);
transition: border-color var(--amoc-transition), box-shadow var(--amoc-transition);
}
.navbar-search-wrapper:focus-within {
border-color: var(--amoc-orange);
box-shadow: var(--amoc-focus-ring);
}
/* Retrato de la barra superior. */
.amocvies-navbar-avatar {
width: 40px;
height: 40px;
}
.amocvies-navbar-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
}
/* Distintivos heredados de Bootstrap 4. */
.badge-info {
background-color: var(--amoc-navy) !important;
color: #fff;
}
.badge-danger {
background-color: var(--amoc-danger) !important;
color: #fff;
}
@media (max-width: 991.98px) {
.navbar-search-wrapper {
min-width: 170px;
}
}
/* ---------------------------------------------------------------------------
Requisitos de la contraseña (Administración → Usuarios)
Se marcan mientras se escribe. El color lo pone el guion con las clases de
Bootstrap; aquí sólo van el ritmo y el tamaño, para que los seis renglones
se lean de un vistazo y no compitan con los campos.
--------------------------------------------------------------------------- */
.amoc-requisitos {
background: var(--amoc-superficie-suave, #f7f8fa);
border-color: var(--amoc-borde, #e5e9ed) !important;
}
.amoc-requisitos .req {
display: inline-flex;
align-items: center;
gap: .35rem;
font-size: .8125rem;
line-height: 1.6;
transition: color .15s ease;
}
.amoc-requisitos .req i {
font-size: 1rem;
flex: 0 0 auto;
}
/* ---------------------------------------------------------------------------
Canales de acceso y perfiles por módulo (Administración → Usuarios)
--------------------------------------------------------------------------- */
.amoc-canal {
display: flex;
align-items: center;
gap: .6rem;
width: 100%;
margin: 0;
padding: .7rem .9rem;
border: 1px solid var(--amoc-borde, #e5e9ed);
border-radius: .5rem;
cursor: pointer;
transition: border-color .15s ease, background-color .15s ease;
}
.amoc-canal:hover { border-color: var(--amoc-navy, #0a263d); }
/* Marcado: se nota sin depender del color de la casilla, que en algunos
navegadores se pierde a la vista dentro de un recuadro claro */
.amoc-canal.activo {
border-color: var(--amoc-navy, #0a263d);
background: var(--amoc-superficie-suave, #f7f8fa);
}
.amoc-canal > i {
font-size: 1.4rem;
color: var(--amoc-navy, #0a263d);
flex: 0 0 auto;
}
.amoc-canal span { font-weight: 600; line-height: 1.25; }
.amoc-canal span small { font-weight: 400; font-size: .75rem; color: #6b7a8c; }
.amoc-canal .form-check-input { margin: 0; flex: 0 0 auto; }
/* --- perfiles agrupados por módulo --- */
.amoc-perfiles-titulo {
font-weight: 600;
color: var(--amoc-navy, #0a263d);
border-bottom: 1px solid var(--amoc-borde, #e5e9ed);
padding-bottom: .35rem;
margin: 1.25rem 0 .75rem;
}
.amoc-perfiles-lista .js-grupo-perfil:first-child .amoc-perfiles-titulo { margin-top: 0; }
.amoc-perfiles-lista .form-check {
padding: .5rem .75rem .5rem 2.1rem;
border: 1px solid transparent;
border-radius: .4rem;
transition: background-color .15s ease, border-color .15s ease;
}
.amoc-perfiles-lista .form-check:hover { background: var(--amoc-superficie-suave, #f7f8fa); }
.amoc-perfiles-lista .form-check.elegido {
border-color: var(--amoc-navy, #0a263d);
background: var(--amoc-superficie-suave, #f7f8fa);
}
.amoc-perfiles-lista .form-check-label { cursor: pointer; }
/* ---------------------------------------------------------------------------
select2 con tema «bootstrap4»
Seis pantallas lo piden —Mesa, Comisiones, Usuarios, Asambleas— pero ese
tema NO viene en la hoja de select2 que carga el proyecto: sólo está
`--default`. El resultado es que select2 pone la clase
`select2-container--bootstrap4`, para la que no hay ninguna regla, y el
control se queda sin alto, sin borde y sin relleno: un renglón de texto
suelto donde debería haber un campo.
En lugar de quitarle el tema a las seis —varias tienen parches propios
colgados de esa clase— se define aquí, una vez, para que se vea igual que
cualquier otro campo del formulario.
--------------------------------------------------------------------------- */
.select2-container--bootstrap4 .select2-selection--single {
height: calc(1.5em + .75rem + 2px);
padding: .375rem .75rem;
background-color: #fff;
border: 1px solid var(--amoc-borde, #d9dee8);
border-radius: .375rem;
}
.select2-container--bootstrap4 .select2-selection--single .select2-selection__rendered {
padding: 0;
line-height: 1.5;
color: #384551;
}
.select2-container--bootstrap4 .select2-selection--single .select2-selection__placeholder {
color: #8a94a6;
}
.select2-container--bootstrap4 .select2-selection--single .select2-selection__arrow {
height: calc(1.5em + .75rem);
right: .5rem;
}
.select2-container--bootstrap4.select2-container--focus .select2-selection--single,
.select2-container--bootstrap4.select2-container--open .select2-selection--single {
border-color: var(--amoc-navy, #0a263d);
outline: 0;
}
.select2-container--bootstrap4 .select2-selection--multiple {
min-height: calc(1.5em + .75rem + 2px);
padding: .25rem .5rem;
border: 1px solid var(--amoc-borde, #d9dee8);
border-radius: .375rem;
}
/* La geometría es la del tema por omisión de select2: los elementos de dentro
se colocan con `float`, así que ponerlos en flex los reparte en tres
renglones y la caja crece al doble. Aquí sólo cambian los colores. */
.select2-container--bootstrap4 .select2-selection--multiple .select2-selection__rendered {
box-sizing: border-box;
display: block;
list-style: none;
margin: 0;
padding: 0;
width: 100%;
}
.select2-container--bootstrap4 .select2-selection--multiple .select2-selection__rendered li {
list-style: none;
}
.select2-container--bootstrap4 .select2-selection--multiple .select2-selection__placeholder {
float: left;
color: #8a94a6;
}
.select2-container--bootstrap4 .select2-selection--multiple .select2-selection__clear {
float: right;
margin-right: .3rem;
cursor: pointer;
font-weight: 500;
color: #8a94a6;
}
.select2-container--bootstrap4 .select2-selection--multiple .select2-search--inline {
float: left;
line-height: 1.5rem;
}
.select2-container--bootstrap4 .select2-selection--multiple .select2-search--inline .select2-search__field {
margin: 0;
height: 1.5rem;
font-size: .875rem;
}
/* Cada valor elegido */
.select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice {
position: relative;
float: left;
margin: 0 .25rem .15rem 0;
padding: 0 .5rem 0 1.2rem;
background: var(--amoc-navy, #0a263d);
border: 0;
border-radius: .1875rem;
color: #fff;
font-size: .8125rem;
line-height: 1.5rem;
cursor: default;
}
.select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice__remove {
position: absolute;
left: .35rem;
display: inline-block;
border: 0;
background: transparent;
padding: 0;
color: #fff;
cursor: pointer;
font-weight: 500;
opacity: .65;
}
.select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice__remove:hover {
opacity: 1;
color: #fff;
}
.select2-container--bootstrap4 .select2-dropdown {
border-color: var(--amoc-navy, #0a263d);
max-width: 100%;
}
.select2-container--bootstrap4 .select2-results__option--highlighted[aria-selected] {
background-color: var(--amoc-navy, #0a263d);
color: #fff;
}
/* ---------------------------------------------------------------------------
select2 dentro de un input-group
select2 se monta con `width: 100%`, y en Bootstrap 5 un elemento del grupo
con ancho completo se lleva el renglón entero: el rótulo pegado —«Asignación»,
«Departamento(s)»— acaba encima del campo en vez de a su lado.
La receta de Bootstrap para un elemento que debe ocupar lo que sobre es
`flex: 1 1 auto` con un ancho base mínimo; el `!important` es necesario
porque select2 escribe el 100 % en el atributo `style`.
--------------------------------------------------------------------------- */
.input-group > .select2-container {
flex: 1 1 auto;
width: 1% !important;
}
/* Y las esquinas se unen con el rótulo, como en cualquier otro campo */
.input-group > .select2-container .select2-selection {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
height: 100%;
}
/* ===========================================================================
Directorio de personas (RUAA → Reportes)
---------------------------------------------------------------------------
Cada persona es una ficha con retrato y contacto, no un renglón de tabla:
el directorio se consulta institución por institución y se lee de un
vistazo, no se ordena por columnas.
=========================================================================== */
.dir-grupo-titulo {
display: flex;
align-items: baseline;
gap: .5rem;
padding: .45rem .75rem;
margin-bottom: .75rem;
background: var(--amoc-gris-suave, #f6f6f7);
border-left: 3px solid var(--amoc-naranja, #ff6600);
border-radius: .25rem;
}
.dir-grupo-sigla { font-weight: 700; font-size: 1.05rem; }
.dir-grupo-nombre { color: #6c757d; font-size: .9rem; }
.dir-ficha {
display: flex;
align-items: flex-start;
gap: 1rem;
padding: .75rem .75rem .75rem 1.25rem;
border-bottom: 1px solid #eceef1;
}
.dir-ficha:last-child { border-bottom: 0; }
.dir-ficha:hover { background: #fafbfc; }
.dir-retrato,
.dir-sin-foto {
flex: 0 0 auto;
width: 64px;
height: 64px;
border-radius: .35rem;
}
.dir-retrato {
object-fit: cover;
border: 1px solid #dee2e6;
background: #f7f7f7;
}
.dir-sin-foto {
display: flex;
align-items: center;
justify-content: center;
border: 1px dashed #ced4da;
background: #f7f7f7;
color: #9aa0a6;
font-size: 1.25rem;
font-weight: 700;
}
/* Los datos ocupan lo que sobre; el contacto se queda con un ancho fijo para
que las columnas se alineen entre fichas */
.dir-datos { flex: 1 1 auto; min-width: 0; }
.dir-contacto { flex: 0 0 22rem; font-size: .875rem; word-break: break-word; }
.dir-nombre { font-weight: 600; }
.dir-cargo { color: #6c757d; font-size: .875rem; }
.dir-amocvies { margin-top: .35rem; font-size: .85rem; color: #7a4e2b; }
@media (max-width: 991.98px) {
/* En pantalla estrecha el contacto pasa debajo en vez de estrujarse */
.dir-ficha { flex-wrap: wrap; }
.dir-contacto { flex: 1 1 100%; padding-left: 5rem; }
}