:root {
  --to-fondo: #0a0a0a;
  --to-texto: #f4f4f4;
  --to-suave: rgba(255, 255, 255, .56);
  --to-tenue: rgba(255, 255, 255, .3);
  --to-tarjeta: #121212;
  --to-linea: rgba(255, 255, 255, .08);
  --to-borde: rgba(255, 255, 255, .16);
  --to-relieve: rgba(255, 255, 255, .055);
  --to-luz: rgba(255, 255, 255, .05);          
  --to-disco-color: #f4f4f4;                   
  --to-oscura: #333333;                        
  --to-oscura-tinta: #f4f4f4;
  --to-boton: #f4f4f4;
  --to-boton-tinta: #0a0a0a;
  --to-ok: #3ccf6e;
  --to-sombra: 0 60px 90px -40px rgba(0, 0, 0, .95), 0 24px 40px -24px rgba(0, 0, 0, .8);
  --to-curva: cubic-bezier(.22, 1, .36, 1);
  --to-alto: 50px;           
  --to-disco: 44px;          
}
:root[data-tema="claro"] {
  --to-fondo: #eeeeee;
  --to-texto: #0a0a0a;
  --to-suave: rgba(0, 0, 0, .56);
  --to-tenue: rgba(0, 0, 0, .32);
  --to-tarjeta: #ffffff;
  --to-linea: rgba(0, 0, 0, .08);
  --to-borde: rgba(0, 0, 0, .15);
  --to-relieve: rgba(0, 0, 0, .04);
  --to-luz: rgba(255, 255, 255, .9);
  --to-disco-color: #0a0a0a;
  --to-oscura: #5c5c5c;
  --to-oscura-tinta: #ffffff;
  --to-boton: #0a0a0a;
  --to-boton-tinta: #f4f4f4;
  --to-ok: #18a34a;
  --to-sombra: 0 50px 80px -40px rgba(0, 0, 0, .3), 0 18px 34px -22px rgba(0, 0, 0, .22);
}

* { box-sizing: border-box; }


button { font: inherit; color: inherit; }
svg { display: block; }


