gazhal-ui.css:root {

    /* ===== COLORES CORPORATIVOS ===== */

    --gzl-primary: #0f2f76;
    --gzl-primary-light: #42a5f5;

    --gzl-success: #2e7d32;
    --gzl-danger: #c62828;
    --gzl-warning: #ef6c00;

    --gzl-bg-light: #f5f7fb;
    --gzl-border: #e6e9ef;

    /* ===== SOMBRAS ===== */

    --gzl-shadow-sm: 0 4px 14px rgba(0,0,0,.06);
    --gzl-shadow-md: 0 8px 22px rgba(0,0,0,.10);

    /* ===== BORDES ===== */

    --gzl-radius: 14px;

}
/* ============================= */
/* GAZHAL UI SYSTEM */
/* ============================= */

/* ===== BOTONES ===== */

.btn-gzl {
    background: var(--gzl-primary);
    color: #fff;
    border-radius: var(--gzl-radius);
    padding: 8px 18px;
    border: none;
    font-weight: 500;
    transition: .25s ease;
}

.btn-gzl:hover {
    background: var(--gzl-primary-light);
    color: #fff;
}

.btn-outline-gzl {
    border: 1px solid var(--gzl-primary);
    color: var(--gzl-primary);
    background: transparent;
    border-radius: var(--gzl-radius);
    padding: 8px 18px;
    transition: .25s ease;
}

.btn-outline-gzl:hover {
    background: var(--gzl-primary);
    color: #fff;
}

.btn-danger-gzl {
    background: var(--gzl-danger);
    color: #fff;
    border-radius: var(--gzl-radius);
    padding: 8px 18px;
    border: none;
}

.btn-danger-gzl:hover {
    background: #b71c1c;
}

.btn-success-gzl {
    background: var(--gzl-success);
    color: #fff;
    border-radius: var(--gzl-radius);
    padding: 8px 18px;
    border: none;
}

.btn-success-gzl:hover {
    background: #1b5e20;
}
/* ============================= */
/* BOTONES MINI GAZHAL */
/* ============================= */

.btn-gzl-mini {
    background: var(--gzl-primary) !important;
    color: #fff !important;
    border-radius: 8px !important;
    padding: 3px 8px !important;
    font-size: 11px !important;
    font-weight: 500;
    border: none !important;
    line-height: 1.2 !important;
    display: inline-block !important;
    text-decoration: none !important;
}

.btn-gzl-mini:hover {
    background: var(--gzl-primary-light) !important;
    color: #fff !important;
}

.btn-gzl-mini-success {
    background: #25D366 !important;
    color: #fff !important;
    border-radius: 8px !important;
    padding: 3px 7px !important;
    font-size: 11px !important;
    border: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    text-decoration: none !important;
}

.btn-gzl-mini-success:hover {
    background: #1ebe5d !important;
    color: #fff !important;
}

/* Espaciado entre botones mini */
.btn-gzl-mini + .btn-gzl-mini-success,
.btn-gzl-mini + .btn-gzl-mini,
.btn-gzl-mini-success + .btn-gzl-mini {
    margin-left: 6px;
}

.btn-gzl-mini-danger {
    background: var(--gzl-danger) !important;
    color: #fff !important;
    border-radius: 8px !important;
    padding: 3px 7px !important;
    font-size: 11px !important;
    border: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    text-decoration: none !important;
}

.btn-gzl-mini-danger:hover {
    background: #b71c1c !important;
}
.btn-gzl-mini-warning{
    background:var(--gzl-warning) !important;
    color:white !important;
    border-radius:8px !important;
    padding:3px 7px !important;
    font-size:11px !important;
}
/* ===============================
   BOTÓN MINI OUTLINE GAZHAL
================================= */

.btn-gzl-mini-outline {
    display: inline-block;
    padding: 4px 12px;
    font-size: 12px;
    border-radius: 18px;
    border: 1px solid var(--gzl-primary);
    color: var(--gzl-primary);
    background: transparent;
    text-decoration: none;
    transition: all .2s ease;
}

.btn-gzl-mini-outline:hover {
    background: var(--gzl-primary);
    color: #fff;
}

