/* ==========================================================================
   SISTEMA INFORMÁTICO DE GESTIÓN ERP (IMEP) - HOJA DE ESTILOS CENTRALIZADA
   ========================================================================== */

/* CONFIGURACIÓN GLOBAL: Normalización del modelo de caja e importación tipográfica estándar */
* { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
    font-family: 'Inter', sans-serif; 
}

/* ENTORNO RAÍZ: Definición de fondo degradado perimetral con persistencia síncrona */
body { 
    min-height: 100vh; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    overflow-x: hidden; 
    background: radial-gradient(circle at left,#173b6d 0%,#08111e 35%), 
                radial-gradient(circle at right,#641212 0%,#180505 35%), 
                linear-gradient(90deg,#08111e 50%,#180505 50%); 
}


/* COMPONENTES DE MARCA DE AGUA: Glifos de engranaje vectoriales con opacidad controlada */
body::before { 
    content: "⚙"; 
    position: absolute; 
    left: -60px; 
    top: 120px; 
    font-size: 320px; 
    color: rgba(59,130,246,.25); 
    z-index: 1; 
}
body::after { 
    content: "⚙"; 
    position: absolute; 
    right: -50px; 
    bottom: 50px; 
    font-size: 280px; 
    color: rgba(220,38,38,.25); 
    z-index: 1; 
}

/* ==========================================================================
   MÓDULO DE TABLERO PRINCIPAL (dashboard.html)
   ========================================================================== */

/* CONTENEDOR CENTRAL:  El cuadro blanco del menu principal de las cuatro tarjetas */
.menu-box { 
    width: 900px; 
    background: #ffffff; 
    padding: 28px; 
    border-radius: 20px; 
    box-shadow: 0 20px 50px rgba(0,0,0,.18), 0 5px 15px rgba(0,0,0,.08); 
    position: relative; 
    z-index: 10; 
    border-top: 5px solid #7c3aed;
}

/* BARRA SUPERIOR DE SESIÓN: Despliegue de metadatos de usuario logueado en tiempo real */
.top-bar { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    padding-bottom: 15px; 
    border-bottom: 1px solid #dbe3ee; 
}

/* METADATOS DE SEGURIDAD: Estilos de cadena para identificar rol e hito temporal */
.usuario-info, .fecha-info { 
    font-size: 14px; 
    font-weight: 600; 
    color: #10254d; 
}

/* ICONOGRAFÍA OPERATIVA: Forzado cromático para componentes glyph de control superior */
.top-bar i { 
    color: #dc2626 !important; 
    margin-right: 4px; 
}

/* ENCABEZADO DE SECCIÓN: Despliegue tipográfico principal en color corporativo de marca */
.header-seccion h1 { 
    font-size: 52px; 
    color: #dc2626; 
    font-weight: 700; 
    text-align: center; 
}

/* DESCRIPCIÓN ACADÉMICA: Subtítulo con formato formal de alta fidelidad institucional */
.header-seccion p { 
    color: #10254d !important; 
    font-size: 12px; 
    font-weight: 700; 
    letter-spacing: 1px; 
    text-align: center; 
}

/* DELIMITADOR DE CABECERA: Línea horizontal de control estético de marca */
.linea { 
    width: 75px; 
    height: 3px; 
    background: #dc2626; 
    margin: 14px auto; 
    border-radius: 10px; 
}
/* CONTENEDOR DE BALANCES: Retícula matemática para visualización del estado financiero */
.balances-container { 
    display: grid; 
    grid-template-columns: repeat(3, 1fr); 
    gap: 15px; 
    margin-bottom: 25px; 
}

/* COMPONENTES DE SALDOS: Tarjetas con diseño de cuadrante y transiciones síncronas */
.balance-card { 
    text-align: center; 
    padding: 14px; 
    border-radius: 18px; 
    box-shadow: 0 4px 12px rgba(0,0,0,.04); 
    transition: .3s cubic-bezier(0.25, 0.8, 0.25, 1); 
}

/* EFECTO INTERACTIVO: Desplazamiento vertical mediante vectores de aceleración cúbica */
.balance-card:hover { 
    transform: translateY(-3px); 
    box-shadow: 0 8px 20px rgba(0,0,0,.10); 
}

/* ICONOGRAFÍA DE INDICADORES: Dimensionamiento estandarizado de elementos glyph */
.balance-card i { 
    font-size: 22px; 
    margin-bottom: 8px; 
}

/* CODIFICACIÓN CROMÁTICA DE CAJA: Paleta institucional para ingresos, egresos y saldo neto */
.card-ingresos { background: #dcfce7; border: 1px solid #22c55e; }
.card-egresos { background: #fee2e2; border: 1px solid #ef4444; }
.card-saldo { background: #dbeafe; border: 1px solid #2563eb; }

/* RETÍCULA MAESTRA: Matriz bidimensional para ordenar los 4 accesos principales del sistema */
.tarjetas-grid { 
    display: grid; 
    grid-template-columns: repeat(4, 1fr); 
    gap: 18px; 
    width: 100%;
}

/* TARJETAS DEL MENÚ: Contenedores con aceleración por hardware para respuesta al hover */
.tarjeta { 
    height: 170px; 
    border-radius: 18px; 
    text-decoration: none; 
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
    align-items: center; 
    gap: 12px; 
    transition: .35s; 
    box-shadow: 0 5px 18px rgba(0,0,0,.08); 
}
.tarjeta:hover { transform: translateY(-6px); box-shadow: 0 12px 25px rgba(0,0,0,.15); }

/* COMPONENTES DE ENFOQUE: Círculos con opacidad difuminada para realce de iconos */
.tarjeta-icono { 
    width: 70px; 
    height: 70px; 
    border-radius: 50%; 
    background: rgba(255,255,255,.75); 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    font-size: 30px; 
    transition: .3s; 
}
.tarjeta:hover .tarjeta-icono { transform: scale(1.10); }

/* TÍTULOS DE INTERFAZ: Tipografía formal en color negro profundo de alta fidelidad */
.tarjeta-titulo { 
    color: #1e293b !important; 
    font-size: 18px; 
    font-weight: 700; 
    text-align: center !important; 
    width: 100%; 
}

/* FONDOS MODULARES: Vinculación cromática para la consistencia operativa del tablero */
.tarjeta-ingresos { background: #dcfce7; border: 1px solid #22c55e; }
.tarjeta-egresos { background: #fee2e2; border: 1px solid #ef4444; }
.tarjeta-personal { background: #dbeafe; border: 1px solid #2563eb; }
.tarjeta-auditoria { background: #fed7aa; border: 1px solid #f97316; }

/* ENLACES DE CIERRE: Separación simétrica y control cromático para el retorno seguro */
.footer { 
    text-align: center; 
    margin-top: 45px; 
}
.footer a { 
    text-decoration: none; 
    color: #64748b; 
    font-size: 14px; 
    font-weight: 500; 
    transition: .2s; 
}
.footer a:hover { color: #dc2626; }

/* ==========================================================================
   ESTRUCTURA DE SUB-INTERFACES PARA FORMULARIOS SECUNDARIOS
   ========================================================================== */

/* CONTENEDOR DE CAPTURA: Caja esmerilada formal para las pantallas de captura de caja */
.form-box { 
    width: 460px; 
    background: white; 
    padding: 25px 35px; 
    border-radius: 18px; 
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.18); 
    position: relative; 
    z-index: 10; 
}
.barra-navegacion { display: flex; justify-content: space-between; margin-bottom: 15px; border-bottom: 1px solid #e2e8f0; padding-bottom: 10px; }
.barra-navegacion a { color: #475569; text-decoration: none; font-size: 12px; font-weight: 600; transition: .2s; }
.barra-navegacion a:hover { color: #dc2626; }
label { display: block; font-size: 13px; font-weight: 600; color: #334155; margin-bottom: 4px; text-align: left; }
.input-group { position: relative; margin-bottom: 12px; width: 100%; }

/* ENTRADAS ESTANDARIZADAS: Redondeado y grosor simétrico para cajas de entrada y selectores */
.form-box input, .form-box select, .menu-box input { 
    width: 100%; 
    height: 46px; 
    padding-left: 15px; 
    padding-right: 15px; 
    border: 1px solid #d7dde8; 
    border-radius: 8px; 
    outline: none; 
    font-size: 14px; 
    background-color: #ffffff; 
    transition: .3s; 
}
.form-box textarea { width: 100%; height: 75px; padding: 10px 15px; border: 1px solid #d7dde8; border-radius: 8px; outline: none; font-size: 14px; background-color: #ffffff; resize: none; transition: .3s; }
/* ==========================================================================
   MÓDULO DE REGISTRO DE INGRESOS (ingresos.html)
   ========================================================================== */

/* INDICADOR DE ENFOQUE: Destello verde esmeralda para la inserción de activos en caja */
.form-box form[action="/registrar_ingreso"] input:focus, 
.form-box form[action="/registrar_ingreso"] textarea:focus, 
.form-box form[action="/registrar_ingreso"] select:focus { 
    border-color: #22c55e !important; 
    box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.15) !important; 
}

/* ENCABEZADO DE SECCIÓN: Centrado estricto y forzado cromático del título institucional */
.form-box:has(form[action="/registrar_ingreso"]) .header-seccion h2,
body:has(form[action="/registrar_ingreso"]) .header-seccion h2 { 
    color: #dc2626 !important; 
    text-align: center !important; 
    width: 100% !important; 
    display: block !important; 
}

/* TEXTOS DE CONTROL: Forzado neutro profundo para subtítulos informativos de ingresos */
.form-box form[action="/registrar_ingreso"] .header-seccion p { color: #10254d !important; }
.form-box form[action="/registrar_ingreso"] .linea { width: 60px; height: 2px; background: #22c55e !important; margin: 10px auto 15px; }

/* COMPONENTE DML: Botón transaccional verde con relieve para el almacenamiento de registros */
.form-box form[action="/registrar_ingreso"] .btn-guardar { width: 100%; height: 46px; border: none; border-radius: 8px; background: linear-gradient(180deg, #22c55e, #16a34a) !important; color: white !important; font-size: 15px; font-weight: 600; cursor: pointer; box-shadow: 0 6px 14px rgba(34, 197, 94, 0.25) !important; display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 15px; transition: .3s; }
.form-box form[action="/registrar_ingreso"] .btn-guardar:hover { transform: translateY(-2px); }


/* ==========================================================================
   MÓDULO DE REGISTRO DE EGRESOS (egresos.html)
   ========================================================================== */

/* INDICADOR DE ENFOQUE: Destello rojo carmín para la inserción de pasivos o retiros de caja */
.form-box form[action="/registrar_egreso"] input:focus, 
.form-box form[action="/registrar_egreso"] textarea:focus, 
.form-box form[action="/registrar_egreso"] select:focus { 
    border-color: #ef4444 !important; 
    box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.15) !important; 
}

/* ENCABEZADO DE SECCIÓN: Centrado estricto y forzado cromático del título institucional */
.form-box:has(form[action="/registrar_egreso"]) .header-seccion h2,
body:has(form[action="/registrar_egreso"]) .header-seccion h2 { 
    color: #dc2626 !important; 
    text-align: center !important; 
    width: 100% !important; 
    display: block !important; 
}

/* TEXTOS DE CONTROL: Forzado neutro profundo para subtítulos informativos de egresos */
.form-box form[action="/registrar_egreso"] .header-seccion p { color: #10254d !important; }
.form-box form[action="/registrar_egreso"] .linea { width: 60px; height: 2px; background: #ef4444 !important; margin: 10px auto 15px; }

/* COMPONENTE DML: Botón transaccional rojo con relieve para el almacenamiento de egresos */
.form-box form[action="/registrar_egreso"] .btn-guardar { width: 100%; height: 46px; border: none; border-radius: 8px; background: linear-gradient(180deg, #ef4444, #dc2626) !important; color: white !important; font-size: 15px; font-weight: 600; cursor: pointer; box-shadow: 0 6px 14px rgba(239, 68, 68, 0.25) !important; display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 15px; transition: .3s; }
.form-box form[action="/registrar_egreso"] .btn-guardar:hover { transform: translateY(-2px); }

/* ==========================================================================
   OPTIMIZACIÓN ESTÉTICA PREMIUM PARA EL FORMULARIO DE INGRESOS (ingresos.html)
   ========================================================================== */

/* 1. MEJORA: Aplica la franja verde superior sobre el cuadro blanco de ingresos */
.form-box:has(form[action="/registrar_ingreso"]) {
    border-top: 5px solid #22c55e !important; /* Verde esmeralda transaccional */
}

/* 2. MEJORA: Fuerza que los enunciados de las cajas se lean en negrita ultra fuerte */
.form-box:has(form[action="/registrar_ingreso"]) label {
    font-weight: 800 !important; /* Negrita máxima de control */
    color: #1e293b !important; /* Negro grisáceo nítido */
    letter-spacing: 0.2px !important;
    margin-bottom: 6px !important;
}

/* 3. MEJORA: Estiliza tu botón verde nativo con relieve y respuesta interactiva al mouse */
.form-box form[action="/registrar_ingreso"] .btn-guardar {
    height: 50px !important; /* Altura optimizada para el monitor */
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    background: linear-gradient(180deg, #22c55e, #16a34a) !important; /* Gradiente sutil */
    box-shadow: 0 6px 14px rgba(34, 197, 94, 0.25) !important; /* Sombra de base */
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out !important;
}

/* Efecto hover interactivo: elevación sutil de 2px al apuntar con el cursor */
.form-box form[action="/registrar_ingreso"] .btn-guardar:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 20px rgba(34, 197, 94, 0.35) !important;
    filter: brightness(1.03) !important;
}

/* ==========================================================================
   OPTIMIZACIÓN ESTÉTICA PREMIUM PARA EL FORMULARIO DE EGRESOS (egresos.html)
   ========================================================================== */

/* 1. MEJORA: Aplica la franja roja superior sobre el cuadro blanco de egresos */
.form-box:has(form[action="/registrar_egreso"]) {
    border-top: 5px solid #ef4444 !important; /* Rojo industrial transaccional */
}

/* 2. MEJORA: Fuerza que los enunciados de las cajas se lean en negrita ultra fuerte */
.form-box:has(form[action="/registrar_egreso"]) label {
    font-weight: 800 !important; /* Negrita máxima de control */
    color: #1e293b !important; /* Negro grisáceo nítido */
    letter-spacing: 0.2px !important;
    margin-bottom: 6px !important;
}

/* 3. MEJORA: Estiliza tu botón rojo nativo con relieve y respuesta interactiva al mouse */
.form-box form[action="/registrar_egreso"] .btn-guardar {
    height: 50px !important; /* Altura optimizada para el monitor */
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    background: linear-gradient(180deg, #ef4444, #dc2626) !important; /* Gradiente rojo sutil */
    box-shadow: 0 6px 14px rgba(239, 68, 68, 0.25) !important; /* Sombra de base */
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out !important;
}

/* Efecto hover interactivo: elevación sutil de 2px al apuntar con el cursor */
.form-box form[action="/registrar_egreso"] .btn-guardar:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 20px rgba(239, 68, 68, 0.35) !important;
    filter: brightness(1.03) !important;
}


/* ==========================================================================
   MÓDULO DE ALTAS Y GESTIÓN DE OPERARIOS (usuarios.html)
   ========================================================================== */

/* TEXTOS DE CONTROL: Forzado formal para consistencia académica en el panel de personal */
.menu-box div:has(form[action="/usuarios"]) .header-seccion p, .menu-box .header-seccion p { color: #10254d !important; }
.menu-box div:has(form[action="/usuarios"]) .linea, .menu-box .header-seccion .linea { background: #2563eb !important; }

/* COMPONENTE DML: Botón azul premium para el almacenamiento y creación de nuevos usuarios */
.btn-crear { width: 100%; height: 46px; border: none; border-radius: 8px; background: linear-gradient(180deg, #2563eb, #1d4ed8) !important; color: white !important; font-size: 15px; font-weight: 600; cursor: pointer; display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 15px; transition: .3s; }
.btn-crear:hover { transform: translateY(-2px); }
.menu-box form[action="/usuarios"] input:focus { border-color: #2563eb !important; box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.15) !important; }

/* CANDADO METODOLÓGICO: Ocultamiento físico selectivo del enlace subordinado de redirección */
.menu-box div:has(form[action="/usuarios"]) > div[style*="text-align: center"] { display: none !important; }
/* ==========================================================================
   MÓDULO DE PANTALLAS DE TABLAS RELACIONALES Y REPORTES (auditoria.html)
   ========================================================================== */

/* DISTRIBUCIÓN MODULAR: Matriz asimétrica en dos columnas para tablas y formularios de control */
.contenido-grid { display: grid; grid-template-columns: 1fr 1.5fr; gap: 40px; margin-top: 20px; }
table { width: 100%; border-collapse: collapse; font-size: 13px; text-align: left; margin-top: 15px; }

/* ENCABEZADOS DE MATRIZ: Estilos formales para la identificación de columnas transaccionales */
th { background-color: #f1f5f9; color: #1e293b; padding: 12px 15px !important; font-weight: 600; border-bottom: 2px solid #e2e8f0; }
td { padding: 12px 15px !important; border-bottom: 1px solid #e2e8f0; color: #334155; }

/* COMPONENTES DE ESTADO: Etiquetas redondeadas para identificar la integridad de los operarios */
.badge { padding: 4px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; }
.badge-activo { background-color: #dcfce7; color: #166534; font-weight: 700; padding: 4px 10px; border-radius: 20px; }
.badge-suspendido { background-color: #fee2e2; color: #991b1b; }

/* ACCIONES DE CONTROL: Botones de gestión administrativa para la suspensión o eliminación de tuplas */
.btn-accion { padding: 6px 10px; border-radius: 6px; border: none; color: white; cursor: pointer; font-size: 12px; margin-right: 4px; text-decoration: none; display: inline-block; transition: .2s ease-in-out; }
.btn-accion:hover { transform: scale(1.15); box-shadow: 0 4px 10px rgba(0,0,0,0.15); }
.btn-suspender { background-color: #eab308; }
.btn-eliminar { background-color: #dc2626; }

/* CONTENEDOR DE CONTROL DE ATRIBUTOS: Panel horizontal para la segmentación de reportes de auditoría */
.filtro-container { display: flex; gap: 12px; background: #f8fafc; padding: 15px; border-radius: 10px; border: 1px solid #e2e8f0; margin-bottom: 20px; align-items: center; width: 100%; }
.filtro-container select, .filtro-container input { height: 42px; background-color: white; padding-left: 35px !important; border: 1px solid #d7dde8; border-radius: 8px; outline: none; font-size: 13px; }
.filtro-container button { height: 42px; padding: 0 25px; border: none; border-radius: 8px; background: linear-gradient(180deg, #ea580c, #c2410c) !important; color: white !important; font-weight: 700; cursor: pointer; box-shadow: 0 4px 10px rgba(234, 88, 12, 0.25); transition: .2s; }
.filtro-container button:hover { transform: translateY(-1px); }
.filtro-container a { font-size: 13px; color: #64748b; text-decoration: none; font-weight: 600; }
.filtro-container a:hover { color: #dc2626; }

/* ENLACE DE DATOS: Ajustes específicos para tablas de auditoría general incrustadas */
.menu-box table { width: 100%; border-collapse: collapse; margin-top: 10px; }
.menu-box table th { background-color: #f1f5f9; color: #1e293b; padding: 12px 10px !important; font-weight: 700; font-size: 13px; border-bottom: 2px solid #e2e8f0; }
.menu-box table td { padding: 12px 10px !important; font-size: 13px; border-bottom: 1px solid #e2e8f0; color: #334155; }

/* COMPONENTES TRANSACCIONALES: Distintivos cromáticos de alta visibilidad para ingresos y egresos en bitácora */
.badge-ingreso { background-color: #e0f2fe; color: #0369a1; font-weight: 700; padding: 4px 10px; border-radius: 20px; font-size: 11px; }
.badge-egreso { background-color: #fee2e2; color: #991b1b; font-weight: 700; padding: 4px 10px; border-radius: 20px; font-size: 11px; }

/* ==========================================================================
   ESTO ACOMODA LOS ICONOS Y EL OJO EN LA PANTALLA DE USUARIOS (usuarios.html)
   ========================================================================== */

/* ESPACIADO INTEGRAL: Margen interno para prevenir superposición de texto con vectores glyph */
.menu-box form[action="/usuarios"] .input-group input { padding-left: 42px !important; padding-right: 42px !important; width: 100% !important; display: block !important; }

/* ALINEACIÓN DE SEGURIDAD: Ubicación exacta del indicador de usuario y clave criptográfica */
.menu-box form[action="/usuarios"] .input-group i:first-child, body .menu-box form[action="/usuarios"] .input-group i.fa-solid { position: absolute !important; left: 15px !important; top: 15px !important; color: #94a3b8 !important; z-index: 99 !important; display: inline-block !important; }

/* DETECTOR INTERACTIVO: Alineación geométrica del componente para visualización de caracteres ocultos */
.menu-box form[action="/usuarios"] .input-group .ojo, body .menu-box form[action="/usuarios"] .input-group i.ojo { position: absolute !important; right: 15px !important; top: 15px !important; color: #94a3b8 !important; cursor: pointer !important; z-index: 99 !important; display: inline-block !important; }

/* AJUSTE MAESTRO DE CABECERA: Sincronización cromática y centrado formal del título de auditoría */
.menu-box:has(.filtro-container) .header-seccion h2, body div:has(.filtro-container) .header-seccion h2 { color: #dc2626 !important; text-align: center !important; width: 100% !important; display: block !important; }

/* ==========================================================================
   OPTIMIZACIÓN ESTÉTICA PREMIUM PARA EL CONTROL DE PERSONAL (usuarios.html)
   ========================================================================== */

/* 1. MEJORA: Aplica la franja azul superior sobre el contenedor del menú de usuarios */
.menu-box:has(.btn-crear), .menu-box:has(#modal_alerta_login), body:has(.btn-crear) .menu-box {
    border-top: 5px solid #2563eb !important; /* Azul corporativo unificado */
}


/* 2. MEJORA: Fuerza que las etiquetas de los operarios adopten negrita ultra fuerte */
.menu-box form[action="/usuarios"] label {
    font-weight: 800 !important; /* Negrita máxima académica */
    color: #0f172a !important; /* Tono oscuro nítido */
    letter-spacing: 0.2px !important;
    margin-bottom: 6px !important;
}

/* 3. MEJORA: Estiliza tu botón azul nativo de actualización con relieve interactivo */
.btn-actualizar, .btn-crear {
    height: 48px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    box-shadow: 0 6px 14px rgba(37, 99, 235, 0.25) !important;
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out !important;
}

/* Efecto hover interactivo: elevación sutil de 2px al apuntar con el cursor */
.btn-actualizar:hover, .btn-crear:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 20px rgba(37, 99, 235, 0.35) !important;
    filter: brightness(1.03) !important;
}


/* ==========================================================================
   ESTO ES DEL LOGIN PRINCIPAL ORIGINAL CON ARREGLO DE CAJA BLANCA FLOTANTE (login.html)
   ========================================================================== */

/* CONTENEDOR DE CONTROL: Tarjeta blanca flotante simétrica original de fábrica */
.login-box { width: 420px; background: white; padding: 35px; border-radius: 18px; box-shadow: 0 15px 40px rgba(0,0,0,.18); position: relative; z-index: 10; }
.logo { text-align: center; }
.logo-icon { font-size: 48px; color: #13294f; position: relative; }

/* RAYO DE CONTROL: Símbolo decorativo original con posicionamiento absoluto */
.bolt { color: #dc2626; font-size: 28px; position: absolute; margin-left: -18px; margin-top: 8px; }
.logo h1 { font-size: 48px; color: #13294f; }
.logo p { color: #dc2626; font-size: 15px; font-weight: 600; }

/* ENCABEZADO DE ENTORNO: Bloque de títulos internos para el ingreso del operario */
.sistema { text-align: center; margin-top: 12px; }
.sistema h3 { font-size: 13px; color: #1f2937; }
.sistema p { font-size: 12px; color: #94a3b8; margin-top: 5px; }

/* LÍNEA DE MARCA: Divisor horizontal original color rojo industrial */
.linea-login { width: 70px; height: 2px; background: #dc2626; margin: 10px auto 25px; }

/* REGLAS DE ENTRADA: Redondeado de fábrica para los inputs internos de la tarjeta blanca */
.login-box input { width: 100%; height: 52px; padding-left: 42px; padding-right: 42px; border: 1px solid #d7dde8; border-radius: 8px; outline: none; font-size: 14px; transition: .3s; }
.login-box input:focus { border-color: #2563eb; box-shadow: 0 0 0 4px rgba(37,99,235,.15); }

/* ICONOGRAFÍA INTERNA: Posicionamiento absoluto de los glifos de candado y operario */
.login-box .input-group i:first-child { position: absolute; left: 15px; top: 17px; color: #94a3b8; z-index: 5; }

/* COMPONENTE INTERACTIVO: Ubicación del detector de visibilidad de cadena secreta */
.login-box .ojo { position: absolute; right: 15px; top: 17px; color: #94a3b8; cursor: pointer; z-index: 5; }

/* ACCIÓN DE ENVÍO: Botón azul premium original con gradiente e hito hover nativos */
.login-box button { width: 100%; height: 50px; border: none; border-radius: 8px; background: linear-gradient(180deg,#1d4ed8,#0b3ea9); color: white; font-size: 16px; font-weight: 600; cursor: pointer; box-shadow: 0 8px 18px rgba(29,78,216,.25); transition: .3s; display: flex; justify-content: center; align-items: center; gap: 8px; }
.login-box button:hover { transform: translateY(-2px); }

/* CRÉDITOS INFERIORES: Distribución del pie de página nativo de la tarjeta blanca */
.login-box .footer { margin-top: 25px; display: flex; justify-content: space-between; font-size: 11px; color: #94a3b8; }
.login-box .footer a { text-decoration: none; color: #64748b; font-size: 14px; font-weight: 500; }
.login-box .footer a:hover { color: #dc2626; }
/* ==========================================================================
   MÓDULO DE INTERFAZ DE BIENVENIDA - SISTEMA DE PORTAL INSTITUCIONAL (IMEP)
   ========================================================================== */

.body-bienvenida {
    margin: 0;
    padding: 0;
    font-family: 'Inter', sans-serif;
    background: #f8fafc;
    min-height: 100vh;
    display: flex;
    overflow: hidden;
}

/* Contenedor principal que abarca la totalidad del viewport del monitor */
.portal-fullscreen {
    display: flex;
    width: 100%;
    min-height: 100vh;
}

/* SECCIÓN LATERAL IZQUIERDA: Despliegue de identidad de marca y registro visual de infraestructura */
.portal-brand-side {
    width: 60%;
    background-color: #f1f5f9;
    /* Inyección de imagen de fondo industrial con capa de opacidad calibrada al 35% para optimizar contraste */
    background-image: linear-gradient(rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0.20)), url('/static/fondo_industrial.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: 60px 40px 40px 40px;
    box-sizing: border-box;
    position: relative;
    border-right: 1px solid #e2e8f0;
}

/* Alineación central del bloque del logotipo institucional */
.logo-imep-real {
    text-align: center;
    width: 100%;
    z-index: 10;
    margin-top: 20px;
}

/* Enmarcado y escalado del isotipo vectorial de ondas dinámicas */
.contenedor-isotipo-real {
    width: 100%;
    max-width: 110px;
    margin: 0 auto 12px auto;
    display: block;
    background: rgba(255, 255, 255, 0.90);
    padding: 5px;
    border-radius: 10px;
    box-shadow: 0 6px 15px rgba(0,0,0,0.12);
}

.contenedor-isotipo-real img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

/* CONFIGURACIÓN TIPOGRÁFICA EN NEGRITA MÁXIMA CON TEXT-SHADOW TRIDIMENSIONAL PARA ALTO CONTRASTE */
.logo-imep-real h1 {
    margin: 0;
    font-size: 82px;
    font-weight: 900; /* Asignación de grosor de fuente a nivel máximo */
    color: #020617; /* Tonalidad oscura absoluta para legibilidad pro */
    letter-spacing: -3px;
    line-height: 0.9;
    /* Respaldo tridimensional blanco múltiple para blindar la lectura sobre el fondo de hierro */
    text-shadow: 0 0 15px #ffffff, 0 0 10px #ffffff, 0 2px 5px rgba(255,255,255,1);
}
.logo-imep-real .sub-metal {
    margin: 4px 0 0 0;
    font-size: 38px;
    font-weight: 800; /* Configuración de negrita fuerte */
    color: #0f172a;
    letter-spacing: 1px;
    line-height: 1;
    text-shadow: 0 0 12px #ffffff, 0 0 8px #ffffff;
}
.logo-imep-real .sub-industria {
    margin: 15px 0 0 0;
    font-size: 11.5px;
    font-weight: 900; /* Negrita institucional requerida para la identidad de marca */
    color: #b91c1c; /* Código cromático oficial de la proforma industrial */
    text-transform: uppercase;
    letter-spacing: 2.5px;
    text-shadow: 0 0 10px #ffffff, 0 0 5px #ffffff;
}

/* DIVISOR GEOMÉTRICO CURVO: Estructura SVG para transición suave de interfaces */
.curva-moderna-contenedor {
    position: absolute;
    bottom: 125px;
    left: 0;
    width: 100%;
    line-height: 0;
    z-index: 2;
}
.curva-moderna-contenedor svg {
    position: relative;
    display: block;
    width: 100%;
    height: 60px;
}

/* RETÍCULA DE COMPONENTES DE INDICADORES (TARJETAS INFERIORES) */
.contenedor-tarjetitas-iconos {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    width: 100%;
    z-index: 10;
    box-sizing: border-box;
    margin-top: auto;
}

.tarjeta-minera {
    background: #ffffff;
    padding: 20px 10px;
    border-radius: 14px;
    text-align: center;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.12);
    box-sizing: border-box;
}

/* Codificación de color institucional en el borde superior (Cintillos fijos de alta visibilidad) */
.tarjeta-azul {
    border-top: 4px solid #1e3a8a; /* Delimitador azul corporativo profundo */
    background: linear-gradient(180deg, #ffffff 75%, #f0f4ff 100%);
}
.tarjeta-roja {
    border-top: 4px solid #b91c1c; /* Delimitador rojo industrial de la proforma */
    background: linear-gradient(180deg, #ffffff 75%, #fef2f2 100%);
}

.emoji-tarjeta {
    font-size: 26px;
    display: block;
    margin-bottom: 8px;
}

.tarjeta-minera h4 {
    margin: 0 0 6px 0;
    font-size: 10.5px;
    color: #0f172a;
    font-weight: 800; /* Títulos de indicadores en negrita pura */
    letter-spacing: 0.5px;
}

.tarjeta-minera p {
    margin: 0;
    font-size: 9.5px;
    color: #475569;
    line-height: 1.4;
    font-weight: 500;
}

/* SECCIÓN LATERAL DERECHA: Módulo para autenticación perimetral y control de accesos seguro */
.portal-access-side {
    width: 40%;
    background: radial-gradient(circle at top right, #1e293b 0%, #0f172a 100%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 60px 50px;
    box-shadow: -10px 0 30px rgba(0,0,0,0.3);
    box-sizing: border-box;
    position: relative;
}

/* Indicador de cabecera con línea vertical sólida */
.contenedor-titulo-rojo {
    border-left: 5px solid #dc2626;
    padding-left: 15px;
    margin-bottom: 25px;
}

.portal-access-side h3 {
    margin: 0;
    font-size: 16px;
    color: #ffffff;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.8px;
}

.p-bienvenida { 
    font-size: 14px; 
    color: rgba(241, 245, 249, 0.95);
    line-height: 1.6; 
    margin-bottom: 40px; 
    font-weight: 400; 
}
.p-bienvenida strong {
    color: #ffffff;
    font-weight: 600;
}

/* CONTROL DE INTERACCIÓN: Botón de ingreso con relieve lineal y transición de color */
.btn-ingresar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 54px;
    background: linear-gradient(180deg, #dc2626, #991b1b);
    color: #ffffff;
    text-decoration: none;
    font-weight: 700;
    border-radius: 8px;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 0 4px 12px rgba(200, 40, 40, 0.3);
    transition: background 0.2s ease;
    box-sizing: border-box;
    border: 1px solid #b91c1c;
}

.btn-ingresar:hover { 
    background: linear-gradient(180deg, #ef4444, #dc2626); 
    box-shadow: 0 6px 15px rgba(200, 40, 40, 0.4);
}

/* CONTROL DE CONTROL DE VERSIONES Y DERECHOS RESERVADOS */
.footer-aviso-unificado {
    font-size: 10px;
    color: #64748b;
    width: 100%;
    text-align: center;
    position: absolute;
    bottom: 30px;
    left: 0;
    font-weight: 500;
    letter-spacing: 0.5px;
}
/* ==========================================================================
   INTERACCIÓN DINÁMICA PREMIUM PARA LAS TARJETAS DEL MENÚ PRINCIPAL
   ========================================================================== */

/* Añade un sutil degradado hacia el blanco tipo cristal y una sombra suave de base */
.tarjetas-grid .tarjeta {
    background-image: linear-gradient(135deg, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0) 100%) !important;
    box-shadow: 0 8px 20px -6px rgba(0,0,0,0.1) !important;
    border-width: 1px !important;
    border-style: solid !important;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease !important;
}

/* EFECTO HOVER: Eleva las tarjetas exactamente 3px y potencia la sombra tridimensional */
.tarjetas-grid .tarjeta:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 16px 30px -8px rgba(0,0,0,0.15) !important;
    filter: brightness(1.02) !important;
}

/* Modificadores de bordes cromáticos vivos alineados con tus clases nativas */
.tarjeta-ingresos { border-color: #22c55e !important; }
.tarjeta-egresos { border-color: #ef4444 !important; }
.tarjeta-personal { border-color: #2563eb !important; }
.tarjeta-auditoria { border-color: #f97316 !important; }

/* Efecto de micro-escala para el círculo blanco interno al pasar el mouse */
.tarjetas-grid .tarjeta:hover .tarjeta-icono {
    transform: scale(1.06) !important;
    background: rgba(255,255,255,0.9) !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05) !important;
}
/* ==========================================================================
   MÓDULO DE IMPRESIÓN Y RENDERIZADO DEL REPORTE ERP (reporte.html)
   ========================================================================== */

/* REQUISITO DE IMPRESIÓN: Elimina las cabeceras, fechas y URLs automáticas del navegador */
@media print {
    @page { 
        margin: 0; 
    }
}

/* ENTORNO HOJA: Configuración global para asegurar la escala exacta sobre el papel blanco */
.body-reporte-pdf { 
    font-family: 'Inter', system-ui, -apple-system, sans-serif !important; 
    color: #1e293b !important; 
    padding: 40px 45px !important; 
    background: #ffffff !important; 
    margin: 0 !important;
    line-height: 1.4 !important;
}

/* CABECERA ERP: Distribución en bloque para alinear los logotipos y títulos principales */
.erp-cabecera-grid {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    position: relative;
}
.erp-logo-bloque { display: flex; align-items: center; gap: 15px; }
.erp-icono-institucion { font-size: 42px; color: #1e3a8a; }

/* JERARQUÍA TIPOGRÁFICA: Negritas fuertes de alta fidelidad para el tribunal de tesis */
.erp-texto-empresa h1 { margin: 0; font-size: 28px; font-weight: 900 !important; color: #dc2626; letter-spacing: -0.5px; }
.erp-texto-empresa h2 { margin: 2px 0 0; font-size: 12px; color: #1e3a8a; font-weight: 800 !important; }
.erp-texto-empresa p { margin: 3px 0 0; font-size: 10px; color: #64748b; font-weight: 700 !important; }

/* CASILLERO DE CONTROL: Tarjeta superior derecha con borde sólido de seguimiento */
.erp-tarjeta-codigo {
    border: 2px solid #cbd5e1 !important;
    border-radius: 12px;
    padding: 10px 20px !important;
    text-align: center;
    background: #ffffff !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
}
.erp-tarjeta-codigo h4 { margin: 0; font-size: 9px; color: #475569; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; }
.erp-tarjeta-codigo p { margin: 3px 0 0; font-size: 15px; color: #0f172a; font-weight: 900 !important; }

/* FILA DE METADATOS: Cintillos horizontales de periodos con gradientes de color forzados */
.erp-bloque-tarjetas {
    display: flex;
    gap: 15px;
    margin-bottom: 25px;
}
.erp-card-mini {
    flex: 1;
    padding: 12px 18px;
    border-radius: 10px;
    color: #ffffff !important;
    display: flex;
    align-items: center;
    gap: 12px;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
}
.erp-card-mini .card-icon { font-size: 24px; opacity: 0.9; }
.erp-card-mini .card-info { display: flex; flex-direction: column; }
.erp-card-mini .card-info span { font-size: 9px; font-weight: 800 !important; text-transform: uppercase; opacity: 0.85; letter-spacing: 0.5px; }
.erp-card-mini .card-info strong { font-size: 14px; font-weight: 800 !important; }

.bg-azul-puyol { background: linear-gradient(135deg, #2563eb, #1d4ed8) !important; }
.bg-verde-puyol { background: linear-gradient(135deg, #16a34a, #15803d) !important; }
.bg-rojo-puyol { background: linear-gradient(135deg, #dc2626, #b91c1c) !important; }

.erp-titulo-tabla { font-size: 13px; font-weight: 800 !important; color: #1e3a8a; margin-top: 20px; margin-bottom: 12px; text-transform: uppercase; letter-spacing: 0.5px; display: flex; align-items: center; gap: 6px; }

/* TABLA RELACIONAL PDF: Formato formal impreso con cabecera oscura y celdas cerradas */
.tabla-erp-datos { width: 100%; border-collapse: collapse; margin-bottom: 20px; font-size: 11px; background: #ffffff !important; }
.tabla-erp-datos th { 
    background-color: #0c4a6e !important; 
    color: #ffffff !important; 
    padding: 11px 10px; 
    text-align: left; 
    font-weight: 800 !important; 
    text-transform: uppercase; 
    font-size: 10px; 
    letter-spacing: 0.5px; 
    border: 1px solid #0c4a6e;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
}
.tabla-erp-datos td { padding: 11px 10px; border: 1px solid #cbd5e1; color: #334155; vertical-align: middle; background: #ffffff !important; }
.tabla-erp-datos tr:nth-child(even) td { 
    background-color: #f8fafc !important; 
}
.tabla-erp-datos td strong { font-weight: 800 !important; }

/* CÁPSULAS TRANSACCIONALES: Distintivos de color sólido para la bitácora impreso */
.erp-capsula-in {
    background-color: #16a34a !important;
    color: #ffffff !important;
    font-weight: 800 !important;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 9px;
    display: inline-block;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
}
.erp-capsula-eg {
    background-color: #dc2626 !important;
    color: #ffffff !important;
    font-weight: 800 !important;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 9px;
    display: inline-block;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
}

/* RECUADRO DEL GRÁFICO: Caja neumórfica con fondo gris traslúcido suave */
.contenedor-grafico-pie-erp {
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%) !important;
    border: 2px solid #0c4a6e !important;
    border-radius: 16px;
    padding: 24px;
    margin-top: 15px;
    margin-bottom: 20px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
}

/* DIAGRAMA DE DONA: Círculo exterior para el renderizado del conic-gradient de Jinja */
.pie-grafico-circulo {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    border: 2px solid #64748b;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
}
.centro-dona-blanco {
    width: 70px;
    height: 70px;
    background: #ffffff !important;
    border-radius: 50%;
    border: 1px solid #cbd5e1;
    position: absolute;
    z-index: 10;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
}

.pie-leyendas-box { display: flex; flex-direction: column; gap: 12px; width: 55%; }
.leyenda-item-erp {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 11px;
    font-weight: 700;
    background: #ffffff !important;
    padding: 10px 14px;
    border-radius: 10px;
    border: 1px solid #cbd5e1;
}
.leyenda-item-erp span strong { font-weight: 800 !important; }
.leyenda-color-tag { display: flex; align-items: center; gap: 12px; }
.cuadrito-color {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
}

/* RESUMEN FINAL: Bloques inferiores de balances de cierre */
.erp-balances-container {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    margin-top: 20px;
    width: 100%;
}
.erp-card-balance {
    flex: 1;
    border: 1px solid #cbd5e1;
    border-radius: 12px;
    padding: 15px;
    display: flex;
    align-items: center;
    gap: 15px;
    background: #ffffff !important;
}
.erp-circulo-icono {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    color: #ffffff !important;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
}
.erp-info-balance { display: flex; flex-direction: column; }
.erp-info-balance span { font-size: 10px; font-weight: 800 !important; color: #475569; text-transform: uppercase; letter-spacing: 0.5px; }
.erp-info-balance h3 { margin: 2px 0 0; font-size: 20px; font-weight: 900 !important; }

.bg-circulo-ingreso { background: linear-gradient(135deg, #16a34a, #15803d) !important; border: 1px solid #15803d; }
.bg-circulo-egreso { background: linear-gradient(135deg, #dc2626, #b91c1c) !important; border: 1px solid #b91c1c; }
.bg-circulo-balance { background: linear-gradient(135deg, #1d4ed8, #1e40af) !important; border: 1px solid #1e40af; }

.erp-firma-seccion { margin-top: 35px; text-align: center; border-top: 1px solid #e2e8f0; padding-top: 15px; }
.erp-firma-linea { width: 250px; border-top: 1px solid #475569; margin: 35px auto 5px auto; padding-top: 5px; font-weight: bold; font-size: 11px; color: #0f172a; }
/* ==========================================================================
   MÓDULO DE IMPRESIÓN Y REDISEÑO SEPARADO PARA EL REPORTE PDF (reporte.html)
   ========================================================================== */

/* 1. AISLAMIENTO TOTAL: Forzamos el lienzo blanco sobre la clase específica eliminando el fondo de la intranet */
body.body-reporte-pdf {
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #1e293b !important;
    padding: 50px 60px !important; /* Separación elegante de los filos del papel */
    margin: 0 !important;
    min-height: 100vh !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
}

/* 2. BLOQUEO DE ENGRANAJES: Apaga por completo los vectores transparentes para que no manchen el papel */
body.body-reporte-pdf::before, 
body.body-reporte-pdf::after {
    content: "" !important;
    display: none !important;
}

/* 3. MAQUETACIÓN ESTRUCTURAL INTERNA DEL REPORTE ERP */
.franja-marca-pdf { 
    height: 6px; 
    background-color: #dc2626 !important; /* Color sólido forzado de alta visibilidad */
    margin-bottom: 20px; 
    border-radius: 10px; 
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
}
.erp-cabecera-grid { display: flex !important; justify-content: space-between !important; align-items: center !important; margin-bottom: 20px !important; width: 100% !important; }
.erp-logo-bloque { display: flex !important; align-items: center !important; gap: 15px !important; }
.erp-icono-institucion { font-size: 38px !important; color: #1e3a8a !important; }
.erp-texto-empresa h1 { margin: 0 !important; font-size: 26px !important; font-weight: 900 !important; color: #dc2626 !important; }
.erp-texto-empresa h2 { margin: 2px 0 0 !important; font-size: 11px !important; color: #1e3a8a !important; font-weight: 800 !important; }
.erp-texto-empresa p { margin: 3px 0 0 !important; font-size: 9px !important; color: #64748b !important; font-weight: 700 !important; }

.erp-tarjeta-codigo { border: 2px solid #cbd5e1 !important; border-radius: 10px !important; padding: 8px 15px !important; text-align: center !important; background: #ffffff !important; }
.erp-tarjeta-codigo h4 { margin: 0 !important; font-size: 8px !important; color: #475569 !important; font-weight: 700 !important; }
.erp-tarjeta-codigo p { margin: 2px 0 0 !important; font-size: 13px !important; color: #0f172a !important; font-weight: 900 !important; }

/* FILA DE METADATOS: Rejilla matemática estricta que fuerza a que las 3 tarjetas midan exactamente el mismo tamaño */
.erp-bloque-tarjetas { 
    display: grid !important; 
    grid-template-columns: repeat(3, 1fr) !important; 
    gap: 15px !important; 
    margin-bottom: 25px !important; 
    width: 100% !important; 
}

/* COMPONENTES DE PERIODOS: Tarjetas con bordes planos formales (sin redondeados informales) para tesis */
.erp-card-mini { 
    flex: 1 !important; 
    padding: 12px 15px !important; 
    border-radius: 4px !important; /* Bordes planos profesionales estilo corporativo ERP */
    color: #ffffff !important; 
    display: flex !important; 
    align-items: center !important; 
    gap: 12px !important; 
    height: 45px !important; /* Altura idéntica estandarizada */
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
}
.erp-card-mini .card-info strong { font-size: 13px !important; font-weight: 800 !important; color: #ffffff !important; }
.erp-card-mini .card-info span { font-size: 8px !important; font-weight: 700 !important; color: #ffffff !important; letter-spacing: 0.5px; }

/* Forzado de fondos limpios para los tres cintillos sin usar degradados en el papel */
.bg-azul-puyol { background-color: #2563eb !important; background: #2563eb !important; }
.bg-verde-puyol { background-color: #16a34a !important; background: #16a34a !important; }
.bg-rojo-puyol { background-color: #dc2626 !important; background: #dc2626 !important; }

.erp-titulo-tabla { font-size: 12px !important; font-weight: 800 !important; color: #1e3a8a !important; margin-top: 15px !important; margin-bottom: 10px !important; text-transform: uppercase !important; }

/* Formato formal de la tabla relacional de auditoría */
.tabla-erp-datos { width: 100% !important; border-collapse: collapse !important; margin-bottom: 15px !important; font-size: 11px !important; background: #ffffff !important; }
.tabla-erp-datos th { background-color: #0c4a6e !important; color: #ffffff !important; padding: 10px !important; font-weight: 800 !important; text-transform: uppercase !important; border: 1px solid #0c4a6e !important; }
.tabla-erp-datos td { padding: 10px !important; border: 1px solid #cbd5e1 !important; color: #334155 !important; background: #ffffff !important; }
.tabla-erp-datos tr:nth-child(even) td { background-color: #f8fafc !important; }
.tabla-erp-datos td strong, .leyenda-item-erp span strong { font-weight: 800 !important; }

.erp-capsula-in { background-color: #16a34a !important; color: #ffffff !important; font-weight: 800 !important; padding: 4px 12px; border-radius: 20px; font-size: 9px; display: inline-block; }
.erp-capsula-eg { background-color: #dc2626 !important; color: #ffffff !important; font-weight: 800 !important; padding: 4px 12px; border-radius: 20px; font-size: 9px; display: inline-block; }

/* Contenedores de la dona matemática de Jinja */
.contenedor-grafico-pie-erp { background-color: #f1f5f9 !important; border: 2px solid #0c4a6e !important; border-radius: 12px !important; padding: 15px !important; display: flex !important; justify-content: space-around !important; align-items: center !important; margin-bottom: 15px !important; width: 100% !important; -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }

/* TRUCO ACADÉMICO PARA LA DONA: Forzado estricto del gradiente cónico para que el motor de Chrome lo pinte obligatoriamente */
.pie-grafico-circulo { 
    width: 110px !important; 
    height: 110px !important; 
    border-radius: 50% !important; 
    display: flex !important; 
    justify-content: center !important; 
    align-items: center !important; 
    position: relative !important; 
    border: 2px solid #64748b !important; 
    -webkit-print-color-adjust: exact !important; 
    print-color-adjust: exact !important; 
}
.centro-dona-blanco { width: 60px !important; height: 60px !important; background-color: #ffffff !important; background: #ffffff !important; border-radius: 50% !important; position: absolute !important; z-index: 10 !important; -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }

.pie-leyendas-box { display: flex !important; flex-direction: column !important; gap: 8px !important; width: 55% !important; }
.leyenda-item-erp { display: flex !important; justify-content: space-between !important; background-color: #ffffff !important; background: #ffffff !important; padding: 8px 12px !important; border-radius: 8px !important; border: 1px solid #cbd5e1 !important; font-size: 11px !important; -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
.cuadrito-color { width: 16px !important; height: 16px !important; border-radius: 50% !important; -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }

/* Cuadrantes inferiores del estado contable resumen */
.erp-balances-container { display: flex !important; justify-content: space-between !important; gap: 12px !important; width: 100% !important; }
.erp-card-balance { flex: 1 !important; border: 1px solid #cbd5e1 !important; border-radius: 10px !important; padding: 12px !important; display: flex !important; align-items: center !important; gap: 10px !important; background-color: #ffffff !important; background: #ffffff !important; }
.erp-circulo-icono { width: 36px !important; height: 36px !important; border-radius: 50% !important; display: flex !important; justify-content: center !important; align-items: center !important; -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }

.bg-circulo-ingreso { background-color: #16a34a !important; background: #16a34a !important; color: white !important; }
.bg-circulo-egreso { background-color: #dc2626 !important; background: #dc2626 !important; color: white !important; }
.bg-circulo-balance { background-color: #1d4ed8 !important; background: #1d4ed8 !important; color: white !important; }

.erp-info-balance span { font-size: 10px !important; font-weight: 800 !important; color: #475569 !important; text-transform: uppercase; }
.erp-info-balance h3 { font-size: 18px !important; font-weight: 900 !important; margin: 0 !important; }

/* 4. SECCIÓN DE FIRMAS: Margen amplio hacia abajo requerido en el monitor */
.erp-firma-seccion { margin-top: 95px !important; text-align: center !important; width: 100% !important; }
.erp-firma-linea { width: 200px !important; border-top: 1px solid #475569 !important; margin: 30px auto 5px auto !important; }

/* 5. FILTRO MÁSTER DE PÁGINA: Forzado de corte e inyección limpia para quitar las direcciones de las esquinas */
@media print {
    @page { size: auto; margin: 0mm !important; }
}