/* =============================================================================
   agendar.css — CAPA 3 de 3: LAYOUT DE "AGENDAR CONSULTA"
   Agenda de consulta con médico homeópata en 3 pasos (sucursal → médico →
   horario) + confirmación. Carga después de base.css y shop.css.
   -----------------------------------------------------------------------------
   INVARIANTE: no redefine ningún selector YA DEFINIDO en base.css o shop.css
   (los dos NO EDITAR que se cargan en toda página de tienda). Se comprueba con:

     grep -nE '^\.(btn|nav|topbar|iconbtn|tools|logo|sucrow|sacts|pcard|chip-f|
                    ann|foot|scrim|cart|cmdk|news|cofstrip|prods|toast|sk|stock|
                    branchsel|wafab|empty|reveal|band-|sr-only|skip|eyebrow|
                    sec-head|linkmore|imgwrap|ic|wrap|shipbar)\b' agendar.css

   Debe devolver CERO líneas (comprobado; ver reporte de entrega).

   EXCEPCIÓN DELIBERADA — `.hero`: esta página NO carga home.css, así que copiar
   y adaptar el bloque `.hero` (instrucción explícita del encargo) no colisiona
   en tiempo de ejecución con la home; es la única página que también lo define,
   y nunca se cargan las dos hojas a la vez. El scrim de 3 capas se conserva TAL
   CUAL (es una corrección de contraste medida, no un valor estético).
   Las tarjetas de sucursal reutilizan `.sucrow`/`.sinfo`/`.sacts` de base.css
   TAL CUAL (sin redefinirlas) para heredar su apariencia ya resuelta; las de
   médico usan la clase nueva `.drcard` en vez de `.doc*` para no generar
   ninguna ambigüedad con home.css.
   ============================================================================= */

/* ---------- CABECERA DE PÁGINA (copiada de home.css §HERO, adaptada) ---------- */
.hero{ position:relative; isolation:isolate; min-height:clamp(300px,38svh,420px); display:flex; align-items:flex-end; overflow:clip; }
.hero .bg{ position:absolute; inset:0; z-index:0; background:var(--navy-deep); }
.hero .bg img{ width:100%; height:100%; object-fit:cover; object-position:50% 30%; filter:brightness(.82) saturate(.92) contrast(1.02); }
/* Scrim de 3 capas — regla compartida con home.css: no se recalibra por página. */
.hero .hero-scrim{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(96deg, rgba(11,23,54,.84) 0%, rgba(11,23,54,.74) 30%, rgba(11,23,54,.38) 52%, rgba(11,23,54,0) 74%),
    linear-gradient(to top, rgba(11,23,54,.55) 0%, rgba(11,23,54,.18) 28%, rgba(11,23,54,0) 52%),
    linear-gradient(0deg, rgba(11,23,54,.22), rgba(11,23,54,.22));
}
.hero .wrap{ position:relative; z-index:2; }
.hero .inner{ color:#fff; padding:var(--s7) 0; max-width:min(640px,62%); }
.hero .eyebrow{
  display:inline-flex; align-items:center; gap:8px; color:#fff; opacity:1;
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.38);
  border-radius:var(--radius-pill); padding:7px 15px;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
.hero h1{
  font-size:clamp(30px,4.4vw,48px); font-weight:800; margin:16px 0 0; color:#fff;
  letter-spacing:-.025em; line-height:1.05;
  text-shadow:0 1px 2px rgba(11,23,54,.5), 0 10px 40px rgba(11,23,54,.35);
}
.hero p{
  font-size:clamp(14.5px,1.4vw,16.5px); margin-top:12px; max-width:56ch; color:#E9EDF7;
  text-shadow:0 1px 2px rgba(11,23,54,.45);
}
@media(max-width:820px){
  .hero{ min-height:0; display:block; background:var(--navy-900); overflow:visible; }
  .hero .bg{ position:relative; height:34svh; min-height:200px; }
  .hero .hero-scrim{
    top:0; bottom:auto; height:34svh; min-height:200px;
    background:linear-gradient(to top, var(--navy-900) 0%, rgba(11,23,54,.62) 46%, rgba(11,23,54,.24) 100%);
  }
  .hero .inner{ max-width:none; padding:var(--s5) 0 var(--s6); }
}
@media(forced-colors:active){
  .hero .bg{ display:none; }
  .hero .hero-scrim{ background:Canvas; }
  .hero .eyebrow{ background:Canvas; border-color:CanvasText; }
}

/* ---------- CONTENEDOR PRINCIPAL ---------- */
.apmain{ padding:var(--s7) 0 var(--s9); }

/* ---------- BARRA DE PROGRESO (4 hitos: sucursal/médico/horario/confirmar) ---------- */
.apsteps{ list-style:none; display:flex; gap:var(--s3); margin-bottom:var(--s7); flex-wrap:wrap; }
.apstep{
  display:flex; align-items:center; gap:10px; padding:10px 16px;
  border-radius:var(--radius-pill); background:var(--surface); border:1px solid var(--line-strong);
  font-family:var(--font-display); font-weight:600; font-size:13px; color:var(--ink-muted);
}
.apstep b{
  display:grid; place-items:center; width:24px; height:24px; border-radius:50%; flex:none;
  background:var(--sunken); color:var(--ink-muted); font-size:12px;
}
.apstep.done{ color:var(--accent); border-color:var(--accent); background:var(--accent-tint); }
.apstep.done b{ background:var(--accent); color:#fff; }
.apstep[aria-current="step"]{ color:var(--ink); border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-tint); }
.apstep[aria-current="step"] b{ background:var(--primary); color:#fff; }
@media(max-width:700px){ .apstep span{ display:none; } .apstep{ padding:10px; } }

/* ---------- PANELES DE PASO ---------- */
.appanel[hidden]{ display:none; }
.appanel{ max-width:920px; }
.apback{ margin-bottom:var(--s5); }
.apheadline{ margin-bottom:var(--s6); }
.apheadline h2{ font-size:clamp(22px,2.6vw,30px); margin-bottom:6px; }

/* ---------- REJILLA DE SUCURSALES / MÉDICOS ---------- */
.apgrid{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--s5); align-items:start; }
@media(max-width:760px){ .apgrid{ grid-template-columns:1fr; } }

/* Tarjeta de sucursal: envuelve `.sucrow` (base.css) + acción de elegir, propia de esta página. */
.brchoice{ display:flex; flex-direction:column; }
.brchoice .sucrow{ flex:1; }
.brchoice-foot{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:10px; }
.brchoice-doccount{ font-size:12.5px; color:var(--ink-muted); }
.brchoice.selected .sucrow{ border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-tint); }

