/* ══════════════════════════════════════════════
   PANEL DE RESERVAS — Los Reyes del Sarao
   ══════════════════════════════════════════════ */
:root{
  --orange:#FF6B1A; --coral:#FF4D6D; --yellow:#FFD60A;
  --green:#06D6A0; --blue:#118AB2; --purple:#9B5DE5;
  --ink:#221a14; --muted:#7c7269; --line:#eee3d8;
  --bg:#fbf6f0; --card:#ffffff;
  --r:16px; --r-sm:10px;
  --sh:0 8px 30px rgba(120,80,40,.10);
  --ease:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none !important}
body{
  font-family:'Nunito',system-ui,sans-serif;
  color:var(--ink); background:var(--bg);
  -webkit-font-smoothing:antialiased;
}
button{font-family:inherit;cursor:pointer}
input,select,textarea{font-family:inherit;font-size:1rem}

/* ── LOGIN ─────────────────────────────────── */
.login{
  position:fixed; inset:0; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,#FF6B1A 0%,#FF4D6D 55%,#FFD60A 100%);
  padding:1.5rem; z-index:100;
}
.login-card{
  background:#fff; border-radius:24px; padding:2.5rem 2rem;
  width:min(380px,100%); text-align:center; box-shadow:0 30px 80px rgba(0,0,0,.25);
}
.login-logo{margin-bottom:1rem}
.login-logo img{width:200px; max-width:80%; height:auto; display:inline-block}
.login-card h1{font-family:'Fredoka One',cursive; font-size:1.5rem; color:var(--orange)}
.login-sub{color:var(--muted); font-weight:700; margin-bottom:1.5rem}
.login-card label{display:block; text-align:left; font-weight:800; font-size:.85rem; margin-bottom:.4rem}
.login-card input{
  width:100%; padding:.85rem 1rem; border:2px solid var(--line);
  border-radius:var(--r-sm); margin-bottom:1rem; font-size:1rem;
}
.login-card input:focus{outline:none; border-color:var(--orange)}
.login-err{color:var(--coral); font-weight:800; min-height:1.2em; margin-top:.5rem; font-size:.9rem}
.login-hint{color:var(--muted); font-size:.78rem; margin-top:1rem}

/* ── APP LAYOUT ────────────────────────────── */
.app{display:grid; grid-template-columns:240px 1fr; min-height:100vh}

