/* Rental Service Alcober · reservas — mismo estilo que la web: negro, dorado, Cormorant + Jost */
:root{--bg:#090b0f;--panel:#10141b;--panel2:#141922;--line:#2a2618;--gold:#c8a04a;--gold2:#e6c980;--ink:#eee7d6;--mute:#9a9484;
  --ok:#6fbf73;--okbg:rgba(111,191,115,.12);--warn:#e6b450;--warnbg:rgba(230,180,80,.12);--bad:#e0675b;--badbg:rgba(224,103,91,.12);--info:#6fb3d9;--infobg:rgba(111,179,217,.12);
  color-scheme:dark}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:300 16px/1.55 Jost,"Helvetica Neue",Arial,sans-serif;min-height:100vh;
  padding-left:env(safe-area-inset-left,0);padding-right:env(safe-area-inset-right,0)}
h1,h2,h3,h4{font-family:"Cormorant Garamond",Georgia,serif;font-weight:500;line-height:1.1;margin:0}
a{color:var(--gold2)}
button{font:inherit}
.wrap{max-width:1160px;margin:0 auto;padding:0 20px}
[hidden]{display:none!important}

/* cabecera */
.top{position:sticky;top:0;z-index:20;background:rgba(9,11,15,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line);padding-top:env(safe-area-inset-top,0)}
.top .wrap{display:flex;align-items:center;gap:14px;min-height:64px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;margin-right:auto}
.brand svg{width:34px;height:34px;flex:none}
.brand span{font-family:"Cormorant Garamond",serif;color:var(--mute);font-size:10px;letter-spacing:.24em;text-transform:uppercase;line-height:1.05}
.brand em{display:block;font-style:normal;color:var(--gold2);font-size:21px;letter-spacing:.1em;font-weight:500}

/* botones */
.btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 22px;border:1px solid var(--gold);color:var(--gold2);background:transparent;cursor:pointer;font:400 15px Jost,Arial,sans-serif;text-decoration:none;transition:background .3s,color .3s,transform .15s,box-shadow .3s;min-height:44px}
.btn::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(100deg,transparent,rgba(255,240,200,.45),transparent);transform:skewX(-20deg);transition:left .7s;pointer-events:none}
.btn:hover::after{left:130%}
.btn:hover{box-shadow:0 8px 24px rgba(200,160,74,.22)}
.btn:active{transform:scale(.97)}
.btn.solid{background:var(--gold);color:#0b0b0b}
.btn.solid:hover{background:var(--gold2)}
.btn.sm{padding:7px 13px;font-size:14px;min-height:36px}
.btn.ok{border-color:var(--ok);color:var(--ok)}.btn.ok.solid{background:var(--ok);color:#06110a}
.btn.bad{border-color:var(--bad);color:var(--bad)}
.btn.ghost{border-color:var(--line);color:var(--mute)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--gold2);outline-offset:2px}

/* formularios */
label.f{display:grid;gap:5px;font-size:13px;color:var(--gold2);letter-spacing:.03em}
input,select,textarea{width:100%;min-width:0;background:#0b0e13;border:1px solid var(--line);color:var(--ink);padding:11px 12px;font:300 16px Jost,Arial,sans-serif;border-radius:0;transition:border-color .3s,box-shadow .3s}
input:focus,select:focus,textarea:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(200,160,74,.15);outline:none}
input[type=date]{color-scheme:dark}
textarea{min-height:80px;resize:vertical}
.row{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.check{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--mute);cursor:pointer}
.check input{width:20px;height:20px;flex:none;margin-top:2px;accent-color:var(--gold)}

/* tarjetas y paneles */
.panel{background:var(--panel);border:1px solid var(--line);padding:20px}
.muted{color:var(--mute)}
.pill{display:inline-block;font-size:12px;font-weight:500;padding:3px 10px;border:1px solid currentColor;white-space:nowrap;letter-spacing:.02em}
.p-pendiente{color:var(--warn);background:var(--warnbg)}
.p-confirmada{color:var(--ok);background:var(--okbg)}
.p-entregada{color:var(--info);background:var(--infobg)}
.p-finalizada{color:var(--mute)}
.p-rechazada,.p-cancelada{color:var(--bad);background:var(--badbg)}
.num{font-variant-numeric:tabular-nums}

/* aviso flotante */
#toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0));transform:translate(-50%,30px);opacity:0;background:var(--panel2);border:1px solid var(--gold);color:var(--ink);padding:12px 18px;z-index:90;transition:.35s;max-width:calc(100vw - 32px);box-shadow:0 10px 30px rgba(0,0,0,.5)}
#toast.on{opacity:1;transform:translate(-50%,0)}

/* animaciones */
.rv{opacity:0;transform:translateY(18px);transition:opacity .7s cubic-bezier(.2,.8,.2,1),transform .7s cubic-bezier(.2,.8,.2,1)}
.rv.in{opacity:1;transform:none}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(230,180,80,.5)}50%{box-shadow:0 0 0 8px rgba(230,180,80,0)}}
.ripple{position:absolute;border-radius:50%;background:rgba(255,236,190,.5);transform:scale(0);animation:rip .7s ease-out forwards;pointer-events:none}
@keyframes rip{to{transform:scale(4);opacity:0}}
.demo-bar{background:var(--gold);color:#0b0b0b;text-align:center;font-size:13px;padding:6px 12px}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.rv{opacity:1;transform:none}}