/* =====================================================================
   Ruta en GitHub : frontend/css/layout.css
   Proyecto       : DR ORGANICS - Sistema Administrativo y Financiero
   Descripción    : Estructura general: menú lateral, barra superior y
                    área de contenido. Incluye la versión de celular.
   ===================================================================== */





/* ---------------------------------------------------------------------
   Contenedor general
   --------------------------------------------------------------------- */

.app {
  display: flex;
  height: 100vh;
  height: 100dvh;
  background: var(--fondo);
}





.app__principal {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}





.app__velo {
  display: none;
}





/* ---------------------------------------------------------------------
   Menú lateral
   --------------------------------------------------------------------- */

.menu {
  width: var(--ancho-menu);
  flex: none;
  display: flex;
  flex-direction: column;
  padding: 16px 12px 12px;
  overflow-y: auto;
  background: var(--superficie);
  border-right: 1px solid var(--borde);
  transition: width var(--transicion);
}





.menu__cabecera {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 4px 16px;
}





.menu__logo {
  width: 38px;
  height: 48px;
  flex: none;
  object-fit: contain;
}





.menu__nombre {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--cafe-raiz);
}





.menu__subtitulo {
  font-size: 12px;
  color: var(--texto-tenue);
}





.menu__navegacion {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}





.menu__separador {
  height: 1px;
  margin: 8px 4px;
  background: var(--borde);
}





.menu__item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  height: 40px;
  padding: 0 12px;
  border-radius: var(--radio);
  font-size: 14px;
  font-weight: 500;
  color: var(--texto-suave);
  transition:
    background var(--transicion),
    color var(--transicion);
}





.menu__item:hover {
  background: var(--hover-verde);
  color: var(--verde-bosque);
}





/* Opción de la pantalla actual. */
.menu__item[aria-current="page"] {
  background: var(--activo-verde);
  color: var(--verde-bosque);
  font-weight: 600;
}





.menu__item[aria-current="page"]::before {
  content: "";
  position: absolute;
  left: -12px;
  top: 9px;
  bottom: 9px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--verde-hoja);
}





/* ---------------------------------------------------------------------
   Menú contraído (solo iconos, en escritorio)
   --------------------------------------------------------------------- */

.app--colapsado .menu {
  width: var(--ancho-menu-colapsado);
  padding-left: 10px;
  padding-right: 10px;
}





.app--colapsado .menu__marca,
.app--colapsado .menu__texto {
  display: none;
}





.app--colapsado .menu__cabecera {
  justify-content: center;
}





.app--colapsado .menu__item {
  justify-content: center;
  padding: 0;
}





.app--colapsado .menu__item[aria-current="page"]::before {
  left: -10px;
}





/* ---------------------------------------------------------------------
   Barra superior
   --------------------------------------------------------------------- */

.barra {
  flex: none;
  display: flex;
  align-items: center;
  gap: 12px;
  height: calc(var(--alto-barra) + env(safe-area-inset-top, 0px));
  padding: env(safe-area-inset-top, 0px) 16px 0;
  background: var(--superficie);
  border-bottom: 1px solid var(--borde);
}





/* El logotipo y el título de la barra solo se ven en celular. */
.barra__logo,
.barra__titulo {
  display: none;
}





.barra__espacio {
  flex: 1;
}





.barra__usuario {
  display: flex;
  align-items: center;
  gap: 10px;
}





.barra__avatar {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--activo-verde);
  color: var(--verde-bosque);
  font-size: 13px;
  font-weight: 700;
}





.barra__datos {
  line-height: 1.2;
}





.barra__nombre {
  font-size: 13px;
  font-weight: 600;
}





.barra__rol {
  font-size: 12px;
  color: var(--texto-tenue);
}





/* ---------------------------------------------------------------------
   Área de contenido y encabezado de cada pantalla
   --------------------------------------------------------------------- */

.contenido {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 20px 24px calc(20px + env(safe-area-inset-bottom, 0px));
}





.pagina__encabezado {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
}





.pagina__titulo {
  font-size: 22px;
  font-weight: 700;
}





.pagina__subtitulo {
  margin-top: 2px;
  font-size: 13px;
  color: var(--texto-tenue);
}