.side{
  background:var(--ink); color:#fff; padding:1.5rem 1rem;
  display:flex; flex-direction:column; position:sticky; top:0; height:100vh;
}
.side-brand{display:flex; align-items:center; justify-content:center; margin-bottom:1.8rem; padding:.9rem; background:#fff; border-radius:14px}
.side-logo-img{width:100%; max-width:150px; height:auto; display:block}
.side-nav{display:flex; flex-direction:column; gap:.3rem; flex:1}
.side-link{
  display:flex; align-items:center; gap:.6rem;
  text-align:left; background:transparent; border:0; color:rgba(255,255,255,.75);
  padding:.7rem .8rem; border-radius:var(--r-sm); font-weight:800; font-size:.92rem;
  transition:background .2s,color .2s;
}
.side-link:hover{background:rgba(255,255,255,.08); color:#fff}
.side-link.active{background:var(--orange); color:#fff}
.nav-ico{width:18px; height:18px; flex:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.side-foot{display:flex; flex-direction:column; gap:.4rem; border-top:1px solid rgba(255,255,255,.12); padding-top:1rem}
.side-tool{
  display:flex; align-items:center; gap:.5rem;
  text-align:left; background:rgba(255,255,255,.06); border:0; color:rgba(255,255,255,.8);
  padding:.55rem .7rem; border-radius:var(--r-sm); font-weight:700; font-size:.82rem;
}
.side-tool:hover{background:rgba(255,255,255,.14); color:#fff}
.tool-ico{width:16px; height:16px; flex:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.side-tool-hl{background:#25d366; color:#063; }
.side-tool-hl:hover{background:#1ebe5a; color:#042}
.side-logout{color:#ffb3c6}

.main{padding:1.5rem clamp(1rem,3vw,2.5rem) 3rem}
.topbar{display:flex; align-items:center; justify-content:space-between; margin-bottom:1.5rem; gap:1rem}
.topbar h2{font-family:'Fredoka One',cursive; font-size:1.6rem}

/* ── BOTONES ───────────────────────────────── */
.btn{
  background:linear-gradient(135deg,var(--orange),var(--coral));
  color:#fff; border:0; padding:.7rem 1.3rem; border-radius:100px;
  font-weight:900; box-shadow:0 6px 18px rgba(255,77,109,.35); transition:transform .15s;
}
.btn:hover{transform:translateY(-2px)}
.btn-add{white-space:nowrap}
.btn-ghost{background:#fff; border:2px solid var(--line); color:var(--ink); padding:.65rem 1.2rem; border-radius:100px; font-weight:800}
.btn-ghost:hover{border-color:var(--orange); color:var(--orange)}
.btn-mini{background:var(--ink); color:#fff; border:0; padding:.55rem 1rem; border-radius:var(--r-sm); font-weight:800}
.btn-del{background:#fff; color:var(--coral); border:2px solid #ffd6df; padding:.6rem 1.1rem; border-radius:100px; font-weight:800}
.btn-del:hover{background:var(--coral); color:#fff; border-color:var(--coral)}

/* ── KPIs ──────────────────────────────────── */
.kpis{display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:1rem; margin-bottom:1.5rem}
.kpi{background:var(--card); border-radius:var(--r); padding:1.2rem 1.3rem; box-shadow:var(--sh); border-left:5px solid var(--orange)}
.kpi-num{font-family:'Fredoka One',cursive; font-size:1.9rem; line-height:1}
.kpi-label{color:var(--muted); font-weight:800; font-size:.8rem; margin-top:.3rem}
.kpi.k2{border-color:var(--green)} .kpi.k3{border-color:var(--blue)} .kpi.k4{border-color:var(--purple)}

.panel-block{background:var(--card); border-radius:var(--r); padding:1.3rem 1.4rem; box-shadow:var(--sh)}
.panel-block h3{font-family:'Fredoka One',cursive; margin-bottom:1rem}
.upcoming-list{display:flex; flex-direction:column; gap:.6rem}
.up-item{display:flex; align-items:center; gap:1rem; padding:.7rem .9rem; border:1px solid var(--line); border-radius:var(--r-sm); cursor:pointer; transition:border-color .2s}
.up-item:hover{border-color:var(--orange)}
.up-date{font-family:'Fredoka One',cursive; color:var(--orange); text-align:center; min-width:54px}
.up-date b{display:block; font-size:1.3rem; line-height:1}
.up-date span{font-size:.72rem; text-transform:uppercase; color:var(--muted)}
.up-main{flex:1}
.up-main strong{display:block}
.up-main small{color:var(--muted)}

/* ── ANALÍTICA ─────────────────────────────── */
.an-charts{display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:1rem}
.an-card{background:var(--card); border-radius:var(--r); padding:1.3rem 1.4rem; box-shadow:var(--sh)}
.an-card h3{font-family:'Fredoka One',cursive; font-size:1.02rem; margin-bottom:1.1rem}
.bar-list{display:flex; flex-direction:column; gap:.6rem}
.bar-row{display:grid; grid-template-columns:104px 1fr 64px; align-items:center; gap:.7rem}
.bar-label{font-weight:800; font-size:.82rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.bar-track{background:#f0e7dc; border-radius:100px; height:14px; overflow:hidden}
.bar-fill{height:100%; border-radius:100px; background:linear-gradient(90deg,var(--orange),var(--coral)); min-width:2px; transition:width .5s var(--ease)}
.bar-fill.f-blue{background:linear-gradient(90deg,var(--blue),#5bc0de)}
.bar-fill.f-green{background:linear-gradient(90deg,var(--green),#5ad6b3)}
.bar-fill.f-purple{background:linear-gradient(90deg,var(--purple),#c08bf0)}
.bar-val{font-weight:900; font-size:.82rem; text-align:right; color:var(--ink)}
.bar-empty{color:var(--muted); font-weight:700; font-size:.9rem; padding:.4rem 0}
.ico-warn{vertical-align:-2px; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round}

/* ── FILTROS / TABLA ───────────────────────── */
.filters{display:flex; gap:.8rem; margin-bottom:1rem; flex-wrap:wrap}
.filters input,.filters select{padding:.7rem 1rem; border:2px solid var(--line); border-radius:var(--r-sm); background:#fff}
.filters input{flex:1; min-width:200px}
.filters input:focus,.filters select:focus{outline:none; border-color:var(--orange)}
.table-wrap{background:var(--card); border-radius:var(--r); box-shadow:var(--sh); overflow:hidden}
.tbl{width:100%; border-collapse:collapse}
.tbl th{text-align:left; padding:.9rem 1rem; font-size:.78rem; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); border-bottom:2px solid var(--line)}
.tbl td{padding:.9rem 1rem; border-bottom:1px solid var(--line); vertical-align:middle}
.tbl tr:last-child td{border-bottom:0}
.tbl tr{cursor:pointer; transition:background .15s}
.tbl tbody tr:hover{background:#fff7ef}
.cell-mat{max-width:260px; color:var(--muted); font-size:.88rem}
.badge{display:inline-block; padding:.25rem .7rem; border-radius:100px; font-size:.75rem; font-weight:900}
.b-preconfirmacion{background:#ede0ff; color:#6a3bbf}
.b-presupuesto{background:#eee; color:#666}
.b-reservado{background:#fff0d6; color:#b06b00}
.b-confirmado{background:#d6f7ec; color:#067a5b}
.b-completado{background:#dceefb; color:#0a5d80}
.b-cancelado{background:#ffe0e6; color:#c2334d}
.row-pago{color:var(--coral); font-size:.78rem; font-weight:800}
.row-warn{color:var(--orange); font-weight:900}
.empty{padding:2.5rem 1rem; text-align:center; color:var(--muted); font-weight:700}

/* ── TABLERO / EMBUDO ──────────────────────── */
.board{display:flex; gap:1rem; overflow-x:auto; padding-bottom:1rem; align-items:flex-start}
.bcol{flex:0 0 250px; background:#f4ece3; border-radius:var(--r); padding:.7rem; min-height:120px}
.bcol-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:.7rem}
.bcol-head b{font-family:'Fredoka One',cursive; color:var(--muted); font-size:.95rem}
.bcol-body{display:flex; flex-direction:column; gap:.6rem}
.bcol-empty{color:#c7bcae; text-align:center; padding:1rem 0; font-weight:800}
.bcard{background:#fff; border-radius:var(--r-sm); padding:.7rem .8rem; box-shadow:0 2px 8px rgba(120,80,40,.08); cursor:pointer; border-left:4px solid var(--orange); transition:transform .12s, box-shadow .12s}
.bcard:hover{transform:translateY(-2px); box-shadow:0 6px 16px rgba(120,80,40,.16)}
.bcard-top{font-weight:900; display:flex; align-items:center; gap:.3rem}
.bcard-date{color:var(--orange); font-weight:800; font-size:.82rem; margin-top:.15rem}
.bcard-mat{color:var(--muted); font-size:.82rem; margin:.3rem 0}
.bcard-foot{display:flex; justify-content:space-between; align-items:center; font-weight:800; font-size:.85rem; border-top:1px solid var(--line); padding-top:.4rem; margin-top:.3rem}
.b-col-preconfirmacion .bcard{border-left-color:#9B5DE5}
.b-col-presupuesto .bcard{border-left-color:#999}
.b-col-reservado .bcard{border-left-color:#FFB703}
.b-col-confirmado .bcard{border-left-color:#06D6A0}
.b-col-completado .bcard{border-left-color:#118AB2}
.b-col-cancelado .bcard{border-left-color:#FF4D6D; opacity:.7}

/* ── CALENDARIO ────────────────────────────── */
.cal-head{display:flex; align-items:center; justify-content:center; gap:1.5rem; margin-bottom:1rem}
.cal-head h3{font-family:'Fredoka One',cursive; font-size:1.3rem; text-transform:capitalize; min-width:200px; text-align:center}
.cal-nav{background:#fff; border:2px solid var(--line); width:40px; height:40px; border-radius:50%; font-size:1.3rem; color:var(--orange)}
.cal-nav:hover{border-color:var(--orange)}
.cal-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:6px}
.cal-dow{text-align:center; font-weight:900; color:var(--muted); font-size:.75rem; text-transform:uppercase; padding:.4rem 0}
.cal-cell{background:var(--card); border-radius:var(--r-sm); min-height:84px; padding:.4rem; box-shadow:0 2px 8px rgba(120,80,40,.06); position:relative}
.cal-cell.empty-cell{background:transparent; box-shadow:none}
.cal-cell.today{outline:2px solid var(--orange)}
.cal-day{font-weight:900; font-size:.85rem; color:var(--muted)}
.cal-ev{font-size:.72rem; font-weight:800; background:#fff0d6; color:#b06b00; border-radius:6px; padding:.15rem .35rem; margin-top:.2rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; cursor:pointer}
.cal-ev.warn{background:#ffe0c2; color:#c25a00}
.cal-legend{margin-top:1rem; color:var(--muted); font-size:.85rem; display:flex; gap:1rem; align-items:center}
.dot{display:inline-block; width:12px; height:12px; border-radius:50%; vertical-align:middle; margin-right:.2rem}
.dot-ok{background:#b06b00} .dot-warn{background:#c25a00}

/* ── MATERIAL ──────────────────────────────── */
.muted{color:var(--muted); margin-bottom:1rem}
#mat-date{padding:.7rem 1rem; border:2px solid var(--line); border-radius:var(--r-sm); margin-bottom:1.2rem}
.mat-list{display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:.7rem}
.mat-item{background:var(--card); border-radius:var(--r-sm); padding:.8rem 1rem; box-shadow:0 2px 8px rgba(120,80,40,.06); display:flex; align-items:center; justify-content:space-between; gap:.5rem}
.mat-item.busy{opacity:.5}
.mat-tag{font-size:.7rem; font-weight:900; padding:.15rem .5rem; border-radius:100px}
.mat-tag.free{background:#d6f7ec; color:#067a5b}
.mat-tag.busy{background:#ffe0e6; color:#c2334d}

/* ── MODAL ─────────────────────────────────── */
.modal{position:fixed; inset:0; background:rgba(34,26,20,.6); display:flex; align-items:flex-start; justify-content:center; padding:2rem 1rem; z-index:90; overflow-y:auto}
.modal-card{background:#fff; border-radius:20px; width:min(620px,100%); box-shadow:0 30px 80px rgba(0,0,0,.3)}
.modal-head{display:flex; align-items:center; justify-content:space-between; padding:1.3rem 1.6rem; border-bottom:1px solid var(--line)}
.modal-head h3{font-family:'Fredoka One',cursive}
.modal-x{background:var(--bg); border:0; width:34px; height:34px; border-radius:50%; font-size:1rem; color:var(--muted)}
.modal-x:hover{background:var(--coral); color:#fff}
.form{padding:1.4rem 1.6rem}
.form label{display:block; font-weight:800; font-size:.85rem; margin-bottom:.9rem}
a.btn{text-decoration:none; display:inline-flex; align-items:center}
#pre-text{width:100%; margin-top:.3rem; padding:.85rem 1rem; border:2px solid var(--line); border-radius:var(--r-sm); font-family:inherit; font-size:.95rem; line-height:1.5; resize:vertical; background:#fff7ef}
.form input,.form select,.form textarea{
  width:100%; padding:.65rem .85rem; border:2px solid var(--line); border-radius:var(--r-sm);
  margin-top:.3rem; background:#fff;
}
.form input:focus,.form select:focus,.form textarea:focus{outline:none; border-color:var(--orange)}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:1rem}
.mat-picker{display:flex; gap:.5rem; margin-top:.3rem}
.mat-picker select{flex:1; margin-top:0}
.chips{display:flex; flex-wrap:wrap; gap:.4rem; margin-bottom:.9rem}
.chip{background:#fff0d6; color:#b06b00; padding:.3rem .4rem .3rem .7rem; border-radius:100px; font-weight:800; font-size:.82rem; display:flex; align-items:center; gap:.4rem}
.chip b{background:rgba(0,0,0,.12); border-radius:50%; width:18px; height:18px; display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:.7rem}
.conflict{background:#fff4e0; border:2px solid var(--orange); border-radius:var(--r-sm); padding:.8rem 1rem; margin-bottom:1rem; font-weight:800; color:#b85c00; font-size:.9rem}
.conflict b{display:block; margin-bottom:.2rem; color:var(--orange)}
.form-foot{display:flex; align-items:center; gap:.6rem; margin-top:.5rem}
.spacer{flex:1}

/* ── TOAST ─────────────────────────────────── */
.toast{position:fixed; bottom:1.5rem; left:50%; transform:translateX(-50%); background:var(--ink); color:#fff; padding:.8rem 1.4rem; border-radius:100px; font-weight:800; box-shadow:0 10px 30px rgba(0,0,0,.3); z-index:120; animation:toastIn .3s var(--ease)}
@keyframes toastIn{from{opacity:0; transform:translateX(-50%) translateY(20px)} to{opacity:1; transform:translateX(-50%) translateY(0)}}

/* ── RESPONSIVE ────────────────────────────── */
@media(max-width:860px){
  .app{grid-template-columns:1fr}
  .side{flex-direction:row; height:auto; position:sticky; top:0; z-index:50; padding:.7rem 1rem; align-items:center; gap:1rem; overflow-x:auto}
  .side-brand{margin-bottom:0; padding:.35rem .55rem; flex:none}
  .side-logo-img{max-width:88px}
  .side-nav{flex-direction:row; gap:.2rem}
  .side-link{font-size:.8rem; padding:.5rem .6rem; white-space:nowrap}
  .side-foot{flex-direction:row; border-top:0; padding-top:0; border-left:1px solid rgba(255,255,255,.12); padding-left:1rem}
  .side-tool{font-size:0; padding:.5rem}
  .grid2{grid-template-columns:1fr}
  .cell-mat{display:none}
}