/* ==========================================================================
TEMA DIEEF - identidad visual de la aplicacion (2026-10-07)
--------------------------------------------------------------------------
Se carga DESPUES de tailwind.css y styles.css y solo ajusta apariencia:
colores de marca, botones, menu lateral, cabecera, tablas y adaptacion a
movil/tablet. No cambia estructura ni comportamiento. Para volver al
diseno anterior basta con quitar el de este archivo en base.html.
========================================================================== */
:root {
--dieef-navy: #003363;
--dieef-navy-dark: #00264d;
--dieef-navy-light: #00508a;
--dieef-gold: #f5b700;
--dieef-gold-dark: #c99600;
--dieef-ink: #0f2a47;
--dieef-focus: 0 0 0 3px rgba(245, 183, 0, 0.55);
}
/* ---------- Menu lateral ---------- */
#sidebar {
background: linear-gradient(180deg, #003c73 0%, var(--dieef-navy) 42%, var(--dieef-navy-dark) 100%);
box-shadow: 4px 0 18px rgba(0, 38, 77, 0.18);
}
/* Filo dorado a la derecha del menu: firma visual de la marca */
#sidebar::after {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 3px;
background: linear-gradient(180deg, var(--dieef-gold) 0%, rgba(245, 183, 0, 0.35) 55%, rgba(245, 183, 0, 0) 100%);
pointer-events: none;
}
/* Estilo de los items del menu: definido abajo (rediseño 2026-10-22). */
#sidebar nav a.flex:focus-visible {
outline: none;
box-shadow: var(--dieef-focus);
}
/* Rotulo "ADMINISTRACION": mas legible sobre el azul */
#sidebar nav p.text-gray-500 { color: #8fb0d6 !important; letter-spacing: 0.08em; }
/* ---------- Cabecera superior ---------- */
.topbar {
border-bottom: 0;
box-shadow: 0 1px 0 #e3e8ef, 0 4px 14px rgba(0, 51, 99, 0.05);
}
/* Linea de marca bajo la cabecera: azul -> dorado */
.topbar::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -2px;
height: 2px;
background: linear-gradient(90deg, var(--dieef-navy) 0%, var(--dieef-navy-light) 55%, var(--dieef-gold) 100%);
opacity: 0.9;
pointer-events: none;
}
.topbar-avatar {
background: linear-gradient(135deg, var(--dieef-navy), var(--dieef-navy-light)) !important;
box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(245, 183, 0, 0.7);
}
/* ---------- Titulo de cada pagina ---------- */
.page-title {
display: flex;
align-items: center;
gap: 0.6rem;
font-size: 1.375rem !important;
font-weight: 700 !important;
color: var(--dieef-ink) !important;
letter-spacing: -0.01em;
line-height: 1.25;
margin-bottom: 1.25rem !important;
}
.page-title::before {
content: "";
flex-shrink: 0;
width: 5px;
height: 1.4em;
border-radius: 3px;
background: linear-gradient(180deg, var(--dieef-gold) 0%, var(--dieef-gold-dark) 100%);
}
/* ---------- Botones: color solido, sombra y relieve al pasar ---------- */
/* Botones de Tailwind usados en las plantillas (azul, verde, rojo, ambar) */
.page-content :is(a, button).bg-\[\#003363\],
.page-content .btn-page--brand,
.form-btn-submit,
.empty-state-cta {
background: linear-gradient(135deg, var(--dieef-navy) 0%, var(--dieef-navy-light) 100%) !important;
color: #fff !important;
box-shadow: 0 2px 6px rgba(0, 51, 99, 0.28);
}
.page-content :is(a, button).bg-green-600,
.page-content :is(a, button).bg-emerald-600,
.page-content .btn-page--success {
background: linear-gradient(135deg, #047857 0%, #065f46 100%) !important;
color: #fff !important;
box-shadow: 0 2px 6px rgba(5, 150, 105, 0.28);
}
.page-content :is(a, button).bg-red-600,
.page-content :is(a, button).bg-red-500,
.page-content .btn-page--danger {
background: linear-gradient(135deg, #b91c1c 0%, #dc2626 100%) !important;
color: #fff !important;
box-shadow: 0 2px 6px rgba(220, 38, 38, 0.28);
}
.page-content :is(a, button).bg-amber-500 {
background: linear-gradient(135deg, #b45309 0%, #92400e 100%) !important;
color: #fff !important;
box-shadow: 0 2px 6px rgba(217, 119, 6, 0.28);
}
.page-content :is(a, button):is(.bg-\[\#003363\], .bg-green-600, .bg-emerald-600, .bg-red-600, .bg-red-500, .bg-amber-500),
.page-content .btn-page,
.form-btn,
.empty-state-cta {
font-weight: 600;
transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease !important;
}
.page-content :is(a, button):is(.bg-\[\#003363\], .bg-green-600, .bg-emerald-600, .bg-red-600, .bg-red-500, .bg-amber-500):hover,
.page-content .btn-page:hover,
.form-btn-submit:hover,
.empty-state-cta:hover {
transform: translateY(-1px);
filter: brightness(1.07) saturate(1.05);
box-shadow: 0 6px 16px rgba(0, 38, 77, 0.22);
}
.page-content :is(a, button):is(.bg-\[\#003363\], .bg-green-600, .bg-emerald-600, .bg-red-600, .bg-red-500, .bg-amber-500):active,
.page-content .btn-page:active,
.form-btn:active {
transform: translateY(0);
filter: brightness(0.97);
}
/* Iconos de .form-btn con tamano fijo: sin esto el SVG crecia y partia
el texto del boton en dos lineas (p. ej. "Ver Auditoria" en Reportes). */
.form-btn { white-space: nowrap; }
.form-btn svg { width: 15px; height: 15px; flex-shrink: 0; }
/* Botones secundarios (gris): borde visible para que no se pierdan */
.page-content .btn-page--neutral,
.form-btn-cancel {
background: #fff !important;
color: #334155 !important;
border: 1px solid #cbd5e1 !important;
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}
.page-content .btn-page--neutral:hover,
.form-btn-cancel:hover {
background: #f1f5f9 !important;
border-color: #94a3b8 !important;
color: #0f172a !important;
}
/* Foco de teclado: anillo dorado, visible sobre cualquier color */
.page-content :is(a, button, input, select, textarea):focus-visible,
.topbar :is(a, button):focus-visible {
outline: none;
box-shadow: var(--dieef-focus) !important;
}
/* ---------- Iconos de accion (ver / editar / eliminar / QR) ---------- */
/* Antes eran pastel casi sin contraste; ahora llevan borde y color firme,
y al pasar el mouse se rellenan con el color de la accion. */
.action-icon,
.action-icon-label,
.card-action,
.action-btn {
border: 1px solid transparent;
transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease !important;
}
.action-icon.view, .action-icon-label.view, .card-action.view, .action-btn.view {
background: #e3eef9 !important; color: var(--dieef-navy) !important; border-color: #b6d0ea !important;
}
.action-icon.edit, .action-icon-label.edit, .card-action.edit, .action-btn.edit {
background: #fef3c7 !important; color: #92400e !important; border-color: #fcd34d !important;
}
.action-icon.delete, .action-icon-label.delete, .card-action.delete, .action-btn.delete,
.action-btn.deactivate {
background: #fee2e2 !important; color: #b91c1c !important; border-color: #fca5a5 !important;
}
.card-action.download, .action-btn.download, .action-btn.activate, .card-action.complete {
background: #dcfce7 !important; color: #047857 !important; border-color: #86efac !important;
}
.action-icon.qr, .action-icon-label.qr {
background: var(--dieef-navy) !important; color: #fff !important; border-color: var(--dieef-navy) !important;
}
.action-icon.view:hover, .action-icon-label.view:hover, .card-action.view:hover, .action-btn.view:hover {
background: var(--dieef-navy) !important; color: #fff !important; border-color: var(--dieef-navy) !important;
}
.action-icon.edit:hover, .action-icon-label.edit:hover, .card-action.edit:hover, .action-btn.edit:hover {
background: #d97706 !important; color: #fff !important; border-color: #d97706 !important;
}
.action-icon.delete:hover, .action-icon-label.delete:hover, .card-action.delete:hover, .action-btn.delete:hover,
.action-btn.deactivate:hover {
background: #dc2626 !important; color: #fff !important; border-color: #dc2626 !important;
}
.card-action.download:hover, .action-btn.download:hover, .action-btn.activate:hover, .card-action.complete:hover {
background: #059669 !important; color: #fff !important; border-color: #059669 !important;
}
.action-icon.qr:hover, .action-icon-label.qr:hover {
background: var(--dieef-gold) !important; color: var(--dieef-navy-dark) !important; border-color: var(--dieef-gold) !important;
}
.action-icon:hover, .card-action:hover, .action-btn:hover {
transform: translateY(-1px);
box-shadow: 0 4px 10px rgba(15, 23, 42, 0.15);
}
/* ---------- Tablas ---------- */
.page-content table th {
background: #eef3f9 !important;
color: #1e3a5f !important;
font-weight: 700 !important;
letter-spacing: 0.05em;
}
.page-content table tr:has(> th) {
background: #eef3f9 !important;
border-bottom: 2px solid #d6e2ef !important;
}
.page-content table tbody tr:hover {
background: #f4f8fd !important;
}
/* Cedulas y codigos: nunca partidos en dos lineas */
.page-content td .font-mono { white-space: nowrap; }
/* ---------- Tarjetas e indicadores ---------- */
.statcard {
border-color: #e3e8ef !important;
box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05), 0 6px 18px rgba(0, 51, 99, 0.04);
}
.statcard-value { color: var(--dieef-ink); }
/* ==========================================================================
AJUSTES FINOS DEL PANEL (2026-10-08)
========================================================================== */
/* 1) Indicadores del Dashboard: misma altura, misma alineacion y el mismo
contenedor de icono en todas las tarjetas (incluida "Usuarios
conectados", que no tiene .statcard-head). */
#stats-grid { grid-auto-rows: 1fr; align-items: stretch; }
#stats-grid .statcard {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
gap: 1rem !important;
height: 100% !important;
min-height: 96px !important;
padding: 1rem 1.25rem !important;
border-radius: 0.9rem !important;
}
#stats-grid .statcard .statcard-head { margin: 0 !important; display: flex; align-items: center; }
#stats-grid .statcard .statcard-icon {
width: 2.75rem !important;
height: 2.75rem !important;
min-width: 2.75rem;
padding: 0 !important;
border-radius: 0.75rem !important;
}
#stats-grid .statcard .statcard-icon svg { width: 1.3rem !important; height: 1.3rem !important; }
#stats-grid .statcard .statcard-content { justify-content: center; gap: 0.2rem; min-width: 0; }
#stats-grid .statcard .statcard-value { font-size: 1.5rem; line-height: 1.1; }
#stats-grid .statcard .statcard-label {
font-size: 0.8rem;
color: #475569;
/* Sin "..." : "Usuarios conectados" se cortaba junto a la etiqueta EN VIVO */
white-space: normal;
overflow: visible;
line-height: 1.25;
}
/* 3) Estado vacio de Tareas: mismo ritmo de espaciado que los demas paneles
(antes sumaba tres rellenos y quedaba un hueco alto) y texto con
contraste suficiente (el gris claro se perdia). */
.dash-empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.4rem;
padding: 1.5rem 1rem;
text-align: center;
}
.dash-empty svg { width: 2.5rem; height: 2.5rem; color: #94a3b8; margin-bottom: 0.25rem; }
.dash-empty p { font-size: 0.875rem; color: #475569; font-weight: 500; margin: 0; }
.dash-empty a { font-size: 0.8rem; font-weight: 600; color: var(--dieef-navy); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(0, 51, 99, 0.3); }
.dash-empty a:hover { text-decoration-color: var(--dieef-navy); }
/* 4) Menu lateral: opciones mas compactas y cabecera (logo, nombre, rol)
centrada sobre un mismo eje. */
#sidebar nav { padding-top: 0.75rem !important; padding-bottom: 0.75rem !important; }
#sidebar nav > * + * { margin-top: 0.15rem !important; }
#sidebar nav a.flex { padding-top: 0.55rem !important; padding-bottom: 0.55rem !important; }
#sidebar > div:first-child {
display: flex;
flex-direction: column;
align-items: center;
padding: 1rem 1rem 0.9rem !important;
}
#sidebar > div:first-child > div:first-child { margin-bottom: 0.6rem !important; width: 100%; }
#sidebar > div:first-child > p { line-height: 1.25; margin: 0; }
#sidebar > div:first-child > span {
display: inline-flex;
align-items: center;
justify-content: center;
margin-top: 0.4rem !important;
padding: 0.15rem 0.75rem !important;
font-weight: 600;
letter-spacing: 0.02em;
}
/* 5) Cabecera: mas aire arriba y abajo, y busqueda, campana y avatar con la
misma altura (40px) centrados en el mismo eje. */
.topbar { height: 68px !important; padding-top: 0.25rem !important; }
.topbar-right { align-items: center; gap: 0.75rem !important; }
.topbar-search-btn { height: 40px !important; padding: 0 0.85rem !important; border-radius: 0.65rem !important; }
.topbar-bell { height: 40px !important; width: 40px !important; border-radius: 0.65rem !important; }
.topbar-user-trigger { display: inline-flex; align-items: center; justify-content: center; height: 40px; width: 40px; }
.topbar-avatar { height: 36px !important; width: 36px !important; }
/* ==========================================================================
TABLET (641px - 1023px)
========================================================================== */
@media (max-width: 1023px) {
.page-title { font-size: 1.25rem !important; }
}
/* ==========================================================================
MOVIL (hasta 640px)
========================================================================== */
@media (max-width: 640px) {
.page-title { font-size: 1.15rem !important; margin-bottom: 1rem !important; }
/* Cabecera movil: hamburguesa + botones sin que nada se corte */
.topbar { height: 60px !important; padding: 0 0.75rem !important; gap: 0.5rem !important; }
.topbar-right { gap: 1rem !important; }
/* Busqueda en movil: boton cuadrado de 40px con el icono a tamano normal */
.topbar-search-btn { width: 40px; padding: 0 !important; justify-content: center; }
.topbar-search-btn svg { width: 18px !important; height: 18px !important; flex-shrink: 0; }
/* La ruta "Inicio" quedaba aplastada en movil y el titulo de la pagina ya
indica donde se esta. */
.topbar-breadcrumb { display: none !important; }
.topbar-online { padding: 0.15rem 0.5rem !important; font-size: 0.7rem !important; white-space: nowrap; }
/* Dashboard: indicadores en 2 columnas y compactos (antes 1 por fila,
130px de alto y casi vacios). El ultimo, si queda solo, ocupa el ancho. */
#stats-grid {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 0.625rem !important;
margin-bottom: 1.25rem !important;
}
#stats-grid .statcard {
min-height: 0 !important;
padding: 0.7rem 0.75rem !important;
gap: 0.6rem !important;
}
#stats-grid > .statcard:last-child:nth-child(odd) { grid-column: 1 / -1; }
#stats-grid .statcard .statcard-icon { width: 2.1rem !important; height: 2.1rem !important; }
#stats-grid .statcard .statcard-value { font-size: 1.2rem !important; line-height: 1.2; }
#stats-grid .statcard .statcard-label { font-size: 0.72rem !important; line-height: 1.2; }
/* Personal en movil: los botones bajan a su propia fila y el nombre y
la cedula se leen completos (antes se cortaban con "..."). */
#mobile-cards-personal .mobile-card-personal > .flex { flex-wrap: wrap; }
#mobile-cards-personal .mobile-card-personal > .flex > .flex-1 { flex-basis: 100%; }
#mobile-cards-personal .mobile-card-personal .truncate { white-space: normal; overflow: visible; }
#mobile-cards-personal .mobile-card-personal > .flex > .flex-shrink-0:last-child {
width: 100%;
justify-content: flex-end;
padding-top: 0.6rem;
margin-top: 0.15rem;
border-top: 1px solid #eef2f7;
}
}
/* Telefonos pequenos: el contador "en linea" se oculta para dar aire a la
cabecera (sigue visible en el Dashboard como "Usuarios conectados"). */
@media (max-width: 400px) {
.topbar-online-word { display: none !important; }
.topbar-online { padding: 0.15rem 0.45rem !important; }
}
/* ---------- Cabecera en azul institucional ---------- */
.topbar {
background-color: var(--dieef-navy) !important;
-webkit-backdrop-filter: none;
backdrop-filter: none;
border-bottom: 0 !important;
box-shadow: 0 4px 14px rgba(0, 51, 99, 0.18);
}
.topbar-breadcrumb { color: rgba(255, 255, 255, 0.85); }
.topbar .breadcrumb-link:not(.breadcrumb-home-link) { color: #ffffff; }
.topbar .breadcrumb-link:not(.breadcrumb-home-link):hover { background: rgba(255, 255, 255, 0.14); color: #ffffff; }
.topbar .breadcrumb-home-link:hover { background: #ffffff; border-color: #ffffff; color: var(--dieef-navy); }
/* ---------- Botones de la cabecera: estilo unico (translucido con borde) ---------- */
.topbar #sidebarToggle,
.topbar .topbar-search-btn,
.topbar .topbar-bell,
.topbar .topbar-user-trigger {
background: rgba(255, 255, 255, 0.12) !important;
border: 1px solid rgba(255, 255, 255, 0.28) !important;
box-shadow: none !important;
color: #ffffff !important;
border-radius: 0.65rem !important;
}
.topbar #sidebarToggle:hover,
.topbar .topbar-search-btn:hover,
.topbar .topbar-bell:hover,
.topbar .topbar-user-trigger:hover {
background: rgba(255, 255, 255, 0.22) !important;
color: #ffffff !important;
}
.topbar #sidebarToggle svg,
.topbar #hamburgerIcon,
.topbar #closeIcon,
.topbar .topbar-search-btn svg,
.topbar .topbar-bell svg {
color: #ffffff !important;
stroke: currentColor;
}
.topbar .topbar-search-label { color: rgba(255, 255, 255, 0.85) !important; }
.topbar .topbar-kbd {
background: rgba(255, 255, 255, 0.14) !important;
border: 1px solid rgba(255, 255, 255, 0.28) !important;
color: #ffffff !important;
}
.topbar .topbar-online {
background: rgba(255, 255, 255, 0.12) !important;
border: 1px solid rgba(255, 255, 255, 0.28) !important;
color: #ffffff !important;
}
/* Menu lateral movil: mismo tamano que los demas botones de la cabecera */
.topbar #sidebarToggle { width: 40px !important; height: 40px !important; padding: 0 !important; margin: 0 !important; display: inline-flex; align-items: center; justify-content: center; }
.topbar #sidebarToggle svg { width: 20px !important; height: 20px !important; }
/* ---------- Busqueda centrada en la cabecera (en el flujo, no superpuesta) ----------
Izquierda y derecha reparten el mismo ancho: el buscador queda en el centro
exacto y los indicadores de la derecha ya no se montan sobre el. */
.topbar-left { flex: 1 1 0 !important; }
.topbar-right { flex: 1 1 0 !important; justify-content: flex-end; }
.topbar > .topbar-search-btn {
flex: 0 1 auto;
width: min(360px, 36vw) !important;
min-width: 0;
justify-content: flex-start;
gap: 0.5rem;
}
.topbar > .topbar-search-btn .topbar-search-label { display: inline !important; }
@media (max-width: 640px) {
.topbar > .topbar-search-btn { flex: 0 0 auto; width: 40px !important; padding: 0 !important; justify-content: center !important; }
.topbar > .topbar-search-btn svg { width: 16px !important; height: 16px !important; }
.topbar > .topbar-search-btn .topbar-search-label,
.topbar > .topbar-search-btn .topbar-kbd { display: none !important; }
}
/* ---------- Indicador "en línea": enlace en la zona derecha ---------- */
.topbar .topbar-online { text-decoration: none; cursor: pointer; }
.topbar .topbar-online:hover { background: rgba(255, 255, 255, 0.22) !important; }
.topbar .topbar-online:focus-visible { outline: 2px solid #ffffff; outline-offset: 2px; }
/* ---------- Pildora "en linea" al centro; lupa junto a la campana ---------- */
.topbar > .topbar-online { flex: 0 0 auto; margin: 0 auto !important; }
.topbar-right > .topbar-search-btn {
width: 40px !important; height: 40px !important; padding: 0 !important;
justify-content: center; gap: 0; flex: 0 0 auto;
}
.topbar-right > .topbar-search-btn .topbar-search-label,
.topbar-right > .topbar-search-btn .topbar-kbd { display: none !important; }
.topbar-right > .topbar-search-btn svg { width: 18px !important; height: 18px !important; }
/* ==========================================================================
CONTRASTE DE CIFRAS Y AVISOS EN COLOR (2026-10-15)
========================================================================== */
/* Las tarjetas de /reportes/ con degradado pastel dejaban el texto blanco
entre 2,2:1 y 2,7:1. Se oscurecen aqui y no en la plantilla porque las
variantes 700/800 no estan en el tailwind.css precompilado. */
.page-content .stat-card.from-purple-500 {
background-image: linear-gradient(135deg, #6d28d9 0%, #4c1d95 100%) !important;
}
.page-content .stat-card.from-green-500 {
background-image: linear-gradient(135deg, #047857 0%, #065f46 100%) !important;
}
/* Blanco sobre naranja 500 daba 2,8:1 (boton de restaurar y signo del aviso
en /backup/). */
.page-content .bg-orange-500 {
background: linear-gradient(135deg, #b45309 0%, #92400e 100%) !important;
color: #fff !important;
}
.page-content .bg-orange-500:hover {
background: linear-gradient(135deg, #92400e 0%, #78350f 100%) !important;
}
/* text-red-600 (#dc2626) sobre blanco da 4,41:1: rojo un punto mas oscuro
para las etiquetas de emergencia y demas textos rojos. */
.page-content .text-red-600 { color: #b91c1c; }
/* Los avisos en `text-red-500` (#ef4444 sobre blanco, 3,76:1) y los rojos de
texto tambien quedaban por debajo de AA: en el panel se usa el rojo oscuro. */
.page-content .text-red-500 { color: #b91c1c; }
/* ---------- Aviso de cierre de sesion por inactividad (2026-10-19) ---------- */
.aviso-sesion {
position: fixed; inset: 0; z-index: 1000;
background: rgba(0, 20, 45, 0.55);
-webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
display: flex; align-items: center; justify-content: center; padding: 1rem;
}
.aviso-sesion-caja {
width: 100%; max-width: 400px; background: #fff; border-radius: 1rem;
padding: 1.6rem 1.5rem 1.4rem; text-align: center;
border-top: 5px solid var(--dieef-gold);
box-shadow: 0 24px 60px rgba(0, 20, 45, 0.35);
}
.aviso-sesion-icono {
width: 52px; height: 52px; margin: 0 auto 0.8rem; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
background: #fef3c7; color: #b45309;
}
.aviso-sesion-icono svg { width: 28px; height: 28px; }
.aviso-sesion h2 { margin: 0 0 0.5rem; font-size: 1.15rem; font-weight: 700; color: var(--dieef-ink); }
.aviso-sesion p { margin: 0 0 1.2rem; font-size: 0.92rem; line-height: 1.5; color: #475569; }
.aviso-sesion-cuenta { color: #b45309; font-variant-numeric: tabular-nums; }
.aviso-sesion-botones { display: flex; gap: 0.6rem; justify-content: center; flex-wrap: wrap; }
.aviso-sesion-botones button {
flex: 1 1 140px; padding: 0.7rem 1rem; border-radius: 0.65rem; font-weight: 600;
font-size: 0.92rem; cursor: pointer; border: 1px solid transparent;
}
.aviso-sesion-seguir {
background: linear-gradient(135deg, var(--dieef-navy), var(--dieef-navy-light)); color: #fff;
box-shadow: 0 2px 8px rgba(0, 51, 99, 0.3);
}
.aviso-sesion-seguir:hover { filter: brightness(1.08); }
.aviso-sesion-salir { background: #fff; color: #334155; border-color: #cbd5e1 !important; }
.aviso-sesion-salir:hover { background: #f1f5f9; }
.aviso-sesion-botones button:focus-visible { outline: none; box-shadow: var(--dieef-focus); }
/* ---------- Enlace "Saltar al contenido" (2026-10-19) ----------
Invisible hasta que se llega con la tecla Tab: permite saltar el menu
lateral con teclado o lector de pantalla. */
.saltar-contenido {
position: fixed; top: 0.6rem; left: 0.6rem; z-index: 2000;
padding: 0.6rem 1rem; border-radius: 0.6rem;
background: var(--dieef-navy); color: #fff; font-weight: 600;
text-decoration: none; box-shadow: var(--dieef-focus);
transform: translateY(-160%); transition: transform 0.15s ease;
}
.saltar-contenido:focus { transform: translateY(0); outline: none; }
/* ---------- "Mi seguridad": verificacion en dos pasos (2026-10-19) ---------- */
.seg-wrap { max-width: 860px; display: flex; flex-direction: column; gap: 1.25rem; }
.seg-alerta { padding: 0.8rem 1rem; border-radius: 0.65rem; background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; font-size: 0.9rem; }
.seg-ok { color: #047857; }
.seg-pasos { display: flex; flex-direction: column; gap: 1.4rem; }
.seg-paso { display: flex; gap: 0.9rem; align-items: flex-start; }
.seg-num { flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; background: var(--dieef-navy); color: #fff; font-weight: 700; display: flex; align-items: center; justify-content: center; font-size: 0.85rem; }
.seg-paso h4 { margin: 0.25rem 0 0.35rem; font-size: 0.98rem; font-weight: 700; color: var(--dieef-ink); }
.seg-paso p { margin: 0; font-size: 0.88rem; line-height: 1.5; color: #475569; }
.seg-qr-fila { display: flex; gap: 1.25rem; align-items: center; flex-wrap: wrap; margin-top: 0.6rem; }
.seg-qr { width: 200px; height: 200px; border: 1px solid #dde5ef; border-radius: 0.75rem; padding: 6px; background: #fff; image-rendering: pixelated; }
.seg-manual { flex: 1 1 240px; font-size: 0.86rem; color: #475569; }
.seg-manual dl { display: grid; grid-template-columns: auto 1fr; gap: 0.3rem 0.8rem; margin: 0.5rem 0 0; }
.seg-manual dt { font-weight: 600; color: var(--dieef-ink); }
.seg-manual dd { margin: 0; word-break: break-all; }
.seg-clave { font-family: Consolas, "Cascadia Mono", monospace; font-size: 0.95rem; letter-spacing: 0.04em; background: #f1f5f9; padding: 0.15rem 0.4rem; border-radius: 0.35rem; color: var(--dieef-ink); }
.seg-form { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.6rem; max-width: 420px; }
.seg-label { font-size: 0.85rem; font-weight: 600; color: var(--dieef-ink); }
.seg-codigo { font-size: 1.35rem !important; letter-spacing: 0.25em; text-align: center; max-width: 220px; font-variant-numeric: tabular-nums; }
.seg-botones { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-top: 0.3rem; }
.seg-nota { margin: 0.9rem 0 0; font-size: 0.82rem; color: #64748b; }
.seg-lista-codigos { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.5rem; margin: 0 0 0.8rem; padding: 0; list-style: none; counter-reset: c; }
.seg-lista-codigos li { background: #f8fafc; border: 1px dashed #94a3b8; border-radius: 0.5rem; padding: 0.5rem; text-align: center; }
.seg-lista-codigos code { font-family: Consolas, "Cascadia Mono", monospace; font-size: 1rem; font-weight: 700; letter-spacing: 0.08em; color: var(--dieef-ink); }
.seg-codigos { border: 2px solid var(--dieef-gold) !important; }
.seg-restablecer { margin-top: 1.25rem; padding: 1rem 1.2rem; border: 1px solid #fcd34d; background: #fffbeb; border-radius: 0.8rem; display: flex; gap: 1rem; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.seg-restablecer p { margin: 0; font-size: 0.88rem; color: #78350f; }
/* Al imprimir los codigos de emergencia solo sale esa tarjeta */
@media print {
body * { visibility: hidden; }
.seg-codigos, .seg-codigos * { visibility: visible; }
.seg-codigos { position: absolute; left: 0; top: 0; width: 100%; }
.seg-codigos button { display: none; }
}
/* ---------- Avisos del sistema: ventana emergente y administracion (2026-10-19) ---------- */
.avs-tipo-importante { --avs-color: #b91c1c; --avs-fondo: #fef2f2; }
.avs-tipo-mantenimiento { --avs-color: #b45309; --avs-fondo: #fffbeb; }
.avs-tipo-novedad { --avs-color: #047857; --avs-fondo: #ecfdf5; }
.avs-tipo-informacion { --avs-color: #1d4ed8; --avs-fondo: #eff6ff; }
.avs-chip { display: inline-block; padding: 0.15rem 0.6rem; border-radius: 999px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: var(--avs-color, #334155); background: var(--avs-fondo, #f1f5f9); border: 1px solid currentColor; }
html.avs-abierta, html.avs-abierta body { overflow: hidden; }
.avs-capa { position: fixed; inset: 0; z-index: 9990; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(0, 26, 51, 0.55); backdrop-filter: blur(3px); animation: avs-entrar 0.2s ease-out; }
.avs-caja { width: 100%; max-width: 560px; max-height: calc(100vh - 32px); display: flex; flex-direction: column; background: #fff; border-radius: 1rem; box-shadow: 0 25px 60px rgba(0, 0, 0, 0.3); overflow: hidden; border-top: 5px solid var(--dieef-gold); }
.avs-cabecera { display: flex; align-items: center; gap: 0.75rem; padding: 1.1rem 1.4rem; background: var(--dieef-navy); color: #fff; }
.avs-cabecera h2 { margin: 0; font-size: 1.1rem; font-weight: 700; color: #fff; }
.avs-cabecera-icono { flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%; background: rgba(255, 255, 255, 0.15); display: flex; align-items: center; justify-content: center; color: var(--dieef-gold); }
.avs-cabecera-icono svg { width: 22px; height: 22px; }
.avs-lista { padding: 1.1rem 1.4rem; overflow-y: auto; display: flex; flex-direction: column; gap: 0.9rem; }
.avs-aviso { padding: 0.9rem 1rem; border-radius: 0.7rem; background: var(--avs-fondo); border-left: 4px solid var(--avs-color); }
.avs-aviso h3 { margin: 0.45rem 0 0.3rem; font-size: 1rem; font-weight: 700; color: var(--dieef-ink); }
.avs-aviso p { margin: 0; font-size: 0.92rem; line-height: 1.55; color: #334155; overflow-wrap: anywhere; }
.avs-aviso .avs-fecha { margin-top: 0.5rem; font-size: 0.76rem; color: #64748b; }
.avs-pie { padding: 0.9rem 1.4rem 1.2rem; display: flex; justify-content: flex-end; border-top: 1px solid #e2e8f0; }
.avs-entendido { min-width: 150px; padding: 0.7rem 1.4rem; border: 0; border-radius: 0.6rem; background: var(--dieef-navy); color: #fff; font-weight: 700; font-size: 0.95rem; cursor: pointer; }
.avs-entendido:hover { background: var(--dieef-navy-light); }
.avs-entendido:focus-visible { outline: 3px solid var(--dieef-gold); outline-offset: 2px; }
.avs-entendido:disabled { opacity: 0.7; cursor: wait; }
@keyframes avs-entrar { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 480px) {
.avs-capa { align-items: flex-end; padding: 0; }
.avs-caja { max-height: 92vh; border-radius: 1rem 1rem 0 0; }
.avs-entendido { width: 100%; }
}
.avs-admin { display: flex; flex-direction: column; gap: 1.25rem; }
.avs-admin-barra { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.avs-admin-intro { margin: 0; flex: 1 1 320px; font-size: 0.9rem; color: #475569; }
.avs-admin-nuevo { display: inline-flex; align-items: center; gap: 0.4rem; text-decoration: none; }
.avs-admin-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1rem; }
.avs-admin-tarjeta { display: flex; flex-direction: column; gap: 0.5rem; padding: 1.1rem 1.2rem; background: #fff; border: 1px solid #dde5ef; border-top: 4px solid var(--avs-color); border-radius: 0.9rem; box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06); }
.avs-admin-cabeza { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; }
.avs-admin-tarjeta h3 { margin: 0.2rem 0 0; font-size: 1rem; font-weight: 700; color: var(--dieef-ink); }
.avs-admin-mensaje { margin: 0; font-size: 0.88rem; line-height: 1.5; color: #475569; overflow-wrap: anywhere; }
.avs-admin-datos { display: grid; grid-template-columns: auto 1fr; gap: 0.2rem 0.8rem; margin: 0.3rem 0 0; font-size: 0.8rem; }
.avs-admin-datos dt { font-weight: 600; color: #64748b; }
.avs-admin-datos dd { margin: 0; color: var(--dieef-ink); }
.avs-admin-acciones { display: flex; gap: 0.5rem; margin-top: auto; padding-top: 0.6rem; }
.avs-admin-acciones form { margin: 0; }
.avs-btn-eliminar { background: #fee2e2 !important; color: #b91c1c !important; border: 1px solid #fca5a5 !important; }
.avs-btn-eliminar:hover { background: #fecaca !important; }
.avs-estado { font-size: 0.75rem; font-weight: 700; padding: 0.15rem 0.55rem; border-radius: 999px; }
.avs-estado-vigente { background: #dcfce7; color: #166534; }
.avs-estado-programado { background: #e0e7ff; color: #3730a3; }
.avs-estado-vencido { background: #f1f5f9; color: #64748b; }
.avs-estado-pausado { background: #fef3c7; color: #92400e; }
.avs-admin-vacio { padding: 2.5rem 1rem; text-align: center; background: #fff; border: 2px dashed #cbd5e1; border-radius: 0.9rem; color: #475569; }
.avs-admin-vacio p { margin: 0.2rem 0; }
.avs-casilla { display: flex; gap: 0.6rem; align-items: flex-start; margin-top: 0.4rem; font-size: 0.88rem; color: #475569; cursor: pointer; }
.avs-casilla input { margin-top: 0.2rem; width: 18px; height: 18px; flex-shrink: 0; }
@media (max-width: 480px) { .avs-admin-lista { grid-template-columns: 1fr; } }
/* ---------- Avisos del sistema: imagen / diseno (2026-10-19) ---------- */
.avs-imagen-enlace { display: block; margin: 0.6rem 0 0.4rem; border-radius: 0.6rem; overflow: hidden; background: #fff; line-height: 0; }
.avs-imagen { display: block; width: 100%; height: auto; max-height: 60vh; object-fit: contain; background: #fff; }
.avs-aviso .avs-imagen-enlace + p { margin-top: 0.4rem; }
.avs-admin-imagen { display: block; width: 100%; max-height: 220px; object-fit: contain; border-radius: 0.6rem; background: #f8fafc; border: 1px solid #e2e8f0; }
.avs-subida { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 0.6rem; }
.avs-vista-previa { max-width: 100%; max-height: 260px; border-radius: 0.6rem; border: 1px solid #dde5ef; background: #f8fafc; object-fit: contain; }
.avs-vista-previa[hidden] { display: none; }
.avs-subida-boton { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 40px; padding: 0.55rem 1rem; border: 2px dashed #94a3b8; border-radius: 0.6rem; color: var(--dieef-navy); font-weight: 600; font-size: 0.9rem; cursor: pointer; background: #f8fafc; max-width: 100%; overflow-wrap: anywhere; }
.avs-subida-boton:hover { border-color: var(--dieef-navy); background: #eef4fb; }
/* El input real queda oculto pero accesible por teclado (se enfoca el label). */
.avs-archivo { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.avs-archivo:focus-visible + .avs-casilla, .avs-subida:focus-within .avs-subida-boton { outline: 3px solid var(--dieef-gold); outline-offset: 2px; }
/* Ventanas "Subir documento" (Documentación, Casos, carpetas de Bienes,
Investigados): nacen con display:none y se abren con .is-open, pero no
habia regla que las mostrara, asi que el boton no hacia nada (2026-10-19). */
.upload-modal-overlay:not(.is-open) { display: none !important; }
.upload-modal-overlay.is-open { display: flex !important; }
/* ==========================================================================
MOVIMIENTO SUAVE EN MENU LATERAL Y CABECERA (2026-10-20)
--------------------------------------------------------------------------
El acceso ya tiene tres gestos propios: el degradado azul que se desplaza,
los resplandores que respiran y el logo con brillo dorado. Se repiten aqui
con la misma cadencia para que el panel se sienta de la misma casa. Todo el
movimiento va detras del contenido y solo anima background-position,
transform y opacity: no hay que repintar texto ni iconos.
========================================================================== */
#sidebar {
background-image: linear-gradient(-45deg, #001a33 0%, #003363 28%, #0f5a9e 52%, #00264d 76%, #001a33 100%);
background-color: var(--dieef-navy);
background-size: 300% 300%;
background-position: 0% 50%;
animation: dieef-sidebar-shift 20s ease-in-out infinite;
}
@keyframes dieef-sidebar-shift {
0%, 100% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
}
/* Dos resplandores (azul arriba, dorado abajo) en un solo elemento. */
.sidebar-glow {
position: absolute;
inset: -15% -25%;
z-index: 0;
pointer-events: none;
background:
radial-gradient(circle at 25% 12%, rgba(59, 130, 246, 0.30) 0%, rgba(59, 130, 246, 0) 55%),
radial-gradient(circle at 80% 88%, rgba(245, 183, 0, 0.20) 0%, rgba(245, 183, 0, 0) 55%);
animation: dieef-sidebar-glow 9s ease-in-out infinite;
}
@keyframes dieef-sidebar-glow {
0%, 100% { opacity: 0.45; transform: translate3d(0, 0, 0) scale(1); }
50% { opacity: 0.85; transform: translate3d(0, -10px, 0) scale(1.06); }
}
/* El contenido va por encima del brillo y el filo dorado por encima de todo
(si no, el ::after se apagaba al pintarse los hijos). */
#sidebar > *:not(.sidebar-glow) { position: relative; z-index: 1; }
#sidebar::after { z-index: 2; }
/* Logo con el brillo dorado del acceso, mas contenido que alli porque aqui
convive con el texto del menu. */
#sidebar > div:first-child img {
animation: dieef-logo-brillo 3.6s ease-in-out infinite;
}
@keyframes dieef-logo-brillo {
0%, 100% { filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.35)) drop-shadow(0 0 0 rgba(245, 183, 0, 0)); }
50% { filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.35)) drop-shadow(0 0 14px rgba(245, 183, 0, 0.55)); }
}
/* ---------- Cabecera: el mismo degradado y una franja dorada que la recorre.
El menu lateral solo se ve a partir de 1024 px, asi que en movil y tablet
el gesto de la casa tiene que estar arriba. */
.topbar {
background-color: var(--dieef-navy) !important;
background-image:
linear-gradient(100deg, rgba(245, 183, 0, 0) 40%, rgba(245, 183, 0, 0.22) 50%, rgba(245, 183, 0, 0) 60%),
linear-gradient(-45deg, #001a33 0%, #003363 28%, #0f5a9e 52%, #00264d 76%, #001a33 100%);
background-size: 55% 100%, 300% 300%;
background-repeat: no-repeat, no-repeat;
background-position: -80% 0, 0% 50%;
animation: dieef-topbar-shift 18s ease-in-out infinite;
}
/* Los tres fotogramas empiezan y acaban en el mismo punto, asi el bucle no se
nota: la franja queda fuera de la cabecera en ambos extremos. */
@keyframes dieef-topbar-shift {
0% { background-position: -80% 0, 0% 50%; }
50% { background-position: 180% 0, 100% 50%; }
100% { background-position: -80% 0, 0% 50%; }
}
/* Quien pide menos movimiento ve todo quieto, con los mismos colores. */
@media (prefers-reduced-motion: reduce) {
#sidebar,
.sidebar-glow,
#sidebar > div:first-child img,
.topbar {
animation: none !important;
}
}
/* ============================================================================
MENU LATERAL - rediseño elegante (2026-10-22)
Cada item es una "pastilla": el icono vive en su propia capsula, siempre
visible (antes se perdia sobre el azul). El dorado esta presente en reposo
(sutil), crece al pasar el mouse y manda en el item activo. Un reflejo
dorado recorre el panel, el mismo gesto de la cabecera.
========================================================================== */
/* El boton: pastilla redondeada, texto mas claro, movimiento suave */
#sidebar nav a.flex {
position: relative;
font-weight: 500;
color: #dbe6f3;
border-radius: 0.7rem;
padding: 0.55rem 0.75rem !important;
transition: transform .2s ease, background-color .2s ease, box-shadow .2s ease, color .2s ease;
will-change: transform;
}
/* La capsula del icono (el propio