/* =====================================================
   HOTEL.CSS · ALOJAMIENTOS PREMIUM FINAL
===================================================== */

#view-hotels{
  padding-top:4px;
  padding-bottom:110px;
}

/* CABECERA */
#view-hotels .section-title{
  display:grid !important;
  grid-template-columns:62px 1fr !important;
  align-items:center !important;
  gap:16px !important;
  margin:4px 0 18px !important;
}

#view-hotels .section-title > span{
  width:58px !important;
  height:58px !important;
  border-radius:18px !important;
  background:rgba(255,255,255,.94) !important;
  border:1px solid rgba(22,55,69,.16) !important;
  box-shadow:0 12px 28px rgba(22,55,69,.12) !important;
}

#view-hotels .section-title h2{
  font-family:"Caveat",cursive !important;
  font-size:clamp(3rem,5vw,4.4rem) !important;
  line-height:.9 !important;
  font-weight:700 !important;
  color:#123949 !important;
}

#view-hotels .section-title p{
  font-family:"Inter",system-ui,sans-serif !important;
  color:#4f6670 !important;
  font-size:1rem !important;
}

/* BOTÓN AÑADIR */
.add-hotel-section{
  margin:0 0 18px !important;
}

#addHotelBtn{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  height:42px !important;
  min-height:42px !important;
  padding:0 18px !important;
  border-radius:16px !important;
  background:linear-gradient(135deg,#123949,#0f5b73) !important;
  color:#fff8e8 !important;
  border:none !important;
  box-shadow:0 12px 24px rgba(22,55,69,.22) !important;
  font-family:"Inter",system-ui,sans-serif !important;
  font-size:.86rem !important;
  font-weight:900 !important;
}

/* DASHBOARD */
.hotel-dashboard{
  display:grid !important;
  grid-template-columns:repeat(5,1fr) !important;
  gap:14px !important;
  margin-bottom:22px !important;
}

.hotel-dashboard article{
  position:relative !important;
  overflow:hidden !important;
  min-height:92px !important;
  padding:16px !important;
  border-radius:24px !important;
  background:rgba(255,255,255,.90) !important;
  border:1px solid rgba(22,55,69,.16) !important;
  box-shadow:0 14px 30px rgba(22,55,69,.11) !important;
  backdrop-filter:blur(10px) !important;
}

.hotel-dashboard article::before{
  content:"";
  position:absolute;
  left:16px;
  right:16px;
  top:0;
  height:4px;
  border-radius:0 0 20px 20px;
  background:linear-gradient(90deg,#0f5b73,#d9c47a);
}

.hotel-dashboard strong{
  display:block !important;
  font-family:"Caveat",cursive !important;
  font-size:2rem !important;
  line-height:1 !important;
  color:#123949 !important;
  font-weight:700 !important;
}

.hotel-dashboard span{
  display:block !important;
  margin-top:6px !important;
  font-family:"Inter",system-ui,sans-serif !important;
  color:#5d6f76 !important;
  font-size:.76rem !important;
  font-weight:900 !important;
}

/* CARD HOTEL */
.hotel-card-pro{
  position:relative !important;
  overflow:hidden !important;
  padding:22px 24px !important;
  border-radius:30px !important;
  background:rgba(255,255,255,.92) !important;
  border:1px solid rgba(22,55,69,.16) !important;
  box-shadow:0 16px 36px rgba(22,55,69,.12) !important;
  backdrop-filter:blur(10px) !important;
}

.hotel-card-pro::before{
  content:"";
  position:absolute;
  left:0;
  top:20px;
  bottom:20px;
  width:7px;
  border-radius:0 20px 20px 0;
  background:linear-gradient(180deg,#0f5b73,#d9c47a);
}

.hotel-card-pro::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 18% 20%,rgba(255,214,140,.06),transparent 42%),
    radial-gradient(circle at 82% 72%,rgba(119,176,198,.07),transparent 44%);
  opacity:.72;
}

/* HEADER HOTEL */
.hotel-top{
  position:relative !important;
  z-index:2 !important;
  display:grid !important;
  grid-template-columns:54px 1fr 44px !important;
  align-items:flex-start !important;
  gap:16px !important;
}

