/* ============================
RESET BÁSICO
============================ */
html,
body {
  margin: 0 !important;
  padding: 0 !important;
}

/* ============================
CONTENEDOR GENERAL
============================ */
.container_menu {
  min-height: 100vh;
  display: grid;
  /* Sidebar ancho auto (260px o 48px) + contenido */
  grid-template-columns: auto 1fr;
}

/* Scroll helpers */
.scrollable-none {
  overflow: none !important;
}

/* ============================
SIDEBAR — DESKTOP (por defecto)
============================ */
#sidebar {
  box-sizing: border-box;
  height: 100vh !important;
  width: 260px;
  padding: 5px 1em;
  background-color: var(--color-primary);
  position: sticky;
  top: 0;
  align-self: start;
  transition: 300ms ease-in-out;
  text-wrap: nowrap;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--color-tertiary2);
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
  z-index: 50;
}

#sidebar::-webkit-scrollbar { /* Chrome, Edge, Safari */
  display: none;
}

/* Modo cerrado (desktop) */
#sidebar.close {
  padding: 5px;
  width: 48px;
}

.logo_general {
  transform: scaleX(1);
  transform-origin: left;
  transition: transform 0.3s ease;
  height: 40px;
}

/* Si el nav tiene la clase "close", oculta/contrae el logo */
nav.close .logo_general {
  transform: scaleX(0);
}

#sidebar ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

#sidebar > ul > li:first-child {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 16px;
}

#sidebar ul li a {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--color-white);
}

#sidebar li a span {
  font-size: 13px !important;
  font-weight: 500 !important;
}

#sidebar a,
#sidebar .dropdown-btn,
#sidebar .logo {
  border-radius: 0.5em;
  padding: 0.85em;
  text-decoration: none;
  color: var(--color-white);
  display: flex;
  align-items: center;
  gap: 1em;
}

.dropdown-btn {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  font: inherit;
  cursor: pointer;
}

/* Íconos del menú */
#sidebar svg {
  flex-shrink: 0;
  fill: var(--color-white);
  width: 22px;
  height: 22px;
}

#sidebar a span,
#sidebar .dropdown-btn span {
  flex-grow: 1;
}

#sidebar a:hover,
#sidebar .dropdown-btn:hover {
  color: #ffffff !important;
  background-color: var(--color-primary-light); /* más claro que el fondo vino */
}

#sidebar .sub-menu a:hover {
  color: #ffffff !important;
  background-color: var(--color-primary-light);
}

/* Submenús (desktop) */
#sidebar .sub-menu {
  display: grid;
  grid-template-rows: 0fr;
  transition: 300ms ease-in-out;
}
#sidebar .sub-menu > div {
  overflow: hidden;
}
#sidebar .sub-menu.show {
  grid-template-rows: 1fr;
}

.dropdown-btn svg {
  transition: 200ms ease;
}
.rotate svg:last-child {
  rotate: -180deg;
}

#sidebar .sub-menu a {
  padding-left: 3.6em;
  color: var(--color-white);
  font-size: 13px !important;
}

/* Toggle desktop */
#toggle-btn {
  margin-left: auto;
  padding: 0.6em;
  border: none;
  border-radius: 0.5em;
  background: none;
  cursor: pointer;
}
#toggle-btn svg {
  transition: rotate 150ms ease;
}
#toggle-btn:hover {
  background-color: var(--color-secondary-blur);
}

/* ============================
MAIN
============================ */
main {
  padding: min(30px, 0.7%);
}

/* ============================
ESTADO ACTIVO (desktop)
============================ */
#sidebar ul li.active a  {
  background-color: var(--color-body);
  padding-right: 50px !important;
  color: var(--color-primary) !important;
}

/* ============================
UTILIDADES: MOSTRAR / OCULTAR SEGÚN DISPOSITIVO
============================ */

/* Por defecto: todo visible */
.is-desktop-only,
.is-mobile-only {
  display: initial;
}

/* En móvil ocultamos .is-desktop-only */
@media (max-width: 800px) {
  .is-desktop-only {
    display: none !important;
  }
}

/* En escritorio ocultamos .is-mobile-only */
@media (min-width: 801px) {
  .is-mobile-only {
    display: none !important;
  }
}

