/* ========================================== */
/* Definición de Variables CSS */
/* ========================================== */
:root {
    --color-primario: #2E8B57; /* Verde Marino (SeaGreen) definido por el usuario */
    --color-texto-claro: #ffffff; /* Blanco para texto sobre fondo primario */
    --color-texto-oscuro: #333333; /* Para elementos sobre fondo claro */
    /* Color para bordes/hovers sutiles sobre fondo primario */
    --color-borde-sobre-primario: rgba(255, 255, 255, 0.2);
    --color-hover-sobre-primario: rgba(255, 255, 255, 0.1);
  }
  
  /* ========================================== */
  /* Encabezado (<header class="navbar">) */
  /* ========================================== */
  .navbar {
      background-color: var(--color-primario);
      padding: 10px 15px;
      color: var(--color-texto-claro);
      display: flex;
      align-items: center;
      position: relative;
      z-index: 100;
  }
  
  /* Logo */
  .logoInicio { flex-shrink: 0; }
  .logoInicio img {
      width: 50px; /* Tamaño por defecto */
      height: auto;
      display: block;
      transition: transform 0.3s ease, width 0.3s ease; /* Añadida transición de width */
  }
  .logoInicio a:hover img { transform: scale(1.05); }
  
  /* Buscador */
  .search-container {
      margin-left: 20px;
      /* Se ocultará en móvil mediante media query */
  }
  .search-container input[type="text"] { padding: 7px 10px; border: none; border-radius: 4px 0 0 4px; font-size: 14px; vertical-align: middle; min-width: 150px; }
  .search-container button { padding: 7px 12px; background: #f0f0f0; color: var(--color-texto-oscuro); border: none; cursor: pointer; border-radius: 0 4px 4px 0; margin-left: -5px; vertical-align: middle; transition: background-color 0.2s ease; }
  .search-container button:hover { background: #e0e0e0; }
  
  /* Icono Hamburguesa */
  .icon {
      display: block;
      font-size: 2rem; /* Tamaño por defecto */
      color: inherit;
      cursor: pointer;
      background: none;
      border: none;
      padding: 10px; /* Padding por defecto */
      text-decoration: none;
      margin-left: auto; /* Empuja a la derecha */
      flex-shrink: 0;
      transition: font-size 0.3s ease, padding 0.3s ease; /* Transiciones opcionales */
  }
  
  /* ========================================== */
  /* Menú Lateral Deslizable (<nav class="navbar-links" id="mySidenav">) */
  /* ========================================== */
  .navbar-links {
      display: flex;
      flex-direction: column;
      align-items: stretch;
      height: 100%;
      width: 85%; /* Ancho por defecto */
      max-width: 350px; /* Ancho máximo por defecto */
      position: fixed;
      z-index: 1001;
      top: 0;
      right: 0; /* Sale de la derecha */
      left: auto;
      background-color: var(--color-primario); /* Fondo primario */
      color: var(--color-texto-claro); /* Texto claro */
      box-shadow: -3px 0px 15px rgba(0, 0, 0, 0.2); /* Sombra a la izquierda */
      padding-top: 60px; /* Espacio para botón cierre */
      padding-bottom: 20px; /* Espacio inferior */
      box-sizing: border-box;
      overflow-y: auto; /* Scroll si es necesario */
      transform: translateX(100%); /* Oculto a la derecha */
      transition: transform 0.4s ease-in-out, width 0.3s ease, max-width 0.3s ease; /* Animaciones */
  }
  
  /* --- Estado Visible del Menú --- */
  .navbar-links.open {
      transform: translateX(0); /* Visible */
  }
  
  /* ========================================== */
  /* Botón de Cierre DENTRO del Menú (Top-Left) */
  /* ========================================== */
  .navbar-links .close-btn {
      position: absolute;
      top: 15px;
      left: 20px;
      right: auto;
      font-size: 30px;
      line-height: 1;
      color: var(--color-texto-claro);
      opacity: 0.8;
      text-decoration: none;
      background: none;
      border: none;
      padding: 5px;
      transition: opacity 0.2s ease, transform 0.2s ease;
      z-index: 1002;
  }
  .navbar-links .close-btn:hover {
      opacity: 1;
      transform: scale(1.1);
  }
  
  /* ========================================== */
  /* Enlaces Dentro del Menú (<a> dentro de .navbar-links) */
  /* ========================================== */
  .navbar-links a:not(.close-btn) {
      padding: 14px 15px 14px 32px;
      text-decoration: none;
      font-size: 18px;
      color: var(--color-texto-claro);
      display: block; /* Disposición vertical */
      transition: background-color 0.2s ease;
      border-bottom: 1px solid var(--color-borde-sobre-primario); /* Borde sutil */
      text-align: left;
  }
  .navbar-links a:not(.close-btn):last-child {
      border-bottom: none;
  }
  .navbar-links a:not(.close-btn):hover {
      background-color: var(--color-hover-sobre-primario); /* Fondo hover sutil */
  }
  
  /* ========================================== */
  /* Fondo Oscuro (Overlay) (<div class="menu-overlay">) */
  /* ========================================== */
  .menu-overlay {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.6);
      z-index: 1000;
      cursor: pointer;
      opacity: 0;
      transition: opacity 0.4s ease-in-out;
  }
  .menu-overlay.visible {
      display: block;
      opacity: 1;
  }
  
  /* ================================================== */
  /* Media Queries (Ajustes Responsivos) */
  /* ================================================== */
  
  /* --- Estilos para Tablet/Móvil (768px o menos) --- */
  @media screen and (max-width: 768px) {
  
    /* Ocultar el contenedor de búsqueda */
    .search-container {
      display: none;
    }
  
    /* Ajustar padding del navbar */
    .navbar {
      padding: 8px 12px;
    }
  
    /* Ajustar tamaño del logo */
    .logoInicio img {
      width: 40px; /* Logo más pequeño */
    }
  
    /* Ajustar icono hamburguesa (opcional) */
    .icon {
      /* font-size: 1.8rem; */
      /* padding: 8px; */
    }
  
    /* Ajustar menú lateral (opcional) */
     .navbar-links {
       /* max-width: 300px; */ /* Reducir ancho máximo */
       /* width: 90%; */       /* Usar porcentaje */
     }
  }
  
  /* --- Estilos para Móviles Muy Pequeños (480px o menos) --- */
  @media screen and (max-width: 480px) {
      /* Ajustar menú lateral para pantallas muy estrechas */
      .navbar-links {
          max-width: 300px; /* Ancho aún menor si es necesario */
          width: 90%;       /* Ocupa más porcentaje */
      }
       /* Podrías necesitar ajustar el padding de los enlaces aquí si el texto no cabe bien */
       /* .navbar-links a:not(.close-btn) { padding: 12px 15px 12px 25px; font-size: 16px; } */
  }
  
  /* --- Estilos para Escritorio (769px o más) --- */
  @media screen and (min-width: 769px) {
      /* Aquí es donde podrías, si quisieras, desactivar el menú lateral */
      /* y mostrar un menú horizontal tradicional. */
      /* Ejemplo MUY básico (necesitaría más estilos): */
      /*
      .icon { display: none; } // Ocultar hamburguesa
      .menu-overlay { display: none !important; } // Asegurar overlay oculto
      .navbar-links { // Resetear estilos de menú lateral y aplicar de menú horizontal
          display: flex;
          flex-direction: row;
          position: static; // No fijo, no absoluto
          transform: none; // Quitar transform
          height: auto;
          width: auto; // Ancho automático
          max-width: none;
          background-color: transparent; // Sin fondo
          box-shadow: none; // Sin sombra
          padding-top: 0;
          padding-bottom: 0;
          overflow-y: visible;
          margin-left: 20px; // Espacio después del buscador
      }
      .navbar-links.open { // Anular estado open
           transform: none;
      }
      .navbar-links .close-btn { display: none; } // Ocultar 'X'
      .navbar-links a:not(.close-btn) {
          color: var(--color-texto-claro); // Texto blanco como en navbar
          padding: 8px 15px; // Padding de enlace horizontal
          border-bottom: none; // Sin borde inferior
          font-size: 16px; // Tamaño normal
      }
       .navbar-links a:not(.close-btn):hover {
          background-color: var(--color-hover-sobre-primario); // Mismo hover sutil
      }
      .search-container { display: block !important; } // Asegurar que el buscador sea visible
      */
  }