/* =====================================================
   MORE.CSS · PANEL MÁS PREMIUM
===================================================== */

#view-more{
  padding-top:4px;
  padding-bottom:120px;
}

/*=====================================================
CABECERA
=====================================================*/

#view-more .section-title{
  display:grid;
  grid-template-columns:62px 1fr;
  align-items:center;
  gap:16px;
  margin-bottom:22px;
}

#view-more .section-title>span{
  width:58px;
  height:58px;
  display:grid;
  place-items:center;
  border-radius:18px;
  background:rgba(255,255,255,.94);
  border:1px solid rgba(22,55,69,.16);
  box-shadow:0 12px 28px rgba(22,55,69,.12);
  font-size:1.6rem;
}

#view-more .section-title h2{
  font-family:"Caveat",cursive;
  font-size:clamp(2.7rem,4.5vw,4rem);
  line-height:.9;
  color:#123949;
}

#view-more .section-title p{
  font-family:"Inter",sans-serif;
  color:#5d7077;
}

/*=====================================================
GRID
=====================================================*/

.more-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:20px;
}

/*=====================================================
CARDS
=====================================================*/

.more-card{
  position:relative;
  overflow:hidden;

  display:flex;
  flex-direction:column;
  justify-content:space-between;
  align-items:center;
  text-align:center;

  min-height:220px;

  padding:26px;

  border-radius:30px;

  background:rgba(255,255,255,.92);

  border:1px solid rgba(22,55,69,.14);

  backdrop-filter:blur(10px);

  box-shadow:0 16px 38px rgba(22,55,69,.12);

  transition:.28s;
}

.more-card::before{

  content:"";

  position:absolute;

  left:0;

  top:22px;

  bottom:22px;

  width:7px;

  border-radius:0 20px 20px 0;

  background:linear-gradient(
  180deg,
  #0f5b73,
  #dcc16d);

}

.more-card::after{

  content:"";

  position:absolute;

  inset:0;

  pointer-events:none;

  background:

  radial-gradient(circle at 20% 20%,rgba(255,214,140,.08),transparent 45%),

  radial-gradient(circle at 80% 75%,rgba(119,176,198,.07),transparent 45%);

}

.more-card>*{
  position:relative;
  z-index:2;
}

.more-card:hover{

  transform:translateY(-5px);

  box-shadow:0 24px 46px rgba(22,55,69,.16);

}

/*=====================================================
ICONO
=====================================================*/

.more-icon{

  width:72px;

  height:72px;

  display:grid;

  place-items:center;

  border-radius:22px;

  background:linear-gradient(
  145deg,
  #fff7e8,
  #ecd28b);

  border:1px solid rgba(22,55,69,.12);

  box-shadow:0 12px 24px rgba(22,55,69,.10);

  font-size:2rem;

  margin-bottom:18px;

}

/*=====================================================
TEXTOS
=====================================================*/

.more-card h3{

  font-family:"Caveat",cursive;

  font-size:2rem;

  color:#123949;

  margin-bottom:8px;

}

.more-card p{

  font-family:"Inter",sans-serif;

  color:#60747b;

  font-size:.96rem;

  line-height:1.5;

}

/*=====================================================
BOTÓN
=====================================================*/

.more-card .small-btn{

  margin-top:20px;

  height:42px;

  padding:0 20px;

  border-radius:16px;

  border:none;

  background:linear-gradient(
  135deg,
  #123949,
  #0f5b73);

  color:white;

  font-family:"Inter",sans-serif;

  font-size:.86rem;

  font-weight:800;

  box-shadow:0 10px 22px rgba(22,55,69,.18);

}

/*=====================================================
ANIMACIÓN
=====================================================*/

.more-card{

  animation:fadeMore .35s ease;

}

@keyframes fadeMore{

from{

opacity:0;

transform:translateY(14px);

}

to{

opacity:1;

transform:none;

}

}

/*=====================================================
MOBILE
=====================================================*/

@media(max-width:760px){

.more-grid{

grid-template-columns:1fr;

gap:16px;

}

.more-card{

min-height:185px;

padding:22px;

}

.more-icon{

width:60px;

height:60px;

font-size:1.8rem;

}

.more-card h3{

font-size:1.8rem;

}

}
/* =====================================================
   MORE · CORRECCIÓN FINAL COLOR / CRISTAL
===================================================== */

#view-more .more-card{
  background:rgba(255,255,255,.92) !important;
  border:1px solid rgba(22,55,69,.15) !important;
  box-shadow:0 18px 42px rgba(22,55,69,.12) !important;
  backdrop-filter:blur(12px) !important;
}

#view-more .more-card::after{
  background:
    radial-gradient(circle at 18% 18%,rgba(119,176,198,.06),transparent 42%),
    radial-gradient(circle at 82% 78%,rgba(255,214,140,.045),transparent 44%) !important;
  opacity:.65 !important;
}

#view-more .more-card::before{
  background:linear-gradient(180deg,#0f5b73,#d9c47a) !important;
}

#view-more .more-icon{
  background:rgba(255,255,255,.86) !important;
  border:1px solid rgba(22,55,69,.14) !important;
  box-shadow:0 10px 22px rgba(22,55,69,.10) !important;
}

