:root{
  --bg:#fffdf8;
  --card:#ffffff;
  --accent:#ff3b30; /* vibrant red (was warm orange) */
  --accent-2:#00b894; /* vibrant green/teal (more vivid) */
  --muted:#4f5a55;
  --glass: rgba(255,255,255,0.85);
  --shadow: 0 14px 36px rgba(8,16,10,0.08);
  font-family: "Poppins", Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  color-scheme: light;
}

*{box-sizing:border-box}
html,body,#app{height:100%}
body{
  margin:0;
  background:linear-gradient(180deg,#fef9f4, #f1fbf9 60%);
  color:#0f1a16;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  display:flex;
  align-items:stretch;
  justify-content:center;
  padding:12px;
  min-height:100vh;
}

/* container */
main#app{
  width:100%;
  max-width:980px;
  background:var(--bg);
  border-radius:18px;
  box-shadow:var(--shadow);
  padding:14px;
  display:flex;
  flex-direction:column;
  gap:14px;
  border: 1px solid rgba(30,40,30,0.03);
}

/* Topbar */
.topbar{
  display:flex;
  gap:12px;
  align-items:center;
  padding:10px;
  justify-content:space-between;
}
.logo{
  width:120px;
  height:120px;
  border-radius:12px;
  object-fit:cover;
  flex:0 0 120px;
  box-shadow: 0 8px 20px rgba(12,28,20,0.06);
}
.brand{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.title{
  font-weight:800;
  font-size:2.4rem;
  color:var(--accent-2);
  letter-spacing:0.2px;
}
.subtitle{
  color:var(--muted);
  font-size:0.88rem;
}
/* ADJUSTED: push all topbar action links down by 3cm */
.top-actions{
  display:flex;
  gap:10px;
  align-items:center;
  flex-shrink:0;
  /* Allow wrapping so buttons can form two rows and gain breathing room */
  flex-wrap:wrap;
  justify-content:flex-end;
  margin-top: 3cm;
}

/* Make action buttons take about half the row so they naturally form two lines on wider screens */
.top-actions .cta{
  flex: 1 1 calc(50% - 12px);
  max-width: calc(50% - 12px);
  min-width:120px;
}

/* Restore single-row behavior on narrow screens but keep spacing */
@media (max-width:720px){
  .top-actions .cta{
    flex: 0 1 auto;
    max-width: none;
  }
}

/* Move the "Registro de niñera" button 150% lower (was 28px -> ~70px) */
/* Updated: shift 300% to the right using transform so layout stays responsive */
#registerBtn{
  transform: none;
  margin-top:0;
  transition:transform 180ms ease, box-shadow 180ms ease;
  will-change: transform;
  border-radius:10px;
  padding:10px 16px;
}

