/* ===== LATERAL UNIFORME #7DF193 ===== */
/* #5ad3ae  #9fe5d0 */
aside.layout-menu,
.layout-menu,
.bg-menu-theme{
  background-color: #ADE8F4 !important;
  background-image: none !important;
}

/* Submenús sin fondo aparte (heredan el mismo color) */
.layout-menu .menu-sub{
  background: transparent !important;
  box-shadow: none !important;
}

/* Texto e iconos del menú en negro */
.layout-menu .menu-header,
.layout-menu .menu-link,
.layout-menu .menu-sub .menu-link,
.layout-menu .menu-link .menu-icon,
.layout-menu .menu-toggle{
  color: #000 !important;
}

/* Hover / activo (resalte sutil) */
.layout-menu .menu-link:hover,
.layout-menu .menu-item.active > .menu-link,
.layout-menu .menu-item.open > .menu-link{
  background-color: rgba(76, 174, 234, 0.188) !important;
  color: #000 !important;
}

.layout-menu .menu-item.active > .menu-link{
  box-shadow: inset 3px 0 0 #1e2887 !important;
}

/* ===== TABLA: ENCABEZADO SIN COLOR ===== */
.table thead th,
.table > :not(caption) > * > th{
  background-color: transparent !important;
}

/* ===== LOGO/TEXTO “finanzas” EN NEGRO ===== */
.app-brand .app-brand-text{
  color: #000 !important;
}

/* Botón primario */
/*.btn-primary{
  background-color:#22b398 !important;  /* verde institucional profundo */
/*  border-color:#22b398 !important;
}
.btn-primary:hover{ filter:brightness(.92); }*/


/* === Difuminado Azul más marcado, aclarando hacia abajo-derecha === */
:root{
  /* base verdosa más presente */
  --cefoma-bg-strong: #F2F2F2;     /* inicio (arriba-izquierda) */
  --cefoma-bg-mid:    #F2F2F2;     /* transición */
  --cefoma-bg-light:  #F2F2F2;     /* fin (abajo-derecha) */
  /* blobs con más intensidad */
  --cefoma-blob-1: #F2F2F2;  /* #7DF193 fuerte */
  --cefoma-blob-1b: #F2F2F2; /* degradado del blob */
  --cefoma-bleach:  #F2F2F2; /* “lavado” en esquina inferior derecha */
}

.layout-page .content-wrapper{
  position: relative;
  min-height: 100vh;

  /* 1) Blob verde fuerte arriba-izquierda
     2) Lavado blanco abajo-derecha para “difuminar”
     3) Degradado principal en 135deg (↘) */
  background:
    radial-gradient(1000px circle at 15% 15%, var(--cefoma-blob-1) 0%, var(--cefoma-blob-1b) 35%, transparent 62%),
    radial-gradient(900px  circle at 100% 100%, var(--cefoma-bleach) 0%, transparent 55%),
    linear-gradient(135deg, var(--cefoma-bg-strong) 0%, var(--cefoma-bg-mid) 55%, var(--cefoma-bg-light) 100%) !important;

  background-attachment: fixed;
}
/* ===== CEFOMA – Botones personalizados (cargar después de cefoma-theme.css) ===== */