#view-more .more-card h3{
  color:#123949 !important;
  font-family:"Caveat",cursive !important;
  font-size:2.15rem !important;
  font-weight:700 !important;
}

#view-more .more-card p{
  color:#4f6670 !important;
  font-family:"Inter",system-ui,sans-serif !important;
  font-size:.96rem !important;
  font-weight:500 !important;
}

/* Evita que el fondo se vea marrón dentro de las cards */
#view-more .more-card{
  background-image:
    linear-gradient(135deg,rgba(255,255,255,.96),rgba(255,255,255,.86)) !important;
}

/* Ajuste del grid para que respire mejor */
#view-more .more-grid{
  gap:18px !important;
}

/* Menos altura para que no parezcan bloques pesados */
#view-more .more-card{
  min-height:190px !important;
  padding:24px 22px !important;
}

/* Icono más limpio */
#view-more .more-icon{
  width:62px !important;
  height:62px !important;
  border-radius:20px !important;
  margin-bottom:14px !important;
  font-size:1.85rem !important;
}

/* Tablet */
@media(max-width:900px){
  #view-more .more-grid{
    grid-template-columns:repeat(2,1fr) !important;
  }
}

/* Móvil */
@media(max-width:760px){
  #view-more .more-grid{
    grid-template-columns:1fr !important;
  }

  #view-more .more-card{
    min-height:160px !important;
  }
}
/* =====================================================
   MORE · BLANCO REAL SIN MARRÓN
===================================================== */

body #view-more .more-card{
  background:#ffffff !important;
  background-image:linear-gradient(135deg,#ffffff,#f9fbfa) !important;
  opacity:1 !important;
  border:1px solid rgba(22,55,69,.14) !important;
  box-shadow:0 16px 34px rgba(22,55,69,.12) !important;
  backdrop-filter:none !important;
}

body #view-more .more-card::after{
  background:none !important;
  opacity:0 !important;
}

body #view-more .more-card::before{
  background:linear-gradient(180deg,#0f5b73,#d9c47a) !important;
  opacity:1 !important;
}

body #view-more .more-icon{
  background:#ffffff !important;
  background-image:linear-gradient(145deg,#ffffff,#f6faf9) !important;
  border:1px solid rgba(22,55,69,.14) !important;
  box-shadow:0 10px 20px rgba(22,55,69,.10) !important;
}

body #view-more .more-card h3{
  color:#123949 !important;
}

body #view-more .more-card p{
  color:#405860 !important;
}

/* Más separación y aspecto menos bloque amarillo */
body #view-more .more-grid{
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr)) !important;
  gap:16px !important;
}

body #view-more .more-card{
  min-height:168px !important;
  padding:22px 18px !important;
}
/* MORE · ICONO CABECERA SIN MARRÓN */

body #view-more .section-title > span{
  background:#ffffff !important;
  background-image:linear-gradient(145deg,#ffffff,#f6faf9) !important;
  border:1px solid rgba(22,55,69,.14) !important;
  box-shadow:0 10px 22px rgba(22,55,69,.10) !important;
}
/* =====================================================
   MORE INTERNAS · RESERVAS / DOCUMENTOS / CHECKLIST / TOP / PENDIENTES
===================================================== */

#view-bookings,
#view-documents,
#view-checklist,
#view-top,
#view-pending{
  padding-top:4px;
  padding-bottom:125px;
}

