/* Estilos de la página "Agéndate" -- página estática, sin motor de templates.
   Reutiliza .ig-wrap/.ig-card/.ig-btn/.ig-2col de style.css y el cromo compartido
   (header, menús, tema, drawer) de shared.css. Reglas propias: pasos, selector de
   fecha/hora y campos del formulario. */
@import url("style.css");
@import url("shared.css");

.ig-steps{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.ig-step{padding:10px 16px;border-radius:999px;font-size:14px;font-weight:600;color:var(--muted);border:1px solid var(--border)}
.ig-step.on{font-weight:700;background:var(--accent);color:var(--on-accent);border-color:transparent}
.ig-step.done{font-weight:600;background:var(--chip);color:var(--accent-text);border-color:transparent}

.ig-infolist{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.ig-infolist li{background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:16px 18px;display:flex;flex-direction:column;gap:4px}
.ig-infolist .k{font-size:13px;color:var(--muted)}
.ig-infolist .v{font-weight:700}

.ig-pickgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.ig-pick{cursor:pointer;border-radius:16px;min-height:46px;font-weight:600;font-size:15px;background:var(--input);color:var(--text);border:1px solid var(--border);font-family:inherit}
.ig-pick[aria-pressed="true"]{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.ig-pick-day{display:flex;flex-direction:column;align-items:center;gap:4px;padding:14px 6px}
.ig-pick-day .dow,.ig-pick-day .mon{font-size:13px;font-weight:600;text-transform:capitalize}
.ig-pick-day .num{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:28px;line-height:1}
.ig-pick-slot{padding:12px 4px}

.ig-field-label{font-size:14px;font-weight:600}
.ig-field-label .req{color:var(--danger)}
.ig-field{width:100%;font:inherit;font-size:16px;padding:14px 16px;border-radius:14px;min-height:50px;background:var(--input);color:var(--text);border:1px solid var(--border-strong)}
.ig-field.invalid{border:2px solid var(--danger)}
.ig-field-area{resize:vertical;min-height:96px}
.ig-field-error{font-size:13px;font-weight:600;color:var(--danger)}

.ig-dl{margin:0;width:100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.ig-dl > div{background:var(--surface2);border-radius:18px;padding:16px;display:flex;flex-direction:column;gap:6px}
.ig-dl dt{font-size:13px;color:var(--muted)}
.ig-dl dd{margin:0;font-weight:700;text-transform:capitalize}