/* =====================================================================
   PORTAL DEL DUEÑO DE LUGAR

   Usa el sistema de sitio.css (--s-*). Login centrado y una agenda de
   calendario clara: el dueño ve de un vistazo qué días están ocupados.
   ===================================================================== */

/* ---------- Login ---------- */
.ml-login{
  min-height:calc(100vh - 200px);
  display:flex; align-items:center; justify-content:center;
  padding:clamp(2rem,6vw,4rem) 1.15rem;
  background:linear-gradient(160deg, var(--s-fondo), #eef2f9);
}
.ml-login-caja{
  width:100%; max-width:24rem; background:var(--s-blanco);
  border:1px solid var(--s-linea); border-radius:var(--s-r-xl);
  box-shadow:var(--s-sh-alto); padding:2.4rem 2rem; text-align:center;
}
.ml-login-icono{
  width:64px; height:64px; margin:0 auto 1.1rem; border-radius:50%;
  background:linear-gradient(150deg, var(--s-azul-claro), var(--s-azul));
  color:#fff; display:flex; align-items:center; justify-content:center; font-size:1.5rem;
  box-shadow:0 10px 24px -8px rgba(30,45,92,.55);
}
.ml-login-caja h1{ font-size:1.5rem; font-weight:800; color:var(--s-tinta); margin:0; }
.ml-login-sub{ font-size:.9rem; color:var(--s-gris); margin:.5rem 0 1.5rem; line-height:1.5; }
.ml-login-caja form{ text-align:left; }
.ml-login-caja .s-btn{ margin-top:.4rem; }
.ml-login-pie{ font-size:.82rem; color:var(--s-gris); margin:1.3rem 0 0; }
.ml-login-pie2{ font-size:.82rem; color:var(--s-gris); margin:.4rem 0 0; }
.ml-login-caja a{ color:var(--s-azul); font-weight:600; }

.ml-error{
  display:flex; gap:.5rem; align-items:center; text-align:left;
  background:#fdeeee; border:1px solid rgba(185,28,28,.3); color:var(--s-rojo-osc);
  border-radius:11px; padding:.7rem .9rem; font-size:.85rem; margin-bottom:1rem;
}

/* ---------- Panel ---------- */
.ml-panel{ padding:clamp(2rem,5vw,3.5rem) 0; min-height:calc(100vh - 200px); }
.ml-cab{ display:flex; justify-content:space-between; align-items:center;
         gap:1rem; margin-bottom:1.5rem; flex-wrap:wrap; }
.ml-cab .s-eyebrow{ display:block; margin-bottom:.2rem; }
.ml-salir{
  display:inline-flex; align-items:center; gap:.45rem; font-size:.88rem; font-weight:600;
  color:var(--s-gris); text-decoration:none; padding:.5rem .9rem;
  border:1px solid var(--s-linea); border-radius:99px; background:var(--s-blanco);
}
.ml-salir:hover{ color:var(--s-rojo); border-color:var(--s-rojo); }

.ml-aviso{
  display:flex; gap:.6rem; align-items:center;
  background:#eaf6f0; border:1px solid rgba(15,123,79,.3); color:#0f7b4f;
  border-radius:12px; padding:.85rem 1.1rem; font-size:.9rem; margin-bottom:1.25rem;
}

.ml-vacio{ text-align:center; padding:4rem 1.5rem; color:var(--s-gris); }
.ml-vacio i{ font-size:2.5rem; color:var(--s-gris-2); }
.ml-vacio h2{ font-size:1.2rem; color:var(--s-tinta); margin:.8rem 0 .3rem; }

.ml-tabs{ display:flex; gap:.5rem; flex-wrap:wrap; margin-bottom:1.25rem; }
.ml-tabs a{
  padding:.5rem 1rem; border-radius:99px; text-decoration:none; font-size:.88rem;
  font-weight:600; color:var(--s-gris); border:1px solid var(--s-linea); background:var(--s-blanco);
}
.ml-tabs a.on{ background:var(--s-azul); color:#fff; border-color:var(--s-azul); }

.ml-lugar-cab{
  display:flex; justify-content:space-between; align-items:flex-start; gap:1rem;
  flex-wrap:wrap; margin-bottom:1.25rem;
}
.ml-lugar-cab h2{ font-size:1.35rem; font-weight:800; color:var(--s-tinta); margin:0 0 .5rem; }
.ml-chips{ display:flex; gap:.5rem; flex-wrap:wrap; }
.ml-chip{
  display:inline-flex; align-items:center; gap:.35rem; font-size:.76rem; font-weight:700;
  padding:.25rem .7rem; border-radius:99px;
}
.ml-chip.ok  { background:#eaf6f0; color:#0f7b4f; }
.ml-chip.avi { background:#fdf6e6; color:#9a6b12; }
.ml-chip.mal { background:#fdeeee; color:var(--s-rojo); }
.ml-chip.gris{ background:var(--s-fondo); color:var(--s-gris); }
.ml-editar{ font-size:.85rem; padding:.55rem 1.1rem; color:var(--s-azul) !important;
            border-color:var(--s-linea) !important; }

.ml-nota-rev{
  display:flex; gap:.6rem; align-items:center;
  background:#fdf6e6; border:1px solid rgba(216,162,31,.35); color:#7a5410;
  border-radius:12px; padding:.85rem 1.1rem; font-size:.88rem; margin-bottom:1.25rem;
}

/* ---------- Agenda / calendario ---------- */
.ml-agenda{ background:var(--s-blanco); border:1px solid var(--s-linea);
            border-radius:var(--s-r-lg); padding:1.4rem; box-shadow:var(--s-sh); }
.ml-agenda-cab{ display:flex; justify-content:space-between; align-items:center;
                gap:1rem; margin-bottom:1.1rem; flex-wrap:wrap; }
.ml-agenda-cab h3{ font-size:1.1rem; font-weight:700; color:var(--s-tinta); margin:0;
                   text-transform:capitalize; }
.ml-nav{ display:flex; gap:.4rem; align-items:center; }
.ml-nav a{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:36px; height:36px; padding:0 .7rem; border-radius:9px;
  border:1px solid var(--s-linea); background:var(--s-blanco);
  color:var(--s-tinta); text-decoration:none; font-size:.85rem; font-weight:600;
}
.ml-nav a:hover{ border-color:var(--s-azul); color:var(--s-azul); }
.ml-nav a.hoy{ font-weight:700; }

.ml-cal{ display:grid; grid-template-columns:repeat(7, minmax(0, 1fr)); gap:.45rem; }
.ml-cal-dow{ text-align:center; font-size:.72rem; font-weight:700; color:var(--s-gris-2);
             text-transform:uppercase; letter-spacing:.05em; padding-bottom:.4rem; }
.ml-cal-vacio{ min-height:82px; border-radius:12px; background:repeating-linear-gradient(
                 135deg, transparent, transparent 6px, rgba(0,0,0,.02) 6px, rgba(0,0,0,.02) 12px); }

/* Altura fija y sensata: ni cuadros gigantes en compu ni celdas
   apretadas en el teléfono. El número arriba, la etiqueta abajo, el
   candado en su esquina sin encimarse. */
.ml-cal-dia{
  position:relative; min-height:82px; min-width:0; border-radius:12px; padding:.45rem .5rem;
  border:1px solid var(--s-linea); background:var(--s-blanco);
  display:flex; flex-direction:column; gap:.15rem; overflow:hidden;
  transition:border-color .15s, box-shadow .15s;
}
.ml-cal-dia .num{
  font-size:.9rem; font-weight:700; color:var(--s-tinta);
  font-variant-numeric:tabular-nums; line-height:1;
}
.ml-cal-dia .et{
  font-size:.66rem; font-weight:700; line-height:1.25; margin-top:auto;
  padding:.15rem .4rem; border-radius:6px; align-self:flex-start;
  max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

.ml-cal-dia.libre:hover{ border-color:var(--s-azul-claro); box-shadow:var(--s-sh); }
.ml-cal-dia.evento{ background:#fef4f4; border-color:rgba(185,28,28,.3); }
.ml-cal-dia.evento .et{ color:var(--s-rojo); background:rgba(185,28,28,.1); }
.ml-cal-dia.bloqueado{ background:var(--s-fondo); border-color:var(--s-gris-2); }
.ml-cal-dia.bloqueado .et{ color:var(--s-gris); background:rgba(107,114,128,.12); }
.ml-cal-dia.pasado{ opacity:.5; }
/* Hoy, con un anillo dorado para ubicarse rápido. */
.ml-cal-dia.hoy{ border-color:var(--s-oro); box-shadow:0 0 0 2px rgba(216,162,31,.25); }

.ml-cal-acc{ position:absolute; top:.35rem; right:.35rem; margin:0; }
.ml-cal-acc button{
  width:26px; height:26px; border-radius:8px; border:0; cursor:pointer;
  background:rgba(30,45,92,.07); color:var(--s-azul); font-size:.74rem;
  display:flex; align-items:center; justify-content:center;
  transition:background .15s, transform .1s;
}
.ml-cal-acc button:hover{ background:var(--s-azul); color:#fff; }
.ml-cal-acc button:active{ transform:scale(.9); }
/* En un día bloqueado, el candado abierto va en dorado para invitar a liberarlo. */
.ml-cal-dia.bloqueado .ml-cal-acc button{ background:rgba(216,162,31,.15); color:#9a6b12; }
.ml-cal-dia.bloqueado .ml-cal-acc button:hover{ background:var(--s-oro); color:#20160a; }

.ml-leyenda{ display:flex; gap:1.2rem; flex-wrap:wrap; margin-top:1.1rem;
             font-size:.8rem; color:var(--s-gris); }
.ml-leyenda span{ display:inline-flex; align-items:center; gap:.4rem; }
.ml-leyenda .pt{ width:12px; height:12px; border-radius:4px; border:1.5px solid var(--s-linea); }
.ml-leyenda .pt.libre{ background:var(--s-blanco); }
.ml-leyenda .pt.evento{ background:#fdeeee; border-color:rgba(185,28,28,.4); }
.ml-leyenda .pt.bloqueado{ background:var(--s-fondo); border-color:var(--s-gris-2); }

.ml-agenda-ayuda{ font-size:.8rem; color:var(--s-gris); line-height:1.5; margin:.9rem 0 0;
                  display:flex; gap:.4rem; align-items:flex-start; }
.ml-agenda-ayuda i{ color:var(--s-oro); margin-top:.15rem; }

/* En celular todo se aprieta para que las 7 columnas quepan sin
   desbordar: candado chico abajo a la derecha (no arriba, para no
   pelear con el número), celdas compactas. */
@media(max-width:560px){
  .ml-agenda{ padding:.9rem .6rem; }
  .ml-cal{ gap:.25rem; }
  .ml-cal-dia, .ml-cal-vacio{ min-height:54px; }
  .ml-cal-dia{ padding:.28rem; }
  .ml-cal-dia .num{ font-size:.78rem; }
  .ml-cal-dia .et{ font-size:.52rem; padding:.08rem .25rem; border-radius:4px; }
  .ml-cal-dow{ font-size:.58rem; }
  .ml-cal-acc{ top:auto; right:.2rem; bottom:.2rem; }
  .ml-cal-acc button{ width:20px; height:20px; font-size:.6rem; border-radius:6px; }
  /* Un día con evento no tiene candado; la etiqueta puede ocupar todo. */
  .ml-cal-dia.evento .et, .ml-cal-dia.bloqueado .et{ font-size:.5rem; }
}

/* ---------------------------------------------------------------
   EDITOR DEL DUEÑO (descripción, amenidades, fotos)
   Antes "cambiar datos o fotos" solo mandaba un WhatsApp: esto lo deja
   tocar de verdad, sin pasar por nadie, para lo que no necesita ojo
   del negocio.
   --------------------------------------------------------------- */
.ml-editor{
  background:#fff; border:1px solid var(--s-linea); border-radius:var(--s-r-lg,16px);
  padding:1.5rem; margin-bottom:1.5rem;
}
.ml-editor-cab{ display:flex; justify-content:space-between; align-items:center; margin-bottom:1.25rem; }
.ml-editor-cab h3{ font-size:1.05rem; font-weight:800; margin:0; color:var(--s-tinta); }
.ml-editor-cab h3 i{ color:var(--s-oro); margin-right:.4rem; }
.ml-editor-cerrar{
  width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  color:var(--s-gris); text-decoration:none; transition:background .15s;
}
.ml-editor-cerrar:hover{ background:var(--s-fondo); }

.ml-amenidades{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:.5rem .75rem;
}
.ml-amenidades label{
  display:flex; align-items:center; gap:.5rem; font-size:.86rem; cursor:pointer;
  padding:.3rem 0;
}

.ml-fotos{ margin-top:1.5rem; padding-top:1.5rem; border-top:1px solid var(--s-linea); }
.ml-fotos-rej{ display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:.75rem; }

.ml-foto-item{
  position:relative; aspect-ratio:1; border-radius:12px; overflow:hidden;
  background:var(--s-fondo);
}
.ml-foto-item img{ width:100%; height:100%; object-fit:cover; display:block; }
.ml-foto-portada{
  position:absolute; top:.4rem; left:.4rem; background:var(--s-oro); color:var(--s-azul-osc);
  font-size:.65rem; font-weight:800; padding:.2rem .5rem; border-radius:99px;
}
.ml-foto-acc{
  position:absolute; inset:auto 0 0 0; display:flex; gap:.3rem; padding:.4rem;
  background:linear-gradient(to top, rgba(0,0,0,.6), transparent);
  opacity:0; transition:opacity .15s;
}
.ml-foto-item:hover .ml-foto-acc, .ml-foto-item:focus-within .ml-foto-acc{ opacity:1; }
.ml-foto-acc form{ flex:1; }
.ml-foto-acc button{
  width:100%; height:30px; border:none; border-radius:8px; cursor:pointer;
  background:rgba(255,255,255,.92); color:var(--s-tinta); font-size:.8rem;
  transition:background .15s;
}
.ml-foto-acc button:hover{ background:#fff; }

.ml-foto-subir label{
  aspect-ratio:1; border:2px dashed var(--s-linea); border-radius:12px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.4rem;
  color:var(--s-gris); font-size:.78rem; cursor:pointer; transition:border-color .15s, color .15s;
}
.ml-foto-subir label:hover{ border-color:var(--s-azul); color:var(--s-azul); }
.ml-foto-subir i{ font-size:1.3rem; }

.ml-editor-nota{
  margin:1.5rem 0 0; padding-top:1.25rem; border-top:1px solid var(--s-linea);
  font-size:.82rem; color:var(--s-gris);
}
.ml-editor-nota a{ color:var(--s-azul); font-weight:600; }