/* azul*/
:root{
  --sidebar-w: 240px;
  --sidebar-w-collapsed: 72px;
  --header-h: 56px;

  --sidebar-bg: #0d47a1;
  --sidebar-bg-hover: rgba(255,255,255,.12);
  --sidebar-border: rgba(255,255,255,.1);
  --sidebar-text: #e6eefc;
  --sidebar-text-muted: #cfe0ff;
  --content-bg: #f8fafc;
}


      /* Tema rojo 
      :root{
      --sidebar-w: 240px;
      --sidebar-w-collapsed: 72px;
      --header-h: 56px;      
      --sidebar-bg: #b71c1c;          // Rojo principal 
      --sidebar-bg-hover: rgba(255,255,255,.12);
      --sidebar-border: rgba(255,255,255,.15);
      --sidebar-text: #ffe5e5;        // Texto claro 
      --sidebar-text-muted: #ffcccc;  // Texto tenue 
      --content-bg: #fdf5f5;          // Fondo claro para contraste 
      }
      */


html, body{ height: 100%; margin:0; }
/* Evita cualquier scroll horizontal en PC */
html, body, .app, .app-main{ overflow-x: hidden; }
body{ overflow-y: hidden; } /* el scroll va dentro de .app-main */

/* Header fijo */
.app-header{
  position: fixed; top: 0; left: 0; right: 0;
  height: var(--header-h); z-index: 1030;
  border-bottom: 1px solid rgba(0,0,0,.075);
  background: #fff;
}

/* Layout contenedor */

.app{
  padding-top: var(--header-h);
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  grid-template-rows: 1fr;
  min-height: 100vh;   /* 👈 antes decía height:100%; */
  transition: grid-template-columns .2s ease;
}




.app.sidebar-collapsed{ grid-template-columns: var(--sidebar-w-collapsed) 1fr; }

/* Sidebar */
.app-sidebar{
  background: var(--sidebar-bg);
  color: var(--sidebar-text);
  overflow: hidden;
  transition: width .2s ease;
  user-select: none;
  width: 100%; /* se ajusta a la columna del grid */
}
.app.sidebar-collapsed .app-sidebar{ width: 100%; } /* mantener dentro del grid al colapsar */
.brand{
  height: var(--header-h);
  display: flex; align-items: center; gap: .75rem;
  padding: 0 1rem;
  border-bottom: 1px solid var(--sidebar-border);
  color: #fff; font-weight: 600; letter-spacing:.2px;
}
.brand img{ width: 28px; height: 28px; object-fit: cover; border-radius: 6px; }

.brand img.logo-grande {
  width: 65px;
  height: 50px;
  object-fit: cover;
  border-radius: 6px;
}

.menu{ padding: .5rem; height: calc(100% - var(--header-h)); overflow-y: auto; overflow-x: hidden; }
.menu .nav-link{
  color: var(--sidebar-text);
  border-radius: .5rem;
  display: flex; align-items: center; gap: .75rem;
  padding: .6rem .75rem;
  white-space: nowrap;
}
.menu .nav-link:hover,
.menu .nav-link.active{
  background: var(--sidebar-bg-hover);
  color: #fff;
}
.menu .nav-heading{
  font-size: .72rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--sidebar-text-muted);
  margin: .75rem .5rem .25rem;
}
.menu i{ width: 24px; text-align: center; font-size: 1.1rem; }

/* Ocultar texto cuando está colapsado */
.app.sidebar-collapsed .menu .text,
.app.sidebar-collapsed .brand .brand-text{ display: none; }

/* Caret gira cuando el link indica expandido */
.nav-link[aria-expanded="true"] .submenu-caret{ transform: rotate(90deg); }
.submenu-caret{ margin-left: auto; transition: transform .2s ease; }



.app-main{
  display:flex;
  flex-direction:column;
  min-height: calc(100vh - var(--header-h)); /* que siempre tenga el alto de la vista */
  background: var(--content-bg);
  overflow-y:auto;
}


.main-inner{ flex:1; padding: 1rem; }

.card-elev{
  border: 0; box-shadow: 0 6px 18px rgba(0,0,0,.06); border-radius: .8rem;
}

/* Footer tipo AdminLTE */
.main-footer{
  background: #ffffff;
  border-top: 1px solid rgba(0,0,0,.08);
  color: #6b7280;
  padding: .75rem 1rem;
}
.main-footer .version{ font-weight: 600; color: #6b7280; }

/* Responsive: en pantallas pequeñas offcanvas */
@media (max-width: 991.98px){
  /* En móvil permitimos scroll normal del body */
  body{ overflow-y: auto; }
  .app{ display: block; padding-top: var(--header-h); }
  .app-sidebar{
    position: fixed; top: var(--header-h); bottom: 0; left: 0;
    width: var(--sidebar-w); z-index: 1045;
    transform: translateX(-100%); transition: transform .2s ease;
  }
  .app.sidebar-open .app-sidebar{ transform: translateX(0); }
}

/* ===== Fix SweetAlert2 que cambiaba la altura del html/body ===== */
html.swal2-height-auto, body.swal2-height-auto { height: 100% !important; }
body.swal2-shown { padding-right: 0 !important; } /* evita "salto" por compensación de scrollbar */


/* --- FIX VISUAL SWEETALERT2 EN LAYOUT ADMIN --- */
body.swal2-shown, html.swal2-shown {
  overflow-y: hidden !important;
  overflow-x: hidden !important;
  height: 100% !important;
}