/**
 * SIGETIC UI — Layout shell (Fase 2C.6-UI.2)
 * Sidebar, top nav, drawer, content area, breadcrumb, footer.
 * Depende de sigetic-tokens.css. No altera lógica JS.
 */

/* -------------------------------------------------------------------------- */
/* Sidebar desktop (#nav_left)                                                */
/* -------------------------------------------------------------------------- */

.estilo_nav {
  width: var(--sg-sidebar-width, 300px);
  background-color: var(--sg-primary-dark, #1A443A);
  box-shadow: var(--sg-shadow-card);
  border-right: 1px solid rgba(0, 0, 0, 0.12);
  z-index: 1020;
}

.estilo_nav #logo {
  margin-top: 0;
  padding-top: var(--sg-space-md, 12px);
  padding-bottom: var(--sg-space-sm, 8px);
}

.estilo_nav #logo .navbar-brand {
  padding: var(--sg-space-sm, 8px) var(--sg-space-md, 12px);
}

.seccionesMenu {
  padding-top: var(--sg-space-md, 12px);
  padding-bottom: var(--sg-space-md, 12px);
  border-bottom: 2px solid var(--sg-accent, #BC955C);
}

.sg-nav-group-label {
  display: block;
  color: rgba(255, 255, 255, 0.55);
  font-size: var(--sg-font-size-xs, 0.75rem);
  font-weight: var(--sg-font-weight-semibold, 600);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0 var(--sg-space-lg, 16px) var(--sg-space-sm, 8px) var(--sg-space-xl, 24px);
  margin-bottom: 0;
}

.seccionesMenu ul li a,
.seccionesMenu button {
  background-color: transparent;
  color: rgba(255, 255, 255, 0.92);
  border: 0;
  border-left: 4px solid transparent;
  transition: background-color var(--sg-transition-fast, 150ms ease),
              color var(--sg-transition-fast, 150ms ease),
              border-color var(--sg-transition-fast, 150ms ease);
}

.seccionesMenu button {
  padding: var(--sg-space-md, 12px) var(--sg-space-lg, 16px) var(--sg-space-md, 12px) var(--sg-space-xl, 24px);
  font-size: var(--sg-font-size-sm, 0.875rem);
  line-height: var(--sg-line-height-tight, 1.35);
  text-align: left;
}

.seccionesMenu button:hover {
  background-color: rgba(255, 255, 255, 0.08);
  color: var(--sg-text-inverse, #fff);
  font-weight: var(--sg-font-weight-medium, 500);
}

.seccionesMenu button:focus {
  font-weight: var(--sg-font-weight-medium, 500);
  border-left-color: var(--sg-accent, #BC955C);
  outline: none;
  box-shadow: inset var(--sg-focus-ring, 0 0 0 3px rgba(35, 91, 78, 0.2));
}

.seccionesMenu button:active {
  font-weight: var(--sg-font-weight-semibold, 600);
  border-left-color: var(--sg-accent, #BC955C);
}

.seccionesMenu .menuSeleccionado {
  background-color: var(--sg-primary-soft, #E8F3F0);
  color: var(--sg-primary-dark, #1A443A);
  font-weight: var(--sg-font-weight-semibold, 600);
  border-left-color: var(--sg-accent, #BC955C);
}

.seccionesMenu .menuSeleccionado .float_derecha {
  color: var(--sg-primary, #235B4E);
}

.seccionesMenu button .float_derecha {
  opacity: 0.85;
  transition: opacity var(--sg-transition-fast, 150ms ease);
}

.seccionesMenu button:hover .float_derecha,
.seccionesMenu .menuSeleccionado .float_derecha {
  opacity: 1;
}

.estilo_nav .posicion_usu .list-group-item {
  background-color: rgba(0, 0, 0, 0.15);
  color: rgba(255, 255, 255, 0.95);
  border-color: rgba(255, 255, 255, 0.12);
  font-size: var(--sg-font-size-sm, 0.875rem);
}

.estilo_nav .posicion_usu .dropdown-menu {
  border-radius: var(--sg-radius-md, 6px);
  border-color: var(--sg-border, #E5E7EB);
  box-shadow: var(--sg-shadow-modal);
}

/* -------------------------------------------------------------------------- */
/* Top navigation (#nav_top)                                                    */
/* -------------------------------------------------------------------------- */

.estilo_top {
  background-color: var(--sg-surface, #fff);
  border-bottom: 2px solid var(--sg-accent, #BC955C);
  box-shadow: var(--sg-shadow-subtle);
  min-height: 52px;
  padding-top: var(--sg-space-xs, 4px);
  padding-bottom: var(--sg-space-xs, 4px);
}

.estilo_top a {
  font-weight: var(--sg-font-weight-medium, 500);
  font-size: var(--sg-font-size-sm, 0.875rem);
  color: var(--sg-muted, #6B7280);
  transition: color var(--sg-transition-fast, 150ms ease);
}

.estilo_top .nav-link:hover,
.estilo_top .nav-link:focus {
  color: var(--sg-primary, #235B4E);
}

.estilo_top .dropdown-menu {
  border-radius: var(--sg-radius-md, 6px);
  border-color: var(--sg-border, #E5E7EB);
  box-shadow: var(--sg-shadow-modal);
}

#imgTop {
  margin-top: 0;
  margin-left: 0;
  padding-left: var(--sg-space-sm, 8px);
}

#btnIconoMenu #btnforma {
  border-radius: var(--sg-radius-md, 6px);
  background-color: var(--sg-primary, #235B4E);
  transition: background-color var(--sg-transition-fast, 150ms ease);
}

#btnIconoMenu #btnforma:hover {
  background-color: var(--sg-primary-dark, #1A443A);
}

#btnIconoMenu #iconBarras path {
  stroke: rgba(255, 255, 255, 0.9);
}

/* -------------------------------------------------------------------------- */
/* Main content (#carga_vista)                                                  */
/* -------------------------------------------------------------------------- */

.margen_con_menu {
  margin-left: var(--sg-sidebar-width, 300px);
  /* Igual que estilos_nav_izquierda.css antes de UI.2 */
  padding: 1px 16px;
}

#carga_vista.margen_con_menu {
  min-height: 60vh;
  /* Ajuste fino: despeja ~12px el breadcrumb bajo #nav_top.fixed-top */
  padding-top: 14px;
}

#erroresVal {
  margin-left: var(--sg-sidebar-width, 300px);
  /* Espacio bajo #nav_top.fixed-top (valor legacy en globales.css) */
  margin-top: 40px;
  padding: 0 16px;
}

#erroresVal .alert-danger {
  border-radius: var(--sg-radius-md, 6px);
  border-left: 4px solid var(--sg-danger, #DC2626);
}

/* Page header — base para fases posteriores */
.sg-page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sg-space-md, 12px);
  margin-bottom: var(--sg-space-lg, 16px);
}

.sg-page-title {
  font-size: var(--sg-font-size-page-title, 1.375rem);
  font-weight: var(--sg-font-weight-semibold, 600);
  color: var(--sg-text, #1F2937);
  line-height: var(--sg-line-height-tight, 1.35);
  margin: 0;
}

.sg-page-subtitle {
  font-size: var(--sg-font-size-sm, 0.875rem);
  color: var(--sg-muted, #6B7280);
  margin: var(--sg-space-xs, 4px) 0 0;
}

/* -------------------------------------------------------------------------- */
/* Footer                                                                     */
/* -------------------------------------------------------------------------- */

footer.sg-app-footer {
  margin-top: auto;
  padding: var(--sg-space-lg, 16px) var(--sg-space-xl, 24px);
  background-color: var(--sg-surface, #fff);
  border-top: 1px solid var(--sg-border, #E5E7EB);
}

footer.sg-app-footer hr {
  display: none;
}

footer.sg-app-footer p {
  text-align: center;
  margin: 0;
  font-size: var(--sg-font-size-xs, 0.75rem);
  color: var(--sg-muted, #6B7280);
  line-height: var(--sg-line-height-body, 1.5);
}

footer.sg-app-footer strong {
  color: var(--sg-primary, #235B4E);
  font-weight: var(--sg-font-weight-semibold, 600);
}

/* -------------------------------------------------------------------------- */
/* Mobile drawer (.padding)                                                   */
/* -------------------------------------------------------------------------- */

.padding {
  width: var(--sg-sidebar-width, 300px);
  background-color: var(--sg-primary-dark, #1A443A);
  box-shadow: var(--sg-shadow-modal);
  border-right: 1px solid rgba(0, 0, 0, 0.12);
}

#listado_menu > li > a {
  background-color: transparent;
  color: rgba(255, 255, 255, 0.92);
  font-weight: var(--sg-font-weight-medium, 500);
  font-size: var(--sg-font-size-sm, 0.875rem);
  border-left: 4px solid transparent;
  padding: var(--sg-space-md, 12px) var(--sg-space-lg, 16px);
  transition: background-color var(--sg-transition-fast, 150ms ease),
              color var(--sg-transition-fast, 150ms ease),
              border-color var(--sg-transition-fast, 150ms ease);
}

#listado_menu > li > a:hover,
#listado_menu > li > a:focus {
  background-color: var(--sg-primary-soft, #E8F3F0);
  color: var(--sg-primary-dark, #1A443A);
  border-left-color: var(--sg-accent, #BC955C);
}

.bordes_menu {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.submenus {
  margin-left: 0;
  padding-left: 0;
  background-color: rgba(0, 0, 0, 0.12);
}

.submenus a {
  background-color: transparent;
  color: rgba(255, 255, 255, 0.88);
  font-size: var(--sg-font-size-sm, 0.875rem);
  font-weight: var(--sg-font-weight-normal, 400);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  padding-left: calc(var(--sg-space-xl, 24px) + var(--sg-space-lg, 16px));
  transition: background-color var(--sg-transition-fast, 150ms ease),
              color var(--sg-transition-fast, 150ms ease);
}

.submenus a:hover,
.submenus a:focus {
  background-color: var(--sg-primary-soft, #E8F3F0);
  color: var(--sg-primary-dark, #1A443A);
}

#btnIconoMenuX .close {
  color: rgba(255, 255, 255, 0.9);
  opacity: 1;
  text-shadow: none;
  transition: opacity var(--sg-transition-fast, 150ms ease);
}

#btnIconoMenuX .close:hover {
  opacity: 0.75;
}

/* -------------------------------------------------------------------------- */
/* Responsive shell                                                           */
/* -------------------------------------------------------------------------- */

@media screen and (max-width: 991px) {
  .margen_con_menu {
    margin-left: 0;
    padding: 1px 16px;
  }

  #erroresVal {
    margin-left: 0;
    margin-top: 40px;
    padding: 0 16px;
  }

  .estilo_top {
    margin-left: 0;
  }

  #carga_vista.margen_con_menu {
    padding-top: 18px;
  }
}