/* Tarjeta de médico — nombre nuevo a propósito, ver nota de exclusión arriba. */
.drcard{
  display:flex; gap:16px; padding:16px; background:var(--surface); text-align:left;
  border:1px solid var(--line-strong); border-radius:var(--radius); box-shadow:var(--shadow-sm);
  cursor:pointer; font:inherit; color:inherit; width:100%;
  transition:border-color .18s, box-shadow .18s, transform .18s;
}
.drcard:hover{ box-shadow:var(--shadow-md); transform:translateY(-2px); }
.drcard.selected{ border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-tint); }
.drcard-photo{ width:76px; height:76px; border-radius:var(--radius); flex:none; overflow:hidden; background:var(--sunken); }
.drcard-photo img{ width:100%; height:100%; object-fit:cover; }
.drcard-body{ flex:1; min-width:0; }
.drcard-spec{ font-size:12px; color:var(--sage); font-weight:600; letter-spacing:.04em; text-transform:uppercase; }
.drcard-body h3{ font-size:16.5px; margin:4px 0 4px; font-family:var(--font-display); }
.drcard-body p{ font-size:12.5px; color:var(--ink-muted); }

/* ---------- HORARIOS ---------- */
.slotday + .slotday{ margin-top:var(--s6); }
.slotday h3{ font-size:15px; margin-bottom:12px; text-transform:capitalize; font-family:var(--font-display); }
.slotgrid{ display:flex; flex-wrap:wrap; gap:10px; }
.slotbtn{
  min-height:44px; padding:0 16px; border-radius:var(--radius-sm);
  background:var(--surface); border:1px solid var(--line-strong); color:var(--ink);
  font:inherit; font-weight:600; font-size:13.5px; cursor:pointer;
}
.slotbtn:hover{ border-color:var(--accent); }
.slotbtn.selected{ background:var(--accent); border-color:var(--accent); color:#fff; }
.slotbtn:disabled{ opacity:.42; text-decoration:line-through; cursor:not-allowed; background:var(--sunken); }
.slotnote{ font-size:12px; color:var(--ink-muted); margin-top:14px; }

/* ---------- RESUMEN + FORMULARIO DE CONTACTO ---------- */
.apsummary{
  display:flex; flex-direction:column; gap:8px; padding:18px 20px; margin-bottom:var(--s6);
  background:var(--accent-tint); border:1px solid color-mix(in srgb,var(--accent) 30%,transparent);
  border-radius:var(--radius);
}
.apsummary dl{ display:grid; grid-template-columns:auto 1fr; gap:5px 14px; font-size:13.5px; }
.apsummary dt{ color:var(--ink-muted); }
.apsummary dd{ font-weight:600; font-family:var(--font-display); }

.apform{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s4); }
.apform .field{ display:flex; flex-direction:column; gap:6px; }
.apform .field.full{ grid-column:1/-1; }
.apform label{ font-size:12.5px; font-weight:600; color:var(--ink-muted); }
.apform input, .apform textarea{
  font:inherit; font-size:14px; padding:12px 14px; border-radius:var(--radius-sm);
  border:1px solid var(--line-strong); background:var(--surface); color:var(--ink);
}
.apform input:focus, .apform textarea:focus{ border-color:var(--accent); }
.apform textarea{ resize:vertical; min-height:88px; }
.apform .aperr{ font-size:12px; color:var(--error); min-height:15px; }
.apform .appriv{ display:flex; gap:10px; align-items:flex-start; font-size:12.5px; color:var(--ink-muted); }
.apform .appriv input{ margin-top:3px; width:auto; flex:none; }
.apform .apsubmit{ grid-column:1/-1; display:flex; justify-content:flex-end; margin-top:6px; }
@media(max-width:640px){ .apform{ grid-template-columns:1fr; } }

/* ---------- CONFIRMACIÓN ---------- */
.apdone{ display:flex; flex-direction:column; gap:16px; align-items:flex-start; max-width:560px; }
.apdone-icon{ width:56px; height:56px; border-radius:50%; background:var(--success); color:#fff; display:grid; place-items:center; }
.apdone dl{ display:grid; grid-template-columns:auto 1fr; gap:6px 16px; font-size:13.5px; width:100%; }
.apdone dt{ color:var(--ink-muted); }
.apdone dd{ font-weight:600; font-family:var(--font-display); }

/* ---------- URGENCIAS — aviso permanente, no un tooltip ---------- */
.apurgente{
  display:flex; gap:10px; align-items:flex-start; font-size:12.5px; color:var(--ink-muted);
  background:var(--sunken); border-radius:var(--radius-sm); padding:12px 14px; margin-top:var(--s5);
}
.apurgente .ic{ color:var(--warning); flex:none; margin-top:1px; }