/* Cabeceras internas */
#view-bookings .section-title,
#view-documents .section-title,
#view-checklist .section-title,
#view-top .section-title,
#view-pending .section-title{
  display:grid !important;
  grid-template-columns:62px 1fr !important;
  align-items:center !important;
  gap:16px !important;
  margin:4px 0 22px !important;
}

#view-bookings .section-title > span,
#view-documents .section-title > span,
#view-checklist .section-title > span,
#view-top .section-title > span,
#view-pending .section-title > span{
  width:58px !important;
  height:58px !important;
  display:grid !important;
  place-items:center !important;
  border-radius:18px !important;
  background:#fff !important;
  border:1px solid rgba(22,55,69,.14) !important;
  box-shadow:0 10px 22px rgba(22,55,69,.10) !important;
}

#view-bookings .section-title h2,
#view-documents .section-title h2,
#view-checklist .section-title h2,
#view-top .section-title h2,
#view-pending .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-bookings .section-title p,
#view-documents .section-title p,
#view-checklist .section-title p,
#view-top .section-title p,
#view-pending .section-title p{
  font-family:"Inter",system-ui,sans-serif !important;
  color:#4f6670 !important;
}

/* Formularios internos */
#view-bookings .booking-form,
#view-documents .booking-form,
#view-pending .booking-form,
#view-checklist .comic-form{
  background:#fff !important;
  border:1px solid rgba(22,55,69,.14) !important;
  box-shadow:0 16px 36px rgba(22,55,69,.10) !important;
  border-radius:28px !important;
  padding:20px !important;
  gap:12px !important;
  backdrop-filter:none !important;
}

#view-bookings input,
#view-bookings select,
#view-documents input,
#view-documents select,
#view-checklist input,
#view-checklist select,
#view-pending input,
#view-pending select{
  height:52px !important;
  border-radius:18px !important;
  background:#fffaf0 !important;
  border:1px solid rgba(22,55,69,.14) !important;
  color:#123949 !important;
  font-family:"Inter",system-ui,sans-serif !important;
  font-size:.96rem !important;
}

#view-bookings button,
#view-documents button,
#view-checklist button,
#view-top button,
#view-pending button{
  border-radius:16px !important;
  font-family:"Inter",system-ui,sans-serif !important;
  font-weight:900 !important;
}

/* Botones principales */
#view-bookings .booking-form button,
#view-documents .booking-form button,
#view-checklist .comic-form button,
#view-pending .booking-form button{
  min-height:48px !important;
  background:linear-gradient(135deg,#123949,#0f5b73) !important;
  color:#fff8e8 !important;
  border:none !important;
  box-shadow:0 12px 24px rgba(22,55,69,.18) !important;
}

/* Estados vacíos */
#view-bookings .info-card,
#view-documents .info-card,
#view-top .info-card,
#view-pending .info-card,
#view-checklist .note-card{
  background:#fff !important;
  background-image:linear-gradient(135deg,#ffffff,#f9fbfa) !important;
  border:1px solid rgba(22,55,69,.14) !important;
  border-radius:28px !important;
  box-shadow:0 16px 36px rgba(22,55,69,.10) !important;
  backdrop-filter:none !important;
  overflow:hidden !important;
}

#view-bookings .info-card::after,
#view-documents .info-card::after,
#view-top .info-card::after,
#view-pending .info-card::after,
#view-checklist .note-card::after{
  display:none !important;
}

#view-bookings .info-card h3,
#view-documents .info-card h3,
#view-top .info-card h3,
#view-pending .info-card h3,
#view-checklist .note-card h4{
  font-family:"Caveat",cursive !important;
  font-size:2rem !important;
  color:#123949 !important;
}

#view-bookings .info-card p,
#view-documents .info-card p,
#view-top .info-card p,
#view-pending .info-card p,
#view-checklist .note-card p{
  font-family:"Inter",system-ui,sans-serif !important;
  color:#4f6670 !important;
}

/* Documentos */
#view-documents .document-group-title,
#view-pending .pending-group-title{
  background:#fff !important;
  border:1px solid rgba(22,55,69,.14) !important;
  border-radius:24px !important;
  padding:16px 18px !important;
  box-shadow:0 12px 28px rgba(22,55,69,.09) !important;
}

#view-documents .document-group-title h3,
#view-pending .pending-group-title h3{
  font-family:"Caveat",cursive !important;
  font-size:2rem !important;
  color:#123949 !important;
}