.to-turno {
  position: relative; width: min(1100px, 100%); height: 552px; display: grid; grid-template-columns: 300px 1fr 296px; overflow: hidden;
  border: 1px solid var(--to-linea); border-radius: 28px; background: var(--to-tarjeta);
  box-shadow: inset 0 1px 0 var(--to-luz), var(--to-sombra);
}
.to-turno svg { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.to-col { min-width: 0; transition: opacity .3s, transform .55s var(--to-curva), filter .3s; }


.to-servicio { display: flex; flex-direction: column; padding: 32px 30px 26px; border-right: 1px solid var(--to-linea); }
.to-icono {
  display: grid; place-items: center; width: 50px; height: 50px; border-radius: 15px;
  background: var(--to-relieve); border: 1px solid var(--to-linea); box-shadow: inset 0 1px 0 var(--to-luz);
}
.to-icono svg { width: 24px; height: 24px; }
.to-servicio h2 { margin: 22px 0 10px; font-size: 1.75rem; font-weight: 600; letter-spacing: -.035em; line-height: 1.1; }
.to-nota { margin: 0; font-size: .9rem; line-height: 1.5; color: var(--to-suave); }
.to-datos { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 14px; font-size: .92rem; }
.to-datos li { display: flex; align-items: center; gap: 12px; }
.to-datos svg { width: 19px; height: 19px; flex: none; color: var(--to-suave); }
.to-quien { margin-top: auto; display: flex; align-items: center; gap: 12px; padding-top: 18px; border-top: 1px solid var(--to-linea); }
.to-avatar {
  display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 50%;
  background: var(--to-texto); color: var(--to-tarjeta); font-size: .74rem; font-weight: 600; letter-spacing: .02em;
}
.to-quien b { display: block; font-size: .94rem; font-weight: 500; }
.to-quien small { display: block; margin-top: 1px; font-size: .78rem; color: var(--to-suave); }


.to-calendario { padding: 28px 30px 22px; border-right: 1px solid var(--to-linea); }
.to-cabeza { margin: 0 0 18px; font-size: 1.12rem; font-weight: 600; letter-spacing: -.02em; }
.to-nav { display: flex; align-items: center; gap: 6px; height: 40px; margin-bottom: 8px; }
.to-mes-titulo { flex: 1; display: grid; margin: 0; perspective: 300px; font-size: 1rem; font-weight: 500; letter-spacing: -.01em; }
.to-mes-titulo > span, .to-dia-titulo > span { grid-area: 1 / 1; transform-origin: 50% 50% -.4em; }
.to-mover {
  width: 38px; height: 38px; display: grid; place-items: center; padding: 0; border: 1px solid var(--to-linea); border-radius: 12px;
  background: none; color: var(--to-texto); cursor: pointer; transition: background-color .2s, opacity .2s, transform .2s var(--to-curva);
}
.to-mover svg { width: 18px; height: 18px; stroke-width: 1.8; }
.to-mover:hover { background: var(--to-relieve); }
.to-mover:active { transform: scale(.94); }
.to-mover:disabled { opacity: .3; cursor: default; background: none; transform: none; }
.to-semana { display: grid; grid-template-columns: repeat(7, 1fr); height: 30px; align-items: center; text-align: center; font-size: .74rem; color: var(--to-tenue); }

.to-meses { position: relative; height: calc(6 * var(--to-alto)); overflow: hidden; }

.to-mes { position: absolute; inset: 0; background: var(--to-tarjeta); isolation: isolate; }
.to-rejilla, .to-semanas { position: relative; }
.to-fila-sem { position: relative; display: grid; grid-template-columns: repeat(7, 1fr); height: var(--to-alto); }


.to-horas { display: flex; flex-direction: column; min-height: 0; padding: 28px 26px 22px; }
.to-dia-titulo { display: grid; margin: 0; perspective: 300px; font-size: 1.12rem; font-weight: 600; letter-spacing: -.02em; white-space: nowrap; }
.to-dia-sub { margin: 6px 0 0; font-size: .84rem; color: var(--to-suave); font-variant-numeric: tabular-nums; }
.to-horas-caja { position: relative; flex: 1; min-height: 0; margin-top: 18px; }
.to-confirma-movil { display: none; }



.to-dia {
  position: relative; width: 100%; height: 100%; display: grid; place-items: center; padding: 0; border: 0; background: none;
  color: #fff; mix-blend-mode: difference; cursor: default; outline: none; opacity: .32; -webkit-tap-highlight-color: transparent;
  font: 400 .98rem/1 var(--fuente-texto); font-variant-numeric: tabular-nums;
}
.to-dia::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: var(--to-disco); height: var(--to-disco); margin: calc(var(--to-disco) / -2);
  border-radius: 50%; background: rgba(255, 255, 255, .1); opacity: 0; transition: opacity .2s;
}

