@media (max-width: 760px) {
  #view-calendario {
    --calendar-mobile-flat-gap: 2px;
    --calendar-mobile-flat-radius: 10px;
    --calendar-mobile-flat-border: rgba(148, 163, 184, 0.28);
    --calendar-mobile-flat-surface: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 252, 0.98) 100%);
    --calendar-mobile-flat-hairline: rgba(148, 163, 184, 0.2);
    --calendar-mobile-flat-text: #0f172a;
    --calendar-mobile-flat-muted: #64748b;
    --calendar-mobile-card-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
  }

  #view-calendario .section-head {
    align-items: flex-start !important;
  }

  #view-calendario .calendar-toolbar {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
    align-items: stretch !important;
  }

  #view-calendario .calendar-toolbar-native,
  #view-calendario .calendar-segmented,
  #view-calendario .calendar-toolbar-select,
  #view-calendario .calendar-go-date,
  #view-calendario .calendar-nav-group {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 34px !important;
    box-sizing: border-box !important;
  }

  #view-calendario .calendar-toolbar-native,
  #view-calendario .calendar-segmented {
    grid-column: 1 / -1 !important;
  }

  #view-calendario .calendar-segmented,
  #view-calendario .calendar-nav-group,
  #view-calendario .calendar-go-date,
  #view-calendario .calendar-toolbar-select {
    border-radius: 10px !important;
    box-shadow: none !important;
  }

  #view-calendario .calendar-segment {
    min-width: 0 !important;
    padding: 6px 4px !important;
    border-radius: 8px !important;
    font-size: 10px !important;
    line-height: 1.1 !important;
  }

  #view-calendario .calendar-nav-group .btn,
  #view-calendario .calendar-go-date input,
  #view-calendario .calendar-toolbar-select {
    min-width: 0 !important;
    font-size: 10px !important;
  }

  #view-calendario #calendar-live-panel,
  #view-calendario .calendar-week-zero-banner,
  #view-calendario #calendar-summary {
    position: static !important;
    inset: auto !important;
    margin-inline: 0 !important;
    z-index: auto !important;
  }

  #view-calendario #calendar-live-panel {
    display: none !important;
  }

  #view-calendario .calendar-live-panel-copy,
  #view-calendario .calendar-live-panel-main {
    min-width: 0 !important;
    flex-wrap: wrap !important;
  }

  #view-calendario .calendar-live-panel-copy strong,
  #view-calendario .calendar-live-panel-copy span,
  #view-calendario #calendar-summary,
  #view-calendario .calendar-week-zero-text {
    line-height: 1.25 !important;
  }

  #view-calendario #calendar-week-grid.calendar-week-grid.is-calendar-mode-week {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    grid-auto-columns: minmax(0, 1fr) !important;
    gap: var(--calendar-mobile-flat-gap) !important;
    width: 100% !important;
    max-width: 100% !important;
    justify-content: stretch !important;
    align-items: start !important;
    overflow-x: hidden !important;
  }

  #view-calendario #calendar-week-grid.calendar-week-grid.is-calendar-mode-week > .calendar-day-card,
  #view-calendario #calendar-week-grid.calendar-week-grid.is-calendar-mode-week .calendar-class-list,
  #view-calendario #calendar-week-grid.calendar-week-grid.is-calendar-mode-week .calendar-day-timeline,
  #view-calendario #calendar-week-grid.calendar-week-grid.is-calendar-mode-week .calendar-class-item,
  #view-calendario #calendar-week-grid.calendar-week-grid.is-calendar-mode-week .calendar-class-main,
  #view-calendario #calendar-week-grid.calendar-week-grid.is-calendar-mode-week .calendar-class-line {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  #view-calendario #calendar-week-grid.calendar-week-grid.is-calendar-mode-week > .calendar-day-card {
    display: grid !important;
    grid-template-rows: min-content minmax(0, 1fr) !important;
    align-content: start !important;
    gap: 2px !important;
    padding: 4px 1px 5px !important;
    border: 1px solid var(--calendar-mobile-flat-border) !important;
    border-radius: var(--calendar-mobile-flat-radius) !important;
    background: var(--calendar-mobile-flat-surface) !important;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04) !important;
  }

  #view-calendario #calendar-week-grid.calendar-week-grid.is-calendar-mode-week > .calendar-day-card.is-past {
    opacity: 1 !important;
  }

  #view-calendario #calendar-week-grid.calendar-week-grid.is-calendar-mode-week .calendar-day-head {
    position: relative !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-content: start !important;
    gap: 1px !important;
    min-height: 24px !important;
    padding: 0 1px 2px !important;
    margin: 0 !important;
    border-bottom: 1px solid var(--calendar-mobile-flat-hairline) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  #view-calendario #calendar-week-grid.calendar-week-grid.is-calendar-mode-week .calendar-day-head > * {
    min-width: 0 !important;
  }

  #view-calendario #calendar-week-grid.calendar-week-grid.is-calendar-mode-week .calendar-day-head strong {
    font-size: 9px !important;
    line-height: 1.1 !important;
    letter-spacing: -0.02em !important;
    color: var(--calendar-mobile-flat-text) !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  #view-calendario #calendar-week-grid.calendar-week-grid.is-calendar-mode-week .calendar-day-head span {
    display: block !important;
    font-size: 7px !important;
    line-height: 1.05 !important;
    color: var(--calendar-mobile-flat-muted) !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  #view-calendario #calendar-week-grid.calendar-week-grid.is-calendar-mode-week .calendar-holiday-label {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    margin: 0 !important;
    padding: 1px 4px !important;
    border-radius: 999px !important;
    font-size: 6px !important;
    line-height: 1 !important;
  }

  #view-calendario #calendar-week-grid.calendar-week-grid.is-calendar-mode-week[data-shared-time-axis="true"] .calendar-band,
  #view-calendario #calendar-week-grid.calendar-week-grid.is-calendar-mode-week[data-shared-time-axis="true"] .calendar-band-head,
  #view-calendario #calendar-week-grid.calendar-week-grid.is-calendar-mode-week[data-shared-time-axis="true"] .calendar-quarter-grid,
  #view-calendario #calendar-week-grid.calendar-week-grid.is-calendar-mode-week[data-shared-time-axis="true"] .calendar-slot,
  #view-calendario #calendar-week-grid.calendar-week-grid.is-calendar-mode-week[data-shared-time-axis="true"] .calendar-slot-items,
  #view-calendario #calendar-week-grid.calendar-week-grid.is-calendar-mode-week[data-shared-time-axis="true"] .calendar-slot-label,
  #view-calendario #calendar-week-grid.calendar-week-grid.is-calendar-mode-week[data-shared-time-axis="true"] .calendar-slot-more {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    min-height: 0 !important;
    height: 0 !important;
  }

  #view-calendario #calendar-week-grid.calendar-week-grid.is-calendar-mode-week .calendar-class-list.is-mobile-shared-axis {
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  #view-calendario #calendar-week-grid.calendar-week-grid.is-calendar-mode-week .calendar-day-timeline {
    position: relative !important;
    height: var(--calendar-mobile-timeline-height) !important;
    min-height: var(--calendar-mobile-timeline-height) !important;
    margin: 0 !important;
    border: 0 !important;
    background:
      repeating-linear-gradient(
        to bottom,
        rgba(226, 232, 240, 0.9) 0,
        rgba(226, 232, 240, 0.9) 1px,
        transparent 1px,
        transparent 24px
      ) !important;
    overflow: hidden !important;
  }

  #view-calendario #calendar-week-grid.calendar-week-grid.is-calendar-mode-week .calendar-class-item.is-mobile-shared-axis-card {
    position: absolute !important;
    inset: unset !important;
    right: auto !important;
    bottom: auto !important;
    top: var(--calendar-card-top, 0px) !important;
    left: var(--calendar-card-left, 0%) !important;
    width: var(--calendar-card-width, 100%) !important;
    height: var(--calendar-card-height, 48px) !important;
    display: grid !important;
    grid-template-rows: min-content min-content !important;
    align-content: start !important;
    gap: 1px !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 2px 2px 3px !important;
    border: 1px solid color-mix(in srgb, var(--calendar-class-color, #dbeafe) 55%, #475569 45%) !important;
    border-radius: 4px !important;
    box-shadow: var(--calendar-mobile-card-shadow) !important;
    overflow: hidden !important;
    background: color-mix(in srgb, var(--calendar-class-color, #dbeafe) 82%, #ffffff 18%) !important;
    outline: none !important;
  }

  #view-calendario #calendar-week-grid.calendar-week-grid.is-calendar-mode-week .calendar-class-item.is-mobile-shared-axis-card::before,
  #view-calendario #calendar-week-grid.calendar-week-grid.is-calendar-mode-week .calendar-class-item.is-mobile-shared-axis-card::after {
    display: none !important;
  }

  #view-calendario #calendar-week-grid.calendar-week-grid.is-calendar-mode-week .calendar-class-item.is-mobile-shared-axis-card.is-available:not(.is-full):not(.is-past) {
    border-color: rgba(48, 128, 72, 0.82) !important;
  }

  #view-calendario #calendar-week-grid.calendar-week-grid.is-calendar-mode-week .calendar-class-item.is-mobile-shared-axis-card.is-full:not(.is-past) {
    border-color: rgba(177, 0, 0, 0.82) !important;
    border-left-width: 3px !important;
  }

  #view-calendario #calendar-week-grid.calendar-week-grid.is-calendar-mode-week .calendar-class-item.is-mobile-shared-axis-card.is-past {
    opacity: 1 !important;
    background: #e5e7eb !important;
    border-color: #94a3b8 !important;
    box-shadow: 0 1px 2px rgba(100, 116, 139, 0.14) !important;
    color: #334155 !important;
  }

  #view-calendario #calendar-week-grid.calendar-week-grid.is-calendar-mode-week .calendar-class-item.is-mobile-shared-axis-card.is-past .calendar-class-time,
  #view-calendario #calendar-week-grid.calendar-week-grid.is-calendar-mode-week .calendar-class-item.is-mobile-shared-axis-card.is-past .calendar-class-main strong,
  #view-calendario #calendar-week-grid.calendar-week-grid.is-calendar-mode-week .calendar-class-item.is-mobile-shared-axis-card.is-past .calendar-class-line.calendar-class-metrics,
  #view-calendario #calendar-week-grid.calendar-week-grid.is-calendar-mode-week .calendar-class-item.is-mobile-shared-axis-card.is-past .calendar-class-capacity,
  #view-calendario #calendar-week-grid.calendar-week-grid.is-calendar-mode-week .calendar-class-item.is-mobile-shared-axis-card.is-past .calendar-capacity-value,
  #view-calendario #calendar-week-grid.calendar-week-grid.is-calendar-mode-week .calendar-class-item.is-mobile-shared-axis-card.is-past .calendar-capacity-extra,
  #view-calendario #calendar-week-grid.calendar-week-grid.is-calendar-mode-week .calendar-class-item.is-mobile-shared-axis-card.is-past .calendar-capacity-reduced {
    color: #334155 !important;
  }

  #view-calendario #calendar-week-grid.calendar-week-grid.is-calendar-mode-week .calendar-class-main {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-auto-rows: min-content !important;
    gap: 1px !important;
    align-content: start !important;
  }

  #view-calendario #calendar-week-grid.calendar-week-grid.is-calendar-mode-week .calendar-class-item.is-mobile-week-dense:has(.calendar-trial-class-badge) .calendar-class-main {
    padding-right: 14px !important;
  }

  #view-calendario #calendar-week-grid.calendar-week-grid.is-calendar-mode-week .calendar-class-time {
    display: block !important;
    font-size: 6px !important;
    line-height: 1 !important;
    font-weight: 800 !important;
    letter-spacing: 0.01em !important;
    color: #334155 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  #view-calendario #calendar-week-grid.calendar-week-grid.is-calendar-mode-week .calendar-class-main > span:last-child,
  #view-calendario #calendar-week-grid.calendar-week-grid.is-calendar-mode-week .calendar-class-state-badge,
  #view-calendario #calendar-week-grid.calendar-week-grid.is-calendar-mode-week .calendar-class-monitor,
  #view-calendario #calendar-week-grid.calendar-week-grid.is-calendar-mode-week .calendar-class-client {
    display: none !important;
  }

  #view-calendario #calendar-week-grid.calendar-week-grid.is-calendar-mode-week .calendar-class-main strong {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-size: 7px !important;
    line-height: 1.05 !important;
    font-weight: 700 !important;
    color: #102033 !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    white-space: normal !important;
    hyphens: none !important;
  }

  #view-calendario #calendar-week-grid.calendar-week-grid.is-calendar-mode-week .calendar-class-line.calendar-class-metrics {
    display: block !important;
    min-width: 0 !important;
    margin: 0 !important;
    color: #334155 !important;
  }

  #view-calendario #calendar-week-grid.calendar-week-grid.is-calendar-mode-week .calendar-class-capacity,
  #view-calendario #calendar-week-grid.calendar-week-grid.is-calendar-mode-week .calendar-capacity-value,
  #view-calendario #calendar-week-grid.calendar-week-grid.is-calendar-mode-week .calendar-capacity-extra,
  #view-calendario #calendar-week-grid.calendar-week-grid.is-calendar-mode-week .calendar-capacity-reduced {
    display: block !important;
    min-width: 0 !important;
    font-size: 6px !important;
    line-height: 1 !important;
    font-weight: 700 !important;
    color: #334155 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  #view-calendario #calendar-week-grid.calendar-week-grid.is-calendar-mode-week .calendar-capacity-extra em,
  #view-calendario #calendar-week-grid.calendar-week-grid.is-calendar-mode-week .calendar-capacity-reduced em {
    font-style: normal !important;
    font-size: 3.5px !important;
    line-height: inherit !important;
  }

  #view-calendario #calendar-week-grid.calendar-week-grid.is-calendar-mode-week .calendar-class-item.is-mobile-week-dense .calendar-capacity-extra,
  #view-calendario #calendar-week-grid.calendar-week-grid.is-calendar-mode-week .calendar-class-item.is-mobile-week-dense .calendar-capacity-reduced {
    display: inline-grid !important;
    grid-template-columns: minmax(0, max-content) !important;
    gap: 0 !important;
    width: max-content !important;
    height: 9px !important;
    max-width: 100% !important;
    font-size: 3.5px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }

  #view-calendario #calendar-week-grid.calendar-week-grid.is-calendar-mode-week .calendar-class-item.is-mobile-week-dense .calendar-capacity-extra .calendar-capacity-nums-chip,
  #view-calendario #calendar-week-grid.calendar-week-grid.is-calendar-mode-week .calendar-class-item.is-mobile-week-dense .calendar-capacity-reduced .calendar-capacity-nums-chip {
    padding: 0 1px !important;
    border-radius: 5px !important;
    font-size: 3.5px !important;
    line-height: 1 !important;
  }

  #view-calendario #calendar-week-grid.calendar-week-grid.is-calendar-mode-week .calendar-class-item.is-mobile-week-dense .calendar-capacity-extra .calendar-capacity-nums-chip strong,
  #view-calendario #calendar-week-grid.calendar-week-grid.is-calendar-mode-week .calendar-class-item.is-mobile-week-dense .calendar-capacity-reduced .calendar-capacity-nums-chip strong {
    font-size: 6px !important;
    line-height: 6px !important;
    font-weight: 850 !important;
    letter-spacing: 0 !important;
  }

  #view-calendario #calendar-week-grid.calendar-week-grid.is-calendar-mode-week .calendar-class-item.is-mobile-week-dense .calendar-trial-class-badge {
    position: absolute !important;
    top: 2px !important;
    right: 2px !important;
    z-index: 2 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 10px !important;
    height: 9px !important;
    padding: 0 3px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(11, 126, 160, 0.32) !important;
    background: rgba(255, 255, 255, 0.9) !important;
    color: #0b7ea0 !important;
    font-size: 6px !important;
    line-height: 1 !important;
    font-weight: 900 !important;
    letter-spacing: 0 !important;
    box-shadow: none !important;
    pointer-events: none !important;
    overflow: hidden !important;
  }

  #view-calendario #calendar-week-grid.calendar-week-grid.is-calendar-mode-week .calendar-class-item.is-mobile-week-dense .calendar-trial-class-badge::before,
  #view-calendario #calendar-week-grid.calendar-week-grid.is-calendar-mode-week .calendar-class-item.is-mobile-week-dense .calendar-trial-class-badge::after {
    content: none !important;
    display: none !important;
  }

  #view-calendario #calendar-week-grid.calendar-week-grid.is-calendar-mode-week .calendar-class-item.is-mobile-week-dense .calendar-trial-class-badge-label {
    display: none !important;
  }
}


