/* =============================================================================
   Shell — reproducción de admin-layout.component.html/.scss
   =============================================================================
   Los nombres de clase, la grilla, las tres variantes del sidenav y las medidas
   salen del componente del Angular Template. Lo único que cambia es la marca y
   el contenido; la envolvente exterior hasta .container-default se conserva.

   Esto es un prototipo visual en HTML: reproduce la estructura y las
   proporciones del shell, NO es una implementación Angular conforme.
   ============================================================================= */

/* --- envolvente ----------------------------------------------------------- */
.admin__container {
  display: grid;
  position: absolute;
  inset: 0;
  grid-template-rows: var(--header-height) 1fr;
  grid-template-columns: var(--sidenav-width) 1fr;
  grid-template-areas:
    'header header'
    'sidenav body';
  background: var(--theme-bg);
  color: var(--theme-text);
  transition: grid-template-columns var(--dur-media) var(--ease-suave);
}
.admin__container.sidenav-collapsed {
  grid-template-columns: var(--sidenav-collapsed-width) 1fr;
}
.admin__container.sidenav-overlay {
  grid-template-columns: 0 1fr;
}

/* --- header --------------------------------------------------------------- */
.admin__header {
  grid-area: header;
  z-index: 2;
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  align-items: center;
  gap: 1rem;
  padding-inline: 1rem;
  background: var(--theme-header-bg);
  color: var(--theme-header-text);
  box-shadow: 0 0.2rem 0.4rem var(--theme-border);
}
.admin__header--mobile {
  gap: 0.4rem;
  padding-inline: 0.6rem;
}
/* «dlv+design» es más larga que «Template»: con el tamaño heredado del h1 el
   header no entra a 360 px. La marca escala sólo en la variante móvil; la
   familia, el peso y la estructura del header no cambian. */
.admin__header--mobile .logo-title { font-size: 0.8em; }
.header-spacer { min-width: 0; }

.menu-toggle {
  display: grid;
  place-items: center;
  color: var(--theme-header-text);
}

.logo { margin: 0; }
.logo a { color: var(--theme-header-text); }
.logo-title {
  font-family: var(--primary-font);
  font-size: 1.1em;
  font-weight: 700;
}
/* La marca DLV+Design separa el signo con el acento secundario; el resto del
   bloque conserva la familia, el tamaño y el peso de .logo-title. */
.logo-title__mas { color: var(--accent-2-ink); }
.logo-title__sufijo { font-weight: var(--font-regular); opacity: 0.86; }

.header-actions {
  display: grid;
  grid-auto-flow: column;
  align-items: center;
  gap: 0.8rem;
}
.header-actions button { display: grid; place-items: center; }

/* --- botón de ícono: alto del template, objetivo táctil de Material -------- */
/* La caja ocupa el objetivo táctil completo (3rem) y el círculo visible mide
   los 2.5rem del template. Antes el círculo medía 2.5rem y el área táctil era
   un pseudo-elemento de 3rem que sobresalía 4 px por lado: eso desbordaba el
   header y hacía desplazable el documento a 360 px. */
.mat-icon-button {
  position: relative;
  width: var(--touch-target);
  height: var(--touch-target);
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  transition: color var(--dur-rapida) var(--ease-suave),
              transform var(--dur-rapida) var(--ease-suave);
}
.mat-icon-button::before {
  content: '';
  position: absolute;
  width: var(--button-height);
  height: var(--button-height);
  border-radius: 50%;
  background: transparent;
  transition: background var(--dur-rapida) var(--ease-suave);
}
.mat-icon-button > * { position: relative; }
.mat-icon-button:hover::before { background: var(--theme-divider); }
.mat-icon-button:active { transform: scale(0.92); transition-duration: var(--dur-instantanea); }
.mat-icon-button[disabled] { color: var(--theme-text-disabled); cursor: not-allowed; }

/* --- sidenav -------------------------------------------------------------- */
.admin__sidenav {
  grid-area: sidenav;
  overflow: hidden auto;
  background: var(--theme-sidenav-bg);
  border-right: 0.1rem solid var(--theme-border);
  /* entra decelerando y se asienta; sale acelerando y más corto */
  transition: transform var(--dur-media) var(--ease-decelera);
}
.admin__sidenav.overlay.collapsed {
  transition: transform var(--dur-rapida) var(--ease-acelera);
}
.admin__sidenav.collapsed .nav-item {
  grid-template-columns: 1fr;
  justify-items: center;
  padding-inline: 0;
}
.admin__sidenav.overlay {
  position: fixed;
  z-index: 1;
  top: var(--header-height);
  bottom: 0;
  left: 0;
  width: var(--sidenav-width);
  transform: translateX(0);
  box-shadow: var(--sombra-flotante);
}
.admin__sidenav.overlay.collapsed { transform: translateX(-100%); }