#view-documents .document-card-head span,
#view-top .top-icon,
#view-pending .pending-card-head span{
  background:#fff !important;
  border:1px solid rgba(22,55,69,.14) !important;
  box-shadow:0 8px 18px rgba(22,55,69,.08) !important;
}

/* Checklist */
#view-checklist .checklist-card{
  min-height:120px !important;
}

#view-checklist .checklist-items{
  gap:10px !important;
}

#view-checklist .checklist-item{
  background:#fff !important;
  border:1px solid rgba(22,55,69,.12) !important;
  border-radius:18px !important;
  padding:12px 14px !important;
  box-shadow:0 8px 18px rgba(22,55,69,.06) !important;
}

#view-checklist .checklist-item input{
  width:22px !important;
  height:22px !important;
  accent-color:#0f5b73 !important;
}

#view-checklist .checklist-item span{
  font-family:"Inter",system-ui,sans-serif !important;
  color:#123949 !important;
  font-weight:700 !important;
}

#view-checklist .checklist-item.done{
  background:#eef8f4 !important;
}

#view-checklist .checklist-item.done span{
  color:#6c7d82 !important;
  opacity:.7 !important;
}

/* Botón volver */
.back-more-btn{
  min-height:44px !important;
  padding:0 18px !important;
  border-radius:16px !important;
  background:#fff !important;
  border:1px solid rgba(22,55,69,.14) !important;
  color:#123949 !important;
  box-shadow:0 10px 22px rgba(22,55,69,.08) !important;
  font-family:"Inter",system-ui,sans-serif !important;
  font-weight:900 !important;
  margin-top:14px !important;
}

/* Modales familias/personas más blancos */
#editFamiliesModal .setup-card,
#editPeopleModal .setup-card{
  background:#fff !important;
  background-image:linear-gradient(135deg,#ffffff,#f9fbfa) !important;
  border:1px solid rgba(22,55,69,.14) !important;
  box-shadow:0 28px 80px rgba(10,43,56,.25) !important;
}

#editFamiliesModal .setup-header h2,
#editPeopleModal .setup-header h2{
  font-family:"Caveat",cursive !important;
  font-size:2.3rem !important;
  color:#123949 !important;
}

#editFamiliesModal .setup-header p,
#editPeopleModal .setup-header p{
  font-family:"Inter",system-ui,sans-serif !important;
  color:#4f6670 !important;
}

#editFamiliesModal input,
#editPeopleModal input{
  background:#fffaf0 !important;
  border:1px solid rgba(22,55,69,.14) !important;
  border-radius:18px !important;
  color:#123949 !important;
  font-family:"Inter",system-ui,sans-serif !important;
}

/* Mobile */
@media(max-width:760px){
  #view-bookings .section-title h2,
  #view-documents .section-title h2,
  #view-checklist .section-title h2,
  #view-top .section-title h2,
  #view-pending .section-title h2{
    font-size:2.65rem !important;
  }

  #view-bookings .booking-form,
  #view-documents .booking-form,
  #view-pending .booking-form{
    grid-template-columns:1fr !important;
  }
}
/* =====================================================
   MORE · CIERRE VISUAL FINAL PRO
===================================================== */

body #view-more{
  padding-bottom:150px !important;
}

body #view-more .more-grid{
  display:grid !important;
  grid-template-columns:repeat(5,minmax(0,1fr)) !important;
  gap:16px !important;
  align-items:stretch !important;
}

body #view-more .more-card{
  min-height:150px !important;
  padding:18px 16px !important;
  border-radius:26px !important;
  display:grid !important;
  grid-template-rows:auto 1fr auto !important;
  align-items:center !important;
  justify-items:center !important;
  background:#fff !important;
  box-shadow:0 14px 30px rgba(22,55,69,.10) !important;
}

body #view-more .more-card::before{
  top:18px !important;
  bottom:18px !important;
  width:6px !important;
}

body #view-more .more-icon{
  width:52px !important;
  height:52px !important;
  border-radius:17px !important;
  font-size:1.55rem !important;
  margin:0 0 10px !important;
}

body #view-more .more-card h3{
  font-size:1.8rem !important;
  line-height:.95 !important;
  margin:0 0 6px !important;
}

body #view-more .more-card p{
  font-size:.86rem !important;
  line-height:1.25 !important;
  margin:0 !important;
}

