/* === Agenda Salud — Frontend CSS v3 === */
:root {
    --as-font-body:     'Roboto', sans-serif;
    --as-font-heading:  'Lora', serif;
    --as-primary:       #2563eb;
    --as-primary-dark:  #1d4ed8;
    --as-primary-bg:    #eff6ff;
    --as-purple:        #7c3aed;
    --as-success:       #10b981;
    --as-border:        #e5e7eb;
    --as-text:          #1f2937;
    --as-muted:         #6b7280;
    --as-radius:        12px;
    --as-shadow:        0 4px 20px rgba(0,0,0,.08);
}

.as-wrap { max-width: 700px; margin: 0 auto; font-family: var(--as-font-body); color: var(--as-text); }
.as-step  { animation: asFade .3s ease; }
.as-hidden { display: none !important; }
@keyframes asFade { from { opacity:0; transform: translateY(14px); } to { opacity:1; transform: translateY(0); } }

.as-breadcrumb { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 2px; background: var(--as-primary-bg); color: var(--as-primary); font-size: .78rem; font-weight: 700; padding: 6px 14px; border-radius: 20px; margin-bottom: 18px; max-width: 100%; }
.as-bc-sep { opacity: .5; }
.as-step-title { font-size: 1.45rem; font-weight: 700; color: #111827; margin: 0 0 6px; font-family: var(--as-font-heading); }
.as-step-subtitle { color: var(--as-muted); margin: 0 0 22px; font-size: .95rem; }

/* ── Services grid ─────────────────────────────────────────────── */
.as-services-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; margin-bottom: 4px; }
.as-service-btn { display: flex; flex-direction: column; align-items: center; gap: 8px; background: #fff; border: 2px solid var(--as-border); border-radius: var(--as-radius); padding: 18px 14px; cursor: pointer; transition: all .2s; color: var(--as-text); text-align: center; }
.as-svc-icon  { font-size: 26px; }
.as-svc-name  { font-size: .88rem; font-weight: 600; line-height: 1.3; }
.as-service-btn:hover { border-color: var(--as-primary); background: var(--as-primary-bg); transform: translateY(-2px); box-shadow: 0 6px 16px rgba(37,99,235,.15); }
.as-service-btn.selected { border-color: var(--as-primary); background: var(--as-primary-bg); box-shadow: 0 0 0 3px rgba(37,99,235,.15); }

/* ── Professionals grid ────────────────────────────────────────── */
.as-professionals-grid { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.as-prof-btn { display: flex; align-items: center; gap: 14px; width: 100%; background: #fff; border: 2px solid var(--as-border); border-radius: var(--as-radius); padding: 14px 18px; cursor: pointer; text-align: left; transition: all .2s; color: var(--as-text); }
.as-prof-avatar { width: 46px; height: 46px; border-radius: 50%; background: var(--as-primary); color: #fff; font-size: 14px; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.as-prof-info { display: flex; flex-direction: column; }
.as-prof-info strong { font-size: .95rem; color: var(--as-text); }
.as-prof-info span   { font-size: .82rem; color: var(--as-muted); margin-top: 2px; }
.as-prof-btn:hover { border-color: var(--as-primary); background: var(--as-primary-bg); transform: translateX(3px); }
.as-prof-btn.selected { border-color: var(--as-primary); background: var(--as-primary-bg); }

/* ── Calendar ──────────────────────────────────────────────────── */
#as-calendar { background: #fff; border: 1px solid var(--as-border); border-radius: var(--as-radius); padding: 18px; box-shadow: var(--as-shadow); margin-bottom: 16px; }
.as-cal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.as-cal-title  { font-weight: 800; font-size: 1rem; color: #111827; }
.as-cal-nav { width: 34px; height: 34px; background: var(--as-primary-bg); border: none; border-radius: 8px; cursor: pointer; font-size: 17px; display: flex; align-items: center; justify-content: center; color: var(--as-primary); transition: background .2s; }
.as-cal-nav:hover   { background: #dbeafe; }
.as-cal-nav:disabled{ opacity: .3; cursor: default; }

.as-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.as-cal-dn   { text-align: center; font-size: .68rem; font-weight: 800; color: var(--as-muted); padding: 4px 0; text-transform: uppercase; }
.as-cal-day  { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; border-radius: 8px; font-size: .88rem; cursor: pointer; transition: all .15s; border: 2px solid transparent; color: var(--as-text); }
.as-cal-day:hover:not(.disabled):not(.empty):not(.past) { background: var(--as-primary-bg); color: var(--as-primary); border-color: var(--as-primary); }
.as-cal-day.today    { font-weight: 800; color: var(--as-primary); }
.as-cal-day.selected { background: var(--as-primary); color: #fff; border-color: var(--as-primary); }
.as-cal-day.disabled,.as-cal-day.past { color: #d1d5db; cursor: default; pointer-events: none; }
.as-cal-day.empty    { cursor: default; }

/* ── Slots ─────────────────────────────────────────────────────── */
.as-loader { color: var(--as-muted); font-style: italic; padding: 20px 0; font-size: .9rem; }
#as-slots-grid { display: flex; flex-wrap: wrap; gap: 10px; margin: 4px 0 16px; }
.as-slot-btn { padding: 10px 18px; border: 2px solid var(--as-border); border-radius: 8px; background: #fff; font-size: .88rem; font-weight: 700; cursor: pointer; transition: all .15s; color: var(--as-text); }
.as-slot-btn.available:hover,.as-slot-btn.selected { border-color: var(--as-primary); background: var(--as-primary-bg); color: var(--as-primary); }
.as-slot-btn.taken { background: var(--as-primary-bg)\9; color: #d1d5db; cursor: not-allowed; text-decoration: line-through; border-color: #f3f4f6; }
.as-empty-slots { color: var(--as-muted); padding: 16px; background: #f9fafb; border-radius: 8px; border: 1px dashed var(--as-border); font-size: .9rem; }

/* ── Form & RUT ────────────────────────────────────────────────── */
.as-form { margin-top: 4px; }
.as-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.as-field      { display: flex; flex-direction: column; gap: 5px; margin-bottom: 14px; }
.as-field label { font-size: .8rem; font-weight: 700; color: #374151; text-transform: uppercase; letter-spacing: .05em; }
.as-field input, .as-field select, .as-field textarea { width: 100%; box-sizing: border-box; border: 2px solid var(--as-border); border-radius: 9px; padding: 10px 14px; font-size: .95rem; font-family: inherit; transition: all .2s; outline: none; color: var(--as-text); background: #fff;}
.as-field input:focus, .as-field select:focus, .as-field textarea:focus { border-color: var(--as-primary); box-shadow: 0 0 0 3px rgba(37,99,235,.1); }

/* RUT especial */
.as-input-rut { font-family: monospace !important; font-size: 1.5rem !important; text-align: center; letter-spacing: 2px; height: 60px; text-transform: uppercase;}
.as-patient-card { background: #e0f2fe; border: 1px solid #bae6fd; border-radius: var(--as-radius); padding: 20px; text-align: center; margin-bottom: 20px; }
.as-patient-card h3 { color: #0284c7; margin: 0 0 5px 0; font-size: 1.2rem; font-weight: 800; }
.as-patient-card p { color: #0f172a; margin: 0; font-size: .9rem; }

/* Error */
.as-error { background: #fee2e2; border: 1px solid #fecaca; border-radius: 8px; padding: 12px 16px; color: #991b1b; font-size: .88rem; margin-bottom: 14px; }

/* Buttons */
.as-submit-btn { width: 100%; background: var(--as-primary); color: #fff; border: none; border-radius: 9px; padding: 14px; font-size: 1rem; font-weight: 800; cursor: pointer; transition: all .2s; margin-bottom: 10px; }
.as-submit-btn:hover:not(:disabled)   { background: var(--as-primary-dark); transform: translateY(-1px); }
.as-submit-btn:active:not(:disabled)  { transform: translateY(0); }
.as-submit-btn:disabled{ background: #9ca3af; cursor: not-allowed; transform: none; opacity: 0.8; }
.as-btn-secondary { background: transparent; color: var(--as-primary); border: 2px solid var(--as-primary); }
.as-btn-secondary:hover { background: var(--as-primary-bg); }
.as-back-btn { background: none; border: 1.5px solid var(--as-border); border-radius: 8px; padding: 9px 18px; font-size: .88rem; cursor: pointer; color: var(--as-muted); transition: all .2s; display: inline-block; margin-top: 4px; }
.as-back-btn:hover { border-color: #9ca3af; color: var(--as-text); }

/* ── Success ───────────────────────────────────────────────────── */
.as-success-wrap { text-align: center; }
.as-success-icon { font-size: 60px; margin-bottom: 12px; }
.as-confirm-card { background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: var(--as-radius); padding: 20px; margin: 18px 0; text-align: left; }
.as-confirm-row { display: flex; align-items: flex-start; gap: 12px; padding: 10px 0; border-bottom: 1px solid #d1fae5; font-size: .9rem; }
.as-confirm-row:last-child { border: none; }
.as-confirm-row > span   { font-size: 18px; flex-shrink: 0; }
.as-confirm-row label    { display: block; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #059669; }
.as-confirm-row strong   { font-size: .92rem; color: #065f46; }
.as-note { color: var(--as-muted); font-size: .82rem; margin-top: 12px; }

/* Responsive */
@media (max-width: 480px) {
    .as-services-grid  { grid-template-columns: 1fr 1fr; }
    .as-field-row      { grid-template-columns: 1fr; gap: 0; }
    #as-slots-grid     { gap: 7px; }
    .as-slot-btn       { padding: 8px 12px; font-size: .82rem; }
}
/* ================================================================
   AGENDA SALUD — CSS ISOLATION v2.8.0
   Todos los estilos están encapsulados en .as-wrap y #app-patient-portal
   para que el theme de WordPress no pueda sobreescribirlos.
   ================================================================ */

/* Reset selectivo dentro del plugin — evita que el theme rompa el diseño */
#agenda-salud-wrap *,
#agenda-salud-wrap *::before,
#agenda-salud-wrap *::after {
    box-sizing: border-box;
}
#agenda-salud-wrap input,
#agenda-salud-wrap select,
#agenda-salud-wrap textarea,
#agenda-salud-wrap button {
    font-family: var(--as-font-body);
    font-size: 14px;
    line-height: 1.5;
    border-radius: 0; /* reset theme */
    appearance: none;
    -webkit-appearance: none;
}
#agenda-salud-wrap a { text-decoration: none; }
#agenda-salud-wrap ul, #agenda-salud-wrap ol { list-style: none; margin: 0; padding: 0; }
#agenda-salud-wrap h1, #agenda-salud-wrap h2,
#agenda-salud-wrap h3, #agenda-salud-wrap h4,
#agenda-salud-wrap h5, #agenda-salud-wrap h6 {
    font-family: var(--as-font-body);
    line-height: 1.3;
}
#agenda-salud-wrap select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236b7280' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px;
    cursor: pointer;
}

/* ── Modalidad badge ─────────────────────────────────────────── */
.as-modality-badge {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 20px;
    margin-top: 4px;
    letter-spacing: 0.2px;
}
.as-mod-presencial { background: #dbeafe; color: #1e40af; }
.as-mod-online     { background: #d1fae5; color: #065f46; }
.as-mod-ambos      { background: #fef3c7; color: #92400e; }

/* Reset portal */
#app-patient-portal *,
#app-patient-portal *::before,
#app-patient-portal *::after { box-sizing: border-box; }
#app-patient-portal input,
#app-patient-portal select,
#app-patient-portal textarea,
#app-patient-portal button {
    font-family: var(--as-font-body);
    font-size: 14px;
}