:root{
  --azul:#072F88; --azul-osc:#052262; --azul-claro:#2155CA; --azul-suave:#E6ECF9;
  --naranja:#E16737; --naranja-osc:#C34C1D; --naranja-suave:#FCEEE8;
  --tinta:#0B1428; --tinta-2:#434C60; --tinta-3:#7C869C;
  --fondo:#F3F5F9; --papel:#fff; --linea:#DADEE7; --linea-2:#EDEFF5;
  --verde:#0C7A54; --verde-suave:#E8F5EF;
  --rojo:#C62033; --rojo-suave:#FCEAEC;
  --ambar:#B26A00; --ambar-suave:#FFF6E5;
  --r:12px; --r-lg:16px; --r-xl:20px;
  --sh:0 1px 2px rgba(11,20,40,.05);
  --sh-2:0 6px 20px rgba(11,20,40,.08);
  --sh-3:0 24px 60px rgba(11,20,40,.22);
  --display:'Archivo',system-ui,sans-serif; --body:'Public Sans',system-ui,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--fondo);color:var(--tinta);font-family:var(--body);font-size:15px;line-height:1.5;overflow-x:hidden}
button,input,select{font:inherit;color:inherit} button{cursor:pointer} a{color:inherit;text-decoration:none}
:focus-visible{outline:3px solid var(--naranja);outline-offset:2px;border-radius:6px}
.dsp{font-family:var(--display);font-variation-settings:'wdth' 82;font-weight:900;text-transform:uppercase;line-height:1;margin:0}
.num{font-family:var(--display);font-variation-settings:'wdth' 84;font-weight:900;font-variant-numeric:tabular-nums;line-height:1}
.muted{color:var(--tinta-3)}
.oculto{display:none!important}