.hotel-icon{
  width:48px !important;
  height:48px !important;
  border-radius:16px !important;
  display:grid !important;
  place-items:center !important;
  background:rgba(255,255,255,.82) !important;
  color:#123949 !important;
  border:1px solid rgba(22,55,69,.16) !important;
  box-shadow:0 8px 18px rgba(22,55,69,.10) !important;
  font-size:1.45rem !important;
}

.hotel-title h3{
  font-family:"Caveat",cursive !important;
  font-size:clamp(2rem,3vw,2.75rem) !important;
  line-height:.95 !important;
  font-weight:700 !important;
  color:#123949 !important;
}

.hotel-title p{
  margin-top:4px !important;
  font-family:"Inter",system-ui,sans-serif !important;
  color:#5d6f76 !important;
  font-size:.92rem !important;
}

.hotel-fav{
  width:42px !important;
  height:42px !important;
  border-radius:50% !important;
  background:rgba(255,255,255,.84) !important;
  border:1px solid rgba(22,55,69,.16) !important;
  box-shadow:0 8px 18px rgba(22,55,69,.10) !important;
}

.hotel-fav.active{
  background:#f6d577 !important;
}

/* PILLS */
.hotel-pills,
.hotel-links{
  position:relative !important;
  z-index:2 !important;
  display:flex !important;
  flex-wrap:wrap !important;
  gap:8px !important;
  margin-top:14px !important;
}

.hotel-pills span{
  display:inline-flex !important;
  align-items:center !important;
  min-height:28px !important;
  padding:0 11px !important;
  border-radius:999px !important;
  background:rgba(255,255,255,.82) !important;
  border:1px solid rgba(22,55,69,.14) !important;
  box-shadow:0 8px 18px rgba(22,55,69,.08) !important;
  font-family:"Inter",system-ui,sans-serif !important;
  font-size:.78rem !important;
  font-weight:900 !important;
  color:#0f5b73 !important;
}

/* TEXTO */
.hotel-address,
.hotel-notes{
  position:relative !important;
  z-index:2 !important;
  font-family:"Inter",system-ui,sans-serif !important;
  color:#4f6670 !important;
  font-size:.96rem !important;
  line-height:1.45 !important;
}

.hotel-address{
  margin-top:14px !important;
}

.hotel-notes{
  margin-top:12px !important;
  padding:12px 14px !important;
  border-radius:18px !important;
  background:rgba(255,255,255,.70) !important;
  border:1px solid rgba(22,55,69,.12) !important;
}

/* LINKS */
.hotel-link{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  height:38px !important;
  padding:0 15px !important;
  border-radius:15px !important;
  background:rgba(255,255,255,.82) !important;
  color:#123949 !important;
  border:1px solid rgba(22,55,69,.16) !important;
  box-shadow:0 8px 18px rgba(22,55,69,.08) !important;
  font-family:"Inter",system-ui,sans-serif !important;
  font-size:.82rem !important;
  font-weight:900 !important;
}

/* ACCIONES */
.hotel-actions{
  position:relative !important;
  z-index:2 !important;
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:10px !important;
  margin-top:18px !important;
}

.hotel-actions button{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  height:40px !important;
  min-height:40px !important;
  border-radius:15px !important;
  font-family:"Inter",system-ui,sans-serif !important;
  font-size:.82rem !important;
  font-weight:900 !important;
  line-height:1 !important;
}

.edit-hotel-btn{
  background:linear-gradient(135deg,#123949,#0f5b73) !important;
  color:#fff8e8 !important;
  border:none !important;
  box-shadow:0 12px 24px rgba(22,55,69,.22) !important;
}

.delete-hotel-btn{
  background:rgba(255,255,255,.76) !important;
  color:#b94747 !important;
  border:1px solid rgba(185,71,71,.18) !important;
}

/* MOBILE */
@media(max-width:900px){
  .hotel-dashboard{
    grid-template-columns:repeat(3,1fr) !important;
  }
}

@media(max-width:760px){
  #view-hotels .section-title{
    grid-template-columns:52px 1fr !important;
  }

  #view-hotels .section-title h2{
    font-size:2.6rem !important;
  }

  .hotel-dashboard{
    grid-template-columns:repeat(2,1fr) !important;
  }

  .hotel-card-pro{
    padding:18px !important;
    border-radius:26px !important;
  }

  .hotel-top{
    grid-template-columns:46px 1fr 40px !important;
    gap:12px !important;
  }

  .hotel-icon{
    width:42px !important;
    height:42px !important;
    font-size:1.25rem !important;
  }

  .hotel-title h3{
    font-size:2rem !important;
  }

  .hotel-actions{
    grid-template-columns:1fr !important;
  }
}