/* ============================= */
/* BADGES SEM�FORO GAZHAL */
/* ============================= */
.badge-gzl {
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    display: inline-block;
}
/* 🟢 VERDE */
.badge-gzl-success {
    background: #e6f4ea;
    color: var(--gzl-success);
    padding: 5px 10px;
    border-radius: 20px;
    font-size: 12px;
}
/* 🔴 ROJO */
.badge-gzl-danger {
    background: #fdecea;
    color: var(--gzl-danger);
    padding: 5px 10px;
    border-radius: 20px;
    font-size: 12px;
}
/* 🟡 AMARILLO */
.badge-gzl-warning {
    background: #fff3e0;
    color: var(--gzl-warning);
    padding: 5px 10px;
    border-radius: 20px;
    font-size: 12px;
}


/* ===== CARDS ===== */

.gzl-card {
    background: #fff;
    border-radius: var(--gzl-radius);
    padding: 24px;
    box-shadow: var(--gzl-shadow-sm);
    border: 1px solid var(--gzl-border);
}

.gzl-card:hover {
    box-shadow: var(--gzl-shadow-md);
}

/* ===== FILTROS EJECUTIVOS ===== */

.filtros-ejecutivo {
    background: #fff;
    padding: 18px;
    border-radius: var(--gzl-radius);
    box-shadow: var(--gzl-shadow-sm);
    margin-bottom: 20px;
}

.form-inline-ejecutivo {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    align-items: flex-end;
}

/* ===== TABLAS UNIFICADAS ===== */

.table-gzl thead {
    background: var(--gzl-bg-light);
}

.table-gzl tbody tr:hover {
    background: #f9fbff;
}

/* ============================= */
/* TABS GAZHAL */
/* ============================= */

.nav-tabs {
    border-bottom: 1px solid var(--gzl-border);
}

.nav-tabs .nav-link {
    color: var(--gzl-primary);
    border-radius: var(--gzl-radius) var(--gzl-radius) 0 0;
    padding: 8px 18px;
    font-weight: 500;
}

.nav-tabs .nav-link:hover {
    background: #eef3ff;
}

.nav-tabs .nav-link.active {
    background: var(--gzl-primary);
    color: #fff !important;
    box-shadow: var(--gzl-shadow-sm);
}
/* ===============================
   TOOLBAR SUSCRIPTORES
================================= */

.gzl-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0 18px 0;
    border-bottom: 1px solid #e5e7eb;
}

.gzl-toolbar-left {
    display: flex;
    gap: 10px;
}

.gzl-toolbar-right {
    display: flex;
    justify-content: flex-end;
}

/* Botones de filtro */
.gzl-filter-btn {
    display: inline-block;
    padding: 6px 14px;
    font-size: 13px;
    border-radius: 20px;
    border: 1px solid #d1d5db;
    background: #f9fafb;
    color: #374151;
    text-decoration: none;
    transition: all .2s ease;
}

.gzl-filter-btn:hover {
    background: #eef2ff;
    border-color: #42a5f5;
    color: #0f2f76;
}

.gzl-filter-btn.active {
    background: #0f2f76;
    color: #fff;
    border-color: #0f2f76;
}
/* ===============================
   BUSCADOR GLOBAL
================================= */

.gzl-search-form {
    position: relative;
}

.gzl-search-input {
    height: 34px;
    padding: 6px 12px;
    border-radius: 20px;
    border: 1px solid #d1d5db;
    font-size: 13px;
    min-width: 220px;
    transition: all .2s ease;
}

.gzl-search-input:focus {
    outline: none;
    border-color: #42a5f5;
    box-shadow: 0 0 0 2px rgba(66,165,245,.2);
}

/* ===== MÓDULO FINANZAS ===== */

.card-gzl{
    background:white;
    padding:16px;
    border-radius:12px;
    box-shadow:0 3px 12px rgba(0,0,0,.06);
}

.table-gzl{
    width:100%;
    border-collapse:collapse;
    font-size:14px;
}

.table-gzl th{
    background:#0f2f76;
    color:white;
    padding:10px;
}

.table-gzl td{
    padding:8px;
    border-bottom:1px solid #eee;
	vertical-align: middle;
}

.table-gzl tr:hover{
    background:#f3f6ff;
}

.filtros-gzl{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
    align-items:end;
}
.modal-gzl {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    z-index: 9999;
    padding: 40px 15px;
    overflow-y: auto;
}

.modal-gzl-box {
    background: #fff;
    max-width: 600px;
    margin: auto;
    padding: 24px;
    border-radius: var(--gzl-radius);
    box-shadow: var(--gzl-shadow-md);
}

