:root{--primary:#005f73;--accent:#0a9396;--bg:#fdfdff;--text:#001219;--muted:#667085;font-family:system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--text);background:var(--bg)}
*{box-sizing:border-box}body{margin:0}header{max-width:900px;margin:auto;padding:24px;display:flex;justify-content:space-between;gap:16px;align-items:center;border-bottom:1px solid #dbe9e8}header a{font-weight:700;letter-spacing:.06em;text-decoration:none}header span{font-size:.9rem;color:var(--muted)}main{max-width:640px;margin:48px auto;padding:0 24px}h1{color:var(--primary);font-size:clamp(1.6rem,5vw,2.4rem);font-weight:600}p{line-height:1.65}a{color:var(--primary)}.slots{list-style:none;padding:0;display:grid;gap:12px}.slots a{display:block;padding:18px 20px;border:1px solid #b8d6d1;border-radius:10px;background:#eaf6f4;text-decoration:none;font-weight:600}.slots a:hover{border-color:var(--accent)}label{display:block;margin:20px 0;font-weight:600}input,textarea{display:block;width:100%;margin-top:8px;border:1px solid #90b5b4;border-radius:6px;padding:12px;font:inherit}button{background:var(--primary);color:white;border:1px solid var(--primary);padding:12px 18px;border-radius:6px;font:inherit;cursor:pointer;min-height:44px}button:disabled{opacity:.5;cursor:not-allowed}.secondary{background:white;color:var(--primary)}:focus-visible{outline:3px solid var(--accent);outline-offset:3px}.trap{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}footer{max-width:640px;margin:48px auto;padding:0 24px;font-size:.85rem;color:var(--muted)}@media(max-width:480px){header{padding:18px 20px;align-items:start;flex-direction:column;gap:6px}main{margin-top:30px}button{width:100%}}

/* Published availability only; the contact form keeps its existing layout. */
/* Brand adapted from the main clinic website, using its original logo and gold. */
.availability-header{max-width:1180px;padding:14px 24px;gap:12px 24px}
.availability-header .clinic-brand{display:inline-flex;align-items:center;gap:10px;letter-spacing:1px;text-transform:uppercase}
.availability-header .clinic-brand img{display:block;width:44px;height:auto;flex:none}
.availability-header .clinic-brand span{font-family:"Outfit",system-ui,sans-serif;font-size:1.15rem;font-weight:600;color:#d4af37}
.availability-header h1{margin:0;font-size:1.4rem;font-weight:500;line-height:1.3}
.availability-page{max-width:1180px;margin:24px auto}
.availability-intro{margin:0 0 16px}
.availability-page .availability-week{margin-top:0}
.availability-page .week-navigation{margin-bottom:12px}
@media(max-width:600px){
  .availability-header{flex-direction:column;align-items:flex-start;gap:10px;padding:12px 24px}
  .availability-header .clinic-brand img{width:38px}
  .availability-header .clinic-brand span{font-size:1.05rem}
  .availability-header h1{font-size:1.25rem}
  .availability-page{margin-top:18px}
}
.availability-week{margin-top:32px}
.availability-week h2{color:var(--primary);font-size:1.15rem;line-height:1.5;margin:0 0 14px}
.availability-grid{display:grid;gap:12px;grid-template-columns:minmax(0,1fr)}
.availability-day{min-width:0;padding:16px;border:1px solid #dbe9e8;border-radius:10px;background:#fff}
.availability-day h3{margin:0 0 14px;font-size:1rem;line-height:1.5;color:var(--primary)}
.availability-day h3 span,.availability-day h3 time{display:block}
.availability-day h3 time{font-weight:400;font-size:.95rem;color:var(--text)}
.availability-day--empty{display:none}
.availability-scale{display:none}
.slot-band h4{margin:0 0 8px;font-size:.85rem;font-weight:600;color:var(--muted);line-height:1.5}
.slot-band+.slot-band{margin-top:16px}
.slot-band--empty,.slot-row--empty{display:none}
.slot-times{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.slot-time{display:inline-flex;min-width:76px;min-height:44px;padding:10px 14px;align-items:center;justify-content:center;border:1px solid #82bcb2;border-radius:6px;background:#eaf6f4;color:var(--primary);font-weight:600;text-decoration:none;line-height:1.35}
.slot-time:hover{background:#d8eeea;border-color:var(--primary);text-decoration:underline}
.slot-time:active{background:#c6e5df}
.availability-empty{padding:20px;border:1px solid #dbe9e8;border-radius:10px;background:#f4f9f8}
.selected-slot{margin:24px 0;padding:18px 20px;border:1px solid #b8d6d1;border-left:4px solid var(--accent);border-radius:10px;background:#eaf6f4}
.selected-slot h2{font-size:1rem;margin:0;color:var(--primary)}
.selected-slot p{margin:8px 0 12px;font-size:1.05rem;font-weight:600}
.selected-slot a{display:inline-flex;min-height:44px;align-items:center;text-underline-offset:3px}
textarea{resize:vertical;line-height:1.4}
#comentario{min-height:0}
.week-navigation{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:center;margin-bottom:20px}
.week-navigation h2{grid-column:1/-1;grid-row:1;text-align:center;margin:0}
.week-navigation button{font-size:.9rem;padding:10px 12px}
.week-previous{justify-self:start}.week-next{justify-self:end}
.slot-time{width:auto;gap:4px}
.slot-check{display:none}
.slot-time[aria-pressed="true"]{background:#c6e5df;border:2px solid var(--primary)}
.slot-time[aria-pressed="true"] .slot-check{display:inline}
@media(min-width:960px){
  .availability-page{margin:12px auto}
  .availability-intro{margin-bottom:10px}
  .availability-page+footer{margin:12px auto}
  .week-navigation{grid-template-columns:1fr auto 1fr}
  .week-navigation h2{grid-column:2;grid-row:1}
  .week-previous{grid-column:1;grid-row:1}.week-next{grid-column:3;grid-row:1}
  .availability-page .availability-week > .availability-grid{display:grid;grid-template-columns:64px repeat(5,minmax(0,1fr));gap:12px}
  .availability-day{padding:10px 14px;min-height:190px}
  .availability-day--empty{display:block;background:#f8fafb}
  /* La escala y los cinco dias repiten las mismas filas, sin estilos inline ni JS. */
  .availability-day h3{height:48px;margin-bottom:4px}
  .availability-scale{display:block;padding:10px 0;color:var(--muted);font-size:.75rem}
  .scale-heading-space{height:52px}
  .slot-band--empty{display:block}
  .slot-band h4,.scale-band h4{height:18px;margin:0 0 2px;font-size:.75rem;line-height:18px}
  .slot-band h4{visibility:hidden}
  .slot-band+.slot-band,.scale-band+.scale-band{margin-top:6px;padding-top:6px;border-top:1px solid #dbe9e8}
  .slot-times{display:block;padding-bottom:15px}
  .slot-row,.scale-row{display:block;height:21px}
  .scale-row{padding-top:10px;line-height:16px}
  .scale-band>div{padding-bottom:15px}
  .slot-row .slot-time{height:36px;min-height:36px;padding:6px 8px}
  /* 21 px por media hora: vecinos de 36 px alternan lateralmente, sin solaparse. */
  .slot-row:not(.slot-row--empty):has(+.slot-row:not(.slot-row--empty)) .slot-choice,
  .slot-row:not(.slot-row--empty)+.slot-row:not(.slot-row--empty) .slot-choice{width:calc(50% - 3px)}
  .slot-row:nth-child(even) .slot-choice{margin-left:auto}
  .slot-row:not(.slot-row--empty):has(+.slot-row:not(.slot-row--empty)) .slot-time,
  .slot-row:not(.slot-row--empty)+.slot-row:not(.slot-row--empty) .slot-time{padding-left:4px;padding-right:4px}
  .slot-time{width:100%;min-width:0}
}