* {
      box-sizing: border-box;
      margin: 0;
      padding: 0
    }

    :root {
      --bg: #121110;
      --bg2: #191713;
      --sf: #1B1916;
      --sf2: #232019;
      --ln: rgba(242, 237, 227, .1);
      --ln2: rgba(242, 237, 227, .22);
      --tx: #F2EDE3;
      --mu: #A59D90;
      --fa: #6E675C;
      --ink: #17130C;
      --teal: #3BD6C3;
      --map-bg: #14120E;
      --grid: rgba(240, 235, 225, .035);
      --thu: #F5C24B;
      --sh: 0 20px 50px rgba(0, 0, 0, .5);
      --lab: rgba(242, 237, 227, .62);
      --lab2: rgba(242, 237, 227, .45)
    }

    [data-theme=light] {
      --bg: #F1ECE0;
      --bg2: #F7F2E7;
      --sf: #FBF8F1;
      --sf2: #EFE9DA;
      --ln: rgba(30, 26, 18, .13);
      --ln2: rgba(30, 26, 18, .26);
      --tx: #1E1B15;
      --mu: #6A6256;
      --fa: #9A9184;
      --ink: #FBF8F1;
      --teal: #0B9E8F;
      --map-bg: #EDE6D3;
      --grid: rgba(60, 50, 30, .06);
      --thu: #F2B92E;
      --sh: 0 20px 50px rgba(70, 58, 30, .22)
    }

    html {
      scroll-behavior: smooth
    }

    body {
      font-family: 'Instrument Sans', system-ui, sans-serif;
      background: var(--bg);
      color: var(--tx);
      -webkit-font-smoothing: antialiased;
      background-image: radial-gradient(var(--grid) 1px, transparent 1px);
      background-size: 26px 26px
    }

    button {
      font: inherit;
      color: inherit;
      background: none;
      border: 0;
      cursor: pointer
    }

    input,
    select {
      font: inherit;
      color: inherit
    }

    :focus-visible {
      outline: 2px solid var(--teal);
      outline-offset: 2px
    }

    .wrap {
      max-width: 1460px;
      margin: 0 auto;
      padding: 0 clamp(14px, 3vw, 34px)
    }

    .tb {
      position: sticky;
      top: 0;
      z-index: 50;
      border-bottom: 1px solid var(--ln);
      background: color-mix(in srgb, var(--bg) 80%, transparent);
      backdrop-filter: blur(12px)
    }

    .tb .in {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 56px
    }

    .brand {
      display: flex;
      align-items: center;
      gap: 10px;
      text-decoration: none;
      color: var(--tx);
      font-family: 'Space Grotesk';
      font-weight: 700
    }

    .brand-logo {
      width: 34px;
      height: 34px;
      object-fit: contain;
      border-radius: 6px;
      display: block
    }

    .brand em {
      font-style: normal;
      color: var(--teal)
    }

    .brand .sub {
      font-family: 'Instrument Sans';
      font-weight: 500;
      font-size: 12.5px;
      color: var(--mu);
      border-left: 1px solid var(--ln2);
      padding-left: 9px
    }

    .acts {
      display: flex;
      gap: 8px;
      align-items: center
    }

    .chipdate {
      font-size: 12px;
      font-weight: 600;
      color: var(--mu);
      border: 1px solid var(--ln);
      border-radius: 99px;
      padding: 6px 11px
    }

    .ib {
      width: 34px;
      height: 34px;
      display: grid;
      place-items: center;
      border: 1px solid var(--ln);
      border-radius: 10px;
      background: var(--sf);
      font-size: 14px
    }

    .ib:hover {
      background: var(--sf2)
    }

    .ib:disabled {
      opacity: .35;
      cursor: default
    }

    .hero {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      gap: 26px;
      flex-wrap: wrap;
      padding: 32px 0 22px
    }

    .eyebrow {
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .15em;
      color: var(--mu)
    }

    h1 {
      font-family: 'Space Grotesk';
      font-weight: 700;
      font-size: clamp(28px, 4.2vw, 48px);
      letter-spacing: -.025em;
      line-height: 1.05;
      margin: 10px 0 0;
      max-width: 680px
    }

    h1 em {
      font-style: normal;
      background: color-mix(in srgb, var(--thu) 30%, transparent);
      border-radius: 5px;
      padding: 0 .12em
    }

    .hsub {
      margin-top: 10px;
      color: var(--mu);
      font-size: 15px;
      line-height: 1.6;
      max-width: 580px
    }

    .dz {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: 12px
    }

    .days {
      position: relative;
      display: inline-flex;
      background: var(--sf);
      border: 1px solid var(--ln);
      border-radius: 14px;
      padding: 4px
    }

    .days .thumb {
      position: absolute;
      top: 4px;
      bottom: 4px;
      left: 4px;
      width: calc((100% - 8px)/3);
      background: var(--thu);
      border-radius: 10px;
      transform: translateX(calc(var(--i, 0)*100%));
      transition: transform .35s cubic-bezier(.5, .1, .2, 1.2)
    }

    .days button {
      position: relative;
      z-index: 1;
      display: flex;
      align-items: baseline;
      gap: 7px;
      padding: 8px 18px;
      border-radius: 10px;
      color: var(--mu)
    }

    .days small {
      font-size: 10.5px;
      font-weight: 700;
      letter-spacing: .1em
    }

    .days b {
      font-family: 'Space Grotesk';
      font-size: 18px
    }

    .days button[aria-selected=true] {
      color: var(--ink)
    }

    .sum {
      display: flex;
      align-items: baseline;
      gap: 10px
    }

    .sum b {
      font-family: 'Space Grotesk';
      font-size: 38px;
      line-height: 1
    }

    .sum span {
      display: flex;
      flex-direction: column;
      font-size: 12.5px;
      color: var(--mu)
    }

    .sum span i {
      font-style: normal
    }

    .ws {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 400px;
      gap: 16px;
      align-items: start
    }

    .mp {
      border: 1px solid var(--ln);
      border-radius: 18px;
      overflow: hidden;
      background: var(--sf)
    }

    .mh {
      padding: 11px 16px;
      border-bottom: 1px solid var(--ln);
      display: flex;
      flex-direction: column;
      gap: 8px
    }

    .mht {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap
    }

    .mht-actions {
      display: flex;
      align-items: center;
      gap: 12px;
      flex-wrap: wrap
    }

    .zone-chk-toggle {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      cursor: pointer;
      user-select: none;
      padding: 3px 9px 3px 6px;
      border-radius: 7px;
      border: 1px solid var(--ln2);
      background: var(--sf2);
      transition: all .2s cubic-bezier(.2, 0, 0, 1)
    }

    .zone-chk-toggle:hover {
      border-color: var(--teal);
      background: color-mix(in srgb, var(--sf2) 85%, var(--teal))
    }

    .zone-chk-toggle input {
      position: absolute;
      opacity: 0;
      width: 0;
      height: 0;
      pointer-events: none
    }

    .zct-box {
      width: 15px;
      height: 15px;
      border-radius: 4px;
      border: 1.5px solid var(--mu);
      background: var(--bg);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      transition: all .2s cubic-bezier(.2, 0, 0, 1);
      color: var(--ink)
    }

    .zct-box svg {
      width: 9.5px;
      height: 9.5px;
      opacity: 0;
      transform: scale(0.4);
      transition: all .18s cubic-bezier(.2, 0, 0, 1)
    }

    .zone-chk-toggle input:checked+.zct-box {
      background: var(--teal);
      border-color: var(--teal)
    }

    .zone-chk-toggle input:checked+.zct-box svg {
      opacity: 1;
      transform: scale(1)
    }

    .zone-chk-toggle input:focus-visible~.zct-box {
      outline: 2px solid var(--teal);
      outline-offset: 2px
    }

    .zct-text {
      font-family: 'Space Grotesk', system-ui, sans-serif;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .08em;
      color: var(--tx);
      transition: color .2s
    }

    .zone-chk-toggle input:checked~.zct-text {
      color: var(--teal)
    }

    /* Schedule Button in Header */
    .btn-schedule {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 3px 10px 3px 8px;
      border-radius: 7px;
      border: 1px solid var(--ln2);
      background: var(--sf2);
      color: var(--tx);
      font-family: 'Space Grotesk', system-ui, sans-serif;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .08em;
      cursor: pointer;
      user-select: none;
      transition: all .2s cubic-bezier(.2, 0, 0, 1);
    }

    .btn-schedule svg {
      color: var(--teal);
      flex-shrink: 0;
      transition: transform .2s ease;
    }

    .btn-schedule:hover {
      border-color: var(--teal);
      background: color-mix(in srgb, var(--sf2) 85%, var(--teal));
      color: var(--teal);
      transform: translateY(-1px);
      box-shadow: 0 4px 12px color-mix(in srgb, var(--teal) 20%, transparent);
    }

    .btn-schedule:hover svg {
      transform: scale(1.15) rotate(-6deg);
    }

    .bsch-pill {
      font-size: 9.5px;
      font-weight: 700;
      padding: 1px 6px;
      border-radius: 99px;
      background: color-mix(in srgb, var(--teal) 18%, transparent);
      color: var(--teal);
      border: 1px solid color-mix(in srgb, var(--teal) 30%, transparent);
    }

    /* Zone tooltips / tags SVG */
    .zone-tag {
      cursor: pointer;
      outline: none
    }

    .zone-tag .zt-shd {
      fill: rgba(0, 0, 0, .45)
    }

    [data-theme=light] .zone-tag .zt-shd {
      fill: rgba(60, 50, 30, .22)
    }

    .zone-tag .zt-enter {
      animation: ztEnter .3s cubic-bezier(.34, 1.56, .64, 1) backwards;
      transform-origin: 0 0
    }

    @keyframes ztEnter {
      from {
        opacity: 0;
        transform: scale(.5) translateY(12px)
      }
      to {
        opacity: 1;
        transform: scale(1) translateY(0)
      }
    }

    .zone-tag .zt-bubble-bg {
      fill: var(--sf);
      stroke: var(--teal);
      stroke-width: 1.4;
      filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .45));
      transition: fill .2s, stroke .2s, filter .2s
    }

    [data-theme=light] .zone-tag .zt-bubble-bg {
      fill: #FFFFFF;
      stroke: var(--teal);
      filter: drop-shadow(0 3px 8px rgba(60, 50, 30, .22))
    }

    .zone-tag .zt-text {
      font-family: 'Space Grotesk', system-ui, sans-serif;
      font-size: 10.5px;
      font-weight: 700;
      fill: var(--tx);
      letter-spacing: .05em;
      text-anchor: middle;
      dominant-baseline: central;
      pointer-events: none
    }

    .zone-tag.hot .zt-bubble-bg {
      fill: var(--teal);
      stroke: #FFFFFF;
      filter: drop-shadow(0 6px 14px rgba(59, 214, 195, .45))
    }

    .zone-tag.hot .zt-text {
      fill: var(--ink)
    }

    .mht b {
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .13em;
      color: var(--mu)
    }

    .mht .hint {
      font-size: 11.5px;
      color: var(--fa)
    }

    .mh-sub {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 12px;
      flex-wrap: wrap
    }

    .lgd {
      display: flex;
      gap: 14px;
      flex-wrap: wrap;
      align-items: center
    }

    .lgd span {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 12px;
      color: var(--mu)
    }

    .lgd-note {
      font-size: 11.5px;
      color: var(--fa);
      font-weight: 500;
      display: inline-flex;
      align-items: center;
      gap: 6px
    }

    .lgd-pin-icon {
      width: 12px;
      height: 15px;
      flex-shrink: 0;
      display: inline-block
    }

    .lgd i {
      width: 8px;
      height: 8px;
      border-radius: 50%
    }

    .vp {
      position: relative;
      height: clamp(450px, 64vh, 660px);
      overflow: hidden;
      cursor: grab;
      touch-action: none;
      user-select: none;
      background: var(--map-bg);
      background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
      background-size: 44px 44px
    }

    .vp.drag {
      cursor: grabbing
    }

    .vp svg {
      width: 100%;
      height: 100%
    }

    .vp text {
      font-family: 'Space Grotesk', sans-serif
    }

    .boot {
      position: absolute;
      inset: 0;
      display: grid;
      place-items: center;
      color: var(--mu);
      font-size: 14px;
      z-index: 5
    }

    .merr {
      position: absolute;
      left: 12px;
      right: 12px;
      top: 12px;
      z-index: 60;
      background: #5b1d1d;
      color: #ffd9d9;
      border: 1px solid #a33;
      border-radius: 10px;
      padding: 10px 12px;
      font: 12.5px/1.5 ui-monospace, monospace
    }

    .mk-lab {
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 1.8px;
      fill: var(--lab);
      paint-order: stroke;
      stroke: var(--map-bg);
      stroke-width: 3px;
      text-anchor: middle
    }

    .mk-lab.sm {
      font-size: 8.8px;
      letter-spacing: 1.3px;
      fill: var(--lab2)
    }

    .mk-lab.hl {
      font-size: 10.5px;
      font-weight: 800;
      letter-spacing: 2px;
      fill: var(--tx)
    }

    .wanim {
      transition: transform .5s cubic-bezier(.22, .8, .3, 1)
    }

    .rt-glow {
      fill: none;
      stroke-width: 10px;
      stroke-linecap: round;
      stroke-linejoin: round;
      opacity: .28;
      transition: opacity .3s ease;
      cursor: pointer;
    }

    .rt {
      fill: none;
      stroke-width: 4.5px;
      stroke-linecap: round;
      stroke-linejoin: round;
      stroke-dasharray: 2 10;
      animation: fl .7s linear infinite;
      cursor: pointer;
      transition: stroke-width .2s ease;
    }

    .rt-hit {
      fill: none;
      stroke: transparent;
      stroke-width: 24px;
      stroke-linecap: round;
      stroke-linejoin: round;
      cursor: pointer;
    }

    .rt-hit:hover~.rt,
    .rt:hover {
      stroke-width: 6.5px;
    }

    .rt-hit:hover~.rt-glow {
      opacity: .5;
    }

    @keyframes fl {
      to {
        stroke-dashoffset: -24;
      }
    }

    .rt-pulse {
      fill: none;
      stroke-width: 2px;
      animation: pulse-halo 1.5s cubic-bezier(0.2, 0.8, 0.2, 1) infinite;
    }

    @keyframes pulse-halo {
      0% {
        r: 4px;
        opacity: 1;
      }

      100% {
        r: 16px;
        opacity: 0;
      }
    }

    .pin {
      cursor: pointer;
      pointer-events: all;
      transition: opacity .3s
    }

    .pin.dim {
      opacity: .25
    }

    .pin .bump {
      transform-box: fill-box;
      transform-origin: 50% 100%;
      transition: transform .2s cubic-bezier(.34, 1.56, .64, 1)
    }

    .pin:hover .bump,
    .pin:focus-visible .bump,
    .pin.hot .bump {
      transform: translateY(-7px) scale(1.12)
    }

    .pin path {
      stroke: rgba(10, 8, 4, .55);
      stroke-width: 1.5
    }

    .pin:focus {
      outline: none
    }

    .pin:focus-visible path {
      stroke: var(--tx);
      stroke-width: 2.5
    }

    .pin text {
      font-size: 14px;
      font-weight: 700;
      fill: #17130C;
      text-anchor: middle
    }

    .pin .enter {
      animation: pi .45s cubic-bezier(.2, .9, .3, 1.2) both
    }

    @keyframes pi {
      from {
        opacity: 0;
        transform: translateY(14px)
      }
    }

    .tools {
      position: absolute;
      right: 12px;
      bottom: 12px;
      display: flex;
      flex-direction: column;
      gap: 7px;
      z-index: 20
    }

    .tip {
      position: absolute;
      z-index: 30;
      pointer-events: auto;
      cursor: pointer;
      width: 215px;
      max-width: calc(100vw - 24px);
      background: color-mix(in srgb, var(--sf) 94%, transparent);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      border: 1px solid var(--ln2);
      border-radius: 12px;
      padding: 8px 9px 8px;
      box-shadow: var(--sh);
      transform: translate(-50%, calc(-100% - 14px));
      transition: opacity .15s ease, transform .15s ease;
      line-height: 1.25;
    }

    .tip-img-wrap {
      width: 100%;
      height: 88px;
      border-radius: 7px;
      overflow: hidden;
      margin-bottom: 6px;
      background: var(--sf2);
      border: 1px solid var(--ln);
      position: relative;
    }

    .tip-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      display: block;
    }

    .tip b {
      display: block;
      font-size: 12px;
      font-weight: 700;
      color: var(--tx);
      line-height: 1.25;
    }

    .tip .tg {
      font-size: 10.5px;
      color: var(--mu);
      margin-top: 1px;
      font-weight: 500;
      line-height: 1.25;
    }

    .tip .rw {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 6px;
      margin-top: 5px;
      font-size: 11px;
      color: var(--mu);
    }

    .tip .dt {
      display: inline-flex;
      gap: 3.5px;
    }

    .tip .dt i {
      width: 6.5px;
      height: 6.5px;
      border-radius: 50%;
    }

    .tip .tip-cta {
      font-size: 10px;
      color: var(--teal);
      margin-top: 4px;
      font-weight: 600;
      line-height: 1.2;
    }

    .zpop {
      position: absolute;
      z-index: 40;
      width: 340px;
      overflow: hidden;
      background: color-mix(in srgb, var(--sf) 92%, transparent);
      backdrop-filter: blur(14px);
      border: 1px solid var(--ln2);
      border-radius: 16px;
      box-shadow: var(--sh);
      animation: pop .25s cubic-bezier(.2, .9, .3, 1.15)
    }

    @keyframes pop {
      from {
        opacity: 0;
        transform: translateY(10px) scale(.97)
      }
    }

    .zph {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 10px;
      padding: 12px 14px;
      border-bottom: 1px solid var(--ln)
    }

    .zph .tg {
      font-size: 10px;
      font-weight: 700;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--teal)
    }

    .zph h4 {
      font-family: 'Space Grotesk';
      font-size: 16px;
      margin-top: 2px
    }

    .zpl {
      max-height: 270px;
      overflow-y: auto;
      padding: 8px
    }

    .zpi {
      display: block;
      width: 100%;
      text-align: left;
      padding: 9px 10px;
      border-radius: 10px
    }

    .zpi:hover {
      background: var(--sf2)
    }

    .zpi .tm {
      font-family: 'Space Grotesk';
      font-size: 11px;
      font-weight: 600;
      color: var(--mu)
    }

    .zpi .tt {
      display: block;
      font-size: 13px;
      font-weight: 600;
      margin: 2px 0
    }

    .zpi .aa {
      font-size: 11.5px;
      color: var(--mu)
    }

    .zpf {
      padding: 9px 14px;
      border-top: 1px solid var(--ln);
      font-size: 11.5px;
      color: var(--mu)
    }

    .zpop.sheet {
      position: fixed;
      left: 10px;
      right: 10px;
      bottom: 10px;
      width: auto
    }

    .lp {
      border: 1px solid var(--ln);
      border-radius: 18px;
      background: var(--sf);
      display: flex;
      flex-direction: column;
      position: sticky;
      top: 12px;
      max-height: calc(100vh - 24px);
      overflow: hidden
    }

    .srch {
      padding: 13px 13px 9px
    }

    .srch input {
      width: 100%;
      padding: 10px 12px;
      border-radius: 11px;
      border: 1px solid var(--ln);
      background: var(--bg2);
      font-size: 14px
    }

    .srch input:focus {
      outline: none;
      border-color: var(--teal)
    }

    .chips {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      padding: 0 13px 10px
    }

    .chip {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      white-space: nowrap;
      padding: 5px 11px;
      border: 1px solid var(--ln);
      border-radius: 99px;
      font-size: 12.5px;
      font-weight: 600;
      color: var(--mu)
    }

    .chip i {
      width: 7px;
      height: 7px;
      border-radius: 50%
    }

    .chip .n {
      opacity: .55;
      font-size: 11px
    }

    .chip.on {
      background: var(--tx);
      border-color: var(--tx);
      color: var(--bg)
    }

    .sels {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
      padding: 0 13px 11px
    }

    .sels select {
      width: 100%;
      padding: 8px 10px;
      border-radius: 10px;
      border: 1px solid var(--ln);
      background: var(--bg2);
      font-size: 13px
    }

    .sel-zone {
      grid-column: 1 / -1;
      font-weight: 600;
      background: var(--sf2) !important;
      border-color: var(--ln2) !important
    }

    .lmeta {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 10px;
      padding: 8px 15px;
      border-block: 1px solid var(--ln);
      background: var(--bg2)
    }

    .lmeta p {
      font-size: 12px;
      color: var(--mu)
    }

    .lnk {
      display: inline-flex;
      gap: 5px;
      font-size: 12px;
      font-weight: 600;
      color: var(--teal)
    }

    .lnk:hover {
      text-decoration: underline
    }

    .cards {
      flex: 1;
      min-height: 0;
      overflow-y: auto;
      display: flex;
      flex-direction: column;
      gap: 9px;
      padding: 11px 13px 15px
    }

    .cards::-webkit-scrollbar {
      width: 9px
    }

    .cards::-webkit-scrollbar-thumb {
      background: var(--ln2);
      border-radius: 99px
    }

    .cd {
      position: relative;
      border: 1px solid var(--ln);
      border-radius: 13px;
      background: var(--bg2);
      padding: 11px 12px 11px 17px;
      cursor: pointer;
      animation: ri .4s both;
      animation-delay: calc(var(--i)*35ms)
    }

    @keyframes ri {
      from {
        opacity: 0;
        transform: translateY(9px)
      }
    }

    .cd::before {
      content: '';
      position: absolute;
      left: 0;
      top: 10px;
      bottom: 10px;
      width: 3px;
      border-radius: 3px;
      background: var(--c)
    }

    .cd:hover {
      transform: translateY(-1px);
      border-color: color-mix(in srgb, var(--c) 45%, var(--ln))
    }

    .cd .top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 6px
    }

    .cd .cat {
      font-size: 10px;
      font-weight: 700;
      letter-spacing: .06em;
      text-transform: uppercase;
      padding: 3px 8px;
      border-radius: 99px;
      background: var(--ca);
      color: var(--c);
      border: 1px solid var(--cb)
    }

    .cd .zbadge {
      font-size: 10.5px;
      font-weight: 700;
      letter-spacing: .03em;
      padding: 2px 7px;
      border-radius: 6px;
      background: var(--sf);
      color: var(--mu);
      border: 1px solid var(--ln2);
      margin-left: auto;
      margin-right: 8px
    }

    .cd .tm {
      font-family: 'Space Grotesk';
      font-size: 13px;
      font-weight: 600
    }

    .cd h4 {
      font-size: 14px;
      font-weight: 600;
      line-height: 1.35
    }

    .cd .mt {
      display: flex;
      flex-wrap: wrap;
      gap: 4px 12px;
      margin-top: 7px;
      font-size: 12px;
      color: var(--mu)
    }

    .cd .mt b {
      color: var(--tx)
    }

    .cd .au {
      margin-top: 8px;
      font-size: 12px;
      color: var(--mu)
    }

    .empty {
      padding: 40px 22px;
      text-align: center;
      color: var(--mu);
      font-size: 13px
    }

    .empty b {
      display: block;
      color: var(--tx);
      font-size: 15px;
      margin-bottom: 5px
    }

    .empty .lnk {
      margin-top: 14px
    }

    .modal {
      position: fixed;
      inset: 0;
      z-index: 150;
      display: grid;
      place-items: center;
      padding: 18px
    }

    .modal[hidden] {
      display: none
    }

    .bk {
      position: absolute;
      inset: 0;
      background: rgba(8, 7, 4, .55);
      backdrop-filter: blur(5px)
    }

    .mc {
      position: relative;
      width: min(540px, 100%);
      max-height: 88vh;
      overflow-y: auto;
      background: color-mix(in srgb, var(--sf) 92%, transparent);
      backdrop-filter: blur(18px);
      border: 1px solid var(--ln2);
      border-radius: 20px;
      padding: 24px;
      box-shadow: var(--sh);
      animation: pop .3s cubic-bezier(.2, .9, .3, 1.1)
    }

    .mc .x {
      position: absolute;
      top: 13px;
      right: 13px
    }

    #mTop {
      display: flex;
      flex-wrap: wrap;
      gap: 7px;
      margin-bottom: 13px
    }

    .mcg {
      font-size: 11px;
      font-weight: 700;
      padding: 4px 10px;
      border-radius: 99px;
      border: 1px solid var(--cb);
      background: var(--ca);
      color: var(--c)
    }

    .mcg.n {
      border-color: var(--ln);
      background: var(--bg2);
      color: var(--mu)
    }

    .mcg.z {
      border-color: var(--teal);
      background: color-mix(in srgb, var(--teal) 15%, transparent);
      color: var(--teal)
    }

    .mc h3 {
      font-family: 'Space Grotesk';
      font-size: 22px;
      letter-spacing: -.02em;
      line-height: 1.18;
      padding-right: 30px
    }

    #mDesc {
      margin: 10px 0 16px;
      color: var(--mu);
      font-size: 14px;
      line-height: 1.6
    }

    .mr {
      display: flex;
      gap: 10px;
      align-items: center;
      padding: 10px 12px;
      background: var(--bg2);
      border: 1px solid var(--ln);
      border-radius: 12px;
      margin-bottom: 8px
    }

    .mr>span:first-child {
      display: flex;
      flex-direction: column;
      gap: 1px;
      min-width: 0;
      flex: 1
    }

    .mr .lb {
      font-size: 10px;
      font-weight: 700;
      letter-spacing: .09em;
      text-transform: uppercase;
      color: var(--fa)
    }

    .mr .vl {
      font-size: 13.5px;
      font-weight: 600
    }

    .mnav {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 14px;
      padding-top: 12px;
      border-top: 1px solid var(--ln)
    }

    .mnav b {
      font-family: 'Space Grotesk';
      font-size: 13px;
      color: var(--mu)
    }

    .ft {
      border-top: 1px solid var(--ln);
      margin-top: 8px;
      padding: 20px 0 30px;
      text-align: center;
      font-size: 12px;
      color: var(--fa);
      line-height: 1.7
    }

    .ft code {
      background: var(--sf2);
      padding: 2px 6px;
      border-radius: 6px
    }

    @media(max-width:1120px) {
      .ws {
        grid-template-columns: 1fr
      }

      .lp {
        position: static;
        max-height: none
      }

      .cards {
        overflow: visible
      }

      .vp {
        height: min(58vh, 560px)
      }
    }

    @media(max-width:760px) {

      .brand .sub,
      .chipdate,
      .mht .hint {
        display: none
      }

      .hero {
        padding: 24px 0 18px
      }

      .dz {
        align-items: stretch;
        width: 100%
      }

      .days {
        display: flex;
        width: 100%
      }

      .days button {
        flex: 1;
        justify-content: center
      }

      .sum {
        justify-content: center
      }

      .vp {
        height: 52vh
      }
    }

    @media(prefers-reduced-motion:reduce) {
      * {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important
      }
    }

    /* ================= MODAL DE PROYECTOS POR CATEGORÍA (ZONA) ================= */
    .zmodal {
      z-index: 120 !important;
    }

    .zmodal[hidden] {
      display: none !important;
    }

    .zm-content {
      width: min(840px, 95vw);
      max-height: 88vh;
      display: flex;
      flex-direction: column;
      padding: 24px 26px;
      gap: 14px;
      background: color-mix(in srgb, var(--sf) 95%, transparent);
      backdrop-filter: blur(20px);
      box-shadow: var(--sh);
      border: 1px solid var(--ln2);
      border-radius: 20px;
    }

    .zm-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 10px;
    }

    .zm-badges {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      align-items: center;
    }

    .zm-title-row {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 14px;
      padding-bottom: 12px;
      border-bottom: 1px solid var(--ln);
    }

    .zm-title-row h3 {
      font-family: 'Space Grotesk', sans-serif;
      font-size: 22px;
      font-weight: 700;
      letter-spacing: -.02em;
      line-height: 1.2;
      color: var(--tx);
    }

    .zm-sub {
      font-size: 13.5px;
      color: var(--mu);
      margin-top: 4px;
    }

    .zm-quick-acts {
      display: flex;
      gap: 8px;
      flex-shrink: 0;
    }

    .zm-btn-route {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      font-size: 12.5px;
      font-weight: 600;
      padding: 8px 14px;
      border-radius: 10px;
      background: color-mix(in srgb, var(--teal) 15%, transparent);
      color: var(--teal);
      border: 1px solid color-mix(in srgb, var(--teal) 35%, transparent);
      cursor: pointer;
      transition: all .2s cubic-bezier(.16, 1, .3, 1);
    }

    .zm-btn-route:hover {
      background: var(--teal);
      color: var(--ink);
      transform: translateY(-1px);
      box-shadow: 0 4px 14px color-mix(in srgb, var(--teal) 40%, transparent);
    }

    .zm-controls {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      align-items: center;
      justify-content: space-between;
    }

    .zm-tabs {
      display: flex;
      gap: 6px;
      overflow-x: auto;
      padding-bottom: 4px;
      scrollbar-width: none;
    }

    .zm-tabs::-webkit-scrollbar {
      display: none;
    }

    .zm-tab {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 12px;
      font-weight: 600;
      padding: 6px 12px;
      border-radius: 99px;
      background: var(--sf2);
      color: var(--mu);
      border: 1px solid var(--ln);
      cursor: pointer;
      white-space: nowrap;
      transition: all .15s ease;
    }

    .zm-tab i {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      display: inline-block;
    }

    .zm-tab:hover {
      color: var(--tx);
      border-color: var(--ln2);
    }

    .zm-tab.active {
      background: var(--ca, color-mix(in srgb, var(--teal) 15%, transparent));
      color: var(--c, var(--teal));
      border-color: var(--cb, color-mix(in srgb, var(--teal) 40%, transparent));
      box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
    }

    .zm-tab-count {
      font-size: 10.5px;
      opacity: .85;
      background: rgba(0, 0, 0, .15);
      padding: 1px 6px;
      border-radius: 99px;
    }

    .zm-search-box {
      position: relative;
      min-width: 200px;
      flex: 1;
      max-width: 320px;
    }

    .zm-search-box input {
      width: 100%;
      height: 34px;
      padding: 0 12px 0 32px;
      font-size: 12.5px;
      background: var(--sf2);
      border: 1px solid var(--ln);
      border-radius: 10px;
      color: var(--tx);
      transition: border-color .15s ease;
    }

    .zm-search-box input:focus {
      border-color: var(--teal);
    }

    .zm-search-box svg {
      position: absolute;
      left: 10px;
      top: 50%;
      transform: translateY(-50%);
      width: 14px;
      height: 14px;
      opacity: .5;
      pointer-events: auto;
      cursor: pointer;
    }

    .zm-body {
      overflow-y: auto;
      padding-right: 4px;
      display: flex;
      flex-direction: column;
      gap: 18px;
      max-height: 52vh;
    }

    .zm-cat-section {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .zm-cat-head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-bottom: 4px;
      border-bottom: 1px solid var(--ln);
    }

    .zm-cat-pill {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      font-size: 12.5px;
      font-weight: 700;
      color: var(--c);
      text-transform: uppercase;
      letter-spacing: .04em;
    }

    .zm-cat-pill i {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--c);
    }

    .zm-cat-count {
      font-size: 11.5px;
      color: var(--mu);
      font-weight: 500;
    }

    .zm-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
      gap: 10px;
    }

    .zm-card {
      background: var(--sf2);
      border: 1px solid var(--ln);
      border-radius: 12px;
      padding: 13px 15px;
      cursor: pointer;
      display: flex;
      flex-direction: column;
      gap: 6px;
      position: relative;
      transition: all .2s cubic-bezier(.16, 1, .3, 1);
    }

    .zm-card::before {
      content: '';
      position: absolute;
      left: 0;
      top: 10px;
      bottom: 10px;
      width: 3px;
      border-radius: 0 4px 4px 0;
      background: var(--c, var(--teal));
      opacity: .8;
    }

    .zm-card:hover {
      background: var(--sf);
      border-color: var(--ln2);
      transform: translateY(-2px);
      box-shadow: 0 8px 20px rgba(0, 0, 0, .2);
    }

    .zm-card-top {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      gap: 8px;
    }

    .zm-card-area {
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .03em;
      text-transform: uppercase;
      color: var(--c, var(--teal));
    }

    .zm-card-time {
      font-size: 11px;
      color: var(--mu);
      font-weight: 600;
      white-space: nowrap;
    }

    .zm-card-title {
      font-size: 13.5px;
      font-weight: 600;
      line-height: 1.35;
      color: var(--tx);
    }

    .zm-card-resp {
      font-size: 11.5px;
      color: var(--fa);
      line-height: 1.3;
      margin-top: 2px;
    }

    .zm-empty {
      padding: 36px 20px;
      text-align: center;
      color: var(--mu);
      font-size: 14px;
      background: var(--sf2);
      border-radius: 12px;
      border: 1px dashed var(--ln);
    }

       /* ================= MODAL DE HORARIOS Y TURNOS DE VISITA (REDISEÑO RESPONSIVO) ================= */
    .smodal {
      z-index: 150 !important;
      position: fixed;
      inset: 0;
      display: grid;
      place-items: center;
      padding: 16px;
    }

    .smodal[hidden] {
      display: none !important;
    }

    /* Contenedor principal con flex y límite estricto de altura */
    .sch-content {
      position: relative;
      width: min(980px, 95vw);
      height: 88vh;
      max-height: 840px;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      padding: 18px 22px 14px;
      gap: 10px;
      background: color-mix(in srgb, var(--sf) 96%, transparent);
      backdrop-filter: blur(24px);
      -webkit-backdrop-filter: blur(24px);
      box-shadow: 0 24px 60px rgba(0, 0, 0, .4), var(--sh);
      border: 1px solid var(--ln2);
      border-radius: 20px;
      box-sizing: border-box;
      animation: pop .24s cubic-bezier(.2, .9, .3, 1.1);
    }

    /* Encabezado compacto */
    .sch-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 12px;
      padding-bottom: 8px;
      border-bottom: 1px solid var(--ln);
      flex-shrink: 0;
    }

    .sch-header-left {
      display: flex;
      flex-direction: column;
      gap: 1px;
      min-width: 0;
    }

    .sch-header-kicker {
      font-size: 9.5px;
      font-weight: 800;
      letter-spacing: .08em;
      text-transform: uppercase;
      color: var(--teal);
    }

    .sch-header h3 {
      font-family: 'Space Grotesk', sans-serif;
      font-size: 19px;
      font-weight: 700;
      letter-spacing: -.02em;
      line-height: 1.2;
      color: var(--tx);
      margin: 0;
    }

    .sch-header-right {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-shrink: 0;
    }

    /* Selector de Días segmentado */
    .sch-day-switcher {
      display: inline-flex;
      background: var(--sf2);
      padding: 2.5px;
      border-radius: 99px;
      border: 1px solid var(--ln);
      gap: 2px;
      align-items: center;
    }

    .sch-day-tab {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 4px 10px;
      border-radius: 99px;
      border: none;
      background: transparent;
      color: var(--mu);
      font-size: 11.5px;
      font-weight: 600;
      cursor: pointer;
      transition: all .16s ease;
      white-space: nowrap;
    }

    .sch-day-tab span {
      font-size: 10.5px;
      opacity: .8;
    }

    .sch-day-tab b {
      font-family: 'Space Grotesk', sans-serif;
      font-weight: 700;
    }

    .sch-day-tab:hover {
      color: var(--tx);
      background: var(--sf);
    }

    .sch-day-tab.active {
      background: color-mix(in srgb, var(--teal) 18%, transparent);
      color: var(--teal);
      box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
      font-weight: 700;
    }

    .sch-close-btn {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background: var(--sf2);
      border: 1px solid var(--ln);
      color: var(--mu);
      display: grid;
      place-items: center;
      cursor: pointer;
      font-size: 13px;
      transition: all .16s ease;
      flex-shrink: 0;
    }

    .sch-close-btn:hover {
      color: var(--tx);
      border-color: var(--ln2);
      background: var(--sf);
      transform: scale(1.05);
    }

    /* Banner inteligente y ultra compacto de Preescolar y Primaria */
    .sch-primaria-banner {
      background: color-mix(in srgb, var(--teal) 7%, var(--sf2));
      border: 1px solid color-mix(in srgb, var(--teal) 24%, var(--ln));
      border-radius: 10px;
      padding: 7px 12px;
      display: flex;
      flex-direction: column;
      gap: 6px;
      flex-shrink: 0;
      transition: all .2s ease;
    }

    .sch-pri-bar-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      flex-wrap: wrap;
    }

    .sch-pri-bar-left {
      display: flex;
      align-items: center;
      gap: 8px;
      min-width: 0;
      flex: 1;
    }

    .sch-pri-tag {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      font-family: 'Space Grotesk', sans-serif;
      font-size: 11px;
      font-weight: 800;
      letter-spacing: .03em;
      color: var(--teal);
      background: color-mix(in srgb, var(--teal) 16%, transparent);
      padding: 2px 8px;
      border-radius: 6px;
      white-space: nowrap;
      flex-shrink: 0;
    }

    .sch-pri-summary {
      font-size: 12px;
      color: var(--tx);
      font-weight: 600;
      line-height: 1.25;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .sch-pri-time-badge {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      font-size: 11px;
      font-weight: 700;
      color: var(--mu);
      background: var(--sf);
      border: 1px solid var(--ln);
      padding: 1px 7px;
      border-radius: 5px;
      white-space: nowrap;
      flex-shrink: 0;
    }

    .sch-pri-btn-toggle {
      background: transparent;
      border: 1px solid var(--ln);
      color: var(--mu);
      font-size: 11px;
      font-weight: 600;
      padding: 3px 8px;
      border-radius: 6px;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 4px;
      transition: all .16s ease;
      white-space: nowrap;
      flex-shrink: 0;
    }

    .sch-pri-btn-toggle:hover {
      color: var(--tx);
      border-color: var(--teal);
      background: var(--sf);
    }

    /* Vista expandida de los 3 días de Primaria (sólo si se despliega) */
    .sch-pri-expanded-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;
      padding-top: 6px;
      border-top: 1px dashed var(--ln);
      animation: fadeIn .18s ease;
    }

    .sch-pri-mini-card {
      background: var(--sf);
      border: 1px solid var(--ln);
      border-radius: 8px;
      padding: 7px 10px;
      display: flex;
      flex-direction: column;
      gap: 3px;
      cursor: pointer;
      transition: all .15s ease;
    }

    .sch-pri-mini-card:hover {
      border-color: var(--teal);
      transform: translateY(-1px);
    }

    .sch-pri-mini-card.active {
      background: color-mix(in srgb, var(--teal) 12%, transparent);
      border-color: color-mix(in srgb, var(--teal) 45%, transparent);
    }

    .sch-pri-mini-head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 10px;
      font-weight: 800;
      text-transform: uppercase;
      color: var(--teal);
    }

    .sch-pri-mini-grados {
      font-size: 11.5px;
      font-weight: 700;
      color: var(--tx);
      line-height: 1.2;
    }

    .sch-pri-mini-time {
      font-size: 10.5px;
      color: var(--mu);
      font-weight: 600;
    }

    /* Toolbar: Búsqueda y Filtros */
    .sch-toolbar {
      display: flex;
      flex-direction: column;
      gap: 8px;
      flex-shrink: 0;
    }

    .sch-search-row {
      display: flex;
      gap: 8px;
      align-items: center;
    }

    .sch-search-box {
      position: relative;
      flex: 1;
      min-width: 200px;
    }

    .sch-search-icon {
      position: absolute;
      left: 11px;
      top: 50%;
      transform: translateY(-50%);
      width: 15px;
      height: 15px;
      color: var(--mu);
      pointer-events: none;
      transition: color .15s ease;
    }

    .sch-search-box input {
      width: 100%;
      height: 36px;
      padding: 0 32px 0 34px;
      font-size: 13px;
      background: var(--sf2);
      border: 1px solid var(--ln);
      border-radius: 9px;
      color: var(--tx);
      box-sizing: border-box;
      transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
    }

    .sch-search-box input:focus {
      outline: none;
      border-color: var(--teal);
      background: var(--sf);
      box-shadow: 0 0 0 3px color-mix(in srgb, var(--teal) 18%, transparent);
    }

    .sch-search-box input:focus + .sch-search-icon {
      color: var(--teal);
    }

    .sch-search-clear {
      position: absolute;
      right: 7px;
      top: 50%;
      transform: translateY(-50%);
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: color-mix(in srgb, var(--mu) 20%, transparent);
      border: none;
      color: var(--tx);
      font-size: 10px;
      font-weight: 700;
      cursor: pointer;
      display: grid;
      place-items: center;
      transition: all .15s ease;
    }

    .sch-search-clear:hover {
      background: color-mix(in srgb, var(--mu) 40%, transparent);
      transform: translateY(-50%) scale(1.1);
    }

    /* Chips de Grado Rápido (1-Tap Filters) */
    .sch-grade-chips {
      display: flex;
      align-items: center;
      gap: 4px;
      overflow-x: auto;
      scrollbar-width: none;
      -webkit-overflow-scrolling: touch;
      flex-shrink: 0;
    }

    .sch-grade-chips::-webkit-scrollbar {
      display: none;
    }

    .sch-grade-chip {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 32px;
      height: 30px;
      padding: 0 8px;
      border-radius: 8px;
      background: var(--sf2);
      border: 1px solid var(--ln);
      color: var(--mu);
      font-size: 11.5px;
      font-weight: 700;
      cursor: pointer;
      transition: all .15s ease;
      white-space: nowrap;
    }

    .sch-grade-chip:hover {
      color: var(--tx);
      border-color: var(--ln2);
      background: var(--sf);
    }

    .sch-grade-chip.active {
      background: color-mix(in srgb, var(--teal) 18%, transparent);
      color: var(--teal);
      border-color: color-mix(in srgb, var(--teal) 50%, transparent);
      font-weight: 800;
      box-shadow: 0 1px 6px rgba(0, 0, 0, .08);
    }

    /* Fila de pestañas de turno */
    .sch-tabs-wrap {
      display: flex;
      overflow-x: auto;
      scrollbar-width: none;
      -webkit-overflow-scrolling: touch;
      padding-bottom: 2px;
    }

    .sch-tabs-wrap::-webkit-scrollbar {
      display: none;
    }

    .sch-tabs {
      display: flex;
      gap: 6px;
      width: 100%;
    }

    .sch-tab {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 11.5px;
      font-weight: 600;
      padding: 5px 12px;
      border-radius: 8px;
      background: var(--sf2);
      color: var(--mu);
      border: 1px solid var(--ln);
      cursor: pointer;
      white-space: nowrap;
      transition: all .16s ease;
      flex: 1;
      min-width: fit-content;
      justify-content: center;
    }

    .sch-tab i {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      display: inline-block;
      flex-shrink: 0;
    }

    .sch-tab:hover {
      color: var(--tx);
      border-color: var(--ln2);
      background: var(--sf);
    }

    .sch-tab.active {
      background: var(--ca, color-mix(in srgb, var(--teal) 15%, transparent));
      color: var(--c, var(--teal));
      border-color: var(--cb, color-mix(in srgb, var(--teal) 45%, transparent));
      box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
      font-weight: 700;
    }

    .sch-tab-count {
      font-size: 10px;
      font-weight: 700;
      opacity: .85;
      background: rgba(0, 0, 0, .18);
      padding: 1px 6px;
      border-radius: 99px;
      margin-left: 2px;
    }

    .sch-tab-sub {
      font-size: 10px;
      opacity: .75;
      font-weight: 500;
      display: inline-block;
    }

    /* Meta Bar: Estado de búsqueda y conteo */
    .sch-meta-bar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 2px;
      font-size: 11.5px;
      color: var(--fa);
      flex-shrink: 0;
    }

    .sch-meta-count {
      font-weight: 600;
      color: var(--mu);
    }

    .sch-meta-hint {
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }

    .sch-meta-clear-lnk {
      color: var(--teal);
      cursor: pointer;
      text-decoration: underline;
      font-weight: 600;
    }

    /* ================= CUERPO PRINCIPAL CON SCROLL ÚNICO ================= */
    .sch-body {
      flex: 1;
      min-height: 0;
      overflow-y: auto;
      overflow-x: hidden;
      padding-right: 4px;
      display: flex;
      flex-direction: column;
      gap: 14px;
      -webkit-overflow-scrolling: touch;
      scrollbar-gutter: stable;
    }

    .sch-body::-webkit-scrollbar {
      width: 6px;
    }

    .sch-body::-webkit-scrollbar-track {
      background: transparent;
    }

    .sch-body::-webkit-scrollbar-thumb {
      background: var(--ln2);
      border-radius: 6px;
    }

    .sch-body::-webkit-scrollbar-thumb:hover {
      background: var(--mu);
    }

    .sch-turn-section {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .sch-turn-head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-bottom: 4px;
      border-bottom: 1px solid var(--ln);
      position: sticky;
      top: 0;
      background: color-mix(in srgb, var(--sf) 94%, transparent);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      z-index: 2;
      padding-top: 2px;
    }

    .sch-turn-pill {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      font-size: 12px;
      font-weight: 800;
      color: var(--c);
      letter-spacing: .02em;
    }

    .sch-turn-time-tag {
      font-size: 11px;
      font-weight: 600;
      color: var(--tx);
      background: var(--sf2);
      padding: 1px 7px;
      border-radius: 5px;
      border: 1px solid var(--ln);
    }

    .sch-turn-count {
      font-size: 11.5px;
      color: var(--fa);
      font-weight: 600;
    }

    /* Grid de tarjetas de grupo */
    .sch-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
      gap: 8px;
    }

    /* Tarjeta individual de grupo y docente */
    .sch-item {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 8px 12px;
      background: var(--sf2);
      border: 1px solid var(--ln);
      border-radius: 10px;
      transition: all .15s ease;
      min-height: 52px;
      box-sizing: border-box;
      position: relative;
    }

    .sch-item:hover {
      border-color: var(--ln2);
      background: var(--sf);
      transform: translateY(-1px);
      box-shadow: 0 4px 14px rgba(0, 0, 0, .08);
    }

    .sch-item-grp {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-width: 52px;
      padding: 4px 6px;
      border-radius: 7px;
      background: var(--ca, color-mix(in srgb, var(--teal) 12%, transparent));
      border: 1px solid var(--cb, color-mix(in srgb, var(--teal) 30%, transparent));
      flex-shrink: 0;
    }

    .sch-item-grp-num {
      font-family: 'Space Grotesk', monospace, sans-serif;
      font-size: 14.5px;
      font-weight: 800;
      color: var(--c, var(--teal));
      line-height: 1;
    }

    .sch-item-grp-grd {
      font-size: 9.5px;
      font-weight: 700;
      color: var(--mu);
      letter-spacing: .04em;
      margin-top: 2px;
    }

    .sch-item-doc {
      display: flex;
      flex-direction: column;
      gap: 2px;
      min-width: 0;
      flex: 1;
    }

    .sch-item-doc-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 6px;
    }

    .sch-item-doc-lbl {
      font-size: 8.5px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: .07em;
      color: var(--fa);
    }

    .sch-item-turn-mini {
      font-size: 9px;
      font-weight: 700;
      color: var(--c, var(--teal));
      background: var(--ca, transparent);
      padding: 1px 5px;
      border-radius: 4px;
      border: 1px solid var(--cb, transparent);
    }

    .sch-item-doc-name {
      font-size: 12.5px;
      font-weight: 600;
      color: var(--tx);
      line-height: 1.3;
      word-break: break-word;
    }

    /* Resaltado de texto en búsquedas */
    .sch-mark {
      background: color-mix(in srgb, var(--teal) 35%, transparent);
      color: var(--tx);
      padding: 0 2px;
      border-radius: 3px;
      font-weight: 800;
    }

    /* Footer / Nota */
    .sch-footer-note {
      display: flex;
      align-items: center;
      gap: 8px;
      padding-top: 6px;
      border-top: 1px solid var(--ln);
      font-size: 11px;
      color: var(--fa);
      flex-shrink: 0;
      line-height: 1.3;
    }

    .sch-footer-note svg {
      flex-shrink: 0;
      color: var(--mu);
    }

    .sch-empty {
      text-align: center;
      padding: 32px 16px;
      color: var(--fa);
      font-size: 13.5px;
      background: var(--sf2);
      border-radius: 12px;
      border: 1px dashed var(--ln);
      margin: auto 0;
    }

    /* ================= ADAPTACIÓN PARA COMPUTADORES PORTÁTILES (LAPTOPS) ================= */
    @media (max-height: 820px) {
      .sch-content {
        height: 93vh;
        max-height: 93vh;
        padding: 12px 18px 10px;
        gap: 8px;
      }

      .sch-header {
        padding-bottom: 6px;
      }

      .sch-header h3 {
        font-size: 17px;
      }

      .sch-primaria-banner {
        padding: 5px 10px;
        gap: 4px;
      }

      .sch-toolbar {
        gap: 6px;
      }

      .sch-search-box input {
        height: 33px;
        font-size: 12.5px;
      }

      .sch-grade-chip {
        height: 27px;
        font-size: 11px;
        min-width: 28px;
        padding: 0 6px;
      }

      .sch-tab {
        padding: 4px 10px;
        font-size: 11px;
      }

      .sch-item {
        padding: 6px 10px;
        min-height: 48px;
      }

      .sch-item-grp {
        min-width: 48px;
        padding: 3px 5px;
      }

      .sch-item-grp-num {
        font-size: 13.5px;
      }

      .sch-item-doc-name {
        font-size: 12px;
      }
    }

    /* ================= ADAPTACIÓN PARA SMARTPHONES (MÓVILES) ================= */
    @media (max-width: 640px) {
      .smodal {
        padding: 0 !important;
        align-items: stretch;
        justify-content: stretch;
      }

      .sch-content {
        width: 100vw !important;
        height: 100% !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        border-radius: 0 !important;
        border: none !important;
        padding: 12px 12px 8px !important;
        gap: 8px !important;
      }

      .sch-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        padding-bottom: 8px;
      }

      .sch-header-left {
        width: 100%;
        padding-right: 36px;
      }

      .sch-header h3 {
        font-size: 16px;
      }

      .sch-header-right {
        width: 100%;
        justify-content: space-between;
      }

      .sch-close-btn {
        position: absolute;
        top: 10px;
        right: 12px;
      }

      .sch-day-switcher {
        width: 100%;
        display: flex;
      }

      .sch-day-tab {
        flex: 1;
        justify-content: center;
        padding: 5px 8px;
        font-size: 11px;
      }

      /* Buscador optimizado para móvil: 16px evita auto-zoom en iOS Safari */
      .sch-search-row {
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
      }

      .sch-search-box input {
        font-size: 16px !important;
        height: 40px;
      }

      .sch-grade-chips {
        width: 100%;
        padding-bottom: 2px;
      }

      .sch-grade-chip {
        flex: 1;
        min-width: 36px;
        height: 32px;
      }

      .sch-tabs-wrap {
        padding-bottom: 2px;
      }

      .sch-tabs {
        flex-wrap: nowrap;
      }

      .sch-tab {
        flex: none;
        padding: 6px 12px;
      }

      .sch-grid {
        grid-template-columns: 1fr !important;
        gap: 6px;
      }

      .sch-item {
        padding: 9px 12px;
        min-height: 52px;
      }

      .sch-item-doc-name {
        font-size: 13px;
      }

      .sch-pri-expanded-grid {
        grid-template-columns: 1fr;
      }

      .sch-footer-note {
        font-size: 10px;
      }
    }