@media(max-width:420px){
  .hotel-dashboard{
    grid-template-columns:1fr !important;
  }
}
/* =====================================================
   HOTEL · CIERRE VISUAL + MODAL PREMIUM
===================================================== */

/* Más separación y tarjetas más completas */
#view-hotels .card-list{
  gap:26px !important;
}

#view-hotels .hotel-card-pro{
  margin-bottom:26px !important;
  padding:24px 26px !important;
}

#view-hotels .hotel-title p::before{
  content:"📍 ";
}

#view-hotels .hotel-notes{
  background:rgba(255,248,232,.82) !important;
  border:1px solid rgba(217,196,122,.35) !important;
  border-radius:20px !important;
  padding:16px 18px !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7), 0 8px 18px rgba(22,55,69,.06) !important;
}

#view-hotels .hotel-notes::before{
  content:"Nota del alojamiento";
  display:block;
  margin-bottom:6px;
  font-family:"Inter",system-ui,sans-serif;
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-weight:900;
  color:#7a5d2e;
}

/* Icono más fino */
#view-hotels .hotel-icon{
  width:44px !important;
  height:44px !important;
  flex-basis:44px !important;
  border-radius:15px !important;
  font-size:1.28rem !important;
  background:rgba(255,255,255,.76) !important;
}

/* Estrella más premium */
#view-hotels .hotel-fav{
  background:rgba(255,255,255,.66) !important;
  backdrop-filter:blur(8px) !important;
  border:1px solid rgba(22,55,69,.14) !important;
}

#view-hotels .hotel-fav.active{
  background:linear-gradient(145deg,#fff5c8,#f1c95f) !important;
  box-shadow:0 10px 24px rgba(172,124,33,.22) !important;
}

/* Botones más elegantes */
#view-hotels .hotel-actions{
  grid-template-columns:1fr 1fr !important;
  gap:12px !important;
}

#view-hotels .hotel-actions button{
  height:38px !important;
  min-height:38px !important;
  border-radius:14px !important;
  font-size:.8rem !important;
}

/* Dashboard con más vida */
#view-hotels .hotel-dashboard article{
  text-align:center !important;
}

#view-hotels .hotel-dashboard article span{
  margin-left:0 !important;
}

#view-hotels .hotel-dashboard strong{
  margin-left:0 !important;
}

/* MODAL EDITAR · PREMIUM */
.edit-modal{
  background:rgba(10,43,56,.34) !important;
  backdrop-filter:blur(16px) !important;
}

.edit-modal-card{
  width:min(680px,calc(100vw - 28px)) !important;
  max-height:calc(100vh - 34px) !important;
  border-radius:34px !important;
  padding:26px !important;

  background:
    linear-gradient(145deg,rgba(255,255,255,.94),rgba(255,244,218,.90)) !important;
  border:1px solid rgba(22,55,69,.16) !important;
  box-shadow:0 34px 90px rgba(10,43,56,.34) !important;
}

.edit-modal-head{
  align-items:flex-start !important;
  margin-bottom:18px !important;
}

.edit-modal-icon{
  width:52px !important;
  height:52px !important;
  border-radius:18px !important;
  display:grid !important;
  place-items:center !important;
  background:rgba(255,255,255,.82) !important;
  border:1px solid rgba(22,55,69,.14) !important;
  box-shadow:0 10px 22px rgba(22,55,69,.10) !important;
  font-size:1.45rem !important;
}

.edit-modal-head h2{
  font-family:"Caveat",cursive !important;
  font-size:2.6rem !important;
  line-height:.9 !important;
  color:#123949 !important;
}

.edit-modal-head p{
  font-family:"Inter",system-ui,sans-serif !important;
  color:#4f6670 !important;
  font-size:.94rem !important;
}

.edit-modal-close{
  background:rgba(255,255,255,.76) !important;
  border:1px solid rgba(185,71,71,.22) !important;
  color:#b94747 !important;
  box-shadow:0 8px 18px rgba(22,55,69,.08) !important;
}

/* Campos */
.edit-field{
  gap:7px !important;
}

