body{
 margin: 0;
}
/* ==== TIPOGRAFÍA ================================================= */
.font-body {font-family:'Roboto',sans-serif;}

/* ==== COLORES ==================================================== */
.bg-page   {background:#F9FAFB;}                /* antes: bg-gray-50   */
.bg-white  {background:#ffffff;}
.bg-green  {background:#01793C;}               /* barra superior     */
.text-white{color:#ffffff;}
.text-green{color:#297F40;}
.text-gray-200{color:#e5e7eb;}
.text-gray-300{color:#d1d5db;}
.text-gray-400{color:#9ca3af;}

/* ==== DIMENSIONES Y FLEX GRID ==================================== */
.d-flex       {display:flex;}
.flex-column  {flex-direction:column;}
.align-center {align-items:center;}
.justify-between{justify-content:space-between;}
.gap-x-4 > *  {margin-right:1rem;}
.gap-x-4 > *:last-child{margin-right:0;}

.w-full   {width:100%;}
.maxw-1200{max-width:1200px;}
.h-full   {height:100%;}
.height-60{height:60px;}
.width-96 {width:384px;}
.icon-20  {height:20px;width:20px;}
.icon-24  {height:24px;width:24px;}
.logo-24  {height:24px;}
.logo-32  {height:32px;}

@media(min-width:1024px){ .lg-only{display:inline-block;} .lg-flex{display:flex;} }
@media(max-width:1023px){ .lg-only{display:none !important;} }

/* ==== BOTONES ==================================================== */
.btn            {font-weight:600;padding:4px 12px;border-radius:4px;font-size:12px;transition:background-color .2s;}
.btn-hamburger  {padding:8px;color:#ffffff;background:transparent;border:0;cursor:pointer;}
.btn-hamburger:hover{color:#d1d5db;}
.btn-login      {background:#ffffff;color:#297F40;}
.btn-login:hover{background:#53FC31;color:#000;}
.btn-signup     {background:#000000;color:#ffffff;}
.btn-signup:hover{background:#53FC31;color:#000;}

/* ==== HEADER ===================================================== */
.hdr-fixed {position:fixed;top:0;left:0;width:100%;z-index:40;background:#ffffff;box-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);}
.top-bar   {height:60px;background:#01793C;}
.inner     {max-width:1200px;height:100%;margin:0 auto;display:flex;align-items:center;justify-content:space-between;}
.left-block{display:flex;align-items:center;gap:1rem; padding-left:0rem;}
.auth-block{display:flex;align-items:center;gap:.5rem; padding-right:1.0rem;}
.nav-scroll{height:60px;background:#1B1C1D;color:#FFF4F1;overflow:hidden;}

/* ==== NAVEGACIÓN DESLIZABLE ====================================== */
.swipe-container{display:flex;align-items:center;height:100%;overflow-x:auto;white-space:nowrap;scrollbar-width:none;-ms-overflow-style:none;}
.swipe-container::-webkit-scrollbar{display:none;}
.nav-link{display:flex;align-items:center;gap:.25rem;padding:0 .75rem;text-transform:uppercase;color:inherit;text-decoration:none;transition:background-color .2s;}
.nav-link:hover{background:rgba(255,255,255,.1);}
.txt-xs{font-size:.75rem;line-height:1rem;}

/* ==== FIXED SIDEBAR FUNCTIONAL VERSION ========================================== */
.overlay{position:fixed!important;inset:0;background:rgba(0,0,0,.5)!important;z-index:9998!important;opacity:0;pointer-events:none;transition:opacity .3s;}
.overlay.show{opacity:1;pointer-events:auto;}
#sidebar{position:fixed!important;top:0;left:0;width:320px;max-width:85vw;height:100vh;background-color:#1B1C1D!important;z-index:9999!important;transform:translateX(-100%)!important;transition:transform .3s ease-in-out;-ms-overflow-style:none;scrollbar-width:none;overflow-y:auto;}
#sidebar.open{transform:translateX(0)!important;}
#sidebar::-webkit-scrollbar{display:none;}
.sidebar-header-bar{display:flex;justify-content:space-between;align-items:center;padding:.75rem 1rem;background-color:#111213;color:#FFF4F1;border-bottom:1px solid rgba(255,255,255,0.1);font-family:'Roboto',sans-serif;font-weight:600;}
.sidebar-title{display:flex;align-items:center;gap:.5rem;font-size:1.125rem;font-weight:600;}
.btn-close{font-size:1.75rem;line-height:1;color:#FFF4F1;background:transparent;border:0;cursor:pointer;}
#sidebar-content-container{height:calc(100% - 60px);overflow-y:auto;position:relative;width:100%;}
.sidebar-panel{position:absolute;top:0;left:0;width:100%;height:100%;background-color:#1B1C1D;color:#FFF4F1;display:flex;flex-direction:column;transform:translateX(100%);transition:transform .3s ease-in-out;z-index:1;}
.sidebar-panel.active{transform:translateX(0);z-index:2;}
.sidebar-panel.sliding-out{transform:translateX(-100%);}
.sidebar-menu{overflow-y:auto;flex-grow:1;}
.sidebar-menu a,.sidebar-menu .submenu-trigger{display:flex;justify-content:space-between;align-items:center;padding:1rem;border-bottom:1px solid rgba(255,255,255,0.1);font-family:'Roboto',sans-serif;font-weight:400;color:#FFF4F1;cursor:pointer;text-decoration:none;text-transform:none;gap:.5rem;}
.sidebar-menu a:hover,.sidebar-menu .submenu-trigger:hover{background-color:#2A2B2D;}
.sidebar-back-button{display:flex;align-items:center;padding:1rem;border-bottom:1px solid rgba(255,255,255,0.1);color:#FFF4F1;font-family:'Roboto',sans-serif;font-weight:500;cursor:pointer;}
.sidebar-back-button:hover{background-color:#2A2B2D;}
.sidebar-menu svg{width:18px;height:18px;flex-shrink:0;color:#9CA3AF;}
.sidebar-back-button {font-size: 0.95rem;padding: 0.75rem 1rem;gap: 0.5rem;display: flex;align-items: center;}
.sidebar-back-button svg {width: 16px;height: 16px;color: #9CA3AF;flex-shrink: 0;}
.icon-20 {width: 80px;height: 60px;object-fit: contain;filter: brightness(1.1) contrast(1.1);vertical-align: middle;}
.sidebar-title img {display: inline-block;margin-top: -1px;}

/* ==== MAIN ======================================================= */
.main-padding {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  padding-top: 100px;
}
img, video {
    max-width: 100%;
    height: auto;
}

audio, canvas, embed, iframe, img, object, svg, video {
    display: block;
    vertical-align: middle;
}
/* ==== SOMBRA / GENERAL ========================================== */ 
.shadow-lg{box-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);}