.pagina__acciones {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}





.tarjeta {
  padding: 16px 20px;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio-grande);
}





.tarjeta__titulo {
  margin-bottom: 12px;
  font-size: 15px;
  font-weight: 700;
}





.rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}





/* Lista de datos: etiqueta a la izquierda, valor a la derecha. */
.datos {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px 16px;
}





.datos dt {
  color: var(--texto-tenue);
}





.datos dd {
  font-weight: 600;
  overflow-wrap: anywhere;
}





/* Indicador mientras se carga una pantalla. */
.contenido[aria-busy="true"]::after {
  content: "";
  display: block;
  width: 28px;
  height: 28px;
  margin: 48px auto;
  border: 3px solid var(--activo-verde);
  border-top-color: var(--verde-bosque);
  border-radius: 50%;
  animation: girar 0.8s linear infinite;
}





/* Mensaje centrado (pantalla en construcción, sin acceso, no encontrada). */
.mensaje-central {
  max-width: 460px;
  margin: 64px auto;
  text-align: center;
  color: var(--texto-suave);
}





.mensaje-central__icono {
  display: inline-flex;
  margin-bottom: 12px;
  color: var(--verde-hoja);
}





.mensaje-central__titulo {
  margin-bottom: 6px;
  font-size: 18px;
  font-weight: 700;
  color: var(--texto);
}





.mensaje-central__acciones {
  margin-top: 16px;
}





/* ---------------------------------------------------------------------
   Celular y tableta (hasta 900 px de ancho)
   --------------------------------------------------------------------- */

@media (max-width: 900px) {

  /* El menú se convierte en un cajón que se abre desde la izquierda. */
  .menu {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 40;
    width: min(300px, 86vw);
    padding-top: calc(16px + env(safe-area-inset-top, 0px));
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    transform: translateX(-100%);
    transition: transform var(--transicion);
    box-shadow: 8px 0 30px rgba(10, 20, 5, 0.25);
  }

  .app--menu-abierto .menu {
    transform: none;
  }

  .app--menu-abierto .app__velo {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 30;
    background: rgba(29, 36, 25, 0.5);
  }

  .menu__item {
    height: 48px;
    font-size: 15px;
  }

  /* En celular se ignora el modo contraído. */
  .app--colapsado .menu {
    width: min(300px, 86vw);
    padding-left: 12px;
    padding-right: 12px;
  }

  .app--colapsado .menu__marca,
  .app--colapsado .menu__texto {
    display: revert;
  }

  .app--colapsado .menu__cabecera {
    justify-content: flex-start;
  }

  .app--colapsado .menu__item {
    justify-content: flex-start;
    padding: 0 12px;
  }

  .app--colapsado .menu__item[aria-current="page"]::before {
    left: -12px;
  }

  .barra {
    gap: 4px;
    padding-left: 8px;
    padding-right: 8px;
  }

  .barra__logo {
    display: block;
    height: 36px;
    width: auto;
  }

  .barra__titulo {
    display: block;
    padding-left: 6px;
    font-size: 16px;
    font-weight: 700;
  }

  .barra__datos {
    display: none;
  }

  .contenido {
    padding: 12px 12px calc(12px + env(safe-area-inset-bottom, 0px));
  }

  .pagina__titulo {
    font-size: 20px;
  }

}





/* ---------------------------------------------------------------------
   Pantalla de arranque (mientras se verifica la sesión)
   --------------------------------------------------------------------- */

.arranque {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
}





.arranque img {
  width: 96px;
  height: auto;
  animation: respirar 1.4s ease-in-out infinite;
}





@keyframes respirar {

  50% {
    opacity: 0.45;
  }

}





/* ---------------------------------------------------------------------
   Botón "Cerrar sesión"
   --------------------------------------------------------------------- */

.barra__salir {
  flex: none;
}





@media (max-width: 900px) {

  /* En celular queda solo el icono, en tamaño táctil. */
  .barra__salir {
    width: var(--alto-control-grande);
    height: var(--alto-control-grande);
    padding: 0;
  }

  .barra__salir-texto {
    display: none;
  }

}