/* -------------------------------------------------------------------------- */
/*                                  VARIABLES                                 */
/* -------------------------------------------------------------------------- */
:root {
  --color-white: #FFFFFF;
  --color-black-bg: #242424;
  --color-gray-text-default: #9CA3AF;
  --color-gray-600-hover-border: #4B5563;
  --color-gray-800-active-bg: #1F2937;
  --sidebar-width: 280px;
}

/* -------------------------------------------------------------------------- */
/*                                 ESTRUCTURA                                 */
/* -------------------------------------------------------------------------- */
body {
  margin: 0;
  font-family: Arial, sans-serif;
  background-color: #f0f0f0;
  overflow-x: hidden;
}

.sidebar {
  width: var(--sidebar-width);
  height: 100vh;
  background: var(--color-black-bg);
  color: var(--color-white);
  padding: 25px;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  position: fixed;
  top: 0;
  z-index: 1000;

  /* --- INICIO DE LA CORRECCIÓN CLAVE --- */
  /* En lugar de 'transform', usamos 'left' para ocultar. */
  left: calc(-1 * var(--sidebar-width));
  /* La transición ahora se aplica a la propiedad 'left'. */
  transition: left 0.4s ease-in-out;
  /* --- FIN DE LA CORRECCIÓN CLAVE --- */
}

.sidebar.visible {
  /* Al estar visible, la posición 'left' es 0. */
  left: 0;
}

#sidebarOverlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease-in-out;
  z-index: 999;
}

#sidebarOverlay.active {
  opacity: 1;
  pointer-events: auto;
}

/* -------------------------------------------------------------------------- */
/*                        BOTÓN TOGGLE (Ahora funcionará)                     */
/* -------------------------------------------------------------------------- */
#sidebarToggle {
  /* Posicionamiento fijo respecto a la ventana */
  position: fixed;
  width: 45px;
  height: 45px;
  top: 50%;
  left: 0;
  transform: translate(-50%, -50%);
  transition: left 0.4s ease-in-out, background-color 0.3s;
  /* --- FIN DE LA CORRECCIÓN CLAVE --- */
  background-color: #000000;
  color: var(--color-white);
  border: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.25);
  z-index: 1100;
  /* Debe estar por encima del sidebar y el overlay */
}

/* Cuando el sidebar está abierto (usando la clase en el body) */
body.sidebar-open #sidebarToggle {
  /* Se mueve para centrarse en el borde derecho del sidebar abierto */
  left: var(--sidebar-width);
}

body.sidebar-open #sidebarToggle .svgIcon {
  transform: translateX(0px);
}

#sidebarToggle .svgIcon {
  width: 16px;
  height: 16px;
  fill: currentColor;
  transform: translateX(10px);
  transition: transform 0.3s ease;
  /* Añadimos transición al icono */
}

/* -------------------------------------------------------------------------- */
/*                           CONTENIDO DEL SIDEBAR                            */
/* -------------------------------------------------------------------------- */

/* --- INICIO DE LA MODIFICACIÓN --- */
/* Nuevo contenedor que envuelve el contenido del sidebar */
.sidebar-content-wrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
  /* Mantenemos esto */
  /* La línea 'overflow: hidden;' ha sido eliminada. */
}

/* --- FIN DE LA MODIFICACIÓN --- */

.sidebar-header{
  border-bottom: 1px solid var(--color-gray-600-hover-border);
}

.sidebar-header,
.sidebar-footer,
.hist,
.sidebar-nav {
  width: 100%;
  /* No necesitamos el flex aquí, lo controla el wrapper */
}

/* El header y el título del historial no crecen */
.sidebar-header,
.hist {
  flex-shrink: 0;
  border-bottom: 1px solid var(--color-gray-600-hover-border);
}

.sidebar-nav {
  /* --- INICIO DE LA MODIFICACIÓN CLAVE --- */
  flex-grow: 1;
  overflow-y: auto;
  padding-right: 5px;
  margin-bottom: 10px;
  
  /* --- ESTA ES LA LÍNEA CLAVE AÑADIDA --- */
  min-height: 0; 
  /* Evita que el contenedor se expanda más allá de lo debido en flex-column */
  /* --- FIN DE LA MODIFICACIÓN CLAVE --- */
}
.hist {
  font-size: 1.5em;
  font-weight: 500;
  padding: 10px 0;
  margin-bottom: 10px;
  text-align: center;
  /* Centramos el texto para consistencia */
}

