/* ============================================================
   CASA CALYPSO · panel de administración
   Misma paleta terrosa, pero más sobria: fondo arena, tarjetas
   blancas y barra superior (no lateral).
   ============================================================ */

:root{
  --crema:#FDF8F1;
  --arena:#F4E9DA;
  --arena-2:#EADCC8;
  --barro:#B4623C;
  --barro-osc:#96502F;
  --arcilla:#7E4128;
  --palma:#5F7D4F;
  --ocre:#C9903D;
  --rojo:#B03A2E;
  --carbon:#2C231C;
  --tinta:#4A3B30;
  --linea:rgba(126,65,40,.16);
  --sombra:0 12px 34px -20px rgba(70,40,24,.5);
  --r:14px;
}

*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:"Outfit",system-ui,sans-serif;
  background:var(--arena);color:var(--tinta);
  line-height:1.55;-webkit-font-smoothing:antialiased;
}
svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
h1,h2,h3,h4{font-family:"Fraunces",Georgia,serif;color:var(--carbon);font-weight:600;line-height:1.15}
h2{font-size:1.6rem}
h3{font-size:1.1rem}
h4{font-size:.98rem}
a{color:var(--barro)}
table{border-collapse:collapse;width:100%}

/* ---------- botones ---------- */
.btn{
  font-family:inherit;font-size:.92rem;font-weight:600;
  border:none;border-radius:10px;padding:.62rem 1.15rem;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:.45rem;
  text-decoration:none;transition:background .18s,color .18s,border-color .18s,transform .18s;
}
.btn svg{width:17px;height:17px}
.btn-s{padding:.45rem .85rem;font-size:.85rem}
.btn-p{background:var(--barro);color:#fff}
.btn-p:hover{background:var(--barro-osc)}
.btn-o{background:transparent;color:var(--arcilla);border:1.5px solid var(--linea)}
.btn-o:hover{border-color:var(--barro);color:var(--barro)}
.btn-t{background:transparent;color:var(--tinta)}
.btn-t:hover{background:rgba(126,65,40,.08)}
.btn-d{background:transparent;color:var(--rojo);border:1.5px solid rgba(176,58,46,.3)}
.btn-d:hover{background:rgba(176,58,46,.08)}
.btn:disabled{opacity:.45;cursor:not-allowed}

/* ---------- campos ---------- */
.fld{display:flex;flex-direction:column;gap:.3rem;margin-bottom:.9rem}
.fld label{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:var(--barro)}
.fld input,.fld select,.fld textarea{
  font-family:inherit;font-size:.95rem;color:var(--carbon);
  border:1.5px solid var(--linea);border-radius:10px;padding:.6rem .75rem;
  background:var(--crema);width:100%;
}
.fld textarea{resize:vertical;line-height:1.55}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:none;border-color:var(--barro);background:#fff}
.fld input[type=color]{padding:.2rem;height:42px;cursor:pointer}
.fld small{font-size:.78rem;opacity:.7}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 1rem}
.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0 1rem}

/* ---------- login ---------- */
.login{
  position:fixed;inset:0;z-index:100;
  display:flex;align-items:center;justify-content:center;padding:1.2rem;
  background:linear-gradient(150deg,var(--arcilla),var(--carbon));
}
/* sin esto, el display:flex de arriba le gana al atributo hidden
   y la capa de login se queda encima del panel tapando los clics */
.login[hidden]{display:none}
.login-card{
  background:var(--crema);border-radius:22px;padding:2.2rem;
  width:min(390px,100%);box-shadow:0 30px 70px -30px rgba(0,0,0,.6);text-align:center;
}
.login-mark{
  width:56px;height:56px;border-radius:17px;margin:0 auto 1rem;
  background:linear-gradient(140deg,var(--barro),var(--ocre));color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-family:"Fraunces",serif;font-size:1.6rem;font-weight:700;
}
.login-card h1{font-size:1.5rem}
.login-sub{font-size:.85rem;opacity:.7;margin-bottom:1.6rem}
.login-card .fld{text-align:left}
.login-card .btn{width:100%;margin-top:.4rem}
.login-err{color:var(--rojo);font-size:.86rem;font-weight:600;margin-top:.8rem}
.login-tip{font-size:.8rem;opacity:.6;margin-top:1rem}