.edit-field label{
  font-family:"Inter",system-ui,sans-serif !important;
  font-size:.78rem !important;
  letter-spacing:.04em !important;
  font-weight:900 !important;
  color:#123949 !important;
}

.edit-field input,
.edit-field textarea,
.edit-field select{
  min-height:48px !important;
  border-radius:17px !important;
  background:rgba(255,255,255,.82) !important;
  border:1px solid rgba(22,55,69,.14) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75) !important;

  font-family:"Inter",system-ui,sans-serif !important;
  font-size:.96rem !important;
  color:#123949 !important;
}

.edit-field textarea{
  min-height:96px !important;
}

/* Botones inferiores */
.edit-modal-actions{
  position:sticky !important;
  bottom:-26px !important;
  margin:18px -26px -26px !important;
  padding:16px 26px !important;

  background:rgba(255,248,232,.92) !important;
  backdrop-filter:blur(12px) !important;
  border-top:1px solid rgba(22,55,69,.12) !important;
}

.edit-modal-cancel,
.edit-modal-save{
  height:46px !important;
  min-height:46px !important;
  border-radius:16px !important;
  font-size:.9rem !important;
}

.edit-modal-save{
  background:linear-gradient(135deg,#123949,#0f5b73) !important;
  color:#fff8e8 !important;
}

.edit-modal-cancel{
  background:rgba(255,255,255,.75) !important;
  color:#123949 !important;
  border:1px solid rgba(22,55,69,.14) !important;
}

/* móvil */
@media(max-width:760px){
  .edit-modal-card{
    padding:20px !important;
    border-radius:28px !important;
  }

  .edit-modal-head h2{
    font-size:2.25rem !important;
  }

  .edit-modal-actions{
    margin:16px -20px -20px !important;
    padding:14px 20px !important;
  }
}
/* =====================================================
   HOTEL · CIERRE DEFINITIVO
===================================================== */

/* Botón principal */
#addHotelBtn{
  height:38px !important;
  min-height:38px !important;
  padding:0 16px !important;
  border-radius:15px !important;
  font-size:.82rem !important;
}

#addHotelBtn::before{
  content:"＋ ";
}

/* Dashboard más compacto */
#view-hotels .hotel-dashboard article{
  min-height:82px !important;
  padding:14px 12px !important;
}

#view-hotels .hotel-dashboard strong{
  font-size:2.15rem !important;
}

#view-hotels .hotel-dashboard span{
  font-size:.72rem !important;
}

/* Cards más compactas */
#view-hotels .hotel-card-pro{
  padding:20px 24px !important;
  margin-bottom:22px !important;
}

#view-hotels .hotel-icon{
  width:44px !important;
  height:44px !important;
  flex-basis:44px !important;
  border-radius:15px !important;
  font-size:1.25rem !important;
}

#view-hotels .hotel-title h3{
  font-size:clamp(2rem,3vw,2.65rem) !important;
}

#view-hotels .hotel-title p{
  color:#64777e !important;
  font-size:.9rem !important;
}

#view-hotels .hotel-fav{
  width:38px !important;
  height:38px !important;
  font-size:1rem !important;
}

#view-hotels .hotel-pills{
  margin-top:12px !important;
}

#view-hotels .hotel-pills span{
  min-height:26px !important;
  padding:0 10px !important;
  font-size:.74rem !important;
}

#view-hotels .hotel-address{
  margin-top:12px !important;
  font-size:.94rem !important;
}

#view-hotels .hotel-notes{
  margin-top:12px !important;
  padding:13px 16px !important;
}

#view-hotels .hotel-notes::before{
  content:"PARA ESTE VIAJE" !important;
}

#view-hotels .hotel-actions{
  margin-top:14px !important;
  gap:12px !important;
}

#view-hotels .hotel-actions button{
  height:38px !important;
  min-height:38px !important;
  border-radius:14px !important;
}

/* Modal premium final */
.edit-modal-card{
  display:flex !important;
  flex-direction:column !important;
  overflow:hidden !important;
}

.edit-modal-head{
  position:sticky !important;
  top:0 !important;
  z-index:5 !important;
  background:linear-gradient(145deg,rgba(255,255,255,.96),rgba(255,244,218,.94)) !important;
  padding-bottom:14px !important;
}

.edit-modal-form{
  overflow-y:auto !important;
  padding-right:4px !important;
}

#editModalFields{
  gap:9px !important;
}