/* CALENDAR_CANONICAL_AVAILABLE_HOLIDAY_V2
 * Canonical version of the previously approved available-class/holiday visuals.
 * This must live in a CSS file that index.html always loads so releases cannot lose it.
 */
#view-calendario #calendar-week-grid.calendar-week-grid
  .calendar-class-item.is-available:not(.is-full):not(.is-past) {
  border-width: 1px !important;
  border-color: rgba(48, 128, 72, 0.78) !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08) !important;
}

@media (max-width: 760px) {
  #view-calendario #calendar-week-grid.calendar-week-grid.is-calendar-mode-week
    .calendar-class-item.is-mobile-shared-axis-card.is-available:not(.is-full):not(.is-past) {
    border-width: 1px !important;
    border-color: rgba(48, 128, 72, 0.82) !important;
    box-shadow: var(--calendar-mobile-card-shadow, 0 1px 3px rgba(15, 23, 42, 0.08)) !important;
  }

  #view-calendario #calendar-week-grid.calendar-week-grid.is-calendar-mode-week
    > .calendar-day-card.is-holiday {
    background: #e5e7eb !important;
    border-color: #94a3b8 !important;
    color: #475569 !important;
    box-shadow: none !important;
  }

  #view-calendario #calendar-week-grid.calendar-week-grid.is-calendar-mode-week
    > .calendar-day-card.is-holiday .calendar-day-head {
    border-bottom-color: rgba(100, 116, 139, 0.38) !important;
    background: transparent !important;
  }

  #view-calendario #calendar-week-grid.calendar-week-grid.is-calendar-mode-week
    > .calendar-day-card.is-holiday .calendar-day-head strong,
  #view-calendario #calendar-week-grid.calendar-week-grid.is-calendar-mode-week
    > .calendar-day-card.is-holiday .calendar-day-head span {
    color: #64748b !important;
  }

  #view-calendario #calendar-week-grid.calendar-week-grid.is-calendar-mode-week
    > .calendar-day-card.is-holiday .calendar-day-timeline {
    background:
      repeating-linear-gradient(
        to bottom,
        rgba(148, 163, 184, 0.42) 0,
        rgba(148, 163, 184, 0.42) 1px,
        transparent 1px,
        transparent 24px
      ),
      #e5e7eb !important;
  }
}

