*{box-sizing:border-box}
:root{
--bg:#f4f0e8;--card:#fffdf8;--ink:#2d2923;--muted:#665f56;--line:#d7cebd;--accent:#8e6d48;
--pending:#d9a13c;--approved:#5c7b48;--danger:#a94e47;
--admin-bg:#f4f0e8;--admin-card:#fffdf9;--admin-ink:#2d2923;--admin-muted:#71695f;
--admin-line:#ded5c7;--admin-accent:#8e6d48;--admin-green:#5d7b49;--admin-green-bg:#e2eddc;
--admin-amber:#a66f17;--admin-amber-bg:#f4e3bd;--admin-red:#a34d47;--admin-red-bg:#f2dfdc;
}
body{margin:0;background:var(--bg);color:var(--ink);font-family:system-ui,-apple-system,"Segoe UI",sans-serif}

/* =========================
   FRONTEND RESERVAS
   ========================= */
header{
  height:78px;
  background:#eee8de;
  border-bottom:1px solid #d9d0c1;
  display:flex;
  align-items:center;
  padding:0 max(20px,calc((100% - 1120px)/2));
}
header strong{font-size:18px}
.wrap{
  width:min(1120px,calc(100% - 36px));
  margin:auto
}
.hero{
  padding:55px 0 30px;
  max-width:760px
}
.hero p{
  font-size:12px;
  letter-spacing:.2em;
  color:var(--accent);
  font-weight:800
}
.hero h1{
  font:400 clamp(40px,5vw,64px)/1 Georgia,serif;
  margin:8px 0 16px
}
.hero span{
  color:var(--muted);
  font-size:17px;
  line-height:1.6
}
.grid{
  display:grid;
  grid-template-columns:1.45fr .55fr;
  gap:20px
}
.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:18px;
  box-shadow:0 12px 40px rgba(0,0,0,.04)
}
.calbox,.summary,.booking{padding:25px}
.toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between
}
.toolbar h2{
  font:400 28px Georgia,serif;
  text-transform:capitalize
}
.toolbar button{
  width:42px;height:42px;
  border-radius:50%;
  border:1px solid var(--line);
  background:#fff;
  cursor:pointer
}
.week,.calendar{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:7px
}
.week{
  text-align:center;
  font-size:12px;
  color:#777;
  margin:15px 0 8px
}
.day{
  aspect-ratio:1;
  min-height:58px;
  border:1px solid transparent;
  border-radius:14px;
  background:transparent;
  position:relative;
  display:grid;
  place-items:center;
  overflow:hidden
}
.day:not(:disabled){cursor:pointer}
.day:disabled{cursor:not-allowed}
.day.pending{
  background:#f1dfba;
  color:#72551d
}
.day.confirmed{
  background:#dce8d4;
  color:#39502d
}
.day.sel{
  background:var(--accent);
  color:#fff
}
.day .lab{
  position:absolute;
  bottom:3px;
  left:2px;
  right:2px;
  font-size:7px;
  line-height:1.05;
  font-weight:900;
  text-align:center
}
.legend{
  margin-top:16px;
  font-size:13px;
  color:#777;
  line-height:1.7
}
.pend{color:#b47d22}
.appr{color:#5c7b48}
.summary{height:max-content}
.summary div{
  display:flex;
  justify-content:space-between;
  gap:16px;
  padding:15px 0;
  border-bottom:1px solid #ddd
}
.booking{margin:20px 0 55px}
.booking h2{
  font:400 30px Georgia,serif
}
.room{
  display:flex;
  align-items:flex-start;
  gap:14px;
  border:1px solid var(--line);
  padding:18px;
  margin:12px 0;
  background:#fff;
  cursor:pointer
}
.room:has(input:checked){
  border-color:#333;
  box-shadow:0 0 0 1px #333 inset
}
.room input{
  width:34px;height:34px;
  margin:0 8px 0 0
}
.color{
  width:28px;height:28px;
  border-radius:50%;
  margin-top:3px;
  flex:0 0 auto;
  border:1px solid rgba(0,0,0,.12)
}
.copy{flex:1}
.copy strong{font-size:22px}
.copy em{
  float:right;
  font-style:normal;
  color:#637748;
  font-size:18px
}
.copy small{
  display:block;
  color:var(--muted);
  font-size:16px;
  margin-top:5px
}
.fields{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  margin-top:28px
}
.fields label{
  font-size:13px;
  color:var(--muted)
}
.fields input{
  display:block;
  width:100%;
  padding:12px;
  margin-top:5px;
  border:1px solid var(--line);
  border-radius:9px;
  background:#fff;
  font-size:15px
}
.pool{
  display:block;
  margin:22px 0
}
button#reserve{
  width:100%;
  padding:14px;
  border:0;
  border-radius:10px;
  background:var(--accent);
  color:#fff;
  font-weight:800;
  cursor:pointer
}
button#reserve:disabled{
  opacity:.45;
  cursor:not-allowed
}
.ok{
  background:#e4f2e6;
  color:#36543a;
  padding:13px;
  margin-top:13px;
  border-radius:10px
}
.err{
  background:#f7dfdc;
  color:#7a3d37;
  padding:13px;
  margin-top:13px;
  border-radius:10px
}

