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

@media (min-width: 768px) {
  /* #allergens_buttons column-count removed — HtAllergens handles layout */
  .ht-allergen-item { display: flex; flex-direction: column; align-items: center; cursor: pointer; transition: transform 0.2s ease }
  .ht-allergen-item__image-container {
    position: relative;
    display: flex; align-items: center; justify-content: center; width: 65px; height: 65px; padding: 3px;
    margin-bottom: 6px; overflow: hidden; background: var(--color-bg-card);
    border: 1px solid var(--color-bg-subtle);
    border-radius: var(--radius-md); box-shadow: var(--shadow-sm); transition: var(--transition-base)
  }
  .ht-allergen-item__image { width: 100%; height: 100%; object-fit: contain; opacity: 0.8 }
  .ht-allergen-item__label {
    font-size: 0.65rem; font-weight: var(--font-weight-bold); line-height: 1.1; color: var(--color-text-subtle); text-align: center;
    text-transform: uppercase; letter-spacing: 0.3px
  }
  .ht-allergen-item.active .ht-allergen-item__image-container { background: var(--color-danger-soft);
    border-color: var(--color-primary); box-shadow: var(--shadow-md); transform: scale(1.05)
  }
  .ht-allergen-item.active .ht-allergen-item__image { opacity: 1 }
  .ht-allergen-item.active .ht-allergen-item__label { color: var(--color-primary) }
}

/* --- DESKTOP (>=992px): two-column grid --- */
@media (min-width: 992px) {

  /* Ancho unico del calendario y del contenido, a proposito mas estrecho que el
     header (que llega a 1140px) para que la composicion quede contenida y no
     pegada a los bordes. Es el unico sitio donde cambiarlo: mueve las dos
     piezas a la vez y siguen alineadas entre si. */
  :root {
    --agenda-composition-w: 960px;
  }

  /* El calendario cuelga de la barra del header: solo tiene redondeadas las
     esquinas de abajo y su z-index (90) es inferior al del header (601), asi que
     la barra lo solapa y se leen como una sola pieza.
     En ancho NO copia al header, va mas estrecho (--agenda-composition-w) y
     alineado con el contenido de abajo. */
  div#agenda_strip_container {

    /* El borde inferior del header queda a ~71px (margin-top 10px + los 61px de
       line-height de .header .btn, en shared-desktop.css). Con top:48px el
       calendario se mete 23px por detras de la barra, suficiente para que sus
       esquinas superiores cuadradas no asomen por los lados, donde la barra
       curva su radio de pildora.
       El padding-top saca el contenido de la zona solapada. El suelo son ~20px:
       el contenido arranca en 48 + padding-top + los 6px de
       .ht-day-strip__header, y por debajo de 71px lo taparia la barra. */
    top: 48px;
    box-sizing: border-box;
    width: 100%;
    max-width: min(var(--agenda-composition-w), calc(100% - 40px));
    padding-top: 24px;
    padding-right: 20px;
    padding-left: 20px;
    margin-right: auto !important;
    margin-left: auto !important;
    overflow: auto;
    border: 1px solid var(--color-border);
    border-radius: 0 0 20px 20px !important;
  }

  #agenda-items-content {
    top: 74px;
  }

  #containerAgenda.container {
    max-width: 1200px;
  }

  /* Mismo ancho que el calendario, para que ambos queden alineados entre si y
     por dentro del header: 240 (filtros) + 40 (gap) + 640 (tarjetas) + 40 de
     padding = los 960px de --agenda-composition-w. */
  .ht-agenda-grid {
    box-sizing: border-box;
    display: grid !important;
    grid-template-columns: 240px 1fr;
    gap: 40px;
    align-items: start;
    width: 100%;
    max-width: min(var(--agenda-composition-w), calc(100% - 40px));
    padding: 0 20px;
    margin: 20px auto 0 auto;
  }

  /* Sidebar: sticky vertical list — JS sets --strip-bottom dynamically */
  .ht-agenda-sidebar {
    position: sticky;
    top: var(--agenda-sidebar-top, 160px);
    right: auto;
    bottom: auto;
    left: auto;
    z-index: 10;
    width: auto;
    max-height: calc(100vh - var(--agenda-sidebar-top, 160px) - 20px);
    padding: 0 16px 16px 0;
    overflow-y: auto;
    background: transparent;
    border-right: 1px solid var(--color-border);
  }

  /* Filters: vertical list on desktop */
  .ht-agenda-filter-wrapper {
    flex-direction: column;
    gap: 4px;
    padding: 0;
    overflow-x: visible;
  }

  /* Filter items — sidebar style (desktop) */
  .ht-agenda-filter-item {
    display: block;
    width: 100%;
    padding: 10px 16px;
    font-size: 0.85rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-subtle);
    text-align: left;
    text-transform: uppercase;
    letter-spacing: 1px;
    background: transparent;
    border: none;
    border-left: 2px solid transparent;
    border-radius: 0;
    transition: var(--transition-fast);
  }

  .ht-agenda-filter-item:hover {
    color: var(--color-text-heading);
    background: rgba(15, 23, 42, 0.03);
  }

  /* El marcado arrastra clases legacy junto a las BEM
     (class="agenda-groups ht-agenda-filter-item"). .agenda-groups impone
     display:inline-table, min-width:100px y text-align:center (agenda.css:1446)
     con la misma especificidad (0,1,0) que la regla de arriba, asi que quien
     ganaba dependia del orden de carga y el diseno de lista vertical no se
     llegaba a ver. Se neutraliza aqui, solo en escritorio: en movil las
     pildoras siguen intactas. */
  .ht-agenda-sidebar .agenda-groups,
  .ht-agenda-sidebar .agenda-filter-btn-all,
  .ht-agenda-sidebar .agenda-filter-favorites {
    display: block;
    min-width: 0;
    text-align: left;
  }

  /* Main column */
  .ht-agenda-main {
    /* Sin tope propio: la columna ya viene dimensionada a 640px por la caja de
       960px de la rejilla. El max-width:600px que habia aqui dejaba ~250px
       muertos a la derecha, porque la rejilla se calculaba sobre 1200px. */
    width: 100%;
    max-width: none;
    padding-bottom: 20px;
  }
  .content-title {
        font-size: 1rem !important;
    }

  /* La etiqueta de la hora actual va anclada a right:0 con las esquinas
     redondeadas solo por la izquierda, pensada para sangrar contra el borde.
     Al recortarse contra el limite del contenedor la hora salia truncada
     ("03:1"). Se mete dentro del flujo para que se lea completa. */
  .ht-agenda-time-marker__label {
    right: 8px;
    border-radius: 10px;
  }
}