/* ---------- BARRA SUPERIOR ---------- */
.top{position:sticky;top:0;z-index:40;color:#fff;
  background:linear-gradient(120deg,#0B3EA8,var(--azul) 55%,#041B55);box-shadow:0 2px 14px rgba(4,27,85,.18)}
.top-in{max-width:1100px;margin:0 auto;padding:10px 16px;display:flex;align-items:center;gap:14px}
.top-logo{height:34px;width:auto;display:block}
.top-tx{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:800;color:#BFCAE3;
  border-left:1px solid rgba(255,255,255,.22);padding-left:14px}
.top-nav{margin-left:auto;display:flex;align-items:center;gap:4px}
.top-nav a{padding:8px 12px;border-radius:9px;font-size:13.5px;font-weight:700;color:#D5DEF0}
.top-nav a:hover{background:rgba(255,255,255,.09);color:#fff}
.top-nav a[aria-current="page"]{background:rgba(255,255,255,.14);color:#fff}
.top-nav .salir{border:1px solid rgba(255,255,255,.25);margin-left:6px}
@media(max-width:620px){
  .top-tx{display:none}
  .top-nav a{padding:8px 9px;font-size:13px}
  .top-nav .n-larga{display:none}
}

.wrap{max-width:1100px;margin:0 auto;padding:22px 16px 60px}

/* ---------- PIEZAS ---------- */
.tarj{background:var(--papel);border:1px solid var(--linea);border-radius:var(--r-lg);box-shadow:var(--sh)}
.tarj-h{padding:15px 18px;border-bottom:1px solid var(--linea-2);display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.tarj-h h3{font-family:var(--display);font-variation-settings:'wdth' 86;font-weight:900;text-transform:uppercase;font-size:15px;letter-spacing:.02em;margin:0}
.tarj-b{padding:16px 18px}

.chip{display:inline-flex;align-items:center;gap:5px;border-radius:99px;padding:3px 10px;font-size:11.5px;font-weight:800;white-space:nowrap}
.chip::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor}
.c-pend{background:var(--ambar-suave);color:var(--ambar)}
.c-prep{background:#F0EAFB;color:#5B3FB0}
.c-entr{background:var(--verde-suave);color:var(--verde)}
.c-canc{background:var(--rojo-suave);color:var(--rojo)}
.c-azul{background:var(--azul-suave);color:var(--azul)}
.c-gris{background:var(--linea-2);color:var(--tinta-2)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:9px 16px;border-radius:10px;border:1px solid transparent;font-weight:700;font-size:13.5px;transition:background .15s,border-color .15s;text-align:center}
.btn-az{background:var(--azul);color:#fff} .btn-az:hover{background:var(--azul-osc)}
.btn-na{background:var(--naranja);color:#fff} .btn-na:hover{background:var(--naranja-osc)}
.btn-out{background:var(--papel);border-color:var(--linea);color:var(--tinta)} .btn-out:hover{border-color:var(--tinta-3)}
.btn-bl{background:#fff;color:var(--azul)} .btn-bl:hover{background:var(--azul-suave)}
.btn-tr{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.28);color:#fff} .btn-tr:hover{background:rgba(255,255,255,.18)}
.btn-sm{min-height:32px;padding:6px 12px;font-size:12.5px;border-radius:8px}
.btn:disabled{opacity:.45;cursor:not-allowed;pointer-events:none}
.btn-link{background:none;border:0;padding:0;color:var(--azul-claro);font-weight:700;font-size:13.5px}
.ico{width:16px;height:16px;flex:none}

.campo{margin-bottom:14px}
.campo label{display:block;font-size:12.5px;font-weight:700;color:var(--tinta-2);margin-bottom:6px}
.campo input{width:100%;border:1px solid var(--linea);border-radius:10px;padding:11px 13px;background:#fff;font-size:15px}
.campo input:focus{border-color:var(--azul-claro);outline:0;box-shadow:0 0 0 3px var(--azul-suave)}

.aviso{border-radius:12px;padding:12px 14px;font-size:13.5px;line-height:1.55;display:flex;gap:10px}
.aviso .ico{margin-top:2px}
.av-azul{background:var(--azul-suave);color:#12306E}
.av-ambar{background:var(--ambar-suave);color:#6E4300}
.av-rojo{background:var(--rojo-suave);color:#86131F}
.av-verde{background:var(--verde-suave);color:#0A5A3F}

/* Nota de prototipo: todo lo que NO existirá en producción va en naranja punteado. */
.demo{border:1.5px dashed var(--naranja);background:var(--naranja-suave);color:#7A3413;border-radius:10px;padding:10px 13px;font-size:12.5px;line-height:1.6}
.demo b{color:#5A240A}
.demo-et{display:inline-block;font-size:10px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;background:var(--naranja);color:#fff;border-radius:5px;padding:1px 6px;margin-right:6px}

/* ---------- ACCESO ---------- */
.login{min-height:100vh;background:var(--azul);display:grid;place-items:center;padding:20px 16px;position:relative;overflow:hidden}
.login::after{content:'';position:absolute;inset:auto 0 0 0;height:260px;pointer-events:none;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 120' preserveAspectRatio='none'><path d='M0 120L86 34l30 40 26-34 74 80 52-58 132 92z' fill='white' opacity='.06'/></svg>") no-repeat bottom/100% 100%}
.login-c{width:100%;max-width:430px;background:var(--papel);border-radius:20px;padding:30px;box-shadow:var(--sh-3);overflow:hidden;position:relative;z-index:1}
.login-cab{margin:-30px -30px 22px;padding:26px 20px 22px;background:var(--azul);border-radius:20px 20px 0 0;display:grid;place-items:center}
.login-cab img{width:186px;height:auto;display:block}
@media(max-width:420px){.login-c{padding:24px 20px}.login-cab{margin:-24px -20px 18px;padding:22px 16px 18px}.login-cab img{width:158px}}
.login-c h2{font-family:var(--display);font-variation-settings:'wdth' 82;font-weight:900;text-transform:uppercase;font-size:24px;margin:0 0 6px}
.login-c p{color:var(--tinta-3);font-size:14px;margin:0 0 20px}
.sobre{width:64px;height:64px;border-radius:50%;background:var(--azul-suave);color:var(--azul);display:grid;place-items:center;margin:0 auto 14px}
.sobre svg{width:30px;height:30px}
.demo-users{display:grid;gap:6px;margin-top:8px}
.demo-users button{display:flex;justify-content:space-between;gap:10px;text-align:left;background:#fff;border:1px solid #F2C3AE;border-radius:8px;padding:7px 10px;font-size:12.5px}
.demo-users button:hover{border-color:var(--naranja)}
.demo-users span{color:var(--tinta-3)}

/* ---------- PANEL: banda próxima reserva ---------- */
.hola{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.hola h1{font-size:clamp(26px,4vw,34px)}
.hola p{margin:6px 0 0;color:var(--tinta-3)}

.banda{position:relative;overflow:hidden;border-radius:var(--r-xl);padding:24px;color:#fff;margin-bottom:16px;
  background:linear-gradient(120deg,#0B3EA8,var(--azul) 55%,#041B55)}
.banda::after{content:'';position:absolute;inset:auto 0 -2px 0;height:150px;pointer-events:none;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 120' preserveAspectRatio='none'><path d='M0 120L86 34l30 40 26-34 74 80 52-58 132 92z' fill='white' opacity='.07'/></svg>") no-repeat bottom right/auto 100%}
.banda > *{position:relative;z-index:1}
.banda .et{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#BFCAE3}
.banda h2{font-family:var(--display);font-variation-settings:'wdth' 80;font-weight:900;text-transform:uppercase;font-size:clamp(28px,4.2vw,42px);margin:8px 0 0;line-height:1.02}
.banda .sub{color:#D5DEF0;margin-top:8px;font-size:14.5px}
.banda .dat{display:flex;gap:22px;flex-wrap:wrap;margin-top:20px}
.banda .dat .n{font-family:var(--display);font-variation-settings:'wdth' 84;font-weight:900;font-size:22px;line-height:1.05}
.banda .dat .l{font-size:12px;color:#BFCAE3;font-weight:600;margin-top:4px}
.banda .dat .sep{width:1px;background:rgba(255,255,255,.2)}
.banda .acc{display:flex;gap:8px;flex-wrap:wrap;margin-top:20px}
.banda .tip{margin-top:16px;background:rgba(255,255,255,.1);border-radius:10px;padding:10px 12px;font-size:13px;color:#E3E9F6;display:flex;gap:8px}
@media(max-width:560px){.banda{padding:20px 18px}.banda .dat{gap:14px}.banda .dat .sep{display:none}.banda .acc .btn{flex:1 1 auto}}

.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:22px}
.stat{padding:14px 16px}
.stat .n{font-size:26px}
.stat .l{font-size:12.5px;color:var(--tinta-3);font-weight:600;margin-top:5px}
@media(max-width:560px){.stats{gap:8px}.stat{padding:12px}.stat .n{font-size:20px}.stat .l{font-size:11.5px}}

/* ---------- pestañas + tarjetas de reserva ---------- */
.tabs{display:flex;gap:4px;background:var(--linea-2);border-radius:12px;padding:4px;margin-bottom:14px;width:max-content;max-width:100%;overflow-x:auto}
.tabs button{border:0;background:none;padding:8px 14px;border-radius:9px;font-size:13.5px;font-weight:700;color:var(--tinta-2);white-space:nowrap}
.tabs button[aria-selected="true"]{background:var(--papel);color:var(--tinta);box-shadow:var(--sh)}
.tabs .cnt{display:inline-block;min-width:20px;padding:0 6px;border-radius:99px;background:var(--linea);font-size:11.5px;margin-left:5px}
.tabs button[aria-selected="true"] .cnt{background:var(--azul);color:#fff}

.lista{display:grid;gap:10px}
.res{display:grid;grid-template-columns:86px minmax(0,1fr) auto;gap:16px;align-items:center;padding:14px 16px;transition:border-color .15s,box-shadow .15s}
.res:hover{border-color:#B9C3D6;box-shadow:var(--sh-2)}
.fecha{background:var(--azul-suave);color:var(--azul);border-radius:12px;text-align:center;padding:9px 4px}
.fecha .d{font-size:28px}
.fecha .m{font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;margin-top:3px}
.res.canc .fecha{background:var(--linea-2);color:var(--tinta-3)}
.res .t{font-weight:800;font-size:15.5px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.res .s{font-size:13px;color:var(--tinta-2);margin-top:3px}
.res .mat{font-size:12.5px;color:var(--tinta-3);margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.res .der{text-align:right}
.res .der .num{font-size:20px}
.res .der .ver{font-size:12.5px;font-weight:700;color:var(--azul-claro);margin-top:6px;display:inline-flex;align-items:center;gap:4px}
@media(max-width:620px){
  .res{grid-template-columns:64px minmax(0,1fr);gap:12px;padding:12px}
  .fecha .d{font-size:22px}
  .res .der{grid-column:1 / -1;display:flex;justify-content:space-between;align-items:center;text-align:left;border-top:1px solid var(--linea-2);padding-top:10px}
  .res .der .ver{margin-top:0}
}

.vacio{padding:36px 20px;text-align:center}
.vacio .ic{width:56px;height:56px;border-radius:50%;background:var(--linea-2);color:var(--tinta-3);display:grid;place-items:center;margin:0 auto 12px}
.vacio h4{margin:0 0 4px;font-size:16px}
.vacio p{margin:0 0 16px;color:var(--tinta-3);font-size:14px}

/* ---------- DETALLE ---------- */
.volver{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;font-weight:700;color:var(--tinta-2);margin-bottom:14px}
.volver:hover{color:var(--azul)}
.det-cab{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;flex-wrap:wrap;margin-bottom:16px}
.det-cab h1{font-size:clamp(24px,3.6vw,32px)}
.det-cab .chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.det-cab .acc{display:flex;gap:8px;flex-wrap:wrap}
.det{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:16px;align-items:start}
.det .col{display:grid;gap:16px}
@media(max-width:900px){.det{grid-template-columns:minmax(0,1fr)}}

.linea-t{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:center}
.linea-t .p .l{font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--tinta-3)}
.linea-t .p .n{font-size:22px;margin-top:6px}
.linea-t .p .h{font-size:13px;color:var(--tinta-2);margin-top:4px}
.linea-t .p:last-child{text-align:right}
.linea-t .mid{display:grid;justify-items:center;gap:4px;color:var(--tinta-3);font-size:12px;font-weight:700}
.linea-t .mid .bar{width:90px;height:2px;background:repeating-linear-gradient(90deg,var(--linea) 0 6px,transparent 6px 10px)}
@media(max-width:480px){.linea-t .mid .bar{width:40px}.linea-t .p .n{font-size:18px}}
.progreso{margin-top:16px;height:8px;background:var(--linea-2);border-radius:99px;overflow:hidden}
.progreso span{display:block;height:100%;background:linear-gradient(90deg,var(--azul-claro),var(--azul));border-radius:99px}

.mat-item{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 14px;padding:14px 18px;border-top:1px solid var(--linea-2)}
.mat-item:first-child{border-top:0}
.mat-item .nom{font-weight:800}
.mat-item .qty{display:inline-grid;place-items:center;min-width:26px;height:22px;border-radius:6px;background:var(--azul-suave);color:var(--azul);font-size:12px;font-weight:900;margin-right:6px;padding:0 5px}
.mat-item .pr{font-weight:800;text-align:right;white-space:nowrap}
.mat-item .tags{grid-column:1 / -1;display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.tag{font-size:12px;border:1px solid var(--linea);border-radius:7px;padding:2px 8px;color:var(--tinta-2);background:#fff}
.tag.gar{border-color:#B7DCCB;background:var(--verde-suave);color:var(--verde);font-weight:700}
.tag.sin{border-style:dashed;color:var(--tinta-3)}

.pago{padding:6px 18px 14px}
.pago .f{display:flex;justify-content:space-between;gap:12px;padding:7px 0;font-size:14px}
.pago .f span:first-child{color:var(--tinta-2)}
.pago .f.menos span:last-child{color:var(--verde)}
.pago .f.dev span:last-child{color:var(--rojo)}
.pago .f.tot{border-top:1px solid var(--linea);margin-top:6px;padding-top:12px;font-weight:800;font-size:15.5px}
.pago .f.tot span:first-child{color:var(--tinta)}
.pago .f.neto{font-weight:800}
.pago .sm{font-size:12px;color:var(--tinta-3);display:block;font-weight:500}

.tienda .nom{font-family:var(--display);font-variation-settings:'wdth' 86;font-weight:900;text-transform:uppercase;font-size:18px}
.tienda .fila{display:flex;gap:10px;font-size:13.5px;color:var(--tinta-2);margin-top:10px}
.tienda .fila .ico{color:var(--tinta-3);margin-top:2px}
.tienda .acc{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:16px}
.mapa{height:120px;border-radius:12px;margin:-2px 0 14px;background:
  radial-gradient(circle at 58% 46%,var(--naranja) 0 7px,#fff 7px 10px,transparent 10px),
  linear-gradient(135deg,#DDE7F7,#EEF3FB);position:relative;overflow:hidden}
.mapa::before{content:'';position:absolute;inset:0;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 120' preserveAspectRatio='none'><path d='M0 90 C60 70 90 100 150 60 S250 40 300 55' stroke='%23fff' stroke-width='6' fill='none'/><path d='M40 0 L90 120 M210 0 L180 120' stroke='%23fff' stroke-width='3' fill='none'/></svg>") center/cover}

.hist{list-style:none;margin:0;padding:4px 18px 14px}
.hist li{position:relative;padding:8px 0 8px 22px;font-size:13.5px}
.hist li::before{content:'';position:absolute;left:4px;top:14px;width:8px;height:8px;border-radius:50%;background:var(--azul-claro)}
.hist li::after{content:'';position:absolute;left:7.5px;top:24px;bottom:-8px;width:1px;background:var(--linea)}
.hist li:last-child::after{display:none}
.hist li.rojo::before{background:var(--rojo)}
.hist .cu{font-size:12px;color:var(--tinta-3)}

/* ---------- MIS DATOS ---------- */
.datos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0}
.datos div{padding:13px 18px;border-top:1px solid var(--linea-2)}
.datos div:nth-child(-n+2){border-top:0}
.datos dt{font-size:11.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--tinta-3)}
.datos dd{margin:4px 0 0;font-weight:600;overflow-wrap:anywhere}
@media(max-width:560px){.datos{grid-template-columns:1fr}.datos div:nth-child(2){border-top:1px solid var(--linea-2)}}
.switch{display:flex;gap:14px;align-items:flex-start;justify-content:space-between}
.switch input{appearance:none;width:44px;height:26px;border-radius:99px;background:var(--linea);position:relative;flex:none;cursor:pointer;transition:background .15s}
.switch input::after{content:'';position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:var(--sh);transition:transform .15s}
.switch input:checked{background:var(--verde)}
.switch input:checked::after{transform:translateX(18px)}

.pie{text-align:center;color:var(--tinta-3);font-size:12.5px;margin-top:34px}
.pie a{color:var(--azul-claro);font-weight:700}

.toast{position:fixed;left:50%;bottom:22px;transform:translate(-50%,20px);opacity:0;pointer-events:none;background:var(--tinta);color:#fff;border-radius:12px;padding:11px 16px;font-size:13.5px;font-weight:600;box-shadow:var(--sh-3);transition:opacity .2s,transform .2s;z-index:200;max-width:calc(100vw - 32px)}
.toast.ver{opacity:1;transform:translate(-50%,0)}

/* ---------- añadidos del port a Blade ---------- */
.top-nav form{margin:0}
.top-nav button.salir{background:none;padding:8px 12px;border-radius:9px;font-size:13.5px;font-weight:700;color:#D5DEF0;border:1px solid rgba(255,255,255,.25);margin-left:6px}
.top-nav button.salir:hover{background:rgba(255,255,255,.09);color:#fff}
@media(max-width:620px){.top-nav button.salir{padding:8px 9px;font-size:13px}}
.tabs a{padding:8px 14px;border-radius:9px;font-size:13.5px;font-weight:700;color:var(--tinta-2);white-space:nowrap}
.tabs a[aria-selected="true"]{background:var(--papel);color:var(--tinta);box-shadow:var(--sh)}
.tabs a[aria-selected="true"] .cnt{background:var(--azul);color:#fff}
.campo input[aria-invalid="true"]{border-color:var(--rojo)}
.campo .err{color:var(--rojo);font-size:12.5px;font-weight:600;margin-top:6px}
.pago .f span:last-child{white-space:nowrap}