/* =====================================================================
   Sistema de Administración de Cuotas: hoja de estilos única
   Tipografía: IBM Plex Sans (única familia en web y PDF)
   ===================================================================== */

@font-face {
    font-family: 'IBM Plex Sans';
    src: url('fuentes/ibmplexsans-400.woff2') format('woff2');
    font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'IBM Plex Sans';
    src: url('fuentes/ibmplexsans-600.woff2') format('woff2');
    font-weight: 500 800; font-style: normal; font-display: swap;
}

:root {
    --sis-tinta:      #17212f;
    --sis-texto:      #2b3544;
    --sis-suave:      #5d6878;
    --sis-linea:      #d7dce3;
    --sis-linea-2:    #e9ecf0;
    --sis-fondo:      #f2f4f7;
    --sis-papel:      #ffffff;
    --sis-azul:       #1f3a5f;
    --sis-azul-osc:   #152a45;
    --sis-azul-claro: #e8eef5;
    --sis-verde:      #2b6a47;  --sis-verde-fondo: #e5f0e9;
    --sis-rojo:       #962d2d;  --sis-rojo-fondo:  #f6e6e6;
    --sis-ambar:      #85580a;  --sis-ambar-fondo: #faf0da;

    --bs-body-font-family: 'IBM Plex Sans', 'Segoe UI', Arial, sans-serif;
    --bs-font-sans-serif:  'IBM Plex Sans', 'Segoe UI', Arial, sans-serif;
    --bs-body-color: var(--sis-texto);
    --bs-body-bg: var(--sis-fondo);
    --bs-border-color: var(--sis-linea);
    --bs-border-radius: 4px;
    --bs-border-radius-sm: 3px;
    --bs-border-radius-lg: 6px;
    --bs-border-radius-pill: 4px;
    --bs-primary: #1f3a5f;   --bs-primary-rgb: 31, 58, 95;
    --bs-success: #2b6a47;   --bs-success-rgb: 43, 106, 71;
    --bs-danger:  #962d2d;   --bs-danger-rgb: 150, 45, 45;
    --bs-warning: #85580a;   --bs-warning-rgb: 133, 88, 10;
    --bs-info:    #3e5c7e;   --bs-info-rgb: 62, 92, 126;
    --bs-dark:    #17212f;   --bs-dark-rgb: 23, 33, 47;
    --bs-link-color: #1f3a5f; --bs-link-color-rgb: 31, 58, 95;
    --bs-link-hover-color: #152a45;
}