/* =========================
   LOGIN ADMIN
   ========================= */
.admin-login-page{
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:24px;
  background:radial-gradient(circle at top left,#f7f3ec 0,#f4f0e8 45%,#eee7dc 100%)
}
.admin-login-card{
  width:min(440px,100%);
  background:var(--admin-card);
  border:1px solid var(--admin-line);
  border-radius:20px;
  padding:36px;
  box-shadow:0 22px 70px rgba(64,45,28,.10)
}
.admin-login-icon{
  width:58px;height:58px;
  border-radius:16px;
  background:#eee6da;
  display:grid;place-items:center;
  font-size:27px;
  margin-bottom:18px
}
.admin-kicker{
  margin:0 0 8px;
  color:var(--admin-accent);
  font-size:11px;
  font-weight:900;
  letter-spacing:.19em
}
.admin-login-card h1{
  margin:0 0 12px;
  font:400 38px/1.05 Georgia,serif
}
.admin-login-person{
  color:var(--admin-muted);
  line-height:1.55;
  margin-bottom:24px
}
.admin-login-card label{
  display:block;
  font-size:13px;
  font-weight:700;
  color:var(--admin-muted)
}
.admin-login-card input{
  width:100%;
  margin-top:7px;
  padding:13px 14px;
  font-size:16px;
  border:1px solid var(--admin-line);
  border-radius:10px;
  background:white
}
.admin-login-btn{
  width:100%;
  margin-top:18px;
  padding:14px 18px;
  border:0;
  border-radius:10px;
  background:var(--admin-accent);
  color:white;
  font-weight:850;
  font-size:15px;
  cursor:pointer
}

/* =========================
   DASHBOARD ADMIN
   ========================= */
.admin-dashboard-page{min-height:100vh;background:var(--admin-bg)}
.admin-dashboard{
  width:min(1320px,calc(100% - 40px));
  margin:0 auto;
  padding:48px 0 70px
}
.admin-topbar{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px;
  margin-bottom:28px
}
.admin-topbar h1{
  margin:0;
  font:400 48px/1 Georgia,serif
}
.admin-subtitle{
  margin:10px 0 0;
  color:var(--admin-muted)
}
.admin-logout-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  padding:0 16px;
  border:1px solid var(--admin-line);
  border-radius:10px;
  background:white;
  color:var(--admin-ink);
  text-decoration:none;
  font-weight:750;
  box-shadow:0 5px 16px rgba(0,0,0,.03)
}
.admin-alert{
  padding:14px 16px;
  border-radius:11px;
  margin-bottom:20px;
  font-weight:700
}
.admin-alert-success{
  color:#38552f;
  background:#e4efe0;
  border:1px solid #cadcc3
}
.admin-alert-error{
  color:#813e39;
  background:#f5e3e0;
  border:1px solid #e8c8c4
}
.admin-stat-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
  margin-bottom:22px
}
.admin-stat-card{
  min-height:110px;
  background:var(--admin-card);
  border:1px solid var(--admin-line);
  border-radius:16px;
  padding:22px;
  display:flex;
  align-items:center;
  gap:16px;
  box-shadow:0 10px 32px rgba(49,36,24,.04)
}
.admin-stat-card .stat-dot{
  width:15px;height:15px;
  border-radius:50%;
  flex:0 0 auto
}
.admin-stat-card strong{
  display:block;
  font-size:31px;
  line-height:1;
  margin-bottom:7px
}
.admin-stat-card span:not(.stat-dot){
  display:block;
  color:var(--admin-muted);
  font-size:14px;
  font-weight:650
}
.stat-pending .stat-dot{background:#d6a13a}
.stat-approved .stat-dot{background:#66854e}
.stat-cancelled .stat-dot{background:#b25b54}
.admin-panel-card{
  background:var(--admin-card);
  border:1px solid var(--admin-line);
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 14px 42px rgba(49,36,24,.05)
}
.admin-panel-heading{
  padding:22px 24px;
  border-bottom:1px solid var(--admin-line)
}
.admin-panel-heading h2{
  margin:0 0 5px;
  font:400 27px Georgia,serif
}
.admin-panel-heading p{
  margin:0;
  color:var(--admin-muted);
  font-size:14px
}
.admin-table-wrap{overflow-x:auto}
.admin-table{
  width:100%;
  border-collapse:collapse;
  min-width:1050px
}
.admin-table thead th{
  padding:13px 17px;
  text-align:left;
  color:#675f55;
  background:#f2ede5;
  border-bottom:1px solid var(--admin-line);
  font-size:12px;
  letter-spacing:.035em;
  text-transform:uppercase
}
.admin-table tbody td{
  padding:17px;
  border-bottom:1px solid #e8e1d6;
  vertical-align:top;
  font-size:14px
}
.admin-table tbody tr:last-child td{border-bottom:0}
.admin-table tbody tr:hover{background:#fcfaf5}
.admin-table small{
  display:block;
  color:var(--admin-muted);
  margin-top:4px;
  line-height:1.35
}
.booking-code{font-size:15px;letter-spacing:.04em}
.date-arrow{display:inline-block;color:#9b9185;padding:0 4px}
.rooms-text{display:block;max-width:280px;line-height:1.45}
.admin-status{
  display:inline-block;
  padding:6px 10px;
  border-radius:999px;
  font-size:10px;
  line-height:1;
  font-weight:900;
  letter-spacing:.06em
}
.status-pending{color:#815911;background:var(--admin-amber-bg)}
.status-confirmed{color:#3d5a30;background:var(--admin-green-bg)}
.status-cancelled{color:#81413b;background:var(--admin-red-bg)}
.admin-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin:0
}
.admin-actions button{
  border:0;
  border-radius:8px;
  min-height:35px;
  padding:0 11px;
  color:white;
  font-size:12px;
  font-weight:850;
  cursor:pointer;
  box-shadow:0 3px 9px rgba(0,0,0,.08)
}
.btn-approve{background:var(--admin-green)}
.btn-cancel{background:var(--admin-red)}
.no-actions{color:#aaa}
.admin-empty{
  padding:45px 25px;
  text-align:center;
  color:var(--admin-muted)
}

/* =========================
   RESPONSIVE
   ========================= */
@media(max-width:900px){
  .admin-stat-grid{grid-template-columns:1fr}
  .admin-dashboard{width:min(100% - 24px,1320px);padding-top:28px}
  .admin-topbar{align-items:flex-end}
  .admin-topbar h1{font-size:40px}
}
@media(max-width:800px){
  .grid,.fields{grid-template-columns:1fr}
  .day{min-height:46px}
}
@media(max-width:620px){
  .admin-topbar{display:block}
  .admin-logout-btn{margin-top:18px}
  .admin-login-card{padding:26px}
  .copy em{float:none;display:block;margin-top:5px}
}