.to-dia.is-libre { opacity: 1; font-weight: 600; cursor: pointer; }
.to-dia.is-libre::after { content: ""; position: absolute; left: 50%; bottom: calc(var(--to-alto) / 2 - 15px); width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: #fff; }
.to-dia.is-libre:hover::before { opacity: 1; }
.to-dia.is-elegido::before { display: none; }
.to-dia.is-hoy::before { opacity: 1; background: none; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .7); }
.to-dia:focus-visible::before { display: block; opacity: 1; background: none; box-shadow: 0 0 0 2px #fff; }


.to-disco { position: absolute; left: 0; top: 0; width: calc(100% / 7); height: var(--to-alto); pointer-events: none; will-change: transform; }
.to-disco i {
  position: absolute; left: 50%; top: 50%; width: var(--to-disco); height: var(--to-disco); margin: calc(var(--to-disco) / -2);
  border-radius: 50%; background: var(--to-disco-color); box-shadow: 0 8px 18px -8px rgba(0, 0, 0, .7); transform: scale(0);
}


.to-lista {
  list-style: none; margin: 0; padding: 2px; display: flex; flex-direction: column; gap: 8px;
  max-height: 100%; overflow-x: hidden; overflow-y: auto; scrollbar-width: none;
}
.to-lista::-webkit-scrollbar { display: none; }
.to-lista.is-sale { position: absolute; left: 0; right: 0; top: 0; pointer-events: none; animation: to-sale .16s ease-in forwards; }
@keyframes to-sale { to { opacity: 0; transform: scale(.98); } }
.to-fila { position: relative; flex: none; height: 46px; animation: to-cae .6s calc(.12s + var(--i) * .05s) var(--to-curva) both; }
@keyframes to-cae { from { opacity: 0; transform: translateY(16px) scale(.94); } }
.to-hora {
  position: absolute; inset: 0; width: 100%; padding: 0; border: 1px solid var(--to-borde); border-radius: 12px; background: transparent;
  color: var(--to-texto); cursor: pointer; font-size: 1rem; font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: .01em;
  clip-path: inset(0 0 0 0 round 12px);
  transition: clip-path .55s var(--to-curva), background-color .25s, border-color .25s, color .25s;
}
.to-hora span { display: block; transition: transform .55s var(--to-curva); }
.to-hora:hover { border-color: var(--to-texto); background: var(--to-relieve); }
.to-hora:focus-visible { outline: 2px solid var(--to-texto); outline-offset: 2px; }
.to-fila.is-elegida .to-hora { clip-path: inset(0 calc(50% + 4px) 0 0 round 12px); background: var(--to-oscura); border-color: transparent; color: var(--to-oscura-tinta); }
.to-fila.is-elegida .to-hora span { transform: translateX(-25%); }
.to-fila.is-elegida .to-hora:focus-visible { outline: none; clip-path: inset(0 calc(50% + 4px) 0 0 round 12px); box-shadow: inset 0 0 0 2px var(--to-oscura-tinta); }
.to-confirmar {
  position: absolute; top: 0; right: 0; bottom: 0; width: calc(50% - 4px); padding: 0; border: 0; border-radius: 12px; cursor: pointer;
  background: var(--to-boton); color: var(--to-boton-tinta); font-size: .96rem; font-weight: 600; letter-spacing: -.01em;
  opacity: 0; transform: translateX(110%); pointer-events: none; visibility: hidden;
  transition: transform .6s var(--to-muelle, var(--to-curva)), opacity .2s, visibility 0s .6s;
}
.to-fila.is-elegida .to-confirmar { opacity: 1; transform: none; pointer-events: auto; visibility: visible; transition: transform .6s .05s var(--to-muelle, var(--to-curva)), opacity .25s .05s; }
.to-confirmar:hover { filter: brightness(.94); }
.to-confirmar:focus-visible { outline: 2px solid var(--to-texto); outline-offset: 2px; }
.to-vacio { margin: 8px 2px; font-size: .9rem; color: var(--to-suave); }



.to-turno.is-reservado .to-col { opacity: 0; transform: scale(.97); filter: blur(4px); pointer-events: none; }
.to-listo {
  position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; text-align: center; padding: 24px;
  opacity: 0; visibility: hidden; transition: opacity .25s, visibility 0s .25s;
}
.to-turno.is-reservado .to-listo { opacity: 1; visibility: visible; transition: opacity .3s .12s, visibility 0s; }
.to-check { width: 96px; height: 96px; }
.to-check circle { fill: color-mix(in srgb, var(--to-ok) 10%, transparent); stroke: var(--to-ok); stroke-width: 2.5; stroke-dasharray: 1; stroke-dashoffset: 1; transform: rotate(-90deg); transform-origin: 50% 50%; }
.to-check path { stroke: var(--to-ok); stroke-width: 3.5; stroke-dasharray: 1; stroke-dashoffset: 1; }
.to-turno.is-reservado .to-check { animation: to-asoma .7s .1s var(--to-muelle, var(--to-curva)) both; }
.to-turno.is-reservado .to-check circle { animation: to-traza .6s .15s var(--to-curva) forwards; }
.to-turno.is-reservado .to-check path { animation: to-traza .42s .52s var(--to-curva) forwards; }
@keyframes to-traza { to { stroke-dashoffset: 0; } }
@keyframes to-asoma { from { transform: scale(.6); opacity: 0; } }
.to-listo h2 { margin: 20px 0 8px; font-size: 2.2rem; font-weight: 600; letter-spacing: -.04em; outline: none; }
.to-detalle { margin: 0; font-size: 1.12rem; font-weight: 500; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.to-con { margin: 14px 0 0; display: flex; align-items: center; justify-content: center; gap: 10px; font-size: .9rem; color: var(--to-suave); }
.to-con .to-avatar { width: 28px; height: 28px; font-size: .6rem; }
.to-acciones { display: flex; gap: 10px; margin-top: 30px; }
.to-acciones button {
  display: inline-flex; align-items: center; gap: 9px; height: 48px; padding: 0 22px; border-radius: 14px; cursor: pointer;
  font-size: .95rem; font-weight: 500; letter-spacing: -.01em; transition: background-color .2s, transform .2s var(--to-curva);
}
.to-acciones svg { width: 18px; height: 18px; }
.to-agregar { border: 1px solid var(--to-borde); background: none; }
.to-agregar:hover { background: var(--to-relieve); }
.to-otra { border: 1px solid transparent; background: var(--to-boton); color: var(--to-boton-tinta); }
.to-otra:hover { transform: translateY(-1px); }
.to-acciones button:active { transform: scale(.97); }
.to-acciones button:focus-visible, .to-mover:focus-visible { outline: 2px solid var(--to-texto); outline-offset: 2px; }
.to-turno.is-reservado .to-listo > :not(.to-check) { animation: to-sube .6s calc(.45s + var(--k, 0) * .07s) var(--to-curva) both; }
@keyframes to-sube { from { opacity: 0; transform: translateY(12px); } }


.is-entra { animation: to-entra .6s .07s var(--to-curva) both; }
.is-sale { animation: to-gira-sale .26s cubic-bezier(.5, 0, .75, 0) forwards; }
@keyframes to-entra { from { transform: translateY(45%) rotateX(-75deg); opacity: 0; } }
@keyframes to-gira-sale { to { transform: translateY(-45%) rotateX(75deg); opacity: 0; } }


.to-escena { height: 100%; display: grid; place-items: center; padding: 24px; }

@media (prefers-reduced-motion: reduce) {
  .to-col, .to-listo, .to-hora, .to-hora span, .to-confirmar { transition-duration: .01s !important; transition-delay: 0s !important; }
  .to-fila, .to-turno.is-reservado .to-listo > :not(.to-check), .to-turno.is-reservado .to-check { animation: to-funde .15s both; }
  .to-turno.is-reservado .to-check circle, .to-turno.is-reservado .to-check path { animation-duration: .01s; animation-delay: 0s; }
  .to-turno.is-reservado .to-col { transform: none; filter: none; }
  .is-entra { animation: to-funde .14s both; }
  .is-sale { animation: to-funde .1s reverse forwards; }
}
@keyframes to-funde { from { opacity: 0; } }


@media (max-width: 760px) {
  :root { --to-alto: 44px; --to-disco: 38px; }

  .to-escena { place-items: start center; padding: 16px; }
  .to-turno { height: auto; grid-template-columns: 1fr; border-radius: 22px; }
  .to-servicio { display: grid; grid-template-columns: auto 1fr; column-gap: 14px; align-items: center; padding: 16px 18px; border-right: 0; border-bottom: 1px solid var(--to-linea); }
  .to-icono { grid-row: span 2; width: 44px; height: 44px; border-radius: 13px; }
  .to-servicio h2 { margin: 0; font-size: 1.2rem; }
  .to-nota, .to-quien, .to-datos li:last-child { display: none; }
  .to-datos { display: flex; gap: 14px; margin: 4px 0 0; font-size: .82rem; color: var(--to-suave); }
  .to-datos li { gap: 6px; }
  .to-datos svg { width: 15px; height: 15px; }
  .to-calendario { padding: 16px 16px 10px; border-right: 0; border-bottom: 1px solid var(--to-linea); }
  .to-cabeza { display: none; }
  .to-dia { font-size: .9rem; }
  .to-horas { padding: 18px 16px 16px; }
  .to-horas-caja { margin-top: 14px; }
  .to-lista { display: grid; grid-template-columns: repeat(3, 1fr); max-height: none; }
  .to-fila { height: 44px; }
  .to-confirmar { display: none; }
  .to-fila.is-elegida .to-hora { clip-path: inset(0 0 0 0 round 12px); }
  .to-fila.is-elegida .to-hora span { transform: none; }
  
  .to-confirma-movil {
    display: flex; align-items: center; justify-content: center; gap: 6px; height: 50px; margin-top: 14px; border: 0; border-radius: 14px;
    background: var(--to-boton); color: var(--to-boton-tinta); font-weight: 600; cursor: pointer; transition: opacity .25s, transform .4s var(--to-curva);
  }
  .to-confirma-movil:disabled { opacity: .3; cursor: default; }
  .to-acciones { flex-direction: column; width: 100%; }
  .to-acciones button { justify-content: center; }
  .to-listo h2 { font-size: 1.8rem; }
  .to-con .to-avatar { display: none; }
}