:root{
  --sae-primary: #f47c5c;
  --sidebar-width: 250px;
  --sidebar-width-collapsed: 74px;

  --bs-primary: #f47c5c;
  --bs-primary-rgb: 244, 124, 92;
  --bs-primary-bg-subtle: rgba(244, 124, 92, .1);
  --bs-primary-border-subtle: rgba(244, 124, 92, .2);
  --bs-primary-text-emphasis: #c24e32;
}
/* Color primario */
.bg-sae {
  background-color: var(--bs-primary) !important;
}
.text-sae {
  color: var(--bs-primary) !important;
}


.layout{
  min-height: 100vh;
  display: grid;
  grid-template-columns: var(--sidebar-width) 1fr;
}

#layout-sidebar .nav-link.active {
  background-color: #fde5df;   /* un tono claro derivado de #f47c5c */
  color: #f47c5c !important;
  font-weight: 600;
  border-radius: 0.375rem;
}

/* Hover consistente */
#layout-sidebar .nav-link:hover {
  background-color: rgba(244, 124, 92, 0.1);
  color: #f47c5c !important;
}
/* Colapsado en escritorio */
.layout.collapsed{
  grid-template-columns: var(--sidebar-width-collapsed) 1fr;
}

/* ===== Sidebar ===== */
.sidebar{
  position: sticky; top:0; height:100vh;
  background:#fff; border-right:1px solid rgba(0,0,0,.075);
  display:flex; flex-direction:column; gap:.5rem;
  z-index: 1029;
}
.sidebar .brand{
  height:64px; display:flex; align-items:center; gap:.5rem;
  padding:0 1rem; border-bottom:1px solid rgba(0,0,0,.075);
}
.sidebar .brand img{ height:32px; }
.sidebar .brand .brand-text{ font-weight:600; letter-spacing:.2px; }
.sidebar .nav-link{
  display:flex; align-items:center; gap:.75rem;
  padding:.75rem 1rem; border-radius:.5rem; margin:.25rem .75rem;
  color:#0b3355;
}
.sidebar .nav-link:hover{ background:#f2f6ff; }
.sidebar .nav-link.active{ background:#e7f0ff; color:var(--sae-primary); }

/* En colapsado (solo iconos) */
.layout.collapsed .sidebar .label{ display:none; }
.layout.collapsed .sidebar .brand .brand-text{ display:none; }
.layout.collapsed .sidebar .nav-link{ justify-content:center; }

.avatar{ width:36px; height:36px; }
.avatar-sm{ width:32px; height:32px; }

/* ===== Topbar ===== */
.topbar{
  height:64px; display:flex; align-items:center;
  padding: 0 1rem;
  background: #fff;
  border-bottom: 1px solid rgba(0,0,0,.075);
}

/* ===== Hero ===== */
.page-hero{
  background: var(--sae-primary);
  color:#fff; border-radius: 0 0 1rem 1rem;
  padding: 2rem 1.5rem;
}
@media (min-width:992px){
  .page-hero{ margin: 0 1.25rem; }
}

/* ===== Responsivo: móvil (<992px) ===== */
@media (max-width: 991.98px){
    /* layout pasa a 1 columna, sidebar superpuesto */
    .layout{
        grid-template-columns: 1fr;
    }
    .sidebar{
        position: fixed;
        inset: 0 auto 0 0;            /* top:0; left:0; height:100vh */
        width: var(--sidebar-width);
        transform: translateX(-100%);
        transition: transform .25s ease;
        box-shadow: 0 0 0 rgba(0,0,0,0);
    }
    /* abrir sidebar en móvil */
    .sidebar-open .sidebar{
        transform: translateX(0);
        box-shadow: 0 .5rem 1rem rgba(0,0,0,.15);
    }

    /* backdrop */
    .sidebar-backdrop{
        position: fixed; inset: 0;
        background: rgba(0,0,0,.25);
        opacity: 0; pointer-events: none;
        transition: opacity .2s ease;
        z-index: 1028;
    }
    .sidebar-open .sidebar-backdrop{
        opacity: 1; pointer-events: auto;
    }
}

/* ===== Loading Overlay ===== */
.loading-overlay{
  position: fixed; inset: 0; z-index: 2000;
  background: rgba(255,255,255,.8);
  display: none;                    /* se muestra con fadeIn */
  align-items: center; justify-content: center;
  backdrop-filter: blur(2px);
}
.loading-box{
  background: #fff;
  border-radius: .75rem;
  padding: 1.5rem 2rem;
  box-shadow: 0 .75rem 1.5rem rgba(0,0,0,.12);
  min-width: 220px;
  text-align: center;
}
.loading-box .spinner-border{
  width: 3rem; height: 3rem; 
  color: var(--sae-primary);
}
.loading-text{ margin-top: .75rem; font-weight: 600; color: #123; }

/* ===== Global Modal ===== */
.modal-sae .modal-header {
  border-bottom: 1px solid rgba(0,0,0,.075);
}
.modal-sae .modal-footer {
  border-top: 1px solid rgba(0,0,0,.075);
}

/* Layout de dos contenidos: lado A y B (stack en móvil) */
.modal-sae .modal-body .grid-2 {
  display: grid;
  gap: 1rem;
}
@media (min-width: 992px){
  .modal-sae .modal-body .grid-2 {
    grid-template-columns: 1fr 1fr;
  }
}

/* Tamaños por defecto */
.modal-sae .modal-dialog { max-width: 720px; } /* md */
.modal-sae.modal-sm .modal-dialog { max-width: 380px; }
.modal-sae.modal-lg .modal-dialog { max-width: 960px; }
.modal-sae.modal-xl .modal-dialog { max-width: 1140px; }

/* Barra de progreso compacta del footer */
.modal-sae .progress {
  height: .6rem;
}

.caja_scroll { overflow: scroll; height: 500px; }
.caja_scroll2 { overflow: scroll;  height: auto; }

/* PNotify */
/* Bordes redondeados */
.brighttheme {
  border-radius: 2rem !important;
  overflow: hidden !important;
}
/* Ajustar tipografía un poco más pequeña */
.brighttheme,
.brighttheme .brighttheme-title,
.brighttheme .brighttheme-text {
  font-size: 0.775rem !important; /* equivalente a ~14px */
  line-height: 1.3 !important;    /* un poco más compacto */
}

/* Error: estilo Bootstrap bg-danger */
.btn-primary {
  --bs-btn-bg: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-bg: #e96c4a;   /* tono más oscuro */
  --bs-btn-hover-border-color: #e96c4a;
  --bs-btn-active-bg: #c24e32;  /* aún más oscuro */
  --bs-btn-active-border-color: #c24e32;
}

.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);
}

.brighttheme-error {
  background-color: #dc3545 !important; /* rojo sólido estilo Bootstrap */
  background-image: none !important;    /* quita el degradado/stripe */
  color: #fff !important;
  border: none !important;
}

/* Success */
.brighttheme-success {
  background-color: #28a745 !important;
  color: #fff !important;
  border: none !important;
}

/* Warning */
.brighttheme-notice {
  background-color: #ffc107 !important;
  color: #212529 !important;
  border: none !important;
}

/* Info */
.brighttheme-info {
  background-color: #17a2b8 !important;
  color: #fff !important;
  border: none !important;
}