.nav-item {
  color: white;
  font-size: 1em;
  font-weight: 500;
  padding: 12px 15px;
  width: 95%;
  box-sizing: border-box;
  cursor: pointer;
  margin-bottom: 12px;
  border-radius: 6px;
  border-left: 4px solid transparent;
  transition: background-color 0.2s, border-left-color 0.2s;
  text-align: center;
  border-bottom: 2px solid var(--color-gray-600-hover-border);
}

.nav-item:hover {
  background-color: var(--color-gray-600-hover-border);
}

.nav-item.active {
  background-color: var(--color-gray-800-active-bg);
  font-weight: 600;
  border-left-color: var(--color-white);
}

.sidebar-footer {
  /* --- INICIO DE LA CORRECCIÓN --- */
  flex-shrink: 0;
  /* Asegura que el footer no se encoja */
  padding-top: 15px;
  /* ELIMINAMOS 'margin-top: auto;' */
  border-top: 1px solid var(--color-gray-600-hover-border);
  display: flex;
  justify-content: center;
  align-items: center;
  /* --- FIN DE LA CORRECCIÓN --- */
}

/* -------------------------------------------------------------------------- */
/*                      BOTONES DE ACCIÓN DEL SIDEBAR                         */
/* -------------------------------------------------------------------------- */

.Btn1,
.BtnSugerencia {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 240px;
  height: 45px;
  border: none;
  border-radius: 5px;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  margin-bottom: 1rem;
  background-color: #f3f3f3;
  color: #141414;
  font-weight: 700;
  position: relative;
  transition: transform 0.1s, box-shadow 0.1s;
}

.Btn1:active,
.BtnSugerencia:active {
  transform: translateY(2px);
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
}

.Btn1 {
  background-color: #FFFFFF;
  border: 2px solid #FFFFFF;
  color: #141414;
  width: 100%;
  padding: 14px 15px;
  box-sizing: border-box;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  font-weight: 700;
  cursor: pointer;
  margin-bottom: 1rem;
  transition: transform 0.1s, border-color 0.2s;
  box-shadow: none;
}

.Btn1:hover {
  border-color: #788aa5;
}

/* --- Estado Active: efecto de "presionado" --- */
.Btn1:active {
  transform: scale(0.97);
  background-color: #858a94;
}

/* --- Estilos para el icono SVG --- */
.Btn1 .svg { /* Usamos .Btn1 .svg para ser más específicos */
  width: 28px;
  height: 28px;
  margin-right: 10px;
  fill: currentColor;
  /* --- CAMBIO 1: Añadimos 'transform' a la transición --- */
  /* Esto asegura que tanto el color (fill) como el movimiento (transform) sean suaves */
  transition: fill 0.2s, transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* --- CÓDIGO AÑADIDO: Animación del SVG en el hover del botón --- */
.Btn1:hover .svg {
  transform: translateY(-1px) scale(1.2);
}


.BtnSugerencia {
  font-family: inherit;
  padding: 0.3em 0.5em;
  font-size: 1rem;
  margin-bottom: 0;
}

.BtnSugerencia .svg-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.2);
  margin-right: 0.5em;
  transition: all 0.3s;
}

.BtnSugerencia:hover .svg-wrapper {
  background-color: rgba(0, 0, 0, 0.5);
}

.BtnSugerencia:hover svg {
  transform: rotate(45deg);
  fill: white;
}

/* -------------------------------------------------------------------------- */
/*                    ANIMACIÓN DEL CONTENIDO PRINCIPAL                       */
/* -------------------------------------------------------------------------- */

/* --- INICIO DE LA MODIFICACIÓN CLAVE --- */
/* Ya no necesitamos ninguna regla aquí. El sidebar es 'position: fixed' 
   y se superpondrá de forma natural al contenido. 
   Eliminamos las reglas de 'margin-left' para que el contenido no se mueva. */
#appContentWrapper {
  /* No necesita transición ni margen */
  transition: none;
  margin-left: 0 !important;
  /* Aseguramos que no se mueva */
}

/* --- FIN DE LA MODIFICACIÓN CLAVE --- */


/* -------------------------------------------------------------------------- */
/*                                 RESPONSIVE                                 */
/* -------------------------------------------------------------------------- */
@media screen and (max-width: 768px) {
  :root {
    --sidebar-width: 260px;
  }

  .Btn1,
  .BtnSugerencia {
    width: 100%;
    box-sizing: border-box;
  }

  .sidebar-nav{
    max-height: 470px;
  }
}