/* ---------- barra superior ---------- */
.app[hidden]{display:none}
.top{
  position:sticky;top:0;z-index:50;
  background:var(--crema);border-bottom:1px solid var(--linea);
  display:flex;align-items:center;gap:1.2rem;
  padding:.6rem clamp(.8rem,3vw,1.8rem);
}
.top-brand{display:flex;align-items:center;gap:.65rem;flex:none}
.top-brand span{font-family:"Fraunces",serif;font-size:1.05rem;color:var(--carbon);display:flex;flex-direction:column;line-height:1.1}
.top-brand small{font-family:"Outfit",sans-serif;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;opacity:.55;font-weight:500}
.top-mark{
  width:36px;height:36px;border-radius:11px;flex:none;
  background:linear-gradient(140deg,var(--barro),var(--ocre));color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-family:"Fraunces",serif;font-weight:700;
}
.tabs{display:flex;gap:.15rem;flex:1;overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs button{
  font-family:inherit;font-size:.86rem;font-weight:600;color:var(--tinta);
  background:none;border:none;cursor:pointer;white-space:nowrap;
  padding:.5rem .8rem;border-radius:9px;
  display:flex;align-items:center;gap:.4rem;position:relative;
  transition:background .18s,color .18s;
}
.tabs button svg{width:17px;height:17px;opacity:.6}
.tabs button:hover{background:rgba(126,65,40,.07)}
.tabs button.on{background:var(--barro);color:#fff}
.tabs button.on svg{opacity:1}
.badge{
  width:7px;height:7px;border-radius:50%;background:var(--rojo);
  display:block;margin-left:.1rem;
}
.badge[hidden]{display:none}
.top-right{display:flex;gap:.4rem;align-items:center;flex:none}
.top-burger{display:none;background:none;border:none;color:var(--carbon);cursor:pointer;padding:.35rem}

/* ---------- contenido ---------- */
.main{max-width:1260px;margin:0 auto;padding:clamp(1.2rem,3vw,2rem) clamp(.8rem,3vw,1.8rem) 4rem}
.head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;
  margin-bottom:1.6rem;flex-wrap:wrap;
}
.head p{font-size:.92rem;opacity:.75;margin-top:.2rem;max-width:70ch}
#viewActions{display:flex;gap:.5rem;flex-wrap:wrap}

.card{
  background:var(--crema);border:1px solid var(--linea);border-radius:var(--r);
  padding:1.3rem;box-shadow:var(--sombra);margin-bottom:1.2rem;
}
.card > h3{margin-bottom:.3rem}
.card > h3 + p{font-size:.88rem;opacity:.75;margin-bottom:1.1rem}
.cards{display:grid;gap:1.2rem}
.cols2{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem}
.cols3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}

/* ---------- KPIs ---------- */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1rem;margin-bottom:1.4rem}
.kpi{
  background:var(--crema);border:1px solid var(--linea);border-radius:var(--r);
  padding:1.1rem 1.2rem;box-shadow:var(--sombra);position:relative;overflow:hidden;
}
.kpi::after{content:"";position:absolute;right:-18px;top:-18px;width:60px;height:60px;border-radius:50%;background:var(--arena)}
.kpi-l{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;font-weight:600;opacity:.6}
.kpi-n{font-family:"Fraunces",serif;font-size:2rem;color:var(--carbon);line-height:1.1;margin-top:.2rem;position:relative}
.kpi-x{font-size:.8rem;opacity:.7;position:relative}

/* barras por cuarto */
.barras{display:flex;flex-direction:column;gap:.9rem}
.barra-fila{display:grid;grid-template-columns:120px 1fr auto;gap:.8rem;align-items:center;font-size:.88rem}
.barra-track{display:block;height:10px;border-radius:99px;background:var(--arena-2);overflow:hidden}
/* display:block es obligatorio: en un span en línea el ancho y el alto se ignoran
   y la barra de color no se ve */