.edit-field{
  gap:5px !important;
}

.edit-field input,
.edit-field textarea,
.edit-field select{
  min-height:44px !important;
  border-radius:16px !important;
  background:linear-gradient(180deg,#fffefb,#fff7e9) !important;
}

.edit-field textarea{
  min-height:82px !important;
}

.edit-modal-actions{
  grid-template-columns:.8fr 1.2fr !important;
}

.edit-modal-cancel,
.edit-modal-save{
  height:44px !important;
  min-height:44px !important;
}

/* Móvil */
@media(max-width:760px){
  #view-hotels .hotel-dashboard{
    gap:10px !important;
  }

  #view-hotels .hotel-card-pro{
    padding:18px !important;
  }

  .edit-modal-card{
    max-height:calc(100vh - 24px) !important;
  }
}
/* =====================================================
   HOTEL · CIERRE VISUAL SEGURO
===================================================== */

body #view-hotels{
  padding-bottom:140px !important;
}

/* Dashboard intacto, solo más compacto */
body #view-hotels .hotel-dashboard{
  display:grid !important;
  grid-template-columns:repeat(5,1fr) !important;
  gap:14px !important;
  margin-bottom:22px !important;
}

body #view-hotels .hotel-dashboard article{
  min-height:82px !important;
  padding:14px 12px !important;
  border-radius:24px !important;
}

body #view-hotels .hotel-dashboard strong{
  font-size:1.9rem !important;
}

body #view-hotels .hotel-dashboard span{
  font-size:.72rem !important;
  letter-spacing:.14em !important;
}

/* Solo las cards de alojamiento */
body #view-hotels .hotel-card-pro{
  margin-bottom:22px !important;
  padding:0 !important;
  border-radius:30px !important;
  overflow:hidden !important;
  background:#fff !important;
}

/* Cabecera diferenciada */
body #view-hotels .hotel-card-pro .hotel-top{
  display:grid !important;
  grid-template-columns:50px 1fr 42px !important;
  gap:14px !important;
  align-items:start !important;
  padding:18px 20px 14px !important;
  border-bottom:1px solid rgba(22,55,69,.10) !important;
  background:linear-gradient(90deg,#fff8e8,#ffffff) !important;
}

body #view-hotels .hotel-card-pro:nth-of-type(even) .hotel-top{
  background:linear-gradient(90deg,#eef9fc,#ffffff) !important;
}

body #view-hotels .hotel-icon{
  width:44px !important;
  height:44px !important;
  border-radius:16px !important;
  font-size:1.25rem !important;
  background:#fff !important;
}

body #view-hotels .hotel-title h3{
  font-size:clamp(1.9rem,3vw,2.45rem) !important;
  line-height:.92 !important;
}

body #view-hotels .hotel-title p{
  font-size:.92rem !important;
}

/* Contenido */
body #view-hotels .hotel-pills,
body #view-hotels .hotel-address,
body #view-hotels .hotel-notes,
body #view-hotels .hotel-links,
body #view-hotels .hotel-actions{
  margin-left:20px !important;
  margin-right:20px !important;
}

body #view-hotels .hotel-pills{
  margin-top:14px !important;
}

body #view-hotels .hotel-pills span{
  min-height:26px !important;
  padding:0 10px !important;
  font-size:.72rem !important;
}

body #view-hotels .hotel-notes{
  margin-top:12px !important;
  padding:14px 16px !important;
  border-radius:20px !important;
  background:#fff8e8 !important;
}

body #view-hotels .hotel-actions{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:10px !important;
  margin-top:16px !important;
  margin-bottom:18px !important;
}

body #view-hotels .hotel-actions button{
  height:36px !important;
  min-height:36px !important;
  border-radius:14px !important;
  font-size:.78rem !important;
}

/* Responsive */
@media(max-width:900px){
  body #view-hotels .hotel-dashboard{
    grid-template-columns:repeat(3,1fr) !important;
  }
}

@media(max-width:760px){
  body #view-hotels .hotel-dashboard{
    grid-template-columns:repeat(2,1fr) !important;
  }

  body #view-hotels .hotel-card-pro .hotel-top{
    grid-template-columns:46px 1fr 38px !important;
  }

  body #view-hotels .hotel-title h3{
    font-size:2rem !important;
  }

  body #view-hotels .hotel-actions{
    grid-template-columns:1fr !important;
  }
}