/* ===== TOOLBAR GASTOS ===== */

.acciones-gastos {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 20px;
}

.accion-principal {
    display: flex;
    align-items: center;
}

.importaciones {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.importaciones form {
    display: flex;
    align-items: center;
    gap: 6px;
}
.importaciones-card {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 14px 18px;
}

.importaciones-card form {
    display: flex;
    align-items: center;
    gap: 8px;
}

.importaciones-card input[type="file"] {
    font-size: 12px;
}

/* ============================= */
/* SISTEMA NORMATIVO GAZHAL */
/* ============================= */

.norma-titulo{
color:var(--gzl-primary);
font-weight:600;
margin-bottom:10px;
}

.norma-articulo-num{
color:#1f4e79;
font-weight:600;
margin-bottom:14px;
}

.norma-texto{
font-size:15px;
line-height:1.7;
color:#2c3e50;
}

/* ===== LINKS NORMATIVOS ===== */

.link-normativo{
color:var(--gzl-primary);
font-weight:600;
text-decoration:none;
border-bottom:1px dashed var(--gzl-primary);
padding-bottom:1px;
transition:.2s ease;
}

.link-normativo:hover{
color:var(--gzl-primary-light);
border-bottom:1px solid var(--gzl-primary-light);
}

/* ===== HERRAMIENTAS DEL ARTÍCULO ===== */

.norma-tools{
margin-top:20px;
display:flex;
gap:10px;
}

/* ============================= */
/* COMENTARIOS NORMATIVOS */
/* ============================= */

.comentario-normativo{
margin-top:12px;
padding:12px;
background:#fafbfd;
border-left:4px solid var(--gzl-primary);
border-radius:6px;
}
/* ============================= */
/* VISOR DE LEYES GAZHAL */
/* ============================= */

.norma-layout{
display:flex;
gap:25px;
}

.norma-sidebar{
width:260px;
background:#fff;
padding:18px;
border-radius:var(--gzl-radius);
box-shadow:var(--gzl-shadow-sm);
height:85vh;
overflow:auto;
}

.norma-sidebar h3{
color:var(--gzl-primary);
font-weight:600;
margin-bottom:15px;
}

.norma-menu{
list-style:none;
padding:0;
margin:0;
}

.norma-menu li{
margin-bottom:6px;
}

.norma-menu a{
text-decoration:none;
color:#2c3e50;
font-size:14px;
}

.norma-menu a:hover{
color:var(--gzl-primary);
}

/* ===== CONTENIDO ===== */

.norma-contenido{
flex:1;
background:#fff;
padding:25px;
border-radius:var(--gzl-radius);
box-shadow:var(--gzl-shadow-sm);
}

.norma-bloque{
margin-top:20px;
}

.norma-articulo{
margin-top:25px;
padding-bottom:18px;
border-bottom:1px solid #eee;
}

.norma-texto{
font-size:15px;
line-height:1.7;
color:#2c3e50;
margin-top:8px;
}

.norma-reforma{
color:var(--gzl-danger);
font-weight:600;
margin-top:4px;
margin-bottom:6px;
}

.norma-tools{
margin-top:10px;
display:flex;
gap:10px;
}
/* VARIANTES DE BOTONES */

.btn-gzl-success{
    background:var(--gzl-success);
}

.btn-gzl-danger{
    background:var(--gzl-danger);
}

.btn-gzl-warning{
    background:var(--gzl-warning);
}

.btn-gzl-outline{
    background:transparent;
    border:1px solid var(--gzl-primary);
    color:var(--gzl-primary);
}
/* =======================================
   DOF MONITOR
======================================= */

.titulo-panel{
    margin-bottom:15px;
    color:#2c3e50;
}

/* Panel DOF */

.panel-dof{
    background:#ffffff;
    border-radius:10px;
    box-shadow:0 2px 8px rgba(0,0,0,.08);
    border:1px solid #e5e7eb;
    overflow:hidden;
}

/* Tabla */

.panel-dof table{
    width:100%;
    border-collapse:collapse;
    font-size:14px;
}

.panel-dof th{
    background:#f8fafc;
    color:#34495e;
    text-align:left;
    padding:12px;
    border-bottom:1px solid #e5e7eb;
}

.panel-dof td{
    padding:12px;
    border-bottom:1px solid #f0f2f5;
}

.panel-dof tr:hover{
    background:#f9fbfd;
}

/* Badge edición */

.badge{
    padding:4px 8px;
    border-radius:12px;
    font-size:12px;
    font-weight:bold;
}

.badge-mat{
    background:#e3f2fd;
    color:#1976d2;
}

.badge-ves{
    background:#fff3e0;
    color:#ef6c00;
}

/* Botones */

.btn-revisar{
    background:#1f4e79;
    color:white;
    padding:6px 12px;
    border-radius:6px;
    text-decoration:none;
    font-size:13px;
    transition:.2s;
}

.btn-revisar:hover{
    background:#163a5a;
}

/* Totales */

.total{
    font-weight:bold;
    color:#2c3e50;
}

/* Botón aprobados */

.btn-aprobados-mini{
    background:#e3f2fd;
    color:#1f4e79;
    padding:6px 10px;
    border-radius:20px;
    text-decoration:none;
    font-size:13px;
    font-weight:bold;
}

.btn-aprobados-mini:hover{
    background:#1f4e79;
    color:white;
}
/* ACCIONES EN TABLAS */

.acciones-tabla{
display:flex;
gap:6px;
align-items:center;
white-space:nowrap;
}
.table-gzl td:last-child{
    white-space:nowrap;
}
/* CONTADOR PUBLICACIONES DOF */

.badge-count{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    width:32px;
    height:22px;

    border-radius:12px;
    font-size:12px;
    font-weight:600;

    background:#eef2ff;
    color:#1f4e79;
}

/* fuerza color uniforme */

.badge-count,
.badge-count a{
    color:#1f4e79 !important;
    text-decoration:none;
}
.badge-count-alto{
background:#e3f2fd;
color:#1565c0;
}

.badge-count-muyalto{
background:#fdecea;
color:#c62828;
}
/* AJUSTES MONITOR DOF */

.panel-header{
    margin-bottom:10px;
}
/* ==============================
   MONITOR DOF
============================== */

.dof-monitor .gzl-card{
    padding:18px;
}

.dof-monitor .filtros-ejecutivo{
    padding:14px 18px;
    margin-bottom:12px;
}

.dof-monitor .table-gzl td{
    padding:6px 10px;
}

.dof-monitor .table-gzl th{
    padding:8px 10px;
}
.dof-monitor .badge-count{
    width:34px;
    height:22px;
}
.dof-monitor .panel-header{
    margin-top:0;
}
.dof-monitor .table-gzl td:nth-child(4),
.dof-monitor .table-gzl th:nth-child(4){
    text-align:center;
}
.dof-monitor .table-gzl th{
    white-space:nowrap;
}
/* ============================= */
/* CONFRONTAS NORMATIVAS */
/* ============================= */

.texto-anterior{
background:#ffecec;
padding:14px;
border-left:4px solid #c62828;
border-radius:6px;
}

.texto-nuevo{
background:#eaffea;
padding:14px;
border-left:4px solid #2e7d32;
border-radius:6px;
}
.crm-layout{
display:flex;
gap:20px;
align-items:flex-start;
margin-top:15px;
}

.crm-lista{
width:40%;
background:white;
border-radius:var(--gzl-radius);
padding:14px;
box-shadow:var(--gzl-shadow-sm);
}

.crm-perfil{
width:60%;
background:white;
border-radius:var(--gzl-radius);
padding:18px;
box-shadow:var(--gzl-shadow-sm);
min-height:300px;
}

.crm-toolbar{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:12px;
}

.crm-toolbar-left{
display:flex;
gap:8px;
}

.crm-toolbar-right{
display:flex;
align-items:center;
}

.crm-search{
padding:7px 12px;
border:1px solid var(--gzl-border);
border-radius:20px;
min-width:220px;
}

.crm-placeholder{
padding:60px;
text-align:center;
color:#888;
font-size:14px;
}

/* ============================= */
/* CRM OVERLAY */
/* ============================= */

#crmOverlay{
position:fixed;
top:80px;
right:20px;
width:520px;
max-width:90%;
max-height:80vh;

background:white;
box-shadow:-6px 0 20px rgba(0,0,0,.15);
border-radius:12px;

display:none;
z-index:9999;

padding:20px;
overflow:auto;
}

#crmOverlayContenido{
max-width:100%;
}

#crmOverlayContenido .container,
#crmOverlayContenido .container-fluid{
padding:0;
margin:0;
}

#crmCerrar{
margin-top:20px;
}