.barra-fill{display:block;height:100%;border-radius:99px}

/* ---------- tablas ---------- */
.tabla-wrap{overflow-x:auto;border-radius:var(--r);border:1px solid var(--linea);background:var(--crema)}
table th{
  text-align:left;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;
  font-weight:600;color:var(--barro);padding:.8rem 1rem;border-bottom:1px solid var(--linea);
  white-space:nowrap;background:var(--arena);
}
table td{padding:.8rem 1rem;border-bottom:1px solid var(--linea);font-size:.9rem;vertical-align:middle}
table tr:last-child td{border-bottom:none}
table tr:hover td{background:rgba(180,98,60,.04)}
.cod{font-family:ui-monospace,"Courier New",monospace;font-weight:700;color:var(--barro);white-space:nowrap}
.punto{width:11px;height:11px;border-radius:50%;display:inline-block;margin-right:.45rem;vertical-align:-1px}
.chip{
  font-size:.74rem;font-weight:700;letter-spacing:.04em;padding:.2rem .6rem;
  border-radius:99px;display:inline-block;white-space:nowrap;
}
.chip.pendiente{background:rgba(201,144,61,.18);color:#8A5F16}
.chip.confirmada{background:rgba(95,125,79,.18);color:#3F5734}
.chip.hospedada{background:rgba(47,110,133,.16);color:#245A6D}
.chip.cerrada{background:rgba(74,59,48,.12);color:var(--tinta)}
.chip.cancelada{background:rgba(176,58,46,.14);color:var(--rojo)}
.acciones{display:flex;gap:.3rem;justify-content:flex-end}
.icon-btn{
  background:none;border:1px solid var(--linea);border-radius:8px;
  width:32px;height:32px;display:flex;align-items:center;justify-content:center;
  cursor:pointer;color:var(--tinta);transition:border-color .18s,color .18s;
}
.icon-btn:hover{border-color:var(--barro);color:var(--barro)}
.icon-btn.del:hover{border-color:var(--rojo);color:var(--rojo)}
.vacio{text-align:center;padding:2.6rem 1rem;opacity:.65;font-size:.92rem}

/* filtros */
.filtros{display:flex;gap:.6rem;flex-wrap:wrap;margin-bottom:1rem;align-items:center}
.filtros .fld{margin-bottom:0}
.filtros input,.filtros select{min-width:150px}

/* ---------- calendario (una fila por cuarto) ---------- */
.cal-top{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1.1rem;flex-wrap:wrap}
.cal-mes{font-family:"Fraunces",serif;font-size:1.25rem;color:var(--carbon)}
.cal-nav{display:flex;gap:.4rem}
.cal-scroll{overflow-x:auto;border:1px solid var(--linea);border-radius:var(--r);background:var(--crema)}
.cal-grid{min-width:760px}
.cal-row{display:grid;border-bottom:1px solid var(--linea)}
.cal-row:last-child{border-bottom:none}
.cal-lab{
  padding:.55rem .8rem;font-size:.82rem;font-weight:600;
  border-right:1px solid var(--linea);display:flex;align-items:center;gap:.4rem;
  background:var(--arena);position:sticky;left:0;z-index:2;
}
.cal-dia{
  text-align:center;font-size:.72rem;padding:.45rem .1rem;
  border-right:1px solid rgba(126,65,40,.08);
}
.cal-head .cal-dia{background:var(--arena);font-weight:700;color:var(--barro)}
.cal-head .cal-dia small{display:block;font-size:.6rem;opacity:.6;font-weight:500;text-transform:uppercase}
.cal-dia.hoy{box-shadow:inset 0 -3px 0 var(--ocre)}
.cal-dia.fin{background:rgba(126,65,40,.045)}
.cal-cel{
  height:38px;border-right:1px solid rgba(126,65,40,.08);
  display:flex;align-items:center;justify-content:center;cursor:default;position:relative;
}
.cal-cel.ocu{cursor:pointer}
.cal-cel .marca{
  position:absolute;inset:5px 0;opacity:.85;
}
.cal-cel.ini .marca{border-radius:99px 0 0 99px;left:5px}
.cal-cel.fin2 .marca{border-radius:0 99px 99px 0;right:5px}
.cal-leyenda{display:flex;gap:1.2rem;flex-wrap:wrap;margin-top:.9rem;font-size:.82rem;opacity:.8}
.cal-leyenda span{display:flex;align-items:center;gap:.4rem}

/* ---------- listas editables ---------- */
.lista{display:flex;flex-direction:column;gap:.6rem;margin-bottom:1rem}
.item{
  background:var(--arena);border-radius:10px;padding:.7rem .9rem;
  display:flex;align-items:center;gap:.7rem;
}
.item-txt{flex:1;font-size:.9rem}
.item-txt b{display:block;font-size:.95rem;color:var(--carbon)}
.item-txt small{opacity:.75}
.tags{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:.8rem}
.tag{
  background:var(--arena);border-radius:99px;padding:.3rem .5rem .3rem .8rem;
  font-size:.84rem;display:flex;align-items:center;gap:.35rem;
}
.tag button{background:none;border:none;cursor:pointer;color:var(--arcilla);display:flex;padding:0;opacity:.6}
.tag button:hover{opacity:1;color:var(--rojo)}
.tag button svg{width:14px;height:14px}
.add-row{display:flex;gap:.5rem}
.add-row input{flex:1}

/* nota de dónde van las fotos */
.foto-nota{
  background:rgba(201,144,61,.12);border:1px dashed rgba(201,144,61,.5);
  border-radius:10px;padding:.75rem .9rem;font-size:.85rem;margin-bottom:1rem;
}
.foto-nota code{
  font-family:ui-monospace,"Courier New",monospace;background:rgba(255,255,255,.7);
  padding:.1rem .35rem;border-radius:5px;font-size:.82rem;
}

/* ---------- modal ---------- */
.modal{position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;padding:1rem}
.modal[hidden]{display:none}
.modal-veil{position:absolute;inset:0;background:rgba(44,35,28,.6)}
.modal-box{
  position:relative;background:var(--crema);border-radius:18px;
  width:min(560px,100%);max-height:92vh;display:flex;flex-direction:column;
  box-shadow:0 30px 70px -30px rgba(0,0,0,.6);
}
.modal-head{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1.2rem 1.4rem;border-bottom:1px solid var(--linea);
}
.modal-x{background:none;border:none;cursor:pointer;color:var(--tinta);display:flex}
.modal-body{padding:1.4rem;overflow:auto}
.modal-foot{
  padding:1rem 1.4rem;border-top:1px solid var(--linea);
  display:flex;gap:.6rem;justify-content:flex-end;flex-wrap:wrap;
}

/* aviso de guardado */
.saved{
  position:fixed;bottom:1.4rem;left:50%;transform:translateX(-50%);
  background:var(--palma);color:#fff;font-weight:600;font-size:.9rem;
  padding:.6rem 1.4rem;border-radius:99px;z-index:150;
  box-shadow:var(--sombra);
}
.saved[hidden]{display:none}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1000px){
  .cols3{grid-template-columns:1fr 1fr}
}
@media (max-width:860px){
  .top{flex-wrap:wrap;gap:.6rem}
  .top-brand{flex:1}
  .top-burger{display:block}
  .top-right .btn{display:none}
  .tabs{
    order:3;width:100%;
    max-height:0;overflow:hidden;transition:max-height .3s ease;
    flex-direction:column;gap:.1rem;
  }
  .tabs.open{max-height:520px;overflow:auto;padding-bottom:.5rem}
  .tabs button{width:100%;justify-content:flex-start;padding:.7rem .8rem}
  .top-right .btn{display:none}
  .cols2,.cols3,.grid2,.grid3{grid-template-columns:1fr}
  .head{align-items:flex-start;flex-direction:column}
}
@media (max-width:560px){
  .kpis{grid-template-columns:1fr 1fr}
  .kpi-n{font-size:1.6rem}
  .barra-fila{grid-template-columns:90px 1fr auto;font-size:.82rem}
  .main{padding-bottom:3rem}
}