/* Agenda pública de una terapeuta — «Espacio Pacientes» (2026-10-12). Ver reservar.js.
   Colores de la terapeuta en --ra-acc* (los pone reservar.js con setProperty: la CSP no deja estilos en línea).
   Tema: html[data-tema="claro|oscuro|auto"]. Dentro de un iframe: html.ra-embed (fondo transparente, márgenes justos). */
:root {
    --ra-acc: #6a4bff; --ra-acc-2: #5638e0; --ra-acc-soft: rgba(106,75,255,.12); --ra-acc-txt: #fff;
    --ra-bg: #f5f4fa; --ra-card: #ffffff; --ra-text: #1b2033; --ra-muted: #667085; --ra-border: #e6e3ee;
    --ra-dia: #f3f2f8; --ra-shadow: 0 10px 30px rgba(16, 24, 40, .07); --ra-radio: 18px;
    --ra-wa: #1fa855; --ra-wa-2: #178a45;
    color-scheme: light;
}
html[data-tema="oscuro"] {
    --ra-bg: #0e1120; --ra-card: #161a2c; --ra-text: #eceef7; --ra-muted: #a0a8bd; --ra-border: #283049;
    --ra-dia: #1e2338; --ra-shadow: 0 10px 30px rgba(0, 0, 0, .35); color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
    html[data-tema="auto"] {
        --ra-bg: #0e1120; --ra-card: #161a2c; --ra-text: #eceef7; --ra-muted: #a0a8bd; --ra-border: #283049;
        --ra-dia: #1e2338; --ra-shadow: 0 10px 30px rgba(0, 0, 0, .35); color-scheme: dark;
    }
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body.ra {
    margin: 0; min-height: 100vh; background: var(--ra-bg); color: var(--ra-text);
    font: 16px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
html.ra-embed body.ra { background: transparent; min-height: 0; }
.ra-wrap { max-width: 720px; margin: 0 auto; padding: 24px 16px 32px; display: flex; flex-direction: column; gap: 14px; }
html.ra-embed .ra-wrap { padding: 10px 10px 14px; gap: 10px; }
.ra-wrap.is-cargando { opacity: .6; pointer-events: none; transition: opacity .15s; }
.ra-card { background: var(--ra-card); border: 1px solid var(--ra-border); border-radius: var(--ra-radio); box-shadow: var(--ra-shadow); padding: 20px; }
html.ra-embed .ra-card { box-shadow: none; padding: 16px; }
.ra-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ra-cargando { display: flex; justify-content: center; padding: 64px 0; }
.ra-spin { width: 34px; height: 34px; border-radius: 50%; border: 3px solid var(--ra-border); border-top-color: var(--ra-acc); animation: ra-gira .8s linear infinite; }
@keyframes ra-gira { to { transform: rotate(360deg); } }
.ra-noscript { max-width: 520px; margin: 40px auto; padding: 0 16px; text-align: center; }

/* Cabecera */
.ra-cab { border-top: 4px solid var(--ra-acc); }
.ra-cab-fila { display: flex; align-items: center; gap: 14px; }
.ra-logo { flex: 0 0 auto; object-fit: contain; background: transparent; }
.ra-logo-c { width: 64px; height: 64px; border-radius: 14px; }
.ra-logo-h { width: auto; max-width: 168px; height: 52px; }
.ra-cab-txt { flex: 1 1 auto; min-width: 0; }
.ra-nombre { margin: 0; font-size: 1.32rem; line-height: 1.25; font-weight: 750; letter-spacing: -.01em; overflow-wrap: anywhere; }
.ra-sub { margin: 3px 0 0; color: var(--ra-muted); font-size: .95rem; overflow-wrap: anywhere; }
.ra-idiomas { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--ra-dia); flex: 0 0 auto; align-self: flex-start; }
.ra-idioma { border: 0; background: transparent; color: var(--ra-muted); font: inherit; font-size: .74rem; font-weight: 700; padding: 5px 8px; border-radius: 999px; cursor: pointer; min-width: 32px; }
.ra-idioma.is-on { background: var(--ra-card); color: var(--ra-text); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.ra-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.ra-chip { display: inline-flex; align-items: center; gap: 4px; padding: 5px 11px; border-radius: 999px; background: var(--ra-acc-soft); color: var(--ra-text); font-size: .86rem; overflow-wrap: anywhere; }
.ra-bienvenida { margin: 14px 0 0; white-space: pre-line; overflow-wrap: anywhere; color: var(--ra-text); line-height: 1.55; }

/* Reserva */
.ra-res-cab { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 12px; margin-bottom: 12px; }
.ra-res-tit { margin: 0; font-size: 1.12rem; font-weight: 720; }
.ra-zona { font-size: .82rem; color: var(--ra-muted); }
.ra-semana-nav { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.ra-semana-txt { font-weight: 650; font-size: .95rem; text-align: center; flex: 1; }
.ra-flecha { width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--ra-border); background: var(--ra-card); color: var(--ra-text); font-size: 1.4rem; line-height: 1; cursor: pointer; flex: 0 0 auto; }
.ra-flecha:disabled { opacity: .35; cursor: default; }
.ra-dias { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.ra-dia { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 2px 9px; border-radius: 14px; border: 1px solid transparent; background: var(--ra-dia); color: var(--ra-text); font: inherit; cursor: pointer; min-width: 0; }
.ra-dia-sem { font-size: .72rem; text-transform: uppercase; letter-spacing: .03em; color: var(--ra-muted); }
.ra-dia-num { font-size: 1.12rem; font-weight: 720; line-height: 1.2; }
.ra-dia-punto { width: 6px; height: 6px; border-radius: 50%; background: transparent; }
.ra-dia.tiene .ra-dia-punto { background: var(--ra-acc); }
.ra-dia.es-hoy .ra-dia-num { text-decoration: underline; text-underline-offset: 3px; }
.ra-dia:disabled { opacity: .38; cursor: default; }
.ra-dia.is-sel { background: var(--ra-acc); color: var(--ra-acc-txt); border-color: var(--ra-acc); }
.ra-dia.is-sel .ra-dia-sem { color: inherit; opacity: .85; }
.ra-dia.is-sel .ra-dia-punto { background: var(--ra-acc-txt); }
.ra-horas-zona { margin-top: 16px; }
.ra-horas-tit { margin: 0 0 10px; font-size: 1rem; font-weight: 680; }
.ra-horas { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; }
.ra-hora { min-height: 44px; border-radius: 12px; border: 1.5px solid var(--ra-border); background: var(--ra-card); color: var(--ra-text); font: inherit; font-weight: 650; font-variant-numeric: tabular-nums; cursor: pointer; }
.ra-hora:hover { border-color: var(--ra-acc); }
.ra-hora.is-sel { background: var(--ra-acc); border-color: var(--ra-acc); color: var(--ra-acc-txt); }
.ra-vacio { margin: 4px 0 0; color: var(--ra-muted); }
.ra-vacio-sub { margin: 4px 0 0; color: var(--ra-muted); font-size: .9rem; }
.ra-dia:focus-visible, .ra-hora:focus-visible, .ra-flecha:focus-visible, .ra-idioma:focus-visible, .ra-btn:focus-visible, .ra-link:focus-visible {
    outline: 3px solid var(--ra-acc); outline-offset: 2px;
}

/* Confirmación */
.ra-confirmar { margin-top: 18px; padding: 16px; border-radius: 16px; background: var(--ra-acc-soft); border: 1px solid var(--ra-acc); display: flex; flex-direction: column; gap: 6px; }
.ra-conf-eti { font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ra-muted); font-weight: 700; }
.ra-conf-cuando { font-size: 1.12rem; font-weight: 750; }
.ra-conf-dur { color: var(--ra-muted); font-size: .92rem; }
.ra-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 20px; border-radius: 14px; border: 0; font: inherit; font-weight: 700; text-decoration: none; cursor: pointer; }
.ra-btn-wa { margin-top: 8px; background: var(--ra-wa); color: #fff; box-shadow: 0 6px 16px rgba(31, 168, 85, .28); }
.ra-btn-wa:hover { background: var(--ra-wa-2); }
.ra-wa-ico { font-size: .9rem; }
.ra-btn-2 { background: var(--ra-acc); color: var(--ra-acc-txt); margin-top: 6px; }
.ra-conf-nota { margin: 4px 0 0; font-size: .86rem; color: var(--ra-muted); }
.ra-aviso { color: #b45309; }
.ra-link { align-self: flex-start; border: 0; background: none; color: var(--ra-acc); font: inherit; font-size: .9rem; font-weight: 650; padding: 4px 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
html[data-tema="oscuro"] .ra-link { color: var(--ra-text); }

/* Estados */
.ra-estado { text-align: center; padding: 36px 22px; }
.ra-estado-ico { font-size: 2.2rem; }
.ra-estado-tit { margin: 10px 0 6px; font-size: 1.2rem; }
.ra-estado-txt { margin: 0 auto; max-width: 440px; color: var(--ra-muted); }
.ra-pie { text-align: center; font-size: .8rem; color: var(--ra-muted); padding: 2px 0 4px; }
.ra-pie a { color: inherit; text-decoration: none; }
.ra-pie a:hover { text-decoration: underline; }

@media (max-width: 480px) {
    .ra-wrap { padding: 14px 12px 24px; }
    .ra-card { padding: 16px; border-radius: 16px; }
    .ra-cab-fila { flex-wrap: wrap; row-gap: 10px; }
    .ra-logo { order: 0; }
    .ra-idiomas { order: 1; margin-left: auto; }
    .ra-cab-txt { order: 2; flex-basis: 100%; }
    .ra-logo-c { width: 56px; height: 56px; }
    .ra-nombre { font-size: 1.2rem; }
    .ra-dias { gap: 4px; }
    .ra-dia { padding: 7px 0 8px; border-radius: 12px; }
    .ra-dia-num { font-size: 1.02rem; }
    .ra-horas { grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); }
    .ra-btn-wa { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .ra-spin { animation-duration: 2s; } }

/* Vista previa dentro del panel (Ajustes ▸ Espacio Pacientes, ?vista_previa=1): el botón de WhatsApp enseña el mensaje */
.ra-previa-nota { margin-top: 8px; padding: 10px 12px; border-radius: 12px 12px 4px 12px; background: #d9fdd3; color: #111b21; font-size: .86rem; line-height: 1.4; overflow-wrap: anywhere; box-shadow: 0 1px 1px rgba(0, 0, 0, .12); }
.ra-previa-nota span { display: block; color: #3b4a54; font-size: .76rem; margin-bottom: 4px; }
.ra-previa-nota q { quotes: '«' '»'; }
html.ra-previa { scrollbar-width: thin; }