/* ==========================================================================
   shared-desktop.css — Desktop overrides (min-width breakpoints)
   Extracted from shared.css for mobile-first organization.
   ========================================================================== */

/* --- Responsive: global class breakpoints -------------------------------- */
@media (min-width: 768px) {
  .main-page-content { min-height: 100% }
  .header-page-title {
    position: absolute; top: calc(15vh - 9vh); width: 100%;
    margin: auto; font-family: var(--font-family-body);
    font-size: 1rem !important; font-weight: 800 !important;
    color: var(--color-text-inverse) !important; text-align: center; letter-spacing: 1px; text-shadow: 0 2px 10px rgba(0,0,0,0.3)
  }
  .header + div { padding-top: 72px }
  .first-container-web.agenda { padding-top: 130px !important }
  .header-page {
    height: 110px !important
  }
  .header-page-image {
    height: 25vh !important; margin: 0; overflow: hidden
  }
  .header-page-image::after {
    background: linear-gradient(to bottom, transparent 10%, #000000d6 90%) !important
  }
  .header .btn { width: 100px; line-height: 61px }
  .fab-button.top-right, .fab-button-sm.top-right { top: 175px; right: 10px }
  .tab-content .tab-pane { height: 100% !important }
  .dialogbox .modal-dialog .modal-content { max-width: 500px !important }
  .header span, .header a { font-size: 1.5em; font-weight: 200; text-transform: uppercase }
  .modalbox .modal-dialog .modal-content .modal-body { min-height: auto }
}

@media screen and (min-width: 1280px) {
  body.menuactive { overflow: auto !important; -webkit-transform: none !important; -moz-transform: none !important; -ms-transform: none !important; transform: none !important }
  .sidebar { position: fixed !important;
    top: 0 !important; z-index: 0 !important;
    width: 290px !important; height: 100% !important;
    padding-top: env(safe-area-inset-top) !important; overflow-y: auto !important;
    -webkit-transition: all ease 0.5s !important; -moz-transition: all ease 0.5s !important;
    -ms-transition: all ease 0.5s !important; transition: all ease 0.5s !important
  }
  .list-group.main-menu { margin-right: 15px }
  #sidebar_icon_category { position: absolute; right: 10px }
  #accordion-menu { max-width: 590px; padding-top: 30px; padding-bottom: 30px; margin: auto; column-count: 1 }
  body.sidemenu-open .sidebar { left: 0 !important }
  body.sidemenu-open .wrapper { width: calc(100vw - 290px);
    margin-left: 290px !important; -webkit-transform: none !important;
    -moz-transform: none !important; -ms-transform: none !important;
    transform: none !important
  }
  body.sidemenu-open .header {
    position: fixed !important;
    top: 0 !important; right: 0 !important; left: 290px !important; z-index: 601 !important;
    width: auto !important; height: auto !important; padding: env(safe-area-inset-top) !important
  }
  body.menuactive .wrapper { overflow: scroll }
  .fab-button.bottom-center, .fab-button-sm.bottom-center { bottom: 35px }
  body.sidemenu-open .wrapper:after { content: none !important }
  body.sidemenu-open .fixed-footer { left: 290px !important; width: calc(100vw - 290px) !important }
  body.sidemenu-open .footer {
    top: 54px; left: 290px !important;
    width: calc(100vw - 290px) !important; height: 50px; box-shadow: 0 .125rem .25rem rgba(0,0,0,.075) !important
  }
  .fab-button.top-right, .fab-button-sm.top-right { top: 175px !important; right: 10px !important }
  body.sidemenu-open .header-page-image, body.sidemenu-open .header-page-image-lg { left: 290px }
  body.sidemenu-open .webapp-header__container {
    max-width: 1140px;
    margin: 0 auto;
  }
}

@media (min-width: 1200px) and (max-width: 1469px) {
  .container, .container-xl { max-width: 960px }
}
@media (min-width: 1470px) {
  .container, .container-xl { max-width: 1140px }
}

/* Escritorio / pantallas anchas */
@media (min-width: 768px) {
  .categories_grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* media query */

@media screen and (min-width:993px) {
  .sidebar {
    left: -290px;
    width: 280px;
  }
}

@media screen and (min-width:1180px) {
  .sidebar {
    left: -300px;
    width: 290px;
  }
}

@media (min-width: 768px) {
  .band {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)) !important;
  }
}