/* Buttons - friendlier */
.cta{
  background:transparent;
  border:2px solid transparent;
  color:var(--accent-2);
  padding:10px 14px;
  border-radius:12px;
  font-weight:800;
  min-width:110px;
  height:48px;
  box-shadow: 0 8px 18px rgba(0,0,0,0.05);
}
.cta.alt{
  background:linear-gradient(90deg,var(--accent),#ff6b4f);
  color:white;
  border-color:transparent;
  box-shadow: 0 14px 30px rgba(255,59,48,0.14);
}

/* Hero */
.hero{
  background:linear-gradient(180deg, rgba(255,255,255,0.9), rgba(255,255,255,0.85));
  border-radius:14px;
  padding:14px;
  display:flex;
  flex-direction:column;
  gap:10px;
  border:1px solid rgba(200,230,220,0.6);
}
.hero h1{margin:0;font-size:1.25rem; color: #083022;}
.muted{color:var(--muted);font-size:0.95rem}
.cards{
  display:flex;
  gap:12px;
  margin-top:8px;
}
.card{
  background: linear-gradient(180deg, #ffffff, #fffaf6);
  border-radius:14px;
  padding:12px;
  flex:1;
  min-width:0;
  box-shadow: 0 10px 28px rgba(26,38,28,0.04);
  border: 1px solid rgba(230,240,235,0.8);
  transition:transform 180ms ease, box-shadow 180ms ease;
}
.card:hover{ transform: translateY(-6px) scale(1.01); box-shadow: 0 18px 40px rgba(18,40,30,0.08); }
.card h3{margin:0 0 6px 0;font-size:1.02rem; color:#163a2f}
.meta{margin-top:10px;font-weight:700;color:var(--accent)}

/* Contact */
.contact{
  display:flex;
  gap:14px;
  align-items:stretch;
}
.contact-left{
  flex:1;
  min-width:0;
  background: linear-gradient(180deg, rgba(52,195,163,0.06), rgba(255,107,53,0.03));
  padding:12px;
  border-radius:12px;
  border:1px solid rgba(40,70,60,0.03);
}
.contact-left h2{margin:0 0 6px 0; color:var(--accent-2)}
.contact-form{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.contact-form input,
.contact-form textarea,
.contact-form select,
.booking-form input,
.booking-form select{
  padding:12px;
  border-radius:12px;
  border:1px solid #e6ece4;
  background:linear-gradient(180deg,#fff,#fefffd);
  font-size:0.98rem;
  outline:none;
  transition:border-color 150ms, box-shadow 150ms;
}
.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus,
.booking-form input:focus,
.booking-form select:focus{
  border-color: rgba(52,195,163,0.6);
  box-shadow: 0 6px 18px rgba(52,195,163,0.08);
}
.contact-form textarea{min-height:88px; resize:none}
.btn{padding:12px 14px;border-radius:12px;border:1px solid #d7e5d6;background:#fff; min-height:46px}
.primary{background:linear-gradient(90deg,var(--accent-2),#00a378);color:white;border-color:transparent;font-weight:800; box-shadow: 0 12px 30px rgba(0,184,148,0.12)}

/* Sheet (bottom modal) */
.sheet{
  position:fixed;
  left:8px;right:8px;
  bottom:-100%;
  margin:0 auto;
  width:calc(100% - 16px);
  max-width:980px;
  transition:bottom 260ms cubic-bezier(.2,.9,.25,1);
  z-index:60;
  padding:12px;
  pointer-events:none;
}
.sheet[aria-hidden="false"]{
  bottom:18px;
  pointer-events:auto;
}
.sheet-body{
  background:linear-gradient(180deg,#fff,#fffef9);
  border-radius:16px;
  padding:14px;
  box-shadow:0 30px 60px rgba(10,15,10,0.12);
  border:1px solid rgba(230,240,235,0.8);
}
.sheet-handle{
  width:46px;height:6px;border-radius:6px;background:linear-gradient(90deg,#e9f7f3,#fff0ea);margin:8px auto 12px auto;
}
.booking-form label{display:block; font-size:0.92rem; color:#1b352d; margin-bottom:6px}
.sheet-actions{display:flex; gap:8px; justify-content:flex-end; margin-top:8px}

/* informational note inside sheets */
.info-note{
  background: linear-gradient(180deg,#fffef6,#f0fff8);
  border:1px solid rgba(30,80,70,0.12);
  padding:14px 16px;
  border-radius:12px;
  color:var(--muted);
  font-size:0.98rem;
  line-height:1.35;
  box-shadow: 0 10px 28px rgba(6,18,12,0.06);
  display:flex;
  gap:10px;
  align-items:flex-start;
  border-left:6px solid var(--accent-2);
}
.info-note strong{ color:var(--accent-2); margin-right:8px; font-weight:800; }

/* File inputs - friendly */
input[type="file"]{
  background: linear-gradient(180deg,#fff,#fcfffb);
  padding:10px;
  border-radius:12px;
}

/* Map container styling */
#mapContainer{
  width:100%;
  border-bottom-left-radius:16px;
  border-bottom-right-radius:16px;
  overflow:hidden;
}

/* Toast */
.toast{
  position:fixed;
  left:50%;
  transform:translateX(-50%);
  bottom:22px;
  background:linear-gradient(90deg,#1b1b1b,#0b0b0b);
  color:white;
  padding:12px 18px;
  border-radius:999px;
  display:inline-block;
  opacity:0;
  transition:opacity 220ms, transform 220ms;
  z-index:80;
}
.toast.show{opacity:1; transform: translateX(-50%) translateY(-8px)}

/* Responsive: single screen fit for mobile */
@media (max-height:740px){
  .cards{gap:8px}
  .contact{flex-direction:column}
  .sheet-body{max-height:72vh; overflow:auto}
}

/* Touch targets */
button, input, select, textarea {touch-action:manipulation}

/* Show hand cursor for interactive controls and links */
button, .btn, .cta, a, .profile-thumb, .profile-thumb img, .yc-day, .card, .profile-card {
  cursor: pointer;
}

/* Small screens adjustments */
@media (max-width:720px){
  main#app{ border-radius:12px; padding:10px; }
  .topbar{align-items:flex-start; gap:8px; }
  .logo{ width:96px; height:96px; }
  .title{ font-size:1.9rem; }
  .top-actions{ gap:8px; flex-wrap:wrap; }
  .cards{flex-direction:column}
  .contact{flex-direction:column}
  .top-actions{flex-direction:row}
  .title{font-size:2.7rem}
}

/* Approved profiles window */
.profiles-window{
  background: linear-gradient(180deg,#ffffff,#f8fffb);
  border-radius:12px;
  padding:12px;
  border:1px solid rgba(220,235,225,0.7);
  display:flex;
  flex-direction:column;
  gap:8px;
}
.profiles-header{display:flex;flex-direction:column;gap:4px}
.profiles-list{
  display:flex;
  gap:10px;
  overflow:auto;
  padding:6px 2px;
}
.profile-card{
  background:linear-gradient(180deg,#fff,#fcfffb);
  border-radius:12px;
  padding:8px;
  min-width:160px;
  max-width:220px;
  box-shadow: 0 8px 20px rgba(18,40,30,0.04);
  border:1px solid rgba(220,235,225,0.8);
  display:flex;
  flex-direction:column;
  gap:8px;
  align-items:flex-start;
}
.profile-thumb{
  width:100%;
  height:55px; /* reduced 50% from 110px */
  border-radius:8px;
  overflow:hidden;
  background:#f6f6f6;
  flex:0 0 55px;
}
.profile-thumb img{width:100%;height:100%;object-fit:cover}
.profile-name{font-weight:700;color:#163a2f}
.profile-meta{font-size:0.9rem;color:var(--muted)}

/* ensure mobile single-row wrap */
@media (max-width:720px){
  .profiles-list{gap:8px}
  .profile-card{min-width:140px;max-width:170px;padding:8px}
}

/* small extra styles for profile details */
.profile-price{font-weight:800;color:var(--accent);margin-top:4px}
.profile-services{color:#0f2b22;background:linear-gradient(180deg,rgba(52,195,163,0.04),transparent);padding:6px;border-radius:8px;border:1px solid rgba(30,80,70,0.04)}
.profile-availability{color:var(--muted)}

/* Profile modal */
.profile-modal{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  z-index:100;
}
.profile-modal[aria-hidden="false"]{ display:flex; }
.profile-modal-backdrop{
  position:absolute; inset:0; background:rgba(6,12,8,0.45); backdrop-filter:blur(4px);
}
.profile-modal-body{
  position:relative;
  width:calc(100% - 36px);
  max-width:900px;
  border-radius:14px;
  background:linear-gradient(180deg,#fff,#fbfff9);
  padding:18px;
  box-shadow:0 30px 80px rgba(8,12,10,0.36);
  z-index:2;
  overflow:auto;
}
.profile-modal-grid{
  display:flex;
  gap:14px;
  align-items:flex-start;
  flex-direction:row;
}
.profile-modal-image{
  flex:0 0 320px;
  width:320px;
  height:320px;
  border-radius:12px;
  overflow:hidden;
  background:#f6f6f6;
  border:1px solid rgba(0,0,0,0.04);
}
.profile-modal-image img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.profile-modal-info{ flex:1; min-width:0; padding-bottom:10px }
@media (max-width:720px){
  .profile-modal-grid{ flex-direction:column }
  .profile-modal-image{ width:100%; height:220px; flex:0 0 auto }
  .profile-modal-body{ padding:12px }
}

/* About modal */
.about-modal{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  z-index:110;
}
.about-modal[aria-hidden="false"]{ display:flex; }
.about-backdrop{
  position:absolute; inset:0; background:rgba(6,12,8,0.45); backdrop-filter:blur(3px);
}
.about-body{
  position:relative;
  width:calc(100% - 36px);
  max-width:680px;
  border-radius:12px;
  background:linear-gradient(180deg,#fff,#fbfff9);
  padding:18px;
  box-shadow:0 30px 80px rgba(8,12,10,0.28);
  z-index:2;
}
@media (max-width:720px){
  .about-body{ padding:12px; width:calc(100% - 24px); }
  .about-body img{ height:140px; object-fit:cover }
}

/* Year calendar styles */
.year-calendar{
  display:flex;
  gap:96px; /* tripled gap to increase separation between months (previously 32px) */
  flex-wrap:wrap;
  align-items:flex-start;
  margin-top:6px;

  /* show full-size months so day numbers are readable */
  transform: none;
  transform-origin: initial;
  margin-bottom: 8px;
}
.yc-month{
  width:136px;
  border-radius:10px;
  padding:8px;
  background:linear-gradient(180deg,#fff,#fbfffb);
  border:1px solid rgba(200,230,220,0.6);
  box-shadow: 0 6px 14px rgba(18,40,30,0.03);
  /* slightly reduced padding to better fit when scaled */
  padding:6px;
}
.yc-month-header{
  font-weight:700;
  font-size:0.88rem;
  color:#163a2f;
  margin-bottom:6px;
  text-transform:capitalize;
  text-align:center;
}
.yc-grid{
  display:grid;
  grid-template-columns: repeat(7, 1fr);
  gap:4px;
}
.yc-cell{
  display:flex;
  align-items:center;
  justify-content:center;
  height:26px;
  font-size:0.78rem;
  border-radius:6px;
}
.yc-weekday{
  font-weight:700;
  color:var(--muted);
  background:transparent;
}
.yc-empty{ background:transparent; }
.yc-day{
  background:transparent;
  border:1px solid transparent;
  cursor:pointer;
  transition:all 140ms ease;
  color:#0f2b22;
}
.yc-day:hover{ transform:translateY(-2px); box-shadow:0 8px 18px rgba(18,40,30,0.04) }
.yc-day.selected{
  background: linear-gradient(90deg,var(--accent-2),#00b37f);
  color:white;
  font-weight:800;
  border-color:transparent;
  box-shadow: 0 12px 28px rgba(0,179,128,0.14);
}

/* make calendar wrap nicely on narrow screens */
@media (max-width:720px){
  .yc-month{ width:110px }
  .year-calendar{ gap:72px } /* increased mobile gap to 72px (tripled from 24px) */
}