/* ---------- Base ---------- */
html, body { background: var(--sis-fondo) !important; }
body {
    font-family: var(--bs-body-font-family) !important;
    font-size: 15px; line-height: 1.5; color: var(--sis-texto);
    font-variant-numeric: tabular-nums;
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: inherit; color: var(--sis-tinta); font-weight: 600; letter-spacing: -0.005em;
}
.fw-bold, b, strong, th { font-weight: 600 !important; }
.text-uppercase { text-transform: none !important; }
.text-muted, .text-secondary { color: var(--sis-suave) !important; }
.text-success { color: var(--sis-verde) !important; }
.text-danger  { color: var(--sis-rojo) !important; }
.text-primary { color: var(--sis-azul) !important; }
.text-warning { color: var(--sis-ambar) !important; }
.text-info    { color: var(--bs-info) !important; }
.bg-light     { background-color: var(--sis-fondo) !important; }
.shadow, .shadow-sm, .shadow-lg { box-shadow: none !important; }
.opacity-75 { opacity: 1 !important; }
a { text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid #5b87bd !important; outline-offset: 2px; }

/* ---------- Cabecera institucional ---------- */
.sis-cabecera { background: var(--sis-papel); border-bottom: 1px solid var(--sis-linea); }
.sis-cabecera .container { display: flex; align-items: center; gap: 14px; padding-top: 14px; padding-bottom: 14px; }
.sis-sello {
    width: 42px; height: 42px; border: 2px solid var(--sis-azul); color: var(--sis-azul);
    display: grid; place-items: center; font-weight: 600; font-size: 15px; border-radius: 4px; flex: none;
}
.sis-institucion { line-height: 1.25; }
.sis-institucion strong { display: block; color: var(--sis-tinta); font-size: 17px; }
.sis-institucion span { color: var(--sis-suave); font-size: 13px; }
.sis-usuario { margin-left: auto; text-align: right; font-size: 13px; color: var(--sis-suave); line-height: 1.35; }
.sis-usuario a { color: var(--sis-rojo); }

/* ---------- Menú ---------- */
.sis-nav { background: var(--sis-azul-osc); padding: 0; margin-bottom: 28px; }
.sis-nav .navbar-nav .nav-link {
    color: #d6deea; font-size: 14px; padding: 12px 16px; border-bottom: 3px solid transparent;
}
.sis-nav .navbar-nav .nav-link:hover { color: #fff; text-decoration: none; }
.sis-nav .navbar-nav .nav-link.activo { color: #fff; border-bottom-color: #9fb8d6; }
.sis-nav .navbar-toggler { border-color: rgba(255,255,255,.35); margin: 8px 0; }
.sis-nav .navbar-toggler-icon { filter: invert(1); }
.dropdown-menu {
    border: 1px solid var(--sis-linea) !important; border-radius: 4px; padding: 6px 0;
    box-shadow: 0 6px 18px rgba(23, 33, 47, .10) !important; font-size: 14px; min-width: 230px;
}
.dropdown-header { color: var(--sis-suave); font-size: 12px; padding-top: 8px; }
.dropdown-item { color: var(--sis-texto); padding: 7px 18px; }
.dropdown-item:hover, .dropdown-item:focus { background: var(--sis-azul-claro); color: var(--sis-tinta); text-decoration: none; }
.dropdown-item.activo { font-weight: 600; color: var(--sis-azul); }
.bi { opacity: .8; }
/* Íconos sin color decorativo */
.dropdown-item .bi, .btn .bi { color: inherit !important; }

/* ---------- Encabezado de página ---------- */
.sis-titulo { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 24px; margin-bottom: 22px; }
.sis-titulo h1 { font-size: 24px; margin: 0; }
.sis-titulo p { margin: 4px 0 0; color: var(--sis-suave); max-width: 70ch; }
.sis-titulo .acciones { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.sis-migas { font-size: 13px; color: var(--sis-suave); margin-bottom: 6px; }
.sis-migas a { color: var(--sis-suave); }

/* ---------- Tarjetas y paneles ---------- */
.card, .sis-panel {
    background: var(--sis-papel); border: 1px solid var(--sis-linea) !important; border-radius: 4px !important;
}
.card-header {
    background: var(--sis-papel) !important; color: var(--sis-tinta) !important;
    border-bottom: 1px solid var(--sis-linea) !important; font-weight: 600; padding: 12px 18px;
}
.card-header.bg-primary, .card-header.bg-dark, .card-header.bg-danger, .card-header.bg-success { color: var(--sis-tinta) !important; }
.card-header h5, .card-header h6 { font-size: 15px; }
.card.bg-success, .card.bg-danger, .card.bg-dark, .card.bg-primary, .card.bg-info {
    background: var(--sis-papel) !important; color: var(--sis-texto) !important;
}
.card.text-white, .card .text-white { color: inherit !important; }
.sis-panel { padding: 20px 22px; }
.sis-panel > h2, .sis-seccion { font-size: 16px; margin: 0 0 14px; }
.sis-seccion-titulo { font-size: 17px; margin: 30px 0 12px; }

/* Indicadores (cifras principales) */
.sis-cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
              background: var(--sis-papel); border: 1px solid var(--sis-linea); border-radius: 4px; margin-bottom: 24px; }
.sis-cifra { padding: 16px 20px; border-right: 1px solid var(--sis-linea-2); }
.sis-cifra:last-child { border-right: 0; }
.sis-cifra .etiqueta { font-size: 13px; color: var(--sis-suave); display: block; }
.sis-cifra .valor { font-size: 23px; font-weight: 600; color: var(--sis-tinta); display: block; margin-top: 2px; }
.sis-cifra .nota { font-size: 12.5px; color: var(--sis-suave); }
.sis-cifra.destacada { background: var(--sis-azul-claro); }
.sis-cifra.destacada .valor { color: var(--sis-azul); }
.valor.ingreso { color: var(--sis-verde) !important; }
.valor.egreso  { color: var(--sis-rojo) !important; }

/* ---------- Tablas ---------- */
.table { --bs-table-bg: transparent; --bs-table-hover-bg: #f6f8fa; color: var(--sis-texto); margin-bottom: 0; font-size: 14px; }
.table > :not(caption) > * > * { padding: 9px 14px; border-bottom-color: var(--sis-linea-2); }
.table thead th, .table-dark th, .table-light th, thead.table-dark th, thead.table-light th {
    background: #f5f7f9 !important; color: var(--sis-suave) !important; font-size: 13px;
    border-bottom: 1px solid var(--sis-linea) !important; white-space: nowrap;
}
.table-dark { --bs-table-bg: #f5f7f9; --bs-table-color: var(--sis-suave); }
.table tfoot th, .table tfoot td { background: #f5f7f9; border-top: 1px solid var(--sis-linea); color: var(--sis-tinta); }
.table .num, .num { text-align: right; white-space: nowrap; }
.table-responsive, .sis-tabla { background: var(--sis-papel); border: 1px solid var(--sis-linea); border-radius: 4px; overflow-x: auto; }
.card .table-responsive, .card-body .table-responsive { border: 0; }
.sis-vacio { padding: 28px; text-align: center; color: var(--sis-suave); }

/* ---------- Etiquetas de tipo y estado ---------- */
.badge { font-weight: 500; font-size: 12px; border-radius: 3px; padding: 4px 8px; letter-spacing: 0; }
.badge.bg-success, .sis-tag.ingreso { background: var(--sis-verde-fondo) !important; color: var(--sis-verde) !important; }
.badge.bg-danger,  .sis-tag.egreso  { background: var(--sis-rojo-fondo) !important;  color: var(--sis-rojo) !important; }
.badge.bg-secondary { background: var(--sis-linea-2) !important; color: var(--sis-suave) !important; }
.badge.bg-primary, .badge.bg-info, .badge.bg-dark { background: var(--sis-azul-claro) !important; color: var(--sis-azul) !important; }
.badge.bg-warning { background: var(--sis-ambar-fondo) !important; color: var(--sis-ambar) !important; }
.sis-tag { display: inline-block; font-size: 12px; font-weight: 500; padding: 3px 8px; border-radius: 3px; white-space: nowrap; }
.sis-tag.pagado    { background: var(--sis-verde-fondo); color: var(--sis-verde); }
.sis-tag.parcial   { background: var(--sis-ambar-fondo); color: var(--sis-ambar); }
.sis-tag.pendiente { background: var(--sis-rojo-fondo);  color: var(--sis-rojo); }
.monto-ingreso { color: var(--sis-verde); }
.monto-egreso  { color: var(--sis-rojo); }

/* Barra de avance */
.sis-barra { height: 8px; background: var(--sis-linea-2); border-radius: 2px; overflow: hidden; }
.sis-barra span { display: block; height: 100%; background: var(--sis-azul); }

/* ---------- Botones ---------- */
.btn { font-weight: 500; font-size: 14px; border-radius: 4px; padding: 7px 14px; }
.btn-sm { font-size: 13px; padding: 4px 10px; }
.btn-lg { font-size: 15px; padding: 9px 18px; }
.btn-primary, .btn-dark, .btn-success, .btn-info {
    --bs-btn-bg: var(--sis-azul); --bs-btn-border-color: var(--sis-azul); --bs-btn-color: #fff;
    --bs-btn-hover-bg: var(--sis-azul-osc); --bs-btn-hover-border-color: var(--sis-azul-osc); --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: var(--sis-azul-osc); --bs-btn-active-border-color: var(--sis-azul-osc);
    --bs-btn-disabled-bg: #7d8ea5; --bs-btn-disabled-border-color: #7d8ea5;
}
.btn-danger {
    --bs-btn-bg: var(--sis-rojo); --bs-btn-border-color: var(--sis-rojo); --bs-btn-color: #fff;
    --bs-btn-hover-bg: #7a2323; --bs-btn-hover-border-color: #7a2323; --bs-btn-hover-color: #fff;
}
.btn-secundario, .btn-light, .btn-outline-secondary, .btn-outline-dark, .btn-outline-primary, .btn-secondary {
    --bs-btn-bg: var(--sis-papel); --bs-btn-border-color: var(--sis-linea); --bs-btn-color: var(--sis-texto);
    --bs-btn-hover-bg: var(--sis-azul-claro); --bs-btn-hover-border-color: #b9c6d6; --bs-btn-hover-color: var(--sis-tinta);
    --bs-btn-active-bg: var(--sis-azul-claro); --bs-btn-active-color: var(--sis-tinta);
}
.btn-outline-danger {
    --bs-btn-color: var(--sis-rojo); --bs-btn-border-color: #e1bcbc;
    --bs-btn-hover-bg: var(--sis-rojo-fondo); --bs-btn-hover-color: var(--sis-rojo); --bs-btn-hover-border-color: #d7a9a9;
}
.btn:hover { text-decoration: none; }

/* ---------- Formularios ---------- */
.form-label { font-size: 13px; font-weight: 600; color: var(--sis-texto); margin-bottom: 4px; }
.form-control, .form-select { border-color: var(--sis-linea); font-size: 14px; border-radius: 4px; }
.form-control-lg, .form-select-lg { font-size: 15px; }
.form-control:focus, .form-select:focus { border-color: #7f9cc2; box-shadow: 0 0 0 3px rgba(31, 58, 95, .12); }
.input-group-text { background: #f5f7f9; border-color: var(--sis-linea); }
.sis-filtros { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.sis-filtros .campo { min-width: 150px; }

/* ---------- Avisos ---------- */
.alert { border-radius: 4px; font-size: 14px; border: 1px solid transparent; }
.alert-success { background: var(--sis-verde-fondo); color: var(--sis-verde); border-color: #c7dccf; }
.alert-danger  { background: var(--sis-rojo-fondo);  color: var(--sis-rojo);  border-color: #e3c3c3; }
.alert-warning { background: var(--sis-ambar-fondo); color: var(--sis-ambar); border-color: #eedcb3; }
.alert-info    { background: var(--sis-azul-claro);  color: var(--sis-azul);  border-color: #cdd9e7; }

/* ---------- Centro de reportes ---------- */
.sis-reportes { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.sis-reporte {
    background: var(--sis-papel); border: 1px solid var(--sis-linea); border-radius: 4px;
    padding: 18px 20px; display: flex; flex-direction: column; gap: 6px; color: var(--sis-texto);
}
.sis-reporte:hover { border-color: #9fb3cb; text-decoration: none; }
.sis-reporte h3 { font-size: 16px; margin: 0; color: var(--sis-azul); }
.sis-reporte p { margin: 0; font-size: 14px; color: var(--sis-suave); }
.sis-reporte .formatos { font-size: 12.5px; color: var(--sis-suave); margin-top: auto; padding-top: 8px; }

/* ---------- Ficha / datos ---------- */
.sis-datos { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; margin: 0; font-size: 14px; }
.sis-datos dt { color: var(--sis-suave); font-weight: 400; }
.sis-datos dd { margin: 0; color: var(--sis-tinta); }

/* ---------- Pie ---------- */
.sis-pie { margin-top: 40px; padding: 18px 0 28px; border-top: 1px solid var(--sis-linea); font-size: 12.5px; color: var(--sis-suave); }

/* ---------- Páginas públicas (acceso y consulta) ---------- */
.sis-publico { min-height: 100vh; display: flex; flex-direction: column; }
.sis-publico main { flex: 1; display: flex; align-items: flex-start; justify-content: center; padding: 48px 16px; }
.sis-caja { width: 100%; max-width: 420px; }
.sis-caja.ancha { max-width: 760px; }

/* Select2 (filtro de conceptos) */
.select2-container--bootstrap-5 .select2-selection { border-color: var(--sis-linea) !important; font-size: 14px; }
.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered .select2-selection__choice {
    background: var(--sis-azul-claro); border-color: #cdd9e7; color: var(--sis-azul); }

/* ---------- Impresión ---------- */
@media print {
    .sis-nav, .sis-cabecera .sis-usuario, .no-imprimir, .sis-filtros, form { display: none !important; }
    html, body { background: #fff !important; font-size: 12px; }
    .container { max-width: 100% !important; }
    .sis-cifras, .card, .sis-panel, .table-responsive, .sis-tabla { border-color: #bbb !important; }
    .sis-tag, .badge, .sis-barra, .sis-barra span, .sis-cifra.destacada {
        -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    tr { break-inside: avoid; }
    a { color: inherit !important; }
}
@media (max-width: 700px) {
    .sis-cifra { border-right: 0; border-bottom: 1px solid var(--sis-linea-2); }
    .sis-usuario { display: none; }
}