.sidenav-nav,
.nav-group,
.nav-group-items { display: grid; }
.sidenav-nav {
  align-content: start;
  padding-block: 0.5rem;
}
.nav-item {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  padding: 0.8rem 1rem;
  border: 0;
  background: transparent;
  color: var(--theme-sidenav-text);
  font-family: var(--secondary-font);
  font-size: 1em;
  text-align: left;
  cursor: pointer;
  transition: background var(--dur-rapida) var(--ease-suave),
              color var(--dur-rapida) var(--ease-suave);
}
.nav-item .material-symbols-outlined { display: grid; place-items: center; line-height: 1; }
.nav-item:hover { background: var(--theme-sidenav-hover); }
.nav-item.active {
  background: var(--theme-sidenav-active-bg);
  color: var(--theme-sidenav-active-text);
}
.nav-group-header { grid-template-columns: auto 1fr auto; }
.nav-group-items { background: var(--theme-sidenav-subitem-bg); }
.nav-subitem {
  padding-left: 2.5rem;
  font-size: 0.9em;
}
.nav-subitem:hover { background: var(--theme-sidenav-subitem-hover); }
.expand-icon { transition: transform var(--dur-rapida) var(--ease-suave); }
.nav-group.expanded .expand-icon { transform: rotate(180deg); }

/* --- cuerpo --------------------------------------------------------------- */
.admin__body {
  grid-area: body;
  overflow: hidden auto;
  position: relative;
}
.admin__section {
  min-height: 100%;
  outline: none;
}
.container-default {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  width: 100%;
  padding: 1.5rem 0.5rem 5rem;
  color: var(--theme-text);
  gap: 1.5rem;
}

/* --- marca de agua al pie -------------------------------------------------- */
.admin__watermark {
  position: sticky;
  bottom: 0;
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: auto auto;
  justify-content: end;
  align-items: baseline;
  gap: 0.5rem;
  height: 3.5rem;
  margin-top: -3.5rem;
  padding-inline: 1.5rem;
  pointer-events: none;
  color: var(--theme-text-secondary);
}
.admin__watermark-logo {
  width: 8rem;
  height: 2.1rem;
  align-self: center;
  opacity: 0.3;
  fill: currentColor;
  font-family: var(--primary-font);
  font-weight: 700;
  font-size: 2em;
}
.app-version {
  align-self: center;
  font-size: 0.8em;
  line-height: 1.5;
}

/* --- scrim del overlay ----------------------------------------------------- */
.admin__scrim {
  position: fixed;
  inset: var(--header-height) 0 0 0;
  z-index: 0;
  background: var(--scrim);
  opacity: 0;
  transition: opacity var(--dur-rapida) var(--ease-acelera);
}
.admin__scrim[data-abierto='true'] {
  opacity: 1;
  transition: opacity var(--dur-media) var(--ease-decelera);
}

/* El primer render ya respeta el breakpoint; animar sólo tras inicializar. */
html:not([data-shell-listo]) .admin__container,
html:not([data-shell-listo]) .admin__sidenav,
html:not([data-shell-listo]) .admin__scrim { transition: none; }
html[data-handset='true']:not([data-shell-listo]) .admin__container {
  grid-template-columns: 0 1fr;
}
html[data-handset='true']:not([data-shell-listo]) .admin__sidenav {
  visibility: hidden;
  position: fixed;
  width: var(--sidenav-width);
  transform: translateX(-100%);
}
html[data-bp='xsmall']:not([data-shell-listo]) .admin__header {
  gap: 0.4rem;
  padding-inline: 0.6rem;
}
html[data-bp='xsmall']:not([data-shell-listo]) .logo-title { font-size: 0.8em; }
html[data-sidenav-inicial='cerrado']:not([data-handset='true']):not([data-shell-listo]) .admin__container {
  grid-template-columns: var(--sidenav-collapsed-width) 1fr;
}