/* --------------------------------------------------------------------------
   Tablet y escritorio medio (768px – 1279px)
   Sidebar permanece off-canvas. El contenido tiene más espacio horizontal.
   -------------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1279px) {
  .main-page-content {
    padding: 16px 24px;
  }
}

/* --------------------------------------------------------------------------
   Desktop (≥ 1280px)
   Tipografía de cabecera, grid de categorías y padding de contenido.
   -------------------------------------------------------------------------- */
@media (min-width: 1280px) {
  /* Título de cabecera de página — más prominente en desktop */
  .header-page-title {
    top: calc(25vh - 10vh);
    font-size: 1.6rem !important;
  }

  /* Grid de categorías — 5 columnas en desktop */
  .categories_grid {
    grid-template-columns: repeat(5, 1fr);
  }

  /* Padding superior del contenido principal cuando el header es fijo */
  .main-page-content {
    padding-top: 80px;
  }
}

@media (min-width: 992px) {
    /* 1. EL GRID DE CATEGORÍAS (Igual de elegante que el Home) */
    .ht-category-grid-premium {
        display: grid !important;
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important; /* Un pelín más anchas aquí */
        gap: 24px !important;
        max-width: 1400px !important;
        padding: 40px !important;
        margin: 0 auto !important;
    }

    /* Altura consistente para las tarjetas en esta vista */
    .ht-category-grid-premium .ht-premium-card {
        width: 100% !important;
        height: 250px !important;
    }

    /* 1. EL TÍTULO DE SECCIÓN ("EL HOTEL") - Estilo Editorial */
    .content-section-header {
        display: block !important;
        margin: 32px 0 32px 0 !important; /* Mucho aire por arriba para separar secciones */
        text-align: center !important; /* Lo mantenemos centrado como en tu diseño */
        text-decoration: none !important;
    }

    .content-title {
        position: relative !important;
        display: inline-block !important;
        padding: 0 24px !important; /* Espacio para que las líneas no toquen el texto */
        margin: 0 !important;
        font-size: 1.95rem !important; /* Pequeño y elegante */
        font-weight: 800 !important;
        color: var(--color-text-body) !important; /* Gris pizarra */
        text-transform: uppercase !important;
        letter-spacing: 4px !important; /* Mucho espacio entre letras (Lujo) */
    }

    /* Las finas líneas laterales del título */
    .content-title::before,
    .content-title::after {
        position: absolute !important;
        top: 50% !important;
        width: 80px !important; /* Largo de la línea */
        height: 1px !important;
        content: "" !important;
        background-color: var(--color-border-strong) !important; /* Gris muy clarito */
    }
    .content-title::before { right: 100% !important; }
    .content-title::after { left: 100% !important; }
    div#apiauth_cunter {
  right: 30%;
}


/* 2. ETIQUETA DE CATEGORÍA (Ej: "Italiano") */
.ht-premium-card__badge {
    position: absolute !important;
    top: 16px !important;
    left: 16px !important; /* Lo ponemos a la IZQUIERDA para equilibrar con "Reservar" a la derecha */
    z-index: 4 !important;
    padding: 6px 12px !important;
    font-size: 0.7rem !important;
    font-weight: var(--font-weight-bold) !important;
    color: var(--color-text-inverse) !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    background: rgba(15, 23, 42, 0.85) !important; /* Dark slate sólido/elegante */
    border-radius: var(--radius-xs) !important; /* Menos curvo que un botón, más tipo "etiqueta" */
    backdrop-filter: blur(4px) !important;
}
.webapp-header.header.active {
    margin-top: 0px !important;
    color: white !important;
    border-radius: var(--radius-pill);
}
.webapp-header.header * {

    color: white !important;
}
}

/* --------------------------------------------------------------------------
   Desktop ancho (≥ 1470px)
   Pantallas grandes: más columnas y tipografía más generosa.
   -------------------------------------------------------------------------- */
@media (min-width: 1470px) {
  .header-page-title {
    font-size: 2rem !important;
  }

  .categories_grid {
    grid-template-columns: repeat(6, 1fr);
  }
}