/* Colores suaves por tipo */
body #view-more .more-card:nth-child(1)::before{background:linear-gradient(180deg,#d9675b,#f1c079) !important;}
body #view-more .more-card:nth-child(2)::before{background:linear-gradient(180deg,#4d8ab4,#8bc9d8) !important;}
body #view-more .more-card:nth-child(3)::before{background:linear-gradient(180deg,#4c8d68,#b7d88a) !important;}
body #view-more .more-card:nth-child(4)::before{background:linear-gradient(180deg,#d9aa39,#f3d88d) !important;}
body #view-more .more-card:nth-child(5)::before{background:linear-gradient(180deg,#d94f45,#f0b56f) !important;}
body #view-more .more-card:nth-child(6)::before{background:linear-gradient(180deg,#3c9b65,#d9c47a) !important;}
body #view-more .more-card:nth-child(7)::before{background:linear-gradient(180deg,#0f5b73,#67b8c9) !important;}
body #view-more .more-card:nth-child(8)::before{background:linear-gradient(180deg,#7a6db8,#67b8c9) !important;}
body #view-more .more-card:nth-child(9)::before{background:linear-gradient(180deg,#4d7fa8,#d9c47a) !important;}
body #view-more .more-card:nth-child(10)::before{background:linear-gradient(180deg,#5c7c8a,#d9c47a) !important;}
body #view-more .more-card:nth-child(11)::before{background:linear-gradient(180deg,#b98b2d,#f3d18b) !important;}
body #view-more .more-card:nth-child(12)::before{background:linear-gradient(180deg,#0f5b73,#d9c47a) !important;}

/* Tablet */
@media(max-width:1100px){
  body #view-more .more-grid{
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  }
}

/* Tablet estrecha */
@media(max-width:900px){
  body #view-more .more-grid{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  }

  body #view-more .more-card{
    min-height:145px !important;
  }
}

/* Móvil */
@media(max-width:760px){
  body #view-more .more-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:12px !important;
  }

  body #view-more .more-card{
    min-height:132px !important;
    padding:16px 12px !important;
    border-radius:22px !important;
  }

  body #view-more .more-icon{
    width:46px !important;
    height:46px !important;
    font-size:1.35rem !important;
  }

  body #view-more .more-card h3{
    font-size:1.55rem !important;
  }

  body #view-more .more-card p{
    font-size:.78rem !important;
  }
}
/* =====================================================
   MORE · MICRO CIERRE FINAL ICONOS
===================================================== */

body #view-more .more-card{
  min-height:130px !important;
  padding:20px 18px !important;
  transition:transform .22s ease, box-shadow .22s ease !important;
}

body #view-more .more-card:hover,
body #view-more .more-card:active{
  transform:translateY(-3px) !important;
  box-shadow:0 18px 40px rgba(25,55,75,.16) !important;
}

body #view-more .more-icon{
  width:50px !important;
  height:50px !important;
  font-size:1.35rem !important;
  margin-bottom:8px !important;
}

/* Color de icono por módulo */
body #view-more .more-card:nth-child(1) .more-icon{ color:#d9675b !important; }
body #view-more .more-card:nth-child(2) .more-icon{ color:#4d8ab4 !important; }
body #view-more .more-card:nth-child(3) .more-icon{ color:#4c8d68 !important; }
body #view-more .more-card:nth-child(4) .more-icon{ color:#d9aa39 !important; }
body #view-more .more-card:nth-child(5) .more-icon{ color:#d94f45 !important; }
body #view-more .more-card:nth-child(6) .more-icon{ color:#3c9b65 !important; }
body #view-more .more-card:nth-child(7) .more-icon{ color:#0f5b73 !important; }
body #view-more .more-card:nth-child(8) .more-icon{ color:#7a6db8 !important; }
body #view-more .more-card:nth-child(9) .more-icon{ color:#4d7fa8 !important; }
body #view-more .more-card:nth-child(10) .more-icon{ color:#0f8f94 !important; }
body #view-more .more-card:nth-child(11) .more-icon{ color:#c37a2c !important; }
body #view-more .more-card:nth-child(12) .more-icon{ color:#4c9a83 !important; }

body #view-more .more-card h3{
  font-size:1.68rem !important;
}

body #view-more .more-card p{
  font-size:.82rem !important;
}