/* CALENDAR_PR77_VISUAL_LOCK_REAPPLIED_V1
 * Recupera exclusivamente:
 * 1) tarjetas planas sin ondas;
 * 2) clases completas apagadas: 26% color ERP + 74% gris, marco rojo 2px.
 */

/* Sin ondas */
#view-calendario .calendar-class-item:not(.is-past),
#view-monitor-today .monitor-calendar-class:not(.is-virtual) {
  background-color: var(--calendar-class-color, #cfe8a9) !important;
  background-image: none !important;
  background-size: auto !important;
  background-position: 0 0 !important;
  background-repeat: no-repeat !important;
  filter: none !important;
  mix-blend-mode: normal !important;
}

#view-calendario .calendar-class-item:not(.is-past)::before,
#view-calendario .calendar-class-item:not(.is-past)::after,
#view-monitor-today .monitor-calendar-class:not(.is-virtual)::before,
#view-monitor-today .monitor-calendar-class:not(.is-virtual)::after {
  content: none !important;
  display: none !important;
  background: none !important;
  background-image: none !important;
  opacity: 0 !important;
  filter: none !important;
  mix-blend-mode: normal !important;
}

/* Completas apagadas — estado certificado PR #77 */
#view-calendario #calendar-week-grid.calendar-week-grid
.calendar-class-item.is-full:not(.is-past) {
  border-color: rgba(177, 0, 0, 0.88) !important;
  border-width: 2px !important;
  background: color-mix(
    in srgb,
    var(--calendar-class-color, #dbeafe) 26%,
    #e5e7eb 74%
  ) !important;
  background-image: none !important;
  color: #334155 !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.10) !important;
}

#view-calendario #calendar-week-grid.calendar-week-grid
.calendar-class-item.is-full:not(.is-past) .calendar-class-time,
#view-calendario #calendar-week-grid.calendar-week-grid
.calendar-class-item.is-full:not(.is-past) .calendar-class-main strong,
#view-calendario #calendar-week-grid.calendar-week-grid
.calendar-class-item.is-full:not(.is-past) .calendar-class-line.calendar-class-metrics,
#view-calendario #calendar-week-grid.calendar-week-grid
.calendar-class-item.is-full:not(.is-past) .calendar-class-capacity,
#view-calendario #calendar-week-grid.calendar-week-grid
.calendar-class-item.is-full:not(.is-past) .calendar-capacity-value,
#view-calendario #calendar-week-grid.calendar-week-grid
.calendar-class-item.is-full:not(.is-past) .calendar-capacity-extra,
#view-calendario #calendar-week-grid.calendar-week-grid
.calendar-class-item.is-full:not(.is-past) .calendar-capacity-reduced {
  color: #334155 !important;
}

@media (max-width: 760px) {
  #view-calendario #calendar-week-grid.calendar-week-grid.is-calendar-mode-week
  .calendar-class-item.is-mobile-shared-axis-card.is-full:not(.is-past) {
    border-color: rgba(177, 0, 0, 0.88) !important;
    border-width: 2px !important;
    background: color-mix(
      in srgb,
      var(--calendar-class-color, #dbeafe) 26%,
      #e5e7eb 74%
    ) !important;
    color: #334155 !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.10) !important;
  }
}