@charset "UTF-8";
/* CSS Document */
* {
  box-sizing: border-box
}
body {
  font-family: 'Inter', sans-serif;
  margin: 0;
  /*background-color: #f3f4f6; /* gray-100 */
  background-image: url('../../images/fondosolcss.gif');
  color: black; /*#1f2937; /* gray-800 */
  line-height: 1.6;
}
body.mobile-menu-open {
  overflow: hidden; /* Prevent body scroll when mobile panel is open */
}
/* Container */
.container {
  width: 85%;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}
/* Navigation - General */
nav ul {
  list-style: none;
  padding: 5px;
  margin: 0px 0px 0px 0px;
}
nav a, nav button {
  text-decoration: none;
  color: #000000;
  display: block;
  padding-left: 0rem;
  padding-right: 0rem;
  background: var(--naranja-principal);
  border: none;
  cursor: pointer;
  width: 100%;
  text-align: left;
  font-size: 1rem;
  font-weight: bolder;
}
nav button { /* Ensures button elements can also use flex for alignment with arrow */
  display: flex;
  align-items: center;
  justify-content: space-between;
}
/* Header Styling */
.site-header {
  text-align: center;
  background-color: var(--blanco);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); /* shadow-md */
}
.header-total {
    max-width: 1200px;
    width: 85%;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  text-align: center;
  align-items: center;
  margin: 0px auto 0px auto;
}
.header-contenedor {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex-grow: 1;
}
.header-contenedor-top {
  display: flex;
  flex-direction: row;
}
.header-logo {
  display: flex;
  flex-direction: column;
  width: 200px;
  background-color: var(--blanco);
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
}
.header-titulo {
  flex-grow: 1;
    background-color: var(--blanco);
    align-content: center;
    padding: 10px;
}
.header-titulo h1 {
  font-size: 2.5rem;
    line-height: 2rem;
  font-weight: bolder; /* font-bold */
  color: var(--texto-black);
}
.header-contenedor-bottom {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.header-fecha {
  width: 200px;
  text-align: center;
  flex-shrink: 0;
  font-size: .75rem;
  color: var(--texto-black) !important;
  font-weight: bold;
  margin-top: 4px;
}
.header-slogan {
  background-color: var(--blanco);
  text-align: center;
  flex-grow: 1;
padding: 0px 10px 0px 10px;
}
.header-slogan h2 {
  font-size: 1rem;
  line-height: 1rem;
  font-weight: bold;
  color: var(--texto-black);
  text-shadow: 3px 3px 3px var(--gray);
  margin-bottom: -5px;
}
.header-foto {
  width: 200px;
  margin: auto 0px;
  background-color: aqua;
  text-align: center;
  align-items: center;
}
/* Desktop Navigation */
#desktop-menu {
  /*Este es el div donde está el menú*/
  margin: 10px 0px 6px 0px;
  background-color: var(--naranja-principal); /*#1f2937; /* gray-800 */
  color: #000000;
  box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.2);
  padding: 0px 0px 0px 0px;
  /* box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); /* shadow-lg */
}
#desktop-menu > .container > ul {
  display: flex;
  width: 100%;
  justify-content: space-around;
  font-size: 1rem; /* Adjusted for better fit */
  color: #000000;
  font-weight: bolder;
}
#desktop-menu > .container > ul > li {
  position: relative; /* For submenu positioning */
  flex-grow: 1; /* Distribute space */
  text-align: center;
  margin: 5px 0px; /* Add small margin between items */
}
#desktop-menu > .container > ul > li > .menu-toggle {
  justify-content: center; /* Center text and arrow */
  text-align: center;
  background-color: var(--naranja-principal);
  padding-bottom: 2px;
}
/* Acá empieza la prueba con el desktop Menu y diferentes colores*/
/*Hasta acá el menú superior*/
/* Acá termina la prueba con el desktop Menu y diferentes colores*/
/* Arrow indicators for menus */
/* >>>>>THIS IS THE CHANGE FROM CHARACTER TO SVG>>>>>: */
.menu-toggle::after, .submenu-toggle::after, .menu-toggle-mobile::after {
  content: ''; /* REMOVED THE ARROW CHARACTER */
  display: inline-block;
  margin-left: 5px;
  transform: rotate(0deg);
  transition: transform 0.1s ease, filter 0.1s ease; /* ADDED FILTER TRANSITION */
  font-size: 0.7em;
  /* >>>>>THIS IS THE NEW SVG BACKGROUND>>>>>: */
  background-image: url('../images/icons/chevron_right.svg');
  background-repeat: no-repeat;
  background-position: right;
  background-size: contain;
  width: 1em; /* ADJUST SIZE AS NEEDED */
  height: 1em; /* ADJUST SIZE AS NEEDED */
}
/* >>>>>THIS IS THE CHANGE FOR THE SVG COLOR ON HOVER>>>>>: */
.menu-toggle:hover::after, .submenu-toggle:hover::after {
  /* THIS FILTER MAKES THE BLACK SVG APPEAR WHITE */
  filter: invert(1) brightness(2);
}
.menu-toggle.open {
  color: white;
}
.menu-toggle.open::after, .submenu-toggle.open::after {
  transform: rotate(90deg); /* Up arrow */
  filter: invert(1) brightness(2);
}
.menu-toggle:hover, .submenu-toggle:hover {
  color: white;
}
.submenu-toggle.open:not(.collapsed) {
  color: white;
  background-color: var(--naranja-secundario);
  /*box-shadow: 0px 10px 3px 0px rgba(100,100,100,1);*/
  position: relative;
  box-shadow: 0px 5px 2px 0px rgba(0, 0, 0, 0.2), 0px 5px 0px 0px rgba(0, 0, 0, 0.2);
  z-index: 5;
}
/* Menu toggle sin flecha*/
.menu-toggle {
  justify-content: center; /* Center text and arrow */
}
/* MODIFICATION: Updated rule for Home link for exact alignment and appearance */
.menu-toggle-link {
  position: inherit;
  display: flex;
  flex-direction: column;
  vertical-align: text-top;
  background-color: var(--naranja-principal);
  color: #0000ff;
  align-self: center;
  justify-content: flex-start;
  margin-bottom: 0px;
  padding: 0px 10px 0px 10px;
  margin-top: 1px;
  height: auto; /* Ensure it fills the li height */
}
.menu-toggle-link a {
  text-align: center;
  color: #000000;
  align-self: center;
  background-color: var(--naranja-principal);
}
.menu-toggle-link a:hover {
  color: white;
}
/* Acá empieza la prueba con el desktop Menu y diferentes colores*/
.menu-toggle {
  /*Este es el hover de los botones del menu principal*/
  background-color: var(--naranja-principal); /*#374151; /* gray-700 */
  border-radius: 0.25rem; /* rounded */
  color: #000000;
}
.submenu-desktop {
  color: var(--texto-black) !important;
}
.submenu-desktop a {
  padding-left: 1rem; /* px-4 */
  padding-right: 3rem;
  margin: 0px 0px 0px -5px;
  word-wrap: normal;
  border-bottom: 1px solid white;
  background-color: var(--naranja-principal);
}
.submenu-title {
  background-color: var(--naranja-secundario);
  padding: 7px 15px;
  margin-top: 10px;
  margin-bottom: 10px;
  border: 1px solid var(--naranja-secundario);
  border-radius: 5px 5px;
}
.submenu-title {
  text-align: center;
  font-weight: bold;
  font-size: 1.1rem;
  color: var(--texto-black);
  line-height: 1.1rem;
}
/* >>>>>>>>#>#>#>#> Here are the new changes for sliding from the left covering full heigth <<<<<<<<<< #<#<#<#<#<# */
.desktop-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 99;
}
.desktop-overlay.active {
  display: block;
}
.submenu-desktop {
  position: fixed !important;
  top: 0;
  left: -300px;
  width: 300px;
  height: 100vh;
  background-color: var(--naranja-principal);
  transition: left 0.3s ease;
  z-index: 100;
  overflow-y: auto;
  padding-top: 40px;
}
.submenu-desktop.open {
  left: 0 !important;
}
.submenu-close-button {
  position: absolute;
  top: 10px;
  right: 0px;
  margin-right: 15px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  background: none;
  cursor: pointer;
  z-index: 101;
  font-weight: bold;
  font-size: 1rem;
  color: black;
}
.submenu-close-button:hover {
  filter: invert(1);
}
.submenu-close-button img {
  width: 20px;
  height: 20px;
}
/*.submenu-close-button {
  position: absolute;
  top: 10px;
  right: 15px;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 101;
}
.submenu-close-button img {
  width: 24px;
  height: 24px;
}
/* >>>>>>>>#>#>#>#> End sliding from left changes <<<<<<<<<< #<#<#<#<#<# */
/* >>>>>>>>#>#>#>#> Final fix for close button alignment and label <<<<<<<<<< #<#<#<#<#<# */
.submenu-toggle {
  padding-left: 15px; /* px-4 */
  padding-right: 5px;
  padding-top: 10px;
  padding-bottom: 10px;
  word-wrap: normal;
  border-bottom: 2px solid var(--naranja-secundario);
  background-color: var(--naranja-secundario);
}
/* Menu toggle sin flecha*/
.submenu-toggle-sin {
  padding-top: 10px;
  padding-left: 4px; /* px-4 */
  padding-bottom: 10px;
  word-wrap: normal;
  border-bottom: 1px solid var(--naranja-principal);
  background-color: var(--naranja-secundario);
}
.submenu-toggle-sin a {
  /*padding-left: 1rem; /* px-4 */
  word-wrap: normal;
  background-color: var(--naranja-secundario);
  text-decoration: none;
  border: none;
}
.submenu-toggle-sin a:hover {
  color: white;
}
.sub-submenu-desktop {
  transition: max-height 0.3s ease-out, opacity 0.3s ease-out, visibility 0.3s ease-out;
  max-height: auto; /* Adjust if content is taller */
  opacity: 1;
  overflow: hidden;
  visibility: visible;
  background-color: var(--naranja-principal);
  box-shadow: 2px 5px 15px -3px rgba(0, 0, 0, 0.5), -2px 4px 6px -2px rgba(0, 0, 0, 0.5);
}
.sub-submenu-desktop {
  /* Este es el sub-submenu */
  padding: 0rem 0rem 0rem 0rem; /* pl-4, applied when visible */
  margin: 0px 10px 10px 10px;
  /*background-color: magenta; /*#404854; /* custom darker gray */
  font-size: .9rem;
  line-height: 1.0;
  /*word-wrap: break-word;*/
  border-bottom: 1px solid white !important;
  /* padding-top and padding-bottom are handled by parent or items if needed when visible */
  transform: translateY(0px);
}
.sub-submenu-desktop {
  transition: 0.5s ease; /* *********/
}
.sub-submenu-desktop > li:nth-child(even) > a {
  background-color: rgba(240, 240, 240, 1.00) !important;
  z-index: 0; /*esta es la posición del submenu abierto */
}
.sub-submenu-desktop > li:nth-child(odd) > a {
  background-color: rgba(230, 230, 230, 1.00) !important;
  z-index: 0; /*esta es la posición del submenu abierto */
}
.sub-submenu-desktop > li:nth-child(odd) > a:hover {
  background-color: rgba(255, 255, 255, 0.9) !important;
  z-index: 0; /*esta es la posición del submenu abierto */
}
.sub-submenu-desktop > li:nth-child(even) > a:hover {
  background-color: rgba(255, 255, 255, 0.9) !important;
  z-index: 0; /*esta es la posición del submenu abierto */
}
.sub-submenu-desktop li:first-child > a {
  padding: 10px 20px 5px 10px;
  margin: 0px 0px 0px 0px;
}
.sub-submenu-desktop li:last-child > a {
  padding: 5px 20px 5px 10px;
  margin: 0px 0px 0px 0px;
}
.sub-submenu-desktop a {
  background-color: var(--naranja-principal); /*#525b67; /* gray-500 (adjusted) */
  padding: 5px 20px 5px 10px;
  margin: 0px 0px 0px 0px;
  word-wrap: normal;
  line-height: normal;
}
/* >>>>>>>>>>>>>>>>>>> ACA EMPIEZA EL BUSCADOR >>>>>>>>>>>>>>>>>>>>>>*/
.search-container {
  width: 100%;
  padding: 5px 5px 5px 5px;
  position: relative;
  border: 1px solid var(--naranja-secundario);
  border-bottom: 3px solid var(--naranja-principal);
  border-radius: 5px 5px;
}
#search-input {
  width: 100%;
  padding: 10px 25px 10px 35px;
  font-size: 1rem;
  color: var(--texto-black) !important;
  font-weight: bolder;
  font-style: italic;
  border: 5px solid var(--naranja-secundario);
  background: url('../images/icons/search_desktop.svg') no-repeat;
  border-radius: 4px;
  outline: none;
  background-position: center left 10px;
  background-color: white;
  transition: border 0.3s;
  box-shadow: inset 2px 2px 2px 2px rgba(0, 0, 0, 0.2), inset -2px 0px 2px 2px rgba(0, 0, 0, 0.2);
}
#search-input:focus {
  background-position: center right 10px;
  padding: 10px 10px;
  border-color: white;
  border: 5px solid white;
  box-shadow: inset 1px 1px 2px 2px rgba(100, 100, 100, 0.2), inset -1px 1px 2px 2px rgba(100, 100, 100, 0.2);
}
#search-input:focus {
  transition: 0.5s ease; /* *********/
}
/* THIS IS A NEW EDIT: PERFECT ALIGNMENT AND INSET SHADOW FOR SEARCH RESULTS */
#search-results {
  position: absolute;
  height: auto;
  top: 63px; /* Position it right below the search container */
  left: 10px;
  right: 10px; /* Make it the same width as the search container */
  width: auto;
  margin-top: 85px; /* Adjust for perfect alignment */
  padding: 3px;
  overflow-y: auto;
  background-color: rgba(240, 240, 240, 1.0);
  border: 5px solid rgba(240, 240, 240, 1.0);
  border-top: 0px solid var(--naranja-secundario);
  border-radius: 0px 0px 4px 4px;
  box-shadow: inset 1px 1px 2px 2px rgba(100, 100, 100, 0.2), inset -1px 1px 2px 2px rgba(100, 100, 100, 0.2), 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* shadow-en los cuatro lados */
  z-index: 100;
  display: none;
  list-style: none;
  text-align: left;
  line-height: normal;
}
#search-results li {
  display: block;
  width: auto;
  padding: 1px 2px 1px 5px;
  text-decoration: none;
  background-color: rgba(240, 240, 240, 1.0);
  border-bottom: 1px solid var(--naranja-secundario);
  color: var(--texto-black);
}
#search-results li:first-child {
  display: block;
  padding: 1px 2px 1px 5px;
  margin-top: 0px;
  text-decoration: none;
  border-bottom: 1px solid var(--naranja-secundario);
  color: inherit;
}
#search-results li:last-child {
  display: block;
  padding: 1px 2px 0px 5px;
  margin-bottom: -5px;
  text-decoration: none;
  border-bottom: none;
  color: inherit;
}
#search-results li:nth-child(odd) > a {
  background-color: rgba(240, 240, 240, 1.0);
}
#search-results a {
  display: block;
  width: auto;
  padding: 4px 2px 4px 5px;
  text-decoration: none;
  background-color: rgba(240, 240, 240, 1.0);
  color: inherit;
}
#search-results li.highlighted a {
  background-color: yellow;
  display: block;
  padding: 4px 2px 4px 5px;
}
#search-results li.highlighted {
  display: block;
  padding: 1px 2px 1px 5px;
  text-decoration: none;
  background-color: yellow;
  color: inherit;
}
.no-results {
  display: table-cell;
  height: auto;
  vertical-align: middle;
  text-align: center;
  color: #666;
  font-style: italic;
  border: 0px !important;
  margin: 3px 0px 3px 0px !important;
  padding-top: 0px;
}
/* >>>>>>>>>>>>>>>>>>> ACA TERMINA EL BUSCADOR >>>>>>>>>>>>>>>>>>>>>>*/
/* Mobile Navigation Bar */
#mobile-menu-bar {
  position: fixed;
  height: 70px;
  width: 100%;
  bottom: 0;
  left: 0;
  right: 10px;
  background-color: var(--naranja-principal); /* gray-900 */
  color: white;
  display: flex;
  padding: 5px 0px 0px 0px;
  justify-content: center; /* Changed for better spacing */
  align-items: start;
  /*padding: 0.25rem 0rem 0.75rem 0rem; /* p-2 */
  box-shadow: 0 -4px 6px -1px rgba(0, 0, 0, 0.1), 0 -2px 4px -2px rgba(0, 0, 0, 0.1); /* shadow-top */
  z-index: 50;
}
/* Updated to apply to both button and a tags */
.mobile-main-menu-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-size: 0.75rem; /* text-xs */
  font-weight: bold;
  line-height: 12px;
  margin: 3px 0px 0px 0px;
  padding: 0rem 0rem; /* p-2 */
  background-color: var(--naranja-principal);
  color: #333333; /* Ensure text color is consistent */
  text-decoration: none; /* remove underline from <a> tag */
  /*border-radius: 10rem 10rem 0rem 0rem; /* rounded */
  transition: background-color 0.3s ease; /* Added transition */
  flex-grow: 1; /* Allow items to grow and fill space */
}
.mobile-main-menu-item-sin {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-size: 0.75rem; /* text-xs */
  font-weight: bold;
  margin: 2px 0px 0px 0px;
  padding: 0rem 0rem; /* p-2 */
  background-color: var(--naranja-principal);
  color: #333333; /* Ensure text color is consistent */
  text-decoration: none; /* remove underline from <a> tag */
  /*border-radius: 10rem 10rem 0rem 0rem; /* rounded */
  transition: background-color 0.3s ease; /* Added transition */
  flex-grow: 1; /* Allow items to grow and fill space */
}
.mobile-main-menu-item svg {
  width: 2.1rem; /* h-5 w-5 */
  height: 2.1rem;
  padding: 3px 0px 0px 0px;
  margin-bottom: 2px; /* mb-1 */
  fill: #333333; /* mb-1 */
  stroke: #333333;
}
.mobile-main-menu-item-sin svg {
  width: 2.0rem; /* h-5 w-5 */
  height: 2.0rem;
  padding: 0px 0px 0px 0px;
  margin-bottom: 2px; /* mb-1 */
  fill: #333333; /* mb-1 */
  stroke: #333333;
}
/*Este es el botón de Directorio Comercial*/
.mobile-main-menu-item-comercial {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: -29px 0px 3px 0px;
  padding: 0rem 1rem 0rem 1rem;
  text-align: center;
  font-size: 0.75rem; /* text-xs */
  line-height: 0.75rem;
  font-weight: bold;
  color: #333333; /* Ensure text color is consistent */
  text-decoration: none; /* remove underline from <a> tag */
  background-color: var(--naranja-principal);
  border-top: 0px;
  border-right: 0px;
  border-left: 0px;
  border-bottom: 0px;
  border-style: solid;
  border-color: var(--naranja-principal_trans);
  border-radius: 2rem 2rem 3rem 3rem; /* rounded */
  transition: background-color 0.3s ease; /* Added transition */
  box-shadow: 0 -5px 6px -1px rgba(0, 0, 0, 0.1); /* 0 -2px 4px -2px rgba(0, 0, 0, 0.1); /* shadow-top */
  flex-grow: 1; /* Allow items to grow and fill space */
}
.mobile-main-menu-item-comercial svg {
  width: 4rem; /* h-5 w-5 */
  height: auto;
  padding: 5px 0px 0px 0px;
  margin-bottom: 7px;
  fill: #333333; /* mb-1 */
  stroke: #333333;
}
/*Acá empieza el menu para mobile*/
.mobile-search-container {
  width: 100%;
  margin: auto; /*5px 5px 0px -1px;*/
  padding: 5px 10px 5px 1px;
  position: relative;
  border-bottom: 1px solid #000000;
}
#mobile-search-input {
  width: 100%;
  left: 3px;
  right: 10px;
  box-sizing: border-box;
  padding: 12px 10px;
  margin-bottom: 10px;
  font-size: 1.25rem;
  background: url('../images/icons/search_desktop.svg') no-repeat;
  background-position: center right 20px;
  background-color: white;
  font-weight: bolder;
  border: 3px solid rgba(0, 0, 0, 0.5);
  border-radius: 4px;
  outline: none;
  box-shadow: inset 1px 1px 2px 2px rgba(100, 100, 100, 0.2), inset -1px 1px 2px 2px rgba(100, 100, 100, 0.2), 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* shadow-en los cuatro lados */
  transition: border 0.3s;
}
#mobile-search-input:focus {
  border-color: white;
  background-color: white;
}
#mobile-search-results {
  position: absolute;
  margin: 0px 0px 0px 0px;
  width: auto;
  top: 57px;
  left: 1px;
  right: 10px;
  padding: 0px 0px 0px 0px;
  box-sizing: border-box;
  height: auto;
  overflow-y: scroll;
  overflow-x: hidden;
  background-color: rgba(240, 240, 240, 1.0);
  border: 3px solid rgba(240, 240, 240, 1.0);
  border-right: 3px solid rgba(240, 240, 240, 1.0);
  border-top: 5px;
  border-radius: 0px 0px 4px 4px;
  box-shadow: inset 1px 1px 2px 2px rgba(100, 100, 100, 0.2), inset -1px 1px 2px 2px rgba(100, 100, 100, 0.2), inset 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* shadow-en los cuatro lados */
  z-index: 100;
  display: none;
  list-style: none;
}
#mobile-search-results li {
  padding: 2px 30px 2px 0px;
  width: auto;
  cursor: pointer;
  transition: all 0.2s;
  border-top: 0px;
  font-size: 1rem;
  font-weight: 600;
  text-align: left;
  line-height: 1.3rem;
  border-bottom: 1px solid var(--naranja-secundario);
}
#mobile-search-results li:first-child {
  padding: 5px 30px 2px 0px;
  width: auto;
  cursor: pointer;
  transition: all 0.2s;
  border-top: 0px;
  font-size: 1rem;
  font-weight: 600;
  text-align: left;
  line-height: 1.3rem;
  border-bottom: 1px solid var(--naranja-secundario);
}
#mobile-search-results li:nth-child(even) {
  padding: 5px 30px 2px 0px;
  width: auto;
  cursor: pointer;
  background-color: rgba(230, 230, 230, 1);
  border-top: 0px;
  font-size: 1rem;
  font-weight: 600;
  text-align: left;
  line-height: 1.3rem;
  border-bottom: 1px solid var(--naranja-secundario);
  box-shadow: inset 3px 0px 2px rgba(0, 0, 0, 0.1), inset -3px 0 2px rgba(0, 0, 0, 0.1);
}
#mobile-search-results li.highlighted {
  background-color: green;
  color: black;
}
.mobile-no-results {
  display: table-cell;
  height: auto;
  line-height: 1rem;
  text-align: center !important;
  margin-top: 30px;
  font-size: .8rem;
  font-weight: bold;
  color: #222222;
  font-style: italic;
}
.mobile-no-results li:over {
  background-color: white;
}
/* Mobile Submenu Panel */
#mobile-submenu-panel {
  position: fixed;
  top: 0;
  left: 0;
  width: 75%; /* w-1/2 */
  max-width: 450px;
  height: 100%;
  background-color: var(--naranja-principal);
  /*box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* shadow-xl */
  transform: translateX(-100%); /* -translate-x-full */
  transition: transform 0.3s ease-in-out; /* Already 0.3s */
  z-index: 60;
  overflow-y: auto;
  overflow-x: hidden;
  /*font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", "sans-serif";*/
  color: #1f2937; /* text-gray-800 */
  margin: 0px 5px 0px -35px; /*Acá edite bordes verdes del menú */
}
#mobile-submenu-panel.panel-open {
  transform: translateX(0); /* translate-x-0 */
}
#close-mobile-panel-button {
  position: absolute;
  top: 10px; /* top-3 */
  left: 50px; /* right-3 */
  color: #4b5563; /* gray-600 */
  font-size: 1.5rem; /* text-2xl */
  background: none;
  border: none;
  padding: 0;
  z-index: 10;
  transition: color 0.3s ease; /* Added transition */
}
#mobile-panel-title {
  display: none;
  /*font-size: 1.125rem; /* text-lg */
  /*font-weight: 600; /* font-semibold */
  /*margin-bottom: 0.75rem; /* mb-3 */
  /*border-bottom: 1px solid #e5e7eb; /* border-b */
  /*padding-bottom: 0.5rem; /* pb-2 */
}
/* NEW: Mobile Panel Content - Table Column Look */
#mobile-panel-content {
  list-style: none;
  padding: 25px 10px 0px 40px;
  margin: 0;
  box-sizing: border-box;
  background-color: var(--naranja-principal);
}
#mobile-panel-content li {
  /* No specific li styling needed other than being a block by default */
  display: flex;
  flex-direction: column;
  list-style: none;
  width: 100%;
  margin: 0px 0px 0px 0px;
}
/* FIX: THIS RULE NOW APPLIES ONLY TO THE STANDARD MENU ITEMS (WITH AN ARROW) */
#mobile-panel-content .menu-toggle-mobile {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin: 0px;
  padding: 0.85rem .15rem 0.85rem 0.5rem;
  background-color: var(--naranja-principal);
  border: none;
  border-bottom: 1px solid #000000;
  border-radius: 0;
  font-family: 'Inter', sans-serif;
  font-weight: bolder;
  font-size: 1rem;
  color: #1f2937;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
}
/* Remove border from the last item in any list */
#mobile-panel-content li:last-child > .menu-toggle-mobile, #mobile-panel-content .sub-submenu-mobile li:last-child > a, /* FIX: CORRECTED THE SELECTOR TO PROPERLY TARGET THE LINK WITHIN THE LAST-CHILD LI */ #mobile-panel-content li:last-child > .submenu-toggle-sin-mobile > a {
  border-bottom: 1px solid black;
}
#mobile-panel-content .menu-toggle-sin-mobile > li {
  background-color: var(--naranja-principal);
}
.sub-submenu-mobile { /* This is the nested UL for sub-submenus */
  display: flex;
  flex-direction: column;
  margin: 0px 0px 5px 0px;
  padding-right: 0px; /*Indentation */
  padding-left: 0px;
  padding-top: 0px;
  padding-bottom: 0px;
  background-color: rgba(240, 240, 240, 1.00);
  border-radius: 0;
  width: 100%;
  list-style: none;
  transition: max-height 0.3s ease-out, opacity 0.3s ease-out, visibility 0.3s ease-out;
  max-height: auto;
  opacity: 1;
  overflow: hidden;
  visibility: visible;
  box-shadow: inset 1px 1px 2px 2px rgba(100, 100, 100, 0.2), inset -1px 1px 2px 2px rgba(100, 100, 100, 0.2), 0 10px 15px -3px rgba(0, 0, 0, 0.1), inset 0 4px 6px -2px rgba(0, 0, 0, 0.2); /* shadow-en los cuatro lados */
}
#mobile-panel-content .sub-submenu-mobile li:last-child > a {
  /*border-bottom: 5px solid rgba(0, 0, 0, 0.5);*/
  box-shadow: inset -3px 0px 2px 0px rgba(100, 100, 100, 0.2), inset 3px 0px 2px 0px rgba(100, 100, 100, 0.2), inset 0px -3px 2px 0px rgba(100, 100, 100, 0.2);
}
#mobile-panel-content .sub-submenu-mobile li:first-child > a {
  /*border-bottom: 5px solid rgba(0, 0, 0, 0.5);*/
  padding: 0.6rem 1rem 0.5rem 1rem;
}
.sub-submenu-mobile > li:nth-child(even) > a {
  background-color: rgba(230, 230, 230, 1.00) !important;
  padding: 0.6rem 1rem 0.5rem 1rem;
  box-shadow: inset 3px 0px 1px 0px rgba(100, 100, 100, 0.2), inset -3px 0px 1px 0px rgba(100, 100, 100, 0.2);
}
.sub-submenu-mobile a {
  display: block;
  padding: 0.5rem 1rem 0.5rem 1rem;
  font-size: 1rem;
  text-align: left;
  font-weight: bold;
  color: #374151;
  text-decoration: none;
  border-bottom: 1px solid black;
  border-radius: 0;
  transition: background-color 0.3s ease;
  /*border-left: 5px solid rgba(0, 0, 0, 0.3);
     border-right: 5px solid rgba(0, 0, 0, 0.3);*/
}
/*START Acá empieza los submenus sin flecha para celulares*/
/* FIX: THIS RULE RESETS THE CONTAINER OF THE LINK-ONLY ITEM SO IT DOESN'T INTERFERE WITH THE LINK'S STYLING. */
.submenu-toggle-sin-mobile {
  padding: 0px;
  margin: 0px;
  border-bottom: none;
  background-color: transparent;
}
/* FIX: THIS IS A NEW, DEDICATED RULE FOR THE LINK-ONLY ITEM. IT COPIES THE STYLES FROM .menu-toggle-mobile TO ENSURE THEY LOOK EXACTLY THE SAME. */
.submenu-toggle-sin-mobile a {
  /* FONT AND ALIGNMENT STYLES TO MATCH */
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  font-weight: bolder; /* FIX: ADDED FONT-WEIGHT TO MATCH THE BOLD FONT OF OTHER ITEMS. */
  color: #1f2937;
  text-align: left;
  /* FIX: REMOVED THE UNDERLINE. */
  text-decoration: none;
  /* LAYOUT, SIZING, AND BORDER STYLES TO MATCH */
  display: block;
  width: 100%;
  padding: 0.65rem 0rem 0.65rem 0.5rem; /* MATCHED PADDING FOR IDENTICAL HEIGHT. */
  box-sizing: border-box;
  background-color: var(--naranja-principal);
  ;
  /* FIX: ADDED THE MISSING BOTTOM BORDER TO SEPARATE IT FROM THE NEXT ITEM. */
  border-bottom: 0px solid #000000;
  border-top: 0px solid #000000;
  border-radius: 0;
  cursor: pointer;
  transition: background-color 0.3s ease;
}
.submenu-toggle-sin-mobile a:last-child {
  border-bottom: 1px solid black;
}
/*END Acá termina los submenus sin flecha para celulares*/
/* END NEW Mobile Panel Content */
/* Mobile Overlay */
#mobile-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.5); /* bg-black bg-opacity-50 */
  z-index: 55; /* Ensure it's above mobile-menu-bar but below panel */
  transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out; /* For fade effect */
  opacity: 1;
  visibility: visible;
}
#mobile-overlay.hidden { /* This is important for overlay fade */
  opacity: 0 !important;
  visibility: hidden !important;
}
/* Main Content Area */
.main-content {
  padding: 1.5rem; /* p-6 */
  min-height: calc(100vh - 150px); /* Approximate height of header and footer */
}
.main-content h2 {
  font-size: 1.875rem; /* text-3xl */
  font-weight: 600; /* font-semibold */
  margin-bottom: 1rem; /* mb-4 */
}
.main-content p {
  margin-bottom: 1rem; /* mb-4 */
}
.main-content .content-section {
  background-color: white;
  padding: 1.5rem; /* p-6 */
  border-radius: 0.5rem; /* rounded-lg */
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); /* shadow */
  margin-bottom: 1rem; /* space-y-4 */
}
.main-content .content-section + .content-section {
  margin-top: 1rem;
}
.main-content .content-section h3 {
  font-size: 1.25rem; /* text-xl */
  font-weight: 500; /* font-medium */
  margin-bottom: 0.5rem; /* mb-2 */
}
/* Footer Styling */
.site-footer {
  background-color: var(--blanco); /*#1f2937; /* gray-800 */
  color: var(--texto-black);
  font-size: 0.75rem;
  font-weight: bold;
  text-align: center;
  line-height: 0.75rem;
  padding: 1rem;
  margin-top: 0px; /* mt-8 */
  margin-bottom: 0px;
}
.links-footer-container {
  display: flex;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
  flex-direction: row;
  justify-content: space-around;
  margin-bottom: 20px;
}
.links-footer-container div {
  background-color: var(--blanco);
}
.links-footer-container a {
  font-size: 0.8rem;
  color: var(--texto-black);
  text-decoration: none;
  font-weight: bold;
}
/* Utility Classes */
.hidden {
  /* New .hidden for transitions */
  max-height: 0 !important;
  opacity: 0 !important;
  visibility: hidden !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  /* border-top-width: 0 !important;
            border-bottom-width: 0 !important; */ /* Careful with borders, might affect layout */
  overflow: hidden !important;
}
/* Responsive Design: Media Queries */
#desktop-menu {
  display: none; /* Hidden by default on small screens */
}
#mobile-menu-bar, #mobile-submenu-panel { /* #mobile-overlay handled by its own .hidden */
  display: flex; /* Or block/fixed as appropriate, visible on small screens */
}
/* #mobile-overlay.hidden is defined above for transition */
@media (min-width: 768px) { /* md breakpoint */
  #desktop-menu {
    display: block;
  }
  #mobile-menu-bar, #mobile-submenu-panel, #mobile-overlay {
    display: none !important; /* Force hide on desktop */
  }
  /* Reset panel state if window resized while open */
  #mobile-submenu-panel {
    transform: translateX(-100%);
  }
  body.mobile-menu-open { /* Re-enable scroll if resized from mobile to desktop */
    overflow: auto;
  }
}
@media (max-width: 768px) {
    body{
        background-color: var(--blanco);
        background-image: none;
    }
  /* >>>>>THIS IS THE CHANGE FOR STOP THE SVG COLOR CHANGE ON HOVER ON MOBILE>>>>>: */
  .menu-toggle:hover::after, .submenu-toggle:hover::after {
    /* THIS FILTER MAKES THE BLACK SVG APPEAR WHITE */
    filter: invert(0) brightness(0);
  }
  .menu-toggle.open {
    color: white;
  }
  .menu-toggle.open::after, .submenu-toggle.open::after {
    transform: rotate(90deg); /* Up arrow */
    filter: invert(0) brightness(0);
  }
  .menu-toggle:hover, .submenu-toggle:hover {
    color: black;
  }
  /* Header Styling */
  .site-header {
    background-color: var(--blanco);
    text-align: center;
      margin-bottom: 5px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); /* shadow-md */
  }
  .header-total {
      width: 100%;
    display: flex;
    flex-direction: row;
    margin: 0px;
  }
  .header-contenedor {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
  }
  .header-contenedor-top {
    display: flex;
    flex-direction: row;
    align-items: center;
  }
  .header-logo {
    width: 160px;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    margin-bottom: auto;
    margin-top: auto;
  }
  .header-logo img {
    margin: 5px 0px 0px 5px;
  }
  .header-titulo {
    flex-grow: 1;
      padding: 5px;
  }
  .header-titulo h1 {
    font-size: 1.8rem;
    line-height: 1.8rem;
  }
  .header-fecha {
    display: none;
  }
  .header-slogan {
    background-color: var(--blanco);
    text-align: center
  }
  .header-slogan h2 {
    font-size: 0.8rem;
    line-height: 0.8rem;
    font-weight: bold;
    padding: 0px 5px 5px 5px;
    margin: 5px;
  }
  .header-foto {
    display: none;
  }
  .site-footer {
    background-color: var(--blanco);
    color: var(--texto-black);
    text-align: center;
    padding: 1rem;
    padding-bottom: 100px;
    margin-top: 0px; /* mt-8 */
    margin-bottom: 0px;
  }
  .links-footer-container {}
}
/* Custom scrollbar for mobile panel */
#mobile-submenu-panel::-webkit-scrollbar {
  width: 8px;
}
#mobile-submenu-panel::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 10px;
}
#mobile-submenu-panel::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 10px;
}
#mobile-submenu-panel::-webkit-scrollbar-thumb:hover {
  background: #555;
}