/* SÓLIDO (usa variables de la clase is-*) */
.btn[class*="is-"]{
  color: var(--btn-text, #fff);
  background-color: var(--btn-bg, #6c757d);
  border-color: var(--btn-bg, #6c757d);
  transition: transform .12s ease, box-shadow .12s ease, filter .15s ease;
}
.btn[class*="is-"]:hover{
  transform: translateY(-1px);
  filter: brightness(.92);
}
.btn[class*="is-"]:active{
  transform: none;
  filter: brightness(.88);
}
.btn[class*="is-"]:focus-visible{
  outline: 0;
  box-shadow: 0 0 0 .2rem var(--btn-focus, rgba(0,0,0,.18));
}

/* OUTLINE genérico */
/* ===== OUTLINE FIJO (COLOR SIEMPRE VISIBLE) ===== */
.btn.btn-outline[class*="is-"]{
  color: var(--btn-text, #fff);
  background-color: var(--btn-bg);
  border-color: var(--btn-bg);
}

.btn.btn-outline[class*="is-"]:hover,
.btn.btn-outline[class*="is-"]:focus,
.btn.btn-outline[class*="is-"]:active{
  color: var(--btn-text, #fff);
  background-color: var(--btn-bg);
  border-color: var(--btn-bg);
  /* solo efecto visual */
  box-shadow: 0 6px 14px rgba(0,0,0,.08);
}


/* ====== Variantes (definen variables) ====== */ /*f4bbff  0a7e8c */
/* Texto oscuro para fondos claros */
.is-editar        { --btn-bg:#000080; --btn-text:#ffffff; --btn-focus:rgba(20, 16, 230, 0.35); }
.is-crear         { --btn-bg: #0a7e8c; --btn-text:#fff; --btn-focus:rgba(56,213,190,.35); }
.is-boton         { --btn-bg: #87CEEB; --btn-text:#000000; --btn-focus:rgba(107, 105, 214, 0.35); }
.is-buscar        { --btn-bg:#195b9d; --btn-text:#ffffff; --btn-focus:rgba(253,199,69,.35); }
.is-desplegar     { --btn-bg:#FF2056; --btn-text:#ffffff; --btn-focus:rgba(255,32,86,.3); }
.is-documentos    { --btn-bg:#f63d62; --btn-text:#fff; --btn-focus:rgba(255,107,107,.35); }
.is-ver           { --btn-bg:#6495ed; --btn-text:#fff; --btn-focus:rgba(64, 192, 224, 0.636); }
.is-eliminar      { --btn-bg:#FF6347; --btn-text:#ffffff; --btn-focus:rgba(255,99,71,.3); }
.is-fecha1        { --btn-bg:#ff27e6; --btn-text:#fff; --btn-focus:rgb(255, 101, 101); }
.is-fecha2        { --btn-bg:#ca1f7b; --btn-text:#fff; --btn-focus:rgb(255, 101, 101); }
.is-subir         { --btn-bg:#ffb133; --btn-text:#fff; --btn-focus:rgb(255, 101, 101); }
.is-agregar       { --btn-bg:#57D670; --btn-text:#fff; --btn-focus:rgba(87,214,112,.35); }
.is-quitar        { --btn-bg:#E76F51; --btn-text:#ffffff; --btn-focus:rgba(231,111,81,.3); }
.is-metas         { --btn-bg:#0e92ff; --btn-text:#ffffff; --btn-focus:rgba(70,130,180,.3); }
.is-elegir        { --btn-bg:#48d1cc; --btn-text:#fff; --btn-focus:rgba(56,213,190,.35); }
.is-limpiar       { --btn-bg:#ff904f; --btn-text:#fff; --btn-focus:rgba(255, 101, 11, 0.871); }

.is-volver        { --btn-bg:#9932cc; --btn-text:#ffffff; --btn-focus:rgba(139,0,139,.33); }
.is-promulgador   { --btn-bg:#00B2FF; --btn-text:#fff; --btn-focus:rgba(56,213,190,.35); }
.is-ingresos      { --btn-bg:#8524da; --btn-text:#ffffff; --btn-focus:rgba(39,0,139,.3); }
.is-incidencias   { --btn-bg:#f5701d; --btn-text:#fff; --btn-focus:rgba(255,140,66,.35); }
.is-egresos       { --btn-bg:#FF6B6B; --btn-text:#fff; --btn-focus:rgba(255,107,107,.35); }
.is-inventario    { --btn-bg:#14d5afe8; --btn-text:#ffffff; --btn-focus:rgba(3, 191, 160, 0.84); }
.is-cartas        { --btn-bg:#19bedf; --btn-text:#ffffff; --btn-focus:rgba(3, 157, 191, 0.859); }
.is-codigo        { --btn-bg:#c278ff; --btn-text:#fff; --btn-focus:rgba(199, 101, 255, 0.938); }
.is-activos       { --btn-bg:#f677b2; --btn-text:#ffffff; --btn-focus:rgba(173, 24, 118, 0.827); }
.is-exportar1     { --btn-bg:#dc143c; --btn-text:#fff; --btn-focus:rgba(255,107,107,.35); }
.is-exportar      { --btn-bg:#218a50; --btn-text:#fff; --btn-focus:rgba(48, 168, 0, 0.377); }
.is-historial     { --btn-bg:#f85c8d; --btn-text:#ffffff; --btn-focus:rgba(255, 32, 88, 0.966); }
.is-todos         { --btn-bg:#8B008B; --btn-text:#ffffff; --btn-focus:rgba(139,0,139,.3); }
.is-ninguno       { --btn-bg:#fa70fa; --btn-text:#ffffff; --btn-focus:rgba(157, 22, 157, 0.826); }
.is-subir3        { --btn-bg:#40c2e6; --btn-text:#fff; --btn-focus:rgb(101, 201, 255); }

/* OTROS botones*/
.is-ver1          { --btn-bg:#8B008B; --btn-text:#ffffff; --btn-focus:rgba(139,0,139,.3); }
.is-ver2          { --btn-bg:#40E0D0; --btn-text:#053b37; --btn-focus:rgba(64,224,208,.35); }
.is-documentos1   { --btn-bg:#00008B; --btn-text:#ffffff; --btn-focus:rgba(0,0,139,.3); }
.is-subir32        { --btn-bg:#cf3476; --btn-text:#fff; --btn-focus:rgb(255, 101, 101); }
.is-metas2        { --btn-bg:#4682B4; --btn-text:#ffffff; --btn-focus:rgba(70,130,180,.3); }
.is-elegir3       { --btn-bg:#98fb98; --btn-text:#000; --btn-focus:rgba(56,213,190,.35); }
.is-elegir2       { --btn-bg:#FF2056; --btn-text:#ffffff; --btn-focus:rgba(255,32,86,.3); }
.is-volver1       { --btn-bg:#015F78; --btn-text:#ffffff; --btn-focus:rgba(0,128,128,.3); }
.is-facturas1     { --btn-bg:#ffbc0a; --btn-text:#ffffff; --btn-focus:rgba(247, 189, 95, 0.885); }
.is-cartas2       { --btn-bg:#00008B; --btn-text:#ffffff; --btn-focus:rgba(0,0,139,.3); }
.is-inventario1   { --btn-bg:#69bd1f; --btn-text:#ffffff; --btn-focus:rgba(21, 158, 80, 0.471); }
.is-inventario2   { --btn-bg:#D97706; --btn-text:#ffffff; --btn-focus:rgba(174, 71, 11, 0.795); }
.is-codigo2       { --btn-bg:#5C677D; --btn-text:#ffffff; --btn-focus:rgba(46, 52, 139, 0.19); }



/* Tip: si quieres que todos estos botones se sientan un poco más “Sneat animados”: 
   agrega sombra suave en hover */
.btn[class*="is-"]:hover,
.btn.btn-outline[class*="is-"]:hover{
  box-shadow: 0 6px 14px rgba(0,0,0,.08);
}
/* Tamaños extra (opcional) */
.btn-xs { padding: .2rem .45rem; font-size: .75rem; border-radius: .35rem; }
.btn-md { padding: .5rem 1rem;   font-size: 1rem;   } /* cercano al default */
.btn-xl { padding: .75rem 1.35rem; font-size: 1.125rem; border-radius: .5rem; }
.btn-2xl{ padding: 1rem 1.75rem; font-size: 1.25rem;  border-radius: .6rem; }

/* Icon-only (cuadrado), combinable con sm/lg/xl */
.btn-icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:2.25rem; height:2.25rem; padding:0; line-height:1;
}
.btn-icon.btn-sm { width:1.875rem; height:1.875rem; }
.btn-icon.btn-lg { width:2.75rem;  height:2.75rem;  }
.btn-icon.btn-xl { width:3rem;     height:3rem;     }

/* ESTATUS: chips más legibles */
.badge.bg-label-success{
  color:#129c39 !important;                 /* texto verde fuerte */
  background-color:#d7f5e3 !important;      /* fondo más presente */
  border:1px solid #78ffa3 !important;
  font-weight:700; letter-spacing:.2px;
}
.badge.bg-label-dark{
  color:#111827 !important;                 /* casi negro */
  background-color:#e5e7eb !important;      /* gris claro */
  border:1px solid #cbd5e1 !important;
  font-weight:700; letter-spacing:.2px;
}

/* ====== CEFOMA: Tema global ====== */

/* 1) Color primario global (afecta botones, focos, enlaces, paginación, etc.) */
:root{
  --bs-primary: #0ea5e9;                /* COLOR PRINCIPAL */
  --bs-primary-rgb: 14,165,233;

  /* opcional: enlaces y énfasis (BS 5.3+) */
  --bs-link-color: var(--bs-primary);
  --bs-link-hover-color: #0b86c4;       /* tono más oscuro del primario */
  --bs-primary-text-emphasis: #084d62;
  --bs-primary-bg-subtle: rgba(var(--bs-primary-rgb), .10);
  --bs-primary-border-subtle: rgba(var(--bs-primary-rgb), .40);

  /* opcional: paginación BS */
  --bs-pagination-active-bg: var(--bs-primary);
  --bs-pagination-active-border-color: var(--bs-primary);
}

/* 2) Radios / Checkboxes con el nuevo primario */
.form-check-input:checked{
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
}
.form-check-input:focus{
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb), .25);
}

/* 3) Estilo global para chips con btn-check + btn-outline-primary */
.btn-outline-primary{
  --bs-btn-color: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-bg: var(--bs-primary);
  --bs-btn-hover-border-color: var(--bs-primary);
  --bs-btn-active-bg: var(--bs-primary);
  --bs-btn-active-border-color: var(--bs-primary);
  --bs-btn-disabled-color: var(--bs-primary);
  --bs-btn-disabled-border-color: var(--bs-primary);
}

.btn-check:checked + .btn-outline-primary,
.btn-check:active + .btn-outline-primary,
.btn-outline-primary.active{
  background-color: rgba(var(--bs-primary-rgb), .12);
  color: var(--bs-primary);
  border-color: var(--bs-primary);
}

.btn-outline-primary:focus,
.btn-check:focus + .btn-outline-primary{
  box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb), .25);
}

/* 4) (Opcional) Tamaño/forma de los “chips” si usas la clase .chip-check */
.chip-check .btn{
  --bs-btn-padding-y: .35rem;
  --bs-btn-padding-x: .75rem;
  --bs-btn-font-size: .8125rem;
  border-radius: 999px;
}

/* ====== FIJAR COLUMNAS====== */

/* Fallback por si el JS no puede medir el ancho de la col 1 */
.dataTables_wrapper{ --col1: 180px; }

/* Columna 1 fija (body + header-clone de DT) */
.dataTables_scrollBody .table-sticky2 td:nth-child(1),
.dataTables_scrollHead  .table-sticky2 th:nth-child(1){
  position: sticky; left: 0;
  z-index: 3;
  background: var(--bs-body-bg, #fff);
}

/* Columna 2 fija, desplazada el ancho de la 1 */
.dataTables_scrollBody .table-sticky2 td:nth-child(2),
.dataTables_scrollHead  .table-sticky2 th:nth-child(2){
  position: sticky; left: var(--col1);
  z-index: 3;
  background: var(--bs-body-bg, #fff);
}

/* En el header encima de todo */
.dataTables_scrollHead  .table-sticky2 th:nth-child(1),
.dataTables_scrollHead  .table-sticky2 th:nth-child(2){
  z-index: 5;
}

/* Zebra también en las fijas */
.dataTables_scrollBody .dt-sticky2 tr:nth-of-type(odd) td:nth-child(-n+2){
  background-color: var(--bs-table-striped-bg, #f8f9fa);
}

/* Evita recortes de clones */
.dataTables_wrapper{ overflow: visible; }

.dataTables_scrollHead  .table-sticky2 th:nth-child(1),
.dataTables_scrollBody  .table-sticky2 td:nth-child(1){ min-width: var(--col1); }

.dataTables_scrollHead  .table-sticky2 th:nth-child(2),
.dataTables_scrollBody  .table-sticky2 td:nth-child(2){ min-width: 240px; }

/* Aplica sticky también al header clonado de FixedHeader */
.dtfh-floatingparent .table-sticky2 th:nth-child(1){
  position: sticky; left: 0; z-index: 5; background: var(--bs-body-bg, #fff);
}
.dtfh-floatingparent .table-sticky2 th:nth-child(2){
  position: sticky; left: var(--col1); z-index: 5; background: var(--bs-body-bg, #fff);
}

/* Las columnas clonadas de FixedColumns deben verse sólidas encima */
.dtfc-fixed-left,
div.dtfc-left-top-blocker,
div.dtfc-left-bottom-blocker {
  background: var(--bs-body-bg, #fff) !important;
  z-index: 5;
}

/* ¡Importante!: no cortes el scroll horizontal a nivel body/página */
html, body { overflow-x: visible; }
/* Y no envuelvas la tabla en .table-responsive cuando uses scrollX */

/* Elevar botón/overlay/menú en móvil por encima del contenido */
.d-xl-none .layout-menu-toggle.position-fixed { z-index: 1205; }
.layout-overlay { z-index: 1200; }
.layout-menu    { z-index: 1201; }

/* Centrado del modal y sin padding fantasma en móvil (DevTools) */
#modalQr { padding-right: 0 !important; }

.modal { --bs-modal-margin: .75rem; }
.modal.show .modal-dialog { margin-left: auto; margin-right: auto; }

/* ====== MODAL QR – friendly en móvil ====== */
@media (max-width: 575.98px){
  /* Quita paddings extra de BS al abrir el modal en emulación móvil */
  #modalQr { padding-left: 0 !important; padding-right: 0 !important; }

  /* Márgenes razonables y centrado */
  #modalQr .modal-dialog { margin: .5rem auto !important; }

  /* Si el contenido creciera, limita la altura y permite scroll interno */
  #modalQr .modal-content { max-height: 85vh; }
  #modalQr .modal-body    { overflow: auto; }
}

/* Imagen del QR controlada por viewport */
#modalQr .modal-body img{
  display: block;
  margin: 0 auto;
  max-width: min(84vw, 360px);
  max-height: 60vh;
  height: auto;
}

@media (max-width: 575.98px){
  #modalQr .modal-dialog.modal-dialog-centered{
    align-items: flex-start !important; /* top */
  }
}


/* La card conserva su altura “máxima” y bordes bonitos */
.card-avisos{
  border-radius: 1rem;
  /* evita que el contenido desborde visualmente los bordes redondeados */
  overflow: hidden;
}

/* Encabezado pegajoso dentro de la card (se queda visible al hacer scroll interno) */
.card-avisos > .card-header{
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--bs-card-bg, #fff);
}

/* Solo este bloque scrollea. Ajusta la altura a tu gusto */
.avisos-scroll{
  /* alto máximo relativo a la ventana para que quepa header+padding */
  max-height: min(70vh, 680px);
  overflow-y: auto;
  overscroll-behavior: contain; /* evita que al llegar al límite se “salte” al body */
  scrollbar-gutter: stable both-edges; /* que no ‘brinque’ el contenido al aparecer la barra */
  padding-bottom: .25rem; /* pequeño respiro al final */
}

/* Detalle opcional: estiliza la barra (webkit) */
.avisos-scroll::-webkit-scrollbar{ width: 10px; }
.avisos-scroll::-webkit-scrollbar-thumb{
  background: rgba(0,0,0,.2);
  border-radius: 999px;
}
.avisos-scroll::-webkit-scrollbar-track{
  background: transparent;
}

/* En móviles, un poco menos alta para que no tape mucho */
@media (max-width: 576px){
  .avisos-scroll{ max-height: 60vh; }
}
/* === Sticky footer para el layout Sneat === */

/* Asegura que el layout completo mida al menos el alto de la ventana */
.layout-wrapper,
.layout-page{
  min-height: 100vh;
}

/* Columna: contenido arriba, footer abajo */
.layout-page{
  display: flex;
  flex-direction: column;
}

/* El wrapper del contenido debe crecer y permitir scroll internos sin empujar el footer */
.content-wrapper{
  flex: 1 1 auto;           /* que crezca */
  display: flex;
  flex-direction: column;
  min-height: 0;            /* IMPORTANTÍSIMO: deja que los hijos con overflow scrolleen */
}

/* Si tienes un contenedor interior tipo container-xxl del contenido principal */
.content-wrapper > .container-xxl,
.content-wrapper > .container-xl,
.content-wrapper > .container-lg,
.content-wrapper > .container-md,
.content-wrapper > .container{
  flex: 1 1 auto;
  min-height: 0;            /* evita que ‘empuje’ al footer cuando hay scroll interno */
}

/* Footer en flujo normal y pegado al fondo por el margin-top:auto del flex */
.content-footer.footer{
  position: static !important;
  margin-top: auto;         /* lo manda al fondo del flex */
  width: 100%;
}

/* Por si algún override anterior lo fijó en un lado: */
.content-footer.footer,
.content-footer.footer .container-xxl{
  left: auto !important;
  right: auto !important;
}


/* ===== HEADER DE USUARIOS – GRIS MODERNO ===== */
.card-header-usuarios{
  /* Gris moderno */
  background-color: #f3f4f6; /* gris claro moderno */

  /* Separación visual */
  padding: 1.25rem 1.5rem;

  /* Línea inferior sutil */
  border-bottom: 1px solid #e5e7eb;

  /* Elevación ligera */
  box-shadow: 0 2px 6px rgba(0,0,0,.04);

  /* Bordes superiores suaves */
  border-top-left-radius: .75rem;
  border-top-right-radius: .75rem;
}

/* Título */
.card-header-usuarios h2{
  font-weight: 600;
  letter-spacing: .3px;
  color: #1f2937; /* gris oscuro elegante */
}

/* Responsive */
@media (max-width: 576px){
  .card-header-usuarios{
    padding: 1rem;
  }
}