:root{--demo-blue:#163c65;--demo-dark:#102e4d;--demo-gold:#ffcd61}
#screen{color:var(--demo-dark)}
#screen header{background:var(--demo-dark)}
#screen .head{min-height:74px}
#screen .admin-button{display:inline-flex;align-items:center;justify-content:center;flex:0 0 48px;width:48px;height:48px;border:2px solid #c0dcf5;border-radius:10px;text-decoration:none;font-weight:750}
#screen .admin-icon{font-size:24px;line-height:1}
#screen .admin-button:hover{background:#244c73}
#screen .hero{color:white;background:linear-gradient(115deg,#163c65,#195b72);border-color:var(--demo-gold)}
#screen .hero p{font-size:20px}
#screen .hero.welcome{animation:welcome-in 900ms ease-out both}
#screen .hero.welcome .button{animation:reserve-in 950ms 380ms ease-out both}
#screen .hero.welcome + .highlights div{animation:welcome-in 800ms ease-out both}
#screen .hero.welcome + .highlights div:nth-child(1){animation-delay:400ms}
#screen .hero.welcome + .highlights div:nth-child(2){animation-delay:550ms}
#screen .hero.welcome + .highlights div:nth-child(3){animation-delay:700ms}
#screen .calendar-opening .days{animation:welcome-in 740ms ease-out both}
#screen .calendar-opening [aria-current=date]{animation:date-highlight 1100ms ease-out both}
@keyframes welcome-in{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
@keyframes reserve-in{0%{opacity:0;transform:translateY(14px)}65%{opacity:1;transform:translateY(-3px)}100%{opacity:1;transform:translateY(0)}}
@keyframes date-highlight{0%,25%{box-shadow:0 0 0 4px #c37624}100%{box-shadow:0 0 0 0 #c3762400}}
@media(prefers-reduced-motion:reduce){#screen .hero.welcome,#screen .hero.welcome .button,#screen .hero.welcome + .highlights div,#screen .calendar-opening .days,#screen .calendar-opening [aria-current=date]{animation:none}}
#screen .hero .button{background:var(--demo-gold);color:#252b30;min-height:52px;padding-inline:23px}
#screen .highlights div{background:#ecf5fc;border:2px solid #bfd9ed;color:#173f63}
#screen .highlights div:nth-child(2){background:#e6f4ed;border-color:#b6dbc8;color:#174b3a}
#screen .highlights div:nth-child(3){background:#fff5df;border-color:#f2d28a;color:#594112}
#screen .highlights a{color:inherit;font-size:18px;text-underline-offset:3px}
#screen .calendar,#screen #solicitud{border:2px solid #b8d2e6;border-top:5px solid #287499}
#screen .calendar-help{margin-top:4px;font-size:18px}
#screen .day{min-height:48px;border-color:#8299ad;font-size:18px}
#screen a.day:hover,#screen a.day[aria-current=date]{background:#ffdf99;color:#28220f;border-color:#76501a}
#screen .day.busy{background:#dce1e7;color:#39495a;border-color:#b4bdc8}
#screen .button:not(.secondary),#screen button:not(.secondary){background:var(--demo-blue)}
#screen .hero .button{background:var(--demo-gold)}
#screen .form-link{margin-top:14px}
#screen .selected-date{display:inline-block;margin:8px 8px 8px 0;padding:10px 14px;border-radius:8px;background:#fff0c7;color:#47330b;font-size:clamp(17px,3.5vw,23px)}
#screen .change-date{vertical-align:middle}
#screen .prices div{background:#ecf5fc;border-color:#bfd9ed}
#screen .prices strong{font-size:clamp(16px,3vw,22px)}
#screen input,#screen select{min-height:48px}
#screen .check input{min-height:23px}
@media(max-width:580px){#screen .head{min-height:64px}#screen .admin-button{padding:5px 9px}#screen .day{min-height:44px;font-size:16px}}