/* ============================
RESPONSIVE — MÓVIL
============================ */
@media (max-width: 800px) {

  /* El layout deja de ser grid: contenido + barra inferior */
  .container_menu {
    display: block;
  }

  main {
    /* espacio inferior para que la barra no tape el contenido */
    padding: 1.5em 1em;
    padding-bottom: calc(10vh + 16px);
  }

  /* Sidebar se convierte en barra inferior */
  #sidebar {
    height: 10vh;               /* máx 10% altura de pantalla */
    min-height: 56px;           /* altura mínima para iconos */
    max-height: 72px;           /* por si 10vh es muy grande en tablets */
    width: 100%;
    border-right: none;
    border-top: 1px solid #ccc !important;
    padding: 0 4px;
    position: fixed;
    top: auto;
    bottom: 0;
    left: 0;
    z-index: 100 !important;
    overflow-y: visible;
    display: flex;
    align-items: center;
    background-color: var(--color-primary);
  }

  /* que el modo "close" no reduzca ancho en móvil */
  #sidebar.close {
    width: 100%;
    padding: 0 4px;
  }

  /* Lista de ítems en fila horizontal, scrollable */
  #sidebar > ul {
    padding: 0 4px;
    margin: 0;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: flex-start;  /* íconos alineados al inicio */
    column-gap: 4px;
    width: 100%;
    overflow-x: auto;             /* SCROLL HORIZONTAL REAL */
    overflow-y: hidden;
    scrollbar-width: thin;        /* Firefox */
  }

  #sidebar > ul::-webkit-scrollbar {
    height: 4px;                  /* visible pero discreto */
  }

  #sidebar > ul::-webkit-scrollbar-track {
    background: transparent;
  }

  #sidebar > ul::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.4);
    border-radius: 4px;
  }

  #sidebar ul li {
    height: 100%;
    flex: 0 0 56px;               /* ancho fijo por ícono */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  #sidebar ul a,
  #sidebar ul .dropdown-btn {
    width: 100%;
    height: 100%;
    padding: 0;
    border-radius: 0;
    justify-content: center;
    gap: 0;
  }

  /* Ocultamos textos, solo iconos */
  #sidebar ul li span,
  #sidebar ul li:first-child, /* botón de toggle y logo se ocultan */
  #sidebar .dropdown-btn svg:last-child {
    display: none;
  }

  /* Submenú flotante por encima de la barra inferior */
  #sidebar ul li .sub-menu.show {
    position: fixed;
    bottom: 10vh; /* justo encima de la barra */
    left: 0;
    box-sizing: border-box;
    height: auto;
    min-height: 48px;
    width: 100%;
    background-color: var(--color-primary);
    border-top: 1px solid #fff !important;
    display: flex;
    justify-content: center;
    padding: 4px 0;
    z-index: 101;
  }

  #sidebar ul li .sub-menu.show > div {
    overflow-x: auto;
    white-space: nowrap;
  }

  #sidebar ul li .sub-menu.show li {
    display: inline-flex;
  }

  #sidebar ul li .sub-menu.show a {
    box-sizing: border-box;
    padding: 0.9em 1em;
    width: auto;
    justify-content: center;
  }

  /* ============================
  ÍTEM ACTIVO EN BARRA INFERIOR
  ============================ */
  #sidebar ul li.active {
    background-color: var(--color-primary-light);
    border-radius: 6px;
  }

  #sidebar ul li.active a {
    padding-right: 0 !important;
    background-color: transparent;
    color: #fff !important;
  }

  #sidebar ul li.active svg {
    fill: #fff;
  }

  /* ============================
  AJUSTES DE TIPOGRAFÍA Y TARJETAS EN MÓVIL
  (ajusta las clases a las que uses realmente)
  ============================ */

  /* Títulos principales un poco más compactos */
  .page-title,
  h1 {
    font-size: 1.6rem;
    line-height: 1.2;
  }

  .page-subtitle,
  .section-subtitle {
    font-size: 0.85rem;
  }

  /* Tarjetas de apps en la home */
  .card-app-home {
    padding: 1.4rem 1.3rem;
    margin-bottom: 1rem;
  }

  .card-app-home h3,
  .card-app-home .card-title {
    font-size: 1.2rem;
    line-height: 1.25;
  }

  .card-app-home p {
    font-size: 0.9rem;
  }

  /* Contenedor principal un poco más angosto en móvil */
  .layout-main,
  .content-wrapper {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}