/* ============================================================================
 * VÍNCULO · CSS común
 * Themes (aqua + sky), tipografía, botones, validaciones, layouts auth/onboarding.
 * Tomado del HTML mockup del MVP, organizado por secciones para que crezca limpio.
 * ============================================================================ */

/* ===== THEMES ============================================================== */
[data-theme="aqua"] {
    --bg: #F2F5F4;       --surface: #FBFBF8;     --surface-2: #E5ECEB;
    --ink: #14272B;      --ink-2: #2C4145;       --ink-3: #4A5C5F;
    --muted: #6B7B7E;    --line: #D6DEDC;        --line-soft: #E8ECEB;
    --accent: #2D7A8C;   --accent-hover: #1F6878;--accent-soft: #D7E5E9;
    --accent-fg: #FFFFFF;
    --warm: #B07458;     --warm-soft: #E8D2C2;   --rose: #B8888A;
    --agenda-now: #e52436;
    --ok: #16A34A;       --ok-soft: #DCFCE7;
    --warn: #D97706;     --warn-soft: #FEF3C7;
    --whatsapp: #25D366; --yape: #742989;        --plin: #00BFA5;

    /* Guidance states (antes "errors"). Acompañamiento, no alarma.
       --field-warning            → texto del mensaje de guidance
       --field-warning-soft       → fondo opcional para alertas globales
       --field-warning-edge       → borde sutil del input pendiente
       --field-warning-edge-strong→ borde del checkbox/consent pendiente */
    --field-warning:             #A58A86;
    --field-warning-soft:        #FCF9F8;
    --field-warning-edge:        #E6D7D4;
    --field-warning-edge-strong: #D9C3BE;
}

/* Public reservation review */
.public-review {
    min-height: 100vh;
    background:
        linear-gradient(180deg, rgba(242, 245, 244, 0.96), rgba(251, 251, 248, 0.98)),
        var(--bg);
    color: var(--ink);
}

.public-review-shell {
    width: min(100%, 720px);
    margin: 0 auto;
    padding: 22px 16px 34px;
}

.public-review-brand {
    width: max-content;
    margin-bottom: 18px;
}

.public-review-card {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: var(--surface);
    box-shadow: 0 24px 70px -44px color-mix(in srgb, var(--ink) 54%, transparent);
    padding: 22px;
}

.public-review-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 5px;
    background: var(--accent);
}

.public-review-card.is-accepted::before { background: #2D7A63; }
.public-review-card.is-rejected::before { background: #A65F4B; }
.public-review-card.is-expired::before,
.public-review-card.is-blocked::before { background: #7B6F68; }

.public-review-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 30px;
    padding: 6px 10px;
    border-radius: 999px;
    background: var(--surface-2);
    border: 1px solid var(--line);
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.public-review-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--accent);
}

.public-review-card.is-accepted .public-review-dot { background: #2D7A63; }
.public-review-card.is-rejected .public-review-dot { background: #A65F4B; }
.public-review-card.is-expired .public-review-dot,
.public-review-card.is-blocked .public-review-dot { background: #7B6F68; }

.public-review-head {
    margin-top: 22px;
}

.public-review-head h1 {
    margin: 0;
    color: var(--ink);
    font-size: 31px;
    line-height: 1.08;
    letter-spacing: 0;
}

.public-review-head p:last-child {
    margin: 12px 0 0;
    color: var(--muted);
    font-size: 15px;
    line-height: 1.65;
}

.public-review-summary {
    margin-top: 24px;
    border-top: 1px solid var(--line);
    padding-top: 20px;
}

.public-review-date {
    display: grid;
    gap: 6px;
    margin-bottom: 18px;
}

.public-review-date span,
.public-review-grid dt {
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.public-review-date strong {
    color: var(--ink);
    font-size: 20px;
    line-height: 1.25;
}

.public-review-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin: 0;
}

.public-review-grid div {
    min-width: 0;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface-2);
    padding: 12px;
}

.public-review-grid dt {
    margin: 0 0 5px;
}

.public-review-grid dd {
    margin: 0;
    min-width: 0;
    overflow-wrap: anywhere;
    color: var(--ink);
    font-size: 14px;
    font-weight: 800;
    line-height: 1.35;
}

.public-review-alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 18px;
    border-radius: 12px;
    border: 1px solid var(--line);
    padding: 12px;
    color: var(--muted);
    background: var(--surface-2);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.5;
}

.public-review-alert[hidden] {
    display: none;
}

.public-review-alert.is-ok {
    border-color: rgba(45, 122, 99, 0.28);
    background: rgba(45, 122, 99, 0.08);
    color: #285E4F;
}

.public-review-alert.is-error {
    border-color: rgba(166, 95, 75, 0.28);
    background: rgba(166, 95, 75, 0.08);
    color: #8C4E3E;
}

.public-review-alert-icon {
    flex: 0 0 auto;
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: currentColor;
    margin-top: 5px;
}

.public-review-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin-top: 22px;
}

.public-review-actions[hidden] {
    display: none;
}

.public-review-action,
.public-review-login {
    width: 100%;
    min-height: 48px;
    justify-content: center;
}

.public-review-action.is-loading {
    opacity: .72;
    cursor: wait;
}

.public-review-login {
    margin-top: 22px;
}

@media (min-width: 640px) {
    .public-review-shell {
        padding: 38px 20px 52px;
    }

    .public-review-brand {
        margin-bottom: 24px;
    }

    .public-review-card {
        border-radius: 20px;
        padding: 34px;
    }

    .public-review-head h1 {
        font-size: 40px;
    }

    .public-review-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .public-review-actions {
        grid-template-columns: 1fr 160px;
    }
}

[data-theme="sky"] {

    /* Fondos */
    --bg: #F4F8FB;
    --surface: #FFFFFF;
    --surface-2: #E8F0F7;

    /* Texto */
    --ink: #1B2B3D;
    --ink-2: #34455A;
    --ink-3: #4F6173;
    --muted: #6B7B8E;

    /* Bordes */
    --line: #DCE6EF;
    --line-soft: #EBF1F7;

    /* Color principal */
    --accent: #4A8BB8;
    --accent-hover: #387AA7;
    --accent-soft: #DDE9F2;
    --accent-fg: #FFFFFF;

    /* Estados cálidos */
    --warm: #B88746;
    --warm-soft: #F6EBDD;
    --warn: #D97706;
    --warn-soft: #FEF3C7;
    --rose: #B58A8A;

    /* Guidance states (antes "errors"). Ver explicación en bloque aqua. */
    --field-warning:      #A98B87;
    --field-warning-soft: #FAF4F2;
    --field-warning-edge: rgba(169, 139, 135, 0.32);
    --field-warning-dot:  #BC9794;

    /* Estados */
    --ok: #16A34A;
    --ok-soft: #DCFCE7;

    --agenda-now: #E52436;

    /* Integraciones */
    --whatsapp: #25D366;
    --yape: #742989;
    --plin: #00BFA5;
}

html {
    --sidebar-width: 244px;
}

/* ===== BASE ================================================================ */
html, body {
    background: var(--bg); color: var(--ink);
    font-family: 'Inter', sans-serif;
}
body { min-height: 100vh; position: relative; overflow-x: hidden; }
* { transition: background-color .35s ease, border-color .35s ease, color .25s ease; }

/* Ambient blob detras del contenido — se mueve con el tema y queda fijo al hacer scroll */
body::before {
    content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
    background:
        radial-gradient(45% 40% at 88% 8%,  color-mix(in srgb, var(--accent) 14%, transparent) 0%, transparent 60%),
        radial-gradient(35% 30% at 12% 92%, color-mix(in srgb, var(--warm)   10%, transparent) 0%, transparent 60%);
    opacity: 0.7;
}
body > * { position: relative; z-index: 1; }

.serif { font-family: 'Fraunces', serif; letter-spacing: -0.02em; }
.mono  { font-family: 'JetBrains Mono', ui-monospace, monospace; }

/* ===== LOGO MANDORLA · separación y junte (igual al landing) =============== */
.big-mandorla .m-left  { animation: mandorla-left  4s cubic-bezier(.45,0,.55,1) infinite; }
.big-mandorla .m-right { animation: mandorla-right 4s cubic-bezier(.45,0,.55,1) infinite; }
@keyframes mandorla-left  { 0%,100% { cx: 22; } 50% { cx: 12; } }
@keyframes mandorla-right { 0%,100% { cx: 38; } 50% { cx: 48; } }

/* ===== LOADING PREMIUM · logo que se junta y se abre ======================= */
.v-loader-layer {
    position: fixed;
    inset: 0;
    z-index: 2200;
    display: grid;
    place-items: center;
    padding: 24px;
    background:
        radial-gradient(34% 30% at 50% 45%,
            color-mix(in srgb, var(--accent-soft) 34%, transparent) 0,
            transparent 72%);
    backdrop-filter: blur(5px) saturate(1.06);
    -webkit-backdrop-filter: blur(5px) saturate(1.06);
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s ease;
}
.v-loader-layer[hidden] { display: none; }
.v-loader-layer.open {
    opacity: 1;
    pointer-events: auto;
}
.v-loader-card {
    min-width: min(320px, calc(100vw - 48px));
    position: relative;
    display: grid;
    justify-items: center;
    gap: 14px;
    padding: 10px 18px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}
.v-loader-card::before {
    content: "";
    position: absolute;
    inset: 2px 44px 32px;
    border-radius: 999px;
    background:
        radial-gradient(circle at 50% 50%,
            color-mix(in srgb, var(--accent) 18%, transparent) 0,
            transparent 70%);
    filter: blur(18px);
    opacity: .85;
    pointer-events: none;
}
.v-loader-mark {
    position: relative;
    width: 74px;
    height: 42px;
    filter: drop-shadow(0 14px 18px color-mix(in srgb, var(--accent) 20%, transparent));
}
.v-loader-circle {
    position: absolute;
    top: 6px;
    width: 30px;
    height: 30px;
    border-radius: 999px;
    border: 2px solid var(--accent);
    opacity: .62;
    background: color-mix(in srgb, var(--accent-soft) 24%, transparent);
    box-shadow:
        inset 0 0 0 1px color-mix(in srgb, white 26%, transparent),
        0 10px 20px -14px color-mix(in srgb, var(--accent) 70%, transparent);
}
.v-loader-left {
    left: 13px;
    animation: vLoaderLeft 1.55s cubic-bezier(.45,0,.2,1) infinite;
}
.v-loader-right {
    right: 13px;
    animation: vLoaderRight 1.55s cubic-bezier(.45,0,.2,1) infinite;
}
.v-loader-copy {
    display: grid;
    gap: 3px;
    text-align: center;
}
.v-loader-copy strong {
    color: var(--ink);
    font-size: 13.5px;
    font-weight: 800;
    text-shadow: 0 1px 12px color-mix(in srgb, var(--surface) 85%, transparent);
}
.v-loader-copy span {
    color: var(--muted);
    font-size: 12.5px;
    text-shadow: 0 1px 12px color-mix(in srgb, var(--surface) 85%, transparent);
}
@keyframes vLoaderLeft {
    0%, 100% { transform: translateX(-8px); }
    45%, 55% { transform: translateX(10px); }
}
@keyframes vLoaderRight {
    0%, 100% { transform: translateX(8px); }
    45%, 55% { transform: translateX(-10px); }
}

/* ===== THEME SWITCHER · esquina superior derecha en pantallas auth ========= */
.theme-btn {
    position: fixed; top: 22px; right: 68px; z-index: 5;
    width: 38px; height: 38px;
    display: inline-grid; place-items: center;
    padding: 0; border-radius: 12px;
    border: 1px solid var(--line); background: var(--surface);
    cursor: pointer; color: var(--ink-2);
    box-shadow: 0 10px 24px -18px color-mix(in srgb, var(--ink) 45%, transparent);
}
.theme-btn:hover {
    border-color: color-mix(in srgb, var(--accent) 34%, var(--line));
    background: color-mix(in srgb, var(--accent-soft) 40%, var(--surface));
}
.theme-btn:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--accent) 32%, transparent);
    outline-offset: 3px;
}
.accessibility-btn {
    position: fixed; top: 22px; right: 22px; left: auto; z-index: 5;
    width: 38px; height: 38px;
    display: inline-grid; place-items: center;
    padding: 0; border-radius: 12px;
    border: 1px solid var(--line); background: var(--surface);
    color: var(--ink-2); cursor: pointer;
    box-shadow: 0 10px 24px -18px color-mix(in srgb, var(--ink) 45%, transparent);
}
.accessibility-btn:hover,
.accessibility-btn.is-active {
    border-color: color-mix(in srgb, var(--accent) 42%, var(--line));
    background: color-mix(in srgb, var(--accent-soft) 56%, var(--surface));
    color: var(--accent);
}
.accessibility-btn:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--accent) 32%, transparent);
    outline-offset: 3px;
}
body:has(.public-booking) > .accessibility-btn {
    display: none;
}

/* ===== AUTH SPLIT (login) ================================================== */
.auth-split { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(420px, 0.86fr); }

.auth-left {
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--accent) 8%, var(--bg)) 0%, var(--bg) 60%);
    position: relative; overflow: hidden; padding: 48px;
    display: flex; flex-direction: column; justify-content: space-between;
}
.auth-left::before {
    content: ""; position: absolute; top: -10%; right: -10%;
    width: 60%; height: 60%; border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--accent) 20%, transparent) 0%, transparent 70%);
    filter: blur(40px); animation: float1 18s ease-in-out infinite;
}
.auth-left::after {
    content: ""; position: absolute; bottom: -10%; left: -10%;
    width: 50%; height: 50%; border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--warm) 18%, transparent) 0%, transparent 70%);
    filter: blur(40px); animation: float2 22s ease-in-out infinite;
}
.auth-left > * { position: relative; z-index: 2; }

@keyframes float1 { 0%,100% { transform: translate(0,0); } 50% { transform: translate(-30px, 40px); } }
@keyframes float2 { 0%,100% { transform: translate(0,0); } 50% { transform: translate(50px, -30px); } }

.auth-brand { display: inline-flex; align-items: center; gap: 12px; }

.auth-pitch .eyebrow {
    font-size: 11px; font-weight: 700; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--accent); margin-bottom: 16px;
}
.auth-headline {
    font-size: 44px; font-weight: 500; line-height: 1.05; color: var(--ink);
    letter-spacing: -0.025em; margin-bottom: 20px;
}
.auth-subhead {
    font-size: 15px; line-height: 1.55; color: var(--ink-2); max-width: 28rem;
}

.stat-row {
    display: flex; gap: 32px; flex-wrap: wrap;
    padding-top: 24px; margin-top: 24px;
    border-top: 1px solid color-mix(in srgb, var(--line) 50%, transparent);
}
.stat-row .label {
    font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em;
    color: var(--muted); text-transform: uppercase;
}
.stat-row .value {
    font-family: 'Fraunces', serif; font-weight: 600; font-size: 20px;
    color: var(--ink); margin-top: 3px; line-height: 1;
}

.auth-footer-link { font-size: 12px; color: var(--muted); }
.auth-footer-link a { font-weight: 500; color: var(--ink-2); text-decoration: none; }
.auth-footer-link a:hover { text-decoration: underline; }

/* ===== RESERVA PÚBLICA ==================================================== */
.public-booking {
    min-height: 100svh;
    display: grid;
    align-items: start;
    justify-items: center;
    padding: 28px 22px;
    overflow-x: hidden;
    background:
        radial-gradient(48% 42% at 18% 18%,
            color-mix(in srgb, var(--accent-soft) 48%, transparent) 0,
            transparent 68%),
        linear-gradient(180deg, var(--bg), color-mix(in srgb, var(--surface) 84%, var(--bg)));
}
.public-booking-shell {
    width: min(1408px, 100%);
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
    align-items: start;
    min-width: 0;
}
.public-booking-hero,
.public-booking-card {
    border: 1px solid color-mix(in srgb, var(--accent) 16%, var(--line));
    border-radius: 24px;
    background: color-mix(in srgb, var(--surface) 94%, transparent);
    box-shadow: 0 34px 100px -68px color-mix(in srgb, var(--ink) 70%, transparent);
}
.public-booking-hero {
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-width: 0;
    overflow: hidden;
}
.public-brand {
    display: inline-flex !important;
    margin: 0;
}
.public-hero-topbar {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.public-hero-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}
.public-hero-icon-btn {
    width: 38px;
    height: 38px;
    display: inline-grid;
    place-items: center;
    padding: 0;
    border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--line));
    border-radius: 12px;
    background: color-mix(in srgb, var(--surface) 92%, white);
    color: var(--accent-hover);
    cursor: pointer;
    appearance: none;
    box-shadow:
        0 12px 30px -24px color-mix(in srgb, var(--ink) 48%, transparent),
        inset 0 1px 0 color-mix(in srgb, white 70%, transparent);
    transition: border-color .15s ease, background .15s ease, color .15s ease, transform .15s ease;
}
.public-hero-icon-btn svg {
    color: var(--accent);
}

/* Pill "Recursos" · mismo idioma visual que los icon-btn (mismo borde, fondo
   y shadow) pero con label inline + radius pill. Link al hub editorial. */
.public-hero-recursos-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 38px;
    padding: 0 14px 0 12px;
    border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--line));
    border-radius: 999px;
    background: color-mix(in srgb, var(--surface) 92%, white);
    color: var(--accent-hover);
    font-family: 'Inter Tight', 'Inter', sans-serif;
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    box-shadow:
        0 12px 30px -24px color-mix(in srgb, var(--ink) 48%, transparent),
        inset 0 1px 0 color-mix(in srgb, white 70%, transparent);
    transition: border-color .15s ease, background .15s ease, color .15s ease, transform .15s ease;
}
.public-hero-recursos-btn:hover {
    border-color: color-mix(in srgb, var(--accent) 42%, var(--line));
    background: color-mix(in srgb, var(--accent-soft) 56%, var(--surface));
    color: var(--accent-deep);
    transform: translateY(-1px);
}
.public-hero-recursos-btn:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--accent) 32%, transparent);
    outline-offset: 2px;
}
.public-hero-recursos-btn svg {
    color: var(--accent);
    flex-shrink: 0;
}

/* Mobile · solo icono, sin label. Threshold conservador (≤480px) para que
   en tablets aún se vea el texto. */
@media (max-width: 480px) {
    .public-hero-recursos-btn {
        padding: 0;
        width: 38px;
        justify-content: center;
        border-radius: 12px;
    }
    .public-hero-recursos-btn span { display: none; }
}
.public-hero-icon-btn:hover,
.public-hero-icon-btn.is-active {
    border-color: color-mix(in srgb, var(--accent) 42%, var(--line));
    background: color-mix(in srgb, var(--accent-soft) 56%, var(--surface));
    color: var(--accent);
}
.public-hero-icon-btn:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--accent) 32%, transparent);
    outline-offset: 3px;
}
.public-hero-icon-btn:active { transform: translateY(1px); }
.public-booking-intro {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(240px, .65fr);
    gap: 18px;
    align-items: stretch;
}
.public-booking-profile {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    min-width: 0;
}
.public-profile-copy {
    min-width: 0;
    flex: 1;
}
.public-kicker {
    color: var(--accent);
    font-size: 11px;
    font-weight: 850;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.public-booking-profile h1 {
    margin: 3px 0 4px;
    color: var(--ink);
    font-size: 28px;
    line-height: 1.04;
    overflow-wrap: anywhere;
}
.public-profile-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}
.public-credential {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 3px 9px;
    border: 1px solid color-mix(in srgb, var(--ink) 12%, var(--line));
    border-radius: 999px;
    background: color-mix(in srgb, var(--surface-2) 64%, var(--surface));
    color: var(--ink-2);
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11px;
    font-weight: 760;
    letter-spacing: .01em;
}
.public-booking-bio {
    margin-top: 14px;
    max-width: 640px;
    padding-left: 12px;
    border-left: 2px solid color-mix(in srgb, var(--accent) 48%, var(--line));
}
.public-booking-bio span {
    display: block;
    margin-bottom: 5px;
    color: var(--accent);
    font-size: 10.5px;
    font-weight: 880;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.public-booking-bio p {
    margin: 0;
    color: var(--ink-2);
    font-size: 13.5px;
    line-height: 1.5;
}
.public-specialty-chips,
.config-specialty-chips {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
}
.public-specialty-chips {
    margin-top: 0;
}
/* `> span` para que solo el chip (hijo directo) reciba el pill style ·
   los <span> internos del nuevo markup (icono + label) NO se anidan en
   otra pill. */
.public-specialty-chips > span,
.config-specialty-chips .specialty-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 27px;
    padding: 5px 10px;
    border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--line));
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent-soft) 44%, var(--surface));
    color: var(--accent);
    font-size: 11.5px;
    font-weight: 850;
    line-height: 1;
}
/* Chip con ícono · más espacio a la izquierda · el badge ocupa 16px */
.public-specialty-chips > span.has-icon,
.config-specialty-chips .specialty-chip.has-icon {
    padding-left: 6px;
    gap: 5px;
}
.public-specialty-icon,
.specialty-chip-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px; height: 18px;
    flex: 0 0 18px;
    color: var(--accent);
    opacity: .92;
}
.public-specialty-icon svg,
.specialty-chip-icon svg {
    width: 14px;
    height: 14px;
    color: currentColor;
    stroke: currentColor;
}
.specialty-chip-icon .esp-picker-item-icon { color: inherit; }
.public-specialty-icon.is-hidden,
.specialty-chip-icon.is-hidden { display: none; }
.config-specialty-helper {
    margin-top: 8px;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.35;
}
.config-specialty-chips {
    margin-top: 10px;
    min-height: 29px;
}
.config-specialty-chips small {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.35;
}
/* Antes los chips pares se pintaban con tinte 'warm' (rojizo). Confunde con
   estado de error. Ahora todos comparten el mismo accent celeste para
   coherencia visual. */
.config-specialty-chips .specialty-chip b {
    font: inherit;
}
.config-specialty-chips .specialty-chip button {
    width: 18px;
    height: 18px;
    display: inline-grid;
    place-items: center;
    margin-right: -4px;
    border: 0;
    border-radius: 999px;
    background: color-mix(in srgb, currentColor 10%, transparent);
    color: currentColor;
    cursor: default;
}
.config-specialty-chips .specialty-chip button:hover {
    background: color-mix(in srgb, currentColor 18%, transparent);
}
.config-specialty-chips .specialty-chip.is-new {
    position: relative;
    animation: specialty-chip-in .28s cubic-bezier(.2,.9,.22,1.18);
}
@keyframes specialty-chip-in {
    from { opacity: 0; transform: translateY(5px) scale(.96); }
    to { opacity: 1; transform: none; }
}
.specialty-loader-inline {
    width: 48px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 2px;
    border: 0 !important;
    background: transparent !important;
    padding: 0 !important;
    color: var(--accent);
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity .18s ease, transform .18s ease;
}
.specialty-loader-inline[hidden] {
    display: none;
}
.specialty-loader-inline.show {
    opacity: 1;
    transform: none;
}
.specialty-loader-inline.closing {
    opacity: 0;
    transform: translateX(-4px);
}
.specialty-loader-inline .v-loader-mark {
    width: 44px;
    height: 24px;
}
.specialty-loader-inline .v-loader-circle {
    top: 3px;
    width: 18px;
    height: 18px;
    border-width: 1.8px;
    background: transparent;
    box-shadow: none;
}
.specialty-loader-inline .v-loader-left {
    left: 8px;
}
.specialty-loader-inline .v-loader-right {
    right: 8px;
}

/* ========================================================================== */
/* ===== Especialidades · botón "Elegir del catálogo" + modal picker ======= */
/* ========================================================================== */

.specialty-empty-hint {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.35;
    align-self: center;
}
/* Botón "Editar selección" · borde dasheado todo el contorno para que no
   se confunda con las chips de estado pero mantenga vibra de "+ agregar". */
.specialty-add-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    padding: 7px 14px;
    background: transparent;
    border: 1px dashed color-mix(in srgb, var(--accent) 45%, var(--line));
    color: var(--accent);
    border-radius: 8px;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s, border-color .15s;
    line-height: 1;
}
.specialty-add-btn:hover {
    background: color-mix(in srgb, var(--accent-soft) 35%, var(--surface));
    border-color: var(--accent);
}
.specialty-add-btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
.specialty-add-btn svg {
    flex-shrink: 0;
}

/* ===== Modal picker ===== */
/* z-index alto · debe quedar arriba del sidebar (que en mobile flota a 1200) y
   de los topbars colapsados. 3000 deja headroom y baja del v-loader (que va
   arriba de todo). */
.esp-picker {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: block;
}
.esp-picker[hidden] { display: none; }
.esp-picker-scrim {
    position: absolute;
    inset: 0;
    background: color-mix(in srgb, var(--ink) 42%, transparent);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    opacity: 0;
    transition: opacity .22s ease;
}
.esp-picker.is-open .esp-picker-scrim { opacity: 1; }
.esp-picker-panel {
    position: absolute;
    inset: 50% auto auto 50%;
    transform: translate(-50%, -46%) scale(.98);
    width: min(620px, calc(100vw - 32px));
    height: min(680px, calc(100vh - 48px));
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 16px;
    box-shadow: 0 24px 64px -24px color-mix(in srgb, var(--ink) 50%, transparent);
    display: grid;
    grid-template-rows: auto auto 1fr auto;
    overflow: hidden;
    opacity: 0;
    transition: opacity .22s ease, transform .22s ease;
}
.esp-picker.is-open .esp-picker-panel {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.esp-picker-header {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 20px 22px 14px;
    border-bottom: 1px solid var(--line);
}
.esp-picker-header > div { flex: 1; min-width: 0; }
.esp-picker-kicker {
    display: inline-block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--accent);
    font-weight: 700;
    margin-bottom: 4px;
}
.esp-picker-title {
    font-size: 20px;
    line-height: 1.2;
    margin: 0;
    color: var(--ink);
}
.esp-picker-subtitle {
    margin: 4px 0 0;
    font-size: 12.5px;
    color: var(--muted);
}
.esp-picker-close {
    flex-shrink: 0;
    border: 0;
    background: transparent;
    color: var(--muted);
    padding: 6px;
    border-radius: 8px;
    cursor: pointer;
    line-height: 0;
}
.esp-picker-close:hover {
    background: color-mix(in srgb, var(--surface-2) 60%, transparent);
    color: var(--ink-2);
}

.esp-picker-searchbar {
    position: relative;
    display: flex;
    align-items: center;
    padding: 12px 22px 12px;
}
.esp-picker-search-icon {
    position: absolute;
    left: 34px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--muted);
    pointer-events: none;
}
.esp-picker-search {
    flex: 1;
    width: 100%;
    padding: 10px 36px 10px 38px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 10px;
    font-size: 13.5px;
    color: var(--ink);
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}
.esp-picker-search:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
.esp-picker-search-clear {
    position: absolute;
    right: 30px;
    top: 50%;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    border: 0;
    background: color-mix(in srgb, var(--surface-2) 70%, transparent);
    color: var(--ink-2);
    border-radius: 999px;
    cursor: pointer;
}
.esp-picker-search-clear:hover {
    background: color-mix(in srgb, var(--surface-2) 100%, transparent);
}

.esp-picker-list {
    overflow-y: auto;
    padding: 4px 22px 16px;
    min-height: 0;
}
.esp-picker-loading {
    text-align: center;
    padding: 30px 0;
    font-size: 13px;
}
.esp-picker-empty {
    text-align: center;
    padding: 20px 22px;
    font-size: 13px;
}

.esp-picker-group + .esp-picker-group {
    margin-top: 14px;
}
.esp-picker-group-title {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--muted);
    margin: 0 0 8px;
    font-weight: 700;
}
.esp-picker-group-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}
.esp-picker-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 9px;
    cursor: pointer;
    text-align: left;
    font: inherit;
    color: var(--ink);
    transition: background .12s, border-color .12s;
    min-width: 0;
}
.esp-picker-item:hover:not(.is-disabled) {
    border-color: color-mix(in srgb, var(--accent) 35%, var(--line));
    background: color-mix(in srgb, var(--accent-soft) 18%, var(--surface));
}
.esp-picker-item.is-selected {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent-soft) 45%, var(--surface));
}
.esp-picker-item.is-disabled {
    opacity: .45;
    cursor: not-allowed;
}
.esp-picker-item-check {
    width: 16px;
    height: 16px;
    display: grid;
    place-items: center;
    border: 1.5px solid var(--line);
    border-radius: 4px;
    background: var(--surface);
    color: var(--accent);
    flex-shrink: 0;
    transition: border-color .12s, background .12s;
}
.esp-picker-item.is-selected .esp-picker-item-check {
    border-color: var(--accent);
    background: var(--accent);
    color: #fff;
}
.esp-picker-item-icon {
    flex-shrink: 0;
    color: var(--muted);
    transition: color .12s;
}
.esp-picker-item:hover:not(.is-disabled) .esp-picker-item-icon,
.esp-picker-item.is-selected .esp-picker-item-icon {
    color: var(--accent);
}
.esp-picker-item-label {
    font-size: 13px;
    font-weight: 550;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
}

.esp-picker-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 22px 16px;
    border-top: 1px solid var(--line);
    background: color-mix(in srgb, var(--surface-2) 30%, var(--surface));
}
.esp-picker-count {
    font-size: 12px;
    color: var(--muted);
    font-feature-settings: "tnum" 1;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.esp-picker-count.is-full {
    color: var(--accent);
    font-weight: 700;
}
.esp-picker-actions {
    display: inline-flex;
    gap: 8px;
}

body.esp-picker-open { overflow: hidden; }

/* Mobile · panel full-height, grid colapsa a 1 columna */
@media (max-width: 640px) {
    .esp-picker-panel {
        width: calc(100vw - 12px);
        height: calc(100vh - 24px);
        max-height: none;
    }
    .esp-picker-header { padding: 16px 16px 12px; }
    .esp-picker-searchbar { padding: 10px 16px 10px; }
    .esp-picker-search-icon { left: 28px; }
    .esp-picker-search-clear { right: 24px; }
    .esp-picker-list { padding: 4px 16px 12px; }
    .esp-picker-group-list { grid-template-columns: 1fr; }
    .esp-picker-footer { padding: 10px 16px 14px; }
}

/* ========================================================================== */


.public-booking-summary {
    display: grid;
    grid-template-columns: 1fr;
    gap: 9px;
    align-content: start;
    padding: 14px;
    border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line));
    border-radius: 20px;
    background:
        linear-gradient(145deg,
            color-mix(in srgb, var(--accent-soft) 54%, var(--surface)) 0%,
            color-mix(in srgb, var(--surface) 92%, var(--accent-soft)) 100%);
    box-shadow: inset 0 1px 0 color-mix(in srgb, white 55%, transparent);
}

@media (min-width: 861px) {
    .public-booking {
        padding: 34px 32px;
    }
    .public-booking-hero {
        padding: 34px 38px 38px;
        gap: 28px;
        border-radius: 24px;
    }
    .public-brand {
        align-self: flex-start;
    }
    .public-brand .logo-mandorla {
        width: 42px;
        height: 28px;
    }
    .public-brand span {
        font-size: 28px;
        line-height: 1;
    }
    .public-booking-intro {
        grid-template-columns: minmax(0, 1fr) minmax(360px, 420px);
        gap: clamp(28px, 4vw, 48px);
        align-items: stretch;
    }
    .public-booking-profile {
        display: grid;
        grid-template-columns: clamp(122px, 11vw, 158px) minmax(0, 1fr);
        gap: clamp(22px, 2.4vw, 30px);
        align-items: center;
        min-height: 342px;
        padding: 28px 30px;
        border-radius: 18px;
        background: color-mix(in srgb, var(--surface-2) 68%, var(--surface));
        box-shadow: inset 0 1px 0 color-mix(in srgb, white 78%, transparent);
    }
    .public-booking-profile .av-lg,
    .public-booking-profile .avatar-photo.av-lg {
        width: clamp(122px, 11vw, 158px);
        height: clamp(122px, 11vw, 158px);
        font-size: 42px;
        box-shadow:
            0 22px 58px -36px color-mix(in srgb, var(--ink) 70%, transparent),
            0 0 0 8px color-mix(in srgb, var(--surface) 66%, transparent);
    }
    .public-kicker {
        font-size: 12px;
        letter-spacing: .14em;
    }
    .public-booking-profile h1 {
        margin: 7px 0 8px;
        max-width: 780px;
        font-size: clamp(34px, 3.2vw, 48px);
        line-height: 1.02;
    }
    .public-profile-meta {
        gap: 9px;
        margin-top: 10px;
    }
    .public-credential,
    .public-specialty-chips > span {
        min-height: 30px;
        padding: 6px 13px;
        font-size: 13px;
    }
    .public-booking-bio {
        margin-top: 24px;
        max-width: 620px;
        padding-left: 18px;
    }
    .public-booking-bio span {
        font-size: 12px;
        letter-spacing: .14em;
    }
    .public-booking-bio p {
        font-size: 16px;
        line-height: 1.52;
    }
    .public-booking-summary {
        min-height: 342px;
        padding: 22px;
        gap: 14px;
        border-radius: 18px;
        align-content: start;
    }
    .public-summary-head {
        padding: 0 4px 13px;
    }
    .public-summary-head span {
        font-size: 12px;
        letter-spacing: .14em;
    }
    .public-summary-head strong {
        font-size: 17px;
    }
    .public-booking-summary .public-price-card,
    .public-summary-whatsapp {
        min-height: 78px;
        padding: 14px 16px;
        border-radius: 14px;
        gap: 13px;
    }
    .public-booking-summary .public-price-card {
        grid-template-columns: auto minmax(0, 1fr);
    }
    .public-booking-summary .public-price-card > svg {
        display: none;
    }
    .public-price-copy {
        display: grid;
        grid-template-columns: 1fr;
    }
    .public-price-copy strong {
        font-size: 18px;
        line-height: 1.05;
    }
    .public-price-copy b {
        margin-top: 2px;
        font-size: 17px;
    }
    .public-booking-summary small {
        font-size: 13px;
    }
    .public-summary-choice {
        margin: 2px 4px 8px;
        font-size: 13.5px;
    }
    .public-summary-whatsapp {
        margin-top: auto;
    }
}
.public-summary-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
    padding: 2px 3px 6px;
    border-bottom: 1px solid color-mix(in srgb, var(--accent) 15%, var(--line));
}
.public-summary-head span {
    color: var(--accent);
    font-size: 10.5px;
    font-weight: 880;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.public-summary-head strong {
    color: var(--ink);
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 14px;
    font-weight: 800;
}
.public-booking-summary .public-price-card,
.public-summary-whatsapp {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 74px;
    padding: 14px;
    border-radius: 15px;
    border: 1px solid color-mix(in srgb, var(--ink) 10%, var(--line));
    background: color-mix(in srgb, var(--surface) 88%, white);
    color: var(--ink);
}
.public-booking-summary .public-price-card {
    position: relative;
    cursor: pointer;
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr);
    text-align: left;
    transition: border-color .16s ease, background .16s ease, box-shadow .16s ease, transform .16s ease;
}
.public-booking-summary .public-price-card.is-active {
    border-color: color-mix(in srgb, var(--accent) 82%, var(--line));
    background: color-mix(in srgb, var(--accent-soft) 68%, var(--surface));
    box-shadow:
        inset 0 0 0 1px color-mix(in srgb, var(--accent) 46%, transparent),
        0 12px 28px -24px color-mix(in srgb, var(--accent) 55%, transparent);
}
.public-price-check {
    width: 21px;
    height: 21px;
    border-radius: 50%;
    border: 1.6px solid color-mix(in srgb, var(--muted) 55%, var(--line));
    background: var(--surface);
    box-shadow: inset 0 0 0 4px var(--surface);
    display: inline-grid;
    place-items: center;
}
.public-price-card.is-active .public-price-check {
    border-color: var(--accent);
    background: var(--accent);
    box-shadow: none;
}
.public-price-card.is-active .public-price-check::after {
    content: "";
    width: 8px;
    height: 5px;
    border-left: 2px solid white;
    border-bottom: 2px solid white;
    transform: rotate(-45deg) translateY(-1px);
}
.public-price-copy {
    min-width: 0;
}
.public-price-copy b {
    display: block;
    margin-top: 3px;
    color: var(--ink);
    font-size: 14.5px;
    font-weight: 780;
    line-height: 1.16;
}
.public-price-card.is-active .public-price-copy b {
    color: color-mix(in srgb, var(--accent) 82%, var(--ink));
}
.public-selected-pill {
    display: none;
    position: absolute;
    top: 12px;
    right: 12px;
    padding: 3px 8px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--surface) 86%, var(--accent-soft));
    color: color-mix(in srgb, var(--accent) 88%, var(--ink));
    font-size: 10.4px;
    font-weight: 740;
    letter-spacing: 0;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 10%, transparent);
}
.public-price-card.is-active .public-selected-pill {
    display: inline-flex;
}
.public-booking-summary .public-price-card:hover {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--accent) 36%, var(--line));
}
.public-booking-summary svg,
.public-summary-whatsapp svg {
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    padding: 8px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--accent-soft) 55%, var(--surface));
    color: var(--accent);
}
.public-booking-summary strong,
.public-booking-summary b,
.public-booking-summary small {
    display: block;
}
.public-booking-summary strong {
    color: var(--ink);
    font-size: 15px;
    font-weight: 800;
}
.public-booking-summary small {
    margin-top: 2px;
    color: var(--muted);
    font-size: 11.6px;
    line-height: 1.35;
}
.public-summary-choice {
    margin: -1px 3px 6px;
    color: var(--ink-2);
    font-size: 11.5px;
    line-height: 1.35;
}
@media (min-width: 861px) {
    .public-summary-head {
        padding: 0 4px 13px;
    }
    .public-summary-head span {
        font-size: 12px;
        letter-spacing: .14em;
    }
    .public-summary-head strong {
        font-size: 17px;
    }
    .public-booking-summary .public-price-card,
    .public-summary-whatsapp {
        min-height: 78px;
        padding: 14px 16px;
        border-radius: 14px;
        gap: 13px;
    }
    .public-booking-summary .public-price-card {
        grid-template-columns: auto minmax(0, 1fr);
    }
    .public-booking-summary .public-price-card > svg {
        display: none;
    }
    .public-price-copy {
        display: grid;
        grid-template-columns: 1fr;
    }
    .public-price-copy strong {
        font-size: 18px;
        line-height: 1.05;
    }
    .public-price-copy b {
        margin-top: 2px;
        font-size: 17px;
    }
    .public-booking-summary small {
        font-size: 13px;
    }
    .public-summary-choice {
        margin: 2px 4px 8px;
        font-size: 13.5px;
    }
    .public-summary-whatsapp {
        margin-top: auto;
    }
}
.public-booking-card {
    padding: 22px;
}
.public-step {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin-bottom: 16px;
}
.public-step-second {
    margin-top: 22px;
}
.public-step-number {
    width: 34px;
    height: 34px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    background: var(--accent-soft);
    color: var(--accent);
    font-weight: 850;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.public-step h2 {
    margin: 0;
    color: var(--ink);
    font-size: 20px;
    line-height: 1.05;
}
.public-step p {
    margin: 4px 0 0;
    color: var(--muted);
    font-size: 12.5px;
}
.public-date-wrap {
    position: relative;
}
.public-date-trigger {
    min-height: 48px;
    border-radius: 14px;
    padding: 12px 14px;
    font-size: 13.5px;
}
.public-date-trigger .date-text {
    font-family: 'Inter', sans-serif;
    font-weight: 820;
}
.public-date-popover {
    width: min(320px, calc(100vw - 44px));
    border-radius: 16px;
    z-index: 120;
}
.public-date-footer {
    align-items: center;
}
/* Stack vertical de las dos líneas informativas (copy + límite de fechas).
   `min-width: 0 + flex: 1` deja que el botón "Cerrar" mantenga su lugar a la
   derecha sin colapsar este lado, y permite truncar si el ancho no alcanza. */
.public-date-footer-copy {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    flex: 1;
}
/* Línea del límite · misma jerarquía visual que la copy de arriba (muted,
   11px), pero con tabular-nums para que "DD mmm" quede alineado. Sin icono,
   sin acento — info plana, igual que su sibling. */
.public-date-limit {
    color: var(--muted);
    font-size: 11px;
    line-height: 1.3;
    font-variant-numeric: tabular-nums;
}
.public-date-limit[hidden] { display: none !important; }
.public-date-footer button {
    border: 0;
    background: transparent;
    color: var(--accent);
    font-size: 11.5px;
    font-weight: 800;
    cursor: pointer;
}
.public-slots {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(94px, 1fr));
    gap: 9px;
    min-height: 46px;
    margin-top: 12px;
}
.public-slot {
    min-height: 42px;
    border: 1px solid var(--line);
    border-radius: 13px;
    background: var(--surface);
    color: var(--ink-2);
    font: 750 13px 'JetBrains Mono', ui-monospace, monospace;
    cursor: pointer;
}
.public-slot:hover,
.public-slot.selected {
    color: var(--accent);
    border-color: color-mix(in srgb, var(--accent) 42%, var(--line));
    background: color-mix(in srgb, var(--accent-soft) 54%, var(--surface));
}
.public-slots-empty {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    grid-column: 1 / -1;
    padding: 12px 14px;
    border-radius: 14px;
    color: var(--muted);
    background: var(--surface-2);
    border: 1px solid transparent;
    font-size: 13px;
    line-height: 1.42;
}
.public-slots-empty svg {
    flex-shrink: 0;
    margin-top: 2px;
}
.public-slots-empty.is-error {
    color: color-mix(in srgb, var(--rose) 84%, var(--ink));
    background: color-mix(in srgb, var(--rose) 8%, var(--surface));
    border-color: color-mix(in srgb, var(--rose) 24%, var(--line));
}
.public-slots-empty.is-muted {
    color: var(--muted);
    background: color-mix(in srgb, var(--surface-2) 80%, var(--surface));
    border-color: var(--line-soft);
}
.public-next-panel {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-top: 14px;
    padding: 11px 13px;
    border-radius: 14px;
    color: var(--muted);
    background: color-mix(in srgb, var(--surface-2) 80%, var(--surface));
    border: 1px solid var(--line-soft);
    font-size: 12.5px;
    line-height: 1.38;
}
.public-next-panel.is-ready {
    color: color-mix(in srgb, var(--ok) 78%, var(--ink));
    background: color-mix(in srgb, var(--ok) 10%, var(--surface));
    border-color: color-mix(in srgb, var(--ok) 25%, var(--line));
}
.public-form-alert,
.field-info {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 11px 13px;
    border-radius: 14px;
    font-size: 12.5px;
    line-height: 1.4;
}
.public-form-alert {
    margin: 12px 0 2px;
}
.public-form-alert[hidden],
.field-info[hidden],
.public-duplicate-note[hidden],
.public-duplicate-line[hidden] {
    display: none !important;
}
.public-form-alert svg {
    flex: 0 0 auto;
    margin-top: 2px;
}
.public-form-alert.is-error {
    color: var(--field-warning);
    background: var(--field-warning-soft);
    border: 1px solid var(--field-warning-edge);
    font-weight: 400;
    font-size: 13px;
    line-height: 1.5;
}
.public-form-alert.is-error svg { display: none; }
.field-info {
    margin-top: 8px;
    color: color-mix(in srgb, var(--accent) 78%, var(--ink));
    background: color-mix(in srgb, var(--accent-soft) 44%, var(--surface));
    border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--line));
}
.public-duplicate-note {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: min(100%, 285px);
    min-width: 0;
    padding: 4px 8px;
    border-radius: 999px;
    color: color-mix(in srgb, var(--accent) 82%, var(--ink));
    background: color-mix(in srgb, var(--accent-soft) 58%, var(--surface));
    border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--line));
    font-size: 10.8px;
    font-weight: 760;
    line-height: 1.25;
}
.public-duplicate-note span:last-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.public-duplicate-line {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    width: max-content;
    max-width: 100%;
    margin-top: -3px;
    padding: 0 2px;
    color: color-mix(in srgb, var(--accent) 78%, var(--ink));
    font-size: 12px;
    font-weight: 760;
    line-height: 1.3;
}
.public-duplicate-line span:last-child {
    min-width: 0;
    white-space: normal;
}
.public-email-hint {
    margin: 7px 0 0;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.35;
}
.public-next-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    flex-shrink: 0;
    background: currentColor;
    opacity: .72;
}
.public-details[hidden] {
    display: none !important;
}
.public-details {
    margin-top: 2px;
    animation: publicDetailsIn .22s ease both;
}
@keyframes publicDetailsIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
}
.public-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}
.public-span-2 {
    grid-column: 1 / -1;
}
.public-modality {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin: 14px 0;
}
.public-modality button {
    min-height: 36px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface);
    color: var(--ink-2);
    font-size: 13px;
    font-weight: 760;
    letter-spacing: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 0;
    box-shadow: none;
}
.public-modality button.active {
    border-color: color-mix(in srgb, var(--accent) 34%, var(--line));
    background: color-mix(in srgb, var(--accent-soft) 48%, var(--surface));
    color: color-mix(in srgb, var(--accent) 86%, var(--ink));
}
.public-modality .mode-icon {
    width: 13px;
    height: 13px;
}
.public-consent {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin: 8px 0 0;
    padding: 11px 12px;
    border: 1px solid #E7EDF3;
    background: #FFFFFF;
    border-radius: 12px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.5;
    transition: border-color .18s ease;
}
.public-consent input {
    margin-top: 2px;
    width: 17px;
    height: 17px;
    accent-color: var(--accent);
}
.public-consent-wrap {
    margin: 8px 0 18px;
}
/* Estado pendiente: SOLO el borde cambia. Sin fondo, sin halo, sin shake.
   La guidance vive en el .field-msg debajo del bloque, pequeña y suave. */
.public-consent-wrap.has-error .public-consent {
    border-color: var(--field-warning-edge-strong);
}
.public-success {
    align-self: start;
}

.auth-right {
    background: var(--surface); border-left: 1px solid var(--line);
    padding: 48px;
    display: flex; flex-direction: column; align-items: stretch; justify-content: center;
    position: relative;
}
.auth-form-wrap { width: 100%; max-width: 400px; margin: 0 auto; }
.auth-mobile-brand,
.auth-mobile-pitch { display: none; }
.auth-mobile-brand {
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
    text-decoration: none;
    color: var(--ink);
}
.auth-mobile-brand span {
    font-size: 23px;
    font-weight: 650;
}
.auth-mobile-pitch {
    padding: 13px 14px;
    border-radius: 12px;
    border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--line));
    background: color-mix(in srgb, var(--accent-soft) 34%, var(--surface));
    margin-bottom: 22px;
}
.auth-mobile-pitch strong {
    display: block;
    color: var(--ink);
    font-size: 14px;
    line-height: 1.25;
}
.auth-mobile-pitch span {
    display: block;
    margin-top: 5px;
    color: var(--ok);
    font-size: 12.5px;
    font-weight: 750;
}

.auth-h2 {
    font-size: 36px; font-weight: 500; line-height: 1.05; color: var(--ink);
    margin-bottom: 8px;
}
.auth-h2-sub { font-size: 14.5px; color: var(--ink-2); line-height: 1.55; margin-bottom: 30px; }

.auth-email-form {
    display: grid;
    gap: 18px;
}
.auth-email-form .field-helper {
    margin: 10px 0 0;
    max-width: 44ch;
}
.auth-email-form .block-cta {
    min-height: 56px;
}
.auth-email-form .auth-disclaimer {
    margin: 4px 0 0;
}

.auth-disclaimer {
    font-size: 12px; text-align: center; color: var(--muted);
    line-height: 1.5; margin-top: 16px;
}

.auth-step2-links {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    align-items: stretch;
    font-size: 13px;
    margin-top: 12px;
}

.auth-legal {
    position: absolute; bottom: 24px; left: 0; right: 0; text-align: center;
    font-size: 12px; color: var(--muted);
}
.auth-legal a { text-decoration: none; }
.auth-legal a:hover { color: var(--ink-2); }

@media (max-width: 1180px) {
    .auth-split {
        grid-template-columns: minmax(0, 0.92fr) minmax(400px, 1fr);
    }
    .auth-left {
        padding: 36px;
    }
    .auth-headline {
        font-size: 38px;
    }
    .stat-row {
        gap: 20px;
    }
    .stat-row .value {
        font-size: 18px;
    }
}

@media (max-width: 900px) {
    .auth-split {
        min-height: 100svh;
        grid-template-columns: 1fr;
        background:
            linear-gradient(180deg, color-mix(in srgb, var(--accent-soft) 40%, var(--bg)) 0%, var(--surface) 44%, var(--surface) 100%);
    }
    .auth-left {
        display: none;
    }
    .auth-right {
        min-height: 100svh;
        justify-content: center;
        border-left: none;
        padding: 72px 22px 30px;
        background: transparent;
    }
    .auth-form-wrap {
        max-width: 520px;
    }
    .auth-mobile-brand {
        display: inline-flex;
    }
    .auth-mobile-pitch {
        display: block;
    }
    .auth-step {
        border: 1px solid color-mix(in srgb, var(--line) 78%, transparent);
        border-radius: 18px;
        background: color-mix(in srgb, var(--surface) 94%, transparent);
        box-shadow: 0 24px 70px -42px color-mix(in srgb, var(--ink) 42%, transparent);
        padding: 24px;
    }
    .free-badge {
        margin-bottom: 14px;
    }
    .auth-h2 {
        font-size: 32px;
        margin-bottom: 8px;
    }
    .auth-h2-sub {
        margin-bottom: 22px;
    }
    .auth-legal {
        position: static;
        max-width: 520px;
        margin: 18px auto 0;
        line-height: 1.5;
    }
}

@media (max-width: 520px) {
    .theme-btn {
        top: 12px;
        right: 58px;
        border-radius: 12px;
    }
    .accessibility-btn {
        top: 12px;
        right: 12px;
        left: auto;
    }
    .auth-right {
        padding: 66px 14px 24px;
    }
    .auth-mobile-brand {
        margin-bottom: 14px;
    }
    .auth-mobile-brand span {
        font-size: 21px;
    }
    .auth-mobile-pitch {
        margin-bottom: 14px;
        padding: 12px;
    }
    .auth-step {
        padding: 18px;
        border-radius: 16px;
    }
    .auth-h2 {
        font-size: 29px;
    }
    .auth-h2-sub {
        font-size: 13.5px;
        margin-bottom: 18px;
    }
    .field-label {
        font-size: 10.5px;
    }
    .input-with-icon .input {
        padding-top: 13px;
        padding-bottom: 13px;
        font-size: 15px;
    }
    .btn-primary.btn-lg {
        min-height: 52px;
        padding: 13px 16px;
        font-size: 14.5px;
    }
    .auth-disclaimer {
        font-size: 11.5px;
        margin-top: 13px;
    }
    .auth-step2-links {
        align-items: stretch;
        grid-template-columns: 1fr;
        gap: 8px;
        margin-top: 16px;
    }
    .auth-step2-links .btn-link {
        justify-content: center;
        min-height: 42px;
    }
    .code-grid {
        gap: 7px;
    }
    .code-input {
        width: min(48px, 14vw);
        height: 54px;
        border-radius: 10px;
        font-size: 22px;
    }
}

@media (max-width: 900px) and (max-height: 760px) {
    .auth-right {
        justify-content: flex-start;
    }
}

/* ===== FREE TRIAL BADGE ==================================================== */
.free-badge {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px; border-radius: 999px;
    background: color-mix(in srgb, var(--ok) 12%, transparent);
    color: var(--ok); font-size: 12px; font-weight: 600;
    border: 1px solid color-mix(in srgb, var(--ok) 25%, transparent);
    margin-bottom: 20px;
}

/* ===== INPUTS · alineado a crm-nuevo-paciente.html ======================== */
.input {
    width: 100%; padding: 11px 14px;
    border: 1px solid var(--line); border-radius: 9px;
    background: var(--surface); font-size: 14px; color: var(--ink);
    font-family: 'Inter', sans-serif;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.input:focus {
    outline: none; border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}

.input-with-icon { position: relative; }
.input-with-icon > svg {
    position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
    color: var(--muted);
}
.input-with-icon input { padding-left: 42px; }
.input-with-icon .valid-check {
    position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
    color: var(--ok); opacity: 0; pointer-events: none;
    transition: opacity .2s ease;
}

.input-with-prefix {
    display: flex; align-items: center;
    border: 1px solid var(--line); border-radius: 9px;
    background: var(--surface);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.input-with-prefix:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
/* Span del prefijo · sin background separado, solo border-right y mono · matchea mockup */
.input-with-prefix > span,
.input-with-prefix .prefix {
    padding: 0 10px 0 14px;
    font-size: 13.5px; color: var(--muted);
    border-right: 1px solid var(--line);
    font-family: 'JetBrains Mono', monospace;
}
.input-with-prefix input {
    flex: 1;
    min-width: 0;
    width: 100%;
    padding: 11px 14px;
    border: none; outline: none; background: transparent;
    font-size: 14px; color: var(--ink); font-family: 'JetBrains Mono', monospace;
}
.input-with-prefix input + span {
    flex: 0 0 auto;
    padding: 0 14px 0 10px;
    border-right: 0;
    border-left: 1px solid var(--line);
}

/* gap en lugar de space-between · cuando el label tiene icono + texto + .opt/.req,
 * space-between los empujaba a los extremos (el icono lejos del texto). Con gap,
 * el flow es natural y .opt/.req se anclan a la derecha vía margin-left: auto. */
.field-label {
    display: flex; align-items: center; gap: 6px;
    font-size: 11.5px; font-weight: 500;
    text-transform: uppercase; letter-spacing: 0.02em;
    color: #334155; margin-bottom: 10px;
}
.field-label .opt,
.field-label .req { margin-left: auto; }
/* Premium move: marcamos lo opcional, no lo obligatorio.
   El asterisco rojo grita "regla burocrática". Lo dejamos invisible
   por defecto; si alguna vista necesita reactivarlo, basta con un
   override puntual. */
.field-label .req {
    display: none;
}
.field-label .opt {
    text-transform: none; letter-spacing: 0;
    font-size: 9.5px; font-weight: 500;
    color: var(--muted);
    padding: 1px 6px; border: 1px solid var(--line); border-radius: 4px;
}
.field-helper { font-size: 12px; color: var(--muted); margin-top: 8px; line-height: 1.45; }

/* ===== GUIDANCE STATES (antes "validation/errors") =======================
   Filosofía: el campo no se "rompe", se "queda pendiente". Una sola
   capa de señal: borde sutil + fondo casi invisible. Sin halo, sin
   shake, sin íconos de alerta, sin asterisco. El mensaje guía con
   peso 400 y tono cálido — acompaña, no regaña. */
.field-wrap { position: relative; }

/* Input pendiente — UNA sola señal: borde sutil sobre el fondo normal.
   Sin tint rosa (mata el minimalismo), sin halo, sin shake, sin cambio
   de border-radius. El input se mantiene visualmente "neutro" y la
   guidance vive solo en el mensaje inferior. */
.field-wrap.has-error .input,
.field-wrap.has-error .input-with-icon input,
.field-wrap.has-error .input-with-prefix,
.field-wrap.has-error .csel-trigger {
    border-color: var(--field-warning-edge);
    background: var(--surface);
    box-shadow: none;
    animation: none;
    transition: border-color .2s ease;
}
/* Foco en campo pendiente: prevalece el accent normal. La guidance sigue
   siendo el texto inferior — no insistimos visualmente sobre el input. */
.field-wrap.has-error .input:focus,
.field-wrap.has-error .input:focus-visible,
.field-wrap.has-error .input-with-icon input:focus,
.field-wrap.has-error .input-with-prefix:focus-within,
.field-wrap.has-error .csel-trigger:focus-visible {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent);
}

/* Success — sage suave, no semáforo */
.field-wrap.is-valid .input,
.field-wrap.is-valid .input-with-icon input,
.field-wrap.is-valid .input-with-prefix {
    border-color: color-mix(in srgb, var(--ok) 35%, var(--line));
}
.field-wrap.is-valid .valid-check { opacity: 1; }

/* Mensaje de guidance — texto puro, sin dot, sin íconos. Es la voz
   que acompaña, no un indicador de sistema. Coincide tipográficamente
   con el helper text base. */
.field-msg {
    display: flex; align-items: center;
    margin-top: 10px;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: 0;
    color: var(--field-warning);
    opacity: 0;
    transition: opacity .18s ease;
    height: 0; overflow: hidden;
}
.field-wrap.has-error .field-msg {
    opacity: 1;
    height: auto;
    overflow: visible;
}
/* Anulamos cualquier ícono SVG inyectado por componentes legacy. */
.field-msg svg { display: none; }

/* Variantes legacy (auth-email + cooldown) — antes usaban #DC2626 hardcoded.
   Las alineamos al sistema guidance. */
.auth-email-form .field-wrap.has-error .field-msg,
.auth-email-form .field-wrap.has-error .field-msg .field-link,
.auth-email-form .field-wrap.has-error .field-msg .suggest-btn {
    color: var(--field-warning);
}
.field-wrap.is-cooldown .input-with-icon input {
    border-color: var(--field-warning-edge);
    background: var(--surface);
    box-shadow: none;
    animation: none;
}
.field-wrap.is-cooldown .field-msg {
    opacity: 1;
    height: auto;
    overflow: visible;
    color: var(--field-warning);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.5;
}
/* Links/botones dentro del mensaje — peso medio (500), no 700, mantienen
   el tono cálido y se subrayan suavemente para diferenciarse del texto. */
.field-msg .suggest-btn {
    color: var(--field-warning);
    font-weight: 500;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
    background: none; border: none; padding: 0;
    font-size: 12px;
}
.field-msg .field-link {
    color: var(--field-warning);
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.field-wrap.has-error .field-helper { display: none; }

@keyframes shake {
    10%, 90% { transform: translateX(-1px); }
    20%, 80% { transform: translateX(2px); }
    30%, 50%, 70% { transform: translateX(-3px); }
    40%, 60% { transform: translateX(3px); }
}

/* ===== AI TEXT HELPER ===================================================== */
.ai-magic-host {
    position: relative;
    overflow: visible;
}
.ai-magic-host > textarea {
    position: relative;
    z-index: 2;
    width: 100%;
    padding-bottom: 82px !important;
}
.ai-magic-aurora {
    position: absolute;
    z-index: 0;
    inset: -5px;
    border-radius: 16px;
    pointer-events: none;
    opacity: 0;
    background:
        linear-gradient(115deg,
            color-mix(in srgb, var(--accent) 86%, white) 0%,
            #7EB4D3 22%,
            #C9A8E2 50%,
            #F0C674 76%,
            color-mix(in srgb, var(--accent) 84%, white) 100%);
    background-size: 300% 100%;
    filter: blur(12px);
    transform: scale(.99);
    transition: opacity .32s ease, transform .32s ease;
}
.ai-magic-host.is-magic .ai-magic-aurora {
    opacity: .44;
    transform: scale(1);
    animation: aiAuroraFlow 3s linear infinite;
}
.ai-magic-host.is-magic > textarea {
    border-color: transparent !important;
    box-shadow: 0 16px 46px -34px color-mix(in srgb, var(--accent) 55%, transparent) !important;
}
.ai-magic-sparks {
    position: absolute;
    z-index: 7;
    inset: 0;
    overflow: visible;
    pointer-events: none;
}
.ai-magic-spark {
    position: absolute;
    z-index: 8;
    pointer-events: none;
    will-change: transform, opacity;
    animation: aiMagicSparkFly 1.2s cubic-bezier(.2, .7, .4, 1) forwards;
    filter:
        drop-shadow(0 0 8px rgba(255, 255, 255, .72))
        drop-shadow(0 0 14px color-mix(in srgb, var(--warm) 54%, transparent));
}
.ai-magic-spark svg {
    display: block;
}
@keyframes aiAuroraFlow {
    to { background-position: 300% 0; }
}
@keyframes aiMagicSparkFly {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0) rotate(0deg);
    }
    18% { opacity: 1; }
    100% {
        opacity: 0;
        transform:
            translate(calc(-50% + var(--dx, 0px)), calc(-50% + var(--dy, 0px)))
            scale(var(--ds, 1))
            rotate(var(--dr, 360deg));
    }
}
.ai-text-tools {
    position: absolute;
    right: 18px;
    bottom: 17px;
    z-index: 9;
    display: flex;
    justify-content: flex-end;
    margin: 0;
    overflow: visible;
    pointer-events: none;
}
.ai-text-btn {
    position: relative;
    isolation: isolate;
    overflow: visible;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 42px;
    padding: 8px 18px 8px 13px;
    border: 1px solid color-mix(in srgb, var(--line) 86%, var(--ink));
    border-radius: 14px;
    background:
        linear-gradient(135deg,
            color-mix(in srgb, var(--surface) 98%, white) 0%,
            color-mix(in srgb, var(--surface) 92%, var(--accent-soft)) 100%);
    color: var(--ink);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .82),
        0 18px 38px -28px color-mix(in srgb, var(--ink) 55%, transparent),
        0 8px 18px -14px color-mix(in srgb, var(--accent) 44%, transparent);
    font-size: 13px;
    font-weight: 750;
    line-height: 1;
    letter-spacing: 0;
    text-decoration: none;
    cursor: pointer;
    pointer-events: auto;
    transition:
        border-color .2s ease,
        box-shadow .2s ease,
        transform .2s ease,
        background .2s ease;
}
.ai-text-btn::before {
    content: "";
    position: absolute;
    z-index: 0;
    inset: 1px;
    border-radius: 13px;
    background:
        radial-gradient(circle at 20% 20%, color-mix(in srgb, var(--accent-soft) 72%, transparent), transparent 28%),
        linear-gradient(110deg, transparent 0 34%, rgba(255, 255, 255, .72) 45%, transparent 57% 100%);
    opacity: .62;
    transform: translateX(-44%);
    transition: transform .48s cubic-bezier(.2, .8, .2, 1), opacity .2s ease;
    pointer-events: none;
}
.ai-text-btn:hover {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--warm) 82%, var(--line));
    background:
        linear-gradient(135deg,
            color-mix(in srgb, var(--surface) 99%, white) 0%,
            color-mix(in srgb, var(--warm) 8%, var(--surface)) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .92),
        0 24px 50px -30px color-mix(in srgb, var(--ink) 58%, transparent),
        0 12px 26px -16px color-mix(in srgb, var(--warm) 70%, transparent);
}
.ai-text-btn:hover::before {
    opacity: .86;
    transform: translateX(32%);
}
.ai-text-btn:focus-visible {
    outline: none;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .16),
        0 0 0 3px color-mix(in srgb, var(--surface) 82%, transparent),
        0 0 0 6px color-mix(in srgb, var(--warm) 30%, transparent),
        0 20px 42px -28px color-mix(in srgb, var(--ink) 90%, transparent);
}
.ai-text-btn:active {
    transform: translateY(0);
}
.ai-text-btn.is-loading {
    cursor: wait;
    border-color: color-mix(in srgb, var(--warm) 90%, var(--line));
    background:
        linear-gradient(90deg,
            color-mix(in srgb, var(--surface) 98%, white) 0%,
            color-mix(in srgb, var(--warm) 16%, var(--surface)) 46%,
            color-mix(in srgb, var(--accent-soft) 28%, var(--surface)) 56%,
            color-mix(in srgb, var(--surface) 98%, white) 100%);
    background-size: 220% 100%;
    animation: aiButtonShine 1.35s linear infinite;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .92),
        0 22px 46px -28px color-mix(in srgb, var(--ink) 60%, transparent),
        0 12px 26px -18px color-mix(in srgb, var(--warm) 70%, transparent);
}
.ai-text-btn[data-ai-state="done"] {
    border-color: color-mix(in srgb, var(--ok) 42%, white);
    background: color-mix(in srgb, var(--ok-soft) 64%, var(--surface));
    color: color-mix(in srgb, var(--ok) 70%, var(--ink));
}
.ai-text-btn[disabled] {
    pointer-events: none;
}
.ai-text-btn > .ai-magic-spark {
    z-index: 4;
}
.ai-text-mark {
    position: relative;
    z-index: 3;
    display: inline-grid;
    place-items: center;
    width: 30px;
    height: 24px;
    flex: 0 0 30px;
}
.ai-sparkle-icon {
    position: absolute;
    width: 19px;
    height: 19px;
    color: currentColor;
    transform: translate(1px, 0);
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .34));
    opacity: 1;
    transition: opacity .18s ease, transform .2s ease;
}
.ai-sparkle-icon path {
    fill: currentColor;
}
.ai-text-label {
    position: relative;
    z-index: 3;
    top: 0;
    white-space: nowrap;
}
.ai-starfield {
    position: absolute;
    z-index: 2;
    inset: -18px -24px;
    pointer-events: none;
}
.ai-starfield span {
    --x: 18%;
    --y: 12%;
    --dx: -10px;
    --dy: -12px;
    --s: 9px;
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: var(--s);
    height: var(--s);
    opacity: 0;
    transform: translate(0, 0) scale(.42) rotate(0deg);
    filter:
        drop-shadow(0 0 8px rgba(255, 255, 255, .72))
        drop-shadow(0 0 16px color-mix(in srgb, var(--warm) 60%, transparent));
}
.ai-starfield span::before,
.ai-starfield span::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, #FFFFFF 22% 78%, transparent);
    transform: translate(-50%, -50%);
}
.ai-starfield span::before {
    width: 100%;
    height: 2px;
}
.ai-starfield span::after {
    width: 2px;
    height: 100%;
}
.ai-starfield span:nth-child(2) {
    --x: 4%;
    --y: 62%;
    --dx: -18px;
    --dy: 4px;
    --s: 6px;
}
.ai-starfield span:nth-child(3) {
    --x: 87%;
    --y: 10%;
    --dx: 16px;
    --dy: -16px;
    --s: 7px;
}
.ai-starfield span:nth-child(4) {
    --x: 96%;
    --y: 72%;
    --dx: 18px;
    --dy: 10px;
    --s: 5px;
}
.ai-text-btn:hover .ai-sparkle-icon {
    animation: aiSparkleFloat 1.45s cubic-bezier(.45, 0, .2, 1) infinite;
}
.ai-text-btn:hover .ai-starfield span,
.ai-text-btn:focus-visible .ai-starfield span,
.ai-text-btn.is-loading .ai-starfield span {
    animation: aiStarBurst 1.55s cubic-bezier(.22, .82, .24, 1) infinite;
}
.ai-text-btn:hover .ai-starfield span:nth-child(2),
.ai-text-btn:focus-visible .ai-starfield span:nth-child(2),
.ai-text-btn.is-loading .ai-starfield span:nth-child(2) {
    animation-delay: .12s;
}
.ai-text-btn:hover .ai-starfield span:nth-child(3),
.ai-text-btn:focus-visible .ai-starfield span:nth-child(3),
.ai-text-btn.is-loading .ai-starfield span:nth-child(3) {
    animation-delay: .26s;
}
.ai-text-btn:hover .ai-starfield span:nth-child(4),
.ai-text-btn:focus-visible .ai-starfield span:nth-child(4),
.ai-text-btn.is-loading .ai-starfield span:nth-child(4) {
    animation-delay: .4s;
}
.ai-text-btn.is-loading .ai-sparkle-icon {
    opacity: 1;
    animation: aiSparkleFloat 1.05s cubic-bezier(.45, 0, .2, 1) infinite;
}
@keyframes aiSparkleFloat {
    0%, 100% { transform: translate(1px, 0) scale(1); opacity: 1; }
    50% { transform: translate(1px, -1px) scale(1.08); opacity: .92; }
}
@keyframes aiButtonShine {
    to { background-position: -220% 0; }
}
@keyframes aiStarBurst {
    0% {
        opacity: 0;
        transform: translate(0, 0) scale(.36) rotate(0deg);
    }
    18% {
        opacity: 1;
    }
    72% {
        opacity: .88;
    }
    100% {
        opacity: 0;
        transform: translate(var(--dx), var(--dy)) scale(1) rotate(76deg);
    }
}
@media (prefers-reduced-motion: reduce) {
    .ai-text-btn:hover .ai-starfield span,
    .ai-text-btn:focus-visible .ai-starfield span,
    .ai-text-btn.is-loading .ai-starfield span,
    .ai-text-btn:hover .ai-sparkle-icon,
    .ai-text-btn.is-loading {
        animation: none;
    }
    .ai-magic-host.is-magic .ai-magic-aurora {
        animation: none;
        opacity: .28;
    }
}
.ai-suggestion {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 10px;
    padding: 10px 12px;
    border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--line));
    border-radius: 14px;
    background:
        linear-gradient(135deg,
            color-mix(in srgb, var(--accent-soft) 38%, var(--surface)),
            color-mix(in srgb, var(--surface) 94%, white));
    color: var(--ink);
    box-shadow: 0 14px 34px -28px color-mix(in srgb, var(--ink) 42%, transparent);
}
.ai-suggestion[hidden] {
    display: none;
}
.ai-suggestion-head {
    display: grid;
    gap: 2px;
    min-width: 0;
}
.ai-suggestion-head strong {
    font-size: 12.5px;
    line-height: 1.2;
}
.ai-suggestion-head small {
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--ink-2);
}
.ai-suggestion-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
    flex: 0 0 auto;
}
.ai-suggestion-actions .btn-primary,
.ai-suggestion-actions .btn-ghost {
    min-height: 34px;
    padding: 7px 11px;
    border-radius: 10px;
    font-size: 12px;
}
.ai-suggestion-actions svg {
    width: 14px;
    height: 14px;
}
.ai-suggestion-actions .ai-revert {
    border-color: color-mix(in srgb, var(--accent) 28%, var(--line));
    background: color-mix(in srgb, var(--surface) 96%, white);
}
.ai-suggestion-actions .ai-hide {
    color: var(--muted);
}
@media (max-width: 640px) {
    .ai-suggestion {
        align-items: flex-start;
        flex-direction: column;
    }
    .ai-suggestion-actions {
        width: 100%;
        justify-content: flex-start;
    }
    .ai-magic-host > textarea {
        padding-bottom: 92px !important;
    }
    .ai-text-tools {
        right: 12px;
        bottom: 12px;
    }
    .ai-text-btn {
        min-height: 40px;
        padding-inline: 12px 14px;
        font-size: 12.5px;
    }
}

/* Shake aplicable a grupos (chips, métodos pago) */
.shake { animation: shake .35s cubic-bezier(.36,.07,.19,.97); }

/* Spinner inline para botones submit · usa color de fuente actual */
.btn-spinner {
    display: inline-block;
    width: 12px; height: 12px; border-radius: 50%;
    border: 2px solid currentColor;
    border-top-color: transparent;
    animation: btn-spinner-rot .7s linear infinite;
    vertical-align: middle; margin-right: 6px;
    opacity: 0.8;
}
@keyframes btn-spinner-rot { to { transform: rotate(360deg); } }

/* ===== BOTONES ============================================================ */
.btn-primary {
    background: var(--accent); color: white;
    padding: 8px 14px; border-radius: 8px;
    font-size: 13px; font-weight: 500;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    cursor: pointer; border: none; text-decoration: none;
    transition: background .15s ease, transform .15s ease;
}
.btn-primary:hover { background: var(--accent-hover); }
.btn-primary:active { transform: translateY(1px); }
.btn-primary[disabled] { opacity: 0.6; cursor: not-allowed; }
.btn-primary:not(:has(svg)):not(:has(.btn-spinner))::before,
.proxima-btn-primary:not(:has(svg)):not(:has(.btn-spinner))::before,
.btn-ghost:not(:has(svg)):not(:has(.btn-spinner))::before,
.btn-link:not(:has(svg)):not(:has(.btn-spinner))::before {
    content: "";
    width: var(--btn-auto-icon-size, 14px);
    height: var(--btn-auto-icon-size, 14px);
    flex: 0 0 var(--btn-auto-icon-size, 14px);
    display: inline-block;
    background: currentColor;
    opacity: var(--btn-auto-icon-opacity, .92);
    -webkit-mask: var(--btn-auto-icon) center / contain no-repeat;
    mask: var(--btn-auto-icon) center / contain no-repeat;
}
.btn-primary:not(:has(svg)):not(:has(.btn-spinner)),
.proxima-btn-primary:not(:has(svg)):not(:has(.btn-spinner)) {
    --btn-auto-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.2 8.3l3 3 6.6-6.8' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.btn-ghost:not(:has(svg)):not(:has(.btn-spinner)) {
    --btn-auto-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.2 8h7.2m0 0L8.6 5.2M11.4 8l-2.8 2.8' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    --btn-auto-icon-opacity: .74;
}
.btn-link:not(:has(svg)):not(:has(.btn-spinner)) {
    --btn-auto-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.2 8a4.2 4.2 0 10-1.1 2.84M12.2 8h-2.4M12.2 8V5.6' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.btn-ghost.btn-quiet-danger:not(:has(svg)):not(:has(.btn-spinner)),
.btn-ghost.btn-danger-soft:not(:has(svg)):not(:has(.btn-spinner)) {
    --btn-auto-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 5l6 6M11 5l-6 6' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
}
.btn-primary.btn-lg:not(:has(svg)):not(:has(.btn-spinner)) {
    --btn-auto-icon-size: 15px;
}

/* Tamaño grande · CTAs de form (login submit, onboarding submit, etc.) */
.btn-primary.btn-lg {
    padding: 14px 20px; border-radius: 11px;
    font-size: 15px; gap: 8px;
}
.block-cta { width: 100%; }

.btn-link {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 10px;
    color: var(--accent);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    padding: 9px 12px;
    text-decoration: none;
}
.btn-link:hover {
    background: color-mix(in srgb, var(--accent-soft) 36%, var(--surface));
    text-decoration: none;
}
/* Tamaño grande · matchea .btn-primary.btn-lg para CTAs secundarios full-width
   (e.g. "Volver al login" debajo del submit en /login/onboarding). */
.btn-link.btn-lg {
    min-height: auto;
    padding: 14px 20px;
    border-radius: 11px;
    font-size: 15px;
    gap: 8px;
}

.btn-link[disabled] {
    cursor: not-allowed;
    color: var(--ink-3);
    background: color-mix(in srgb, var(--surface-2) 76%, var(--surface));
    border-color: color-mix(in srgb, var(--muted) 28%, var(--line));
    opacity: 1;
}
.btn-link[disabled] .muted {
    color: var(--ink-3);
    font-weight: 800;
}
.btn-link .muted { color: var(--muted); }

/* ===== STEP / OTP CODE ===================================================== */
.auth-step[hidden] { display: none; }
.email-banner {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 14px; border-radius: 10px;
    background: var(--accent-soft);
    border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
    font-size: 13px; color: var(--accent); margin-bottom: 24px;
}

.code-grid { display: flex; gap: 10px; justify-content: space-between; }
.code-input {
    width: 52px; height: 60px;
    border: 1px solid var(--line); border-radius: 11px;
    background: var(--surface);
    text-align: center; font-size: 24px; font-weight: 600;
    font-family: 'JetBrains Mono', monospace;
    color: var(--ink);
}
.code-input:focus {
    outline: none; border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
.code-input.error {
    border-color: var(--field-warning-edge);
    background: var(--field-warning-soft);
    box-shadow: none;
    animation: none;
}
.code-error {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 12px; border-radius: 10px;
    background: var(--field-warning-soft);
    border: 1px solid var(--field-warning-edge);
    color: var(--field-warning);
    font-size: 12.5px; font-weight: 400; line-height: 1.5;
    margin-top: 12px; opacity: 0; height: 0; overflow: hidden;
    transition: opacity .2s ease;
}
#codeForm .code-error,
#codeForm .code-error svg {
    color: var(--field-warning);
}
.code-error.show { opacity: 1; height: auto; }
.code-error svg {
    flex: 0 0 auto;
    margin-top: 2px;
    opacity: .78;
}
.auth-delivery-help {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    gap: 10px;
    margin-top: 12px;
    padding: 12px 14px;
    border: 1px solid color-mix(in srgb, var(--accent) 14%, var(--line));
    border-radius: 12px;
    background: color-mix(in srgb, var(--accent-soft) 28%, var(--surface));
    color: var(--ink-2);
    font-size: 12.75px;
    line-height: 1.48;
}
.auth-delivery-help svg {
    margin-top: 2px;
    color: var(--accent);
}
.auth-delivery-help strong {
    color: var(--ink);
    font-weight: 800;
}
.auth-delivery-help a {
    color: var(--accent);
    font-weight: 800;
    text-decoration: none;
}
.auth-delivery-help a:hover {
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ===== LECTURA CÓMODA · apoyo para dislexia leve ========================== */
.reading-comfort {
    letter-spacing: 0 !important;
}
html.reading-comfort body {
    background: color-mix(in srgb, var(--bg) 72%, #FFFDF6);
    font-family: 'Atkinson Hyperlegible', 'Inter', sans-serif;
}
html.reading-comfort .auth-form-wrap,
html.reading-comfort .auth-subhead,
html.reading-comfort .auth-h2-sub,
html.reading-comfort .field-helper,
html.reading-comfort .auth-disclaimer,
html.reading-comfort .auth-delivery-help,
html.reading-comfort .email-banner {
    font-family: 'Atkinson Hyperlegible', 'Inter', sans-serif;
    line-height: 1.68;
}
html.reading-comfort .auth-headline,
html.reading-comfort .auth-h2,
html.reading-comfort .serif {
    font-family: 'Atkinson Hyperlegible', 'Inter', sans-serif !important;
    letter-spacing: 0 !important;
}
html.reading-comfort .auth-headline {
    max-width: 34rem;
    line-height: 1.14;
}
html.reading-comfort .auth-h2 {
    line-height: 1.18;
}
html.reading-comfort .auth-h2-sub {
    font-size: 15.5px;
    margin-bottom: 28px;
}
html.reading-comfort .field-label,
html.reading-comfort .auth-pitch .eyebrow,
html.reading-comfort .stat-row .label {
    text-transform: none;
    letter-spacing: 0 !important;
    font-size: 12.5px;
}
html.reading-comfort .input,
html.reading-comfort .code-input,
html.reading-comfort .btn-primary,
html.reading-comfort .btn-link {
    font-family: 'Atkinson Hyperlegible', 'Inter', sans-serif;
    letter-spacing: 0;
}
html.reading-comfort .input {
    min-height: 52px;
    font-size: 15.5px;
    line-height: 1.45;
}
html.reading-comfort .btn-primary.btn-lg {
    min-height: 56px;
    font-size: 15.5px;
    font-weight: 700;
}
html.reading-comfort .input:focus,
html.reading-comfort .code-input:focus,
html.reading-comfort .btn-primary:focus-visible,
html.reading-comfort .btn-link:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--accent) 38%, transparent);
    outline-offset: 3px;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent);
}
html.reading-comfort .auth-step,
html.reading-comfort .auth-mobile-pitch {
    background: color-mix(in srgb, var(--surface) 82%, #FFFDF6);
}

/* ===== ONBOARDING ========================================================== */
/* El onboarding es un flujo único de 30s · ocultamos el theme switcher y el
   atajo de "lectura cómoda" del layout-public para no competir con el form. */
body:has(.onboarding-wrap) .accessibility-btn,
body:has(.onboarding-wrap) .theme-btn {
    display: none !important;
}

.onboarding-wrap {
    min-height: 100vh; display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    padding: 32px 20px; position: relative; overflow-x: hidden;
}
.onboarding-wrap::before {
    content: ""; position: fixed; top: -10%; right: -10%;
    width: 60%; height: 60%; border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--accent) 16%, transparent) 0%, transparent 70%);
    filter: blur(40px); animation: float1 18s ease-in-out infinite;
    z-index: 0; pointer-events: none;
}
.onboarding-wrap::after {
    content: ""; position: fixed; bottom: -10%; left: -10%;
    width: 50%; height: 50%; border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--warm) 14%, transparent) 0%, transparent 70%);
    filter: blur(40px); animation: float2 22s ease-in-out infinite;
    z-index: 0; pointer-events: none;
}
.onboarding-wrap > * { position: relative; z-index: 2; }

.auth-brand-top {
    position: fixed; top: 28px; left: 32px; z-index: 5;
    display: flex; align-items: center; gap: 10px; text-decoration: none;
}

.onb-card {
    background: color-mix(in srgb, var(--surface) 85%, transparent);
    backdrop-filter: blur(16px) saturate(150%);
    -webkit-backdrop-filter: blur(16px) saturate(150%);
    border: 1px solid var(--line); border-radius: 18px;
    padding: 44px 48px; width: 100%; max-width: 520px;
    box-shadow: 0 30px 80px -30px color-mix(in srgb, var(--ink) 40%, transparent);
}

.onb-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 20px;
}
.onb-h1 {
    font-size: 36px; font-weight: 500; line-height: 1.05; color: var(--ink);
    margin-bottom: 12px;
}
.onb-sub { font-size: 14.5px; color: var(--ink-2); line-height: 1.55; margin-bottom: 28px; }
.onb-skip { text-align: center; margin-top: 12px; }

.onb-consent {
    margin: 4px 0 18px;
    padding: 14px 16px;
    background: var(--surface-2, rgba(0, 0, 0, 0.025));
    border: 1px solid var(--line);
    border-radius: 12px;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}
.onb-consent.has-error {
    border-color: var(--field-warning-edge-strong);
}
.onb-consent-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
}
.onb-consent-row input[type="checkbox"] {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    margin-top: 2px;
    accent-color: var(--accent);
    cursor: pointer;
}
.onb-consent-text {
    font-size: 13.5px;
    color: var(--ink-2);
    line-height: 1.5;
}
.onb-consent-text a {
    color: var(--accent);
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.onb-consent-text a:hover {
    text-decoration: none;
}

.step-dots { display: flex; gap: 4px; align-items: center; }
.step-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--line); }
.step-dot.active { background: var(--accent); width: 18px; border-radius: 999px; }
.step-label { font-size: 11px; font-weight: 500; color: var(--muted); }

.title-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.title-chip {
    padding: 6px 12px; border-radius: 8px;
    border: 1px solid var(--line); background: var(--surface);
    font-size: 13px; font-weight: 500; color: var(--ink-2); cursor: pointer;
    font-family: 'Fraunces', serif;
}
.title-chip.selected {
    background: var(--accent-soft); color: var(--accent);
    border-color: color-mix(in srgb, var(--accent) 30%, transparent); font-weight: 600;
}

.live-preview {
    background: var(--surface-2); border: 1px solid var(--line); border-radius: 11px;
    padding: 13px 16px; display: flex; align-items: center; gap: 10px;
}
.live-preview-label {
    font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--muted);
}
.live-preview-value { font-size: 14px; color: var(--ink); font-weight: 500; }

@keyframes reveal-in { to { opacity: 1; transform: none; } }

/* ===== APP LAYOUT (sidebar + topbar + main) =============================== */
.sidebar {
    position: fixed; top: 0; left: 0; bottom: 0;
    width: var(--sidebar-width); padding: 22px 16px;
    background: color-mix(in srgb, var(--surface) 70%, transparent);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    border-right: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
    display: flex; flex-direction: column; gap: 4px;
    z-index: 30;
    /* Scroll interno cuando el contenido del sidebar excede la altura
       de viewport (ej. submenús expandidos como Reportes). El sidebar-user
       sigue anclado al pie por margin-top: auto, pero todo el bloque se
       vuelve scrolleable si no entra. overscroll-behavior evita que el
       scroll del sidebar se "filtre" al body. */
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--ink) 22%, transparent) transparent;
}
.sidebar::-webkit-scrollbar { width: 6px; }
.sidebar::-webkit-scrollbar-track { background: transparent; }
.sidebar::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--ink) 22%, transparent);
    border-radius: 999px;
}
.sidebar::-webkit-scrollbar-thumb:hover {
    background: color-mix(in srgb, var(--ink) 36%, transparent);
}
.mobile-menu-btn,
.sidebar-close,
.sidebar-scrim {
    display: none;
}
.sidebar-logo {
    display: flex; align-items: center; gap: 10px;
    padding: 6px 10px 18px 10px; text-decoration: none;
    border-bottom: 1px solid var(--line-soft); margin-bottom: 14px;
}
.logo-mandorla .m-left  { animation: mandorla-left  4s cubic-bezier(.45,0,.55,1) infinite; }
.logo-mandorla .m-right { animation: mandorla-right 4s cubic-bezier(.45,0,.55,1) infinite; }

.sidebar-section-label {
    font-size: 10.5px; font-weight: 700; letter-spacing: 0.12em;
    text-transform: uppercase; color: var(--muted);
    padding: 14px 10px 6px 10px;
}
.nav-item {
    display: flex; align-items: center; gap: 10px;
    padding: 8.5px 10px; border-radius: 9px;
    font-size: 13.5px; color: var(--ink-2); text-decoration: none;
    font-weight: 500;
}
.nav-item:hover { background: var(--surface-2); color: var(--ink); }
.nav-item.active {
    background: var(--accent-soft); color: var(--accent); font-weight: 600;
}
.nav-item.active svg { color: var(--accent); }
.nav-item svg { color: var(--muted); flex-shrink: 0; }
.nav-badge {
    margin-left: auto;
    font-size: 11px; font-weight: 600;
    padding: 2px 7px; border-radius: 999px;
    background: var(--accent); color: white;
}
.nav-badge-warn { background: var(--warn); }

.sidebar-user {
    margin-top: auto; position: relative;
    display: flex; align-items: center; gap: 10px;
    padding: 10px; border-radius: 11px;
    background: var(--surface-2); cursor: pointer;
    border: 1px solid var(--line-soft);
}
.sidebar-user:hover { background: color-mix(in srgb, var(--surface-2) 70%, var(--accent-soft)); }
.sidebar-user-avatar {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--line));
    box-shadow: 0 10px 22px -18px color-mix(in srgb, var(--ink) 60%, transparent);
}
.user-menu {
    position: absolute; bottom: calc(100% + 6px); left: 0; right: 0;
    background: var(--surface); border: 1px solid var(--line); border-radius: 11px;
    padding: 6px; display: none;
    box-shadow: 0 12px 30px -10px color-mix(in srgb, var(--ink) 30%, transparent);
}
.user-menu.show { display: block; }
.user-menu a, .user-menu button {
    display: block; padding: 8px 10px; border-radius: 8px;
    font-size: 13px; color: var(--ink-2); text-decoration: none;
}
.user-menu a:hover, .user-menu button:hover { background: var(--surface-2); color: var(--ink); }
.user-menu hr { border: none; border-top: 1px solid var(--line-soft); margin: 4px 0; }

.main {
    margin-left: var(--sidebar-width); min-height: 100vh;
    display: flex; flex-direction: column;
    min-width: 0;
}

.topbar {
    height: 60px; padding: 0 28px;
    display: flex; align-items: center; gap: 14px;
    border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent);
    background: color-mix(in srgb, var(--bg) 70%, transparent);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    position: sticky; top: 0; z-index: 20;
}
.search-wrapper {
    position: relative; flex: 1; max-width: 560px;
    display: flex; align-items: center;
}
.search-wrapper > svg {
    position: absolute; left: 12px; color: var(--muted); pointer-events: none;
}
.search-input {
    width: 100%; padding: 9px 54px 9px 36px;
    border: 1px solid var(--line); border-radius: 9px;
    background: var(--surface); font-size: 13.5px; color: var(--ink);
    transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
.search-input:focus {
    outline: none; border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent);
}
.search-wrapper kbd {
    position: absolute; right: 10px;
    font-size: 10.5px; padding: 2px 6px; border-radius: 5px;
    background: var(--surface-2); color: var(--muted);
    font-family: 'JetBrains Mono', monospace;
}
.global-search.is-open .search-input,
.global-search.is-loading .search-input {
    border-color: color-mix(in srgb, var(--accent) 34%, var(--line));
    background:
        linear-gradient(135deg,
            color-mix(in srgb, var(--accent-soft) 22%, var(--surface)) 0%,
            var(--surface) 72%);
}
.global-search.is-open {
    z-index: 42;
    isolation: isolate;
}
.global-search-loader {
    position: absolute;
    right: 8px;
    top: 50%;
    width: 38px;
    height: 26px;
    transform: translateY(-50%);
    display: none;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}
.global-search-loader.show { display: inline-flex; }
.global-search-mandorla {
    width: 32px;
    height: 20px;
    transform: scale(.66);
    transform-origin: center;
}
.global-search-mandorla .v-loader-circle {
    top: 2px;
    width: 16px;
    height: 16px;
    border-width: 1.7px;
    background: color-mix(in srgb, var(--surface) 84%, transparent);
}
.global-search-mandorla .v-loader-left { left: 3px; }
.global-search-mandorla .v-loader-right { right: 3px; }
.global-search-panel {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;            /* alineado al ancho exacto del .search-wrapper */
    width: auto;
    max-height: min(70vh, 620px);
    overflow: auto;
    z-index: 45;
    padding: 10px;
    border: 1px solid color-mix(in srgb, var(--line) 82%, var(--accent-soft));
    border-radius: 16px;
    background:
        linear-gradient(180deg,
            color-mix(in srgb, var(--surface) 94%, var(--accent-soft)) 0%,
            var(--surface) 48%),
        var(--surface);
    box-shadow:
        0 28px 70px -44px color-mix(in srgb, var(--ink) 60%, transparent),
        0 10px 30px -24px color-mix(in srgb, var(--accent) 42%, transparent),
        inset 0 1px 0 color-mix(in srgb, #fff 64%, transparent);
    transform-origin: top center;
    animation: global-search-in .18s cubic-bezier(.2,.7,.2,1);
    isolation: isolate;
}

/* El blur del buscador va aplicado al fondo, no como capa encima.
   Importante: body > * crea stacking contexts, así que un scrim fixed puede
   tapar la topbar y ocultar el panel. Filtramos el contenido, dejando topbar y
   resultados nítidos y clickeables. */
body.global-search-open .topbar {
    z-index: 40;
    background: color-mix(in srgb, var(--bg) 92%, transparent);
}
body.global-search-open .sidebar,
body.global-search-open .mobile-menu-btn,
body.global-search-open .main > :not(.topbar) {
    filter: blur(10px) saturate(.88);
    opacity: .72;
    pointer-events: none;
    transition: filter .18s ease, opacity .18s ease;
}
@keyframes global-search-in {
    from { opacity: 0; transform: translateY(-4px) scale(.985); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
.global-search-state {
    min-height: 116px;
    display: grid;
    place-content: center;
    gap: 5px;
    text-align: center;
    color: var(--muted);
}
.global-search-state strong {
    color: var(--ink);
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 23px;
    letter-spacing: 0;
}
.global-search-state span {
    font-size: 13px;
}
.global-search-results {
    display: grid;
    gap: 10px;
}
.global-search-group {
    display: grid;
    gap: 5px;
}
.global-search-group + .global-search-group {
    padding-top: 8px;
    border-top: 1px solid var(--line-soft);
}
.global-search-group-title {
    padding: 4px 8px;
    color: var(--muted);
    font-size: 10.5px;
    font-weight: 850;
    letter-spacing: .13em;
    text-transform: uppercase;
}
.global-search-item {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border: 1px solid transparent;
    border-radius: 12px;
    color: var(--ink);
    text-decoration: none;
    transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
.global-search-item:hover,
.global-search-item.is-active {
    background: color-mix(in srgb, var(--accent-soft) 36%, var(--surface));
    border-color: color-mix(in srgb, var(--accent) 20%, var(--line));
    transform: translateY(-1px);
}
.global-search-avatar {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--accent-soft) 76%, var(--surface-2));
    color: var(--accent);
}
.global-search-avatar svg {
    width: 20px;
    height: 20px;
}
.global-search-avatar-calendar {
    background: color-mix(in srgb, var(--warm-soft) 76%, var(--surface));
    color: var(--warm);
}
.global-search-avatar-payment {
    background: color-mix(in srgb, var(--ok-soft) 78%, var(--surface));
    color: var(--ok);
}
.global-search-copy {
    min-width: 0;
    display: grid;
    gap: 2px;
}
.global-search-copy strong,
.global-search-copy small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.global-search-copy strong {
    font-size: 13.5px;
    font-weight: 790;
}
.global-search-copy small {
    color: var(--muted);
    font-size: 12.3px;
}
.global-search-badge {
    justify-self: end;
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 4px 8px;
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--muted);
    font-size: 11.5px;
    font-weight: 760;
}
.global-search-foot {
    margin-top: 10px;
    padding: 8px 10px 2px;
    border-top: 1px solid var(--line-soft);
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 14px;
    color: var(--muted);
    font-size: 11px;
}
.global-search-foot span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.global-search-foot kbd {
    display: inline-grid;
    place-items: center;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 5px;
    background: color-mix(in srgb, var(--surface-2) 80%, var(--surface));
    border: 1px solid var(--line);
    color: var(--ink-2);
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--ink) 8%, transparent);
}

/* Banner contextual encima de los atajos · estados short/empty/error */
.global-search-banner {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 12px;
    margin-bottom: 10px;
    border-radius: 12px;
    font-size: 12.5px;
    line-height: 1.4;
}
.global-search-banner svg {
    width: 14px;
    height: 14px;
    flex: 0 0 14px;
}
.global-search-banner b { font-weight: 800; }
.global-search-banner-info {
    background: color-mix(in srgb, var(--accent-soft) 56%, var(--surface));
    border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line));
    color: color-mix(in srgb, var(--accent) 80%, var(--ink));
}
.global-search-banner-info svg { color: var(--accent); }
.global-search-banner-warm {
    background: color-mix(in srgb, var(--warm-soft) 50%, var(--surface));
    border: 1px solid color-mix(in srgb, var(--warn) 24%, var(--line));
    color: color-mix(in srgb, var(--warn) 80%, var(--ink));
}
.global-search-banner-warm svg { color: var(--warn); }
.global-search-banner-err {
    background: color-mix(in srgb, var(--rose) 8%, var(--surface));
    border: 1px solid color-mix(in srgb, var(--rose) 28%, var(--line));
    color: color-mix(in srgb, var(--rose) 80%, var(--ink));
}
.global-search-banner-err svg { color: var(--rose); }

/* Items de tipo "atajo" · flecha enter al final, levemente más sutiles */
.global-search-item-shortcut .global-search-shortcut-arrow {
    justify-self: end;
    width: 22px;
    height: 22px;
    display: inline-grid;
    place-items: center;
    border-radius: 6px;
    background: var(--surface-2);
    border: 1px solid var(--line);
    color: var(--muted);
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 12px;
    line-height: 1;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.global-search-item-shortcut.is-active .global-search-shortcut-arrow,
.global-search-item-shortcut:hover .global-search-shortcut-arrow {
    background: color-mix(in srgb, var(--accent) 14%, var(--surface));
    border-color: color-mix(in srgb, var(--accent) 34%, var(--line));
    color: var(--accent);
}

/* Tonos extra para los avatares de los atajos · alinean con los iconos del sidebar */
.global-search-avatar-home,
.global-search-avatar-patient {
    background: color-mix(in srgb, var(--accent-soft) 76%, var(--surface-2));
    color: var(--accent);
}
.global-search-avatar-message {
    background: color-mix(in srgb, var(--accent-soft) 60%, var(--surface));
    color: var(--accent);
}
.global-search-avatar-chart {
    background: color-mix(in srgb, var(--warm-soft) 56%, var(--surface));
    color: var(--warm);
}
.global-search-avatar-gear {
    background: var(--surface-2);
    color: var(--ink-2);
}
.global-search-avatar-plus {
    background: color-mix(in srgb, var(--ok-soft) 70%, var(--surface));
    color: var(--ok);
}
.topbar .accessibility-btn,
.topbar .theme-btn {
    position: static;
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 14px;
    border-color: color-mix(in srgb, var(--accent) 26%, var(--line));
    background:
        linear-gradient(180deg,
            color-mix(in srgb, #fff 88%, var(--accent-soft)) 0%,
            color-mix(in srgb, var(--surface) 78%, var(--accent-soft)) 100%);
    color: color-mix(in srgb, var(--accent) 72%, var(--ink));
    box-shadow:
        0 16px 34px -24px color-mix(in srgb, var(--accent) 72%, transparent),
        inset 0 1px 0 color-mix(in srgb, #fff 88%, transparent);
    transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease, background .16s ease, color .16s ease;
}
.topbar .accessibility-btn { margin-left: 0; }
.topbar .theme-btn { margin-left: 0; }
.topbar .accessibility-btn:hover,
.topbar .accessibility-btn.is-active,
.topbar .theme-btn:hover {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--accent) 46%, var(--line));
    background:
        linear-gradient(180deg,
            color-mix(in srgb, #fff 80%, var(--accent-soft)) 0%,
            color-mix(in srgb, var(--accent-soft) 68%, var(--surface)) 100%);
    color: var(--accent);
    box-shadow:
        0 20px 42px -24px color-mix(in srgb, var(--accent) 82%, transparent),
        inset 0 1px 0 color-mix(in srgb, #fff 92%, transparent);
}
.topbar-icon-btn {
    position: relative;
    width: 34px; height: 34px; border-radius: 9px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--surface); border: 1px solid var(--line); cursor: pointer;
}
.topbar-icon-btn:hover { background: var(--surface-2); }
.notif-dot {
    position: absolute; top: 7px; right: 7px;
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--agenda-now); border: 2px solid var(--surface);
}
.notification-shell {
    position: relative;
    flex: 0 0 auto;
    margin-left: auto;
}
.notification-btn {
    position: relative;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    border: 1px solid color-mix(in srgb, var(--warm) 30%, var(--line));
    background:
        linear-gradient(180deg,
            color-mix(in srgb, #fff 86%, var(--warm-soft)) 0%,
            color-mix(in srgb, var(--surface) 72%, var(--warm-soft)) 100%);
    color: color-mix(in srgb, var(--warn) 58%, var(--ink));
    cursor: pointer;
    box-shadow:
        0 16px 34px -24px color-mix(in srgb, var(--warm) 80%, transparent),
        inset 0 1px 0 color-mix(in srgb, #fff 88%, transparent);
    transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease, background .16s ease, color .16s ease;
}
.notification-btn:hover,
.notification-btn[aria-expanded="true"] {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--warn) 48%, var(--line));
    background:
        linear-gradient(180deg,
            color-mix(in srgb, #fff 76%, var(--warn-soft)) 0%,
            color-mix(in srgb, var(--warn-soft) 72%, var(--surface)) 100%);
    color: var(--warn);
    box-shadow:
        0 20px 42px -24px color-mix(in srgb, var(--warn) 78%, transparent),
        inset 0 1px 0 color-mix(in srgb, #fff 90%, transparent);
}
.notification-btn.has-unread {
    border-color: color-mix(in srgb, var(--accent) 54%, var(--line));
    background:
        linear-gradient(180deg,
            color-mix(in srgb, #fff 82%, var(--accent)) 0%,
            color-mix(in srgb, var(--surface) 84%, var(--accent)) 100%);
    color: color-mix(in srgb, var(--accent) 86%, var(--ink));
    box-shadow:
        0 18px 40px -24px color-mix(in srgb, var(--accent) 72%, transparent),
        inset 0 1px 0 color-mix(in srgb, #fff 90%, transparent);
}
.notification-btn.has-unread::after {
    content: "";
    position: absolute;
    top: 8px;
    right: 8px;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--accent);
    border: 2px solid var(--surface);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent);
}
/* Pulso visual al ritmo del chime · refuerzo cuando llega una notif nueva
   estando la pestaña abierta. JS lo agrega/quita en notificaciones.js. */
.notification-btn.is-pulse {
    animation: notification-bell-pulse .9s cubic-bezier(.36, .07, .19, .97) 1;
}
@keyframes notification-bell-pulse {
    0%   { transform: rotate(0); }
    15%  { transform: rotate(-12deg) scale(1.08); }
    30%  { transform: rotate(10deg) scale(1.05); }
    45%  { transform: rotate(-8deg); }
    60%  { transform: rotate(6deg); }
    75%  { transform: rotate(-3deg); }
    100% { transform: rotate(0); }
}
@media (prefers-reduced-motion: reduce) {
    .notification-btn.is-pulse { animation: none; }
}
.notification-badge {
    position: absolute;
    top: -6px;
    right: -7px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    display: inline-grid;
    place-items: center;
    border-radius: 999px;
    background: var(--agenda-now);
    color: #fff;
    font-size: 10.5px;
    font-weight: 850;
    line-height: 1;
    border: 2px solid var(--bg);
    box-shadow: 0 10px 20px -12px color-mix(in srgb, var(--agenda-now) 86%, transparent);
}
.notification-panel {
    position: absolute;
    top: calc(100% + 10px);
    right: -46px;
    width: min(380px, calc(100vw - 24px));
    max-height: min(640px, calc(100vh - 86px));
    overflow: auto;
    z-index: 48;
    padding: 12px;
    border: 1px solid color-mix(in srgb, var(--line) 84%, var(--accent-soft));
    border-radius: 16px;
    background:
        linear-gradient(180deg,
            color-mix(in srgb, var(--surface) 96%, var(--accent-soft)) 0%,
            var(--surface) 52%),
        var(--surface);
    box-shadow:
        0 28px 70px -44px color-mix(in srgb, var(--ink) 60%, transparent),
        inset 0 1px 0 color-mix(in srgb, #fff 64%, transparent);
    transform-origin: top right;
    animation: global-search-in .18s cubic-bezier(.2,.7,.2,1);
}
.notification-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 3px 3px 10px;
    border-bottom: 1px solid var(--line-soft);
}
.notification-head-title {
    display: grid;
    gap: 2px;
    min-width: 0;
}
.notification-head-titlerow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.notification-head-titlerow strong {
    color: var(--ink);
    font-size: 14px;
    font-weight: 850;
}
/* Contador-pill al lado del titulo: el numero se lee de un vistazo
   sin tener que parsear el subtitulo. Solo aparece con noLeidas > 0. */
.notification-head-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 20px;
    padding: 0 7px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent) 16%, var(--surface));
    color: color-mix(in srgb, var(--accent) 92%, var(--ink));
    font-size: 11px;
    font-weight: 850;
    line-height: 1;
}
.notification-head-title small {
    color: var(--muted);
    font-size: 12px;
}
.notification-head-history {
    flex: 0 0 auto;
    min-height: 30px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 10px;
    border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line));
    border-radius: 8px;
    background: color-mix(in srgb, var(--accent-soft) 42%, var(--surface));
    color: var(--accent);
    font-size: 11.5px;
    font-weight: 800;
    line-height: 1;
    text-decoration: none;
    transition: background .14s ease, border-color .14s ease;
}
.notification-head-history:hover {
    background: color-mix(in srgb, var(--accent-soft) 66%, var(--surface));
    border-color: color-mix(in srgb, var(--accent) 34%, var(--line));
}
.notification-head-history svg { flex: 0 0 auto; }

.notification-push-row {
    margin-top: 10px;
    padding: 10px 12px;
    border: 1px solid color-mix(in srgb, var(--accent) 12%, var(--line));
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: color-mix(in srgb, var(--accent-soft) 22%, var(--surface));
}
.notification-sound-row {
    margin-top: 8px;
}
.notification-sound-controls {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.notification-sound-test {
    height: 26px;
    padding: 0 11px;
    border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--line));
    border-radius: 999px;
    background: var(--surface);
    color: color-mix(in srgb, var(--accent) 86%, var(--ink));
    font-size: 11.5px;
    font-weight: 700;
    cursor: pointer;
    transition: background .14s ease, border-color .14s ease, opacity .14s ease;
}
.notification-sound-test:hover:not(:disabled) {
    background: color-mix(in srgb, var(--accent) 8%, var(--surface));
    border-color: color-mix(in srgb, var(--accent) 38%, var(--line));
}
.notification-sound-test:disabled {
    opacity: .42;
    cursor: not-allowed;
}
/* Cuando el chime está silenciado, atenuamos las ondas del icono para
   reforzar visualmente que no va a sonar. */
[data-notificaciones-sound-btn][data-state="off"] ~ ::before,
.notification-sound-row .notification-push-switch[data-state="off"] {
    /* placeholder · usamos el sibling más abajo */
}
.notification-sound-row:has([data-notificaciones-sound-btn][data-state="off"]) [data-notificaciones-sound-wave] {
    opacity: .32;
}
.notification-push-info {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    color: var(--ink-2);
    font-size: 12.5px;
    font-weight: 760;
}
.notification-push-info svg {
    flex: 0 0 auto;
    color: color-mix(in srgb, var(--accent) 72%, var(--ink));
}

/* Switch real con track + thumb. data-state="on/off/blocked" lo
   controla notificaciones.js segun el estado de Notification.permission
   y la suscripcion push. El boton ES el switch — clickable cuando esta
   en "off", informativo cuando esta "on" o "blocked". */
.notification-push-switch {
    appearance: none;
    -webkit-appearance: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 6px 4px 4px;
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    font: inherit;
    flex: 0 0 auto;
    border-radius: 999px;
    transition: background .14s ease;
}
.notification-push-switch:hover:not(:disabled) {
    background: color-mix(in srgb, var(--accent-soft) 50%, transparent);
}
.notification-push-switch:disabled { cursor: default; }
.notification-push-track {
    position: relative;
    width: 34px;
    height: 20px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--ink) 22%, var(--surface));
    transition: background .18s ease;
    box-shadow: inset 0 1px 2px color-mix(in srgb, var(--ink) 14%, transparent);
    flex: 0 0 auto;
}
.notification-push-thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    transition: transform .18s ease, background .18s ease;
    box-shadow: 0 2px 4px color-mix(in srgb, var(--ink) 26%, transparent);
}
.notification-push-switch[data-state="on"] .notification-push-track {
    background: var(--ok, #1D9E75);
}
.notification-push-switch[data-state="on"] .notification-push-thumb {
    transform: translateX(14px);
}
.notification-push-switch[data-state="blocked"] .notification-push-track {
    background: color-mix(in srgb, var(--warn) 22%, var(--line));
}
.notification-push-switch[data-state="blocked"] .notification-push-thumb {
    background: color-mix(in srgb, var(--warn) 28%, #fff);
}
.notification-push-label {
    font-size: 11.5px;
    font-weight: 760;
    color: var(--ink-2);
    min-width: 52px;
    text-align: left;
    line-height: 1;
}
.notification-push-switch[data-state="on"] .notification-push-label {
    color: var(--ok, #1D9E75);
}
.notification-push-switch[data-state="blocked"] .notification-push-label {
    color: var(--warn);
}

.notification-list {
    display: grid;
    gap: 8px;
    padding-top: 10px;
}
.notification-item {
    position: relative;
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 10px 10px 10px 16px;
    border: 1px solid transparent;
    border-radius: 12px;
    color: var(--ink);
    text-decoration: none;
    background: transparent;
    transition: background .14s ease, border-color .14s ease;
}
.notification-item:hover {
    background: color-mix(in srgb, var(--accent-soft) 30%, var(--surface));
    border-color: color-mix(in srgb, var(--accent) 18%, var(--line));
}
.notification-item.is-unread {
    background: color-mix(in srgb, var(--accent) 7%, var(--surface));
    border-color: color-mix(in srgb, var(--accent) 22%, var(--line));
}
/* Dot azul al margen izquierdo: marca lo no-leido sin obligar a
   leer la fila. El halo suave evita que parezca un bullet point. */
.notification-item.is-unread::before {
    content: "";
    position: absolute;
    left: 5px;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
.notification-item.is-unread .notification-item-icon {
    background: color-mix(in srgb, var(--accent) 14%, var(--surface));
    color: color-mix(in srgb, var(--accent) 86%, var(--ink));
}
.notification-item.is-urgent {
    border-color: color-mix(in srgb, var(--warn) 30%, var(--line));
    background: color-mix(in srgb, var(--warn-soft) 34%, var(--surface));
}
.notification-item.is-urgent::before {
    background: var(--warn);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--warn) 18%, transparent);
}
.notification-item-icon {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--warm-soft) 64%, var(--surface));
    color: var(--warn);
}
/* X · quita la notif del feed (queda en historial). Aparece tenue en
   reposo y se hace evidente al pasar el mouse por la fila. */
.notification-item-dismiss {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: color-mix(in srgb, var(--muted) 80%, var(--ink));
    opacity: 0;
    cursor: pointer;
    transition: opacity .14s ease, background .14s ease, color .14s ease;
}
.notification-item:hover .notification-item-dismiss,
.notification-item-dismiss:focus-visible {
    opacity: 1;
}
.notification-item-dismiss:hover {
    background: color-mix(in srgb, var(--rose) 14%, var(--surface));
    color: color-mix(in srgb, var(--rose) 88%, var(--ink));
}
.notification-item-dismiss:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--accent) 55%, transparent);
    outline-offset: 1px;
}
.notification-item-dismiss:disabled {
    opacity: .45;
    cursor: progress;
}
/* Animación de salida cuando se confirma el hide */
.notification-item.is-dismissing {
    opacity: 0;
    transform: translateX(8px);
    transition: opacity .18s ease, transform .18s ease;
    pointer-events: none;
}
.notification-item-copy {
    min-width: 0;
    display: grid;
    gap: 2px;
}
.notification-item-copy strong,
.notification-item-copy small,
.notification-item-copy em {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.notification-item-copy strong {
    font-size: 13px;
    font-weight: 830;
}
.notification-item-copy small {
    color: var(--ink-2);
    font-size: 12px;
}
.notification-item-copy em {
    color: var(--muted);
    font-size: 11px;
    font-style: normal;
}
.notification-item-action {
    justify-self: end;
    align-self: center;
    min-height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0 9px;
    border-radius: 8px;
    background: var(--surface);
    border: 1px solid var(--line);
    color: var(--accent);
    font-size: 11.5px;
    font-weight: 820;
    transition: background .14s ease, border-color .14s ease;
}
.notification-item:hover .notification-item-action {
    background: color-mix(in srgb, var(--accent-soft) 24%, var(--surface));
    border-color: color-mix(in srgb, var(--accent) 26%, var(--line));
}
.notification-item-action svg { flex: 0 0 auto; }

.notification-empty {
    min-height: 168px;
    display: grid;
    place-content: center;
    place-items: center;
    gap: 6px;
    text-align: center;
    color: var(--muted);
    padding: 18px 16px;
}
.notification-empty-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--accent-soft) 40%, var(--surface));
    color: color-mix(in srgb, var(--accent) 62%, var(--ink));
    margin-bottom: 4px;
}
.notification-empty strong {
    color: var(--ink);
    font-size: 14px;
    font-weight: 830;
}
.notification-empty small {
    font-size: 12px;
    line-height: 1.5;
    max-width: 240px;
}

/* Footer del panel: solo aparece cuando hay notificaciones no leidas.
   Aloja "Marcar todas leidas" — antes vivia arriba a la derecha pero
   competia visualmente con "Historial". Aqui es lo ultimo que ves y
   queda como cierre natural de la lista. */
.notification-foot {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--line-soft);
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
.notification-foot button {
    appearance: none;
    -webkit-appearance: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--accent);
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
    transition: background .14s ease;
}
.notification-foot button:hover {
    background: color-mix(in srgb, var(--accent-soft) 38%, var(--surface));
}
.notification-foot button svg { flex: 0 0 auto; }

/* ===== NOTIFICACIONES · HISTORIAL ========================================
   Mismo lenguaje visual que /servicios: module-header + pat-chipbar arriba,
   lista limpia abajo. Sin KPI cards ni card-wrapper porque eran ruido en
   estado vacío y duplicaban info que ya está en los chips. */
.notif-page { padding-bottom: 32px; }
.notif-list-shell { padding-top: 18px; }
.notif-table {
    display: grid;
    overflow: hidden;
}
.notif-row {
    position: relative;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 18px;
    align-items: center;
    gap: 14px;
    padding: 16px 18px 16px 22px;
    color: var(--ink);
    text-decoration: none;
    background: var(--surface);                       /* blanco · estado leído */
    border-bottom: 1px solid var(--line-soft);
    transition: background .22s ease, opacity .22s ease;
}
/* Barra indicadora izquierda — patrón replicado de .pat-row::before
   en /pacientes. Se pinta solo cuando la fila requiere atención:
   azul para no-leídas, naranja para push fallido. Si coexisten ambos
   estados gana el azul (lo no-leído es lo primero que el usuario actúa). */
.notif-row::before {
    content: "";
    position: absolute;
    left: 0;
    top: 12px;
    bottom: 12px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: transparent;
    transition: background .14s ease;
}
.notif-row.is-push-failed::before { background: var(--warn); }
.notif-row.is-unread::before { background: var(--accent); }
.notif-row:last-of-type { border-bottom: 0; }
.notif-row:hover {
    background: color-mix(in srgb, var(--accent-soft) 28%, var(--surface));
}
.notif-row:hover .notif-row-arrow {
    opacity: 1;
    transform: translateX(0);
    color: var(--accent);
}
/* No leída · fondo más distinguible para que el cambio a leído (blanco) se
   note. Antes era 5% accent → casi blanco e indistinguible. */
.notif-row.is-unread {
    background: color-mix(in srgb, var(--accent) 11%, var(--surface));
}
.notif-row.is-unread .notif-row-icon {
    background: color-mix(in srgb, var(--accent) 14%, var(--surface));
    color: color-mix(in srgb, var(--accent) 86%, var(--ink));
}
.notif-row.is-unread .notif-row-title strong {
    font-weight: 750;
}
/* Cuando la fila ya está leída · título un poco más liviano · el ícono pierde
   el tinte accent y se atenúa el cuerpo de texto. Refuerza visualmente que
   ya no requiere acción. */
.notif-row:not(.is-unread) .notif-row-title strong { font-weight: 600; }
.notif-row:not(.is-unread) .notif-row-body          { color: var(--muted); }
.notif-row:not(.is-unread) .notif-row-icon          {
    background: color-mix(in srgb, var(--ink) 4%, var(--surface));
    color: var(--muted);
}
.notif-row-icon {
    width: 44px; height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 12px;
    background: color-mix(in srgb, var(--ink) 5%, var(--surface));
    color: var(--ink-2);
    flex-shrink: 0;
}
.notif-row-main {
    min-width: 0;
    display: grid;
    gap: 3px;
}
.notif-row-title {
    display: flex;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
}
.notif-row-title strong {
    color: var(--ink);
    font-size: 14px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.notif-row-body {
    color: var(--ink-2);
    font-size: 13px;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.notif-row-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 4px;
    font-size: 11.5px;
}
.notif-row-date {
    color: var(--muted);
    font-style: normal;
    font-weight: 500;
}
/* Status inline · copy en español natural, no jerga técnica.
   "Por revisar" / "Vista" / "No te sonó el celular" se entiende sin
   tener que mirar tooltips. El push fallido lleva tooltip explicando
   cómo arreglarlo (permisos de notif). */
.notif-row-status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 9px 2px 7px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
}
.notif-row-status svg { flex: 0 0 auto; }
.notif-row-status.is-pending {
    background: color-mix(in srgb, var(--accent) 11%, var(--surface));
    color: color-mix(in srgb, var(--accent) 86%, var(--ink));
}
.notif-row-status.is-done {
    background: color-mix(in srgb, var(--ok-soft) 55%, var(--surface));
    color: color-mix(in srgb, var(--ok) 76%, var(--ink));
}
.notif-row-status.is-warn {
    background: color-mix(in srgb, var(--warn-soft) 60%, var(--surface));
    color: color-mix(in srgb, var(--warn) 82%, var(--ink));
    cursor: help;
}
.notif-row-arrow {
    color: var(--muted);
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity .14s ease, transform .14s ease, color .14s ease;
}
.notif-empty {
    padding: 36px 24px;
    display: grid;
    place-items: center;
    gap: 10px;
    text-align: center;
    color: var(--muted);
}
.notif-empty svg { color: var(--line); }
.notif-empty strong, .notif-empty > div > :first-child {
    color: var(--ink);
    font-size: 15px;
    font-weight: 700;
}
.notif-empty-filter { font-size: 13px; }

@media (max-width: 900px) {
    .notif-row {
        grid-template-columns: 40px minmax(0, 1fr);
        padding: 14px 14px 14px 18px;
        gap: 12px;
    }
    .notif-row-icon {
        width: 40px;
        height: 40px;
        border-radius: 11px;
    }
    .notif-row-arrow { display: none; }
}
@media (max-width: 560px) {
    .notif-row-body { white-space: normal; }
    .notif-row-meta { gap: 8px; }
}

/* ===== MODULE HEADER (titles, filters) ==================================== */
.module-header { padding: 24px 32px 0 32px; }
.module-header-row {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 18px; flex-wrap: wrap; margin-bottom: 18px;
}
.module-title-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.module-h1 { font-size: 32px; font-weight: 600; line-height: 1.05; color: var(--ink); }
.module-subtitle { font-size: 13px; color: var(--muted); margin-top: 4px; }
.module-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.btn-ghost {
    background: var(--surface); color: var(--ink-2);
    padding: 8px 14px; border-radius: 8px;
    font-size: 13px; font-weight: 500;
    border: 1px solid var(--line); cursor: pointer; text-decoration: none;
    display: inline-flex; align-items: center; gap: 6px;
}
.btn-ghost:hover { background: var(--surface-2); color: var(--ink); }

.filter-bar {
    display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
    padding-bottom: 16px;
}
.filter-label {
    font-size: 11px; font-weight: 700; letter-spacing: 0.12em;
    text-transform: uppercase; color: var(--muted); margin-right: 4px;
}
.filter-pill {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 5px 11px; border-radius: 999px;
    font-size: 12.5px; font-weight: 500;
    color: var(--ink-2); background: var(--surface);
    border: 1px solid var(--line); text-decoration: none; cursor: pointer;
}
.filter-pill:hover { background: var(--surface-2); }
.filter-pill.active {
    background: var(--accent-soft); color: var(--accent);
    border-color: color-mix(in srgb, var(--accent) 30%, transparent);
    font-weight: 600;
}

/* ===== CARD + PILLS + AVATARS ============================================ */
.card {
    background: color-mix(in srgb, var(--surface) 78%, transparent);
    border: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
    border-radius: 14px;
    backdrop-filter: blur(10px) saturate(130%);
    -webkit-backdrop-filter: blur(10px) saturate(130%);
}
.card-solid {
    background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
}
.card-soft {
    background: var(--surface-2); border: 1px solid var(--line-soft); border-radius: 14px;
}
.p-6 { padding: 24px; }  .p-7 { padding: 28px; }

.pill {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 10px; border-radius: 999px;
    font-size: 11.5px; font-weight: 600;
    background: var(--surface-2); color: var(--ink-2);
    border: 1px solid var(--line);
}
.pill-accent {
    background: var(--accent-soft); color: var(--accent);
    border-color: color-mix(in srgb, var(--accent) 25%, transparent);
}
.pill-ok {
    background: var(--ok-soft); color: var(--ok);
    border-color: color-mix(in srgb, var(--ok) 25%, transparent);
}
.pill-warn {
    background: var(--warn-soft); color: var(--warn);
    border-color: color-mix(in srgb, var(--warn) 25%, transparent);
}
.pill-warm {
    background: var(--warm-soft); color: var(--warm);
    border-color: color-mix(in srgb, var(--warm) 25%, transparent);
}
.pill-rose {
    background: color-mix(in srgb, var(--rose) 18%, transparent); color: var(--rose);
    border-color: color-mix(in srgb, var(--rose) 30%, transparent);
}
.pill-muted { background: var(--surface-2); color: var(--muted); }

.av {
    width: 36px; height: 36px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 600; flex-shrink: 0;
    font-family: 'Fraunces', serif;
}
.av-sm { width: 30px; height: 30px; font-size: 11.5px; }
.av-lg { width: 56px; height: 56px; font-size: 18px; }
.av-1 { background: var(--accent-soft); color: var(--accent); }
.av-2 { background: var(--warm-soft); color: var(--warm); }
.av-3 { background: color-mix(in srgb, var(--rose) 25%, transparent); color: var(--rose); }
.av-4 { background: var(--ok-soft); color: var(--ok); }
.av-5 { background: color-mix(in srgb, #8B5CF6 18%, transparent); color: #6D28D9; }
.avatar-photo {
    display: inline-block;
    flex-shrink: 0;
    border-radius: 50%;
    object-fit: cover;
    background: var(--surface-2);
    border: 1px solid color-mix(in srgb, var(--accent) 20%, var(--line));
    box-shadow: 0 16px 42px -34px color-mix(in srgb, var(--ink) 68%, transparent);
}

/* ===== TABLE / LIST de pacientes ========================================= */
.pacientes-page {
    background:
        linear-gradient(180deg,
            color-mix(in srgb, var(--accent-soft) 24%, transparent) 0,
            transparent 320px);
}
.pacientes-hero {
    border-bottom: 1px solid var(--line-soft);
    padding-bottom: 18px;
}
.pacientes-header-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}
.pacientes-actions .btn-primary {
    min-height: 40px;
    border-radius: 11px;
    padding-inline: 16px;
}
.pacientes-filter-bar {
    padding-bottom: 0;
}

/* ===== Pat-chipbar · segmented control style (replica /comentarios) =====
   Contenedor pill gris claro que agrupa todos los chips. El activo es una
   pastilla blanca con sombra suave. Sin bordes en los chips individuales · la
   diferenciación viene del estado activo, no del borde. */
.pat-chipbar {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--surface-2, var(--surface)) 90%, var(--ink) 6%);
    border: 1px solid var(--line);
    max-width: 100%;
}
.pat-chipbar-divider {
    width: 1px;
    height: 18px;
    margin: 0 4px;
    background: color-mix(in srgb, var(--ink) 12%, var(--line));
    flex: 0 0 auto;
}
.pat-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 32px;
    padding: 0 12px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--ink-2, var(--muted));
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}
.pat-chip:hover { color: var(--ink); }
.pat-chip:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--accent) 32%, transparent);
    outline-offset: 2px;
}
.pat-chip.is-active {
    background: var(--surface);
    color: var(--ink);
    font-weight: 600;
    box-shadow:
        0 1px 0 rgba(255,255,255,.7) inset,
        0 2px 6px rgba(20,39,43,.10);
}
.pat-chip-icon {
    display: inline-grid;
    place-items: center;
    width: 16px;
    height: 16px;
    color: color-mix(in srgb, var(--ink) 52%, var(--muted));
    flex: 0 0 auto;
}
.pat-chip:hover .pat-chip-icon { color: var(--ink); }
.pat-chip.is-active .pat-chip-icon { color: var(--accent); }

.pat-chip-label { letter-spacing: -0.005em; }

.pat-chip-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 20px;
    padding: 0 8px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--ink) 10%, var(--surface));
    color: var(--ink-2);
    font-size: 11px;
    font-weight: 700;
    font-feature-settings: "tnum" 1;
    letter-spacing: 0;
    flex: 0 0 auto;
}
.pat-chip-count.is-zero {
    background: color-mix(in srgb, var(--ink) 6%, var(--surface));
    color: var(--muted);
}
.pat-chip.is-active .pat-chip-count {
    background: color-mix(in srgb, var(--accent) 14%, var(--surface));
    color: var(--accent);
}
.pat-chip.is-active .pat-chip-count.is-zero {
    background: color-mix(in srgb, var(--accent) 8%, var(--surface));
    color: color-mix(in srgb, var(--accent) 60%, var(--muted));
}

@media (max-width: 720px) {
    .pat-chipbar {
        /* En mobile el pill se vuelve scroll horizontal interno · no rompe el
           contenedor pill (sigue display:inline-flex con padding:4px), solo el
           contenido scrollea. */
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        max-width: 100%;
    }
    .pat-chipbar::-webkit-scrollbar { display: none; }
    .pat-chip { flex-shrink: 0; }
    .pat-chipbar-divider { margin: 0 2px; }
}
.pacientes-list-shell {
    max-width: 1440px;
    margin: 0 auto;
}
.pat-table {
    overflow: visible;
    border-radius: 18px;
    border-color: color-mix(in srgb, var(--accent) 12%, var(--line));
    box-shadow: 0 22px 62px -50px color-mix(in srgb, var(--ink) 62%, transparent);
}
.table-header {
    display: grid;
    grid-template-columns: minmax(300px, 1.55fr) minmax(170px, .9fr) minmax(170px, .95fr) minmax(118px, .62fr) minmax(330px, 1.15fr);
    gap: 16px;
    padding: 13px 20px;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--muted);
    background: color-mix(in srgb, var(--accent-soft) 34%, var(--surface-2));
    border-bottom: 1px solid var(--line);
    border-radius: 18px 18px 0 0;
}
.pat-header-actions {
    text-align: right;
}
.pat-row {
    position: relative;
    display: grid;
    grid-template-columns: minmax(300px, 1.55fr) minmax(170px, .9fr) minmax(170px, .95fr) minmax(118px, .62fr) minmax(330px, 1.15fr);
    gap: 16px;
    padding: 16px 20px 16px 24px;
    align-items: center;
    border-bottom: 1px solid var(--line-soft);
    color: inherit;
    transition: background .15s ease, box-shadow .15s ease, opacity .18s ease, transform .18s ease;
    cursor: pointer;
}
.pat-row::before {
    content: "";
    position: absolute;
    left: 0;
    top: 14px;
    bottom: 14px;
    width: 3px;
    border-radius: 0 999px 999px 0;
    background: transparent;
}
.pat-row-needs-schedule::before { background: var(--accent); }
.pat-row-has-debt::before { background: var(--rose); }
.pat-row:hover,
.pat-row:focus-visible {
    background: color-mix(in srgb, var(--accent-soft) 28%, var(--surface));
    outline: none;
}
.pat-row:last-child { border-bottom: none; }
.pat-row.is-removing {
    opacity: .46;
    transform: translateX(6px);
    pointer-events: none;
}
.pat-person-cell {
    min-width: 0;
}
.pat-person-link {
    min-width: 0;
    display: flex;
    align-items: flex-start;
    gap: 13px;
    color: inherit;
    text-decoration: none;
}
.pat-person-link:hover .pat-patient-name {
    color: var(--accent);
}
.pat-patient-name {
    color: var(--ink);
    font-size: 14px;
    font-weight: 750;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pat-patient-meta {
    margin-top: 2px;
    color: var(--muted);
    font-size: 11.5px;
    line-height: 1.35;
}
.pat-patient-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 7px;
}
.pat-patient-tags .pill,
.pat-payment-cell .pill {
    font-size: 10.5px;
}
.nuevo-tag {
    padding-inline: 7px;
    border: 0;
}

/* Chip "Posible duplicado · N" en /pacientes · click abre el drawer
   informativo. Tono cobre suave (no alarmante: no es un bug, es un aviso). */
.pill.pill-duplicado {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 9px 2px 7px;
    border: 1px solid color-mix(in srgb, var(--warm) 36%, var(--line));
    border-radius: 999px;
    background: color-mix(in srgb, var(--warm-soft) 56%, var(--surface));
    color: color-mix(in srgb, var(--warm) 75%, var(--ink));
    font-family: inherit;
    font-weight: 620;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
}
.pill.pill-duplicado:hover {
    background: color-mix(in srgb, var(--warm-soft) 80%, var(--surface));
    border-color: color-mix(in srgb, var(--warm) 55%, var(--line));
}
.pill.pill-duplicado svg {
    flex-shrink: 0;
    opacity: .85;
}

/* Drawer lateral de "Posibles duplicados".
   Backdrop semitransparente + panel sliding desde la derecha. */
.pac-dup-drawer {
    position: fixed;
    inset: 0;
    z-index: 80;
    pointer-events: none;
}
.pac-dup-drawer .pac-dup-backdrop {
    position: absolute;
    inset: 0;
    background: color-mix(in srgb, var(--ink) 28%, transparent);
    opacity: 0;
    transition: opacity .22s ease;
    pointer-events: none;
}
.pac-dup-drawer.is-open {
    pointer-events: auto;
}
.pac-dup-drawer.is-open .pac-dup-backdrop {
    opacity: 1;
    pointer-events: auto;
}
.pac-dup-panel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(440px, 100vw);
    background: var(--surface);
    box-shadow: -18px 0 48px -28px color-mix(in srgb, var(--ink) 55%, transparent);
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform .24s cubic-bezier(.2,.72,.18,1);
}
.pac-dup-drawer.is-open .pac-dup-panel {
    transform: translateX(0);
}
.pac-dup-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 18px 12px;
    border-bottom: 1px solid var(--line-soft);
}
.pac-dup-head h2 {
    margin: 0;
    font-size: 18px;
    color: var(--ink);
}
.pac-dup-sub {
    margin: 4px 0 0;
    font-size: 12.5px;
    color: var(--muted);
    line-height: 1.4;
}
.pac-dup-close {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}
.pac-dup-close:hover {
    background: color-mix(in srgb, var(--surface-2) 70%, var(--surface));
    color: var(--ink);
}
.pac-dup-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 14px 18px 18px;
    display: grid;
    gap: 12px;
}
.pac-dup-loading,
.pac-dup-empty {
    padding: 24px 8px;
    text-align: center;
    color: var(--muted);
    font-size: 13px;
}
.pac-dup-empty strong {
    display: block;
    color: var(--ink);
    font-size: 14px;
    margin-bottom: 4px;
}
.pac-dup-card {
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 12px;
    background: color-mix(in srgb, var(--surface-2) 18%, var(--surface));
    display: grid;
    gap: 8px;
}
.pac-dup-card-head {
    display: flex;
    align-items: center;
    gap: 10px;
}
.pac-dup-card-main {
    min-width: 0;
    display: grid;
    gap: 2px;
}
.pac-dup-card-main strong {
    font-size: 14px;
    color: var(--ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pac-dup-card-main small {
    font-size: 11.5px;
    color: var(--muted);
}
.pac-dup-card-contacto,
.pac-dup-card-tiempos {
    margin: 0;
    font-size: 12px;
    color: var(--ink-2);
    line-height: 1.5;
}
.pac-dup-card-tiempos strong {
    color: var(--muted);
    font-weight: 600;
    margin-right: 4px;
}
.pac-dup-card-cta {
    align-self: flex-start;
    padding: 5px 10px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--accent-soft) 40%, var(--surface));
    color: var(--accent-hover);
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    transition: background .15s ease;
}
.pac-dup-card-cta:hover {
    background: color-mix(in srgb, var(--accent-soft) 70%, var(--surface));
}
.pac-dup-foot {
    border-top: 1px solid var(--line-soft);
    padding: 12px 18px;
    background: color-mix(in srgb, var(--surface-2) 12%, var(--surface));
}
.pac-dup-foot p {
    margin: 0;
    font-size: 11.5px;
    color: var(--muted);
    line-height: 1.5;
}
.muted-italic { font-style: italic; }
.proxima-destacada { color: var(--accent); font-weight: 750; }
.proxima-vacia { color: var(--warn); font-weight: 750; }
.pat-signal {
    min-width: 0;
}
.pat-signal-main {
    font-size: 12.5px;
    line-height: 1.35;
}
.pat-signal-sub {
    margin-top: 2px;
    color: var(--muted);
    font-size: 11px;
    line-height: 1.35;
}
.pat-signal-action {
    color: var(--muted);
    font-weight: 650;
}
.pat-payment-cell {
    min-width: 0;
}
.pat-row-actions {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 7px;
    flex-wrap: nowrap;
}
.pat-action {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0 12px;
    border-radius: 10px;
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--ink-2);
    font-size: 12px;
    font-weight: 750;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, color .15s ease, transform .15s ease;
}
.pat-action svg {
    flex: 0 0 auto;
}
.pat-action:hover {
    background: var(--surface-2);
    border-color: color-mix(in srgb, var(--accent) 28%, var(--line));
    color: var(--ink);
}
.pat-action:active { transform: translateY(1px); }
.pat-action:focus-visible,
.pat-menu a:focus-visible,
.pat-menu button:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--accent) 24%, transparent);
    outline-offset: 2px;
}
.pat-action-primary {
    background: var(--accent);
    border-color: var(--accent);
    color: white;
}
.pat-action-primary:hover {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
    color: white;
}
.pat-action-danger {
    background: color-mix(in srgb, var(--rose) 11%, var(--surface));
    border-color: color-mix(in srgb, var(--rose) 28%, var(--line));
    color: var(--rose);
}
.pat-action-danger:hover {
    background: color-mix(in srgb, var(--rose) 16%, var(--surface));
    color: var(--rose);
}
.pat-action-icon {
    width: 34px;
    padding: 0;
    background: var(--surface);
    color: color-mix(in srgb, var(--whatsapp) 74%, var(--ink));
    border-color: color-mix(in srgb, var(--accent) 17%, var(--line));
}
.pat-action-whatsapp:hover {
    color: color-mix(in srgb, var(--whatsapp) 72%, var(--ink));
    border-color: color-mix(in srgb, var(--whatsapp) 34%, var(--line));
    background: color-mix(in srgb, var(--whatsapp) 8%, var(--surface));
}
.pat-action-secondary {
    color: var(--ink-2);
    border-color: color-mix(in srgb, var(--accent) 17%, var(--line));
}
.pat-more {
    position: relative;
    flex: 0 0 auto;
}
.pat-action-more {
    width: 34px;
    padding: 0;
    color: var(--ink-2);
    background: transparent;
    border-color: transparent;
}
.pat-action-more:hover,
.pat-more.is-open .pat-action-more {
    background: var(--surface-2);
    border-color: color-mix(in srgb, var(--accent) 18%, var(--line));
    color: var(--ink);
}
.pat-menu {
    position: absolute;
    z-index: 40;
    right: 0;
    top: calc(100% + 8px);
    min-width: 232px;
    padding: 7px;
    border: 1px solid color-mix(in srgb, var(--accent) 14%, var(--line));
    border-radius: 12px;
    background: var(--surface);
    box-shadow: 0 18px 42px -28px color-mix(in srgb, var(--ink) 70%, transparent);
}
.pat-menu a,
.pat-menu button {
    width: 100%;
    min-height: 42px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 11px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--ink-2);
    font: inherit;
    font-size: 13px;
    font-weight: 650;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}
.pat-menu a:hover,
.pat-menu button:hover {
    background: var(--surface-2);
    color: var(--ink);
}
.pat-menu .is-danger {
    margin-top: 6px;
    padding-top: 0;
    border-top: 1px solid var(--line-soft);
    color: color-mix(in srgb, var(--rose) 86%, #b42318);
}
.pat-menu .is-danger:hover {
    background: color-mix(in srgb, var(--rose) 10%, var(--surface));
    color: color-mix(in srgb, var(--rose) 86%, #9f1f15);
}

.filter-sep {
    display: inline-block;
    color: var(--line); font-size: 11px;
    margin: 0 4px;
}

.module-header-pacientes {
    border-bottom: 1px solid var(--line-soft);
    padding-bottom: 18px;
}

/* Wrap centrado para forms tipo Nuevo/Editar paciente · matchea el mockup */
.form-wrap {
    max-width: 880px;
    margin: 0 auto;
}

/* === TOOLBAR de pacientes (búsqueda + contador) ============================ */
.pat-toolbar {
    display: flex; align-items: center; gap: 18px;
    padding: 14px 18px; margin-bottom: 14px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: 0 1px 2px color-mix(in srgb, var(--ink) 4%, transparent);
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.pat-toolbar.is-searching {
    border-color: color-mix(in srgb, var(--accent) 24%, var(--line));
    background:
        linear-gradient(135deg,
            color-mix(in srgb, var(--accent-soft) 22%, var(--surface)) 0%,
            var(--surface) 68%);
    box-shadow:
        0 16px 42px -34px color-mix(in srgb, var(--accent) 55%, transparent),
        inset 0 1px 0 color-mix(in srgb, #fff 58%, transparent);
}

.pat-search {
    position: relative; flex: 1; max-width: 460px;
    display: flex; align-items: center;
    min-width: 0;
}
.pat-search-icon {
    position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
    color: var(--muted); pointer-events: none;
    transition: color .2s ease;
}
.pat-search:focus-within .pat-search-icon { color: var(--accent); }

.pat-search-input {
    box-sizing: border-box;
    width: 100%;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 11px 80px 11px 42px;
    font-size: 14px; color: var(--ink);
    font-family: 'Inter', sans-serif;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.pat-search-input::-webkit-search-cancel-button,
.pat-search-input::-webkit-search-decoration,
.search-input::-webkit-search-cancel-button,
.search-input::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
    appearance: none;
    display: none;
}
.pat-search-input::placeholder { color: var(--muted); }
.pat-search-input:hover { border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); }
.pat-search-input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent);
}
.pat-toolbar.is-searching .pat-search-input {
    border-color: color-mix(in srgb, var(--accent) 32%, var(--line));
    background: color-mix(in srgb, var(--accent-soft) 12%, var(--surface));
}

.pat-search-clear {
    position: absolute; right: 48px; top: 50%; transform: translateY(-50%);
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; border-radius: 50%;
    background: var(--surface-2); color: var(--muted);
    border: 0; cursor: pointer;
    transition: background .15s ease, color .15s ease;
}
.pat-search-clear[hidden] { display: none; }
.pat-search-clear:hover { background: var(--accent-soft); color: var(--accent); }

.pat-search-kbd {
    position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10.5px; color: var(--muted);
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: 5px;
    padding: 2px 6px;
    pointer-events: none;
    line-height: 1;
}

.pat-search-spinner {
    position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
    width: 34px; height: 24px;
    align-items: center;
    justify-content: center;
    display: none;
    pointer-events: none;
}
.pat-search-spinner.show { display: inline-flex; }
.pat-search-mandorla {
    width: 32px;
    height: 20px;
    transform: scale(.66);
    transform-origin: center;
}
.pat-search-mandorla .v-loader-circle {
    top: 2px;
    width: 16px;
    height: 16px;
    border-width: 1.7px;
    background: color-mix(in srgb, var(--surface) 82%, transparent);
}
.pat-search-mandorla .v-loader-left { left: 3px; }
.pat-search-mandorla .v-loader-right { right: 3px; }
.pat-search-spinner.show + * { display: none; }
.pat-table {
    position: relative;
}
.pat-table.is-loading {
    pointer-events: none;
}
.pat-table.is-loading .pat-row,
.pat-table.is-loading .empty-state,
.pat-table.is-loading .table-header {
    opacity: .52;
    filter: saturate(.82);
    transition: opacity .16s ease, filter .16s ease;
}
.pat-table.is-loading::after {
    content: "Buscando pacientes...";
    position: absolute;
    top: 14px;
    right: 16px;
    z-index: 6;
    min-height: 30px;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 6px 12px 6px 34px;
    border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line));
    border-radius: 999px;
    background: color-mix(in srgb, var(--surface) 92%, transparent);
    color: var(--accent);
    font-size: 12px;
    font-weight: 760;
    box-shadow: 0 14px 34px -26px color-mix(in srgb, var(--ink) 52%, transparent);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.pat-table.is-loading::before {
    content: "";
    position: absolute;
    top: 22px;
    right: 145px;
    z-index: 7;
    width: 18px;
    height: 10px;
    color: var(--accent);
    background:
        radial-gradient(circle at 38% 50%, transparent 0 5px, currentColor 5.5px 6.5px, transparent 7px),
        radial-gradient(circle at 62% 50%, transparent 0 5px, currentColor 5.5px 6.5px, transparent 7px);
    animation: pat-mandorla-pulse 1.4s cubic-bezier(.45,0,.2,1) infinite;
}
@keyframes pat-mandorla-pulse {
    0%, 100% { transform: scaleX(1); opacity: .68; }
    45%, 55% { transform: scaleX(.58); opacity: 1; }
}

.pat-toolbar-meta {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 13px; color: var(--ink-2);
    margin-left: auto; flex-wrap: wrap;
}
.pat-toolbar-meta strong { color: var(--ink); font-weight: 600; }
.pat-toolbar-meta .muted { color: var(--muted); font-weight: 400; }
.pat-toolbar-meta .pat-search-active {
    padding: 3px 9px; border-radius: 999px;
    background: var(--accent-soft); color: var(--accent);
    font-size: 12px; font-weight: 500;
}
.pat-toolbar-meta .pat-search-active strong { color: var(--accent); }

/* Paginación */
.pat-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-top: 14px;
    padding: 12px 14px;
    background: color-mix(in srgb, var(--surface) 90%, var(--surface-2));
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: 0 1px 2px color-mix(in srgb, var(--ink) 4%, transparent);
}
.pat-pagination-summary {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--muted);
    font-size: 12.5px;
    white-space: nowrap;
}
.pat-pagination-summary strong {
    color: var(--ink);
    font-weight: 650;
}
.pat-page-nav {
    display: flex;
    align-items: center;
    gap: 8px;
}
.pat-page-numbers {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 0 4px;
}
.pat-page-btn,
.pat-page-chip {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--ink-2);
    text-decoration: none;
    font-weight: 600;
    transition: background .15s ease, border-color .15s ease, color .15s ease, transform .15s ease;
}
.pat-page-btn {
    gap: 6px;
    padding: 0 12px;
    border-radius: 9px;
    font-size: 12.5px;
}
.pat-page-chip {
    width: 34px;
    border-radius: 8px;
    font-size: 12px;
}
.pat-page-btn:hover,
.pat-page-chip:hover {
    background: var(--surface-2);
    border-color: color-mix(in srgb, var(--accent) 28%, var(--line));
    color: var(--ink);
}
.pat-page-chip.is-active {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-fg);
    box-shadow: 0 6px 14px color-mix(in srgb, var(--accent) 18%, transparent);
}
.pat-page-btn.is-next {
    color: var(--accent);
    border-color: color-mix(in srgb, var(--accent) 28%, var(--line));
}
.pat-page-btn.is-disabled {
    opacity: 0.45;
    cursor: default;
    background: var(--surface-2);
}
.pat-page-ellipsis {
    width: 20px;
    text-align: center;
    color: var(--muted);
    font-weight: 700;
}

@media (max-width: 1180px) {
    .pacientes-list-shell {
        padding: 18px 20px 36px !important;
    }
    .pat-table {
        display: grid;
        gap: 10px;
        padding: 0;
        border: 0;
        background: transparent;
        box-shadow: none;
    }
    .pat-table .table-header {
        display: none;
    }
    .pat-row {
        grid-template-columns: minmax(0, 1fr);
        gap: 13px;
        padding: 15px 15px 15px 18px;
        border: 1px solid color-mix(in srgb, var(--accent) 12%, var(--line));
        border-radius: 18px;
        background: var(--surface);
        box-shadow: 0 18px 50px -44px color-mix(in srgb, var(--ink) 64%, transparent);
    }
    .pat-row::before {
        top: 18px;
        bottom: 18px;
    }
    .pat-row:last-child {
        border-bottom: 1px solid color-mix(in srgb, var(--accent) 12%, var(--line));
    }
    .pat-signal,
    .pat-payment-cell {
        display: grid;
        grid-template-columns: 86px minmax(0, 1fr);
        column-gap: 10px;
        row-gap: 1px;
        align-items: baseline;
        justify-items: start;
    }
    .pat-signal::before,
    .pat-payment-cell::before {
        content: attr(data-label);
        grid-row: 1 / span 2;
        color: var(--muted);
        font-size: 10.5px;
        font-weight: 800;
        letter-spacing: .08em;
        text-transform: uppercase;
    }
    .pat-row-actions {
        justify-content: flex-start;
        padding-top: 2px;
    }
    .pat-action {
        min-height: 38px;
    }
}

@media (max-width: 720px) {
    .pacientes-hero {
        padding-bottom: 14px;
    }
    .pacientes-header-row {
        gap: 14px;
        margin-bottom: 14px;
    }
    .pacientes-actions,
    .pacientes-actions .btn-primary {
        width: 100%;
    }
    .pacientes-filter-bar {
        flex-wrap: nowrap;
        overflow-x: auto;
        margin: 0 -20px;
        padding: 0 20px 2px;
        scrollbar-width: none;
    }
    .pacientes-filter-bar::-webkit-scrollbar { display: none; }
    .pacientes-filter-bar .filter-label,
    .pacientes-filter-bar .filter-sep {
        display: none;
    }
    .pacientes-filter-bar .filter-pill {
        flex: 0 0 auto;
        min-height: 34px;
        padding-inline: 13px;
    }
    .pat-toolbar {
        position: sticky;
        top: 0;
        z-index: 11;
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        padding: 12px;
        border-radius: 16px;
        background: color-mix(in srgb, var(--surface) 94%, transparent);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
    }
    .pat-search { max-width: none; }
    .pat-toolbar-meta { margin-left: 0; }
    .pat-pagination {
        align-items: stretch;
        flex-direction: column;
    }
    .pat-page-nav {
        justify-content: space-between;
        flex-wrap: wrap;
    }
    .pat-page-numbers {
        order: 3;
        width: 100%;
        justify-content: center;
        padding-top: 2px;
    }
    .pat-person-link {
        gap: 12px;
    }
    .pat-person-link .av {
        width: 42px;
        height: 42px;
        font-size: 15px;
    }
    .pat-patient-name {
        font-size: 15px;
        white-space: normal;
    }
    .pat-row-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .pat-action-primary,
    .pat-action-danger {
        grid-column: 1 / -1;
        min-height: 42px;
    }
    .pat-action {
        width: 100%;
    }
    .pat-action-icon {
        width: 100%;
        min-width: 0;
        gap: 7px;
    }
    .pat-action-icon::after {
        content: "WhatsApp";
        color: var(--ink-2);
        font-size: 12px;
        font-weight: 750;
    }
    .pat-action-icon:hover::after {
        color: var(--ink);
    }
    .pat-more {
        width: 100%;
        grid-column: 1 / -1;
    }
    .pat-action-more {
        width: 100%;
        background: var(--surface);
        border-color: var(--line);
        gap: 7px;
    }
    .pat-action-more::after {
        content: "Más";
        color: var(--ink-2);
        font-size: 12px;
        font-weight: 750;
    }
    .pat-action-more:hover::after,
    .pat-more.is-open .pat-action-more::after {
        color: var(--ink);
    }
    .pat-menu {
        position: static;
        width: 100%;
        min-width: 0;
        margin-top: 8px;
        padding: 6px;
        border-radius: 12px;
        background: color-mix(in srgb, var(--surface-2) 58%, var(--surface));
        box-shadow: none;
    }
    .pat-menu a,
    .pat-menu button {
        min-height: 40px;
        font-size: 12.5px;
    }
    .pat-menu svg {
        width: 16px;
        height: 16px;
    }
    .pat-menu .is-danger {
        margin-top: 4px;
    }
    .pat-action:only-child,
    .pat-action-secondary:nth-child(2):last-child {
        grid-column: 1 / -1;
    }
}

/* Estado vacío en la tabla */
.pat-table .empty-state {
    padding: 56px 32px; text-align: center;
    display: flex; flex-direction: column; align-items: center; gap: 14px;
    color: var(--ink-2); font-size: 14px;
}
.pat-table .empty-state svg { opacity: 0.6; }
.pat-table .empty-state strong { color: var(--ink); }
.pat-empty-actions {
    display: flex;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 14px;
}

.empty-state {
    padding: 48px 24px; text-align: center;
    display: flex; flex-direction: column; align-items: center; gap: 16px;
    color: var(--muted); font-size: 14px;
}

/* ===== BREADCRUMB ======================================================== */
.breadcrumb {
    display: flex; align-items: center; gap: 7px;
    font-size: 12.5px; color: var(--muted);
}
.breadcrumb a {
    color: var(--ink-2); text-decoration: none; font-weight: 500;
}
.breadcrumb a:hover { color: var(--accent); }
.breadcrumb svg { color: var(--muted); }
.breadcrumb span:last-child { color: var(--ink); font-weight: 500; }

/* ===== HERO BLOB (decoración para card de detalle) ======================= */
.hero-blob {
    position: absolute; top: -50%; right: -10%;
    width: 280px; height: 280px; border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--accent) 20%, transparent) 0%, transparent 70%);
    filter: blur(40px); pointer-events: none;
}
.info-line { display: inline-flex; align-items: center; gap: 6px; }

/* ===== SECTION CARD (form sections) · matchea mockup ====================== */
.section-card {
    background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
    padding: 24px 28px; margin-bottom: 18px;
}
.section-head {
    display: flex; align-items: flex-start; gap: 14px; margin-bottom: 22px;
}
.section-num {
    width: 28px; height: 28px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--accent-soft); color: var(--accent);
    font-family: 'Fraunces', serif; font-weight: 600; font-size: 13px;
    flex-shrink: 0;
}
.section-num.done { background: var(--ok); color: white; }
.section-h2 { font-size: 18px; font-weight: 600; color: var(--ink); line-height: 1.2; }
.section-sub { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.req { color: var(--rose); margin-left: 2px; }

.field-group { margin-bottom: 22px; }
.field-group:last-child { margin-bottom: 0; }

.textarea {
    width: 100%; padding: 11px 14px;
    border: 1px solid var(--line); border-radius: 9px;
    background: var(--surface); font-size: 14px; color: var(--ink);
    font-family: 'Inter', sans-serif;
    resize: vertical; min-height: 90px; line-height: 1.5;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.textarea:focus {
    outline: none; border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}

/* ===== CHIP GROUPS (tipo proceso, modalidad, métodos pago) =============== */
.chip-group { display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
    padding: 8px 14px; border-radius: 9px;
    border: 1px solid var(--line); background: var(--surface);
    font-size: 13px; font-weight: 500; color: var(--ink-2);
    cursor: pointer; font-family: 'Inter', sans-serif;
}
.chip:hover { background: var(--surface-2); }
.chip.selected {
    background: var(--accent-soft); color: var(--accent);
    border-color: color-mix(in srgb, var(--accent) 35%, transparent);
    font-weight: 600;
}

/* Badge DEMO · marca discreta para data sembrada al onboarding.
   Color terracota (warm), nunca rojo: no es error, es señal informativa. */
.badge-demo {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 7px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    background: color-mix(in srgb, var(--warm-soft) 60%, var(--surface));
    color: color-mix(in srgb, var(--warm) 70%, var(--ink));
    border: 1px solid color-mix(in srgb, var(--warm) 25%, var(--line));
    border-radius: 4px;
    line-height: 1;
    white-space: nowrap;
    vertical-align: middle;
    user-select: none;
}
.badge-demo::before {
    content: "";
    width: 5px; height: 5px;
    border-radius: 50%;
    background: var(--warm);
    opacity: .7;
    flex-shrink: 0;
}

/* ===== CHECKBOX ROWS ===================================================== */
/* Variante simple (mockup): inline, sin bg ni borde, solo padding vertical */
.check-row {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 10px 0; cursor: pointer;
}
.check-row input[type="checkbox"] { margin-top: 3px; accent-color: var(--accent); }
.check-title { font-size: 13.5px; font-weight: 600; color: var(--ink); margin-bottom: 2px; }
.check-sub { font-size: 12px; color: var(--muted); line-height: 1.45; }

.check-inline {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 12.5px; color: var(--ink-2); cursor: pointer;
}
.check-inline input[type="checkbox"] { accent-color: var(--accent); }

/* ===== STICKY FORM FOOTER · matchea mockup ============================== */
.form-footer {
    position: sticky; bottom: 0; z-index: 4;
    background: color-mix(in srgb, var(--bg) 75%, transparent);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    border-top: 1px solid var(--line);
    padding: 16px 32px;
    margin: 24px -32px 0;            /* extiende a los lados del .form-wrap */
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.flex-1 { flex: 1; }

/* ===== UX ADVANCED PANELS =============================================== */
.ux-advanced {
    margin: 18px 0 0;
}
.ux-advanced-summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 18px;
    border-radius: 16px;
    background: color-mix(in srgb, var(--surface-2) 74%, var(--surface));
    border: 1px solid var(--line);
    box-shadow: 0 14px 34px -26px color-mix(in srgb, var(--ink) 38%, transparent);
}
.ux-advanced-summary::-webkit-details-marker { display: none; }
.ux-advanced-summary strong {
    display: block;
    color: var(--ink);
    font-size: 14px;
    line-height: 1.2;
}
.ux-advanced-summary small {
    display: block;
    color: var(--muted);
    font-size: 12.5px;
    line-height: 1.35;
    margin-top: 3px;
}
.ux-advanced-summary b {
    flex: 0 0 auto;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--accent);
    padding: 8px 12px;
    border-radius: 999px;
    background: var(--surface);
    border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--line));
}
.ux-advanced[open] .ux-advanced-summary {
    background: var(--surface);
    border-color: color-mix(in srgb, var(--accent) 22%, var(--line));
}
.ux-advanced-summary b .ux-open { display: none; }
.ux-advanced[open] .ux-advanced-summary b .ux-closed { display: none; }
.ux-advanced[open] .ux-advanced-summary b .ux-open { display: inline; }
.ux-advanced-body {
    padding-top: 14px;
}
.inline-optional {
    margin-top: 4px;
}
.inline-optional > summary {
    list-style: none;
    width: max-content;
    max-width: 100%;
    cursor: pointer;
    color: var(--accent);
    font-size: 12.5px;
    font-weight: 700;
    padding: 8px 11px;
    border-radius: 999px;
    background: var(--accent-soft);
    border: 1px solid color-mix(in srgb, var(--accent) 14%, transparent);
}
.inline-optional > summary::-webkit-details-marker { display: none; }

/* ===== FLASH (toast) ===================================================== */
.flash-stack {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 120;
    width: min(420px, calc(100vw - 32px));
    display: grid;
    gap: 10px;
    pointer-events: none;
}
.flash {
    display: grid;
    grid-template-columns: 34px 1fr 28px;
    align-items: center;
    gap: 12px;
    min-height: 64px;
    padding: 12px;
    border-radius: 14px;
    background: color-mix(in srgb, var(--surface) 96%, white);
    color: var(--ink);
    border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--line));
    box-shadow: 0 24px 60px -28px color-mix(in srgb, var(--ink) 45%, transparent),
                0 1px 0 rgba(255,255,255,.7) inset;
    opacity: 0;
    transform: translateY(14px) scale(.98);
    transition: opacity .22s ease, transform .22s ease;
    pointer-events: auto;
}
.flash.show { opacity: 1; transform: translateY(0) scale(1); }
.flash-icon {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    background: var(--ok-soft);
    color: var(--ok);
}
.flash-error .flash-icon {
    background: color-mix(in srgb, var(--rose) 12%, var(--surface));
    color: var(--rose);
}
.flash-info .flash-icon {
    background: color-mix(in srgb, var(--accent) 10%, var(--surface));
    color: color-mix(in srgb, var(--accent) 78%, var(--ink));
}
.flash-icon svg,
.flash-close svg {
    width: 18px;
    height: 18px;
}
.flash-copy {
    min-width: 0;
    display: grid;
    gap: 2px;
}
.flash-copy strong {
    font-size: 13.5px;
    line-height: 1.15;
    color: var(--ink);
}
.flash-copy small {
    font-size: 12.5px;
    line-height: 1.35;
    color: var(--ink-2);
}
.flash-close {
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 9px;
    display: grid;
    place-items: center;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
}
.flash-close:hover {
    background: var(--surface-2);
    color: var(--ink);
}

/* ===== CONFIRM ACTION · window.confirmAction() =========================== */
/* Modal premium de confirmación. Inspirado en .post-create-sheet.            */
/* JS canónico: Resources/WebContent/public/common/js/layout-app.js          */
.confirm-layer {
    position: fixed;
    inset: 0;
    z-index: 130;
    display: grid;
    place-items: center;
    padding: 24px;
    background:
        radial-gradient(40% 36% at 50% 42%,
            color-mix(in srgb, var(--accent-soft) 30%, transparent) 0,
            transparent 70%),
        color-mix(in srgb, var(--ink) 24%, transparent);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    opacity: 0;
    transition: opacity .2s ease;
}
.confirm-layer.show { opacity: 1; }
.confirm-card {
    position: relative;
    width: min(460px, 100%);
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    column-gap: 16px;
    row-gap: 12px;
    padding: 22px 22px 18px;
    border-radius: 22px;
    background: var(--surface);
    border: 1px solid var(--line);
    box-shadow:
        0 34px 90px -42px color-mix(in srgb, var(--ink) 70%, transparent),
        0 4px 14px -8px color-mix(in srgb, var(--ink) 30%, transparent);
    transform: translateY(12px) scale(.97);
    transition: transform .22s cubic-bezier(.32,.72,.32,1);
}
.confirm-layer.show .confirm-card { transform: none; }
.confirm-close {
    position: absolute;
    top: 12px; right: 12px;
    width: 28px; height: 28px;
    display: grid; place-items: center;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--ink-2);
    cursor: pointer;
    transition: background .14s ease, color .14s ease;
}
.confirm-close:hover {
    background: var(--surface-2);
    color: var(--ink);
}
.confirm-mark {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: color-mix(in srgb, var(--warn) 14%, var(--surface));
    color: var(--warn);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--warn) 22%, transparent);
}
.confirm-danger .confirm-mark {
    background: color-mix(in srgb, var(--rose) 12%, var(--surface));
    color: var(--rose);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rose) 22%, transparent);
}
.confirm-info .confirm-mark {
    background: color-mix(in srgb, var(--accent) 12%, var(--surface));
    color: var(--accent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent);
}
.confirm-mark svg { width: 24px; height: 24px; }
.confirm-copy { padding-right: 22px; }  /* deja aire para el botón close */
.confirm-kicker {
    display: inline-block;
    margin-bottom: 6px;
    color: var(--warn);
    font-size: 10.5px;
    font-weight: 880;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.confirm-danger .confirm-kicker { color: var(--rose); }
.confirm-info   .confirm-kicker { color: var(--accent); }
.confirm-copy h2 {
    margin: 0 0 6px;
    font-size: 19px;
    line-height: 1.18;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--ink);
}
.confirm-copy p {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--ink-2);
}
.confirm-actions {
    grid-column: 1 / -1;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding-top: 6px;
    border-top: 1px solid var(--line-soft);
    margin-top: 4px;
}
/* Rojo destructivo proper · el --rose del tema es desaturado (#B8888A),
   así que para CTAs destructivos mezclamos con rojo puro para alcanzar
   contraste WCAG y diferenciarse del btn-primary acento. */
.btn-confirm-danger {
    background: color-mix(in srgb, var(--rose) 30%, #C0382A) !important;
    border-color: color-mix(in srgb, var(--rose) 30%, #C0382A) !important;
    color: #fff !important;
    text-shadow: 0 1px 0 color-mix(in srgb, #000 18%, transparent);
    box-shadow: 0 14px 30px -16px color-mix(in srgb, #C0382A 78%, transparent) !important;
}
.btn-confirm-danger:hover {
    background: color-mix(in srgb, var(--rose) 25%, #A02D22) !important;
    border-color: color-mix(in srgb, var(--rose) 25%, #A02D22) !important;
}
.btn-confirm-danger svg { color: #fff !important; }

/* Mantener el diálogo centrado también en mobile. Antes se convertía en
   bottom-sheet y quedaba demasiado bajo en confirmaciones destructivas. */
@media (max-width: 900px) {
    .confirm-layer {
        place-items: center;
        padding: max(18px, env(safe-area-inset-top, 0px))
                 16px
                 max(18px, env(safe-area-inset-bottom, 0px));
    }
    .confirm-card {
        width: min(440px, 100%) !important;
        max-width: calc(100vw - 32px) !important;
        grid-template-columns: 40px minmax(0, 1fr);
        column-gap: 12px;
        padding: 18px 18px 16px !important;
        border-radius: 20px !important;
        transform: translateY(10px) scale(.98);
        max-height: calc(100vh - 36px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
        max-height: calc(100dvh - 36px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
        overflow-y: auto;
    }
    .confirm-card::before { content: none; }
    .confirm-layer.show .confirm-card { transform: none; }
    .confirm-mark {
        width: 40px; height: 40px;
        border-radius: 12px;
    }
    .confirm-mark svg { width: 21px; height: 21px; }
    .confirm-close { top: 14px; right: 12px; }
    .confirm-copy { padding-right: 32px; }
    .confirm-copy h2 { font-size: 17px; }
    .confirm-copy p  { font-size: 12.5px; }
    .confirm-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        padding-top: 10px;
        margin-top: 6px;
    }
    .confirm-actions .btn-ghost,
    .confirm-actions .btn-primary {
        min-height: 46px;
        justify-content: center;
    }
}

@media (max-width: 520px) {
    .confirm-layer {
        background:
            radial-gradient(70% 46% at 50% 48%,
                color-mix(in srgb, var(--accent-soft) 28%, transparent) 0,
                transparent 72%),
            color-mix(in srgb, var(--ink) 22%, transparent);
        padding-inline: 14px;
    }
    .confirm-card {
        grid-template-columns: 36px minmax(0, 1fr);
        column-gap: 11px;
        row-gap: 11px;
        padding: 16px 14px 14px !important;
        border-radius: 20px !important;
        max-width: calc(100vw - 28px) !important;
        max-height: calc(100vh - 36px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
        max-height: calc(100dvh - 36px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    }
    .confirm-mark {
        width: 36px;
        height: 36px;
        border-radius: 11px;
    }
    .confirm-mark svg {
        width: 19px;
        height: 19px;
    }
    .confirm-close {
        top: 14px;
        right: 10px;
        width: 34px;
        height: 34px;
    }
    .confirm-copy {
        padding-right: 34px;
    }
    .confirm-kicker {
        margin-bottom: 5px;
        font-size: 9.5px;
        letter-spacing: .11em;
    }
    .confirm-copy h2 {
        font-size: 16.5px;
        line-height: 1.16;
    }
    .confirm-copy p {
        font-size: 12.5px;
        line-height: 1.45;
    }
    .confirm-actions {
        display: flex;
        flex-direction: column;
        gap: 8px;
        padding-top: 10px;
        margin-top: 4px;
    }
    .confirm-actions .btn-primary,
    .confirm-actions .btn-ghost {
        width: 100%;
        min-height: 46px;
        padding-inline: 12px;
    }
    .confirm-actions .btn-primary { order: 1; }
    .confirm-actions .btn-ghost { order: 2; }
}

/* ===== ACTION MENUS ====================================================== */
.ux-action-menu {
    position: relative;
}
.ux-action-menu > summary {
    list-style: none;
    cursor: pointer;
}
.ux-action-menu > summary::-webkit-details-marker { display: none; }
.ux-action-menu-panel {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    width: 220px;
    z-index: 20;
    padding: 8px;
    border-radius: 14px;
    background: var(--surface);
    border: 1px solid var(--line);
    box-shadow: 0 22px 60px -32px color-mix(in srgb, var(--ink) 55%, transparent);
    display: grid;
    gap: 4px;
}
.ux-action-menu-panel a,
.ux-action-menu-panel button {
    width: 100%;
    border: 0;
    background: transparent;
    color: var(--ink-2);
    text-align: left;
    text-decoration: none;
    border-radius: 10px;
    padding: 10px 11px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}
.ux-action-menu-panel a:hover,
.ux-action-menu-panel button:hover {
    background: var(--surface-2);
    color: var(--ink);
}
.ux-action-menu-panel .is-danger {
    color: var(--rose);
}
@media (max-width: 640px) {
    .flash-stack {
        right: 16px;
        bottom: 16px;
        left: 16px;
        width: auto;
    }
    .flash {
        grid-template-columns: 30px 1fr 26px;
        min-height: 58px;
        border-radius: 13px;
    }
    .flash-icon {
        width: 30px;
        height: 30px;
    }
    .ux-advanced-summary {
        align-items: flex-start;
        flex-direction: column;
    }
    .ux-advanced-summary b {
        width: 100%;
        text-align: center;
    }
    .ux-action-menu {
        width: 100%;
    }
    .ux-action-menu > summary {
        justify-content: center;
    }
    .ux-action-menu-panel {
        position: static;
        width: 100%;
        margin-top: 8px;
    }
}

/* ===== REVEAL ============================================================ */
/* Cada .reveal arranca oculto y aparece cuando entra al viewport (layout-app.js
 * agrega .in con un stagger de 80ms entre hermanos del mismo padre). */
.reveal {
    opacity: 0; transform: translateY(12px);
    transition: opacity .6s ease, transform .6s ease;
}
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; transition: none; }
}

/* ===========================================================================
 * AGENDA · calendario semanal/diario/mensual
 * Replica fiel al mockup crm-agenda.html
 * =========================================================================== */

/* Module header agenda · segmented + nav + filtros */
.seg {
    display: inline-flex; background: var(--surface-2); border-radius: 9px; padding: 3px;
    border: 1px solid var(--line);
}
.seg button, .seg a {
    padding: 6px 14px; font-size: 13px; font-weight: 500; color: var(--ink-2);
    border-radius: 6px; cursor: pointer; text-decoration: none;
    border: none; background: transparent;
}
.seg button.active, .seg a.active {
    background: var(--surface); color: var(--ink);
    box-shadow: 0 1px 2px rgba(0,0,0,0.04); font-weight: 600;
}
.agenda-view-seg {
    border-radius: 9px;
    padding: 3px;
    gap: 0;
    background: var(--surface-2);
    box-shadow: none;
}
.agenda-view-seg a {
    min-width: auto;
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 13px;
    line-height: 1.2;
    text-align: center;
    font-weight: 500;
    color: var(--ink-2);
}
.agenda-view-seg a.active {
    background: var(--surface);
    color: var(--ink);
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
    font-weight: 600;
}
.module-header-agenda { padding-bottom: 18px; }
.agenda-toolbar,
.agenda-range-nav {
    min-width: 0;
}
.agenda-filter-bar {
    min-width: 0;
    padding-bottom: 4px;
}

.icon-btn {
    width: 32px; height: 32px; border-radius: 8px;
    border: 1px solid var(--line); background: var(--surface);
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer; color: var(--ink-2); text-decoration: none;
}
.icon-btn:hover { background: var(--surface-2); }

.btn-today {
    padding: 7px 14px; font-size: 13px; font-weight: 500; color: var(--ink-2);
    border: 1px solid var(--line); background: var(--surface); border-radius: 8px;
    cursor: pointer; text-decoration: none;
}
.btn-today:hover { background: var(--surface-2); }

.agenda-list-cta {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 7px 13px;
    border-radius: 10px;
    border: 1px solid color-mix(in srgb, var(--accent) 26%, var(--line));
    background: color-mix(in srgb, var(--accent-soft) 48%, var(--surface));
    color: var(--accent);
    font-size: 12.5px;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: 0 12px 28px -24px color-mix(in srgb, var(--accent) 70%, transparent);
}
.agenda-list-cta:hover {
    background: color-mix(in srgb, var(--accent-soft) 70%, var(--surface));
    border-color: color-mix(in srgb, var(--accent) 38%, var(--line));
}
.agenda-list-cta.is-calendar {
    background: var(--surface);
    color: var(--ink-2);
    border-color: var(--line);
    box-shadow: none;
}
.agenda-state-legend {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin: -8px 32px 14px;
    padding: 9px 12px;
    border: 1px solid var(--line-soft);
    border-radius: 12px;
    background: color-mix(in srgb, var(--surface) 88%, var(--surface-2));
    color: var(--muted);
}
.agenda-state-legend > span {
    margin-right: 2px;
    color: var(--muted);
    font-size: 10.5px;
    font-weight: 850;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.agenda-state-legend b {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--ink-2);
    font-size: 12px;
    font-weight: 760;
}
.legend-dot {
    width: 9px;
    height: 9px;
    border-radius: 999px;
    flex: 0 0 auto;
}
.legend-dot-next { background: var(--ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 16%, transparent); }
.legend-dot-confirmed { background: var(--ok); opacity: .72; }
.legend-dot-pending-close { background: var(--warn); box-shadow: 0 0 0 3px color-mix(in srgb, var(--warn) 14%, transparent); }
.legend-dot-pending { background: var(--warn); }
.legend-dot-done { background: var(--muted); }
.legend-dot-cancelled { background: var(--line); border: 1px dashed var(--muted); }

.agenda-pulse-row {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
    margin: -6px 0 12px;
}
.agenda-pulse-chip {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    border: 1px solid color-mix(in srgb, var(--accent) 12%, var(--line));
    border-radius: 13px;
    background: color-mix(in srgb, var(--surface) 82%, var(--surface-2));
    color: var(--ink);
    font-size: 13px;
    font-weight: 850;
    box-shadow: 0 12px 28px -26px color-mix(in srgb, var(--ink) 60%, transparent);
}
.agenda-pulse-chip small {
    color: var(--ink-2);
    font-size: 12px;
    font-weight: 740;
}
.agenda-pulse-chip i {
    width: 20px;
    height: 20px;
    border-radius: 8px;
    display: inline-grid;
    place-items: center;
    color: var(--accent);
    background: color-mix(in srgb, var(--accent-soft) 68%, var(--surface));
    font-style: normal;
}
.agenda-pulse-icon-calendar::before { content: "□"; }
.agenda-pulse-icon-warn::before { content: "!"; }
.agenda-pulse-icon-close::before { content: "✓"; }
.agenda-pulse-icon-money::before { content: "S/"; font-size: 9px; font-weight: 900; }
.agenda-pulse-warn {
    border-color: color-mix(in srgb, var(--warn) 22%, var(--line));
}
.agenda-pulse-warn i,
.agenda-pulse-warm i {
    color: var(--warn);
    background: var(--warn-soft);
}
.agenda-pulse-ok i {
    color: var(--ok);
    background: var(--ok-soft);
}
.agenda-pulse-muted {
    color: var(--ink-2);
}
.agenda-pulse-muted i {
    color: var(--muted);
    background: var(--surface-2);
}
.agenda-filter-divider {
    width: 1px;
    height: 22px;
    margin: 0 7px;
    background: var(--line);
}
.agenda-state-chip {
    min-height: 30px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--ink-2);
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
}

.agenda-board {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 292px;
    gap: 0;
    margin: 0 24px 34px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: var(--surface);
    overflow: hidden;
    box-shadow: 0 24px 70px -58px color-mix(in srgb, var(--ink) 70%, transparent);
}
.agenda-calendar-pane {
    min-width: 0;
}
.agenda-board .cal-wrap {
    margin: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}
.agenda-board .cal-days-header {
    border-radius: 0;
}
.agenda-focus-panel {
    min-width: 0;
    padding: 18px;
    border-left: 1px solid var(--line);
    background:
        linear-gradient(180deg,
            color-mix(in srgb, var(--surface) 82%, var(--surface-2)) 0%,
            var(--surface) 100%);
}
.agenda-focus-card {
    position: sticky;
    top: 62px;
    display: grid;
    gap: 14px;
}
.agenda-focus-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.agenda-focus-heading {
    min-width: 0;
    display: grid;
    gap: 6px;
}
.agenda-focus-heading > span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--accent);
    font-size: 10.5px;
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.agenda-focus-heading > span b {
    font: inherit;
}
.agenda-focus-heading > span i {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--accent);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 14%, transparent);
}
.agenda-focus-top time {
    min-height: 24px;
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface);
    color: var(--ink-2);
    font-size: 11.5px;
    font-weight: 820;
    white-space: nowrap;
}
.agenda-focus-logo {
    width: 48px;
    height: 28px;
    flex: 0 0 auto;
    display: inline-grid;
    place-items: center;
    color: var(--accent);
}
.agenda-focus-patient {
    display: flex;
    align-items: center;
    gap: 12px;
}
.agenda-focus-patient .agenda-avatar {
    width: 52px;
    height: 52px;
    font-size: 16px;
}
.agenda-focus-patient strong {
    display: block;
    color: var(--ink);
    font-size: 18px;
    line-height: 1.12;
    font-weight: 850;
}
.agenda-focus-patient small {
    display: block;
    margin-top: 4px;
    color: var(--muted);
    font-size: 12.5px;
}
.agenda-focus-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}
.agenda-focus-grid div {
    min-width: 0;
    padding: 12px;
    border-radius: 13px;
    background: color-mix(in srgb, var(--surface-2) 58%, var(--surface));
}
.agenda-focus-grid .agenda-focus-hour-card {
    grid-column: 1 / -1;
}
.agenda-focus-grid span {
    display: block;
    margin-bottom: 7px;
    color: var(--muted);
    font-size: 10px;
    font-weight: 850;
    letter-spacing: .1em;
    text-transform: uppercase;
}
.agenda-focus-grid strong {
    color: var(--ink);
    font-size: 15px;
    line-height: 1.15;
    font-weight: 850;
}
.agenda-focus-grid [data-focus-hour] {
    display: block;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: clip;
    font-family: 'JetBrains Mono', monospace;
    font-size: clamp(18px, 1.28vw, 20px);
    letter-spacing: 0;
}
.agenda-focus-mode {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}
.agenda-focus-mode .mode-icon {
    width: 16px;
    height: 16px;
    color: var(--accent);
}
.agenda-focus-pay-pending {
    color: var(--warn) !important;
}
.agenda-focus-pay-paid {
    color: var(--ok) !important;
}
.agenda-focus-alert {
    padding: 12px 13px;
    border: 1px solid color-mix(in srgb, var(--warn) 24%, var(--line));
    border-radius: 13px;
    background: color-mix(in srgb, var(--warn-soft) 52%, var(--surface));
}
.agenda-focus-alert-paid {
    border-color: color-mix(in srgb, var(--ok) 22%, var(--line));
    background: color-mix(in srgb, var(--ok-soft) 46%, var(--surface));
}
.agenda-focus-alert b {
    display: block;
    color: color-mix(in srgb, var(--warn) 82%, var(--ink));
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.agenda-focus-alert-paid b {
    color: color-mix(in srgb, var(--ok) 78%, var(--ink));
}
.agenda-focus-alert p {
    margin-top: 6px;
    color: var(--ink-2);
    font-size: 12.8px;
    line-height: 1.45;
}
.agenda-focus-primary {
    min-height: 44px;
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    border-radius: 12px;
    background: var(--accent);
    color: white;
    text-decoration: none;
    font-size: 13.5px;
    font-weight: 850;
    box-shadow: 0 18px 42px -30px color-mix(in srgb, var(--accent) 90%, transparent);
}
.agenda-focus-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}
.agenda-focus-secondary {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface);
    color: var(--ink-2);
    text-decoration: none;
    font-size: 13px;
    font-weight: 820;
}
.agenda-focus-secondary svg {
    flex: 0 0 auto;
}
.agenda-focus-secondary:hover {
    border-color: color-mix(in srgb, var(--accent) 28%, var(--line));
    background: color-mix(in srgb, var(--accent-soft) 38%, var(--surface));
    color: var(--accent);
}
.agenda-focus-secondary.is-disabled {
    cursor: not-allowed;
    opacity: .48;
    color: var(--muted);
    background: var(--surface-2);
}
.agenda-focus-empty {
    color: var(--ink-2);
}
.agenda-focus-empty > strong {
    color: var(--ink);
    font-size: 18px;
    font-weight: 850;
}
.agenda-focus-empty p {
    color: var(--muted);
    font-size: 13.5px;
    line-height: 1.45;
}

/* Calendar shell */
.cal-wrap {
    margin: 0 32px 32px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 14px;
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}
.cal-wrap-dia {
    max-width: none;
    background:
        linear-gradient(90deg,
            var(--surface) 0%,
            var(--surface) min(74%, 980px),
            color-mix(in srgb, var(--surface-2) 62%, var(--surface)) 100%);
}
.cal-wrap-dia .cal-day-col {
    background:
        linear-gradient(90deg, transparent 0, transparent min(760px, calc(100% - 280px)), color-mix(in srgb, var(--surface-2) 48%, transparent) min(760px, calc(100% - 280px)), color-mix(in srgb, var(--surface-2) 48%, transparent) 100%),
        linear-gradient(to right, color-mix(in srgb, var(--line-soft) 58%, transparent) 1px, transparent 1px) 0 0 / 25% 100%;
}
.cal-wrap-dia .cal-day-col.today {
    background:
        linear-gradient(90deg, color-mix(in srgb, var(--accent-soft) 24%, var(--surface)) 0, color-mix(in srgb, var(--accent-soft) 24%, var(--surface)) min(760px, calc(100% - 280px)), color-mix(in srgb, var(--accent-soft) 42%, var(--surface-2)) min(760px, calc(100% - 280px)), color-mix(in srgb, var(--accent-soft) 42%, var(--surface-2)) 100%),
        linear-gradient(to right, color-mix(in srgb, var(--line-soft) 58%, transparent) 1px, transparent 1px) 0 0 / 25% 100%;
}
.cal-wrap-dia .cal-grid.dia {
    grid-template-columns: 64px minmax(0, 1fr);
}
.cal-wrap-dia .cal-days-header.dia {
    grid-template-columns: 64px minmax(0, 1fr);
}
.cal-wrap-dia .cal-days-header.dia > div:last-child {
    background:
        linear-gradient(90deg,
            color-mix(in srgb, var(--accent-soft) 38%, var(--surface-2)) 0%,
            color-mix(in srgb, var(--accent-soft) 38%, var(--surface-2)) min(760px, calc(100% - 280px)),
            color-mix(in srgb, var(--surface-2) 82%, var(--surface)) min(760px, calc(100% - 280px)),
            color-mix(in srgb, var(--surface-2) 82%, var(--surface)) 100%);
}

.cal-days-header {
    display: grid;
    grid-template-columns: 64px repeat(7, 1fr);
    border-bottom: 1px solid var(--line);
    /* Sólido a propósito · la topbar tiene backdrop-blur y, sin esto, los nombres
       de día se ven borrosos cuando el header pasa por debajo al hacer scroll. */
    background: var(--surface-2);
    border-radius: 14px 14px 0 0;
    overflow: hidden;
    position: relative;
    top: auto;
    z-index: 10;
}
.cal-days-header.dia { grid-template-columns: 64px 1fr; }
.cal-days-header > div {
    padding: 10px 8px; text-align: center;
    border-right: 1px solid var(--line-soft);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 64px;
}
.cal-days-header > div:first-child,
.cal-hour-col {
    background: var(--surface-2);
}
.cal-days-header > div:last-child { border-right: none; }
.cal-days-header > div.is-today { background: color-mix(in srgb, var(--accent-soft) 50%, transparent); }
.cal-days-header > div.is-today .day-name { color: var(--accent); }

.day-name {
    font-size: 11px; font-weight: 700; color: var(--muted);
    letter-spacing: 0.1em; text-transform: uppercase;
}
.day-num {
    font-family: 'Fraunces', serif; font-size: 22px; font-weight: 500;
    color: var(--ink); margin-top: 2px;
}
.day-num .today {
    width: 34px; height: 34px; line-height: 34px;
    background: var(--accent); color: white; border-radius: 50%;
    display: inline-block; text-align: center;
}

/* Grid: hour col + 7 day cols (semana) o 1 col (día) */
.cal-grid {
    display: grid;
    grid-template-columns: 64px repeat(7, 1fr);
    position: relative;
}
.cal-grid.dia { grid-template-columns: 64px 1fr; }
.cal-hour-col { border-right: 1px solid var(--line); }
.cal-hour {
    height: 60px; padding: 4px 8px;
    font-size: 10.5px; font-family: 'JetBrains Mono', monospace;
    color: var(--muted); text-align: right; position: relative;
}
.cal-hour::before {
    content: ""; position: absolute; bottom: 0; left: 0; right: 0;
    border-bottom: 1px solid var(--line-soft);
}
.cal-day-col {
    position: relative;
    border-right: 1px solid var(--line-soft);
    min-height: 780px; /* 13 horas * 60px */
}
.cal-day-col:last-child { border-right: none; }
.cal-day-col.today { background: color-mix(in srgb, var(--accent-soft) 30%, transparent); }
.cal-day-col.day-off {
    background:
        repeating-linear-gradient(
            45deg,
            color-mix(in srgb, var(--surface-2) 76%, transparent) 0 7px,
            color-mix(in srgb, var(--surface) 92%, transparent) 7px 14px
        );
}
.agenda-day-off-label {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    color: color-mix(in srgb, var(--muted) 72%, transparent);
    text-align: center;
}
.agenda-day-off-label strong {
    color: color-mix(in srgb, var(--ink-2) 62%, transparent);
    font-size: 13px;
    line-height: 1.1;
}
.agenda-day-off-label span {
    font-size: 11px;
    line-height: 1.1;
}

/* Now indicator */
.now-line {
    position: absolute; left: 0; right: 0; z-index: 5;
    border-top: 2px solid var(--accent);
    pointer-events: none;
}
.now-line::before {
    content: ""; position: absolute; left: -5px; top: -6px;
    width: 10px; height: 10px; border-radius: 50%; background: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent);
}

/* Appointment cards. El card es un selector compacto; el detalle vive en el panel. */
.appt {
    position: absolute;
    box-sizing: border-box;
    min-width: 0;
    border-radius: 8px;
    padding: 5px 21px 4px 7px;
    font-size: 11.5px;
    cursor: pointer;
    overflow: hidden;
    transition: background .15s ease, box-shadow .15s ease, transform .15s ease;
    z-index: 2;
    text-decoration: none;
}
.appt[data-id] {
    cursor: pointer;
}
.appt[data-id]:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 18px -14px color-mix(in srgb, var(--ink) 32%, transparent);
    z-index: 4;
}
.appt[data-id]:focus-visible,
.appt.is-selected {
    outline: 2px solid color-mix(in srgb, var(--accent) 82%, white);
    outline-offset: 1px;
    box-shadow: 0 12px 24px -18px color-mix(in srgb, var(--accent) 70%, transparent);
    z-index: 5;
}
.appt-time {
    font-family: 'JetBrains Mono', monospace;
    font-size: 9.6px;
    font-weight: 400;
    color: var(--ink-2);
    margin-bottom: 2px;
    line-height: 1.04;
    letter-spacing: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.appt-title {
    color: color-mix(in srgb, var(--ink) 78%, var(--ink-2));
    font-size: 11.7px;
    font-weight: 460;
    line-height: 1.08;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.appt-meta { font-size: 10px; opacity: 0.82; margin-top: 1px; line-height: 1.08; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.appt-mode-icon {
    position: absolute;
    top: 7px;
    right: 7px;
    width: 10.5px;
    height: 10.5px;
    color: currentColor;
    opacity: .88;
}

.appt-confirmed {
    background: color-mix(in srgb, var(--ok-soft) 58%, var(--surface));
    color: color-mix(in srgb, var(--ok) 70%, var(--ink));
}
.appt-done {
    background: color-mix(in srgb, var(--surface-2) 70%, var(--surface));
    color: var(--muted);
}
.appt-pending {
    background: color-mix(in srgb, var(--warn-soft) 68%, var(--surface));
    color: color-mix(in srgb, var(--warn) 82%, var(--ink));
}
.appt-pending-close {
    background: color-mix(in srgb, var(--warn-soft) 82%, var(--surface));
    color: color-mix(in srgb, var(--warn) 82%, var(--ink));
    box-shadow: 0 10px 22px -18px color-mix(in srgb, var(--warn) 62%, transparent);
}
.appt-cancelled {
    background: var(--surface-2);
    color: var(--muted);
    text-decoration: line-through;
}
.appt.appt-next {
    background: color-mix(in srgb, var(--ok-soft) 70%, var(--surface)) !important;
    color: color-mix(in srgb, var(--ok) 76%, var(--ink)) !important;
    box-shadow: 0 12px 24px -18px color-mix(in srgb, var(--ok) 70%, transparent);
    z-index: 3;
}
.appt.appt-next .appt-time,
.appt.appt-next .appt-title,
.appt.appt-next .appt-meta,
.appt.appt-next .appt-mode-icon {
    color: color-mix(in srgb, var(--ok) 76%, var(--ink));
}
.appt-blocked {
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        repeating-linear-gradient(
            135deg,
            color-mix(in srgb, var(--ink) 6%, transparent) 0 6px,
            transparent 6px 14px
        ),
        color-mix(in srgb, var(--surface-2) 50%, var(--surface));
    border: 1px dashed color-mix(in srgb, var(--ink) 14%, var(--line));
    color: var(--muted);
    font-style: normal;
    padding: 0 8px;
    text-align: center;
    cursor: not-allowed;
}
.appt-slot {
    background: transparent;
    border: 1px dashed color-mix(in srgb, var(--accent) 40%, transparent);
    color: color-mix(in srgb, var(--accent) 80%, transparent);
    font-size: 10.5px;
    text-align: center;
    display: flex; align-items: center; justify-content: center;
}
.appt-slot:hover { background: var(--accent-soft); border-style: solid; }

.appt-pill {
    display: inline-block; padding: 1px 5px; border-radius: 3px;
    font-size: 9.5px; font-weight: 600; margin-top: 3px;
    background: rgba(255,255,255,0.25);
    color: white;
}

/* Día libre · domingo · misma identidad visual del bloqueado */
.appt-dia-libre {
    background:
        repeating-linear-gradient(
            135deg,
            color-mix(in srgb, var(--ink) 6%, transparent) 0 6px,
            transparent 6px 14px
        ),
        color-mix(in srgb, var(--surface-2) 50%, var(--surface));
    border: 1px dashed color-mix(in srgb, var(--ink) 14%, var(--line));
    color: var(--muted);
    cursor: not-allowed;
}
.appt-dia-libre:hover { transform: none; box-shadow: none; }
.appt-dia-libre .dia-libre-content {
    text-align: center; margin-top: 280px;
}
.appt-dia-libre .appt-title { font-style: normal; }

/* Override italic en títulos de bloqueos (Almuerzo) */
.appt-blocked .blocked-title {
    width: 100%;
    color: var(--muted);
    font-size: 11px;
    font-weight: 560;
    font-style: normal;
    line-height: 1.1;
}

/* Dot dentro de filter-pill (Confirmadas / Esperando) */
.filter-pill .filter-dot {
    display: inline-block; width: 8px; height: 8px; border-radius: 50%;
    margin-right: 5px; vertical-align: middle;
}
.filter-dot-ok   { background: var(--ok); }
.filter-dot-warm { background: var(--warm); }
.filter-dot-accent { background: var(--accent); }
.filter-dot-rose { background: var(--rose); }
.filter-dot-muted { background: var(--muted); }

/* Leyenda del footer */
.cal-legend { color: var(--muted); padding-top: 14px; }
.leg-item { display: inline-flex; align-items: center; gap: 6px; }
.leg-swatch {
    display: inline-block; width: 10px; height: 10px; border-radius: 3px;
}
.leg-confirmed {
    background: var(--accent-soft);
    border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
    border-left: 3px solid var(--accent);
}
.leg-done {
    background: color-mix(in srgb, var(--ok-soft) 50%, var(--surface));
    border: 1px solid color-mix(in srgb, var(--ok) 25%, transparent);
    border-left: 3px solid var(--ok);
}
.leg-pending {
    background: var(--warm-soft);
    border: 1px solid color-mix(in srgb, var(--warm) 30%, transparent);
    border-left: 3px solid var(--warm);
}
.leg-cancelled {
    background: var(--surface-2);
    border: 1px dashed var(--line);
}
.leg-slot {
    background: transparent;
    border: 1px dashed color-mix(in srgb, var(--accent) 40%, transparent);
}

/* Detail popover */
.appt-popover {
    position: absolute; z-index: 50;
    width: 320px;
    background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
    box-shadow: 0 30px 60px -25px color-mix(in srgb, var(--ink) 35%, transparent);
    padding: 18px;
    display: none;
}
.appt-popover.show { display: block; }
.agenda-live-popover {
    width: 320px;
    padding: 18px;
    border-radius: 14px;
}
.live-popover-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    color: var(--muted);
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
}
.live-popover-top span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: color-mix(in srgb, var(--ok) 82%, var(--ink));
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.live-popover-meta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}
.live-popover-close {
    width: 28px;
    height: 28px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--muted);
    background: transparent;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, color .15s ease, transform .15s ease;
}
.live-popover-close:hover,
.live-popover-close:focus-visible {
    color: var(--ink);
    background: var(--surface-2);
    border-color: var(--line);
}
.live-popover-close:active { transform: scale(.96); }
.live-popover-top i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--ok);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 15%, transparent);
}
.live-popover-patient {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 18px;
}
.live-popover-patient .agenda-avatar {
    width: 44px;
    height: 44px;
    font-size: 14px;
    background: var(--warm-soft);
    color: var(--warm);
}
.live-popover-patient strong {
    display: block;
    color: var(--ink);
    font-size: 18px;
    line-height: 1.12;
}
.live-popover-patient small {
    display: block;
    margin-top: 5px;
    color: var(--muted);
    font-size: 12.5px;
    line-height: 1.25;
}
.live-popover-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 18px;
}
.live-popover-grid div {
    padding: 12px;
    border-radius: 10px;
    background: var(--surface-2);
    min-width: 0;
}
.live-popover-grid span {
    display: block;
    margin-bottom: 7px;
    color: var(--muted);
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}
.live-popover-grid strong {
    color: var(--ink);
    font-size: 14px;
    line-height: 1.18;
    white-space: nowrap;
}
.live-popover-grid .is-pending { color: var(--warn); }
.live-popover-msg {
    margin-top: 16px;
    padding: 12px 14px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--warn-soft) 48%, var(--surface));
    border: 1px solid color-mix(in srgb, var(--warn) 24%, var(--line));
}
.live-popover-msg b {
    display: block;
    color: color-mix(in srgb, var(--warn) 84%, var(--ink));
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}
.live-popover-msg p {
    margin-top: 8px;
    color: var(--ink-2);
    font-size: 12.5px;
    line-height: 1.45;
}
.live-popover-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    margin-top: 16px;
}
.live-popover-actions a,
.live-popover-actions button {
    height: 38px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-weight: 700;
}

@media (max-width: 1180px) {
    .agenda-list-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .agenda-list-head,
    .agenda-list-row {
        grid-template-columns: 1fr 1.4fr 1fr 0.9fr 1fr 1.1fr 108px;
        column-gap: 14px;
    }
}

@media (max-width: 980px) {
    .module-header-agenda {
        padding-left: 24px;
        padding-right: 24px;
    }
    .agenda-header-main {
        align-items: stretch !important;
    }
    .agenda-toolbar {
        width: 100%;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto auto auto;
        gap: 10px;
        align-items: center;
    }
    .agenda-view-seg {
        width: 100%;
    }
    .agenda-view-seg a {
        flex: 1;
        min-width: 0;
    }
    .agenda-range-nav {
        justify-content: flex-end;
        white-space: nowrap;
    }
    .cal-wrap,
    .agenda-list-view {
        margin-left: 24px;
        margin-right: 24px;
    }
    .cal-wrap-dia {
        max-width: none;
    }
    .cal-days-header:not(.dia),
    .cal-grid:not(.dia) {
        min-width: 920px;
    }
    .cal-days-header.dia,
    .cal-grid.dia {
        min-width: 520px;
    }
    .cal-days-header > div:first-child,
    .cal-hour-col {
        position: sticky;
        left: 0;
        z-index: 12;
        box-shadow: 1px 0 0 var(--line);
    }
    .cal-grid .cal-hour-col {
        z-index: 8;
    }
    .appt-popover {
        width: min(320px, calc(100vw - 48px));
    }
}

@media (max-width: 760px) {
    .module-header-agenda {
        padding: 16px 16px 12px;
    }
    .module-header-agenda .serif {
        font-size: 28px !important;
    }
    .module-header-agenda .pill {
        max-width: 100%;
        white-space: nowrap;
    }
    .agenda-header-main {
        gap: 14px !important;
        margin-bottom: 14px !important;
    }
    .agenda-toolbar {
        grid-template-columns: 1fr;
    }
    .agenda-list-cta {
        order: 3;
        width: 100%;
    }
    .agenda-range-nav {
        order: 2;
        width: 100%;
        display: grid !important;
        grid-template-columns: 38px 1fr 38px;
    }
    .agenda-range-nav .icon-btn,
    .agenda-range-nav .btn-today {
        width: 100%;
        height: 38px;
    }
    .agenda-toolbar > .btn-primary {
        order: 4;
        width: 100%;
        justify-content: center;
        min-height: 40px;
    }
    .agenda-filter-bar {
        margin: 0 -16px;
        padding: 2px 16px 6px;
        flex-wrap: nowrap !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .agenda-filter-bar::-webkit-scrollbar { display: none; }
    .agenda-filter-bar > span:first-child,
    .agenda-filter-bar .filter-sep {
        flex: 0 0 auto;
    }
    .agenda-filter-bar .filter-pill {
        flex: 0 0 auto;
        white-space: nowrap;
    }
    .agenda-state-legend {
        margin-left: 16px;
        margin-right: 16px;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .agenda-state-legend::-webkit-scrollbar { display: none; }
    .agenda-state-legend > span,
    .agenda-state-legend b {
        flex: 0 0 auto;
        white-space: nowrap;
    }
    .cal-wrap,
    .agenda-list-view {
        margin-left: 16px;
        margin-right: 16px;
    }
    .cal-wrap-dia .appt {
        max-width: none;
    }
    .cal-wrap {
        border-radius: 12px;
    }
    .cal-days-header {
        top: 60px;
        border-radius: 12px 12px 0 0;
    }
    .cal-days-header:not(.dia),
    .cal-grid:not(.dia) {
        min-width: 820px;
    }
    .cal-days-header.dia,
    .cal-grid.dia {
        min-width: 460px;
    }
    .cal-days-header {
        grid-template-columns: 54px repeat(7, 1fr);
    }
    .cal-days-header.dia {
        grid-template-columns: 54px 1fr;
    }
    .cal-grid {
        grid-template-columns: 54px repeat(7, 1fr);
    }
    .cal-grid.dia {
        grid-template-columns: 54px 1fr;
    }
    .cal-hour {
        padding: 4px 6px;
        font-size: 10px;
    }
    .day-num {
        font-size: 20px;
    }
    .appt {
        padding: 5px 21px 4px 7px;
    }
    .appt[data-id] {
        padding: 5px 19px 4px 6px;
    }
    .appt[data-id] .appt-time {
        font-size: 8.8px;
        line-height: 1.02;
        margin-bottom: 2px;
    }
    .appt[data-id] .appt-title {
        font-size: 10.3px;
        line-height: 1.06;
        font-weight: 450;
    }
    .appt[data-id] .appt-mode-icon {
        top: 6px;
        right: 6px;
        width: 9.5px;
        height: 9.5px;
    }
    .appt-title {
        font-size: 12px;
    }
    .appt-popover.show {
        display: block;
    }
    .agenda-live-popover {
        position: fixed !important;
        left: 12px !important;
        right: 12px !important;
        bottom: max(12px, env(safe-area-inset-bottom)) !important;
        top: auto !important;
        width: auto;
        max-height: min(78vh, 620px);
        overflow-y: auto;
        padding: 16px;
        border-radius: 16px;
        z-index: 70;
    }
    .live-popover-top {
        align-items: flex-start;
    }
    .live-popover-patient strong {
        font-size: 17px;
    }
    .live-popover-grid {
        gap: 8px;
    }
    .live-popover-grid div {
        padding: 10px;
    }
    .live-popover-actions {
        grid-template-columns: 1fr 40px 40px;
    }
    .agenda-list-stats {
        grid-template-columns: 1fr;
        gap: 10px;
        margin-bottom: 14px;
    }
    .agenda-stat-card {
        min-height: 72px;
        padding: 14px;
        border-radius: 12px;
    }
    .agenda-stat-card strong {
        font-size: 21px;
    }
    .agenda-list-table {
        overflow: visible;
        border: none;
        background: transparent;
    }
    .agenda-list-head {
        display: none;
    }
    .agenda-list-section {
        border: 1px solid var(--line);
        border-radius: 12px;
        background: var(--surface);
        overflow: hidden;
    }
    .agenda-list-section + .agenda-list-section {
        margin-top: 12px;
        border-top: 1px solid var(--line);
    }
    .agenda-list-section-head {
        padding: 12px 14px;
        align-items: flex-start;
        flex-wrap: wrap;
        gap: 4px 10px;
    }
    .agenda-list-section-head strong {
        font-size: 17px;
    }
    .agenda-list-section-head span {
        width: 100%;
        font-size: 12px;
    }
    .agenda-list-section-head b {
        margin-left: 0;
        padding: 4px 9px;
        font-size: 10px;
    }
    .agenda-list-row {
        min-width: 0 !important;
        min-height: 0;
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 10px 12px;
        padding: 14px;
        border-bottom: 1px solid var(--line-soft);
    }
    .agenda-list-when,
    .agenda-list-patient,
    .agenda-list-type,
    .agenda-list-mode,
    .agenda-status-pill,
    .agenda-pay-pill,
    .agenda-actions {
        min-width: 0;
    }
    .agenda-list-when {
        grid-column: 1;
    }
    .agenda-list-patient {
        grid-column: 1 / -1;
        grid-row: 1;
        padding-right: 86px;
    }
    .agenda-list-when {
        grid-row: 2;
    }
    .agenda-list-type {
        grid-column: 1;
        grid-row: 3;
    }
    .agenda-list-mode {
        grid-column: 2;
        grid-row: 2;
        justify-self: end;
        font-size: 12.5px;
    }
    .agenda-status-pill {
        grid-column: 1;
        grid-row: 4;
    }
    .agenda-pay-pill {
        grid-column: 1 / -1;
        grid-row: 5;
    }
    .agenda-actions {
        grid-column: 2;
        grid-row: 1;
        justify-self: end;
        align-self: start;
    }
    .agenda-actions button {
        width: 34px;
        height: 34px;
        border-radius: 10px;
    }
    .agenda-actions button:nth-child(n+3) {
        display: none;
    }
}
.live-popover-actions a {
    background: var(--accent);
    color: white;
    font-size: 13px;
}
.live-popover-actions button {
    background: var(--surface-2);
    color: var(--ink-2);
    font-size: 16px;
}

/* Live dot (próxima sesión) */
.live-dot {
    display: inline-block; width: 7px; height: 7px; border-radius: 50%;
    background: var(--ok); position: relative;
}
.live-dot::after {
    content: ""; position: absolute; inset: 0; border-radius: 50%;
    background: var(--ok); animation: ping 2s cubic-bezier(0,0,.2,1) infinite;
}
@keyframes ping {
    0% { transform: scale(1); opacity: .7; }
    80%, 100% { transform: scale(2.4); opacity: 0; }
}

/* Vista LISTA · cards + tabla */
.agenda-list-view { margin: 16px 32px 34px; }
.agenda-operational-filters {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 14px;
    align-items: end;
    margin-bottom: 16px;
    padding: 16px;
    border: 1px solid color-mix(in srgb, var(--accent) 14%, var(--line));
    border-radius: 16px;
    background: color-mix(in srgb, var(--surface) 88%, var(--accent-soft));
    box-shadow: 0 18px 52px -46px color-mix(in srgb, var(--ink) 68%, transparent);
}
.agenda-op-group {
    display: grid;
    gap: 8px;
    min-width: 0;
}
.agenda-op-group > span {
    color: var(--muted);
    font-size: 10.5px;
    font-weight: 850;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.agenda-op-group nav {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
}
.agenda-op-pill {
    min-height: 30px;
    background: var(--surface);
    font-weight: 750;
}
.agenda-op-range {
    min-width: 280px;
}
.agenda-list-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 24px;
}
.agenda-stat-card {
    min-height: 86px;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface);
}
.agenda-stat-card > span:last-child { min-width: 0; }
.agenda-stat-card strong {
    display: block;
    font-family: 'Fraunces', serif;
    font-size: 24px;
    line-height: 1.05;
    color: var(--ink);
    font-weight: 650;
}
.agenda-stat-card small {
    display: block;
    margin-top: 4px;
    color: var(--muted);
    font-size: 12.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.agenda-stat-label {
    display: block;
    margin-bottom: 4px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.agenda-stat-icon {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}
.agenda-stat-clock { background: color-mix(in srgb, var(--accent-soft) 70%, var(--surface)); color: var(--accent); }
.agenda-stat-calendar { background: var(--warm-soft); color: var(--warm); }
.agenda-stat-check { background: var(--ok-soft); color: var(--ok); }
.agenda-stat-x { background: color-mix(in srgb, var(--rose) 18%, var(--surface)); color: var(--rose); }
.agenda-stat-clock::before { content: "◷"; }
.agenda-stat-calendar::before { content: "▣"; }
.agenda-stat-check::before { content: "✓"; }
.agenda-stat-x::before { content: "×"; }

.agenda-list-table {
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface);
    overflow: hidden;
}
.agenda-list-head,
.agenda-list-row {
    display: grid;
    grid-template-columns: 1.05fr 1.45fr 1.1fr 1fr 1.05fr 1.15fr 120px;
    column-gap: 20px;
    align-items: center;
}
.agenda-list-head {
    padding: 14px 20px;
    background: var(--surface-2);
    border-bottom: 1px solid var(--line);
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.agenda-list-section + .agenda-list-section { border-top: 1px solid var(--line); }
.agenda-list-section-head {
    min-height: 50px;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 13px 20px;
    background: color-mix(in srgb, var(--surface-2) 42%, var(--surface));
    border-bottom: 1px solid var(--line-soft);
}
.agenda-list-section-head strong {
    font-family: 'Fraunces', serif;
    font-size: 18px;
    color: var(--ink);
}
.agenda-list-section-head span {
    color: var(--muted);
    font-size: 13px;
}
.agenda-list-section-head b {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    border-radius: 999px;
    background: var(--accent);
    color: white;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .04em;
}
.agenda-list-section-head b i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: white;
    opacity: .9;
}
.agenda-list-row {
    min-height: 74px;
    padding: 14px 20px;
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid var(--line-soft);
}
.agenda-list-row:last-child { border-bottom: none; }
.agenda-list-row:hover { background: color-mix(in srgb, var(--accent-soft) 18%, var(--surface)); }
.agenda-list-when strong {
    display: block;
    font-family: 'JetBrains Mono', monospace;
    color: var(--ink);
    font-size: 14px;
    font-weight: 800;
    white-space: nowrap;
}
.agenda-list-when small,
.agenda-list-patient small,
.agenda-list-type small {
    display: block;
    margin-top: 3px;
    color: var(--muted);
    font-size: 12.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.agenda-list-patient {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}
.agenda-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--accent-soft);
    color: var(--accent);
    font-size: 13px;
    font-weight: 800;
}
.agenda-list-patient strong,
.agenda-list-type strong {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
    color: var(--ink);
    font-size: 14px;
    font-weight: 750;
}
.agenda-list-patient strong span {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.agenda-list-patient em {
    flex: 0 0 auto;
    padding: 2px 7px;
    border-radius: 999px;
    background: var(--accent-soft);
    color: var(--accent);
    font-size: 10px;
    font-style: normal;
    font-weight: 800;
}
.agenda-list-mode {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--ink-2);
    font-size: 14px;
    min-width: 0;
}
.agenda-list-mode svg { color: var(--muted); flex: 0 0 auto; }
.agenda-status-pill,
.agenda-pay-pill {
    justify-self: start;
    display: inline-flex;
    align-items: center;
    padding: 6px 11px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 750;
    white-space: nowrap;
}
.agenda-status-done,
.agenda-status-confirmed { background: var(--ok-soft); color: var(--ok); }
.agenda-status-pending { background: var(--warn-soft); color: var(--warn); }
.agenda-status-pending-close { background: var(--warn-soft); color: color-mix(in srgb, var(--warn) 84%, var(--ink)); }
.agenda-status-next { background: var(--ok-soft); color: color-mix(in srgb, var(--ok) 84%, var(--ink)); }
.agenda-status-cancel,
.agenda-status-cancelled,
.agenda-status-blocked { background: var(--surface-2); color: var(--muted); }
.agenda-pay-paid { background: var(--ok-soft); color: var(--ok); }
.agenda-pay-pending { background: var(--warn-soft); color: var(--warn); }
.agenda-actions {
    display: inline-flex;
    justify-content: flex-end;
    gap: 7px;
}
.agenda-open-chip {
    min-width: 58px;
    height: 31px;
    padding: 0 12px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
    background: color-mix(in srgb, var(--accent-soft) 55%, var(--surface));
    border: 1px solid color-mix(in srgb, var(--accent) 16%, transparent);
    font-size: 12px;
    font-weight: 800;
}
.agenda-actions button {
    width: 31px;
    height: 31px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
    background: color-mix(in srgb, var(--accent-soft) 45%, var(--surface));
    cursor: pointer;
}
.agenda-actions button:hover { background: var(--accent-soft); }
.agenda-pagination {
    margin: 14px;
}

/* Vista MES · grid de celdas */
.cal-wrap-mes {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}
.mes-week-head {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    min-width: 760px;
    background: var(--surface-2);
    border-radius: 14px 14px 0 0;
    border-bottom: 1px solid var(--line);
    overflow: hidden;
}
.mes-week-head > div {
    padding: 13px 10px;
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted);
    border-right: 1px solid var(--line-soft);
}
.mes-week-head > div:last-child { border-right: none; }
.mes-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    min-width: 760px;
}
.mes-cell {
    border-right: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft);
    min-height: 118px; padding: 8px; font-size: 11px;
    display: flex; flex-direction: column; gap: 4px;
    text-decoration: none;
    color: inherit;
    min-width: 0;
    overflow: hidden;
}
.mes-cell:hover { background: color-mix(in srgb, var(--accent-soft) 24%, var(--surface)); }
.mes-cell:nth-child(7n) { border-right: none; }
.mes-cell.dim { background: var(--surface-2); color: var(--muted); }
.mes-cell.today .mes-num {
    background: var(--accent); color: white;
    width: 24px; height: 24px; line-height: 24px;
    border-radius: 50%; text-align: center;
}
.mes-num { font-family: 'Fraunces', serif; font-size: 14px; font-weight: 500; color: var(--ink); }
.mes-evt {
    background: var(--accent-soft); color: var(--accent);
    padding: 2px 6px; border-radius: 4px;
    font-size: 10.5px; font-weight: 500;
    display: block;
    max-width: 100%;
    min-width: 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mes-evt.done { background: color-mix(in srgb, var(--ok-soft) 50%, var(--surface)); color: var(--ok); }
.mes-evt.pending { background: var(--warm-soft); color: var(--warm); }
.mes-evt.cancel, .mes-evt.blocked { background: var(--surface-2); color: var(--muted); text-decoration: line-through; }
.mes-more {
    margin-top: 1px;
    font-size: 10.5px;
    color: var(--muted);
    font-weight: 600;
}
.agenda-empty {
    padding: 34px 24px;
    color: var(--muted);
    font-size: 14px;
    text-align: center;
}
.agenda-list-row {
    color: inherit;
    text-decoration: none;
}
.agenda-list-row:hover strong { color: var(--accent); }
.agenda-list-row small {
    display: block;
    margin-top: 2px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 400;
}

/* Vista Día desktop: concentra las citas sin columnas paralelas para data demo cruzada. */
.cal-wrap-dia .appt:not(.appt-blocked):not(.appt-dia-libre)[data-lanes="1"] {
    left: 12px !important;
    width: min(760px, 58%) !important;
}
.cal-wrap-dia .appt:not(.appt-blocked):not(.appt-dia-libre)[data-lanes="2"] {
    left: 12px !important;
    width: min(760px, 58%) !important;
}
.cal-wrap-dia .appt:not(.appt-blocked):not(.appt-dia-libre)[data-lanes="3"] {
    left: 12px !important;
    width: min(760px, 58%) !important;
}
.cal-wrap-dia .appt-blocked {
    left: 12px !important;
    right: auto !important;
    width: min(760px, 58%) !important;
}

@media (max-width: 760px) {
    .cal-wrap-dia .appt:not(.appt-blocked):not(.appt-dia-libre)[data-lanes="1"] {
        left: 8px !important;
        width: calc(100% - 16px) !important;
    }
    .cal-wrap-dia .appt:not(.appt-blocked):not(.appt-dia-libre)[data-lanes="2"] {
        left: 8px !important;
        width: calc(100% - 16px) !important;
    }
    .cal-wrap-dia .appt:not(.appt-blocked):not(.appt-dia-libre)[data-lanes="3"] {
        left: 8px !important;
        width: calc(100% - 16px) !important;
    }
    .cal-wrap-dia .appt-blocked {
        left: 8px !important;
        width: calc(100% - 16px) !important;
    }
    .agenda-view-seg { width: 100%; }
    .agenda-view-seg a { flex: 1; min-width: 0; padding: 6px 8px; font-size: 13px; }
    .cal-wrap-mes {
        margin-inline: 16px;
        max-width: calc(100vw - 32px);
    }
    .mes-week-head,
    .mes-grid {
        min-width: 640px;
    }
    .mes-week-head > div {
        padding: 10px 6px;
        font-size: 10px;
    }
    .mes-cell {
        min-height: 98px;
        padding: 6px;
    }
    .mes-evt {
        font-size: 9.5px;
        padding-inline: 4px;
    }
}

/* Agenda · overrides finales responsive, después de las reglas base de Lista. */
@media (max-width: 1180px) {
    .agenda-list-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .agenda-list-head,
    .agenda-list-row {
        grid-template-columns: 1fr 1.4fr 1fr 0.9fr 1fr 1.1fr 108px;
        column-gap: 14px;
    }
}

@media (max-width: 980px) {
    .agenda-list-view,
    .cal-wrap {
        margin-left: 24px;
        margin-right: 24px;
    }
    .agenda-operational-filters {
        grid-template-columns: 1fr;
    }
    .agenda-op-range {
        min-width: 0;
    }
}

@media (max-width: 760px) {
    .agenda-list-view,
    .cal-wrap {
        margin-left: 16px;
        margin-right: 16px;
    }
    .agenda-list-stats {
        grid-template-columns: 1fr;
        gap: 10px;
        margin-bottom: 14px;
    }
    .agenda-operational-filters {
        padding: 12px;
        border-radius: 14px;
    }
    .agenda-op-group nav {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 2px;
        scrollbar-width: none;
    }
    .agenda-op-group nav::-webkit-scrollbar { display: none; }
    .agenda-op-pill {
        flex: 0 0 auto;
        white-space: nowrap;
    }
    .agenda-stat-card {
        min-height: 72px;
        padding: 14px;
        border-radius: 12px;
    }
    .agenda-stat-card strong {
        font-size: 21px;
    }
    .agenda-list-table {
        overflow: visible;
        border: none;
        background: transparent;
    }
    .agenda-list-head {
        display: none;
    }
    .agenda-list-section {
        border: 1px solid var(--line);
        border-radius: 12px;
        background: var(--surface);
        overflow: hidden;
    }
    .agenda-list-section + .agenda-list-section {
        margin-top: 12px;
        border-top: 1px solid var(--line);
    }
    .agenda-list-section-head {
        padding: 12px 14px;
        align-items: flex-start;
        flex-wrap: wrap;
        gap: 4px 10px;
    }
    .agenda-list-section-head strong {
        font-size: 17px;
    }
    .agenda-list-section-head span {
        width: 100%;
        font-size: 12px;
    }
    .agenda-list-section-head b {
        margin-left: 0;
        padding: 4px 9px;
        font-size: 10px;
    }
    .agenda-list-row {
        min-width: 0;
        min-height: 0;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 10px 12px;
        padding: 14px;
        border-bottom: 1px solid var(--line-soft);
    }
    .agenda-list-patient {
        grid-column: 1 / -1;
        grid-row: 1;
        padding-right: 86px;
    }
    .agenda-list-when {
        grid-column: 1;
        grid-row: 2;
    }
    .agenda-list-type {
        grid-column: 1;
        grid-row: 3;
    }
    .agenda-list-mode {
        grid-column: 2;
        grid-row: 2;
        justify-self: end;
        font-size: 12.5px;
    }
    .agenda-status-pill {
        grid-column: 1;
        grid-row: 4;
    }
    .agenda-pay-pill {
        grid-column: 1 / -1;
        grid-row: 5;
    }
    .agenda-actions {
        grid-column: 2;
        grid-row: 1;
        justify-self: end;
        align-self: start;
    }
    .agenda-actions button {
        width: 34px;
        height: 34px;
        border-radius: 10px;
    }
    .agenda-actions button:nth-child(n+3) {
        display: none;
    }
}

/* Agenda calendario + foco operativo */
@media (max-width: 1240px) {
    .agenda-board {
        grid-template-columns: minmax(0, 1fr) 284px;
        margin-left: 24px;
        margin-right: 24px;
    }
    .agenda-focus-panel {
        padding: 16px;
    }
    .agenda-focus-grid div {
        padding: 12px;
    }
}

@media (max-width: 1040px) {
    .agenda-board {
        grid-template-columns: 1fr;
    }
    .agenda-focus-panel {
        order: -1;
        border-left: 0;
        border-bottom: 1px solid var(--line);
    }
    .agenda-focus-card {
        position: static;
    }
    .agenda-focus-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .agenda-pulse-row {
        justify-content: flex-start;
        flex-wrap: nowrap;
        overflow-x: auto;
        margin: 0 -16px 12px;
        padding: 0 16px 2px;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .agenda-pulse-row::-webkit-scrollbar {
        display: none;
    }
    .agenda-pulse-chip,
    .agenda-state-chip {
        flex: 0 0 auto;
        white-space: nowrap;
    }
    .agenda-filter-divider {
        flex: 0 0 1px;
        margin-inline: 3px;
    }
    .agenda-board {
        margin: 0 16px 24px;
        border-radius: 14px;
    }
    .agenda-board .cal-wrap {
        margin: 0;
        border-radius: 0;
    }
    .agenda-board .cal-days-header {
        top: auto;
        border-radius: 0;
    }
    .agenda-focus-panel {
        padding: 14px;
    }
    .agenda-focus-card {
        gap: 12px;
    }
    .agenda-focus-top {
        align-items: flex-start;
    }
    .agenda-focus-heading > span {
        font-size: 10px;
        letter-spacing: .1em;
    }
    .agenda-focus-patient .agenda-avatar {
        width: 48px;
        height: 48px;
        font-size: 14px;
    }
    .agenda-focus-patient strong {
        font-size: 17px;
    }
    .agenda-focus-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .agenda-focus-grid strong {
        font-size: 15px;
    }
    .agenda-focus-alert {
        padding: 12px 13px;
    }
    .agenda-focus-primary {
        min-height: 42px;
    }
}

@media (max-width: 520px) {
    .agenda-focus-grid {
        grid-template-columns: 1fr;
    }
}

/* Mini-leyenda inferior */
.legend-bar {
    padding: 24px 32px; display: flex; flex-wrap: wrap; gap: 24px;
    font-size: 12.5px; color: var(--muted);
}
.legend-bar .swatch-bar {
    display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px;
}

/* ===========================================================================
 * NUEVA CITA · widgets
 * patient-picker, date-picker, slots, custom select (csel), pay-chips,
 * seg-control, check-box, form-banner.
 * =========================================================================== */

/* Patient picker */
.patient-picker {
    border: 1px solid var(--line); border-radius: 9px;
    padding: 4px; background: var(--surface);
}
.patient-search-input {
    width: 100%; padding: 10px 12px;
    border: none; outline: none; background: transparent;
    font-size: 14px; color: var(--ink);
}
.patient-result {
    display: flex; align-items: center; gap: 10px;
    padding: 10px; border-radius: 7px; cursor: pointer;
}
.patient-result:hover { background: var(--surface-2); }
.patient-result.selected { background: var(--accent-soft); }
.patient-result.selected .patient-name { color: var(--accent); font-weight: 600; }
.patient-results-scroll {
    max-height: 220px; overflow-y: auto;
    border-top: 1px solid var(--line-soft);
    margin-top: 4px; padding-top: 4px;
}

/* Modo bloqueado · paciente recién creado, no se puede cambiar */
.patient-picker-locked {
    background: var(--accent-soft);
    border-color: color-mix(in srgb, var(--accent) 25%, transparent);
    padding: 10px 14px;
}
.patient-locked-row {
    display: flex; align-items: center; gap: 12px;
}

/* Modo colapsado · usuario eligió un paciente del picker;
   sólo se ve el seleccionado + un botón "Cambiar" */
.patient-collapsed-bar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 8px 12px 6px; gap: 12px;
}
.patient-picker.is-collapsed [data-picker-search] { display: none; }
.patient-picker.is-collapsed [data-picker-collapsed] { display: flex !important; }
.patient-picker.is-collapsed .patient-result:not(.selected) { display: none; }
.patient-picker.is-collapsed .patient-empty { display: none; }
.patient-picker.is-collapsed .patient-results-scroll {
    max-height: none; overflow: visible;
}
.patient-picker.is-collapsed .patient-result.selected {
    cursor: default;
    background: var(--accent-soft);
}
.patient-empty {
    padding: 18px 12px; text-align: center;
    font-size: 12.5px; color: var(--muted);
}

/* Custom date-picker */
.date-trigger {
    width: 100%; padding: 11px 14px;
    border: 1px solid var(--line); border-radius: 9px;
    background: var(--surface); font-size: 14px; color: var(--ink);
    cursor: pointer; display: flex; align-items: center; gap: 10px;
}
.date-trigger:hover, .date-trigger.open {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
.date-trigger > svg:first-child { color: var(--accent); flex-shrink: 0; }
.date-trigger .date-text { flex: 1; }
.date-trigger .date-relative {
    font-size: 11.5px; color: var(--muted);
    font-family: 'JetBrains Mono', monospace;
}
.date-popover {
    position: absolute; top: calc(100% + 6px); left: 0;
    background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
    padding: 14px; width: 320px; z-index: 60;
    box-shadow: 0 24px 50px -20px color-mix(in srgb, var(--ink) 35%, transparent);
    display: none;
}
.date-popover.open { display: block; }
.date-pop-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 10px;
}
.date-pop-title {
    font-family: 'Fraunces', serif; font-size: 15px; font-weight: 600; color: var(--ink);
}
.date-pop-nav {
    width: 28px; height: 28px; border-radius: 7px;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer; color: var(--ink-2);
    background: transparent; border: none;
}
.date-pop-nav:hover { background: var(--surface-2); }
.date-quick {
    display: flex; gap: 6px; flex-wrap: wrap;
    padding: 4px 0 12px; border-bottom: 1px solid var(--line-soft); margin-bottom: 12px;
}
.date-chip {
    padding: 4px 10px; border-radius: 999px;
    font-size: 11px; font-weight: 500;
    border: 1px solid var(--line); background: var(--surface); color: var(--ink-2);
    cursor: pointer;
}
.date-chip:hover { border-color: var(--accent); color: var(--accent); }
.date-chip.suggested {
    background: var(--accent-soft);
    border-color: color-mix(in srgb, var(--accent) 30%, transparent);
    color: var(--accent); font-weight: 600;
}
.date-grid-header { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; margin-bottom: 4px; }
.date-dow {
    text-align: center; font-size: 10.5px; font-weight: 700;
    color: var(--muted); padding: 6px 0;
    letter-spacing: 0.05em; text-transform: uppercase;
}
.date-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.date-cell {
    aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-family: 'JetBrains Mono', monospace;
    cursor: pointer; border-radius: 8px; color: var(--ink); position: relative;
    background: transparent; border: none;
}
.date-cell:hover:not(.disabled) { background: var(--surface-2); }
.date-cell.dim { color: var(--muted); opacity: 0.4; }
.date-cell.today { font-weight: 700; color: var(--accent); }
.date-cell.today::after {
    content: ""; position: absolute; bottom: 4px;
    width: 4px; height: 4px; border-radius: 50%; background: var(--accent);
}
.date-cell.selected { background: var(--accent); color: white; font-weight: 600; }
.date-cell.selected::after { background: white; }
.date-cell.disabled {
    color: var(--muted); cursor: not-allowed; opacity: 0.3;
    text-decoration: line-through;
}
.date-cell.day-off {
    background:
        repeating-linear-gradient(
            45deg,
            color-mix(in srgb, var(--surface-2) 70%, transparent) 0 4px,
            transparent 4px 8px
        );
    opacity: 0.45;
}
.date-cell.has-event::before {
    content: ""; position: absolute; top: 4px; right: 4px;
    width: 4px; height: 4px; border-radius: 50%; background: var(--warm);
}
.date-cell.recommended {
    box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--accent) 50%, transparent);
}
.date-pop-footer {
    padding-top: 10px; margin-top: 8px;
    border-top: 1px solid var(--line-soft);
    display: flex; justify-content: space-between; align-items: center;
    font-size: 11px; color: var(--muted); flex-wrap: wrap; gap: 8px;
}
.date-pop-footer .legend { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.date-pop-footer .legend span { display: inline-flex; align-items: center; gap: 4px; }
.date-pop-footer .legend i {
    font-style: normal; width: 5px; height: 5px;
    border-radius: 50%; display: inline-block;
}

/* Nueva cita · flujo interno fecha / modalidad / horarios */
.cita-schedule-flow {
    display: grid;
    gap: 16px;
}
.cita-schedule-step {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    min-width: 0;
}
.cita-schedule-step::before {
    content: none;
}
.cita-schedule-step:last-child::before {
    content: none;
}
.cita-schedule-num {
    display: none;
}
.cita-schedule-body {
    min-width: 0;
}
.cita-schedule-title-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 9px;
}
.cita-schedule-title-row::after {
    content: none;
}
.cita-schedule-title {
    color: var(--ink);
    font-size: 15px;
    font-weight: 650;
    line-height: 1.15;
}
.cita-date-strip-field {
    min-width: 0;
}
.cita-date-picker {
    position: relative;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}
.cita-date-picker .public-monthbar {
    min-height: 38px;
    margin: 0 0 8px;
}
.cita-date-picker .public-monthbar-current {
    min-height: 36px;
    min-width: min(190px, 100%);
    border-radius: 12px;
    padding: 5px 11px 5px 7px;
}
.cita-date-picker .public-monthbar-icon {
    width: 26px;
    height: 26px;
}
.cita-date-picker .public-monthbar-label {
    font-size: 14px;
}
.cita-date-picker .public-monthbar-nav {
    width: 34px;
    height: 34px;
}
.cita-date-picker .public-monthbar-menu {
    width: min(460px, 100%, calc(100vw - 48px));
}
.cita-datestrip-wrap {
    margin: 0 0 9px;
}
.cita-date-picker .public-datestrip {
    gap: 8px;
    padding: 2px 2px 8px;
}
.cita-date-picker .public-datecard {
    flex: 0 0 min(94px, calc((100% - 40px) / 6));
    min-width: 82px;
    max-width: 94px;
    min-height: 104px;
    padding: 13px 7px 11px;
    border-radius: 11px;
    background: color-mix(in srgb, var(--surface) 97%, var(--accent-soft));
}
.cita-date-picker .public-datecard-badge,
.cita-date-picker .public-datecard-badge-empty {
    display: none;
}
.cita-date-picker .public-datecard-dow {
    font-size: 10.5px;
    letter-spacing: 0;
    text-transform: none;
    margin-bottom: 3px;
}
.cita-date-picker .public-datecard-num {
    font-size: 25px;
    margin-bottom: 7px;
}
.cita-date-picker .public-datecard-rule {
    display: none;
}
.cita-datecard-check {
    position: absolute;
    top: 7px;
    right: 7px;
    width: 16px;
    height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--accent);
    color: #fff;
    opacity: 0;
    transform: scale(.88);
    transition: opacity .16s ease, transform .16s ease;
}
.cita-date-picker .public-datecard.is-active {
    background:
        linear-gradient(180deg,
            color-mix(in srgb, var(--accent-soft) 20%, var(--surface)) 0%,
            var(--surface) 74%);
    border-color: color-mix(in srgb, var(--accent) 48%, var(--line));
    box-shadow:
        0 7px 16px -15px color-mix(in srgb, var(--accent) 48%, transparent),
        inset 0 0 0 1px color-mix(in srgb, var(--accent) 24%, transparent);
}
.cita-date-picker .public-datecard.is-active .cita-datecard-check {
    opacity: 1;
    transform: scale(1);
}
.cita-date-picker .public-datecard.is-disabled {
    opacity: .52;
}
.cita-datecard-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    max-width: 100%;
    color: var(--muted);
    font-size: 10.5px;
    font-weight: 560;
    line-height: 1.2;
    white-space: nowrap;
}
.cita-datecard-status i {
    width: 4px;
    height: 4px;
    flex: 0 0 auto;
    border-radius: 999px;
    background: var(--ok);
}
.cita-datecard-status.is-low i {
    background: var(--warm);
}
.cita-datecard-status.is-empty i,
.cita-datecard-status.is-off i {
    background: var(--warm);
}
.cita-date-picker .public-day-banner {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 9px;
    margin: 2px 0 0;
    padding: 9px 11px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--accent-soft) 7%, var(--surface));
}
.cita-date-picker .public-day-banner-icon {
    width: 28px;
    height: 28px;
}
.cita-date-picker .public-day-banner-title {
    font-size: 13.5px;
}
.cita-date-picker .public-day-banner-sub {
    margin-top: 3px;
    font-size: 12px;
}
.cita-day-banner-count {
    align-self: center;
    color: var(--muted);
    font-size: 12px;
    font-weight: 550;
    padding-left: 11px;
    margin-left: 4px;
    border-left: 1px solid color-mix(in srgb, var(--accent) 12%, var(--line));
    white-space: nowrap;
}
.cita-date-picker .public-day-banner-rel {
    align-self: center;
    justify-self: end;
    margin-left: 0;
}
.cita-service-field,
.cita-modality-field {
    max-width: 480px;
}
.cita-modality-field .seg-control {
    min-height: 42px;
    border-radius: 10px;
}
.cita-modality-field .seg-control button.active {
    color: var(--accent);
    box-shadow:
        inset 0 0 0 1px color-mix(in srgb, var(--accent) 56%, transparent),
        0 5px 14px -14px color-mix(in srgb, var(--accent) 62%, transparent);
}
.cita-slot-group {
    display: grid;
    gap: 11px;
}
.cita-slot-band {
    display: grid;
    grid-template-columns: 124px minmax(0, 1fr);
    align-items: start;
    gap: 12px;
}
.cita-slot-band-head {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--ink-2);
    padding-top: 3px;
}
.cita-slot-band-icon {
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
    flex: 0 0 auto;
}
.cita-slot-band-title {
    min-width: 0;
    display: grid;
    gap: 2px;
}
.cita-slot-band-title strong {
    color: var(--ink);
    font-size: 13px;
    font-weight: 700;
}
.cita-slot-band-title span {
    color: var(--muted);
    font-size: 11.5px;
    font-variant-numeric: tabular-nums;
}
.cita-slot-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 10px;
}
.slot.cita-slot {
    min-height: 38px;
    border-radius: 9px;
    padding: 8px 10px;
    background: var(--surface);
    color: var(--ink-2);
    font-family: 'JetBrains Mono', monospace;
    font-size: 12.5px;
    font-weight: 650;
    text-align: center;
    font-variant-numeric: tabular-nums;
}
.slot.cita-slot:hover:not(.taken):not(.selected) {
    background: color-mix(in srgb, var(--accent-soft) 28%, var(--surface));
}
.slot.cita-slot.selected {
    background: color-mix(in srgb, var(--accent) 10%, var(--surface));
    color: var(--accent);
    border-color: color-mix(in srgb, var(--accent) 66%, var(--line));
    box-shadow:
        inset 0 0 0 1px color-mix(in srgb, var(--accent) 54%, transparent),
        0 6px 16px -14px color-mix(in srgb, var(--accent) 70%, transparent);
}

/* Slots de hora */
.slot {
    padding: 7px 11px; border-radius: 7px;
    border: 1px solid var(--line); background: var(--surface);
    font-family: 'JetBrains Mono', monospace; font-size: 12.5px;
    cursor: pointer; color: var(--ink-2); font-weight: 500;
}
.slot:hover:not(.taken):not(.selected) {
    border-color: color-mix(in srgb, var(--accent) 50%, var(--line));
}
.slot.taken {
    background: var(--surface-2); color: var(--muted);
    text-decoration: line-through; cursor: not-allowed;
}
.slot.selected {
    background: var(--accent); color: white; border-color: var(--accent);
    box-shadow: 0 4px 12px -3px color-mix(in srgb, var(--accent) 40%, transparent);
}
.slot.suggested {
    border-style: dashed;
    border-color: color-mix(in srgb, var(--accent) 50%, transparent);
}
.slot.has-error-flash { animation: shake .35s cubic-bezier(.36,.07,.19,.97); }

/* Custom select reusable (.csel) */
.csel { position: relative; }
.csel-trigger {
    width: 100%; padding: 11px 14px;
    border: 1px solid var(--line); border-radius: 9px;
    background: var(--surface); font-size: 14px; color: var(--ink);
    cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.csel-trigger:hover { border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); }
.csel.is-empty .csel-trigger { color: var(--muted); }
.csel.open .csel-trigger {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
.csel-arrow { color: var(--muted); transition: transform .2s ease; flex-shrink: 0; }
.csel.open .csel-arrow { transform: rotate(180deg); }
.csel-menu {
    position: absolute; top: calc(100% + 4px); left: 0; right: 0;
    background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
    padding: 6px; z-index: 60;
    box-shadow: 0 18px 40px -15px color-mix(in srgb, var(--ink) 30%, transparent);
    display: none; max-height: 280px; overflow-y: auto;
}
.csel.open .csel-menu { display: block; }
.csel-option {
    width: 100%; text-align: left; padding: 12px 14px;
    border-radius: 8px; font-size: 14px; cursor: pointer;
    color: var(--ink); display: flex; align-items: center; gap: 8px;
    background: transparent; border: none;
    font-family: 'Inter', sans-serif;
}
.csel-option + .csel-option { margin-top: 2px; }
.csel-option:hover { background: var(--surface-2); }
.csel-option.selected {
    background: var(--accent-soft); color: var(--accent); font-weight: 600;
}
.csel-option .csel-meta {
    font-size: 13px; color: var(--muted); margin-left: auto;
}
.csel-option.selected .csel-meta { color: color-mix(in srgb, var(--accent) 80%, transparent); font-weight: 500; }

/* Badge cuadrado de marca (Y de Yape / P de Plin) dentro de un pay-chip */
.brand-badge {
    width: 14px; height: 14px; border-radius: 4px;
    display: inline-flex; align-items: center; justify-content: center;
    color: white;
    font-family: 'Fraunces', serif;
    font-size: 9px; font-weight: 700;
}
.brand-badge-yape { background: var(--yape); }
.brand-badge-plin { background: var(--plin); font-family: 'Inter', sans-serif; font-size: 8px; }
.method-icon {
    width: 18px; height: 18px; border-radius: 6px;
    display: inline-flex; align-items: center; justify-content: center;
    flex: 0 0 auto;
}
.method-icon-cash {
    color: var(--ok);
    background: color-mix(in srgb, var(--ok) 12%, transparent);
}
.method-icon-bank {
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 12%, transparent);
}

/* Pay chips (selectable) — variante específica con color de marca */
.pay-chip {
    padding: 8px 13px; border-radius: 9px;
    border: 1px solid var(--line); background: var(--surface);
    font-size: 12.5px; cursor: pointer; font-weight: 500; color: var(--ink-2);
    display: inline-flex; align-items: center; gap: 7px;
    font-family: 'Inter', sans-serif;
}
.pay-chip.selected {
    background: var(--accent-soft);
    border-color: color-mix(in srgb, var(--accent) 35%, transparent);
    color: var(--accent);
}
.field-help {
    margin: -5px 0 10px;
    color: var(--muted);
    font-size: 12.5px;
    line-height: 1.42;
}
.payment-method-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.payment-multi-chip {
    position: relative;
    min-height: 42px;
    padding: 8px 12px;
    border-radius: 12px;
    color: var(--ink-2);
    background: var(--surface);
    transition: background .15s ease, border-color .15s ease, box-shadow .15s ease, color .15s ease;
}
.payment-multi-chip:hover {
    background: color-mix(in srgb, var(--accent-soft) 24%, var(--surface));
    border-color: color-mix(in srgb, var(--accent) 20%, var(--line));
}
.payment-multi-chip:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent);
}
.payment-multi-chip.selected {
    background: color-mix(in srgb, var(--accent-soft) 56%, var(--surface));
    border-color: color-mix(in srgb, var(--accent) 34%, var(--line));
    color: var(--accent);
    box-shadow: none;
}
.pay-chip-check {
    width: 18px;
    height: 18px;
    margin-left: 2px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: transparent;
    background: color-mix(in srgb, var(--surface) 88%, transparent);
    border: 1px solid color-mix(in srgb, var(--muted) 22%, var(--line));
}
.payment-multi-chip.selected .pay-chip-check {
    color: white;
    background: var(--accent);
    border-color: var(--accent);
}

/* Segmented control fila completa */
.seg-control {
    display: inline-flex; background: var(--surface-2);
    border-radius: 9px; padding: 3px; border: 1px solid var(--line); width: 100%;
}
.seg-control button {
    flex: 1; padding: 9px 14px; font-size: 13px; border-radius: 6px;
    cursor: pointer; color: var(--ink-2); font-weight: 500;
    display: flex; align-items: center; justify-content: center; gap: 6px;
    background: transparent; border: none;
    font-family: 'Inter', sans-serif;
    min-width: 0;
    white-space: nowrap;
}
.seg-control button.active {
    background: var(--surface); color: var(--ink); font-weight: 600;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.seg-control button:disabled,
.seg-control button.is-disabled {
    opacity: .42;
    cursor: not-allowed;
}

.mode-icon {
    width: 15px;
    height: 15px;
    display: inline-block;
    flex: 0 0 auto;
    background: currentColor;
    -webkit-mask: var(--mode-icon) center / contain no-repeat;
    mask: var(--mode-icon) center / contain no-repeat;
}
.mode-icon-home {
    color: color-mix(in srgb, var(--accent) 78%, var(--ink-2));
    --mode-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 14V8l5-4 5 4v6M6 14v-3h4v3' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.mode-icon-pin {
    color: color-mix(in srgb, var(--accent) 84%, #4A8BB8);
    --mode-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 14s4-3.8 4-7A4 4 0 1 0 4 7c0 3.2 4 7 4 7Z' fill='none' stroke='black' stroke-width='1.05' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='8' cy='7' r='1.25' fill='none' stroke='black' stroke-width='1'/%3E%3C/svg%3E");
}
.mode-icon-video {
    color: var(--ok);
    --mode-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='2' y='4.5' width='9.5' height='7' rx='1.5' fill='none' stroke='black' stroke-width='1.05'/%3E%3Cpath d='M11.5 7l2.5-1.6v5.2L11.5 9' fill='none' stroke='black' stroke-width='1.05' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.mode-icon-hybrid {
    color: #8B7CB6;
    --mode-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 13V8.3L6.8 5l4.2 3.2V13M4.6 13v-2.7H9V13' fill='none' stroke='black' stroke-width='1.55' stroke-linecap='round' stroke-linejoin='round'/%3E%3Crect x='9.5' y='3.5' width='3.2' height='2.5' rx='.5' fill='none' stroke='black' stroke-width='1.3'/%3E%3Cpath d='M12.7 4.5l1.2-.8v2.1l-1.2-.7' fill='none' stroke='black' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.agv2-evt-done .mode-icon,
.agv2-evt-cancelled .mode-icon,
.agenda-list-row-done .mode-icon,
.agenda-list-row-cancel .mode-icon,
.agenda-list-row-blocked .mode-icon {
    color: var(--muted);
    opacity: .62;
}

@media (max-width: 480px) {
    .seg-control button,
    .public-modality button {
        padding-left: 8px;
        padding-right: 8px;
        font-size: 12.5px;
    }
    .mode-icon {
        width: 14px;
        height: 14px;
    }
}

/* Custom checkbox UI (alternativa al check-row con input nativo) */
.check-row-custom { display: flex; align-items: flex-start; gap: 10px; padding: 10px 0; cursor: pointer; }
.check-box {
    width: 18px; height: 18px; border-radius: 5px;
    border: 1.5px solid var(--line); flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--surface); margin-top: 1px;
    color: white;
}
.check-box.checked { background: var(--accent); border-color: var(--accent); }
.check-box svg { display: none; }
.check-box.checked svg { display: block; }

/* Form banners (info / ok) */
.form-banner {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 11px 14px; border-radius: 10px;
    font-size: 12.5px; line-height: 1.5;
}
.form-banner-ok {
    background: color-mix(in srgb, var(--ok) 12%, transparent);
    color: color-mix(in srgb, var(--ok) 90%, var(--ink));
    border: 1px solid color-mix(in srgb, var(--ok) 25%, transparent);
}
.form-banner-info {
    background: color-mix(in srgb, var(--accent) 6%, var(--surface));
    border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
    color: var(--ink-2);
}
.form-banner-agenda {
    align-items: center;
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--accent-soft) 54%, var(--surface)),
        color-mix(in srgb, var(--surface) 92%, white));
    border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--line));
    color: var(--ink-2);
}
.form-banner-agenda svg {
    flex: 0 0 auto;
    color: var(--accent);
}
.form-banner-agenda span {
    display: grid;
    gap: 1px;
}
.form-banner-agenda strong {
    color: var(--ink);
    font-size: 12.5px;
}
.form-banner-agenda small {
    color: var(--muted);
    font-size: 12px;
}
.form-banner-agenda.is-stale {
    background: color-mix(in srgb, var(--warn-soft) 58%, var(--surface));
    border-color: color-mix(in srgb, var(--warn) 28%, var(--line));
}
.form-banner-agenda.is-stale svg { color: var(--warn); }
.form-banner-warn {
    background: var(--warn-soft); color: var(--warn);
    border: 1px solid color-mix(in srgb, var(--warn) 25%, transparent);
}

/* Mensaje de grupo (slot, métodos pago) */
.group-msg {
    display: flex; align-items: flex-start; gap: 6px;
    margin-top: 8px; font-size: 12px; line-height: 1.4;
    color: var(--rose);
    opacity: 0; transform: translateY(-4px);
    transition: opacity .2s ease, transform .2s ease;
    height: 0; overflow: hidden;
}
.group-msg.show {
    padding: 8px 12px; border-radius: 8px;
    background: color-mix(in srgb, var(--rose) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--rose) 25%, transparent);
    opacity: 1; transform: none; height: auto;
}
.group-msg svg { flex-shrink: 0; margin-top: 2px; }

/* .req y .opt en field-label · ya estaban; aseguramos consistencia con el mockup */
.field-label .req { color: var(--rose); font-weight: 700; }
.field-label .opt {
    text-transform: none; letter-spacing: 0; font-size: 11px; font-weight: 500;
    color: var(--muted); padding: 1px 6px;
    border: 1px solid var(--line); border-radius: 4px;
    margin-left: 6px;
}
.slot-inline-message {
    display: inline-flex;
    align-items: flex-start;
    gap: 7px;
    max-width: 100%;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.42;
}
.slot-inline-message svg {
    flex-shrink: 0;
    margin-top: 3px;
}
.slot-inline-message span {
    min-width: 0;
}
.slot-inline-message a {
    color: inherit;
    font-weight: 850;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.slot-inline-message.is-error {
    color: color-mix(in srgb, var(--rose) 84%, var(--ink));
}
.slot-inline-message.is-muted {
    color: var(--muted);
}

/* Validation hooks específicos del nueva-cita */
.field-wrap.has-error .patient-picker,
.field-wrap.has-error .cita-date-picker,
.field-wrap.has-error .date-trigger {
    border-color: var(--rose) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--rose) 16%, transparent) !important;
    animation: shake .35s cubic-bezier(.36,.07,.19,.97);
}
.field-wrap.is-valid .patient-picker {
    border-color: color-mix(in srgb, var(--ok) 50%, var(--line));
}

@media (max-width: 980px) {
    .cita-date-picker .public-datecard {
        flex-basis: min(88px, calc((100% - 32px) / 5));
        min-width: 78px;
        max-width: 88px;
    }
    .cita-slot-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .cita-schedule-flow {
        gap: 14px;
    }
    .cita-schedule-step {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
    }
    .cita-schedule-title-row {
        gap: 8px;
        margin-bottom: 8px;
    }
    .cita-schedule-title {
        font-size: 14.5px;
    }
    .cita-date-picker {
        padding: 10px;
        border-radius: 13px;
    }
    .cita-date-picker .public-monthbar {
        gap: 8px;
        align-items: flex-start;
    }
    .cita-date-picker .public-monthbar-current {
        min-width: 0;
        max-width: calc(100% - 92px);
    }
    .cita-date-picker .public-monthbar-actions {
        gap: 6px;
    }
    .cita-date-picker .public-monthbar-nav {
        width: 32px;
        height: 32px;
    }
    .cita-date-picker .public-datecard {
        flex: 0 0 calc((100% - 21px) / 4);
        min-width: 0;
        max-width: none;
        min-height: 78px;
        padding: 8px 5px 7px;
    }
    .cita-date-picker .public-datecard-badge {
        display: inline-block;
        font-size: 10px;
        padding: 1px 7px;
        min-height: 16px;
    }
    .cita-date-picker .public-datecard-badge-empty {
        display: inline-block;
        min-height: 16px;
        visibility: hidden;
    }
    .cita-date-picker .public-datecard-num {
        font-size: 22px;
    }
    .cita-date-picker .public-datestrip {
        gap: 7px;
    }
    .cita-datecard-status {
        display: none;
    }
    .cita-datecard-check {
        width: 15px;
        height: 15px;
        top: 6px;
        right: 6px;
    }
    .cita-date-picker .public-day-banner {
        grid-template-columns: auto minmax(0, 1fr);
        align-items: flex-start;
    }
    .cita-date-picker .public-day-banner-title {
        flex-wrap: wrap;
    }
    .cita-date-picker .public-day-banner-rel {
        grid-column: 2;
        justify-self: start;
        margin-top: 5px;
    }
    .cita-day-banner-count {
        grid-column: 2;
        padding-left: 0;
        margin: 5px 0 0;
        border-left: 0;
        white-space: normal;
    }
    .cita-service-field,
    .cita-modality-field {
        max-width: none;
    }
    .cita-slot-band {
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
    }
    .cita-slot-band-head {
        padding-top: 0;
    }
    .cita-slot-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
    }
    .slot.cita-slot {
        min-height: 40px;
        padding: 8px 7px;
    }
}

@media (max-width: 430px) {
    .cita-date-picker .public-datestrip {
        gap: 6px;
    }
    .cita-date-picker .public-datecard {
        flex: 0 0 calc((100% - 18px) / 4);
        min-height: 76px;
        padding: 7px 4px 6px;
    }
    .cita-date-picker .public-datecard-num {
        font-size: 21px;
    }
    .cita-slot-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ===========================================================================
 * DISPONIBILIDAD · grid semanal recurrente
 * =========================================================================== */
.availability-guides {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}
.availability-guide-card {
    min-height: 76px;
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    column-gap: 12px;
    align-items: start;
    padding: 14px 15px;
    border: 1px solid color-mix(in srgb, var(--accent) 12%, var(--line));
    border-radius: 16px;
    background: color-mix(in srgb, var(--surface) 92%, var(--bg));
    box-shadow: 0 16px 46px -42px color-mix(in srgb, var(--ink) 52%, transparent);
}
.availability-guide-card span {
    grid-row: 1 / span 2;
    width: 38px;
    height: 38px;
    border-radius: 13px;
    display: grid;
    place-items: center;
    background: color-mix(in srgb, var(--accent-soft) 62%, var(--surface));
    color: var(--accent);
    font-weight: 800;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.availability-guide-card strong {
    grid-column: 2;
    display: block;
    color: var(--ink);
    font-size: 13.5px;
    line-height: 1.15;
    padding-top: 1px;
}
.availability-guide-card small {
    grid-column: 2;
    display: block;
    margin-top: 3px;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.35;
}
.availability-guide-card.is-primary {
    border-color: color-mix(in srgb, var(--accent) 26%, var(--line));
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--accent-soft) 54%, var(--surface)),
        var(--surface));
}
.availability-schedule-title {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.availability-schedule-title span {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 4px 9px;
    border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--line));
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent-soft) 44%, var(--surface));
    color: var(--accent);
    font-size: 11.5px;
    font-weight: 850;
}
.availability-paint-toolbar,
.availability-theme-options {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
}
.availability-paint-toolbar {
    justify-content: flex-end;
}
.availability-paint-toolbar button,
.availability-theme-options button {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 7px 12px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface);
    color: var(--ink-2);
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.availability-paint-toolbar button:hover,
.availability-theme-options button:hover {
    border-color: color-mix(in srgb, var(--accent) 28%, var(--line));
    background: color-mix(in srgb, var(--accent-soft) 30%, var(--surface));
}
.availability-paint-toolbar button.active,
.availability-theme-options button.active {
    border-color: color-mix(in srgb, var(--accent) 34%, var(--line));
    background: var(--accent-soft);
    color: var(--accent);
}
.availability-paint-toolbar button[data-sched-mode="lunch"].active {
    border-color: color-mix(in srgb, var(--warm) 38%, var(--line));
    background: color-mix(in srgb, var(--warm-soft) 58%, var(--surface));
    color: color-mix(in srgb, var(--warm) 78%, var(--ink));
}
.availability-paint-toolbar button[data-sched-mode="empty"].active {
    border-color: color-mix(in srgb, var(--ink) 18%, var(--line));
    background: var(--surface-2);
    color: var(--ink-2);
}
.availability-impact-card {
    margin-top: 16px;
    padding: 14px;
    border: 1px solid color-mix(in srgb, var(--accent) 14%, var(--line));
    border-radius: 14px;
    background:
        linear-gradient(135deg,
            color-mix(in srgb, var(--accent-soft) 34%, var(--surface)) 0%,
            var(--surface) 72%);
}
.availability-impact-head {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding-bottom: 12px;
    border-bottom: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
}
.availability-impact-mark {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    background: color-mix(in srgb, var(--accent) 12%, var(--surface));
    color: var(--accent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 18%, transparent);
    flex: 0 0 auto;
}
.availability-impact-head strong {
    display: block;
    color: var(--ink);
    font-size: 13.5px;
    font-weight: 780;
    line-height: 1.2;
}
.availability-impact-head small {
    display: block;
    margin-top: 2px;
    color: var(--muted);
    font-size: 11.5px;
    line-height: 1.35;
}
.availability-impact-grid {
    display: grid;
    gap: 9px;
    margin-top: 12px;
}
.availability-impact-grid div {
    display: grid;
    grid-template-columns: minmax(102px, .72fr) minmax(0, 1fr);
    gap: 10px;
    align-items: baseline;
}
.availability-impact-grid span {
    color: var(--muted);
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.availability-impact-grid strong {
    min-width: 0;
    color: var(--ink-2);
    font-size: 12.5px;
    font-weight: 760;
    line-height: 1.35;
}
.availability-rule-note {
    display: block;
    margin-top: 5px;
    color: var(--muted);
    font-size: 11.5px;
    line-height: 1.4;
}
.availability-field-help {
    display: block;
    margin-top: 6px;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.4;
}
.sched-scroll {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    border-radius: 12px;
    -webkit-overflow-scrolling: touch;
}
.availability-public-link {
    margin-bottom: 12px;
    padding: 12px 13px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface-2);
}
.availability-public-link > div {
    max-width: 100%;
    color: var(--accent);
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 11px;
    font-weight: 750;
    line-height: 1.45;
    text-align: left;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.availability-mode-dot,
.theme-swatch {
    width: 13px;
    height: 13px;
    border-radius: 5px;
    flex: 0 0 auto;
    border: 1px solid var(--line);
}
.availability-mode-dot.is-available {
    background: linear-gradient(180deg, var(--surface), color-mix(in srgb, var(--surface-2) 22%, var(--surface)));
    border-color: color-mix(in srgb, var(--line) 92%, var(--accent));
}
.availability-mode-dot.is-lunch {
    background:
        linear-gradient(90deg, color-mix(in srgb, var(--warm) 78%, var(--ink)) 0 3px, transparent 3px),
        repeating-linear-gradient(135deg,
            color-mix(in srgb, var(--warm) 24%, transparent) 0 1.5px,
            transparent 1.5px 7px),
        color-mix(in srgb, var(--warm-soft) 46%, var(--surface));
    border-color: color-mix(in srgb, var(--warm) 26%, var(--line));
}
.availability-mode-dot.is-empty {
    background:
        repeating-linear-gradient(135deg,
            color-mix(in srgb, var(--muted) 34%, transparent) 0 1.5px,
            transparent 1.5px 7px),
        color-mix(in srgb, var(--surface-2) 32%, var(--surface));
}
.theme-swatch.is-aqua {
    background: linear-gradient(135deg, #5B8DB8 0%, #CFE8DD 100%);
    border-color: color-mix(in srgb, #5B8DB8 35%, var(--line));
}
.theme-swatch.is-sky {
    background: linear-gradient(135deg, #5B8DB8 0%, #EEF5FB 100%);
    border-color: color-mix(in srgb, #5B8DB8 35%, var(--line));
}
.sched-grid {
    display: grid;
    grid-template-columns: 70px repeat(7, 1fr);
    min-width: 760px;
    gap: 0;
    border: 1px solid color-mix(in srgb, var(--line) 86%, var(--accent-soft));
    border-radius: 16px;
    overflow: hidden;
    background: var(--surface);
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, white 72%, transparent),
        0 20px 50px -46px color-mix(in srgb, var(--ink) 56%, transparent);
}
.sched-header {
    padding: 12px 8px;
    text-align: center;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted);
    background:
        linear-gradient(180deg,
            color-mix(in srgb, var(--surface-2) 72%, var(--surface)) 0%,
            var(--surface) 100%);
    border-bottom: 1px solid color-mix(in srgb, var(--line) 88%, var(--accent-soft));
    border-right: 1px solid var(--line-soft);
}
.sched-header:last-child { border-right: none; }
/* Sábado y domingo se tratan visualmente igual que el resto de días.
   Si en el futuro quieres acentuarlos como "fin de semana", reactivá
   esta regla con un tono más suave. */
.sched-header.weekend { color: var(--muted); }
.sched-header.day-off {
    color: var(--muted);
    background:
        repeating-linear-gradient(
            45deg,
            color-mix(in srgb, var(--surface-2) 78%, transparent) 0 6px,
            color-mix(in srgb, var(--surface) 88%, transparent) 6px 12px
        );
}
.sched-header-corner {
    background: var(--surface);
    border-right: 1px solid var(--line);
}

.sched-time {
    padding: 8px;
    font-size: 10.5px;
    font-family: 'JetBrains Mono', monospace;
    color: color-mix(in srgb, var(--muted) 88%, var(--ink));
    text-align: right;
    background: color-mix(in srgb, var(--surface-2) 26%, var(--surface));
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line-soft);
}
.sched-cell {
    border-right: 1px solid var(--line-soft);
    border-bottom: 1px solid var(--line-soft);
    height: 36px;
    cursor: pointer;
    transition: background .15s ease, box-shadow .15s ease, filter .15s ease;
    position: relative;
    user-select: none;
    overflow: hidden;
    background:
        repeating-linear-gradient(135deg,
            color-mix(in srgb, var(--muted) 28%, transparent) 0 1.5px,
            transparent 1.5px 10px),
        color-mix(in srgb, var(--surface-2) 28%, var(--surface));
}
.sched-cell:last-child { border-right: none; }
.sched-cell:hover {
    box-shadow:
        inset 0 0 0 1px color-mix(in srgb, var(--accent) 24%, transparent),
        inset 0 1px 0 color-mix(in srgb, white 55%, transparent);
    background:
        repeating-linear-gradient(135deg,
            color-mix(in srgb, var(--accent) 26%, transparent) 0 1.5px,
            transparent 1.5px 10px),
        color-mix(in srgb, var(--accent-soft) 26%, var(--surface));
}
.sched-cell.day-off {
    cursor: not-allowed;
    background:
        repeating-linear-gradient(135deg,
            color-mix(in srgb, var(--muted) 30%, transparent) 0 1.5px,
            transparent 1.5px 10px),
        color-mix(in srgb, var(--surface-2) 38%, var(--surface));
}
.sched-cell.day-off::after {
    content: "";
    position: absolute;
    inset: 0;
    background: color-mix(in srgb, var(--surface) 34%, transparent);
}
.sched-cell.day-off:hover {
    background:
        repeating-linear-gradient(135deg,
            color-mix(in srgb, var(--muted) 30%, transparent) 0 1.5px,
            transparent 1.5px 10px),
        color-mix(in srgb, var(--surface-2) 38%, var(--surface));
    box-shadow: none;
}
.sched-cell.available {
    background: linear-gradient(180deg, var(--surface) 0%, color-mix(in srgb, var(--surface-2) 14%, var(--surface)) 100%);
    box-shadow:
        inset 0 0 0 1px color-mix(in srgb, var(--line) 46%, transparent),
        inset 0 1px 0 color-mix(in srgb, white 56%, transparent);
}
.sched-cell.available:hover {
    box-shadow:
        inset 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent),
        inset 0 1px 0 color-mix(in srgb, white 68%, transparent);
    background: color-mix(in srgb, var(--accent-soft) 18%, var(--surface));
}
.sched-cell.lunch {
    background: color-mix(in srgb, var(--warm-soft) 7%, var(--surface));
    box-shadow: none;
    overflow: visible;
    z-index: 1;
}
.sched-cell.lunch::before {
    content: "";
    position: absolute;
    z-index: 1;
    inset: 3px 4px;
    background:
        linear-gradient(90deg,
            color-mix(in srgb, var(--warm) 34%, var(--surface)) 0 3px,
            transparent 3px),
        repeating-linear-gradient(135deg,
            color-mix(in srgb, var(--warm-soft) 22%, var(--surface)) 0 1px,
            color-mix(in srgb, var(--warm-soft) 10%, var(--surface)) 1px 14px),
        color-mix(in srgb, var(--warm-soft) 18%, var(--surface));
    border-radius: 5px;
    box-shadow:
        inset 0 0 0 1px color-mix(in srgb, var(--warm) 10%, transparent),
        inset 0 1px 0 color-mix(in srgb, white 52%, transparent);
    backdrop-filter: blur(4px) saturate(.92);
    -webkit-backdrop-filter: blur(4px) saturate(.92);
    transition: box-shadow .15s ease, filter .15s ease;
    pointer-events: none;
}
.sched-cell.lunch::after {
    content: none;
    position: absolute;
}
.sched-cell.lunch.lunch-label::after {
    content: attr(data-lunch-label);
    z-index: 3;
    left: 14px;
    right: 10px;
    top: 50%;
    height: 22px;
    transform: translateY(-50%);
    color: color-mix(in srgb, var(--warm) 46%, var(--ink));
    font-size: 10.5px;
    font-weight: 650;
    line-height: 22px;
    letter-spacing: .02em;
    text-align: center;
    opacity: .68;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    pointer-events: none;
}
.sched-cell.lunch.lunch-label-between::after {
    top: calc(100% - 11px);
}
.sched-cell.lunch.lunch-start::before {
    bottom: -1px;
    border-radius: 5px 5px 0 0;
}
.sched-cell.lunch.lunch-middle::before {
    top: -1px;
    bottom: -1px;
    border-radius: 0;
}
.sched-cell.lunch.lunch-end::before {
    top: -1px;
    border-radius: 0 0 5px 5px;
}
.sched-cell.lunch.lunch-single::before {
    inset: 3px 4px;
    border-radius: 5px;
}
.sched-cell.lunch:hover {
    box-shadow: none;
}
.sched-cell.lunch:hover::before {
    box-shadow:
        inset 0 0 0 1px color-mix(in srgb, var(--warm) 26%, transparent),
        inset 0 1px 0 color-mix(in srgb, white 58%, transparent),
        0 8px 18px -16px color-mix(in srgb, var(--warm) 50%, transparent);
    filter: saturate(1.05);
}
.sched-cell.lunch:hover.lunch-label::after {
    opacity: .82;
}
/* Celda con cita ya agendada esta semana · patrón diagonal acento, no editable.
   Prevalece sobre available/lunch para que el psi no pueda repintarla por error. */
.sched-cell.cita-ocupada {
    cursor: not-allowed;
    background:
        repeating-linear-gradient(45deg,
            color-mix(in srgb, var(--accent) 30%, transparent) 0 4px,
            color-mix(in srgb, var(--accent) 8%, var(--surface)) 4px 8px) !important;
    box-shadow:
        inset 0 0 0 1px color-mix(in srgb, var(--accent) 28%, var(--line)) !important;
}
.sched-cell.cita-ocupada:hover {
    box-shadow:
        inset 0 0 0 1px color-mix(in srgb, var(--accent) 50%, var(--line)) !important;
    filter: saturate(1.08);
}
/* Si la celda tiene cita agendada, ocultar todas las decoraciones internas
   (íconos de modalidad, patrón de almuerzo legacy) para que se lea como
   ocupada limpiamente con el patrón diagonal accent. */
.sched-cell.cita-ocupada::before,
.sched-cell.cita-ocupada::after {
    display: none !important;
}
.availability-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 16px;
    margin-top: 18px;
    color: var(--muted);
    font-size: 12px;
}
.availability-legend span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.availability-legend-swatch {
    width: 18px;
    height: 14px;
    flex: 0 0 auto;
    border-radius: 5px;
    border: 1px solid var(--line);
}
.availability-legend-swatch.is-available {
    background: linear-gradient(180deg, var(--surface), color-mix(in srgb, var(--surface-2) 18%, var(--surface)));
    border-color: color-mix(in srgb, var(--line) 92%, var(--accent));
}
.availability-legend-swatch.is-lunch {
    background:
        linear-gradient(90deg, var(--warm) 0 4px, transparent 4px),
        repeating-linear-gradient(135deg,
            color-mix(in srgb, var(--warm) 22%, transparent) 0 1.5px,
            transparent 1.5px 7px),
        color-mix(in srgb, var(--warm-soft) 48%, var(--surface));
    border-color: color-mix(in srgb, var(--warm) 26%, var(--line));
}
.availability-legend-swatch.is-closed {
    background:
        repeating-linear-gradient(135deg,
            color-mix(in srgb, var(--muted) 34%, transparent) 0 1.5px,
            transparent 1.5px 7px),
        color-mix(in srgb, var(--surface-2) 30%, var(--surface));
}
.availability-legend-swatch.is-day-off {
    background: repeating-linear-gradient(135deg,
        color-mix(in srgb, var(--muted) 30%, transparent) 0 1.5px,
        transparent 1.5px 7px),
        color-mix(in srgb, var(--surface-2) 38%, var(--surface));
}

/* Pill de bloque (panel derecho) */
.block-pill {
    padding: 4px 10px; border-radius: 7px;
    background: var(--surface); border: 1px solid var(--line);
    font-size: 12px; display: inline-flex; align-items: center; gap: 6px;
}

/* Excepción (días libres) */
.excepcion-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 9px 12px; border-radius: 8px;
    background: var(--surface-2);
    margin-bottom: 6px;
}
.excepcion-row .motivo { font-size: 13px; color: var(--ink-2); }
.excepcion-row .fecha {
    font-family: 'JetBrains Mono', monospace; font-size: 11.5px;
    color: var(--muted); margin-right: 8px;
}
.excepcion-row .borrar {
    background: none; border: none; cursor: pointer;
    color: var(--muted); padding: 2px 4px; border-radius: 4px;
}
.excepcion-row .borrar:hover { color: var(--rose); background: var(--surface); }

/* Modal simple para nueva excepción */
.modal-overlay {
    position: fixed; inset: 0; z-index: 100;
    background: color-mix(in srgb, var(--ink) 35%, transparent);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    display: none; align-items: flex-start; justify-content: center;
    padding: 8vh 20px; overflow-y: auto;
    animation: fadeIn .2s ease;
}
.modal-overlay.open { display: flex; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.modal {
    background: var(--surface); border-radius: 14px;
    border: 1px solid var(--line);
    width: 100%; max-width: 460px; margin: auto;
    box-shadow: 0 30px 80px -25px rgba(0,0,0,0.4);
    padding: 24px;
}
.modal-title {
    font-family: 'Fraunces', serif; font-size: 19px; font-weight: 600;
    color: var(--ink); margin-bottom: 6px;
}
.modal-sub { font-size: 12.5px; color: var(--muted); margin-bottom: 18px; }
.modal-actions {
    display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
}
@media (max-width: 900px) {
    body.sidebar-open {
        overflow: hidden;
    }
    .mobile-menu-btn {
        position: fixed;
        top: calc(12px + env(safe-area-inset-top));
        left: 12px;
        z-index: 60;
        width: 40px;
        height: 40px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--line));
        border-radius: 12px;
        background: color-mix(in srgb, var(--surface) 92%, transparent);
        color: var(--accent);
        box-shadow: 0 16px 34px -28px color-mix(in srgb, var(--ink) 70%, transparent);
        backdrop-filter: blur(14px) saturate(140%);
        -webkit-backdrop-filter: blur(14px) saturate(140%);
    }
    .sidebar-scrim {
        position: fixed;
        inset: 0;
        z-index: 45;
        display: block;
        background: color-mix(in srgb, var(--ink) 26%, transparent);
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
    }
    .sidebar-scrim[hidden] {
        display: none;
    }
    body.sidebar-open .mobile-menu-btn {
        opacity: 0;
        pointer-events: none;
        transform: translateX(-8px);
    }
    .sidebar {
        width: min(310px, calc(100vw - 36px));
        padding: calc(18px + env(safe-area-inset-top)) 14px calc(16px + env(safe-area-inset-bottom));
        transform: translateX(calc(-100% - 18px));
        transition: transform .25s ease;
        z-index: 50;
        box-shadow: 24px 0 64px -46px color-mix(in srgb, var(--ink) 90%, transparent);
    }
    .sidebar.open {
        transform: translateX(0);
    }
    .sidebar-close {
        position: absolute;
        top: calc(14px + env(safe-area-inset-top));
        right: 14px;
        width: 34px;
        height: 34px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 1px solid var(--line);
        border-radius: 11px;
        background: var(--surface);
        color: var(--muted);
        cursor: pointer;
    }
    .sidebar-logo {
        padding-right: 42px;
    }
    .main { margin-left: 0; }
    .topbar {
        padding-left: 64px;
    }
}
@media (max-width: 600px) {
    .onb-card { padding: 32px 24px; }
    .auth-brand-top { top: 20px; left: 20px; }
    .module-header { padding: 18px 16px 0 16px; }
    .topbar {
        height: 58px;
        padding-left: 62px;
        padding-right: 12px;
    }
    .availability-header .module-header-row {
        gap: 14px;
    }
    .availability-header .module-h1 {
        font-size: clamp(36px, 10vw, 44px);
        line-height: 1;
    }
    .availability-header .module-subtitle {
        max-width: 100%;
        font-size: 14px;
        line-height: 1.42;
    }
    .availability-header .module-actions {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }
    .availability-header .module-actions .btn-ghost,
    .availability-header .module-actions .btn-primary {
        width: 100%;
        min-width: 0;
        justify-content: center;
        padding-left: 10px;
        padding-right: 10px;
        white-space: nowrap;
        font-size: 13px;
    }
    .availability-page-shell {
        width: 100%;
        max-width: 100% !important;
        box-sizing: border-box;
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        padding: 16px 14px 28px !important;
        gap: 16px !important;
        overflow: visible;
    }
    .availability-page-shell > *,
    .availability-page-shell .card-solid,
    .availability-page-shell .space-y-5 {
        min-width: 0;
        max-width: 100%;
    }
    .availability-guides {
        display: grid;
        grid-template-columns: 1fr;
        gap: 9px;
        margin: 0;
        padding: 0;
        overflow: visible;
    }
    .availability-guide-card {
        width: 100%;
        min-width: 0;
        min-height: 0;
        grid-template-columns: 34px minmax(0, 1fr);
        column-gap: 11px;
        padding: 12px;
        border-radius: 16px;
    }
    .availability-guide-card span {
        width: 34px;
        height: 34px;
        border-radius: 12px;
    }
    .availability-guide-card strong {
        font-size: 13.5px;
    }
    .availability-guide-card small {
        font-size: 12px;
        line-height: 1.32;
    }
    .availability-page-shell .card-solid {
        padding: 16px !important;
        border-radius: 18px;
        overflow: hidden;
    }
    .availability-schedule-title {
        display: grid;
        gap: 8px;
    }
    .availability-schedule-title .serif {
        font-size: 22px !important;
        line-height: 1.08;
    }
    .availability-schedule-title span {
        width: max-content;
        max-width: 100%;
        min-height: 24px;
        font-size: 11px;
        padding: 4px 8px;
    }
    .availability-paint-toolbar {
        display: grid;
        grid-template-columns: 1fr;
        width: 100%;
        gap: 7px;
    }
    .availability-paint-toolbar button {
        min-width: 0;
        width: 100%;
        padding: 9px 10px;
        font-size: 12px;
    }
    .sched-scroll {
        margin: 0 -16px;
        padding: 0 16px 8px;
        border-radius: 0;
        max-width: calc(100% + 32px);
    }
    .sched-grid {
        min-width: 690px;
        border-radius: 14px;
    }
    .sched-header {
        padding: 10px 6px;
        font-size: 10px;
    }
    .sched-time {
        padding: 7px 6px;
    }
    .sched-cell {
        height: 34px;
    }
    .availability-public-link > div {
        font-size: 10.5px;
    }
    .availability-public-link,
    .availability-public-link > div {
        min-width: 0;
        max-width: 100%;
    }
    .availability-theme-options {
        display: grid;
        grid-template-columns: 1fr 1fr;
        width: 100%;
    }
    .availability-theme-options button {
        width: 100%;
    }
}

@media (max-width: 760px) {
    .availability-header {
        padding: 18px 14px 0 14px;
    }
    .availability-header .module-header-row {
        gap: 14px;
    }
    .availability-header .module-h1 {
        font-size: clamp(36px, 10vw, 44px);
        line-height: 1;
    }
    .availability-header .module-subtitle {
        max-width: 100%;
        font-size: 14px;
        line-height: 1.42;
    }
    .availability-header .module-actions {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }
    .availability-header .module-actions .btn-ghost,
    .availability-header .module-actions .btn-primary {
        width: 100%;
        min-width: 0;
        justify-content: center;
        padding-left: 10px;
        padding-right: 10px;
        white-space: nowrap;
        font-size: 13px;
    }
    .availability-page-shell {
        width: 100%;
        max-width: 100% !important;
        box-sizing: border-box;
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        padding: 16px 14px 28px !important;
        gap: 16px !important;
        overflow: visible;
    }
    .availability-page-shell > *,
    .availability-page-shell .card-solid,
    .availability-page-shell .space-y-5 {
        min-width: 0;
        max-width: 100%;
    }
    .availability-guides {
        display: grid;
        grid-template-columns: 1fr;
        gap: 9px;
        margin: 0;
        padding: 0;
        overflow: visible;
    }
    .availability-guide-card {
        width: 100%;
        min-width: 0;
        min-height: 0;
        grid-template-columns: 34px minmax(0, 1fr);
        column-gap: 11px;
        padding: 12px;
        border-radius: 16px;
    }
    .availability-guide-card span {
        width: 34px;
        height: 34px;
        border-radius: 12px;
    }
    .availability-guide-card strong {
        font-size: 13.5px;
    }
    .availability-guide-card small {
        font-size: 12px;
        line-height: 1.32;
    }
    .availability-page-shell .card-solid {
        padding: 16px !important;
        border-radius: 18px;
        overflow: hidden;
    }
    .availability-schedule-title {
        display: grid;
        gap: 8px;
    }
    .availability-schedule-title .serif {
        font-size: 22px !important;
        line-height: 1.08;
    }
    .availability-schedule-title span {
        width: max-content;
        max-width: 100%;
        min-height: 24px;
        font-size: 11px;
        padding: 4px 8px;
    }
    .availability-paint-toolbar {
        display: grid;
        grid-template-columns: 1fr;
        width: 100%;
        gap: 7px;
    }
    .availability-paint-toolbar button {
        min-width: 0;
        width: 100%;
        padding: 9px 10px;
        font-size: 12px;
    }
    .sched-scroll {
        margin: 0 -16px;
        padding: 0 16px 8px;
        border-radius: 0;
        max-width: calc(100% + 32px);
    }
    .sched-grid {
        min-width: 690px;
        border-radius: 14px;
    }
    .sched-header {
        padding: 10px 6px;
        font-size: 10px;
    }
    .sched-time {
        padding: 7px 6px;
    }
    .sched-cell {
        height: 34px;
    }
    .availability-public-link,
    .availability-public-link > div {
        min-width: 0;
        max-width: 100%;
    }
    .availability-public-link > div {
        font-size: 10.5px;
    }
    .availability-theme-options {
        display: grid;
        grid-template-columns: 1fr 1fr;
        width: 100%;
    }
    .availability-theme-options button {
        width: 100%;
    }
}

/* ===== PACIENTE detalle (página) ========================================== */

.paciente-detail-page {
    background:
        linear-gradient(180deg,
            color-mix(in srgb, var(--accent-soft) 14%, transparent) 0,
            transparent 300px);
}
.paciente-detail-shell {
    width: 100%;
    margin: 0 auto;
}
.paciente-premium-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 400px);
    gap: 24px;
    align-items: start;
}
.paciente-premium-main,
.paciente-premium-side {
    min-width: 0;
}
.paciente-premium-side {
    display: grid;
    gap: 20px;
}
.paciente-action-card {
    position: relative;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--accent) 52%, var(--line));
    border-radius: 20px;
    background:
        linear-gradient(180deg,
            color-mix(in srgb, white 10%, transparent) 0%,
            transparent 42%),
        linear-gradient(145deg,
            color-mix(in srgb, var(--accent) 82%, #17314a) 0%,
            color-mix(in srgb, var(--accent) 72%, var(--ink)) 100%);
    box-shadow:
        0 24px 58px -38px color-mix(in srgb, var(--accent) 80%, var(--ink)),
        inset 0 1px 0 color-mix(in srgb, white 24%, transparent);
}
.paciente-hero {
    position: relative;
    overflow: hidden;
    border-color: color-mix(in srgb, var(--ink) 12%, var(--line));
    background: var(--surface);
    box-shadow: 0 18px 56px -48px color-mix(in srgb, var(--ink) 45%, transparent);
}
.paciente-command {
    padding: 0 !important;
}
.paciente-crumb-link { color: var(--ink-2); }
.paciente-crumb-link:hover { color: var(--ink); }
.paciente-command-main {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 18px;
    align-items: center;
    padding: 48px 44px 46px;
}
.paciente-command-main .av-lg {
    width: 64px;
    height: 64px;
    font-size: 20px;
}
.paciente-identity h1 {
    max-width: 100%;
    overflow-wrap: anywhere;
    font-family: 'Inter', sans-serif !important;
    font-size: 22px !important;
    letter-spacing: 0 !important;
    font-weight: 800 !important;
}
.paciente-identity > .flex:first-child {
    gap: 8px !important;
    margin-bottom: 7px !important;
}
.paciente-identity .pill {
    padding: 3px 9px;
    font-size: 11.5px;
    line-height: 1.2;
}
.paciente-meta-line {
    max-width: 620px;
    line-height: 1.32;
    font-size: 13.5px !important;
    margin-bottom: 11px !important;
    color: color-mix(in srgb, var(--ink) 86%, var(--muted)) !important;
}
.paciente-identity .info-line {
    gap: 5px;
    font-size: 12.5px;
    line-height: 1.25;
}
.paciente-identity .info-line svg {
    width: 12px;
    height: 12px;
}
.paciente-contact-row {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    color: var(--ink-2);
    font-size: 13px;
}
.paciente-hero-actions {
    display: grid;
    gap: 7px;
}
.patient-primary-command,
.patient-secondary-action {
    box-sizing: border-box;
    min-width: 0;
    display: grid;
    align-items: center;
    text-decoration: none;
    text-align: left;
    cursor: pointer;
    font: inherit;
    transition: border-color .16s ease, background .16s ease, transform .16s ease, box-shadow .16s ease;
}
.patient-primary-command {
    min-height: 58px;
    grid-template-columns: 32px minmax(0, 1fr) auto;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid color-mix(in srgb, var(--accent) 78%, var(--ink));
    background: var(--accent);
    color: white;
    box-shadow: none;
}
.patient-primary-command-large {
    min-height: 198px;
    align-content: start;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    gap: 16px;
    padding: 34px 28px 28px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}
.patient-primary-command-large .patient-primary-icon {
    width: 44px;
    height: 44px;
    border-radius: 13px;
}
.patient-primary-command-large small {
    display: block;
    margin: 0 0 8px;
    color: color-mix(in srgb, white 74%, transparent);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .08em;
    line-height: 1.1;
    text-transform: uppercase;
}
.patient-primary-command-large strong {
    font-family: 'Inter', sans-serif;
    font-size: 23px;
    font-weight: 850;
    line-height: 1.08;
    max-width: 280px;
}
.patient-primary-command-large em {
    display: block;
    margin-top: 10px;
    color: color-mix(in srgb, white 78%, transparent);
    font-style: normal;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.35;
    max-width: 300px;
}
.patient-primary-command:hover {
    background: var(--accent-hover);
    box-shadow: 0 18px 44px -32px color-mix(in srgb, var(--accent) 80%, transparent);
}
.paciente-action-card .patient-primary-command:hover {
    background: color-mix(in srgb, white 4%, transparent);
    box-shadow: none;
}
.patient-primary-command:active,
.patient-secondary-action:active {
    transform: translateY(1px);
}
.patient-primary-command strong,
.patient-secondary-action strong {
    display: block;
    line-height: 1.15;
}
.patient-primary-command strong {
    color: white;
    font-size: 14.5px;
    font-weight: 800;
}
.patient-primary-command small {
    display: block;
    margin-top: 3px;
    color: color-mix(in srgb, white 84%, transparent);
    font-size: 11.5px;
    line-height: 1.32;
    font-weight: 700;
    overflow-wrap: anywhere;
}
.patient-primary-icon {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: color-mix(in srgb, white 20%, transparent);
    color: white;
}
.patient-command-arrow {
    color: color-mix(in srgb, white 86%, transparent);
}
.patient-secondary-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}
.paciente-action-card .patient-secondary-actions {
    padding: 16px 20px 20px;
    border-top: 1px solid color-mix(in srgb, white 18%, transparent);
    background: color-mix(in srgb, var(--ink) 10%, transparent);
}
.patient-secondary-action {
    min-height: 46px;
    grid-template-columns: 24px minmax(0, 1fr);
    justify-items: start;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 11px;
    border: 1px solid color-mix(in srgb, var(--ink) 12%, var(--line));
    background: var(--surface);
    color: var(--ink);
    text-align: left;
}
.paciente-premium-side > .patient-secondary-actions .patient-secondary-action {
    min-height: 50px;
    grid-template-columns: 28px minmax(0, 1fr);
    justify-items: center;
    padding: 9px 12px;
    background: color-mix(in srgb, var(--surface) 92%, var(--accent-soft));
}
.paciente-premium-side > .patient-secondary-actions .patient-secondary-action strong {
    justify-self: start;
}
.paciente-action-card .patient-secondary-action {
    min-height: 48px;
    grid-template-columns: 28px minmax(0, 1fr);
    justify-content: center;
    justify-items: start;
    border: 1px solid color-mix(in srgb, white 14%, transparent);
    background: color-mix(in srgb, white 12%, transparent);
    color: white;
}
.paciente-action-card .patient-secondary-action:hover {
    border-color: color-mix(in srgb, white 24%, transparent);
    background: color-mix(in srgb, white 18%, transparent);
    color: white;
    box-shadow: none;
}
.paciente-action-card .patient-action-icon {
    background: color-mix(in srgb, white 14%, transparent);
    color: white;
}
.paciente-action-card .patient-action-whatsapp svg {
    color: white !important;
}
.patient-secondary-action:hover {
    border-color: color-mix(in srgb, var(--accent) 30%, var(--line));
    background: color-mix(in srgb, var(--accent-soft) 14%, var(--surface));
    box-shadow: 0 16px 42px -36px color-mix(in srgb, var(--ink) 45%, transparent);
}
.patient-secondary-action strong {
    font-size: 12.5px;
    font-weight: 800;
    white-space: normal;
}
.patient-secondary-action small {
    display: none;
    margin-top: 3px;
    color: var(--muted);
    font-size: 11px;
    line-height: 1.25;
    font-weight: 600;
}
.patient-action-icon {
    width: 24px;
    height: 24px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    background: var(--surface-2);
    color: var(--accent);
}
.patient-action-whatsapp {
    background: color-mix(in srgb, var(--whatsapp) 12%, var(--surface));
}
.paciente-next-band {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    padding: 20px 36px;
    border-top: 1px solid color-mix(in srgb, var(--warm) 16%, var(--line));
    background: linear-gradient(90deg,
        color-mix(in srgb, var(--warm) 13%, var(--surface)) 0%,
        color-mix(in srgb, var(--warm) 6%, var(--surface)) 100%);
    color: var(--ink);
    text-decoration: none;
}
.paciente-next-band:hover {
    background: color-mix(in srgb, var(--warm) 14%, var(--surface));
}
.paciente-next-band-icon {
    width: 40px;
    height: 40px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    color: color-mix(in srgb, var(--warm) 68%, var(--ink));
    background: color-mix(in srgb, var(--warm) 16%, var(--surface));
}
.paciente-next-band-copy {
    min-width: 0;
    display: grid;
    gap: 4px;
}
.paciente-next-band-copy small {
    color: color-mix(in srgb, var(--ink) 78%, var(--warm));
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
    line-height: 1.1;
    text-transform: uppercase;
}
.paciente-next-band-copy strong {
    color: var(--ink);
    font-size: 16px;
    font-weight: 800;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.paciente-next-band-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 12px;
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--ink);
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    box-shadow: 0 12px 34px -30px color-mix(in srgb, var(--warm) 80%, var(--ink));
}
.patient-primary-command:focus-visible,
.patient-secondary-action:focus-visible,
.paciente-next-cta:focus-visible,
.paciente-next-band:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--accent) 30%, transparent);
    outline-offset: 3px;
}
.paciente-next-strip {
    box-sizing: border-box;
    margin-top: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 24px;
    border: 0;
    border-radius: 11px;
    background: color-mix(in srgb, var(--warm-soft) 32%, var(--surface));
}
.paciente-next-strip-link {
    color: inherit;
    text-decoration: none;
    transition: border-color .16s ease, background .16s ease, box-shadow .16s ease, transform .16s ease;
}
.paciente-next-strip-link:hover {
    border-color: color-mix(in srgb, var(--accent) 28%, var(--line));
    background: color-mix(in srgb, var(--accent-soft) 42%, var(--surface));
    box-shadow: 0 16px 44px -36px color-mix(in srgb, var(--accent) 72%, transparent);
}
.paciente-next-strip-link:active {
    transform: translateY(1px);
}
.paciente-next-copy {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.paciente-next-copy span {
    color: color-mix(in srgb, var(--ink) 58%, var(--muted));
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.paciente-next-copy strong {
    color: var(--ink);
    font-size: 13.5px;
    line-height: 1.15;
}
.paciente-next-copy small {
    color: var(--ink);
    font-size: 13.5px;
    line-height: 1.15;
}
.paciente-next-link {
    min-height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 5px 10px;
    border-radius: 10px;
    background: var(--surface);
    border: 1px solid color-mix(in srgb, var(--ink) 12%, var(--line));
    color: #165CA1;
    font-size: 12.5px;
    font-weight: 800;
    white-space: nowrap;
}
.paciente-next-cta {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 9px 13px;
    border-radius: 12px;
    background: var(--surface);
    border: 1px solid color-mix(in srgb, var(--accent) 20%, var(--line));
    color: var(--accent);
    font-size: 12.5px;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
}

/* Stats */
.paciente-kpi-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 12px;
    margin: 18px 0 0;
}
.paciente-detail-grid-wide .paciente-main-column {
    grid-column: 1 / -1;
}
.paciente-kpi-card {
    min-width: 0;
    border-color: color-mix(in srgb, var(--accent) 10%, var(--line));
    box-shadow: 0 18px 48px -42px color-mix(in srgb, var(--ink) 58%, transparent);
}
.stat-valor {
    font-weight: 600; line-height: 1; color: var(--ink);
    font-size: 26px;
}
.stat-valor.stat-fecha  { font-size: 18px; line-height: 1.1; }
.stat-valor.stat-accent { color: var(--accent); }
.stat-valor.stat-ok    { color: var(--ok); }
.stat-valor.stat-warm  { color: var(--warm); }
.stat-valor.stat-rose  { color: var(--rose); }
.stat-valor.stat-muted { color: var(--muted); }
.stat-fix { font-size: 14px; color: var(--muted); margin-right: 1px; }
.detalle-rose { color: var(--rose); font-weight: 500; }
.detalle-warm { color: var(--warm); font-weight: 500; }
.detalle-ok   { color: var(--ok);   font-weight: 500; }
.stat-detalle    { color: var(--ink-2); }
.stat-detalle-ok { color: var(--ok); font-weight: 500; }

/* Tabs */
.tabs {
    display: flex; gap: 4px;
    border-bottom: 1px solid var(--line);
    margin-bottom: 24px;
}
.paciente-tabs {
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
}
.paciente-tabs::-webkit-scrollbar { display: none; }
.tab {
    background: none; border: 0;
    padding: 10px 16px; font-size: 14px; font-weight: 500;
    color: var(--muted); cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    display: inline-flex; align-items: center; gap: 6px;
    transition: color .15s ease, border-color .15s ease;
}
.tab:hover { color: var(--ink); }
.tab.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }
.tab-counter {
    font-size: 11px; padding: 1px 7px; border-radius: 999px;
    background: var(--accent-soft); color: var(--accent); font-weight: 600;
}

/* Sticky note (notas para próxima sesión) */
.sticky-note {
    background: linear-gradient(135deg, color-mix(in srgb, var(--warm-soft) 80%, transparent) 0%, var(--surface) 100%);
    border: 1px solid color-mix(in srgb, var(--warm) 25%, transparent);
    border-left: 3px solid var(--warm);
    border-radius: 12px;
    padding: 18px 20px;
}

/* Sessions timeline */
.session-history-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 16px;
}
.session-filter-bar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 7px;
    flex-wrap: wrap;
}
.session-filter-bar button {
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px 11px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface);
    color: var(--ink-2);
    font: inherit;
    font-size: 12px;
    font-weight: 750;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.session-filter-bar button:hover {
    border-color: color-mix(in srgb, var(--accent) 28%, var(--line));
    background: color-mix(in srgb, var(--accent-soft) 30%, var(--surface));
}
.session-filter-bar button.active {
    border-color: color-mix(in srgb, var(--accent) 34%, var(--line));
    background: var(--accent-soft);
    color: var(--accent);
}
.session-item {
    background: var(--surface);
    border: 1px solid var(--line-soft);
    border-radius: 12px;
    padding: 18px;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.session-item:hover { border-color: color-mix(in srgb, var(--accent) 30%, var(--line)); }
.session-item[hidden] { display: none; }
.session-item.expanded {
    border-color: color-mix(in srgb, var(--accent) 35%, var(--line));
    box-shadow: 0 8px 24px -10px color-mix(in srgb, var(--ink) 15%, transparent);
}
.session-item.first-consult { border-color: color-mix(in srgb, var(--warm) 30%, var(--line)); }
.session-num {
    width: 38px; height: 38px; border-radius: 50%;
    background: var(--accent-soft); color: var(--accent);
    display: flex; align-items: center; justify-content: center;
    font-family: 'Fraunces', serif; font-weight: 600; font-size: 16px;
    flex-shrink: 0;
}
.session-num.first { background: var(--warm-soft); color: var(--warm); }
.session-filter-empty {
    display: grid;
    place-items: center;
    gap: 5px;
    padding: 28px 18px;
    border: 1px dashed color-mix(in srgb, var(--accent) 24%, var(--line));
    border-radius: 16px;
    background: color-mix(in srgb, var(--accent-soft) 18%, var(--surface));
    text-align: center;
}
.session-filter-empty[hidden] { display: none; }
.session-filter-empty strong {
    color: var(--ink);
    font-size: 14px;
}
.session-filter-empty span {
    color: var(--muted);
    font-size: 12.5px;
}

.notas-clinicas {
    background: var(--surface-2);
    border: 1px solid var(--line-soft);
}
.notas-titulo {
    color: var(--accent); letter-spacing: 0.1em; text-transform: uppercase;
}
.motivo-consulta {
    background: var(--warm-soft);
    border: 1px solid color-mix(in srgb, var(--warm) 25%, transparent);
}
.motivo-titulo {
    color: var(--warm); letter-spacing: 0.1em; text-transform: uppercase;
}

/* Pago pills (Yape / Plin) */
.pago-pill { font-size: 11.5px; }
.pago-pill .pago-dot {
    width: 6px; height: 6px; border-radius: 50%; display: inline-block;
}
.pago-pill-yape       { background: color-mix(in srgb, var(--yape) 12%, transparent); color: var(--yape); border-color: color-mix(in srgb, var(--yape) 25%, transparent); }
.pago-pill-yape .pago-dot { background: var(--yape); }
.pago-pill-plin       { background: color-mix(in srgb, var(--plin) 12%, transparent); color: var(--plin); border-color: color-mix(in srgb, var(--plin) 25%, transparent); }
.pago-pill-plin .pago-dot { background: var(--plin); }
.pago-pill-efectivo   { background: var(--ok-soft); color: var(--ok); border-color: color-mix(in srgb, var(--ok) 25%, transparent); }
.pago-pill-efectivo .pago-dot { background: var(--ok); }
.pago-pill-transferencia { background: var(--accent-soft); color: var(--accent); border-color: color-mix(in srgb, var(--accent) 25%, transparent); }
.pago-pill-transferencia .pago-dot { background: var(--accent); }
.pago-pill-pendiente  { background: var(--warn-soft); color: var(--warn); border-color: color-mix(in srgb, var(--warn) 25%, transparent); }
.pago-pill-pendiente .pago-dot { background: var(--warn); }
.pago-pill-pagado     { background: var(--ok-soft); color: var(--ok); border-color: color-mix(in srgb, var(--ok) 25%, transparent); }
.pago-pill-pagado .pago-dot { background: var(--ok); }

/* Lista de pagos del tab "Pagos" */
.pago-row {
    display: flex; align-items: center; gap: 14px;
    padding: 14px 18px;
}
.pago-row + .pago-row { margin-top: 0; }

.link-accent { color: var(--accent); font-size: 12px; font-weight: 500; background: none; border: 0; cursor: pointer; padding: 0; }
.link-accent:hover { text-decoration: underline; }

.btn-ghost-sm { padding: 6px 12px; font-size: 12px; }

.home-confirmations {
    margin: -10px 0 24px;
}
.home-confirmations-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 10px;
}
.home-confirmations-head h2 {
    margin: 0;
    color: var(--ink);
    font-size: 24px;
    line-height: 1.08;
    font-weight: 650;
}
.home-confirmations-head h2 span {
    margin-left: 6px;
    color: var(--muted);
    font-family: var(--font-sans);
    font-size: 15px;
    font-weight: 700;
}
.home-confirm-all {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 16px;
    border: 1px solid color-mix(in srgb, var(--ink) 18%, var(--line));
    border-radius: 12px;
    background: var(--surface);
    color: var(--ink);
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
}
.home-confirm-card {
    --home-confirm-columns: 44px minmax(220px, 1.18fr) minmax(176px, .76fr) minmax(112px, .48fr) minmax(130px, .54fr) 140px;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--ink) 14%, var(--line));
    border-radius: 16px;
    background: var(--surface);
    box-shadow: 0 20px 56px -46px color-mix(in srgb, var(--ink) 58%, transparent);
}
.home-confirm-table-head {
    display: grid;
    grid-template-columns: var(--home-confirm-columns);
    align-items: center;
    gap: 14px;
    min-height: 48px;
    padding: 0 18px;
    border-bottom: 1px solid var(--line-soft);
    background: color-mix(in srgb, var(--accent-soft) 42%, var(--surface));
    color: var(--muted);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.home-confirm-table-head span:last-child {
    text-align: right;
}
.home-confirm-row {
    min-height: 74px;
    display: grid;
    grid-template-columns: var(--home-confirm-columns);
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    color: var(--ink);
    text-decoration: none;
}
.home-confirm-row + .home-confirm-row {
    border-top: 1px solid var(--line-soft);
}
.home-confirm-person {
    min-width: 0;
    display: grid;
    gap: 3px;
}
.home-confirm-person strong {
    min-width: 0;
    overflow: hidden;
    color: var(--ink);
    font-size: 16px;
    line-height: 1.1;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.home-confirm-person small {
    overflow: hidden;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.home-confirm-date {
    min-width: 0;
    display: grid;
    gap: 3px;
}
.home-confirm-date strong {
    overflow: hidden;
    color: var(--ink-2);
    font-size: 13px;
    line-height: 1.15;
    font-weight: 820;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.home-confirm-date small {
    color: var(--muted);
    font-size: 11.5px;
    line-height: 1.15;
}
.home-confirm-origin {
    justify-self: start;
    padding: 3px 8px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--surface-2) 86%, var(--surface));
    color: var(--ink-2);
    font-size: 11px;
    font-weight: 820;
    white-space: nowrap;
}
.home-confirm-modality {
    justify-self: start;
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0 10px;
    border: 1px solid color-mix(in srgb, var(--ink) 10%, var(--line));
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--ink-2);
    font-size: 11.5px;
    font-weight: 850;
    line-height: 1;
    white-space: nowrap;
}
.home-confirm-modality.is-virtual {
    border-color: color-mix(in srgb, var(--accent) 20%, var(--line));
    background: color-mix(in srgb, var(--accent-soft) 72%, var(--surface));
    color: var(--accent);
}
.home-confirm-modality.is-presencial {
    border-color: color-mix(in srgb, var(--warm) 18%, var(--line));
    background: color-mix(in srgb, var(--warm-soft) 72%, var(--surface));
    color: var(--warm);
}
.home-confirm-modality.is-hibrida {
    border-color: color-mix(in srgb, var(--ok) 18%, var(--line));
    background: color-mix(in srgb, var(--ok-soft) 70%, var(--surface));
    color: var(--ok);
}
.home-confirm-when {
    color: var(--muted);
    font-size: 13px;
    font-weight: 760;
    white-space: nowrap;
}
.home-confirm-action {
    justify-self: end;
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 15px;
    border: 1px solid color-mix(in srgb, var(--accent) 52%, var(--line));
    border-radius: 12px;
    background: var(--surface);
    color: var(--accent);
    font-size: 13px;
    font-weight: 850;
    white-space: nowrap;
    transition: background .16s ease, border-color .16s ease, transform .16s ease;
}
.home-confirm-row:hover .home-confirm-action {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent-soft) 42%, var(--surface));
    transform: translateY(-1px);
}
.home-attention-action {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 28px;
    padding: 0 9px;
    border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line));
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent-soft) 34%, var(--surface));
    color: var(--accent);
    font-size: 11.5px;
    font-weight: 800;
    text-decoration: none;
}
.home-attention-action:hover {
    border-color: color-mix(in srgb, var(--accent) 38%, var(--line));
    background: color-mix(in srgb, var(--accent-soft) 58%, var(--surface));
}

/* Icon-only botón circular gris */
.icon-btn {
    width: 36px; height: 36px; border-radius: 8px;
    border: 1px solid var(--line); background: var(--surface);
    display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
    color: var(--ink-2);
    transition: background .15s ease;
}
.icon-btn:hover { background: var(--surface-2); }

/* Próxima cita card */
.proxima-card {
    border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--line));
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent-soft) 50%, var(--surface)) 0%, var(--surface) 100%);
}
.proxima-btn-primary {
    text-align: center;
    padding: 8px 12px; border-radius: 8px;
    background: var(--accent); color: white;
    font-size: 12.5px; font-weight: 500; text-decoration: none;
    transition: background .15s ease;
}
.proxima-btn-primary:hover { background: var(--accent-hover); }
.proxima-btn-icon {
    padding: 8px 12px; border-radius: 8px;
    background: var(--surface-2); color: var(--ink-2);
    border: 0; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background .15s ease;
}
.proxima-btn-icon:hover { background: color-mix(in srgb, var(--surface-2) 70%, var(--accent-soft)); }

/* Encuadre dl */
.paciente-side-card {
    border-color: color-mix(in srgb, var(--ink) 10%, var(--line));
    border-radius: 18px;
    background:
        linear-gradient(180deg,
            color-mix(in srgb, var(--surface) 96%, var(--accent-soft)) 0%,
            var(--surface) 100%);
    box-shadow: 0 18px 52px -44px color-mix(in srgb, var(--ink) 48%, transparent);
}
.encuadre-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    font-size: 13px;
}
.encuadre-list > div {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    padding: 11px 0;
    border-top: 1px solid color-mix(in srgb, var(--line) 74%, transparent);
}
.encuadre-list > div:first-child {
    border-top: 0;
    padding-top: 0;
}
.encuadre-list > div:last-child {
    padding-bottom: 0;
}
.encuadre-list dt {
    color: var(--muted);
    font-weight: 650;
}
.encuadre-list dd {
    max-width: 58%;
    color: var(--ink);
    font-weight: 800;
    text-align: right;
    overflow-wrap: anywhere;
}

/* Acciones list */
.acciones-list { display: flex; flex-direction: column; gap: 4px; }
.accion-item {
    width: 100%; text-align: left;
    display: flex; align-items: center; gap: 12px;
    padding: 10px 12px; border-radius: 8px;
    background: none; border: 0; cursor: pointer;
    color: var(--ink-2); font-size: 13px;
    transition: background .15s ease;
}
.accion-item:hover { background: var(--surface-2); }
.accion-ok   { color: var(--ok); }
.accion-rose { color: var(--rose); }
.acciones-sep { border: 0; border-top: 1px solid var(--line-soft); margin: 6px 0; }

@media (max-width: 1100px) {
    .paciente-premium-grid {
        grid-template-columns: 1fr;
    }
    .paciente-premium-side {
        grid-template-columns: minmax(0, 1fr);
    }
    .patient-primary-command-large {
        min-height: 160px;
    }
    .paciente-command-main {
        grid-template-columns: auto minmax(0, 1fr);
    }
    .paciente-hero-actions {
        grid-column: 1 / -1;
        grid-template-columns: minmax(0, 1fr);
    }
    .patient-secondary-actions {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 860px) {
    .paciente-detail-shell {
        padding: 14px 14px 92px !important;
    }
    .paciente-detail-shell > .flex:first-child {
        margin-bottom: 12px !important;
        font-size: 12px;
    }
    .paciente-command {
        padding: 0 !important;
        border-radius: 22px;
    }
    .paciente-command-main {
        grid-template-columns: 54px minmax(0, 1fr);
        gap: 14px;
        padding: 18px;
    }
    .paciente-command-main .av-lg {
        width: 54px;
        height: 54px;
        font-size: 18px;
    }
    .paciente-identity h1 {
        font-size: 24px !important;
        line-height: 1.04 !important;
    }
    .paciente-meta-line {
        margin-bottom: 12px !important;
        font-size: 13px !important;
    }
    .paciente-identity .info-line {
        max-width: 100%;
    }
    .paciente-hero-actions {
        grid-column: 1 / -1;
        gap: 8px;
    }
    .paciente-next-band {
        grid-template-columns: 36px minmax(0, 1fr);
        padding: 14px 18px;
    }
    .paciente-next-band-icon {
        width: 36px;
        height: 36px;
        border-radius: 12px;
    }
    .paciente-next-band-cta {
        grid-column: 2;
        justify-self: start;
        margin-top: 6px;
        padding: 8px 12px;
    }
    .patient-primary-command-large {
        min-height: 148px;
        padding: 22px;
        border-radius: 18px;
    }
    .patient-primary-command-large strong {
        font-size: 19px;
    }
    .patient-primary-command {
        min-height: 66px;
        grid-template-columns: 40px minmax(0, 1fr) auto;
        gap: 11px;
        padding: 12px;
        border-radius: 17px;
    }
    .patient-primary-icon {
        width: 40px;
        height: 40px;
        border-radius: 13px;
    }
    .patient-primary-command strong {
        font-size: 14px;
    }
    .patient-primary-command small {
        font-size: 11.5px;
    }
    .patient-action-icon {
        width: 34px;
        height: 34px;
        border-radius: 12px;
    }
    .patient-secondary-action strong {
        font-size: 13px;
    }
    .patient-secondary-action small {
        display: block;
        font-size: 11px;
    }
    .patient-secondary-action {
        min-height: 58px;
        grid-template-columns: 34px minmax(0, 1fr);
        justify-items: start;
        text-align: left;
    }
    .paciente-action-card .patient-primary-command-large {
        min-height: 150px;
        grid-template-columns: 40px minmax(0, 1fr) auto;
        padding: 24px 20px 22px;
        border: 0;
        border-radius: 0;
        background: transparent;
    }
    .paciente-action-card .patient-secondary-actions {
        padding: 12px;
        gap: 8px;
    }
    .paciente-action-card .patient-secondary-action {
        min-height: 44px;
        grid-template-columns: 24px minmax(0, auto);
        padding: 8px 10px;
        text-align: left;
    }
    .paciente-next-copy {
        display: grid;
        gap: 2px;
    }
    .paciente-next-copy span {
        font-size: 10.5px;
    }
    .paciente-next-copy strong,
    .paciente-next-copy small {
        font-size: 14px;
    }
    .paciente-next-strip {
        margin-top: 16px;
        padding: 12px;
        border-radius: 16px;
    }
    .paciente-next-cta {
        padding: 9px 11px;
    }
    .paciente-kpi-strip {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        margin: 14px 0 22px;
        padding: 0;
        overflow: visible;
        scroll-snap-type: none;
    }
    .paciente-kpi-strip::-webkit-scrollbar {
        display: none;
    }
    .paciente-kpi-card {
        padding: 14px !important;
    }
    .stat-valor {
        font-size: 24px;
    }
    .stat-valor.stat-fecha {
        font-size: 16px;
    }
    .paciente-detail-grid {
        display: flex !important;
        flex-direction: column;
        gap: 18px;
    }
    .paciente-detail-grid > aside {
        order: -1;
    }
    .proxima-card {
        display: none;
    }
    .paciente-tabs {
        position: sticky;
        top: 0;
        z-index: 12;
        margin: 0 -14px 18px;
        padding: 8px 14px;
        border-bottom: 0;
        background: color-mix(in srgb, var(--bg) 92%, transparent);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
    }
    .paciente-tabs .tab {
        flex: 0 0 auto;
        min-height: 38px;
        margin-bottom: 0;
        padding: 8px 12px;
        border: 1px solid var(--line);
        border-radius: 999px;
        background: var(--surface);
        font-size: 12.5px;
    }
    .paciente-tabs .tab.active {
        color: white;
        border-color: var(--accent);
        background: var(--accent);
    }
    .paciente-tabs .tab.active .tab-counter {
        background: color-mix(in srgb, white 20%, transparent);
        color: white;
    }
    .session-history-head {
        align-items: flex-start;
        flex-direction: column;
        gap: 12px;
    }
    .session-filter-bar {
        width: 100%;
        flex-wrap: nowrap;
        justify-content: flex-start;
        overflow-x: auto;
        padding-bottom: 2px;
        scrollbar-width: none;
    }
    .session-filter-bar::-webkit-scrollbar {
        display: none;
    }
    .session-filter-bar button {
        flex: 0 0 auto;
    }
    .session-item {
        padding: 14px;
        border-radius: 16px;
    }
    .session-item > .flex {
        gap: 12px !important;
    }
    .session-num {
        width: 34px;
        height: 34px;
        font-size: 14px;
    }
    .pago-row {
        align-items: flex-start;
        flex-wrap: wrap;
        gap: 10px;
        padding: 14px;
        border-radius: 16px;
    }
    .pago-row > button {
        width: 100%;
        justify-content: center;
    }
    .paciente-detail-page [data-tab-content="datos"] dl {
        grid-template-columns: 1fr !important;
    }
    .encuadre-list > div {
        gap: 12px;
    }
    #formAtender .grid {
        grid-template-columns: 1fr !important;
    }
    #formAtender .field-wrap[style] {
        max-width: none !important;
    }
    #formAtender .pay-chip {
        min-height: 40px;
        flex: 1 1 calc(50% - 6px);
        justify-content: center;
    }
    .paciente-detail-page .modal-backdrop {
        align-items: flex-end;
        justify-content: stretch;
        padding: 0;
    }
    .paciente-detail-page .modal-card {
        max-width: none;
        max-height: 88svh;
        border-radius: 24px 24px 0 0;
        border-bottom: 0;
        box-shadow: 0 -24px 60px -34px color-mix(in srgb, var(--ink) 70%, transparent);
        animation: pacienteSheetUp .2s ease;
    }
    .paciente-detail-page .modal-head {
        padding: 18px 18px 12px;
    }
    .paciente-detail-page .modal-body {
        padding: 16px 18px;
    }
    .paciente-detail-page .modal-foot {
        position: sticky;
        bottom: 0;
        padding: 12px 18px calc(12px + env(safe-area-inset-bottom));
        background: color-mix(in srgb, var(--surface) 94%, transparent);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
    }
    .paciente-detail-page .modal-foot .btn-primary,
    .paciente-detail-page .modal-foot .btn-ghost {
        min-height: 48px;
    }
}

@media (max-width: 430px) {
    .patient-secondary-actions {
        grid-template-columns: 1fr;
    }
    .paciente-action-card .patient-secondary-actions {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .patient-secondary-action {
        min-height: 58px;
        grid-template-columns: 34px minmax(0, 1fr);
        justify-items: start;
        text-align: left;
    }
    .patient-secondary-action small {
        display: block;
    }
    .paciente-action-card .patient-secondary-action {
        min-height: 42px;
        grid-template-columns: 1fr;
        justify-items: center;
        gap: 4px;
        padding: 8px 6px;
        text-align: center;
    }
    .paciente-action-card .patient-secondary-action strong {
        font-size: 11.5px;
    }
    .paciente-action-card .patient-action-icon {
        width: 22px;
        height: 22px;
    }
    .paciente-next-strip {
        align-items: stretch;
        flex-direction: column;
    }
    .paciente-next-link {
        width: 100%;
    }
    .post-create-layer {
        padding: 12px;
    }
    .post-create-sheet {
        width: calc(100vw - 24px);
        max-height: calc(100svh - 24px);
        border-radius: 20px;
    }
    .paciente-next-cta {
        width: 100%;
    }
    .paciente-detail-page .modal-foot {
        flex-direction: column-reverse;
    }
    .paciente-detail-page .modal-foot .btn-primary,
    .paciente-detail-page .modal-foot .btn-ghost {
        width: 100%;
        justify-content: center;
    }
}

@keyframes pacienteSheetUp {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ===== DASHBOARD (inicio) ================================================== */

/* Hero · proxima sesion */
.home-page {
    width: 100%;
}
.home-hero-summary {
    max-width: 560px;
    color: var(--ink-2);
    font-size: 15px;
    line-height: 1.45;
}
.home-hero-summary p {
    margin: 0;
}
.home-hero-summary p + p {
    margin-top: 2px;
}
.home-hero-summary strong {
    color: var(--ink);
    font-weight: 850;
}
.home-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 22px;
    max-width: 680px;
}
.home-hero-action {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 15px;
    border: 1px solid color-mix(in srgb, var(--accent) 38%, var(--line));
    border-radius: 10px;
    background: color-mix(in srgb, var(--surface) 90%, var(--accent-soft));
    color: var(--accent);
    font-size: 12.5px;
    font-weight: 800;
    text-decoration: none;
    box-shadow: 0 10px 24px -22px color-mix(in srgb, var(--ink) 46%, transparent);
    transition: transform .15s ease, border-color .15s ease, background .15s ease, color .15s ease;
}
.home-hero-action svg {
    flex: 0 0 auto;
    color: currentColor;
}
.home-hero-action span {
    min-width: 0;
}
.home-hero-action:hover {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--accent) 52%, var(--line));
    background: color-mix(in srgb, var(--accent-soft) 62%, var(--surface));
    color: var(--accent);
}
.home-hero-action strong {
    min-width: 22px;
    height: 22px;
    display: inline-grid;
    place-items: center;
    border-radius: 999px;
    background: var(--surface);
    color: currentColor;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11px;
}
.home-hero-action.is-priority {
    border-color: color-mix(in srgb, var(--accent) 38%, var(--line));
    background: color-mix(in srgb, var(--accent-soft) 62%, var(--surface));
    color: var(--accent);
}
.hero-next {
    border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line));
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--accent-soft) 50%, var(--surface)) 0%,
        var(--surface) 100%
    );
    position: relative;
    overflow: hidden;
}
.hero-next-blob {
    position: absolute; top: -40px; right: -40px;
    width: 160px; height: 160px; border-radius: 50%;
    background: radial-gradient(
        circle,
        color-mix(in srgb, var(--accent) 18%, transparent) 0%,
        transparent 70%
    );
    pointer-events: none;
}
.hero-next .btn-ghost-icon { padding: 8px 11px; gap: 0; }

/* KPIs · tonos del detalle */
.kpi-detalle { font-weight: 600; }
.kpi-ok      { color: var(--ok); }
.kpi-warn    { color: var(--warn); }
.kpi-accent  { color: var(--accent); }

.kpi-cierre-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    padding: 5px 10px 5px 9px;
    border: 1px solid color-mix(in srgb, var(--warn) 36%, var(--line));
    border-radius: 999px;
    background: color-mix(in srgb, var(--warm-soft) 56%, var(--surface));
    color: color-mix(in srgb, var(--warn) 78%, var(--ink));
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    transition: background .15s ease, border-color .15s ease, transform .12s ease;
}
.kpi-cierre-pill:hover {
    border-color: color-mix(in srgb, var(--warn) 56%, var(--line));
    background: color-mix(in srgb, var(--warm-soft) 78%, var(--surface));
    transform: translateY(-1px);
}
.kpi-cierre-pill svg { color: var(--warn); flex: 0 0 13px; }
.kpi-cierre-pill strong { font-weight: 800; }
.kpi-cierre-pill span { font-weight: 600; opacity: .85; }

/* Eventos en agenda hoy */
.evento { transition: background .15s ease, border-color .15s ease; }
.home-agenda-card,
.home-attention-card {
    min-width: 0;
}
.home-agenda-head {
    gap: 16px;
}
.home-agenda-link {
    text-decoration: none;
}
.home-agenda-list {
    min-width: 0;
}
.home-agenda-row {
    min-width: 0;
}
.home-agenda-person {
    min-width: 0;
}
.evento-realizada { opacity: 0.55; }
.evento-realizada .evento-monto { color: var(--muted); font-weight: 500; }
.evento-realizada .mono:first-child { color: var(--muted); }

.evento-proxima {
    background: var(--accent-soft);
    border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
}
.evento-proxima .mono:first-child { color: var(--accent); font-weight: 700; }
.evento-proxima .evento-monto { color: var(--ink); font-weight: 700; }

.evento-esperando { cursor: pointer; }
.evento-esperando:hover { background: var(--surface-2); }
.evento-esperando .mono:first-child { color: var(--ink-2); }
.evento-esperando .evento-monto { color: var(--warn); font-weight: 700; }

.evento-pill { display: inline-flex; }

.dashed-cta {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    width: 100%; margin-top: 16px; padding: 12px;
    border: 1px dashed var(--line); border-radius: 12px;
    color: var(--ink-2); font-size: 13px; font-weight: 500;
    background: transparent; cursor: pointer; text-decoration: none;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.dashed-cta:hover {
    background: var(--surface-2);
    border-color: color-mix(in srgb, var(--accent) 35%, var(--line));
    color: var(--ink);
}

/* Necesitan atencion */
.atencion-item {
    display: flex; align-items: flex-start; gap: 12px;
}
.atencion-item-divider {
    padding-bottom: 12px;
    border-bottom: 1px solid var(--line-soft);
    margin-bottom: 0;
}
.atencion-msg-rose   { color: var(--rose); }
.atencion-msg-warn   { color: var(--warn); }
.atencion-msg-accent { color: var(--accent); }

/* Actividad reciente */
.actividad-list { display: flex; flex-direction: column; }
.actividad-item {
    display: flex; align-items: center; gap: 16px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--line-soft);
}
.actividad-item:last-child { border-bottom: none; }
.actividad-icon {
    width: 32px; height: 32px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    background: var(--surface-2); color: var(--ink-2);
}
.actividad-icon-yape,
.actividad-icon-plin     { background: var(--ok-soft); color: var(--ok); }
.actividad-icon-whatsapp { background: color-mix(in srgb, var(--whatsapp) 15%, transparent); color: var(--whatsapp); }
.actividad-icon-agenda   { background: var(--accent-soft); color: var(--accent); }
.actividad-item strong { color: var(--ink); font-weight: 600; }

/* ===== Modal genérico ==================================================== */
.modal-backdrop {
    position: fixed; inset: 0;
    background: color-mix(in srgb, var(--ink) 35%, transparent);
    backdrop-filter: blur(2px);
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
    z-index: 1000;
    animation: modalFadeIn .15s ease;
}
@keyframes modalFadeIn { from { opacity: 0; } to { opacity: 1; } }
.modal-card {
    background: var(--surface);
    border-radius: 14px;
    border: 1px solid var(--line);
    box-shadow: 0 20px 60px -10px color-mix(in srgb, var(--ink) 25%, transparent);
    width: 100%; max-width: 580px;
    max-height: 90vh;
    display: flex; flex-direction: column;
    animation: modalSlideUp .2s ease;
}
@keyframes modalSlideUp {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.modal-head {
    display: flex; align-items: flex-start; justify-content: space-between;
    padding: 20px 24px 14px;
    border-bottom: 1px solid var(--line-soft);
    gap: 16px;
}
.modal-close {
    background: transparent; border: 0; cursor: pointer;
    color: var(--muted); padding: 6px; border-radius: 6px;
    transition: background .15s ease, color .15s ease;
    display: inline-flex; align-items: center; justify-content: center;
}
.modal-close:hover { background: var(--surface-2); color: var(--ink); }
.modal-body {
    padding: 18px 24px;
    overflow-y: auto;
    flex: 1;
}
.modal-foot {
    display: flex; justify-content: flex-end; gap: 8px;
    padding: 14px 24px 18px;
    border-top: 1px solid var(--line-soft);
}
.modal-card:has(textarea[data-ai-kind]) {
    max-width: min(760px, calc(100vw - 32px));
    border-radius: 24px;
    border-color: color-mix(in srgb, var(--accent) 16%, var(--line));
    box-shadow: 0 34px 94px -48px color-mix(in srgb, var(--ink) 68%, transparent);
    overflow: hidden;
}
.modal-card:has(textarea[data-ai-kind]) .modal-head {
    padding: 26px 30px 18px;
    background:
        linear-gradient(180deg,
            color-mix(in srgb, var(--surface) 96%, white),
            color-mix(in srgb, var(--surface) 92%, var(--bg)));
}
.modal-card:has(textarea[data-ai-kind]) .modal-close {
    width: 48px;
    height: 48px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: color-mix(in srgb, var(--surface) 96%, white);
}
.modal-card:has(textarea[data-ai-kind]) .modal-body {
    padding: 24px 30px;
}
.modal-card:has(textarea[data-ai-kind]) .ai-magic-host > textarea {
    min-height: 170px;
    border-radius: 16px;
    border-color: color-mix(in srgb, var(--accent) 26%, var(--line));
    padding: 16px 18px 82px !important;
    line-height: 1.55;
    box-shadow: inset 0 1px 0 color-mix(in srgb, white 72%, transparent);
}
.modal-card:has(textarea[data-ai-kind]) .ai-text-tools {
    right: 16px;
    bottom: 16px;
}
.modal-card:has(textarea[data-ai-kind]) .modal-foot {
    padding: 18px 30px 22px;
    background: color-mix(in srgb, var(--surface) 92%, var(--bg));
}

/* ===== Mensajería ========================================================= */
.msg-header {
    padding-bottom: 0;
}
.msg-tabs {
    display: flex;
    gap: 4px;
    padding-top: 4px;
    overflow-x: auto;
    scrollbar-width: none;
}
.msg-tabs::-webkit-scrollbar { display: none; }
.msg-tab {
    min-height: 48px;
    padding: 0 16px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: var(--muted);
    font-size: 13.5px;
    font-weight: 650;
    cursor: pointer;
    white-space: nowrap;
}
.msg-tab:hover { color: var(--ink); }
.msg-tab.active {
    color: var(--accent);
    border-bottom-color: var(--accent);
}
.msg-tab .count {
    min-width: 22px;
    height: 22px;
    padding: 0 7px;
    border-radius: 999px;
    display: inline-grid;
    place-items: center;
    background: var(--surface-2);
    color: var(--muted);
    font-size: 11px;
}
.msg-tab.active .count {
    background: var(--accent-soft);
    color: var(--accent);
}
.msg-shell {
    padding: 24px 32px 38px;
    display: grid;
    grid-template-columns: minmax(230px, 280px) minmax(0, 1fr);
    gap: 22px;
}
.msg-side {
    display: grid;
    align-content: start;
    gap: 14px;
}
.msg-profile-card,
.msg-side-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 16px;
}
.msg-profile-card {
    display: flex;
    gap: 12px;
}
.msg-profile-card.has-error {
    border-color: color-mix(in srgb, var(--rose) 42%, var(--line));
    background: color-mix(in srgb, var(--rose) 8%, var(--surface));
}
.msg-profile-icon {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: var(--accent-soft);
    color: var(--accent);
    flex: 0 0 auto;
}
.msg-profile-card.has-error .msg-profile-icon {
    background: color-mix(in srgb, var(--rose) 14%, var(--surface));
    color: var(--rose);
}
.msg-profile-card strong,
.msg-side-card strong {
    display: block;
    color: var(--ink);
    font-size: 14px;
    line-height: 1.2;
}
.msg-profile-card span {
    display: block;
    margin-top: 4px;
    color: var(--ink-2);
    font-size: 13px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.msg-profile-card small,
.msg-side-card p {
    display: block;
    margin-top: 6px;
    color: var(--muted);
    font-size: 12.5px;
    line-height: 1.45;
}
.msg-side-label {
    display: inline-flex;
    margin-bottom: 8px;
    font-size: 10.5px;
    letter-spacing: .11em;
    text-transform: uppercase;
    font-weight: 800;
    color: var(--accent);
}
.msg-side-stats {
    display: grid;
    gap: 7px;
    margin-top: 14px;
}
.msg-side-stats span {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    font-size: 12.5px;
    color: var(--muted);
}
.msg-side-stats b {
    color: var(--ink);
    font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.msg-main {
    min-width: 0;
}
.msg-panel {
    display: none;
}
.msg-panel.active {
    display: block;
}
.msg-panel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}
.msg-panel-head h2 {
    margin: 0;
    font-size: 24px;
    font-weight: 650;
    color: var(--ink);
}
.msg-panel-head p {
    margin: 3px 0 0;
    font-size: 13px;
    color: var(--muted);
}
.msg-help-strip {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
    margin: 0 0 16px;
    padding: 12px 14px;
    border: 1px solid color-mix(in srgb, var(--accent) 16%, var(--line));
    border-radius: 12px;
    background:
        linear-gradient(135deg,
            color-mix(in srgb, var(--accent-soft) 26%, var(--surface)) 0%,
            var(--surface) 76%);
    color: var(--muted);
    font-size: 12.3px;
    box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 58%, transparent);
}
.msg-help-item {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 9px;
    color: var(--muted);
}
.msg-help-chip,
.msg-card-kind {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 23px;
    padding: 4px 8px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 850;
    letter-spacing: .06em;
    text-transform: uppercase;
    white-space: nowrap;
}
.msg-help-chip.is-action {
    background: color-mix(in srgb, var(--accent-soft) 76%, var(--surface));
    color: var(--accent);
}
.msg-help-chip.is-record {
    background: color-mix(in srgb, var(--ok-soft) 78%, var(--surface));
    color: color-mix(in srgb, var(--ok) 82%, var(--ink));
}
.msg-inline-help {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin: -2px 0 14px;
    padding: 10px 12px;
    border: 1px solid color-mix(in srgb, var(--accent) 14%, var(--line));
    border-radius: 10px;
    background: color-mix(in srgb, var(--accent-soft) 18%, var(--surface));
    color: var(--muted);
    font-size: 12.2px;
}
@media (max-width: 760px) {
    .msg-help-strip {
        grid-template-columns: 1fr;
    }
    .msg-help-item {
        align-items: flex-start;
        flex-direction: column;
        gap: 5px;
    }
}
.msg-inline-help strong {
    color: var(--accent);
    font-size: 11px;
    font-weight: 850;
    letter-spacing: .1em;
    text-transform: uppercase;
}
.msg-inline-help.is-history {
    border-color: color-mix(in srgb, var(--ok) 14%, var(--line));
    background: color-mix(in srgb, var(--ok-soft) 18%, var(--surface));
}
.msg-inline-help.is-history strong {
    color: color-mix(in srgb, var(--ok) 82%, var(--ink));
}
.msg-quick-search {
    width: min(360px, 100%);
    flex: 0 1 360px;
}
.msg-quick-search .pat-search-input {
    padding-right: 44px;
}
.msg-quick-search .pat-search-clear {
    right: 12px;
}
.msg-action-filters {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin: 14px 0;
}
.msg-action-filters button {
    min-height: 34px;
    padding: 0 13px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--ink-2);
    font-size: 12.2px;
    font-weight: 800;
    cursor: pointer;
    transition: border-color .16s ease, background .16s ease, color .16s ease;
}
.msg-action-filters button:hover {
    border-color: color-mix(in srgb, var(--accent) 28%, var(--line));
}
.msg-action-filters button.active {
    color: var(--accent);
    border-color: color-mix(in srgb, var(--accent) 32%, var(--line));
    background: color-mix(in srgb, var(--accent-soft) 62%, var(--surface));
}
.msg-queue,
.msg-history {
    border: 1px solid var(--line);
    border-radius: 18px;
    background: var(--surface);
    overflow: hidden;
    box-shadow: 0 26px 80px -64px color-mix(in srgb, var(--ink) 70%, transparent);
}
.msg-queue-row,
.msg-history-row {
    display: grid;
    align-items: center;
    gap: 14px;
    padding: 15px 18px;
    border-bottom: 1px solid var(--line-soft);
}
.msg-queue-row {
    grid-template-columns: minmax(260px, 1.15fr) minmax(270px, .95fr) minmax(280px, .9fr);
    min-height: 92px;
}
.msg-history-row {
    grid-template-columns: 36px 34px minmax(0, 1fr) auto 58px;
}
.msg-queue-row:last-child,
.msg-history-row:last-child { border-bottom: none; }
.msg-queue-row:hover,
.msg-history-row:hover {
    background: color-mix(in srgb, var(--accent-soft) 14%, var(--surface));
}
.msg-person {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}
.msg-person strong,
.msg-history-copy strong {
    display: block;
    min-width: 0;
    color: var(--ink);
    font-size: 14px;
    font-weight: 750;
}
.msg-person small,
.msg-history-copy small {
    display: block;
    margin-top: 3px;
    color: var(--muted);
    font-size: 12.5px;
    line-height: 1.35;
}
.msg-row-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 10px;
    padding: 3px 8px;
    border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--line));
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent-soft) 38%, var(--surface));
    color: color-mix(in srgb, var(--accent) 82%, var(--ink));
    font-size: 11.5px;
    font-weight: 850;
    text-decoration: none;
    white-space: nowrap;
    transition: border-color .16s ease, background .16s ease, transform .16s ease;
}
.msg-row-link:hover {
    border-color: color-mix(in srgb, var(--accent) 46%, var(--line));
    background: color-mix(in srgb, var(--accent-soft) 60%, var(--surface));
    transform: translateX(1px);
}
.msg-history-copy {
    min-width: 0;
}
.msg-history-copy em {
    color: var(--accent);
    font-style: normal;
    font-weight: 650;
}
/* ───── Row meta · refactor 2026-05-08 (UX) ─────────────────────────
   Antes mostraba 3 elementos diciendo casi lo mismo:
     · msg-situation (kicker en CAPS LOCK · "POR CONFIRMAR")
     · msg-tone pill ("Esperando" en gris)
     · msg-cita-state pill ("Esperando confirmación" en ámbar)
   Triple ruido. Ahora:
     · msg-situation se atenúa como sub-label normal-case (no kicker
       gritón) · sirve como categoría genérica de la fila.
     · msg-tone y msg-cita-state se unifican al estilo cita-state-pill
       chip-tone-* del sistema. Mismo patrón visual que la cita y el
       paciente · paleta ya conocida por el ojo. */
.msg-row-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.msg-situation {
    width: 100%;
    margin-bottom: 2px;
    color: var(--muted, #6B7B7E);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.msg-phone-ok,
.msg-phone-missing {
    font-size: 12px;
    color: var(--muted);
    font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.msg-phone-missing {
    color: var(--rose);
    font-family: 'Inter', sans-serif;
    font-weight: 600;
}
/* msg-tone y msg-cita-state ahora comparten el mismo lenguaje que los
   chip-tone-* del cita: padding compacto, font-weight medio, sin
   uppercase. */
.msg-tone,
.msg-cita-state {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border: 0;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0;
    text-transform: none;
}
/* Tone categórico (Cita / Cobro / Continuidad) · gris sutil para que
   no compita con el cita-state. Antes peleaba de tú a tú. */
.msg-tone {
    background: var(--surface-2, #EEF1EF);
    color: var(--muted, #6B7B7E);
}
.msg-tone-accent { background: #DCEBFF; color: #155EEF; }
.msg-tone-ok     { background: #DDF8E8; color: #087443; }
.msg-tone-warm   { background: #FFF3C4; color: #A16207; }
.msg-tone-rose   { background: #FFE4E6; color: #BE123C; }
.msg-tone-muted  { background: #EEF1F5; color: #475467; }
/* Cita state · usa el mismo mapa de chip-tone-* del sistema. */
.msg-cita-state            { background: var(--surface-2, #EEF1EF); color: var(--muted, #6B7B7E); }
.msg-cita-confirmada       { background: #DDF8E8; color: #087443; }
.msg-cita-esperando        { background: #FFF3C4; color: #A16207; }
.msg-cita-realizada        { background: #DDF8EC; color: #047857; }
.msg-cita-no_asistio,
.msg-cita-cancelada        { background: #FFE4E6; color: #BE123C; }
/* ───── Acciones de fila · cola accionable de mensajería ─────
   Rediseño 2026-05-08 (UX) · Antes los botones eran grandes (38px de
   alto) con muchas variantes de color saturado por tipo de acción
   (verde, rosa, aqua sólido, ámbar). El resultado: cada fila se sentía
   un semáforo de colores y los botones competían entre sí.

   Ahora hay solo dos estados visuales:
     · is-primary  → botón principal (acción más probable de la fila),
                     filled accent del sistema, blanco encima.
     · default     → ghost sutil del sistema, mismo lenguaje que
                     btn-ghost del cita-quesigue.
   El tipo de acción (confirm/pay/availability/follow/reminder) se
   conserva en la clase del botón solo por si JS lo necesita, pero
   ya no pinta colores diferentes. Más cohesión, menos ruido. */
.msg-row-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}
.msg-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 32px;
    border: 1px solid var(--line, #D6DEDC);
    background: var(--surface, #FBFBF8);
    color: var(--ink-2, #2C4145);
    border-radius: 8px;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: border-color .14s ease, background .14s ease, color .14s ease;
}
.msg-action-btn:hover {
    border-color: color-mix(in srgb, var(--accent) 38%, var(--line));
    background: color-mix(in srgb, var(--accent-soft) 24%, var(--surface));
    color: var(--accent);
}
.msg-action-btn.is-primary {
    background: var(--accent, #2D7A8C);
    border-color: var(--accent, #2D7A8C);
    color: #fff;
    box-shadow: 0 4px 10px rgba(45, 122, 140, 0.18);
}
.msg-action-btn.is-primary:hover {
    background: var(--accent-hover, #246A7A);
    border-color: var(--accent-hover, #246A7A);
    color: #fff;
}
.msg-action-btn.is-primary .msg-action-icon {
    color: rgba(255, 255, 255, 0.92);
}
.msg-action-icon {
    flex: 0 0 auto;
    width: 13px;
    height: 13px;
    color: var(--muted, #6B7B7E);
}
.msg-action-btn:hover .msg-action-icon {
    color: inherit;
}
.msg-filter-empty {
    border-top: 1px solid var(--line-soft);
    color: var(--ink-2);
}
.msg-filter-empty strong {
    display: block;
    color: var(--ink);
    font-size: 15px;
    font-weight: 850;
}
.msg-filter-empty span {
    display: block;
    margin-top: 5px;
    color: var(--muted);
    font-size: 13px;
}
.msg-status-icon {
    width: 34px;
    height: 34px;
    border-radius: 11px;
    display: grid;
    place-items: center;
}
.msg-status-icon.is-sent { background: var(--ok-soft); color: var(--ok); }
.msg-status-icon.is-pending { background: var(--warn-soft); color: var(--warn); }
.msg-status-icon.is-failed { background: color-mix(in srgb, var(--rose) 14%, var(--surface)); color: var(--rose); }
.msg-status-pill {
    justify-self: end;
    white-space: nowrap;
    border-radius: 999px;
    padding: 5px 10px;
    font-size: 12px;
    font-weight: 750;
}
.msg-status-pill.is-sent { background: var(--ok-soft); color: var(--ok); }
.msg-status-pill.is-pending { background: var(--warn-soft); color: var(--warn); }
.msg-status-pill.is-failed { background: color-mix(in srgb, var(--rose) 14%, var(--surface)); color: var(--rose); }
.msg-history-row time {
    text-align: right;
    color: var(--muted);
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 12.5px;
}
.msg-template-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}
.msg-template-card {
    min-height: 230px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-left: 3px solid var(--accent);
    border-radius: 5px;
    padding: 18px;
}
.msg-template-warm { border-left-color: var(--warm); }
.msg-template-ok { border-left-color: var(--ok); }
.msg-template-rose { border-left-color: var(--rose); }
.msg-template-top {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
    margin-bottom: 14px;
}
.msg-template-top-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}
.msg-template-edit {
    min-height: 28px;
    padding: 0 10px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface);
    color: var(--accent);
    font-size: 11px;
    font-weight: 800;
    cursor: pointer;
}
.msg-template-edit:hover {
    background: var(--accent-soft);
    border-color: color-mix(in srgb, var(--accent) 28%, var(--line));
}
.msg-template-mark {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: var(--accent-soft);
    color: var(--accent);
}
.msg-template-card h3 {
    margin: 0 0 4px;
    color: var(--ink);
    font-size: 15px;
    font-weight: 800;
}
.msg-template-card p {
    margin: 0 0 14px;
    color: var(--muted);
    font-size: 12.5px;
}
.msg-template-meta {
    margin: -4px 0 12px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.msg-template-meta span {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 4px 9px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--ok-soft) 72%, var(--surface));
    color: color-mix(in srgb, var(--ok) 82%, var(--ink));
    font-size: 11px;
    font-weight: 820;
}
.msg-template-preview {
    max-height: 96px;
    overflow: hidden;
    border-radius: 10px;
    background: var(--surface-2);
    color: var(--ink-2);
    padding: 12px;
    font-size: 12.5px;
    line-height: 1.5;
}
.msg-empty {
    display: grid;
    place-items: center;
    gap: 6px;
    padding: 42px 20px;
    color: var(--muted);
    text-align: center;
}
.msg-empty strong {
    color: var(--ink);
    font-size: 15px;
}
.msg-empty span {
    font-size: 13px;
}
.msg-sheet-layer {
    position: fixed;
    inset: 0;
    z-index: 140;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: max(20px, env(safe-area-inset-top)) 24px max(20px, env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--ink) 22%, transparent);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    opacity: 0;
    transition: opacity .18s ease;
}
.msg-sheet-layer[hidden] { display: none; }
.msg-sheet-layer.open { opacity: 1; }
.msg-sheet {
    width: min(760px, 100%);
    max-height: min(86vh, 820px);
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 22px 22px 18px 18px;
    box-shadow: 0 34px 90px -42px color-mix(in srgb, var(--ink) 65%, transparent);
    transform: translateY(12px) scale(.985);
    transition: transform .18s ease;
    overflow: hidden;
}
.msg-sheet:has(textarea[data-ai-kind]) {
    width: min(620px, calc(100vw - 48px));
    max-height: min(82svh, 680px);
    border-radius: 22px;
    border-color: color-mix(in srgb, var(--accent) 16%, var(--line));
    box-shadow: 0 30px 86px -46px color-mix(in srgb, var(--ink) 70%, transparent);
}
.template-sheet {
    width: min(720px, 100%);
}
.msg-sheet-layer.open .msg-sheet { transform: none; }
.msg-sheet-head {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 22px 16px;
    border-bottom: 1px solid var(--line-soft);
}
.msg-sheet:has(textarea[data-ai-kind]) .msg-sheet-head {
    padding: 18px 22px 14px;
    background:
        linear-gradient(180deg,
            color-mix(in srgb, var(--surface) 98%, white),
            color-mix(in srgb, var(--surface) 92%, var(--bg)));
}
.msg-sheet-kicker {
    display: block;
    margin-bottom: 3px;
    color: var(--accent);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .12em;
    font-weight: 800;
}
.msg-sheet h2 {
    margin: 0;
    font-size: 24px;
    line-height: 1.1;
    color: var(--ink);
}
.msg-sheet:has(textarea[data-ai-kind]) h2 {
    font-size: clamp(24px, 2.2vw, 30px);
    line-height: 1.08;
}
.msg-sheet-head p {
    margin: 6px 0 0;
    font-size: 13px;
    color: var(--muted);
}
.msg-sheet:has(textarea[data-ai-kind]) .msg-sheet-head p {
    max-width: 520px;
    font-size: 13px;
    line-height: 1.4;
}
.msg-sheet-close {
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 11px;
    display: grid;
    place-items: center;
    background: var(--surface-2);
    color: var(--ink-2);
    cursor: pointer;
}
.msg-sheet:has(textarea[data-ai-kind]) .msg-sheet-close {
    width: 38px;
    height: 38px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: color-mix(in srgb, var(--surface) 96%, white);
    box-shadow: 0 14px 32px -28px color-mix(in srgb, var(--ink) 44%, transparent);
}
.msg-sheet-close:hover {
    color: var(--ink);
    background: var(--accent-soft);
}
.msg-sheet-body {
    padding: 18px 22px;
    overflow-y: auto;
    display: grid;
    gap: 16px;
}
.msg-sheet:has(textarea[data-ai-kind]) .msg-sheet-body {
    padding: 16px 22px 18px;
    gap: 13px;
}
.msg-sheet-alert {
    border-radius: 12px;
    border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line));
    background: color-mix(in srgb, var(--accent-soft) 55%, var(--surface));
    color: var(--ink-2);
    padding: 12px 14px;
    font-size: 13px;
    line-height: 1.45;
}
.msg-sheet-alert.is-error {
    border-color: color-mix(in srgb, var(--rose) 36%, var(--line));
    background: color-mix(in srgb, var(--rose) 9%, var(--surface));
    color: var(--rose);
    font-weight: 700;
}
.meet-generation-card {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 13px 14px;
    border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--line));
    border-radius: 14px;
    background:
        linear-gradient(135deg,
            color-mix(in srgb, var(--accent-soft) 54%, var(--surface)) 0%,
            color-mix(in srgb, var(--surface) 92%, white) 100%);
    color: var(--ink-2);
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, white 62%, transparent),
        0 18px 38px -34px color-mix(in srgb, var(--accent) 60%, transparent);
}
.meet-generation-card[hidden] {
    display: none;
}
.meet-generation-card.is-loading {
    border-color: color-mix(in srgb, var(--accent) 42%, var(--line));
    background:
        radial-gradient(90% 120% at 18% 0%,
            color-mix(in srgb, var(--accent-soft) 82%, transparent) 0,
            transparent 60%),
        color-mix(in srgb, var(--surface) 94%, white);
}
.meet-generation-card.is-ready {
    border-color: color-mix(in srgb, var(--ok) 28%, var(--line));
    background: color-mix(in srgb, var(--ok-soft) 52%, var(--surface));
}
.meet-generation-mark {
    width: 48px;
    height: 30px;
    flex: 0 0 auto;
    display: inline-grid;
    place-items: center;
}
.meet-generation-mark .v-loader-mark {
    width: 48px;
    height: 28px;
}
.meet-generation-mark .v-loader-circle {
    top: 4px;
    width: 20px;
    height: 20px;
    border-width: 1.8px;
    background: transparent;
    box-shadow: none;
}
.meet-generation-mark .v-loader-left {
    left: 8px;
}
.meet-generation-mark .v-loader-right {
    right: 8px;
}
.meet-ready-check {
    display: none;
    width: 30px;
    height: 30px;
    border-radius: 999px;
    background: var(--ok);
    position: relative;
}
.meet-ready-check::after {
    content: "";
    position: absolute;
    left: 9px;
    top: 8px;
    width: 10px;
    height: 6px;
    border-left: 2px solid white;
    border-bottom: 2px solid white;
    transform: rotate(-45deg);
}
.meet-generation-card.is-ready .v-loader-mark {
    display: none;
}
.meet-generation-card.is-ready .meet-ready-check {
    display: block;
}
.meet-generation-copy {
    min-width: 0;
    display: grid;
    gap: 2px;
}
.meet-generation-copy strong {
    color: var(--ink);
    font-size: 13.5px;
    font-weight: 820;
}
.meet-generation-copy small {
    color: var(--muted);
    font-size: 12.5px;
    line-height: 1.35;
}
.msg-phone-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}
.msg-sheet:has(textarea[data-ai-kind]) .msg-phone-grid {
    gap: 12px;
}
.msg-preview-meta {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
    padding: 10px 12px;
    border-radius: 12px;
    background: var(--surface-2);
    color: var(--muted);
    font-size: 12.5px;
}
.msg-sheet:has(textarea[data-ai-kind]) .msg-preview-meta {
    width: max-content;
    max-width: 100%;
    justify-self: end;
    padding: 6px 12px;
    border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--line));
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent-soft) 52%, var(--surface));
    color: var(--ink-2);
    font-size: 12px;
}
.msg-sheet:has(textarea[data-ai-kind]) .msg-preview-meta::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--accent);
}
.msg-sheet:has(textarea[data-ai-kind]) .field-label {
    font-size: 12px;
    font-weight: 850;
    letter-spacing: .13em;
}
.msg-preview-meta b {
    color: var(--accent);
}
.msg-body-input {
    width: 100%;
    min-height: 190px;
    resize: vertical;
    line-height: 1.55;
    font-size: 14px;
}
.msg-sheet:has(textarea[data-ai-kind]) .msg-body-input {
    min-height: 170px;
    height: clamp(170px, 26svh, 240px);
    border-radius: 15px;
    border-color: color-mix(in srgb, var(--accent) 34%, var(--line));
    padding: 16px 18px 72px !important;
    font-size: 15px;
    line-height: 1.5;
    box-shadow: inset 0 1px 0 color-mix(in srgb, white 76%, transparent);
}
.msg-sheet:has(textarea[data-ai-kind]) .ai-text-tools {
    right: 14px;
    bottom: 14px;
}
.msg-sheet-foot {
    padding: 14px 22px 18px;
    border-top: 1px solid var(--line-soft);
    background: color-mix(in srgb, var(--surface) 92%, var(--bg));
}
.msg-sheet:has(textarea[data-ai-kind]) .msg-sheet-foot {
    padding: 14px 22px 18px;
    background: color-mix(in srgb, var(--surface) 96%, white);
}
.msg-sheet:has(textarea[data-ai-kind]) .msg-open-actions,
.msg-sheet:has(textarea[data-ai-kind]) .msg-post-actions {
    gap: 14px;
}
.msg-sheet:has(textarea[data-ai-kind]) .msg-open-actions .btn-primary,
.msg-sheet:has(textarea[data-ai-kind]) .msg-open-actions .btn-ghost,
.msg-sheet:has(textarea[data-ai-kind]) .msg-post-actions .btn-primary,
.msg-sheet:has(textarea[data-ai-kind]) .msg-post-actions .btn-ghost {
    min-height: 44px;
    padding-inline: 18px;
    border-radius: 12px;
    font-size: 14px;
}
@media (max-width: 760px) {
    .msg-sheet-layer {
        padding: 12px;
    }
    .msg-sheet:has(textarea[data-ai-kind]) {
        width: min(100%, calc(100vw - 24px));
        border-radius: 22px;
    }
    .msg-sheet:has(textarea[data-ai-kind]) .msg-sheet-head,
    .msg-sheet:has(textarea[data-ai-kind]) .msg-sheet-body,
    .msg-sheet:has(textarea[data-ai-kind]) .msg-sheet-foot {
        padding-left: 20px;
        padding-right: 20px;
    }
    .msg-sheet:has(textarea[data-ai-kind]) h2 {
        font-size: 25px;
    }
    .msg-sheet:has(textarea[data-ai-kind]) .msg-phone-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    .msg-sheet:has(textarea[data-ai-kind]) .msg-preview-meta {
        justify-self: stretch;
        width: auto;
    }
    .msg-sheet:has(textarea[data-ai-kind]) .msg-body-input {
        min-height: 180px;
        height: min(38svh, 240px);
        padding: 16px 16px 84px !important;
        font-size: 15px;
    }
    .msg-sheet:has(textarea[data-ai-kind]) .ai-text-tools {
        right: 16px;
        bottom: 16px;
    }
    .msg-sheet:has(textarea[data-ai-kind]) .msg-open-actions,
    .msg-sheet:has(textarea[data-ai-kind]) .msg-post-actions {
        justify-content: stretch;
    }
    .msg-sheet:has(textarea[data-ai-kind]) .msg-open-actions .btn-primary,
    .msg-sheet:has(textarea[data-ai-kind]) .msg-open-actions .btn-ghost,
    .msg-sheet:has(textarea[data-ai-kind]) .msg-post-actions .btn-primary,
    .msg-sheet:has(textarea[data-ai-kind]) .msg-post-actions .btn-ghost {
        flex: 1 1 180px;
    }
}
.msg-open-actions,
.msg-post-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.msg-post-actions > span {
    margin-right: auto;
    color: var(--muted);
    font-size: 13px;
}
.msg-post-status {
    margin-right: auto;
    min-width: 220px;
    display: grid;
    gap: 3px;
}
.msg-post-status strong {
    color: var(--ink);
    font-size: 13.5px;
    line-height: 1.2;
    font-weight: 800;
}
.msg-post-status small {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.3;
}
.msg-post-buttons {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}
.msg-post-buttons .btn-primary,
.msg-post-buttons .btn-ghost {
    min-height: 42px;
    padding-inline: 16px;
    white-space: nowrap;
}
.btn-quiet-danger {
    color: color-mix(in srgb, var(--rose) 72%, var(--ink)) !important;
    border-color: color-mix(in srgb, var(--rose) 18%, var(--line)) !important;
    background: color-mix(in srgb, var(--rose) 4%, var(--surface)) !important;
}
.btn-quiet-danger:hover {
    color: color-mix(in srgb, var(--rose) 88%, var(--ink)) !important;
    border-color: color-mix(in srgb, var(--rose) 30%, var(--line)) !important;
    background: color-mix(in srgb, var(--rose) 8%, var(--surface)) !important;
}
.post-create-layer {
    align-items: center;
    padding: 24px;
    box-sizing: border-box;
}
.msg-sheet-grip {
    width: 42px;
    height: 4px;
    flex: 0 0 auto;
    margin: 10px auto 0;
    border-radius: 999px;
    background: color-mix(in srgb, var(--muted) 24%, transparent);
}
.post-create-sheet {
    width: min(640px, calc(100vw - 48px));
    max-height: min(86svh, 760px);
    border-radius: 24px;
    transform: translateY(10px) scale(.985);
}
.cita-confirm-layer {
    align-items: center;
    padding: 24px;
}
.cita-confirm-sheet {
    width: min(620px, calc(100vw - 48px));
    max-height: min(78svh, 680px);
    border-radius: 24px;
    transform: translateY(10px) scale(.985);
    box-shadow: 0 28px 90px -44px color-mix(in srgb, var(--accent) 75%, transparent);
}
.cita-confirm-sheet .post-create-head {
    padding: 14px 20px 14px;
}
.cita-confirm-sheet .post-create-body {
    padding: 14px 20px 18px;
}
.cita-confirm-sheet .post-create-icon {
    width: 40px;
    height: 40px;
    border-radius: 13px;
}
.cita-confirm-sheet .msg-sheet-close {
    width: 38px;
    height: 38px;
    border-radius: 13px;
}
.post-create-head {
    align-items: flex-start;
    padding: 22px 24px 18px;
}
.post-create-title {
    min-width: 0;
    display: flex;
    align-items: flex-start;
    gap: 14px;
}
.post-create-icon {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    color: var(--ok);
    background: var(--ok-soft);
    border: 1px solid color-mix(in srgb, var(--ok) 20%, transparent);
}
.post-create-head p strong {
    color: var(--ink);
}
.post-create-body {
    gap: 10px;
    padding: 18px 24px 22px;
}
.post-create-actions {
    display: grid;
    gap: 10px;
}
.cita-confirm-actions {
    gap: 9px;
}
.post-create-option {
    width: 100%;
    font: inherit;
    text-align: left;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 14px;
    border-radius: 16px;
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--ink);
    cursor: pointer;
    text-decoration: none;
    transition: border-color .16s ease, background .16s ease, transform .16s ease;
}
.post-create-option:hover {
    border-color: color-mix(in srgb, var(--accent) 28%, var(--line));
    background: color-mix(in srgb, var(--accent-soft) 44%, var(--surface));
}
.post-create-option:active {
    transform: translateY(1px);
}
.post-create-option:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--accent) 24%, transparent);
    outline-offset: 2px;
}
.post-create-option strong {
    display: block;
    font-size: 14px;
    line-height: 1.2;
}
.post-create-option small {
    display: block;
    margin-top: 3px;
    color: var(--muted);
    font-size: 12.5px;
    line-height: 1.35;
}
.post-create-option-primary {
    border-color: color-mix(in srgb, var(--accent) 22%, var(--line));
    background: color-mix(in srgb, var(--accent-soft) 42%, var(--surface));
    box-shadow: 0 16px 38px -34px color-mix(in srgb, var(--accent) 62%, transparent);
}
.post-create-option-primary strong,
.post-create-option-primary .post-create-arrow {
    color: var(--accent);
}
.post-create-action-icon {
    width: 42px;
    height: 42px;
    border-radius: 13px;
    display: grid;
    place-items: center;
    background: var(--surface-2);
    color: var(--accent);
}
.post-create-option-primary .post-create-action-icon {
    background: var(--accent);
    color: white;
}
.cita-confirm-main {
    min-height: 80px;
    border-radius: 18px;
}
.cita-confirm-main strong {
    font-size: 15px;
}
.cita-confirm-secondary-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
}
.cita-confirm-secondary {
    min-height: 72px;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 10px;
    padding: 12px;
    border-radius: 16px;
}
.cita-confirm-secondary .post-create-action-icon {
    width: 38px;
    height: 38px;
    border-radius: 12px;
}
.cita-confirm-secondary strong {
    font-size: 13.5px;
}
.cita-confirm-secondary small {
    font-size: 11.5px;
}
.post-create-whatsapp {
    display: grid;
    gap: 14px;
}
.post-create-whatsapp[hidden],
.post-create-wa-foot[hidden] {
    display: none;
}

/* ===== Perfil ============================================================= */
.profile-editor-card {
    display: block;
}
.profile-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}
.profile-span-2 {
    grid-column: 1 / -1;
}
.profile-url-input span {
    min-width: 86px;
}
.profile-read-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}
.profile-read-grid div {
    border: 1px solid var(--line-soft);
    border-radius: 14px;
    padding: 14px;
    background: color-mix(in srgb, var(--surface-2) 54%, var(--surface));
}
.profile-read-grid span,
.profile-read-grid strong {
    display: block;
}
.profile-read-grid span {
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-bottom: 7px;
}
.profile-read-grid strong {
    color: var(--ink);
    font-size: 14px;
    font-weight: 700;
    overflow-wrap: anywhere;
}
.profile-action-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 18px;
}
.profile-public-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(340px, 410px);
    gap: 22px;
    align-items: start;
}
.profile-public-card {
    align-self: start;
    padding: 22px !important;
    border-radius: 16px;
}
.profile-public-title {
    color: var(--ink);
    font-size: 18px;
    font-weight: 650;
    line-height: 1.15;
}
.profile-public-copy {
    max-width: 760px;
    margin: 4px 0 16px;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.45;
}
.profile-public-card .profile-read-grid {
    gap: 10px;
}
.profile-public-card .profile-read-grid div {
    padding: 13px 14px;
    border-radius: 12px;
}
.profile-public-card .profile-action-row {
    margin-top: 14px;
}
.profile-preview-meta {
    justify-content: center;
    margin-top: 12px;
}

/* ===== Vista previa pública (perfil) ===================================== */
.profile-preview-wrap {
    display: flex;
    flex-direction: column;
    gap: 12px;
    position: sticky;
    top: 16px;
    max-width: 410px;
}
.profile-preview-eyebrow {
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.profile-preview-card {
    background: var(--surface);
    border: 1px solid color-mix(in srgb, var(--accent) 26%, var(--line));
    border-radius: 18px;
    overflow: hidden;
    box-shadow:
        0 22px 60px -42px color-mix(in srgb, var(--accent) 60%, transparent),
        0 8px 22px -18px color-mix(in srgb, var(--ink) 30%, transparent);
}
.profile-preview-urlbar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-bottom: 1px solid var(--line-soft);
    background:
        linear-gradient(180deg,
            color-mix(in srgb, var(--surface-2) 80%, var(--surface)) 0,
            color-mix(in srgb, var(--surface-2) 56%, var(--surface)) 100%);
}
.profile-preview-dots {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex: 0 0 auto;
}
.profile-preview-dots i {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--ink) 14%, var(--line));
}
.profile-preview-dots i:nth-child(1) { background: color-mix(in srgb, #ff5f57 70%, var(--line)); }
.profile-preview-dots i:nth-child(2) { background: color-mix(in srgb, #f5b94d 70%, var(--line)); }
.profile-preview-dots i:nth-child(3) { background: color-mix(in srgb, #34c759 60%, var(--line)); }
.profile-preview-url {
    flex: 1 1 auto;
    min-width: 0;
    padding: 4px 10px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--surface) 88%, var(--bg));
    border: 1px solid var(--line-soft);
    color: var(--ink-2);
    font-size: 11px;
    line-height: 1.3;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.profile-preview-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 20px 20px 18px;
    text-align: center;
}
.profile-preview-avatar .profile-photo-frame {
    width: 76px;
    height: 76px;
}
.profile-preview-avatar .profile-photo-preview {
    width: 76px;
    height: 76px;
    font-size: 25px;
}
.profile-preview-name {
    margin: 2px 0 0;
    color: var(--ink);
    font-size: 21px;
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.01em;
    overflow-wrap: anywhere;
}
.profile-preview-meta-row {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: -2px;
}
.profile-preview-meta-row .public-specialty-chips {
    justify-content: center;
}
.profile-preview-bio {
    margin: 4px 0 4px;
    max-width: 320px;
    color: var(--ink-2);
    font-size: 12.8px;
    line-height: 1.48;
}
.profile-preview-bio.is-empty {
    color: var(--muted);
    font-style: italic;
}
.profile-preview-cta {
    width: 100%;
    justify-content: center;
    margin-top: 6px;
    pointer-events: none;
    opacity: .96;
}
.profile-preview-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
    margin: 14px 0 0;
    padding-top: 14px;
    border-top: 1px dashed color-mix(in srgb, var(--line) 80%, transparent);
}
.profile-preview-stats > div {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    position: relative;
}
.profile-preview-stats > div + div::before {
    content: '';
    position: absolute;
    left: 0;
    top: 6px;
    bottom: 6px;
    width: 1px;
    background: color-mix(in srgb, var(--line) 80%, transparent);
}
.profile-preview-stats dt {
    color: var(--muted);
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}
.profile-preview-stats dd {
    margin: 0;
    color: var(--ink);
    font-size: 19px;
    font-weight: 650;
    line-height: 1.1;
}
@media (max-width: 1023px) {
    .profile-preview-wrap { position: static; }
    .profile-public-layout {
        grid-template-columns: 1fr;
    }
    .profile-preview-wrap {
        max-width: none;
    }
}
.profile-save-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-top: 18px;
    padding: 16px 18px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: color-mix(in srgb, var(--surface) 92%, var(--bg));
    box-shadow: 0 18px 44px -34px color-mix(in srgb, var(--ink) 42%, transparent);
    position: sticky;
    bottom: 16px;
    z-index: 12;
}
.profile-save-bar span {
    color: var(--muted);
    font-size: 12.5px;
    line-height: 1.4;
}
.profile-settings-card {
    max-width: 100%;
}

/* ===== Configuración ======================================================= */
.config-page {
    min-height: calc(100vh - 64px);
    background:
        linear-gradient(180deg,
            color-mix(in srgb, var(--accent-soft) 22%, transparent) 0,
            transparent 300px);
}
.config-shell {
    max-width: 1480px;
    margin: 0 auto;
    padding: 26px 28px 44px;
}
.config-hero {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 22px;
}
.config-hero p {
    max-width: 650px;
    margin-top: 6px;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.45;
}
.config-hero-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}
.config-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 22px;
    align-items: stretch;
}
/* Refactor 2026-05-08 (UX) · Antes color: var(--accent) sobre fondo
   aqua-soft de config-page · el kicker se mimetizaba con el fondo y
   no se leía. Ahora usa un mix accent+ink para tener contraste real. */
.config-section-title {
    grid-column: 1 / -1;
    margin: 2px 0 -4px;
    color: color-mix(in srgb, var(--accent) 35%, var(--ink));
    font-size: 12px;
    line-height: 1;
    font-weight: 850;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.config-section-title-agenda {
    grid-column: 1 / -1;
    margin-top: 20px;
    color: var(--accent);
}
.config-section-title-cuenta {
    margin: 28px 0 12px;
    color: var(--muted);
    font-size: 12px;
    line-height: 1;
    font-weight: 850;
    letter-spacing: .12em;
    text-transform: uppercase;
}

/* ===== Sección 06 · Cuenta y datos ===================================== */
.config-cuenta-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    align-items: stretch;
}
.config-card-cuenta {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 20px;
    border-radius: 18px;
    background: var(--surface);
    border: 1px solid var(--line);
    box-shadow: 0 22px 60px -50px color-mix(in srgb, var(--ink) 62%, transparent);
}
.config-card-pausar {
    border-color: color-mix(in srgb, var(--warn) 24%, var(--line));
    background:
        linear-gradient(180deg,
            color-mix(in srgb, var(--warm-soft) 40%, var(--surface)) 0%,
            var(--surface) 100%);
}
.config-card-exportar { /* tono neutro · default */ }
.config-card-cerrar {
    border-color: color-mix(in srgb, var(--rose) 22%, var(--line));
    background:
        linear-gradient(180deg,
            color-mix(in srgb, var(--rose) 8%, var(--surface)) 0%,
            var(--surface) 100%);
}

/* Step pills coloreados por intención */
.config-step-warm {
    background: color-mix(in srgb, var(--warm-soft) 80%, var(--surface)) !important;
    color: var(--warn) !important;
}
.config-step-neutral {
    background: color-mix(in srgb, var(--surface-2) 90%, var(--surface)) !important;
    color: var(--ink-2) !important;
}
.config-step-danger {
    background: color-mix(in srgb, var(--rose) 14%, var(--surface)) !important;
    color: var(--rose) !important;
}

/* Mandorla decorativa en cada card de cuenta · alineada con el step pill */
.cuenta-card-mandorla {
    margin-left: auto;
    flex: 0 0 auto;
    align-self: center;
    opacity: .7;
    color: var(--ink-2);
}
.config-card-pausar  .cuenta-card-mandorla { color: var(--warn); }
.config-card-cerrar  .cuenta-card-mandorla { color: var(--rose); }
.config-card-exportar .cuenta-card-mandorla { color: var(--ink-2); opacity: .5; }

.config-cuenta-subtitle {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
}
.config-cuenta-subtitle svg { color: var(--warn); flex: 0 0 13px; }
.config-cuenta-subtitle-danger svg { color: var(--rose); }
.config-card-exportar .config-cuenta-subtitle svg { color: var(--ink-2); }

.cuenta-card-body {
    display: flex; flex-direction: column; gap: 10px;
    flex: 1 1 auto;
}
.cuenta-card-body p {
    margin: 0;
    color: var(--ink-2);
    font-size: 13px;
    line-height: 1.5;
}
.cuenta-card-body p strong { color: var(--ink); }
.cuenta-list {
    margin: 2px 0 0;
    padding: 0;
    list-style: none;
    display: flex; flex-direction: column; gap: 5px;
}
.cuenta-list li {
    position: relative;
    padding-left: 18px;
    color: var(--ink-2);
    font-size: 12.5px;
    line-height: 1.4;
}
.cuenta-list li::before {
    content: '';
    position: absolute;
    left: 0; top: 6px;
    width: 11px; height: 11px;
    border-radius: 50%;
    border: 1.4px solid color-mix(in srgb, var(--ink) 32%, var(--line));
    background:
        radial-gradient(circle at center,
            color-mix(in srgb, var(--ink) 32%, var(--line)) 0 30%,
            transparent 30%);
}
.config-card-pausar  .cuenta-list li::before { border-color: color-mix(in srgb, var(--warn) 50%, var(--line)); background: radial-gradient(circle at center, var(--warn) 0 30%, transparent 30%); }
.config-card-cerrar  .cuenta-list li::before { border-color: color-mix(in srgb, var(--rose) 50%, var(--line)); background: radial-gradient(circle at center, var(--rose) 0 30%, transparent 30%); }

.cuenta-card-foot {
    margin-top: auto;
    padding-top: 6px;
    border-top: 1px dashed color-mix(in srgb, var(--line) 80%, transparent);
}
.cuenta-card-foot .btn-ghost,
.cuenta-card-foot .btn-primary {
    width: 100%;
    justify-content: center;
}

/* Botones tematizados */
.cuenta-btn-warm {
    border-color: color-mix(in srgb, var(--warn) 36%, var(--line)) !important;
    color: color-mix(in srgb, var(--warn) 80%, var(--ink)) !important;
}
.cuenta-btn-warm:hover {
    background: color-mix(in srgb, var(--warm-soft) 56%, var(--surface)) !important;
    border-color: color-mix(in srgb, var(--warn) 60%, var(--line)) !important;
}
.cuenta-btn-warm svg { color: var(--warn); }
.cuenta-btn-danger {
    border-color: color-mix(in srgb, var(--rose) 36%, var(--line)) !important;
    color: color-mix(in srgb, var(--rose) 80%, var(--ink)) !important;
}
.cuenta-btn-danger:hover {
    background: color-mix(in srgb, var(--rose) 8%, var(--surface)) !important;
    border-color: color-mix(in srgb, var(--rose) 60%, var(--line)) !important;
}
.cuenta-btn-danger svg { color: var(--rose); }

/* ===== Banner sticky · baja programada ================================== */
.cuenta-banner {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    border-radius: 16px;
    margin-bottom: 18px;
    background:
        linear-gradient(180deg,
            color-mix(in srgb, var(--rose) 14%, var(--surface)) 0%,
            color-mix(in srgb, var(--surface) 96%, var(--rose) 4%) 100%);
    border: 1px solid color-mix(in srgb, var(--rose) 28%, var(--line));
    box-shadow: 0 14px 36px -22px color-mix(in srgb, var(--rose) 50%, transparent);
}
.cuenta-banner-icon {
    width: 44px; height: 44px;
    border-radius: 13px;
    display: grid; place-items: center;
    color: var(--rose);
    background: var(--surface);
    border: 1px solid color-mix(in srgb, var(--rose) 28%, var(--line));
}
.cuenta-banner-copy strong {
    display: block;
    color: var(--ink);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.25;
}
.cuenta-banner-copy strong span { color: var(--rose); }
.cuenta-banner-copy p {
    margin: 4px 0 0;
    color: var(--ink-2);
    font-size: 12.5px;
    line-height: 1.45;
    max-width: 56ch;
}

/* ===== Wizard cerrar cuenta ============================================ */
.cuenta-wizard-layer {
    position: fixed; inset: 0; z-index: 130;
    display: grid; place-items: center;
    padding: 24px;
    background:
        radial-gradient(40% 36% at 50% 42%,
            color-mix(in srgb, var(--rose) 20%, transparent) 0,
            transparent 70%),
        color-mix(in srgb, var(--ink) 26%, transparent);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    opacity: 0;
    transition: opacity .22s ease;
}
.cuenta-wizard-layer[hidden] { display: none; }
.cuenta-wizard-layer.is-open { opacity: 1; }
.cuenta-wizard {
    position: relative;
    width: min(560px, 100%);
    max-height: calc(100vh - 48px);
    display: flex; flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 22px;
    box-shadow: 0 36px 90px -42px color-mix(in srgb, var(--ink) 70%, transparent);
    overflow: hidden;
    transform: translateY(12px) scale(.98);
    transition: transform .22s cubic-bezier(.32,.72,.32,1);
}
.cuenta-wizard-layer.is-open .cuenta-wizard { transform: none; }
.cuenta-wizard-head {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
    padding: 18px 22px 12px;
}
.cuenta-wizard-eyebrow {
    display: block;
    color: var(--rose);
    font-size: 11px;
    font-weight: 880;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.cuenta-wizard-head h2 {
    margin: 4px 0 0;
    color: var(--ink);
    font-size: 19px;
    line-height: 1.2;
    font-weight: 600;
    letter-spacing: -0.01em;
}
.cuenta-wizard-close {
    flex: 0 0 32px;
    width: 32px; height: 32px;
    display: grid; place-items: center;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: var(--surface);
    color: var(--ink-2);
    cursor: pointer;
}
.cuenta-wizard-close:hover { background: var(--surface-2); }

.cuenta-wizard-progress {
    display: flex;
    gap: 6px;
    padding: 0 22px 14px;
}
.cuenta-wizard-progress span {
    flex: 1;
    height: 3px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--ink) 10%, var(--line));
    transition: background .25s ease;
}
.cuenta-wizard-progress span.is-active { background: var(--rose); }

.cuenta-wizard-step {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 4px 22px 8px;
}
.cuenta-wizard-step[hidden] { display: none; }
.cuenta-wizard-lead {
    margin: 0 0 12px;
    color: var(--ink-2);
    font-size: 13px;
    line-height: 1.5;
}

/* Radio cards de motivo */
.cuenta-motivos {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 14px;
}
.cuenta-motivo {
    position: relative;
    display: flex;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface);
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, transform .12s ease;
}
.cuenta-motivo:hover {
    background: var(--surface-2);
    border-color: color-mix(in srgb, var(--rose) 28%, var(--line));
    transform: translateY(-1px);
}
.cuenta-motivo input {
    margin-top: 3px;
    accent-color: var(--rose);
    flex: 0 0 auto;
}
.cuenta-motivo span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cuenta-motivo strong {
    color: var(--ink);
    font-size: 13px;
    font-weight: 700;
}
.cuenta-motivo small {
    color: var(--muted);
    font-size: 11.5px;
    line-height: 1.35;
}
.cuenta-motivo:has(input:checked) {
    background: color-mix(in srgb, var(--rose) 8%, var(--surface));
    border-color: color-mix(in srgb, var(--rose) 50%, var(--line));
    box-shadow: 0 8px 22px -16px color-mix(in srgb, var(--rose) 60%, transparent);
}

.cuenta-wizard-field {
    display: block;
    margin-top: 4px;
}
.cuenta-wizard-field .field-label {
    display: block;
    margin-bottom: 6px;
}
.cuenta-wizard-field .textarea {
    min-height: 70px;
}

.cuenta-wizard-email-card {
    display: flex; flex-direction: column; gap: 4px;
    padding: 12px 14px;
    margin-bottom: 14px;
    border-radius: 12px;
    background: var(--surface-2);
    border: 1px solid var(--line-soft);
}
.cuenta-wizard-email-label {
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
}
.cuenta-wizard-email-card strong {
    color: var(--ink);
    font-size: 14px;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.cuenta-wizard-summary {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 14px;
    padding: 14px;
    border-radius: 14px;
    background: color-mix(in srgb, var(--rose) 6%, var(--surface));
    border: 1px solid color-mix(in srgb, var(--rose) 22%, var(--line));
}
.cuenta-wizard-summary-mark {
    width: 44px; height: 44px;
    border-radius: 13px;
    display: grid; place-items: center;
    color: var(--rose);
    background: var(--surface);
    border: 1px solid color-mix(in srgb, var(--rose) 28%, var(--line));
}
.cuenta-wizard-summary strong {
    display: block;
    color: var(--ink);
    font-size: 15px;
    font-weight: 700;
}
.cuenta-wizard-summary p {
    margin: 4px 0 8px;
    color: var(--ink-2);
    font-size: 12.5px;
    line-height: 1.5;
}
.cuenta-wizard-summary b { color: var(--rose); font-weight: 800; }
.cuenta-wizard-summary .cuenta-list li { font-size: 12px; }

.cuenta-wizard-foot {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 22px 18px;
    border-top: 1px solid var(--line-soft);
    background: color-mix(in srgb, var(--surface-2) 50%, var(--surface));
}
.cuenta-wizard-foot .btn-primary,
.cuenta-wizard-foot .btn-ghost {
    min-height: 42px;
}
.cuenta-wizard-foot .btn-primary[disabled] { opacity: .5; cursor: not-allowed; }

@media (max-width: 1180px) {
    .config-cuenta-grid {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 720px) {
    .cuenta-banner {
        grid-template-columns: 40px minmax(0, 1fr);
    }
    .cuenta-banner-actions {
        grid-column: 1 / -1;
    }
    .cuenta-banner-actions .btn-primary { width: 100%; justify-content: center; }
    .cuenta-motivos { grid-template-columns: 1fr; }
    .cuenta-wizard-layer { padding: 0; align-items: end; }
    .cuenta-wizard {
        width: 100%;
        max-height: 92vh;
        border-radius: 22px 22px 0 0;
        transform: translateY(100%);
    }
    .cuenta-wizard-layer.is-open .cuenta-wizard { transform: translateY(0); }
}
.config-card-photo {
    grid-column: 1 / span 2;
    grid-row: 2;
}
.config-card-clinical {
    grid-column: 3 / span 2;
    grid-row: 2;
}
.config-card-public {
    grid-column: 5 / span 2;
    grid-row: 2;
}
.config-section-title-services {
    grid-column: 1 / -1;
    grid-row: 3;
    margin-top: 20px;
}
.config-card-services {
    grid-column: 1 / span 4;
    grid-row: 4;
}
.config-card-social {
    grid-column: 5 / span 2;
    grid-row: 4;
}
/* Rediseño Tanda E (2026-05-08): la card de servicios se redujo a un
   resumen + CTA hacia /servicios; enlaces públicos pasó a un bloque grande
   con cards por plataforma. Conviven con las clases viejas (config-card-
   services / config-card-social) por if-existing en HTML. */
/* V64 (2026-05-14) · Servicios + Google quedan arriba. Enlaces públicos
   vive en una fila propia porque puede crecer hasta 12 entradas. */
.config-card-services-summary {
    grid-column: 1 / span 2;
    grid-row: 4;
    display: flex;
    flex-direction: column;
}
.config-card-redes {
    grid-column: 1 / -1;
    grid-row: 5;
    display: flex;
    flex-direction: column;
}
.config-card-google {
    grid-column: 3 / span 4;
    grid-row: 4;
}
.config-card-services-summary,
.config-card-redes,
.config-card-google {
    gap: 14px;
}
.config-card-services-summary .config-card-head,
.config-card-redes .config-card-head,
.config-card-google .config-card-head {
    margin-bottom: 0;
}
.config-section-title-agenda {
    /* Mergeado al título "Servicios y presencia pública". */
    display: none;
}
.config-card-defaults {
    grid-column: 1 / span 3;
    grid-row: 6;
}
.config-card {
    padding: 20px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: var(--surface);
    box-shadow: 0 22px 60px -50px color-mix(in srgb, var(--ink) 62%, transparent);
}
.config-card-photo,
.config-card-clinical,
.config-card-public,
.config-card-services,
.config-card-social,
.config-card-defaults,
.config-card-google {
    display: flex;
    flex-direction: column;
}
.config-card-head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 16px;
}
.config-step {
    width: 36px;
    height: 36px;
    display: inline-grid;
    place-items: center;
    border-radius: 12px;
    background: color-mix(in srgb, var(--accent-soft) 64%, var(--surface));
    color: var(--accent);
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 12px;
    font-weight: 850;
}
.config-card h2 {
    margin: 0;
    color: var(--ink);
    font-size: 18px;
    line-height: 1.1;
    font-weight: 650;
}
.config-card p {
    margin-top: 4px;
    color: var(--muted);
    font-size: 12.5px;
    line-height: 1.4;
}
.config-form-grid {
    grid-template-columns: minmax(92px, .42fr) minmax(0, 1fr);
}
.config-identity-grid {
    grid-template-columns: minmax(86px, .44fr) minmax(0, 1fr);
    gap: 16px 12px;
}
/* WhatsApp y CPSP cada uno en su propia fila · refactor 2026-05-08 (UX).
   Antes WhatsApp vivía en la columna chica (.44fr ≈ 120px) y el número
   "+51 999 999 999" no entraba · solo se veía "+51 | 987". Ahora los
   dos campos ocupan la fila completa · CPSP llega hasta el medio del
   row para mantener simetría visual con WhatsApp sin verse "huérfano". */
.config-identity-grid [data-profile-field="telefono"],
.config-identity-grid [data-profile-field="cpsp"] {
    grid-column: 1 / -1;
}
.config-identity-grid [data-profile-field="cpsp"] {
    max-width: 50%;
}
.config-clinical-grid {
    grid-template-columns: 1fr;
    gap: 26px;
}
.config-card-photo .profile-photo-uploader {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0 0 18px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}
.profile-photo-trigger {
    appearance: none;
    border: 0;
    background: transparent;
    padding: 0;
    cursor: pointer;
    flex: 0 0 auto;
}
.profile-photo-trigger:focus-visible .profile-photo-frame {
    outline: 3px solid color-mix(in srgb, var(--accent) 36%, transparent);
    outline-offset: 4px;
    border-radius: 50%;
}
.config-card-photo .profile-photo-frame,
.config-card-photo .profile-photo-preview {
    width: 64px;
    height: 64px;
}
.config-card-photo .profile-photo-preview {
    font-size: 20px;
}
.config-card-photo .profile-photo-badge {
    width: 26px;
    height: 26px;
    right: -2px;
    bottom: -2px;
    cursor: pointer;
}
.profile-photo-trigger:hover .profile-photo-badge {
    transform: scale(1.06);
    transition: transform .15s ease;
}
.profile-photo-copy {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.profile-photo-copy strong {
    color: var(--ink);
    font-size: 14px;
    font-weight: 700;
}
.profile-photo-copy small {
    color: var(--muted);
    font-size: 11.5px;
    background: transparent;
    border: 0;
    padding: 0;
    min-height: 0;
}
.profile-photo-remove {
    align-self: flex-start;
    margin-top: 4px;
    border: 0;
    background: transparent;
    padding: 0;
    color: var(--rose);
    font-size: 11.5px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.profile-photo-remove:hover { color: color-mix(in srgb, var(--rose) 80%, var(--ink)); }
.config-url-input span {
    min-width: 38px;
}
.config-public-link {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 14px 0 12px;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface-2);
}
.config-public-link-label {
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
}
.config-public-url {
    display: block;
    color: var(--accent);
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1.4;
    overflow-wrap: anywhere;
    text-decoration: none;
}
.config-public-url:hover { text-decoration: underline; text-underline-offset: 2px; }
.config-public-url.is-disabled {
    color: var(--muted);
    pointer-events: none;
}
.config-copy-btn { margin-bottom: 4px; }
.config-mini-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}
.config-card-defaults .config-mini-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 0;
}
.service-config-list,
.social-config-list {
    display: grid;
    gap: 12px;
}
.service-config-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 38px;
    gap: 12px;
    padding: 14px;
    border: 1px solid color-mix(in srgb, var(--accent) 14%, var(--line));
    border-radius: 16px;
    background: color-mix(in srgb, var(--surface-2) 52%, var(--surface));
    box-shadow: inset 0 1px 0 color-mix(in srgb, white 64%, transparent);
}
.service-config-main {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
}
.service-name-field,
.service-desc-field,
.service-meta-grid,
.service-rates {
    grid-column: 1 / -1;
}
.service-active-toggle {
    align-self: end;
    margin-bottom: 2px;
}
.service-name-field {
    grid-column: 1 / 2;
}
.service-meta-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 132px;
    gap: 10px;
}
.service-rates {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}
.service-rate-row {
    min-width: 0;
    display: grid;
    grid-template-columns: auto minmax(72px, 1fr) minmax(98px, .75fr);
    align-items: center;
    gap: 8px;
    padding: 10px;
    border: 1px solid color-mix(in srgb, var(--line) 86%, white);
    border-radius: 13px;
    background: color-mix(in srgb, var(--surface) 82%, white);
    color: var(--ink-2);
    font-size: 12.5px;
    font-weight: 780;
}
.service-rate-row .input-with-prefix {
    min-width: 0;
}
.service-rate-row input[type="checkbox"],
.config-toggle input[type="checkbox"] {
    accent-color: var(--accent);
}
.service-config-actions {
    display: grid;
    align-content: start;
    gap: 6px;
}
.icon-btn-soft {
    width: 34px;
    height: 34px;
    display: inline-grid;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--accent) 16%, var(--line));
    border-radius: 11px;
    background: color-mix(in srgb, var(--surface) 82%, white);
    color: var(--ink-2);
    cursor: pointer;
}
.icon-btn-soft:hover {
    border-color: color-mix(in srgb, var(--accent) 34%, var(--line));
    color: var(--accent);
    background: color-mix(in srgb, var(--accent-soft) 48%, var(--surface));
}
.icon-btn-soft.danger {
    border-color: color-mix(in srgb, var(--rose) 18%, var(--line));
    color: color-mix(in srgb, var(--rose) 76%, var(--ink));
}
.icon-btn-soft.danger:hover {
    border-color: color-mix(in srgb, var(--rose) 34%, var(--line));
    background: color-mix(in srgb, var(--rose) 8%, var(--surface));
}
.config-toggle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 34px;
    padding: 7px 10px;
    border: 1px solid color-mix(in srgb, var(--accent) 14%, var(--line));
    border-radius: 999px;
    background: color-mix(in srgb, var(--surface) 82%, white);
    color: var(--ink-2);
    font-size: 12px;
    font-weight: 820;
}
.social-config-row {
    display: grid;
    grid-template-columns: minmax(126px, .7fr) minmax(0, 1.2fr);
    gap: 9px;
    align-items: center;
    padding: 12px;
    border: 1px solid color-mix(in srgb, var(--accent) 12%, var(--line));
    border-radius: 15px;
    background: color-mix(in srgb, var(--surface-2) 48%, var(--surface));
    box-shadow: inset 0 1px 0 color-mix(in srgb, white 62%, transparent);
}
.social-config-row [data-social-url],
.social-config-row [data-social-handle] {
    grid-column: 1 / -1;
}
.social-config-row .config-toggle {
    justify-self: start;
}
.social-config-row .icon-btn-soft {
    justify-self: end;
}
.config-card-services > .btn-ghost,
.config-card-social > .btn-ghost {
    margin-top: 12px;
}
/* ===== Google Calendar (card 05) ====================================== */
.config-google-subtitle {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
}
.config-google-subtitle svg { color: var(--accent); flex: 0 0 13px; }

.gcal-panel {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    column-gap: 13px;
    row-gap: 12px;
    align-items: start;
    padding: 18px;
    border: 1px solid color-mix(in srgb, var(--accent) 16%, var(--line));
    border-radius: 14px;
    background:
        linear-gradient(180deg,
            color-mix(in srgb, var(--surface-2) 38%, var(--surface)) 0%,
            var(--surface) 100%);
    box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 70%, transparent);
}
.gcal-panel-on {
    border-color: color-mix(in srgb, var(--accent) 24%, var(--line));
    background:
        linear-gradient(180deg,
            color-mix(in srgb, var(--accent-soft) 28%, var(--surface)) 0%,
            color-mix(in srgb, var(--surface) 97%, var(--accent-soft)) 100%);
}
.gcal-panel-off {
    background:
        linear-gradient(180deg,
            color-mix(in srgb, var(--surface-2) 50%, var(--surface)) 0%,
            var(--surface) 100%);
}
.gcal-mark {
    width: 42px; height: 42px;
    display: grid; place-items: center;
    border-radius: 12px;
    border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--line));
    background: var(--surface);
    color: var(--accent);
    box-shadow: 0 14px 30px -24px color-mix(in srgb, var(--accent) 60%, transparent);
}
.gcal-mark-off {
    color: var(--ink-2);
    border-color: var(--line);
    box-shadow: none;
}
.gcal-body {
    display: flex; flex-direction: column; gap: 7px;
    min-width: 0;
}
.gcal-headline {
    display: flex; align-items: center; justify-content: space-between; gap: 9px; flex-wrap: wrap;
}
.gcal-headline strong {
    color: var(--ink);
    font-size: 15.5px;
    font-weight: 750;
    letter-spacing: 0;
    line-height: 1.1;
}
.gcal-status-pill {
    display: inline-flex; align-items: center; gap: 5px;
    min-height: 22px;
    padding: 2px 9px 2px 7px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--ok) 32%, var(--line));
    background: color-mix(in srgb, var(--ok-soft) 64%, var(--surface));
    color: color-mix(in srgb, var(--ok) 78%, var(--ink));
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.gcal-status-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--ok);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 20%, transparent);
}
.gcal-status-pill.is-pending {
    border-color: color-mix(in srgb, var(--warn) 30%, var(--line));
    background: color-mix(in srgb, var(--warm-soft) 60%, var(--surface));
    color: color-mix(in srgb, var(--warn) 78%, var(--ink));
}
.gcal-body p {
    margin: 0;
    color: var(--ink-2);
    font-size: 12.8px;
    line-height: 1.5;
    max-width: none;
}
.gcal-account {
    display: inline-flex; align-items: center; gap: 6px;
    margin-top: 2px;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid var(--line-soft);
    background: color-mix(in srgb, var(--surface) 86%, var(--bg));
    color: var(--ink-2);
    font-size: 11.5px;
    font-weight: 600;
    max-width: 100%;
    overflow: hidden;
}
.gcal-account svg { color: var(--muted); flex: 0 0 11px; }
.gcal-account span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
.gcal-actions {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
    justify-self: stretch;
    align-self: stretch;
    min-width: 0;
    padding-top: 12px;
    border-top: 1px dashed color-mix(in srgb, var(--accent) 18%, var(--line));
}
.gcal-actions-cta {
    grid-template-columns: minmax(0, 1fr);
    min-width: 0;
}
.gcal-reconnect {
    justify-content: center;
    min-height: 38px;
    padding: 8px 14px;
    font-size: 12.5px;
    font-weight: 700;
}
.gcal-reconnect svg { color: var(--muted); }
.gcal-disconnect {
    justify-self: end;
    min-height: 38px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    padding: 0 10px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .02em;
    cursor: pointer;
    text-decoration: none;
}
.gcal-disconnect:hover {
    color: var(--rose);
    border-color: color-mix(in srgb, var(--rose) 20%, var(--line));
    background: color-mix(in srgb, var(--rose) 7%, var(--surface));
}

@media (max-width: 720px) {
    .gcal-panel {
        grid-template-columns: 42px minmax(0, 1fr);
    }
    .gcal-actions {
        grid-template-columns: minmax(0, 1fr);
    }
    .gcal-disconnect { justify-self: stretch; }
}
.config-theme-seg button {
    min-height: 44px;
    font-size: 14px;
}
.config-theme-field {
    margin-top: 16px;
}
.config-card-google {
    overflow: hidden;
}
.google-connect-panel {
    display: grid;
    gap: 13px;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 17px;
    background:
        linear-gradient(180deg,
            color-mix(in srgb, var(--surface-2) 54%, var(--surface)) 0%,
            color-mix(in srgb, var(--surface) 92%, var(--surface-2)) 100%);
    box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 70%, transparent);
}
.google-connect-panel.is-connected {
    border-color: color-mix(in srgb, var(--accent) 25%, var(--line));
    background:
        linear-gradient(180deg,
            color-mix(in srgb, var(--accent-soft) 38%, var(--surface)) 0%,
            color-mix(in srgb, var(--surface) 92%, var(--accent-soft)) 100%);
}
.google-connect-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.google-connect-mark {
    width: 42px;
    height: 42px;
    display: inline-grid;
    place-items: center;
    border-radius: 14px;
    color: var(--accent);
    background: var(--surface);
    border: 1px solid color-mix(in srgb, var(--accent) 16%, var(--line));
    box-shadow: 0 14px 28px -24px color-mix(in srgb, var(--ink) 64%, transparent);
}
.google-connect-panel.is-connected .google-connect-mark {
    color: var(--accent);
    border-color: color-mix(in srgb, var(--accent) 20%, var(--line));
}
.google-connect-status {
    min-height: 28px;
    display: inline-flex;
    align-items: center;
    padding: 0 11px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--line));
    background: color-mix(in srgb, var(--surface) 88%, var(--accent-soft));
    color: var(--accent);
    font-size: 11px;
    line-height: 1;
    font-weight: 850;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.google-connect-panel.is-connected .google-connect-status {
    border-color: color-mix(in srgb, var(--accent) 22%, var(--line));
    color: var(--accent);
    background: color-mix(in srgb, var(--surface) 82%, var(--accent-soft));
}
.google-connect-copy {
    display: grid;
    gap: 5px;
}
.google-connect-copy strong {
    color: var(--ink);
    font-size: 18px;
    line-height: 1.08;
    font-weight: 850;
}
.google-connect-copy p {
    margin: 0;
    max-width: 42ch;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.45;
}
.google-connect-copy small {
    width: max-content;
    max-width: 100%;
    margin-top: 3px;
    padding: 5px 9px;
    border: 1px solid color-mix(in srgb, var(--accent) 14%, var(--line));
    border-radius: 999px;
    background: color-mix(in srgb, var(--surface) 82%, var(--accent-soft));
    color: var(--ink-2);
    font-size: 12px;
    font-weight: 740;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.google-connect-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    align-items: center;
    margin-top: 2px;
}
.google-connect-panel.is-connected .google-connect-actions {
    grid-template-columns: minmax(0, 1fr) minmax(168px, .78fr);
}
.google-signin-button {
    width: 100%;
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 0 15px;
    border: 1px solid #DADCE0;
    border-radius: 13px;
    background: #fff;
    color: #1f1f1f;
    font-family: Roboto, Arial, sans-serif;
    font-size: 13.5px;
    line-height: 20px;
    font-weight: 600;
    letter-spacing: 0;
    cursor: pointer;
    box-shadow:
        0 12px 28px -26px rgba(60, 64, 67, .46),
        inset 0 1px 0 rgba(255,255,255,.82);
    transition: background .16s ease, border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.google-signin-button span,
.google-disconnect-button span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.google-signin-button:hover {
    background: #f8fafd;
    border-color: #C5C8CD;
    box-shadow:
        0 14px 32px -24px rgba(60, 64, 67, .48),
        0 1px 3px rgba(60, 64, 67, .14);
    transform: translateY(-1px);
}
.google-signin-button:active {
    background: #f1f3f4;
    transform: none;
}
.google-signin-button:focus-visible {
    outline: 2px solid #1a73e8;
    outline-offset: 2px;
}
.google-signin-icon {
    flex: 0 0 18px;
}
.google-disconnect-button {
    width: 100%;
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 12px;
    border: 1px solid color-mix(in srgb, var(--rose) 16%, var(--line));
    border-radius: 12px;
    background: color-mix(in srgb, var(--surface) 95%, var(--rose) 3%);
    color: color-mix(in srgb, var(--rose) 54%, var(--ink-2));
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 760;
    letter-spacing: 0;
    cursor: pointer;
    transition: background .16s ease, border-color .16s ease, color .16s ease, transform .16s ease, box-shadow .16s ease;
}
.google-disconnect-button:hover {
    background: color-mix(in srgb, var(--rose) 7%, var(--surface));
    border-color: color-mix(in srgb, var(--rose) 30%, var(--line));
    color: var(--rose);
    box-shadow: 0 12px 28px -26px color-mix(in srgb, var(--rose) 38%, transparent);
    transform: translateY(-1px);
}
.google-disconnect-button:active {
    background: color-mix(in srgb, var(--rose) 12%, transparent);
    transform: none;
}
.google-disconnect-button:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--rose) 55%, transparent);
    outline-offset: 2px;
}
.google-disconnect-button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}
.google-disconnect-icon {
    flex: 0 0 15px;
    color: var(--muted);
    transition: color .16s ease;
}
.google-disconnect-button:hover .google-disconnect-icon {
    color: var(--rose);
}
.profile-photo-uploader {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
    margin-bottom: 22px;
    padding: 16px;
    border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--line));
    border-radius: 18px;
    background:
        linear-gradient(135deg,
            color-mix(in srgb, var(--accent-soft) 44%, var(--surface)) 0,
            var(--surface) 72%);
    box-shadow: 0 18px 44px -38px color-mix(in srgb, var(--ink) 56%, transparent);
    transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.profile-photo-uploader.is-loading {
    border-color: color-mix(in srgb, var(--accent) 34%, var(--line));
    box-shadow: 0 22px 54px -40px color-mix(in srgb, var(--accent) 66%, transparent);
}
.profile-photo-frame {
    position: relative;
    width: 84px;
    height: 84px;
}
.profile-photo-preview {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    overflow: hidden;
    background:
        radial-gradient(circle at 34% 24%, color-mix(in srgb, white 55%, transparent) 0, transparent 38%),
        var(--accent-soft);
    color: var(--accent);
    border: 2px solid var(--surface);
    outline: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line));
    font-family: 'Fraunces', serif;
    font-size: 27px;
    font-weight: 650;
}
.profile-photo-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.profile-photo-badge {
    position: absolute;
    right: -2px;
    bottom: -2px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: white;
    background: var(--accent);
    border: 2px solid var(--surface);
    box-shadow: 0 10px 24px -16px color-mix(in srgb, var(--ink) 78%, transparent);
}
.profile-photo-copy {
    min-width: 0;
}
.profile-photo-copy strong {
    display: block;
    color: var(--ink);
    font-size: 14px;
    font-weight: 780;
}
.profile-photo-copy p {
    margin-top: 3px;
    color: var(--muted);
    font-size: 12.5px;
    line-height: 1.35;
}
.profile-photo-copy small {
    display: inline-flex;
    align-items: center;
    margin-top: 7px;
    min-height: 24px;
    padding: 3px 9px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--surface-2) 76%, var(--surface));
    color: var(--ink-2);
    border: 1px solid var(--line-soft);
    font-size: 11px;
    font-weight: 760;
}
.profile-photo-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}
.profile-photo-actions button {
    min-height: 40px;
    gap: 7px;
}
.btn-danger-soft {
    color: var(--rose);
    border-color: color-mix(in srgb, var(--rose) 22%, var(--line));
    background: color-mix(in srgb, var(--rose) 8%, var(--surface));
}
.btn-danger-soft:hover {
    background: color-mix(in srgb, var(--rose) 12%, var(--surface));
}
@media (max-width: 1180px) {
    .config-grid {
        grid-template-columns: 1fr;
    }
    .config-side {
        display: grid;
        gap: 18px;
    }
    .config-card-main,
    .config-card-photo,
    .config-card-clinical,
    .config-card-public,
    .config-card-services,
    .config-card-services-summary,
    .config-card-social,
    .config-card-redes,
    .config-side,
    .config-side .config-card-public,
    .config-side .config-card-defaults,
    .config-side .config-card-google,
    .config-side > .config-section-title,
    .config-card-defaults,
    .config-section-title-services,
    .config-section-title-agenda,
    .config-card-google,
    .config-grid > .config-card-google {
        grid-column: auto;
        grid-row: auto;
    }
    .config-card-photo,
    .config-card-clinical,
    .config-card-public,
    .config-card-services,
    .config-card-services-summary,
    .config-card-social,
    .config-card-redes,
    .config-card-defaults,
    .config-card-google {
        min-height: 0;
    }
    .config-card-photo .profile-photo-uploader,
    .config-card-clinical .config-clinical-grid,
    .config-card-public > .field-wrap:first-of-type,
    .config-card-services > .field-wrap,
    .config-card-social > .field-wrap,
    .config-card-defaults .config-mini-grid,
    .config-card-google .google-connect-panel {
        margin-top: 0;
    }
    .config-side .config-card-google .google-connect-panel,
    .config-card-google .google-connect-panel {
        grid-template-columns: 1fr;
        align-items: stretch;
    }
    .config-side .config-card-google .google-connect-top,
    .config-card-google .google-connect-top {
        justify-content: space-between;
    }
    .config-side .config-card-google .google-connect-actions,
    .config-card-google .google-connect-actions {
        justify-self: stretch;
        width: 100%;
    }
}
@media (max-width: 760px) {
    .profile-photo-uploader {
        grid-template-columns: auto minmax(0, 1fr);
        align-items: start;
    }
    .profile-photo-actions {
        grid-column: 1 / -1;
        justify-content: stretch;
    }
    .profile-photo-actions button {
        flex: 1 1 140px;
        justify-content: center;
    }
}

/* ===== Cobros ============================================================= */
.cobros-page {
    background:
        linear-gradient(180deg,
            color-mix(in srgb, var(--accent-soft) 18%, transparent) 0,
            transparent 260px);
}

/* ═══════════════════════════════════════════════════════════════════
   /cobros · KPIs rediseñados (2026-05-08 UX)
   ───────────────────────────────────────────────────────────────────
   Antes: cobro-summary-card con bg de color saturado (warn/danger/ok)
   y borde tonal · se sentían como banners de alerta gritando estado.

   Ahora: card-solid sutiles con icon coloreado por estado (no bg
   saturado) + monto grande mono + detalle contextual. El tono solo
   vive en el icono y un acento sutil en la esquina superior, así el
   monto puede leerse en negro neutro y los 3 cards se sientan como
   un set coherente, no como 3 alertas distintas. */
.cobros-kpi-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}
.cobros-kpi-card {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto auto;
    column-gap: 12px;
    row-gap: 2px;
    align-items: center;
    padding: 16px 18px;
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid rgba(17, 24, 39, 0.08);
    border-radius: 14px;
    box-shadow: 0 12px 28px rgba(17, 24, 39, 0.04);
    transition: transform .12s ease, box-shadow .12s ease;
}
.cobros-kpi-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 32px rgba(17, 24, 39, 0.06);
}
.cobros-kpi-icon {
    grid-row: 1 / 3;
    grid-column: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    flex-shrink: 0;
}
.cobros-kpi-card-warn .cobros-kpi-icon {
    background: rgba(245, 158, 11, 0.12);
    color: #B45309;
}
.cobros-kpi-card-danger .cobros-kpi-icon {
    background: rgba(239, 68, 68, 0.12);
    color: #B91C1C;
}
.cobros-kpi-card-ok .cobros-kpi-icon {
    background: rgba(16, 185, 129, 0.12);
    color: #047857;
}
.cobros-kpi-label {
    grid-row: 1;
    grid-column: 2;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted, #6B7B7E);
}
.cobros-kpi-value {
    grid-row: 2;
    grid-column: 2;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.05;
    color: var(--ink, #14272B);
    letter-spacing: -0.01em;
}
.cobros-kpi-detail {
    grid-row: 3;
    grid-column: 1 / -1;
    margin-top: 6px;
    font-size: 12px;
    color: var(--muted, #6B7B7E);
}
@media (max-width: 760px) {
    .cobros-kpi-grid {
        grid-template-columns: 1fr;
    }
}
.cobros-shell {
    padding: 24px 32px 40px;
    max-width: 1320px;
}
.cobro-whatsapp-cta {
    min-height: 42px;
    gap: 8px;
    color: color-mix(in srgb, var(--whatsapp) 82%, var(--ink));
    border-color: color-mix(in srgb, var(--whatsapp) 22%, var(--line));
    background: color-mix(in srgb, var(--whatsapp) 7%, var(--surface));
    box-shadow: 0 14px 34px -30px color-mix(in srgb, var(--whatsapp) 70%, transparent);
}
.cobro-whatsapp-cta:hover {
    color: color-mix(in srgb, var(--whatsapp) 88%, var(--ink));
    border-color: color-mix(in srgb, var(--whatsapp) 34%, var(--line));
    background: color-mix(in srgb, var(--whatsapp) 11%, var(--surface));
}
.cobro-whatsapp-cta svg {
    color: var(--whatsapp);
}
.cobro-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}
.cobro-summary-card {
    min-height: 118px;
    display: grid;
    align-content: center;
    gap: 6px;
    padding: 20px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--surface);
    box-shadow: 0 18px 54px -46px color-mix(in srgb, var(--ink) 58%, transparent);
}
.cobro-summary-card span {
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.cobro-summary-card strong {
    color: var(--ink);
    font-family: 'Lora', Georgia, serif;
    font-size: 30px;
    line-height: 1;
    font-weight: 650;
}
.cobro-summary-card small {
    color: var(--muted);
    font-size: 12.5px;
}
.cobro-summary-card.is-warn { border-color: color-mix(in srgb, var(--warm) 24%, var(--line)); }
.cobro-summary-card.is-danger { border-color: color-mix(in srgb, var(--rose) 24%, var(--line)); }
.cobro-summary-card.is-ok { border-color: color-mix(in srgb, var(--ok) 24%, var(--line)); }

/* ===== REPORTES PREMIUM =================================================== */
.report-module-header {
    padding-bottom: 18px;
}
.report-module-copy {
    color: var(--muted);
    line-height: 1.45;
}
.report-period-badge {
    font-size: 11px;
    border-color: color-mix(in srgb, var(--accent) 34%, var(--line));
    background: color-mix(in srgb, var(--surface) 70%, var(--accent-soft));
    color: color-mix(in srgb, var(--accent) 88%, var(--ink));
}
.report-export-button {
    min-height: 46px;
    gap: 9px;
    padding: 0 18px;
    border: 1px solid color-mix(in srgb, var(--accent) 48%, var(--line));
    border-radius: 13px;
    background:
        linear-gradient(180deg,
            color-mix(in srgb, white 10%, transparent) 0%,
            transparent 100%),
        color-mix(in srgb, var(--accent) 88%, var(--ink));
    color: white;
    box-shadow: 0 18px 42px -32px color-mix(in srgb, var(--accent) 88%, var(--ink));
}
.report-export-button:hover {
    border-color: color-mix(in srgb, white 20%, var(--accent));
    background:
        linear-gradient(180deg,
            color-mix(in srgb, white 14%, transparent) 0%,
            transparent 100%),
        color-mix(in srgb, var(--accent) 82%, var(--ink));
    transform: translateY(-1px);
}
.report-export-button svg {
    flex: 0 0 auto;
}
.report-export-button-ghost {
    min-height: 38px;
    padding: 0 13px;
    background: color-mix(in srgb, var(--surface) 82%, var(--accent-soft));
    color: var(--accent);
    border-color: color-mix(in srgb, var(--accent) 22%, var(--line));
    box-shadow: none;
}
.report-export-button-ghost:hover {
    background: color-mix(in srgb, var(--accent-soft) 52%, var(--surface));
    color: color-mix(in srgb, var(--accent) 86%, var(--ink));
}
.report-period-row {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}
.report-control-label {
    color: var(--muted);
    font-size: 11px;
    font-weight: 850;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.report-periods {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px;
    border: 1px solid color-mix(in srgb, var(--line) 78%, transparent);
    border-radius: 16px;
    background: color-mix(in srgb, var(--surface) 76%, transparent);
    box-shadow: inset 0 1px 0 color-mix(in srgb, white 42%, transparent);
}
.report-period-option,
.report-section-link {
    box-sizing: border-box;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 38px;
    border: 1px solid transparent;
    text-decoration: none;
    white-space: nowrap;
    transition: background .16s ease, border-color .16s ease, color .16s ease, transform .16s ease, box-shadow .16s ease;
}
.report-period-option {
    padding: 0 13px;
    border-radius: 12px;
    color: var(--ink-2);
    font-size: 13px;
    font-weight: 780;
}
.report-period-option:hover {
    background: color-mix(in srgb, var(--accent-soft) 32%, var(--surface));
    color: var(--ink);
}
.report-period-option.active {
    border-color: color-mix(in srgb, var(--accent) 32%, var(--line));
    background: var(--surface);
    color: color-mix(in srgb, var(--accent) 86%, var(--ink));
    box-shadow: 0 10px 28px -24px color-mix(in srgb, var(--accent) 68%, var(--ink));
}
.report-control-icon {
    width: 24px;
    height: 24px;
    border-radius: 8px;
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    color: currentColor;
    background: color-mix(in srgb, currentColor 8%, var(--surface));
}
.report-period-option.active .report-control-icon {
    background: color-mix(in srgb, var(--accent-soft) 64%, var(--surface));
}
.report-chart-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.72fr) minmax(280px, 0.72fr);
    gap: 18px;
}
.report-subnav {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
}
.report-section-nav {
    gap: 10px;
}
.report-section-link {
    --report-tone: var(--accent);
    padding: 7px 13px 7px 9px;
    border-radius: 14px;
    border-color: color-mix(in srgb, var(--report-tone) 14%, var(--line));
    background: color-mix(in srgb, var(--surface) 90%, transparent);
    color: var(--ink-2);
    font-size: 13px;
    font-weight: 820;
    box-shadow: 0 10px 30px -28px color-mix(in srgb, var(--ink) 48%, transparent);
}
.report-section-link:hover {
    border-color: color-mix(in srgb, var(--report-tone) 30%, var(--line));
    background: color-mix(in srgb, var(--report-tone) 9%, var(--surface));
    color: var(--ink);
    transform: translateY(-1px);
}
.report-section-link.active {
    border-color: color-mix(in srgb, var(--report-tone) 46%, var(--line));
    background:
        linear-gradient(180deg,
            color-mix(in srgb, white 12%, transparent),
            transparent),
        color-mix(in srgb, var(--report-tone) 14%, var(--surface));
    color: color-mix(in srgb, var(--report-tone) 82%, var(--ink));
    box-shadow: 0 16px 38px -30px color-mix(in srgb, var(--report-tone) 58%, var(--ink));
}
.report-section-link .report-control-icon {
    background: color-mix(in srgb, var(--report-tone) 11%, var(--surface));
    color: color-mix(in srgb, var(--report-tone) 82%, var(--ink));
}
.report-section-link.active .report-control-icon {
    background: color-mix(in srgb, var(--report-tone) 18%, var(--surface));
}
.report-section-resumen { --report-tone: var(--accent); }
.report-section-finanzas { --report-tone: var(--ok); }
.report-section-pacientes { --report-tone: #7C5AC7; }
.report-section-operacion { --report-tone: var(--warm); }
.report-section-detalle { --report-tone: var(--ink-2); }
.nav-children {
    display: grid;
    gap: 3px;
    margin: 4px 0 8px 34px;
    padding-left: 12px;
    border-left: 1px solid color-mix(in srgb, var(--line) 82%, transparent);
}
.nav-children a {
    display: block;
    padding: 5px 8px;
    border-radius: 8px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 650;
    text-decoration: none;
}
.nav-children a:hover {
    color: var(--ink-2);
    background: color-mix(in srgb, var(--surface-2) 58%, transparent);
}
.nav-children a.active {
    color: var(--accent);
    background: color-mix(in srgb, var(--accent-soft) 48%, transparent);
}
.report-chart-card {
    position: relative;
    min-width: 0;
    border: 1px solid color-mix(in srgb, var(--line) 82%, transparent);
    border-radius: 8px;
    background: color-mix(in srgb, var(--surface) 94%, transparent);
    box-shadow: 0 18px 48px -42px color-mix(in srgb, var(--ink) 62%, transparent);
    overflow: hidden;
}
.report-chart-card::before {
    content: "";
    position: absolute;
    inset: auto -36px -48px auto;
    width: 150px;
    height: 110px;
    pointer-events: none;
    background:
        radial-gradient(closest-side at 38% 50%,
            color-mix(in srgb, var(--accent) 11%, transparent) 0 55%, transparent 56%),
        radial-gradient(closest-side at 62% 50%,
            color-mix(in srgb, var(--warm) 9%, transparent) 0 55%, transparent 56%);
    opacity: .72;
}
.report-chart-card-wide { min-height: 308px; }
.report-chart-head {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 20px 0;
}
.report-chart-head p {
    margin-top: 2px;
    color: var(--muted);
    font-size: 12.5px;
    line-height: 1.45;
}
.report-chart {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 260px;
    padding: 6px 10px 14px;
}
.report-chart-compact { height: 236px; }
.mandorla-chart-loader {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    pointer-events: none;
    opacity: .78;
}
.mandorla-chart-loader span {
    position: absolute;
    width: 34px;
    height: 34px;
    border: 2px solid var(--accent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--surface) 48%, transparent);
}
.mandorla-chart-loader span:first-child {
    transform: translateX(-10px);
    animation: reportMandorlaLeft 1.45s cubic-bezier(.45,0,.2,1) infinite;
}
.mandorla-chart-loader span:last-child {
    transform: translateX(10px);
    animation: reportMandorlaRight 1.45s cubic-bezier(.45,0,.2,1) infinite;
}
.report-chart.is-ready .mandorla-chart-loader { display: none; }
@keyframes reportMandorlaLeft {
    0%, 100% { transform: translateX(-13px); opacity: .38; }
    48%, 56% { transform: translateX(5px); opacity: .78; }
}
@keyframes reportMandorlaRight {
    0%, 100% { transform: translateX(13px); opacity: .38; }
    48%, 56% { transform: translateX(-5px); opacity: .78; }
}

@media (max-width: 1180px) {
    .report-chart-grid { grid-template-columns: 1fr 1fr; }
    .report-chart-card-wide { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
    .report-period-row {
        align-items: flex-start;
        gap: 9px;
    }
    .report-periods,
    .report-section-nav {
        width: 100%;
        max-width: 100%;
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
    }
    .report-periods::-webkit-scrollbar,
    .report-section-nav::-webkit-scrollbar {
        display: none;
    }
    .report-period-option,
    .report-section-link {
        flex: 0 0 auto;
    }
    .report-export-button {
        width: 100%;
        justify-content: center;
    }
    .report-chart-grid,
    .grid.lg\:grid-cols-2:has(.report-chart-card) {
        grid-template-columns: 1fr;
    }
    .report-chart { height: 240px; }
    .report-chart-head { padding: 16px 16px 0; }
}

/* ===== MENSAJERIA · VISTA GENERAL ======================================== */
.chat-dashboard-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}
.chat-dashboard-section-title {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 4px;
    padding: 2px 2px 0;
}
.chat-dashboard-section-title + .chat-shot-card {
    margin-top: 0;
}
.chat-dashboard-section-title strong {
    color: var(--ink);
    font-size: 12px;
    font-weight: 850;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.chat-dashboard-section-title span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 720;
}
.chat-shot-card {
    min-width: 0;
    border: 1px solid color-mix(in srgb, var(--line) 86%, transparent);
    border-radius: 8px;
    background:
        linear-gradient(180deg,
            color-mix(in srgb, var(--surface) 96%, transparent),
            color-mix(in srgb, var(--surface-2) 38%, var(--surface)));
    overflow: hidden;
    box-shadow: 0 18px 44px -40px color-mix(in srgb, var(--ink) 70%, transparent);
}
.chat-shot-top {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    padding: 13px 14px;
    border-bottom: 1px solid color-mix(in srgb, var(--line-soft) 86%, transparent);
}
.chat-shot-recipient {
    min-width: 0;
    display: grid;
    gap: 1px;
}
.chat-shot-recipient em {
    color: var(--muted);
    font-size: 9.5px;
    font-style: normal;
    font-weight: 850;
    letter-spacing: .11em;
    text-transform: uppercase;
}
.chat-shot-top strong {
    display: block;
    color: var(--ink);
    font-size: 13.5px;
    font-weight: 750;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.chat-shot-top small {
    display: block;
    margin-top: 1px;
    color: var(--muted);
    font-size: 11.5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.chat-card-badges {
    grid-column: 1 / -1;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    gap: 6px;
    flex-wrap: wrap;
    padding-left: 48px;
}
.chat-card-badges .pill,
.chat-card-badges .msg-status-pill {
    margin: 0;
}
.chat-shot-screen {
    display: grid;
    gap: 9px;
    min-height: 178px;
    align-content: center;
    padding: 18px 16px;
    background:
        radial-gradient(80% 70% at 12% 12%,
            color-mix(in srgb, var(--accent-soft) 34%, transparent) 0,
            transparent 62%),
        color-mix(in srgb, var(--surface) 78%, var(--bg));
}
.chat-bubble {
    max-width: 86%;
    padding: 9px 11px;
    border-radius: 8px;
    color: var(--ink-2);
    font-size: 12.5px;
    line-height: 1.42;
    box-shadow: 0 10px 24px -22px color-mix(in srgb, var(--ink) 62%, transparent);
}
.chat-bubble.is-in {
    justify-self: start;
    background: var(--surface);
    border: 1px solid var(--line-soft);
    opacity: .48;
    filter: blur(1.8px);
    user-select: none;
    transition: opacity .16s ease, filter .16s ease;
}
.chat-shot-card:hover .chat-bubble.is-in {
    opacity: .62;
    filter: blur(1px);
}
.chat-bubble.is-out {
    justify-self: end;
    color: var(--accent-fg);
    background: var(--accent);
}
.chat-bubble.is-suggestion {
    justify-self: end;
    max-width: 78%;
    padding: 7px 10px;
    color: var(--accent);
    background: color-mix(in srgb, var(--accent-soft) 62%, var(--surface));
    border: 1px dashed color-mix(in srgb, var(--accent) 28%, var(--line));
    box-shadow: none;
    font-size: 11.5px;
    font-weight: 760;
}
.chat-bubble.is-suggestion::before {
    content: "Sugerencia · ";
    color: var(--muted);
    font-weight: 800;
}
.chat-bubble.is-note {
    justify-self: center;
    max-width: 92%;
    padding: 6px 9px;
    color: var(--muted);
    font-size: 11px;
    background: color-mix(in srgb, var(--surface) 82%, transparent);
    border: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
}
.chat-shot-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    color: var(--muted);
    font-size: 11.5px;
}
.chat-shot-foot > span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.chat-shot-card.is-history .chat-bubble.is-out {
    color: var(--ink-2);
    background: color-mix(in srgb, var(--accent-soft) 52%, var(--surface));
    border: 1px solid color-mix(in srgb, var(--accent) 14%, var(--line));
}
.chat-shot-warn { border-color: color-mix(in srgb, var(--warn) 26%, var(--line)); }
.chat-shot-rose { border-color: color-mix(in srgb, var(--rose) 28%, var(--line)); }
.chat-shot-ok { border-color: color-mix(in srgb, var(--ok) 22%, var(--line)); }
.chat-shot-accent { border-color: color-mix(in srgb, var(--accent) 24%, var(--line)); }

@media (max-width: 1180px) {
    .chat-dashboard-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
    .chat-dashboard-grid { grid-template-columns: 1fr; }
    .chat-shot-screen { min-height: 150px; }
}
.cobro-command-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 16px;
    align-items: center;
    margin-bottom: 18px;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--surface) 90%, var(--accent-soft)) 0%, var(--surface) 68%);
    box-shadow: 0 24px 70px -58px color-mix(in srgb, var(--ink) 70%, transparent);
}
.cobro-command-panel.is-ok {
    border-color: color-mix(in srgb, var(--ok) 22%, var(--line));
}
.cobro-command-panel.is-warn {
    border-color: color-mix(in srgb, var(--warn) 28%, var(--line));
}
.cobro-command-panel.is-danger {
    border-color: color-mix(in srgb, var(--rose) 30%, var(--line));
}
.cobro-command-copy {
    min-width: 0;
    display: grid;
    gap: 5px;
}
.cobro-command-kicker {
    color: var(--muted);
    font-size: 11px;
    line-height: 1;
    font-weight: 900;
    letter-spacing: .13em;
    text-transform: uppercase;
}
.cobro-command-copy strong {
    color: var(--ink);
    font-size: 19px;
    line-height: 1.16;
    font-weight: 850;
}
.cobro-command-copy small {
    color: var(--ink-2);
    font-size: 13px;
    line-height: 1.38;
}
.cobro-command-metrics {
    display: flex;
    align-items: stretch;
    gap: 8px;
}
.cobro-command-metrics span {
    min-width: 92px;
    display: grid;
    gap: 2px;
    padding: 10px 12px;
    border-radius: 13px;
    background: color-mix(in srgb, var(--surface-2) 64%, var(--surface));
}
.cobro-command-metrics b {
    color: var(--ink);
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 18px;
    line-height: 1;
    font-weight: 850;
}
.cobro-command-metrics small {
    color: var(--muted);
    font-size: 10.5px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.cobros-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 14px;
}
.cobro-filters {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.cobro-filters button {
    min-height: 36px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface);
    color: var(--ink-2);
    padding: 0 14px;
    font-size: 12.5px;
    font-weight: 750;
    cursor: pointer;
}
.cobro-filters button.active {
    color: var(--accent);
    border-color: color-mix(in srgb, var(--accent) 28%, var(--line));
    background: var(--accent-soft);
}
.cobro-search {
    width: min(420px, 100%);
    flex: 0 1 420px;
}
.cobro-search .pat-search-input {
    padding-right: 44px;
}
.cobro-search .pat-search-clear {
    right: 12px;
}
.cobro-list {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--surface);
    box-shadow: 0 22px 70px -62px color-mix(in srgb, var(--ink) 65%, transparent);
}
.cobro-list-head {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) 130px 120px minmax(250px, auto);
    gap: 16px;
    padding: 12px 18px;
    border-bottom: 1px solid var(--line-soft);
    background: color-mix(in srgb, var(--surface-2) 48%, var(--surface));
    color: var(--muted);
    font-size: 10.5px;
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.cobro-row {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) 130px 120px minmax(250px, auto);
    align-items: center;
    gap: 16px;
    padding: 16px 18px;
    border-bottom: 1px solid var(--line-soft);
}
.cobro-row.is-overdue {
    background: color-mix(in srgb, var(--rose) 5%, var(--surface));
}
.cobro-row.is-pending {
    background: color-mix(in srgb, var(--warn-soft) 18%, var(--surface));
}
.cobro-row.is-paid .cobro-actions .btn-ghost {
    background: var(--surface);
}
.cobro-row:last-child {
    border-bottom: none;
}
.cobro-row:hover {
    background: color-mix(in srgb, var(--accent-soft) 14%, var(--surface));
}
.cobro-person {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 12px;
}
.cobro-person strong {
    display: block;
    color: var(--ink);
    font-size: 14px;
    font-weight: 800;
}
.cobro-person small,
.cobro-money small {
    display: block;
    margin-top: 3px;
    color: var(--muted);
    font-size: 12.5px;
}
.cobro-money strong {
    color: var(--ink);
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 14px;
}
.cobro-status {
    justify-self: start;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
}
.cobro-status.is-paid { color: var(--ok); background: var(--ok-soft); }
.cobro-status.is-pending { color: var(--warm); background: var(--warm-soft); }
.cobro-status.is-overdue { color: var(--rose); background: color-mix(in srgb, var(--rose) 12%, var(--surface)); }
.cobro-status.is-muted { color: var(--muted); background: var(--surface-2); }
.cobro-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}
.cobro-actions .btn-primary,
.cobro-actions .btn-ghost {
    min-height: 36px;
    padding: 8px 12px;
    font-size: 12.5px;
}
.cobro-actions .btn-primary {
    min-width: 124px;
}
.cobro-actions .btn-ghost[href*="/cita/"] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--ink-2);
    background: color-mix(in srgb, var(--surface-2) 42%, var(--surface));
}
.cobro-actions .btn-ghost[href*="/cita/"]:hover {
    color: var(--accent);
    border-color: color-mix(in srgb, var(--accent) 30%, var(--line));
    background: color-mix(in srgb, var(--accent-soft) 36%, var(--surface));
}
.cobro-actions .btn-ghost[href*="/cita/"] svg {
    transition: transform .16s ease;
}
.cobro-actions .btn-ghost[href*="/cita/"]:hover svg {
    transform: translateX(2px);
}
.cobro-filter-empty {
    padding: 54px 28px;
    color: var(--ink-2);
    border-top: 1px solid var(--line-soft);
}
.cobro-filter-empty svg {
    opacity: .72;
}
.cobro-filter-empty strong {
    display: block;
    color: var(--ink);
    font-size: 15px;
    font-weight: 850;
}
.cobro-filter-empty span {
    display: block;
    margin-top: 5px;
    color: var(--muted);
    font-size: 13px;
}

/* ===== Detalle de cita premium =========================================== */
.cita-detail-page {
    background:
        linear-gradient(180deg,
            color-mix(in srgb, var(--accent-soft) 24%, transparent) 0,
            transparent 280px);
}
.cita-detail-page .breadcrumb,
.cita-detail-page > section {
    max-width: 1320px;
    margin-inline: auto;
}
.cita-hero-card {
    padding: 20px !important;
    border-color: color-mix(in srgb, var(--accent) 18%, var(--line));
    box-shadow: 0 28px 80px -54px color-mix(in srgb, var(--accent) 70%, transparent);
}
.cita-hero-card::after {
    content: "";
    position: absolute;
    left: 24px;
    right: 24px;
    bottom: 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent,
        color-mix(in srgb, var(--accent) 28%, transparent),
        transparent);
}
.cita-hero-metrics {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
}
.cita-hero-metrics span {
    min-width: 122px;
    display: grid;
    gap: 3px;
    padding: 9px 11px;
    border: 1px solid color-mix(in srgb, var(--accent) 13%, var(--line));
    border-radius: 12px;
    background: color-mix(in srgb, var(--surface) 90%, var(--accent-soft));
}
.cita-hero-metrics b {
    color: var(--ink);
    font-size: 12.5px;
    line-height: 1.1;
    overflow-wrap: anywhere;
}
.cita-hero-metrics small {
    color: var(--muted);
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .11em;
    text-transform: uppercase;
}
.cita-detail-grid {
    align-items: start;
    grid-template-columns: minmax(280px, .76fr) minmax(0, 1.24fr);
}
.cita-premium-card {
    border-color: color-mix(in srgb, var(--accent) 12%, var(--line));
    box-shadow: 0 18px 54px -44px color-mix(in srgb, var(--ink) 58%, transparent);
}
.cita-detail-page .cita-premium-card {
    border-radius: 16px;
}
.cita-detail-page h1.serif {
    font-size: 22px !important;
    line-height: 1.05 !important;
}
.cita-detail-page .av-lg {
    width: 52px;
    height: 52px;
    font-size: 18px;
}
.cita-action-row {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(188px, 1fr));
    align-items: stretch;
}
.cita-actions-card .cita-action-row > .btn-primary,
.cita-actions-card .cita-action-row > .btn-ghost {
    box-sizing: border-box;
    min-height: 44px;
    width: 100%;
    justify-content: center;
    padding-inline: 18px;
    font-size: 13.5px;
    font-weight: 750;
}
.cita-actions-card .cita-action-row > .ux-action-menu {
    box-sizing: border-box;
    min-width: 0;
    width: 100%;
}
.cita-actions-card .cita-action-row > .ux-action-menu > summary {
    box-sizing: border-box;
    min-height: 44px;
    width: 100%;
    justify-content: center;
    padding-inline: 18px;
    font-size: 13.5px;
    font-weight: 750;
}
.cita-more-summary svg {
    transition: transform .16s ease;
}
.cita-more-menu[open] .cita-more-summary svg {
    transform: rotate(180deg);
}
.cita-action-menu-panel {
    width: 320px;
    padding: 10px;
    gap: 6px;
}
.ux-action-menu-panel .cita-menu-item {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    padding: 10px;
    min-height: 58px;
}
.cita-menu-icon {
    width: 36px;
    height: 36px;
    border-radius: 11px;
    display: grid;
    place-items: center;
    color: var(--accent);
    background: color-mix(in srgb, var(--accent-soft) 64%, var(--surface));
}
.cita-menu-item strong {
    display: block;
    color: var(--ink);
    font-size: 13.5px;
    line-height: 1.15;
}
.cita-menu-item small {
    display: block;
    margin-top: 3px;
    color: var(--muted);
    font-size: 11.5px;
    line-height: 1.3;
    font-weight: 600;
}
.cita-menu-item.is-danger .cita-menu-icon {
    color: var(--rose);
    background: color-mix(in srgb, var(--rose) 12%, var(--surface));
}
.cita-menu-item.is-danger strong {
    color: var(--rose);
}
.cita-payment-note {
    margin-top: 14px;
}
.cita-wa-layer .msg-sheet {
    box-shadow: 0 34px 110px -46px color-mix(in srgb, var(--accent) 75%, transparent);
}

@media (max-width: 1180px) {
    .cita-detail-grid {
        grid-template-columns: 1fr;
    }
    .availability-guides,
    .cobro-summary-grid {
        grid-template-columns: 1fr;
    }
    .cobro-command-panel {
        grid-template-columns: 1fr;
    }
    .cobro-command-metrics {
        width: 100%;
        overflow-x: auto;
        padding-bottom: 2px;
        scrollbar-width: none;
    }
    .cobro-command-metrics::-webkit-scrollbar { display: none; }
    .cobro-command-panel > .btn-primary,
    .cobro-command-panel > .btn-ghost {
        width: 100%;
        justify-content: center;
    }
    .cobro-list-head {
        display: none;
    }
    .cobro-row {
        grid-template-columns: minmax(220px, 1fr) 110px 110px;
    }
    .cobro-actions {
        grid-column: 1 / -1;
        justify-content: stretch;
    }
    .cobro-actions .btn-primary,
    .cobro-actions .btn-ghost {
        flex: 1 1 150px;
        justify-content: center;
    }
    .msg-shell {
        grid-template-columns: 1fr;
    }
    .msg-side {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .msg-template-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 901px) {
    .msg-sheet-layer {
        left: var(--sidebar-width);
        width: calc(100vw - var(--sidebar-width));
    }
    .post-create-layer {
        left: var(--sidebar-width);
        width: calc(100vw - var(--sidebar-width));
        padding-left: 24px;
    }
    .post-create-sheet {
        width: min(640px, calc(100vw - var(--sidebar-width) - 64px));
    }
    .modal-backdrop {
        box-sizing: border-box;
        left: var(--sidebar-width);
        width: calc(100vw - var(--sidebar-width));
        padding-left: 20px;
    }
}

@media (min-width: 861px) {
    .public-booking {
        position: relative;
        padding: 44px max(48px, calc((100vw - 1240px) / 2 + 48px)) 52px;
        isolation: isolate;
        background:
            linear-gradient(180deg,
                color-mix(in srgb, var(--bg) 72%, white) 0%,
                color-mix(in srgb, var(--surface-2) 62%, var(--bg)) 52%,
                color-mix(in srgb, var(--bg) 78%, white) 100%);
    }
    .public-booking::before {
        content: "";
        position: fixed;
        inset: -18vh -10vw auto -10vw;
        height: 62vh;
        z-index: -1;
        pointer-events: none;
        background-image:
            linear-gradient(128deg,
                color-mix(in srgb, var(--accent-soft) 56%, transparent) 0%,
                transparent 38%),
            linear-gradient(38deg,
                transparent 22%,
                color-mix(in srgb, var(--warm-soft) 42%, transparent) 48%,
                transparent 78%),
            linear-gradient(180deg,
                color-mix(in srgb, white 68%, transparent),
                transparent);
        filter: blur(34px) saturate(112%);
        opacity: .82;
        transform: translateZ(0);
    }
    .public-booking-shell {
        width: min(1240px, 100%);
        gap: 20px;
    }
    .public-booking-hero,
    .public-booking-card {
        border-radius: 22px;
        background: color-mix(in srgb, var(--surface) 88%, white);
        box-shadow:
            0 28px 90px -72px color-mix(in srgb, var(--ink) 54%, transparent),
            0 1px 0 color-mix(in srgb, white 70%, transparent);
    }
    .public-booking-hero {
        padding: 28px 32px 32px;
        gap: 24px;
    }
    .public-brand .logo-mandorla {
        width: 34px;
        height: 23px;
    }
    .public-brand span {
        font-size: 24px;
    }
    .public-booking-intro {
        grid-template-columns: minmax(0, 1fr) minmax(330px, 380px);
        gap: 36px;
    }
    .public-booking-profile {
        min-height: 292px;
        grid-template-columns: 118px minmax(0, 1fr);
        gap: 24px;
        padding: 26px 28px;
        background:
            linear-gradient(135deg,
                color-mix(in srgb, var(--surface-2) 66%, white) 0%,
                color-mix(in srgb, var(--surface-2) 38%, var(--surface)) 100%);
    }
    .public-booking-profile .av-lg,
    .public-booking-profile .avatar-photo.av-lg {
        width: 118px;
        height: 118px;
        font-size: 34px;
        box-shadow:
            0 18px 52px -34px color-mix(in srgb, var(--ink) 62%, transparent),
            0 0 0 7px color-mix(in srgb, white 72%, transparent);
    }
    .public-kicker {
        font-size: 10.5px;
        letter-spacing: .13em;
    }
    .public-booking-profile h1 {
        max-width: 640px;
        margin: 6px 0 7px;
        font-size: clamp(31px, 2.45vw, 38px);
        line-height: 1.06;
        font-weight: 520;
    }
    .public-credential,
    .public-specialty-chips > span {
        min-height: 27px;
        padding: 5px 11px;
        font-size: 12px;
    }
    .public-booking-bio {
        margin-top: 20px;
        max-width: 540px;
    }
    .public-booking-bio span {
        font-size: 10.5px;
        letter-spacing: .13em;
    }
    .public-booking-bio p {
        font-size: 14.5px;
    }
    .public-booking-summary {
        min-height: 292px;
        padding: 18px;
        gap: 12px;
        background:
            linear-gradient(145deg,
                color-mix(in srgb, var(--accent-soft) 42%, var(--surface)) 0%,
                color-mix(in srgb, var(--surface) 94%, white) 100%);
    }
    .public-summary-head {
        padding-bottom: 10px;
    }
    .public-booking-summary .public-price-card,
    .public-summary-whatsapp {
        min-height: 68px;
        padding: 12px 14px;
    }
    .public-price-copy strong {
        font-size: 16px;
    }
    .public-price-copy b {
        font-size: 15.5px;
    }
    .public-booking-summary small,
    .public-summary-choice {
        font-size: 12.5px;
    }
}

/* Desktop public booking: slim editorial card */
@media (min-width: 861px) {
    .public-booking {
        padding: 40px clamp(56px, 8vw, 144px) 56px;
        background:
            linear-gradient(118deg,
                color-mix(in srgb, var(--accent-soft) 58%, var(--bg)) 0%,
                color-mix(in srgb, var(--bg) 88%, white) 33%,
                color-mix(in srgb, var(--surface) 84%, var(--warm-soft)) 66%,
                color-mix(in srgb, var(--bg) 86%, white) 100%);
    }
    .public-booking::before {
        inset: 0;
        height: 100%;
        background:
            linear-gradient(105deg,
                color-mix(in srgb, var(--accent-soft) 58%, transparent) 0%,
                transparent 28%,
                color-mix(in srgb, var(--surface) 72%, transparent) 53%,
                color-mix(in srgb, var(--warm-soft) 34%, transparent) 82%,
                transparent 100%),
            linear-gradient(180deg,
                color-mix(in srgb, white 78%, transparent) 0%,
                transparent 58%);
        filter: blur(30px) saturate(108%);
        opacity: .72;
    }
    body:has(.public-booking) .theme-btn,
    body:has(.public-booking) .accessibility-btn {
        top: 22px;
        border-radius: 11px;
        background: color-mix(in srgb, var(--surface) 90%, white);
        box-shadow:
            0 18px 46px -34px color-mix(in srgb, var(--ink) 54%, transparent),
            inset 0 1px 0 color-mix(in srgb, white 70%, transparent);
    }
    body:has(.public-booking) .theme-btn {
        right: max(22px, calc((100vw - min(1120px, calc(100vw - 112px))) / 2 - 58px));
    }
    body:has(.public-booking) .accessibility-btn {
        right: max(22px, calc((100vw - min(1120px, calc(100vw - 112px))) / 2 - 104px));
    }
    .public-booking-shell {
        width: min(1120px, 100%);
        gap: 18px;
    }
    .public-booking-hero,
    .public-booking-card {
        border-radius: 18px;
        background: color-mix(in srgb, var(--surface) 96%, white);
        box-shadow:
            0 34px 84px -76px color-mix(in srgb, var(--ink) 58%, transparent),
            0 1px 0 color-mix(in srgb, white 70%, transparent);
    }
    .public-booking-hero {
        padding: 34px clamp(30px, 4.2vw, 48px) 38px;
        gap: 30px;
    }
    .public-brand {
        gap: 12px;
    }
    .public-brand .logo-mandorla {
        width: 31px;
        height: 21px;
    }
    .public-brand span {
        font-size: 25px;
        font-weight: 650;
        letter-spacing: 0;
    }
    .public-booking-intro {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
    }
    .public-booking-profile {
        display: grid;
        grid-template-columns: 170px minmax(0, 1fr);
        grid-template-rows: auto auto auto auto;
        align-items: center;
        gap: 0 30px;
        min-height: 0;
        padding: 12px 4px 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }
    .public-profile-copy {
        display: contents;
    }
    .public-booking-profile .av-lg,
    .public-booking-profile .avatar-photo.av-lg {
        grid-column: 1;
        grid-row: 1 / 4;
        justify-self: center;
        width: 152px;
        height: 152px;
        font-size: 38px;
        box-shadow:
            0 24px 58px -38px color-mix(in srgb, var(--ink) 52%, transparent),
            0 0 0 6px color-mix(in srgb, white 82%, transparent),
            0 0 0 8px color-mix(in srgb, var(--line) 68%, transparent);
    }
    .public-kicker {
        grid-column: 2;
        grid-row: 1;
        align-self: end;
        font-size: 12px;
        letter-spacing: 0;
    }
    .public-booking-profile h1 {
        grid-column: 2;
        grid-row: 2;
        max-width: 720px;
        margin: 6px 0 10px;
        font-size: clamp(32px, 2.45vw, 36px);
        line-height: 1.08;
        font-weight: 520;
        letter-spacing: 0;
    }
    .public-profile-meta {
        grid-column: 2;
        grid-row: 3;
        margin-top: 0;
        gap: 8px;
    }
    .public-credential,
    .public-specialty-chips > span {
        min-height: 27px;
        padding: 5px 11px;
        font-size: 12px;
    }
    .public-booking-bio {
        grid-column: 1 / -1;
        grid-row: 4;
        margin: 30px 0 0;
        max-width: none;
        padding-left: 22px;
    }
    .public-booking-bio span {
        font-size: 12px;
        letter-spacing: 0;
    }
    .public-booking-bio p {
        font-size: 17px;
        line-height: 1.48;
    }
    .public-booking-summary {
        position: relative;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        min-height: 0;
        padding: 26px 0 0;
        gap: 14px 16px;
        border: 0;
        border-top: 1px solid color-mix(in srgb, var(--line) 82%, transparent);
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }
    .public-summary-head {
        grid-column: 1 / -1;
        padding: 4px 0 10px;
        border-bottom: 0;
    }
    .public-summary-head span {
        font-size: 12px;
        letter-spacing: .13em;
    }
    .public-summary-head strong {
        color: var(--ink-2);
        font-family: 'JetBrains Mono', ui-monospace, monospace;
        font-size: 16px;
        font-weight: 760;
    }
    .public-booking-summary .public-price-card,
    .public-summary-whatsapp {
        min-height: 76px;
        padding: 14px 16px;
        border-radius: 13px;
        background: color-mix(in srgb, var(--surface) 96%, white);
    }
    .public-booking-summary .public-price-card {
        grid-template-columns: auto auto minmax(0, 1fr);
        gap: 14px;
    }
    .public-booking-summary .public-price-card > svg {
        display: inline-grid;
        width: 36px;
        height: 36px;
        padding: 8px;
        border-radius: 999px;
    }
    .public-price-copy {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        column-gap: 6px;
        align-items: baseline;
    }
    .public-price-copy strong {
        grid-column: 1;
        font-size: 18px;
        line-height: 1.08;
    }
    .public-price-copy b {
        grid-column: 2;
        margin-top: 0;
        font-size: 18px;
        line-height: 1.08;
    }
    .public-booking-summary small {
        grid-column: 1 / -1;
        margin-top: 4px;
        font-size: 14px;
    }
    .public-selected-pill {
        display: none !important;
    }
    .public-summary-choice {
        grid-column: 1 / -1;
        margin: 2px 0 8px;
        font-size: 15px;
        line-height: 1.45;
    }
    .public-summary-whatsapp {
        grid-column: 1 / -1;
        margin-top: 0;
        gap: 16px;
    }
}

@media (max-width: 860px) {
    .public-booking {
        padding: 12px;
        align-items: start;
    }
    .public-booking-shell {
        grid-template-columns: 1fr;
        gap: 14px;
        width: 100%;
        max-width: 480px;
    }
    .public-booking-hero,
    .public-booking-card {
        border-radius: 20px;
        width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }
    .public-booking-hero,
    .public-booking-card {
        padding: 18px;
    }
    .public-brand {
        align-self: center;
    }
    .public-booking-profile {
        flex-direction: column;
        align-items: center;
        gap: 13px;
        text-align: center;
    }
    .public-booking-profile .av-lg,
    .public-booking-profile .avatar-photo.av-lg {
        width: clamp(126px, 36vw, 150px);
        height: clamp(126px, 36vw, 150px);
        font-size: 34px;
        box-shadow:
            0 20px 56px -34px color-mix(in srgb, var(--ink) 74%, transparent),
            0 0 0 6px color-mix(in srgb, var(--surface) 88%, transparent);
    }
    .public-profile-copy {
        width: 100%;
    }
    .public-booking-profile h1 {
        max-width: 100%;
        margin-top: 5px;
        font-size: clamp(27px, 7.4vw, 33px);
        line-height: 1.05;
    }
    .public-booking-intro,
    .public-form-grid {
        grid-template-columns: 1fr;
    }
    .public-booking-summary {
        grid-template-columns: 1fr;
    }
    .public-profile-meta {
        align-items: center;
        justify-content: center;
        width: 100%;
        gap: 9px;
    }
    .public-specialty-chips {
        width: 100%;
        max-width: 100%;
        flex-wrap: nowrap;
        justify-content: flex-start;
        overflow-x: auto;
        padding: 2px 2px 8px;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .public-specialty-chips::-webkit-scrollbar {
        display: none;
    }
    .public-specialty-chips > span {
        flex: 0 0 auto;
        scroll-snap-align: start;
    }
    .public-booking-bio {
        margin-top: 12px;
        text-align: left;
    }
    .public-booking-summary {
        padding: 12px;
        border-radius: 18px;
        overflow: hidden;
    }
    .public-booking-summary .public-price-card,
    .public-summary-whatsapp {
        min-width: 0;
        min-height: 72px;
        padding: 13px;
    }
    .public-booking-summary .public-price-card {
        grid-template-columns: auto auto minmax(0, 1fr);
    }
    .public-price-copy strong,
    .public-price-copy b,
    .public-price-copy small {
        overflow-wrap: anywhere;
    }
    .public-span-2 {
        grid-column: auto;
    }
    .public-duplicate-line.public-span-2 {
        grid-column: auto;
    }
    .profile-form-grid {
        grid-template-columns: 1fr;
    }
    .profile-read-grid {
        grid-template-columns: 1fr;
    }
    .profile-save-bar {
        display: grid;
    }
    .profile-save-bar .btn-primary {
        width: 100%;
        justify-content: center;
    }
    .cobros-shell {
        padding: 18px 16px 28px;
    }
    .cobros-toolbar {
        display: grid;
    }
    .cobro-search {
        width: 100%;
    }
    .cobro-row {
        grid-template-columns: 1fr;
        align-items: start;
        gap: 10px;
    }
    .cobro-status,
    .cobro-actions {
        justify-self: stretch;
    }
    .cobro-actions {
        grid-column: auto;
    }
    .msg-shell {
        padding: 18px 16px 28px;
    }
    .msg-side {
        grid-template-columns: 1fr;
    }
    .msg-panel-head {
        display: grid;
    }
    .msg-search {
        width: 100%;
    }
    .msg-queue-row {
        grid-template-columns: 1fr;
        align-items: start;
    }
    .msg-row-actions {
        justify-content: stretch;
        display: grid;
        grid-template-columns: 1fr;
    }
    .msg-action-btn {
        width: 100%;
        justify-content: center;
    }
    .msg-history-row {
        grid-template-columns: 34px minmax(0, 1fr);
        align-items: start;
    }
    .msg-history-row > .av {
        display: none;
    }
    .msg-status-pill,
    .msg-history-row time {
        justify-self: start;
        grid-column: 2;
    }
    .msg-template-grid {
        grid-template-columns: 1fr;
    }
    .msg-sheet-layer {
        align-items: flex-end;
        padding: 0;
    }
    .msg-sheet {
        width: 100%;
        max-height: 92vh;
        transform: translateY(18px);
        border-radius: 22px 22px 0 0;
        border-left: 0;
        border-right: 0;
        border-bottom: 0;
    }
    .msg-phone-grid {
        grid-template-columns: 1fr;
    }
    .msg-open-actions,
    .msg-post-actions {
        display: grid;
        grid-template-columns: 1fr;
    }
    .msg-post-actions > span,
    .msg-post-status {
        margin-right: 0;
    }
    .msg-post-buttons {
        display: grid;
        grid-template-columns: 1fr;
        justify-content: stretch;
    }
    .msg-post-buttons .btn-primary,
    .msg-post-buttons .btn-ghost {
        width: 100%;
        justify-content: center;
    }
    .post-create-sheet {
        width: min(640px, calc(100vw - 32px));
        max-height: min(86svh, 720px);
        border-radius: 22px;
        transform: translateY(10px) scale(.985);
    }
    .cita-confirm-layer {
        align-items: center;
        padding: 16px;
    }
    .cita-confirm-sheet {
        width: min(430px, 100%);
        max-height: min(88svh, 760px);
        border-radius: 22px;
        transform: translateY(8px) scale(.985);
    }
    .post-create-layer {
        align-items: center;
        padding: 16px;
    }
    .post-create-layer .msg-sheet {
        border-left: 1px solid var(--line);
        border-right: 1px solid var(--line);
        border-bottom: 1px solid var(--line);
    }
    .post-create-head {
        padding: 18px 20px 14px;
    }
    .post-create-head h2 {
        font-size: 24px;
    }
    .post-create-head p {
        font-size: 12.5px;
        line-height: 1.42;
    }
    .post-create-title {
        gap: 12px;
    }
    .post-create-icon {
        width: 40px;
        height: 40px;
        border-radius: 13px;
    }
    .post-create-body {
        padding: 14px 18px 18px;
        gap: 8px;
    }
    .cita-confirm-sheet .post-create-head {
        padding: 12px 18px 13px;
    }
    .cita-confirm-sheet .post-create-body {
        padding: 13px 18px 18px;
    }
    .post-create-actions {
        gap: 8px;
    }
    .post-create-option {
        grid-template-columns: 38px minmax(0, 1fr);
        align-items: start;
        padding: 12px;
        border-radius: 15px;
    }
    .post-create-action-icon {
        width: 38px;
        height: 38px;
        border-radius: 12px;
    }
    .post-create-option strong {
        font-size: 13.5px;
    }
    .post-create-option small {
        font-size: 12px;
        line-height: 1.32;
    }
    .post-create-arrow {
        display: none;
    }
    .cita-confirm-main {
        min-height: 76px;
    }
    .cita-confirm-secondary-grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    .cita-confirm-secondary {
        min-height: 64px;
    }
    .cita-detail-page .breadcrumb,
    .cita-detail-page > section {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
    .cita-detail-page .breadcrumb {
        padding-top: 16px !important;
    }
    .cita-hero-card {
        padding: 20px !important;
    }
    .cita-hero-card .flex.items-start {
        align-items: flex-start;
    }
    .cita-hero-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        margin-top: 18px;
    }
    .cita-action-row {
        display: grid !important;
        grid-template-columns: 1fr;
    }
    .cita-action-row > .btn-primary,
    .cita-action-row > .btn-ghost,
    .cita-action-row > .ux-action-menu,
    .cita-action-row .ux-action-menu > summary {
        width: 100%;
        justify-content: center;
    }
    .cita-action-row .ux-action-menu-panel {
        width: 100%;
        right: 0;
    }
}

@media (max-width: 430px) {
    .cita-hero-metrics {
        grid-template-columns: 1fr;
    }
    .cita-hero-card .av-lg {
        width: 54px;
        height: 54px;
        font-size: 18px;
    }
}

/* ===== Detalle de cita · command center premium =========================== */
.cita-detail-page .cita-breadcrumb {
    color: var(--ink-2);
    font-size: 13px;
}
.cita-command-card {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 390px);
    gap: 22px;
    padding: 28px !important;
    overflow: visible !important;
    background:
        linear-gradient(135deg,
            color-mix(in srgb, var(--surface) 94%, var(--accent-soft)) 0%,
            var(--surface) 54%,
            color-mix(in srgb, var(--warm-soft) 30%, var(--surface)) 100%);
}
.cita-command-card::after {
    display: none;
}
.cita-command-main {
    display: grid;
    grid-template-columns: 68px minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}
.cita-command-main .av-lg {
    width: 68px;
    height: 68px;
    font-size: 22px;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 16%, transparent);
}
.cita-pill-row {
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}
.cita-status-pill {
    display: inline-flex;
    align-items: center;
    min-height: 25px;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--surface-2);
    color: var(--ink-2);
    font-size: 11.5px;
    font-weight: 800;
    line-height: 1;
}
.cita-status-confirmada {
    color: color-mix(in srgb, var(--ok) 76%, var(--ink));
    background: var(--ok-soft);
    border-color: color-mix(in srgb, var(--ok) 26%, var(--line));
}
.cita-status-esperando {
    color: var(--warm);
    background: var(--warm-soft);
    border-color: color-mix(in srgb, var(--warm) 30%, var(--line));
}
.cita-detail-page .cita-status-esperando {
    min-height: 31px;
    padding: 6px 13px;
    border-radius: 11px;
    border-color: color-mix(in srgb, var(--warn) 46%, var(--line));
    background:
        linear-gradient(180deg,
            color-mix(in srgb, #fff 54%, var(--warn-soft)) 0%,
            color-mix(in srgb, var(--warn-soft) 88%, var(--surface)) 100%);
    color: color-mix(in srgb, var(--warn) 86%, var(--ink));
    font-size: 12.2px;
    box-shadow:
        0 12px 28px -20px color-mix(in srgb, var(--warn) 70%, transparent),
        inset 0 1px 0 color-mix(in srgb, #fff 78%, transparent);
}
.cita-detail-page .cita-status-esperando::before {
    content: "";
    width: 8px;
    height: 8px;
    margin-right: 7px;
    border-radius: 999px;
    background: var(--warn);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--warn) 16%, transparent);
}
.cita-status-realizada {
    color: var(--ok);
    background: color-mix(in srgb, var(--ok) 12%, var(--surface));
    border-color: color-mix(in srgb, var(--ok) 26%, var(--line));
}
.cita-status-pending-close {
    color: color-mix(in srgb, var(--warn) 84%, var(--ink));
    background: var(--warn-soft);
    border-color: color-mix(in srgb, var(--warn) 28%, var(--line));
}
.cita-status-cancelada,
.cita-status-no_asistio,
.cita-status-muted {
    color: var(--muted);
    background: color-mix(in srgb, var(--surface-2) 78%, var(--surface));
}
.cita-command-copy h1.serif {
    margin: 0;
    max-width: 760px;
    color: var(--ink);
    font-family: 'Inter', sans-serif !important;
    font-size: 22px !important;
    line-height: 1.08 !important;
    font-weight: 800 !important;
    letter-spacing: 0 !important;
}
.cita-lead {
    max-width: 760px;
    margin: 7px 0 0;
    color: var(--ink-2);
    font-size: 13.5px;
    line-height: 1.45;
}
.cita-lead-attention {
    max-width: 720px;
    margin-top: 10px;
}
.cita-status-message {
    display: inline-grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    max-width: 100%;
    padding: 11px 13px;
    border: 1px solid color-mix(in srgb, var(--warn) 36%, var(--line));
    border-radius: 14px;
    background:
        linear-gradient(135deg,
            color-mix(in srgb, var(--warn-soft) 76%, var(--surface)) 0%,
            color-mix(in srgb, var(--surface) 88%, white) 100%);
    color: color-mix(in srgb, var(--warn) 88%, var(--ink));
    box-shadow: 0 16px 36px -30px color-mix(in srgb, var(--warn) 76%, transparent);
}
.cita-status-message > svg {
    width: 34px;
    height: 34px;
    padding: 7px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--warn) 13%, var(--surface));
    box-sizing: border-box;
}
.cita-status-message span {
    min-width: 0;
    display: grid;
    gap: 2px;
}
.cita-status-message strong {
    color: var(--ink);
    font-size: 13.8px;
    line-height: 1.16;
    font-weight: 850;
}
.cita-status-message small {
    color: color-mix(in srgb, var(--warn) 72%, var(--ink-2));
    font-size: 12.2px;
    line-height: 1.28;
    font-weight: 700;
}
.cita-date-band {
    grid-column: 2;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    max-width: 820px;
    margin-top: 18px;
    padding: 14px;
    border: 1px solid color-mix(in srgb, var(--accent) 15%, var(--line));
    border-radius: 16px;
    background: color-mix(in srgb, var(--surface-2) 72%, var(--surface));
}
.cita-date-icon {
    width: 42px;
    height: 42px;
    border-radius: 13px;
    display: grid;
    place-items: center;
    color: var(--accent);
    background: color-mix(in srgb, var(--accent-soft) 70%, var(--surface));
}
.cita-date-copy {
    min-width: 0;
    display: grid;
    gap: 5px;
}
.cita-date-copy b {
    color: var(--ink);
    font-size: 13.5px;
    line-height: 1.25;
    font-weight: 750;
}
.cita-date-copy small {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    color: var(--muted);
    font-size: 12.5px;
    line-height: 1.35;
}
.cita-meet-inline {
    min-height: 23px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px;
    border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line));
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent-soft) 54%, var(--surface));
    color: var(--accent);
    font-size: 11px;
    line-height: 1;
    font-weight: 850;
    text-decoration: none;
    white-space: nowrap;
}
.cita-meet-inline::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: currentColor;
}
.cita-meet-inline.is-ready {
    border-color: color-mix(in srgb, var(--ok) 28%, var(--line));
    background: color-mix(in srgb, var(--ok-soft) 62%, var(--surface));
    color: color-mix(in srgb, var(--ok) 76%, var(--ink));
}
.cita-meet-inline:hover {
    background: color-mix(in srgb, var(--accent-soft) 74%, var(--surface));
}
.cita-meet-strip {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    max-width: 820px;
    margin-top: 10px;
    padding: 12px 14px;
    border: 1px solid color-mix(in srgb, var(--accent) 20%, var(--line));
    border-radius: 16px;
    background:
        linear-gradient(135deg,
            color-mix(in srgb, var(--accent-soft) 52%, var(--surface)) 0%,
            color-mix(in srgb, var(--surface) 92%, white) 100%);
}
.cita-meet-strip.is-ready {
    border-color: color-mix(in srgb, var(--ok) 28%, var(--line));
    background: color-mix(in srgb, var(--ok-soft) 48%, var(--surface));
}
.cita-meet-icon {
    width: 42px;
    height: 32px;
    display: grid;
    place-items: center;
}
.cita-meet-icon .v-loader-mark {
    width: 44px;
    height: 28px;
}
.cita-meet-icon .v-loader-circle {
    top: 4px;
    width: 20px;
    height: 20px;
    border-width: 1.8px;
    background: transparent;
    box-shadow: none;
}
.cita-meet-icon .v-loader-left {
    left: 8px;
}
.cita-meet-icon .v-loader-right {
    right: 8px;
}
.cita-meet-strip.is-ready .meet-ready-check {
    display: block;
}
.cita-meet-copy {
    min-width: 0;
    display: grid;
    gap: 3px;
}
.cita-meet-copy b {
    color: var(--ink);
    font-size: 13px;
    font-weight: 820;
}
.cita-meet-copy small {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.35;
}
.cita-meet-link {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 13px;
    border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--line));
    border-radius: 999px;
    background: color-mix(in srgb, var(--surface) 88%, white);
    color: var(--accent);
    font-size: 12.5px;
    font-weight: 780;
    text-decoration: none;
    white-space: nowrap;
}
.cita-meet-link:hover {
    background: var(--accent-soft);
}
.cita-next-card {
    align-self: stretch;
    display: grid;
    align-content: start;
    gap: 9px;
    padding: 20px;
    border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line));
    border-radius: 18px;
    background:
        linear-gradient(180deg,
            color-mix(in srgb, var(--accent-soft) 58%, var(--surface)) 0%,
            var(--surface) 100%);
    box-shadow: 0 22px 50px -42px color-mix(in srgb, var(--accent) 80%, transparent);
}
.cita-next-kicker,
.cita-section-kicker {
    color: var(--accent);
    font-size: 11.5px;
    line-height: 1;
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.cita-next-card strong {
    color: var(--ink);
    font-size: 18px;
    line-height: 1.16;
    font-weight: 800;
}
.cita-next-card small {
    color: var(--ink-2);
    font-size: 13px;
    line-height: 1.42;
}
.cita-flow-timeline {
    grid-column: 1 / -1;
    display: grid;
    gap: 16px;
    margin-top: 2px;
    padding: 18px;
    border: 1px solid color-mix(in srgb, var(--accent) 15%, var(--line));
    border-radius: 18px;
    background:
        linear-gradient(180deg, var(--surface) 0%, color-mix(in srgb, var(--surface-2) 38%, var(--surface)) 100%);
}
.cita-flow-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
}
.cita-flow-head strong {
    color: var(--ink-2);
    font-size: 12.5px;
    font-weight: 760;
    line-height: 1.35;
    text-align: right;
}
.cita-flow-steps {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin: 0;
    padding: 8px 0 2px;
    list-style: none;
}
.cita-flow-steps::before {
    content: "";
    position: absolute;
    left: 8%;
    right: 8%;
    top: 27px;
    height: 2px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--line) 75%, transparent);
}
.cita-flow-step {
    position: relative;
    display: grid;
    justify-items: center;
    gap: 8px;
    min-width: 0;
    color: var(--muted);
}
.cita-flow-dot {
    position: relative;
    z-index: 1;
    width: 38px;
    height: 38px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--muted);
}
.cita-flow-dot::after {
    content: "";
    width: 9px;
    height: 9px;
    border-radius: inherit;
    background: currentColor;
    opacity: .62;
}
.cita-flow-copy {
    min-width: 0;
    display: grid;
    justify-items: center;
    gap: 4px;
    text-align: center;
}
.cita-flow-copy b {
    color: var(--ink-2);
    font-size: 12.5px;
    line-height: 1.2;
    font-weight: 850;
}
.cita-flow-copy small {
    color: var(--muted);
    font-size: 11.5px;
    line-height: 1.28;
}
.cita-flow-step.is-done .cita-flow-dot {
    color: var(--ok);
    border-color: color-mix(in srgb, var(--ok) 30%, var(--line));
    background: color-mix(in srgb, var(--ok) 11%, var(--surface));
}
.cita-flow-step.is-done .cita-flow-dot::after {
    width: 13px;
    height: 8px;
    border-radius: 0;
    border-left: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    background: transparent;
    transform: rotate(-45deg) translate(1px, -1px);
    opacity: 1;
}
.cita-flow-step.is-done .cita-flow-copy b {
    color: color-mix(in srgb, var(--ok) 78%, var(--ink));
}
.cita-flow-step.is-current .cita-flow-dot {
    color: var(--accent);
    border-color: color-mix(in srgb, var(--accent) 38%, var(--line));
    background: color-mix(in srgb, var(--accent-soft) 70%, var(--surface));
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 10%, transparent);
}
.cita-flow-step.is-current .cita-flow-copy b {
    color: var(--ink);
}
.cita-flow-step.is-muted {
    opacity: .76;
}
.cita-flow-action {
    min-height: 30px;
    margin-top: 4px;
    padding: 0 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--line));
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent-soft) 42%, var(--surface));
    color: var(--accent);
    font-size: 11.5px;
    line-height: 1;
    font-weight: 850;
    text-decoration: none;
    cursor: pointer;
    transition: background .16s ease, border-color .16s ease, transform .16s ease;
}
.cita-flow-action:hover {
    border-color: color-mix(in srgb, var(--accent) 42%, var(--line));
    background: color-mix(in srgb, var(--accent-soft) 70%, var(--surface));
    transform: translateY(-1px);
}
.cita-flow-assist {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border: 1px solid color-mix(in srgb, var(--accent) 20%, var(--line));
    border-radius: 15px;
    background: color-mix(in srgb, var(--accent-soft) 36%, var(--surface));
}
.cita-flow-assist-icon {
    width: 38px;
    height: 38px;
    border-radius: 13px;
    display: grid;
    place-items: center;
    color: var(--accent);
    background: color-mix(in srgb, var(--surface) 82%, var(--accent-soft));
}
.cita-flow-assist-icon.is-warning {
    color: var(--warn);
    background: color-mix(in srgb, var(--warn-soft) 72%, var(--surface));
}
.cita-flow-assist-copy {
    min-width: 0;
    display: grid;
    gap: 3px;
}
.cita-flow-assist-copy b {
    color: var(--ink);
    font-size: 13.5px;
    line-height: 1.18;
    font-weight: 850;
}
.cita-flow-assist-copy small {
    color: var(--ink-2);
    font-size: 12.3px;
    line-height: 1.35;
}
.cita-flow-assist .btn-primary {
    min-height: 40px;
    padding-inline: 15px;
    white-space: nowrap;
}
.cita-close-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    justify-content: flex-end;
}
.cita-close-actions .btn-primary,
.cita-close-actions .btn-ghost {
    min-height: 40px;
    white-space: nowrap;
}
.cita-command-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    margin-top: 8px;
}
.cita-command-actions .btn-primary,
.cita-command-actions .btn-ghost,
.cita-command-actions .ux-action-menu > summary {
    min-height: 44px;
    width: 100%;
    justify-content: center;
    font-weight: 800;
}
.cita-command-actions .ux-action-menu {
    min-width: 0;
    width: 100%;
}
.cita-no-show-quick {
    color: color-mix(in srgb, var(--warn) 84%, var(--ink));
    border-color: color-mix(in srgb, var(--warn) 26%, var(--line));
    background: color-mix(in srgb, var(--warn-soft) 34%, var(--surface));
}
.cita-command-actions .ux-action-menu-panel {
    width: min(340px, 100%);
    right: 0;
    padding: 7px;
    gap: 3px;
}
.cita-command-actions .cita-action-menu-panel .cita-menu-item {
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 9px;
    min-height: 50px;
    padding: 8px;
    border-radius: 11px;
}
.cita-command-actions .cita-action-menu-panel .cita-menu-icon {
    width: 32px;
    height: 32px;
    border-radius: 10px;
}
.cita-command-actions .cita-action-menu-panel .cita-menu-icon svg {
    width: 14px;
    height: 14px;
}
.cita-command-actions .cita-action-menu-panel .cita-menu-item strong {
    font-family: 'Inter', sans-serif !important;
    font-size: 13.5px !important;
    line-height: 1.12 !important;
    font-weight: 820 !important;
    letter-spacing: 0 !important;
}
.cita-command-actions .cita-action-menu-panel .cita-menu-item small {
    margin-top: 2px;
    font-size: 11.2px !important;
    line-height: 1.24 !important;
    font-weight: 650 !important;
}
.cita-workspace {
    max-width: 1320px;
    margin-inline: auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 20px;
    align-items: start;
}
.cita-main-column,
.cita-side-column {
    display: grid;
    gap: 16px;
}
.cita-card-head {
    display: grid;
    gap: 6px;
    margin-bottom: 16px;
}
.cita-card-head h2,
.cita-side-column h2 {
    margin: 0;
    color: var(--ink);
    font-family: 'Inter', sans-serif !important;
    font-size: 18px;
    line-height: 1.16;
    font-weight: 800;
    letter-spacing: 0;
}
.cita-card-head p,
.cita-side-column p {
    margin: 0;
    color: var(--muted);
    font-size: 13.5px;
    line-height: 1.48;
}
.cita-summary-card,
.cita-payment-card,
.cita-note-card,
.cita-patient-card,
.cita-encuadre-card,
.cita-context-card {
    padding: 22px;
}
.cita-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}
.cita-summary-item {
    min-width: 0;
    padding: 14px;
    border: 1px solid color-mix(in srgb, var(--accent) 14%, var(--line));
    border-radius: 14px;
    background: color-mix(in srgb, var(--surface-2) 55%, var(--surface));
}
.cita-summary-item > span {
    display: block;
    margin-bottom: 9px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .11em;
    text-transform: uppercase;
}
.cita-summary-item strong {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 7px;
    color: var(--ink);
    font-size: 16px;
    line-height: 1.1;
    font-weight: 780;
    overflow-wrap: anywhere;
}
.cita-summary-item small {
    display: block;
    margin-top: 7px;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.3;
}
.cita-payment-strip {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    padding: 14px 15px;
    border-radius: 14px;
    border: 1px solid var(--line);
    color: var(--ink);
    background: var(--surface-2);
}
.cita-payment-strip.is-paid {
    border-color: color-mix(in srgb, var(--ok) 28%, var(--line));
    background: color-mix(in srgb, var(--ok) 11%, var(--surface));
}
.cita-payment-strip.is-pending {
    border-color: color-mix(in srgb, var(--warm) 30%, var(--line));
    background: color-mix(in srgb, var(--warm-soft) 72%, var(--surface));
}
.cita-payment-dot {
    width: 9px;
    height: 9px;
    border-radius: 999px;
    background: var(--warm);
}
.cita-payment-strip.is-paid .cita-payment-dot {
    background: var(--ok);
}
.cita-payment-strip strong {
    font-size: 14px;
    font-weight: 780;
}
.cita-payment-strip span.mono {
    color: var(--ink-2);
    font-size: 13px;
}
.cita-payment-strip em {
    margin-left: auto;
    color: var(--ink-2);
    font-size: 12.5px;
    font-style: normal;
    font-weight: 750;
}
.cita-message-preview,
.cita-private-note {
    padding: 16px;
    border-radius: 14px;
    border: 1px solid color-mix(in srgb, var(--whatsapp) 18%, var(--line));
    background: color-mix(in srgb, var(--whatsapp) 7%, var(--surface));
    color: var(--ink-2);
    font-size: 13.5px;
    line-height: 1.58;
}
.cita-private-note {
    white-space: pre-wrap;
    border-color: var(--line);
    background: var(--surface-2);
}
.cita-side-link {
    min-height: 50px;
    margin-top: 14px;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) 16px;
    align-items: center;
    gap: 10px;
    padding: 9px 11px;
    border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--line));
    border-radius: 14px;
    color: var(--ink);
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--accent-soft) 38%, var(--surface)),
        var(--surface));
    text-decoration: none;
    transition: border-color .18s ease, background .18s ease, transform .18s ease, box-shadow .18s ease;
}
.cita-side-link:hover {
    border-color: color-mix(in srgb, var(--accent) 34%, var(--line));
    background: color-mix(in srgb, var(--accent-soft) 58%, var(--surface));
    box-shadow: 0 16px 36px -30px color-mix(in srgb, var(--accent) 70%, transparent);
    transform: translateY(-1px);
}
.cita-side-link-icon {
    width: 34px;
    height: 34px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    color: var(--accent);
    background: color-mix(in srgb, var(--accent-soft) 75%, var(--surface));
}
.cita-side-link-copy {
    min-width: 0;
    display: grid;
    gap: 2px;
}
.cita-side-link-copy strong {
    color: var(--ink);
    font-size: 13.5px;
    line-height: 1.1;
    font-weight: 850;
}
.cita-side-link-copy small {
    color: var(--muted);
    font-size: 11.5px;
    line-height: 1.25;
    font-weight: 650;
}
.cita-side-link-arrow {
    color: var(--accent);
    justify-self: end;
}
.cita-context-card {
    display: grid;
    gap: 18px;
}
.cita-context-section {
    min-width: 0;
    display: grid;
    gap: 10px;
}
.cita-context-encuadre {
    padding-top: 18px;
    border-top: 1px solid var(--line-soft);
}
.cita-context-card .cita-side-link {
    margin-top: 4px;
}
.cita-context-card p {
    margin: 0;
}
.cita-context-card dl {
    display: grid;
    gap: 11px;
    margin: 0;
}
.cita-context-card dl > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}
.cita-context-card dt {
    color: var(--muted);
    font-size: 12.5px;
}
.cita-context-card dd {
    margin: 0;
    color: var(--ink);
    font-size: 13px;
    font-weight: 750;
    text-align: right;
}
.cita-encuadre-card dl {
    display: grid;
    gap: 11px;
    margin: 16px 0 0;
}
.cita-encuadre-card dl > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}
.cita-encuadre-card dt {
    color: var(--muted);
    font-size: 12.5px;
}
.cita-encuadre-card dd {
    margin: 0;
    color: var(--ink);
    font-size: 13px;
    font-weight: 750;
    text-align: right;
}

@media (max-width: 1180px) {
    .cita-command-card,
    .cita-workspace {
        grid-template-columns: 1fr;
    }
    .cita-next-card {
        align-content: start;
    }
    .cita-command-actions {
        grid-template-columns: 1fr;
    }
    .cita-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 860px) {
    .cita-detail-page {
        background:
            linear-gradient(180deg,
                color-mix(in srgb, var(--accent-soft) 26%, transparent) 0,
                transparent 210px);
    }
    .cita-detail-page .breadcrumb,
    .cita-detail-page > section {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
    .cita-command-card {
        gap: 14px;
        padding: 16px !important;
        border-radius: 18px !important;
        background:
            linear-gradient(180deg,
                color-mix(in srgb, var(--surface) 96%, var(--accent-soft)) 0%,
                color-mix(in srgb, var(--surface) 92%, white) 100%);
    }
    .cita-command-main {
        grid-template-columns: 48px minmax(0, 1fr);
        gap: 12px;
    }
    .cita-command-main .av-lg {
        width: 48px;
        height: 48px;
        font-size: 16px;
    }
    .cita-command-copy h1.serif {
        font-size: 23px !important;
    }
    .cita-lead {
        font-size: 13.5px;
    }
    .cita-date-band {
        grid-column: 1 / -1;
        grid-template-columns: 1fr;
        margin-top: 2px;
        padding: 12px;
        border-radius: 14px;
    }
    .cita-date-icon {
        display: none;
    }
    .cita-next-card {
        gap: 8px;
        padding: 14px 0 0;
        border: 0;
        border-top: 1px solid var(--line-soft);
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }
    .cita-next-card strong {
        font-size: 17px;
    }
    .cita-command-actions {
        grid-template-columns: 1fr;
    }
    .cita-command-actions .btn-primary,
    .cita-command-actions .btn-ghost,
    .cita-command-actions .ux-action-menu > summary {
        min-height: 46px;
        border-radius: 12px;
    }
    .cita-flow-timeline {
        gap: 12px;
        margin-top: 0;
        padding: 14px 0 0;
        border: 0;
        border-top: 1px solid var(--line-soft);
        border-radius: 0;
        background: transparent;
    }
    .cita-flow-head {
        display: grid;
        gap: 5px;
    }
    .cita-flow-head strong {
        text-align: left;
    }
    .cita-flow-steps {
        grid-template-columns: 1fr;
        gap: 0;
    }
    .cita-flow-steps::before {
        left: 15px;
        right: auto;
        top: 17px;
        bottom: 17px;
        width: 2px;
        height: auto;
    }
    .cita-flow-step {
        min-height: 52px;
        grid-template-columns: 32px minmax(0, 1fr);
        justify-items: start;
        align-items: start;
        gap: 10px;
        padding-bottom: 10px;
    }
    .cita-flow-step:last-child {
        min-height: 32px;
        padding-bottom: 0;
    }
    .cita-flow-dot {
        width: 32px;
        height: 32px;
    }
    .cita-flow-dot::after {
        width: 8px;
        height: 8px;
    }
    .cita-flow-step.is-done .cita-flow-dot::after {
        width: 11px;
        height: 7px;
    }
    .cita-flow-copy {
        justify-items: start;
        padding-top: 2px;
        text-align: left;
    }
    .cita-flow-assist {
        grid-template-columns: 34px minmax(0, 1fr);
        gap: 10px;
    }
    .cita-flow-assist .btn-primary {
        grid-column: 1 / -1;
        width: 100%;
    }
    .cita-summary-card,
    .cita-payment-card,
    .cita-note-card,
    .cita-patient-card,
    .cita-encuadre-card,
    .cita-context-card {
        padding: 18px;
    }
    .cita-card-head h2,
    .cita-side-column h2 {
        font-size: 20px;
    }
}

@media (max-width: 520px) {
    .cita-detail-page .breadcrumb {
        padding-top: 12px !important;
        padding-bottom: 0 !important;
        font-size: 12px;
        gap: 6px;
    }
    .cita-command-card {
        padding: 14px !important;
    }
    .cita-command-main {
        grid-template-columns: 44px minmax(0, 1fr);
        gap: 11px;
    }
    .cita-command-main .av-lg {
        width: 44px;
        height: 44px;
        font-size: 15px;
    }
    .cita-pill-row {
        gap: 6px;
        margin-bottom: 7px;
    }
    .cita-status-pill {
        min-height: 23px;
        padding-inline: 8px;
        font-size: 10.8px;
    }
    .cita-command-copy h1.serif {
        font-size: 21px !important;
        line-height: 1.04 !important;
    }
    .cita-lead {
        margin-top: 6px;
        font-size: 12.8px;
        line-height: 1.42;
    }
    .cita-date-band {
        padding: 11px 12px;
    }
    .cita-date-copy b {
        font-size: 13px;
    }
    .cita-date-copy small {
        gap: 5px;
        font-size: 12px;
    }
    .cita-meet-inline {
        min-height: 22px;
        padding: 3px 8px;
        font-size: 10.8px;
    }
    .cita-next-card {
        padding-top: 13px;
    }
    .cita-flow-timeline {
        padding-top: 13px;
    }
    .cita-flow-copy b {
        font-size: 12.2px;
    }
    .cita-flow-copy small {
        font-size: 11.2px;
    }
    .cita-summary-grid {
        grid-template-columns: 1fr;
    }
    .cita-payment-strip em {
        margin-left: 0;
    }
}

/* ===== Paciente · case command center =====================================
   Refactor 2026-05-08 (UX) · La página adopta el lenguaje de /cita
   (max-width 1080px centrado, module-header con avatar+H1+pill,
   cita-quesigue card, cita-twocol grids). Las clases legacy
   paciente-detail-shell, paciente-case-grid, paciente-case-hero,
   paciente-next-card y paciente-side-card siguen existiendo para los
   estilos que aún se referencian (responsive, modal, etc.) pero la
   página ya no las usa en su layout principal. */
.paciente-detail-page {
    background:
        linear-gradient(180deg,
            color-mix(in srgb, var(--accent-soft) 24%, transparent) 0,
            transparent 320px);
}
.paciente-detail-page .paciente-detail-shell {
    max-width: 1080px;
}

/* Avatar del paciente en el module-header de la página · tamaño medio
   para que balancee el H1 sin opacarlo. */
.paciente-detail-page .paciente-detail-avatar {
    width: 38px;
    height: 38px;
    font-size: 13.5px;
    flex-shrink: 0;
}

/* Nota · La variante tone-accent de cita-balance-banner ahora vive en
   el bloque canónico del banner (sección /cita) con prefijo .cita-page
   para que aplique tanto a /cita como a /paciente (que también lleva
   la clase cita-page). Antes vivía duplicada aquí. */
.paciente-case-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 350px);
    gap: 18px;
    align-items: start;
}
.paciente-case-main,
.paciente-case-side {
    min-width: 0;
    display: grid;
    gap: 16px;
}
.paciente-case-hero {
    padding: 24px !important;
    border-color: color-mix(in srgb, var(--ink) 10%, var(--line));
    background:
        linear-gradient(135deg,
            color-mix(in srgb, var(--surface) 96%, var(--accent-soft)) 0%,
            var(--surface) 62%,
            color-mix(in srgb, var(--accent-soft) 18%, var(--surface)) 100%);
    box-shadow: 0 18px 52px -46px color-mix(in srgb, var(--ink) 50%, transparent);
}
.paciente-case-id {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}
.paciente-case-id .av-lg {
    width: 58px;
    height: 58px;
    font-size: 19px;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 16%, transparent);
}
.paciente-case-copy {
    min-width: 0;
}
.paciente-case-copy h1.serif,
.paciente-case-summary h2.serif,
.paciente-side-card h2.serif {
    margin: 0;
    color: var(--ink);
    font-family: 'Inter', sans-serif !important;
    letter-spacing: 0 !important;
    font-weight: 800 !important;
}
.paciente-case-copy h1.serif {
    font-size: 24px !important;
    line-height: 1.08 !important;
}
.paciente-case-copy .cita-lead {
    max-width: 620px;
    font-size: 13.5px;
    line-height: 1.42;
}
.paciente-case-band {
    max-width: none;
    margin-top: 18px;
    text-decoration: none;
    border-color: color-mix(in srgb, var(--accent) 18%, var(--line));
    background: color-mix(in srgb, var(--accent-soft) 72%, var(--surface));
}
.paciente-case-band:hover {
    border-color: color-mix(in srgb, var(--accent) 34%, var(--line));
    background: color-mix(in srgb, var(--accent-soft) 86%, var(--surface));
}
.paciente-case-band .cita-date-copy b {
    color: color-mix(in srgb, var(--accent) 88%, var(--ink));
    font-size: 13px;
    font-weight: 760;
}
.paciente-case-band .cita-date-copy small {
    color: var(--ink-2);
    font-size: 12px;
}
.paciente-case-flow {
    margin-top: 0;
    padding: 16px;
    gap: 12px;
}
.paciente-case-flow .cita-section-kicker,
.paciente-case-summary .cita-section-kicker,
.paciente-side-card .cita-section-kicker,
.paciente-next-card .cita-next-kicker {
    font-size: 10.5px;
    letter-spacing: .1em;
}
.paciente-case-steps .cita-flow-copy b {
    font-size: 12.5px;
}
.paciente-case-steps .cita-flow-copy small {
    font-size: 11.3px;
}
.paciente-case-summary,
.paciente-side-card {
    padding: 18px !important;
    border-color: color-mix(in srgb, var(--ink) 10%, var(--line));
    background: color-mix(in srgb, var(--surface) 96%, transparent);
}
.paciente-case-summary {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: baseline;
    column-gap: 10px;
    row-gap: 10px;
}
.paciente-case-summary h2.serif {
    color: var(--ink-2);
    font-size: 15px !important;
    line-height: 1.14 !important;
    font-weight: 760 !important;
}
.paciente-case-kpis {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}
.paciente-case-kpi {
    padding: 10px 11px;
    border-radius: 13px;
    border-color: color-mix(in srgb, var(--ink) 8%, var(--line));
    background: color-mix(in srgb, var(--surface-2) 46%, var(--surface));
}
.paciente-case-kpi > span {
    margin-bottom: 7px;
    font-size: 10px;
    letter-spacing: .09em;
}
.paciente-case-kpi strong {
    display: block;
    font-size: 16px;
    line-height: 1.08;
    font-weight: 780;
}
.paciente-case-kpi small {
    min-width: 0;
    display: block;
    margin-top: 6px;
    font-size: 11.5px;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
}
.paciente-next-card {
    padding: 18px;
    border-radius: 16px;
    background:
        linear-gradient(180deg,
            color-mix(in srgb, var(--accent-soft) 52%, var(--surface)) 0%,
            var(--surface) 100%);
}
.paciente-next-card strong {
    font-size: 19px;
    line-height: 1.16;
}
.paciente-next-card small {
    font-size: 12.8px;
    line-height: 1.42;
}
.paciente-next-primary svg {
    flex: 0 0 auto;
}
.paciente-whatsapp-button {
    min-height: 44px;
}
.paciente-side-card {
    display: grid;
    gap: 12px;
    border-radius: 16px;
    box-shadow: 0 18px 48px -42px color-mix(in srgb, var(--ink) 52%, transparent);
}
.paciente-side-head {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 12px;
}
.paciente-side-head h2.serif,
.paciente-ficha-card h2.serif {
    margin-top: 6px;
    font-size: 17px !important;
    line-height: 1.14 !important;
}
.paciente-side-head .link-accent {
    font-size: 13px;
    font-weight: 780;
}
.paciente-ficha-card p {
    margin: -4px 0 2px;
    color: var(--ink-2);
    font-size: 14px;
    line-height: 1.42;
}
.paciente-ficha-card .btn-ghost {
    width: 100%;
    min-height: 42px;
    justify-content: center;
}
.paciente-detail-grid {
    align-items: start;
}
.paciente-main-column {
    min-width: 0;
    padding: 18px;
    border: 1px solid color-mix(in srgb, var(--ink) 10%, var(--line));
    border-radius: 18px;
    background: color-mix(in srgb, var(--surface) 96%, transparent);
    box-shadow: 0 18px 48px -42px color-mix(in srgb, var(--ink) 52%, transparent);
}
.paciente-tabs {
    margin: -2px 0 22px;
    border-bottom: 1px solid var(--line);
}
.paciente-tabs .tab {
    font-weight: 780;
}
.paciente-tabs .tab.active {
    color: var(--accent);
}
.session-history-head h2.serif,
.paciente-main-column [data-tab-content] h2.serif {
    font-family: 'Inter', sans-serif !important;
    font-size: 18px !important;
    line-height: 1.16 !important;
    font-weight: 800 !important;
    letter-spacing: 0 !important;
}

@media (min-width: 1181px) {
    .paciente-case-grid {
        position: relative;
        display: block;
        padding-right: 368px;
    }
    .paciente-case-side {
        position: absolute;
        top: 0;
        right: 0;
        width: 350px;
    }
    .paciente-detail-grid {
        display: block !important;
        width: calc(100% - 368px);
        margin-top: -6px;
    }
    .paciente-detail-grid .paciente-main-column {
        width: 100%;
    }
    .paciente-detail-grid .paciente-side-column {
        margin-top: 16px;
    }
}

@media (max-width: 1180px) {
    .paciente-case-grid {
        grid-template-columns: 1fr;
    }
    .paciente-case-side {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .paciente-next-card {
        grid-column: 1 / -1;
    }
}

@media (max-width: 860px) {
    .paciente-detail-shell {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
    .paciente-case-grid,
    .paciente-case-main,
    .paciente-case-side {
        gap: 12px;
    }
    .paciente-case-hero,
    .paciente-case-summary,
    .paciente-side-card,
    .paciente-main-column {
        padding: 14px !important;
        border-radius: 16px;
    }
    .paciente-case-id {
        grid-template-columns: 44px minmax(0, 1fr);
        gap: 11px;
    }
    .paciente-case-id .av-lg {
        width: 44px;
        height: 44px;
        font-size: 15px;
    }
    .paciente-case-copy .cita-pill-row {
        gap: 5px;
        margin-bottom: 7px;
    }
    .paciente-case-copy .cita-status-pill {
        min-height: 22px;
        padding: 4px 8px;
        font-size: 10.5px;
    }
    .paciente-case-copy h1.serif {
        font-size: 20px !important;
        line-height: 1.1 !important;
    }
    .paciente-case-copy .cita-lead {
        margin-top: 5px;
        font-size: 12.8px;
        line-height: 1.38;
    }
    .paciente-case-band {
        grid-template-columns: 1fr;
        margin-top: 12px;
        padding: 11px 12px;
        border-radius: 13px;
    }
    .paciente-case-band .cita-date-icon {
        display: none;
    }
    .paciente-case-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .paciente-case-side {
        grid-template-columns: 1fr;
    }
    .paciente-case-flow {
        padding: 13px 0 0;
        border: 0;
        border-top: 1px solid var(--line-soft);
        border-radius: 0;
        background: transparent;
        gap: 10px;
    }
    .paciente-case-flow .cita-flow-head {
        gap: 4px;
    }
    .paciente-case-flow .cita-flow-head strong {
        font-size: 12px;
        font-weight: 700;
    }
    .paciente-case-steps .cita-flow-copy b {
        font-size: 12.6px;
    }
    .paciente-case-summary h2.serif {
        font-size: 18px !important;
    }
    .paciente-next-card strong {
        font-size: 18px;
    }
    .paciente-side-head h2.serif,
    .paciente-ficha-card h2.serif {
        font-size: 17px !important;
    }
}

@media (max-width: 520px) {
    .paciente-case-kpis,
    .paciente-case-side {
        grid-template-columns: 1fr;
    }
    .paciente-case-kpi strong {
        font-size: 18px;
    }
    .paciente-case-copy h1.serif {
        font-size: 19px !important;
    }
    .paciente-case-band .cita-date-copy b {
        font-size: 12.4px;
        line-height: 1.35;
    }
    .paciente-case-summary h2.serif,
    .session-history-head h2.serif,
    .paciente-main-column [data-tab-content] h2.serif {
        font-size: 17px !important;
    }
    .paciente-tabs {
        overflow-x: auto;
        scrollbar-width: none;
    }
    .paciente-tabs::-webkit-scrollbar {
        display: none;
    }
    .paciente-tabs .tab {
        flex: 0 0 auto;
    }
}

/* ===== Mi perfil =========================================================== */
/* Avatar XL solo para el hero del perfil y la vista previa pública. */
.av-hero { width: 96px; height: 96px; font-size: 32px; }

.profile-hero {
    position: relative; overflow: hidden;
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--accent-soft) 50%, var(--surface)) 0%,
        var(--surface) 100%);
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 32px;
}
.profile-hero::before {
    content: ""; position: absolute;
    top: -60px; right: -60px;
    width: 240px; height: 240px; border-radius: 50%;
    background: radial-gradient(
        circle,
        color-mix(in srgb, var(--accent) 18%, transparent) 0%,
        transparent 70%);
    pointer-events: none;
}

/* /perfil · tablero sobrio de lectura pública */
.profile-page .config-shell {
    max-width: 1180px;
}
.profile-page .profile-page-heading {
    margin-bottom: 16px;
}
.profile-page .profile-hero {
    padding: 22px 24px;
    margin-bottom: 22px !important;
    border-radius: 14px;
    background: var(--surface);
    box-shadow: 0 16px 44px -40px color-mix(in srgb, var(--ink) 42%, transparent);
}
.profile-page .profile-hero::before {
    content: none;
}
.profile-page .profile-hero .av-hero {
    width: 74px;
    height: 74px;
    font-size: 26px;
}
.profile-page .profile-hero h1 {
    font-size: 27px !important;
    line-height: 1.04 !important;
}

.profile-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    margin-bottom: 24px;
}
.profile-stat-card {
    min-height: 128px;
    padding: 18px 20px;
    border: 1px solid color-mix(in srgb, var(--accent) 16%, var(--line));
    border-radius: 12px;
    background: var(--surface);
    box-shadow: 0 16px 42px -38px color-mix(in srgb, var(--ink) 46%, transparent);
}
.profile-stat-top {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    color: var(--ink-2);
    font-size: 12.5px;
    font-weight: 720;
    line-height: 1.25;
}
.profile-stat-icon {
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
    display: grid;
    place-items: center;
    border-radius: 7px;
    background: color-mix(in srgb, var(--accent-soft) 66%, var(--surface));
    color: var(--accent);
    border: 1px solid color-mix(in srgb, var(--accent) 14%, transparent);
}
.profile-stat-value {
    margin-top: 22px;
    color: var(--ink);
    font-family: 'Fraunces', 'Times New Roman', serif;
    font-size: 31px;
    font-weight: 650;
    line-height: 1;
    letter-spacing: 0;
    font-variant-numeric: tabular-nums;
}
.profile-stat-value small {
    margin-left: 1px;
    color: var(--ink-2);
    font-family: 'Inter', sans-serif;
    font-size: 17px;
    font-weight: 720;
}
.profile-stat-date {
    margin-top: 18px;
    color: var(--ink);
    font-family: 'Fraunces', 'Times New Roman', serif;
    font-size: 20px;
    font-weight: 650;
    line-height: 1.1;
}
.profile-stat-sub {
    margin-top: 6px;
    color: var(--muted);
    font-size: 12.5px;
    font-weight: 560;
}

.profile-page .profile-public-layout {
    grid-template-columns: minmax(0, 1.08fr) minmax(420px, .92fr);
    gap: 22px;
    align-items: stretch;
}
.profile-page .profile-public-card,
.profile-page .profile-preview-wrap {
    min-height: 565px;
    border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--line));
    border-radius: 12px;
    background: var(--surface);
    box-shadow: 0 18px 48px -42px color-mix(in srgb, var(--ink) 46%, transparent);
}
.profile-page .profile-public-card {
    padding: 24px !important;
}
.profile-panel-title {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--ink);
}
.profile-panel-icon {
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    display: grid;
    place-items: center;
    color: var(--accent);
}
.profile-page .profile-public-title {
    font-size: 20px;
    font-weight: 650;
}
.profile-page .profile-public-copy {
    max-width: 58ch;
    margin: 16px 0 34px;
    color: var(--ink-2);
    font-size: 13.5px;
    line-height: 1.55;
}
.profile-public-card .profile-read-grid {
    grid-template-columns: 1fr;
    gap: 24px;
}
.profile-public-card .profile-read-grid div {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}
.profile-public-card .profile-read-grid span {
    margin-bottom: 10px;
    color: var(--ink-2);
    font-size: 12.5px;
    font-weight: 760;
    letter-spacing: 0;
    text-transform: none;
}
.profile-read-value {
    min-height: 50px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 12px 0 16px;
    border: 1px solid color-mix(in srgb, var(--accent) 14%, var(--line));
    border-radius: 7px;
    background: color-mix(in srgb, var(--surface) 94%, var(--surface-2));
}
.profile-read-value strong {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--ink);
    font-size: 14.5px;
    font-weight: 650;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.profile-copy-mini {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--ink-2);
    cursor: pointer;
}
.profile-copy-mini:hover {
    background: color-mix(in srgb, var(--accent-soft) 52%, var(--surface));
    color: var(--accent);
}
.profile-public-card .profile-action-row {
    margin-top: 38px;
    gap: 22px;
}
.profile-public-card .profile-action-row .btn-primary,
.profile-public-card .profile-action-row .btn-ghost {
    min-height: 42px;
    border-radius: 7px;
    padding-inline: 18px;
}

.profile-page .profile-preview-wrap {
    position: static;
    max-width: none;
    padding: 18px 18px 14px;
    gap: 12px;
}
.profile-page .profile-preview-eyebrow {
    color: var(--ink);
    font-size: 16px;
    font-weight: 760;
    letter-spacing: 0;
    text-transform: none;
}
.profile-page .profile-preview-card {
    border-radius: 9px;
    border-color: color-mix(in srgb, var(--accent) 18%, var(--line));
    box-shadow: none;
}
.profile-page .profile-preview-urlbar {
    min-height: 44px;
    padding: 8px 12px;
}
.profile-page .profile-preview-url {
    text-align: left;
    font-size: 12px;
}
.profile-page .profile-preview-body {
    min-height: 458px;
    justify-content: flex-start;
    padding: 20px 26px 16px;
}
.profile-page .profile-preview-avatar .profile-photo-frame,
.profile-page .profile-preview-avatar .profile-photo-preview {
    width: 86px;
    height: 86px;
}
.profile-page .profile-preview-avatar .profile-photo-preview {
    font-size: 30px;
}
.profile-page .profile-preview-name {
    margin-top: 8px;
    font-size: 23px;
}
.profile-page .profile-preview-meta-row {
    gap: 8px;
    margin-top: 4px;
}
.profile-page .profile-preview-bio {
    max-width: 360px;
    margin-top: 10px;
    font-size: 13px;
    line-height: 1.55;
}
.profile-page .profile-preview-cta {
    min-height: 44px;
    margin-top: auto;
    border-radius: 7px;
}

@media (max-width: 1100px) {
    .profile-stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .profile-page .profile-public-layout {
        grid-template-columns: 1fr;
    }
    .profile-page .profile-preview-wrap,
    .profile-page .profile-public-card {
        min-height: auto;
    }
}
@media (max-width: 700px) {
    .profile-stats-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    .profile-stat-card {
        min-height: 112px;
    }
    .profile-page .profile-public-card,
    .profile-page .profile-preview-wrap {
        padding: 18px !important;
        border-radius: 12px;
    }
    .profile-public-card .profile-action-row {
        gap: 10px;
    }
    .profile-public-card .profile-action-row .btn-primary,
    .profile-public-card .profile-action-row .btn-ghost {
        width: 100%;
        justify-content: center;
    }
    .profile-read-value strong {
        white-space: normal;
        overflow-wrap: anywhere;
    }
}

/* ===== Mobile polish · navegación y vistas densas ========================= */
@media (max-width: 700px) {
    .topbar {
        padding: 0 14px;
        gap: 8px;
    }
    .search-wrapper {
        min-width: 0;
        max-width: none;
    }
    .search-input {
        min-width: 0;
        padding-right: 12px;
        font-size: 12.5px;
    }
    .search-wrapper kbd {
        display: none;
    }
    .topbar .theme-btn,
    .topbar .accessibility-btn,
    .topbar-icon-btn,
    .notification-btn {
        flex: 0 0 auto;
    }
    .notification-panel {
        position: fixed;
        top: 66px;
        right: 12px;
        left: 12px;
        width: auto;
    }
    .reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .profile-hero {
        padding: 22px !important;
        border-radius: 20px;
    }
    .profile-hero > .flex {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 16px !important;
    }
    .profile-hero .av-hero {
        width: 76px;
        height: 76px;
        font-size: 24px;
    }
    .profile-hero h1 {
        font-size: 26px !important;
        line-height: 1.04 !important;
    }
    .profile-hero .flex-1 {
        width: 100%;
        min-width: 0;
    }
    .profile-hero .flex.flex-col {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px !important;
        width: 100%;
    }
    .profile-hero .btn-primary,
    .profile-hero .btn-ghost {
        width: 100%;
        min-height: 42px;
        justify-content: center;
        text-align: center;
    }
    .profile-hero .btn-ghost {
        font-size: 13px !important;
    }
    .profile-url-input {
        min-width: 0;
    }
    .profile-url-input span {
        min-width: 0;
        max-width: 104px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .paciente-kpi-strip {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        margin: 0 0 22px;
        padding: 0;
        overflow: visible;
        scroll-snap-type: none;
    }
    .paciente-kpi-card {
        flex: initial;
        min-width: 0;
        scroll-snap-align: none;
        padding: 14px !important;
    }
    .paciente-tabs .tab[data-tab="datos"] > span:first-child {
        font-size: 0;
    }
    .paciente-tabs .tab[data-tab="datos"] > span:first-child::after {
        content: "Archivos";
        font-size: 12.5px;
    }
}

/* ===== Responsive base final ============================================= */
@media (max-width: 900px) {
    .topbar {
        min-height: 58px;
        padding-left: 64px !important;
        padding-right: 12px !important;
        justify-content: flex-end;
    }
    .main {
        width: 100%;
        overflow-x: hidden;
    }
    .config-shell,
    .cobros-shell,
    .msg-shell,
    .paciente-detail-shell,
    .cita-detail-shell,
    .cita-command-shell,
    .cita-workspace,
    .agenda-shell {
        max-width: 100%;
    }
    .config-shell {
        padding: 22px 16px 34px;
    }
    .home-page {
        padding: 22px 16px 32px !important;
    }
    .home-hero-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 18px;
        margin-bottom: 24px;
    }
    .home-hero-grid h1.serif {
        font-size: 40px !important;
        line-height: 1.02 !important;
        margin-bottom: 12px !important;
    }
    .home-hero-summary {
        max-width: none !important;
        font-size: 15px !important;
        line-height: 1.45 !important;
    }
    .home-hero-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        margin-top: 16px;
        max-width: none;
    }
    .home-hero-action {
        width: 100%;
        min-width: 0;
        min-height: 40px;
        padding: 8px 10px;
        font-size: 12px;
        white-space: nowrap;
    }
    .hero-next {
        padding: 18px !important;
        border-radius: 16px;
    }
    .hero-next .av-lg {
        width: 54px;
        height: 54px;
        font-size: 17px;
    }
    .hero-next .serif span.mono {
        font-size: 34px !important;
    }
    .hero-next .flex.gap-2.relative {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
    }
    .hero-next .btn-primary,
    .hero-next .btn-ghost {
        min-height: 40px;
        padding-inline: 12px;
        justify-content: center;
        white-space: nowrap;
    }
    .home-confirmations {
        margin: 0 0 22px;
    }
    .home-confirm-row {
        grid-template-columns: 38px minmax(0, 1fr);
        gap: 9px 12px;
        min-height: 0;
    }
    .home-confirm-date,
    .home-confirm-modality,
    .home-confirm-origin,
    .home-confirm-action {
        grid-column: 2;
        justify-self: start;
    }
    .home-confirm-table-head {
        display: none;
    }
    .home-confirmations-head {
        align-items: flex-start;
        flex-direction: column;
    }
    .home-confirm-card {
        border-radius: 14px;
    }
    .home-confirm-row {
        padding: 14px;
    }
    .home-confirm-person strong {
        display: block;
    }
    .home-confirm-action {
        width: auto;
        min-height: 32px;
        padding-inline: 13px;
    }
    .home-confirmations-head h2 {
        font-size: 21px;
    }
    .home-agenda-card,
    .home-attention-card {
        padding: 18px !important;
        border-radius: 16px;
    }
    .home-agenda-head,
    .home-attention-head {
        align-items: flex-start !important;
    }
    .home-agenda-link {
        min-height: 36px;
        padding: 0 12px;
        border: 1px solid color-mix(in srgb, var(--accent) 20%, var(--line));
        border-radius: 999px;
        background: color-mix(in srgb, var(--accent-soft) 32%, var(--surface));
        text-decoration: none;
        white-space: nowrap;
    }
    .home-agenda-row {
        display: grid !important;
        grid-template-columns: 42px minmax(0, 1fr) auto;
        grid-template-areas:
            "avatar person time"
            "avatar status amount";
        align-items: center !important;
        gap: 6px 10px !important;
        padding: 13px 0 !important;
        border-radius: 0 !important;
    }
    .home-agenda-row + .home-agenda-row {
        border-top: 1px solid var(--line-soft);
    }
    .home-agenda-time {
        grid-area: time;
        width: auto !important;
        justify-self: end;
        color: var(--ink-2);
        font-size: 12.5px !important;
        line-height: 1;
    }
    .home-agenda-avatar {
        grid-area: avatar;
        width: 34px;
        height: 34px;
        font-size: 12px;
    }
    .home-agenda-person {
        grid-area: person;
    }
    .home-agenda-person > div:first-child {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .home-agenda-person > div:nth-child(2) {
        display: -webkit-box;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        line-height: 1.25 !important;
    }
    .home-agenda-status {
        grid-area: status;
        min-width: 0;
        justify-self: start;
    }
    .home-agenda-status .pill {
        max-width: 100%;
        min-height: 26px;
        padding-inline: 9px;
        font-size: 11.5px;
    }
    .home-agenda-row .evento-monto {
        grid-area: amount;
        width: auto !important;
        justify-self: end;
        font-size: 12px !important;
        white-space: nowrap;
    }
    .home-attention-list {
        display: grid;
        gap: 0 !important;
    }
    .atencion-item {
        display: grid;
        grid-template-columns: 38px minmax(0, 1fr);
        gap: 0 12px;
        padding: 14px 0;
    }
    .atencion-item .av {
        width: 34px;
        height: 34px;
        font-size: 12px;
    }
    .home-attention-action {
        min-height: 34px;
        padding: 0 12px;
        font-size: 12px;
    }
    .config-hero {
        align-items: flex-start;
        flex-direction: column;
    }
    .config-hero-actions {
        width: 100%;
        justify-content: stretch;
    }
    .config-hero-actions > * {
        flex: 1 1 auto;
        justify-content: center;
    }
    .config-grid {
        grid-template-columns: 1fr;
    }
    .config-card-defaults,
    .config-card-style,
    .config-card-services,
    .config-card-social,
    .config-section-title-services,
    .config-side,
    .config-grid > .config-card-google,
    .config-card-main {
        grid-column: auto;
    }
    .config-grid > .config-card-google .google-connect-panel {
        grid-template-columns: 1fr;
        align-items: stretch;
    }
    .google-connect-panel.is-connected .google-connect-actions {
        grid-template-columns: 1fr;
    }
    .config-card-main {
        min-height: 0;
    }
}

@media (max-width: 700px) {
    .topbar .search-wrapper {
        display: none;
    }
    .topbar .theme-btn {
        margin-left: 0;
    }
    .config-card {
        padding: 18px;
        border-radius: 16px;
    }
    .config-form-grid,
    .profile-form-grid,
    .config-mini-grid {
        grid-template-columns: 1fr;
    }
    .config-card-defaults .config-mini-grid {
        grid-template-columns: 1fr;
    }
    .service-config-card {
        grid-template-columns: 1fr;
    }
    .service-config-actions {
        display: flex;
        flex-wrap: wrap;
    }
    .service-config-main,
    .service-meta-grid,
    .service-rates,
    .social-config-row {
        grid-template-columns: 1fr;
    }
    .service-name-field {
        grid-column: 1 / -1;
    }
    .service-active-toggle,
    .social-config-row .config-toggle,
    .social-config-row .icon-btn-soft {
        justify-self: stretch;
    }
    .cita-meet-strip {
        grid-template-columns: 38px minmax(0, 1fr);
    }
    .cita-meet-link {
        grid-column: 1 / -1;
        width: 100%;
    }
    .profile-span-2 {
        grid-column: auto;
    }
}

@media (max-width: 520px) {
    .mobile-menu-btn {
        top: calc(9px + env(safe-area-inset-top));
        left: 10px;
        width: 40px;
        height: 40px;
    }
    .topbar {
        padding-left: 58px !important;
    }
    .topbar .theme-btn span {
        display: none;
    }
    .home-page {
        padding: 18px 14px 30px !important;
    }
    .home-hero-grid {
        gap: 16px;
        margin-bottom: 22px;
    }
    .home-hero-grid h1.serif {
        font-size: 36px !important;
    }
    .home-hero-actions {
        grid-template-columns: 1fr;
    }
    .hero-next {
        padding: 16px !important;
    }
    .hero-next .mb-5.relative {
        margin-bottom: 14px !important;
    }
    .hero-next .flex.items-center.gap-2.text-\[13px\] {
        align-items: flex-start;
        flex-wrap: wrap;
        gap: 6px;
    }
    .hero-next .flex.items-center.gap-2.text-\[13px\] > span:nth-child(2) {
        display: none;
    }
    .hero-next .btn-primary,
    .hero-next .btn-ghost {
        min-height: 38px;
        font-size: 12.5px;
    }
    .home-confirmations-head {
        margin-bottom: 8px;
    }
    .home-confirmations-head h2 {
        font-size: 19px;
    }
    .home-confirm-row {
        grid-template-columns: 34px minmax(0, 1fr);
        gap: 8px 11px;
        padding: 13px 12px;
    }
    .home-confirm-person strong {
        font-size: 14.5px;
    }
    .home-confirm-date strong {
        font-size: 12.5px;
    }
    .home-confirm-origin {
        font-size: 10.5px;
    }
    .home-confirm-modality {
        min-height: 22px;
        padding-inline: 9px;
        font-size: 10.5px;
    }
    .home-confirm-action {
        width: 100%;
    }
    .home-agenda-card,
    .home-attention-card {
        padding: 16px !important;
    }
    .home-agenda-head {
        display: grid !important;
        grid-template-columns: 1fr;
        margin-bottom: 12px !important;
    }
    .home-agenda-link {
        width: 100%;
        justify-content: center;
    }
    .home-agenda-row {
        grid-template-columns: 36px minmax(0, 1fr) auto;
        gap: 6px 9px !important;
        padding: 12px 0 !important;
    }
    .home-agenda-avatar {
        width: 32px;
        height: 32px;
        font-size: 11.5px;
    }
    .home-agenda-time {
        font-size: 12px !important;
    }
    .home-agenda-person > div:first-child {
        font-size: 13.5px !important;
    }
    .home-agenda-person > div:nth-child(2) {
        font-size: 11px !important;
    }
    .home-agenda-status .pill {
        min-height: 24px;
        padding-inline: 8px;
        font-size: 11px;
    }
    .home-agenda-status .pill svg {
        display: none;
    }
    .home-agenda-row .evento-monto {
        font-size: 11.5px !important;
    }
    .atencion-item {
        grid-template-columns: 34px minmax(0, 1fr);
        gap: 0 10px;
    }
    .home-attention-action {
        width: 100%;
        justify-content: center;
    }
    .config-hero-actions {
        display: grid;
        grid-template-columns: 1fr;
    }
    .config-card-head {
        gap: 10px;
    }
    .config-step {
        width: 32px;
        height: 32px;
        border-radius: 10px;
        font-size: 11px;
    }
}

/* Public booking tablet pass: give iPad-sized screens real room. */
@media (max-width: 860px) {
    .public-booking-shell {
        max-width: 640px;
    }
}

@media (min-width: 700px) and (max-width: 860px) {
    .public-booking {
        padding: 18px;
    }
    .public-booking-hero,
    .public-booking-card {
        padding: 22px;
    }
    .public-booking-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }
    .public-summary-head,
    .public-summary-choice,
    .public-summary-whatsapp {
        grid-column: 1 / -1;
    }
}

/* ============================================================================
 * AGENDA V2 · prefijo .agv2-* · namespace aislado del .agenda-* legacy
 * ========================================================================== */
.agv2-page { padding: 0; }
.agv2-page-inner {
    padding: 20px 22px 60px;
}
.agv2-week-ajax-root {
    position: relative;
}
.agv2-week-chrome-root {
    min-width: 0;
}
.agv2-week-ajax-root.is-loading #agendaWeekChromeRoot,
.agv2-week-ajax-root.is-loading #agendaWeekGridRoot {
    pointer-events: none;
}
.agv2-week-ajax-root.is-loading .agv2-hero-rango::after {
    content: "";
    display: inline-block;
    width: 18px;
    height: 10px;
    margin-left: 8px;
    vertical-align: -1px;
    border-radius: 999px;
    background:
        radial-gradient(circle at 5px 50%, currentColor 0 2px, transparent 2.4px),
        radial-gradient(circle at 13px 50%, currentColor 0 2px, transparent 2.4px);
    opacity: .42;
    animation: agv2-range-loading .92s ease-in-out infinite;
}
.agv2-week-loading {
    position: absolute;
    inset: 0;
    z-index: 90;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 220px;
    border-radius: 18px;
    background: color-mix(in srgb, var(--surface) 48%, transparent);
    color: var(--ink);
    font-size: 13px;
    font-weight: 760;
    letter-spacing: 0;
    opacity: 0;
    pointer-events: none;
    backdrop-filter: blur(2px);
    transition: opacity .16s ease;
}
.agv2-week-ajax-root.is-loading-slow .agv2-week-loading {
    opacity: 1;
    pointer-events: auto;
}
.agv2-week-loading-mark {
    width: 32px;
    height: 18px;
    color: var(--accent);
}
.agv2-week-loading-mark .v-loader-circle {
    width: 14px;
    height: 14px;
    border-width: 1.8px;
}
.agv2-week-loading-mark .v-loader-left { left: 3px; }
.agv2-week-loading-mark .v-loader-right { right: 3px; }
@keyframes agv2-range-loading {
    0%, 100% { opacity: .24; transform: translateY(0); }
    50% { opacity: .56; transform: translateY(-1px); }
}

/* Slide horizontal cuando la navegación entre semanas reemplaza el DOM via
   AJAX (replaceWith). Replica el feedback del scroll horizontal interno para
   que el "siguiente" se sienta continuo en lugar de un salto seco.
   Desplazamiento más amplio (72px) y duración un poco más larga (280ms) para
   que el cambio se note · antes era casi imperceptible. */
@keyframes agv2-slide-in-right {
    from { opacity: 0; transform: translate3d(72px, 0, 0); }
    to   { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes agv2-slide-in-left {
    from { opacity: 0; transform: translate3d(-72px, 0, 0); }
    to   { opacity: 1; transform: translate3d(0, 0, 0); }
}
/* La clase va al contenedor estable (.agv2-week-ajax-root), no a los hijos
   reemplazados · el browser ya pinta el replaceWith en estado final antes
   de ver classList.add y la anim no arrancaba. Sobre el contenedor sí. */
.agv2-week-ajax-root.agv2-is-entering-from-right {
    animation: agv2-slide-in-right .32s cubic-bezier(.2,.72,.18,1) both;
    will-change: transform, opacity;
}
.agv2-week-ajax-root.agv2-is-entering-from-left {
    animation: agv2-slide-in-left .32s cubic-bezier(.2,.72,.18,1) both;
    will-change: transform, opacity;
}
@media (prefers-reduced-motion: reduce) {
    .agv2-week-ajax-root.agv2-is-entering-from-right,
    .agv2-week-ajax-root.agv2-is-entering-from-left { animation: none; }
}
.agv2-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 20px;
    align-items: start;
    margin-top: 18px;
}
.agv2-main { min-width: 0; }

/* Hero ---------------------------------------------------------------------- */
.agv2-hero {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 18px; flex-wrap: wrap;
    margin-bottom: 18px;
}
.agv2-hero-left {
    display: grid;
    gap: 8px;
}
.agv2-hero-title { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.agv2-hero-title h1 { margin: 0; }
.agv2-hero-date {
    width: fit-content;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px 8px 10px;
    border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--line));
    border-radius: 14px;
    background: color-mix(in srgb, var(--accent-soft) 48%, var(--surface));
    color: var(--ink);
    box-shadow: 0 18px 38px -32px color-mix(in srgb, var(--accent) 62%, transparent);
}
.agv2-hero-date-icon {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    background: var(--surface);
    color: var(--accent);
    border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--line));
}
.agv2-hero-date-copy {
    display: grid;
    gap: 1px;
    min-width: 0;
}
.agv2-hero-date-copy small {
    color: var(--accent);
    font-size: 10.5px;
    font-weight: 850;
    letter-spacing: 0;
    line-height: 1.1;
    text-transform: uppercase;
}
.agv2-hero-date-copy strong {
    color: var(--ink);
    font-size: 16.5px;
    font-weight: 760;
    letter-spacing: 0;
    line-height: 1.18;
}
.agv2-hero-actions {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}

.agv2-view-switch {
    display: inline-flex; align-items: center; gap: 0;
    padding: 3px;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: var(--surface-2);
    box-shadow: none;
}
.agv2-view {
    border: 0; background: transparent;
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 13px; font-weight: 500;
    color: var(--ink-2);
    cursor: pointer;
    line-height: 1.2;
    min-width: auto;
    text-align: center;
    text-decoration: none;
    transition: background .15s ease, color .15s ease;
}
.agv2-view:hover { color: var(--ink); background: var(--surface-2); }
.agv2-view.is-active {
    background: var(--surface);
    color: var(--ink);
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
    font-weight: 600;
}

.agv2-nav {
    display: inline-flex; align-items: center;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface);
    padding: 3px;
}
.agv2-nav-btn,
.agv2-nav-hoy {
    display: inline-flex; align-items: center; justify-content: center;
    height: 30px; padding: 0 12px;
    color: var(--ink-2); text-decoration: none;
    border-radius: 999px;
    font-size: 13px; font-weight: 500;
    transition: background .15s ease, color .15s ease;
}
.agv2-nav-btn { width: 32px; padding: 0; }
.agv2-nav-btn:hover, .agv2-nav-hoy:hover { background: var(--surface-2); color: var(--ink); }

.agv2-btn-nueva {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 16px !important; font-size: 13px;
}

/* Filter bar ---------------------------------------------------------------- */
.agv2-filterbar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 14px; flex-wrap: wrap;
    padding: 14px 0 16px;
    border-bottom: 1px solid var(--line);
    margin-bottom: 0;
}
.agv2-filter-left,
.agv2-filter-right {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.agv2-filter-label {
    font-size: 11px; font-weight: 700; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--muted);
}
.agv2-chip {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 6px 14px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface);
    color: var(--ink-2); text-decoration: none;
    font-size: 12.5px; font-weight: 500;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.agv2-chip-icon {
    width: 14px;
    height: 14px;
    flex: 0 0 14px;
    display: inline-block;
    color: currentColor;
    background: currentColor;
    opacity: .72;
    -webkit-mask: var(--agv2-chip-icon) center / contain no-repeat;
    mask: var(--agv2-chip-icon) center / contain no-repeat;
}
.agv2-chip.is-active .agv2-chip-icon { opacity: .9; }
.agv2-chip-icon-todas {
    --agv2-chip-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 4.5h10M3 8h10M3 11.5h10' fill='none' stroke='black' stroke-width='1.55' stroke-linecap='round'/%3E%3C/svg%3E");
}
.agv2-chip-icon-presencial {
    --agv2-chip-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 14s4-3.8 4-7A4 4 0 1 0 4 7c0 3.2 4 7 4 7Z' fill='none' stroke='black' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='8' cy='7' r='1.25' fill='none' stroke='black' stroke-width='1.05'/%3E%3C/svg%3E");
}
.agv2-chip-icon-online {
    --agv2-chip-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='2' y='4.5' width='9.5' height='7' rx='1.5' fill='none' stroke='black' stroke-width='1.15'/%3E%3Cpath d='M11.5 7l2.5-1.6v5.2L11.5 9' fill='none' stroke='black' stroke-width='1.15' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.agv2-chip-icon-hibrida {
    --agv2-chip-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 13V8.3L6.8 5l4.2 3.2V13M4.6 13v-2.7H9V13' fill='none' stroke='black' stroke-width='1.45' stroke-linecap='round' stroke-linejoin='round'/%3E%3Crect x='9.5' y='3.5' width='3.2' height='2.5' rx='.5' fill='none' stroke='black' stroke-width='1.25'/%3E%3Cpath d='M12.7 4.5l1.2-.8v2.1l-1.2-.7' fill='none' stroke='black' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.agv2-chip-icon-confirmadas {
    --agv2-chip-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.2 8.2l3 3 6.6-6.7' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.agv2-chip-icon-esperando {
    --agv2-chip-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='8' cy='8' r='5.4' fill='none' stroke='black' stroke-width='1.45'/%3E%3Cpath d='M8 4.8V8l2.1 1.4' fill='none' stroke='black' stroke-width='1.45' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.agv2-chip:hover { background: var(--surface-2); color: var(--ink); }
.agv2-chip.is-active {
    background: var(--accent-soft);
    color: var(--accent);
    border-color: color-mix(in srgb, var(--accent) 32%, transparent);
    font-weight: 600;
}
.agv2-filter-divider {
    width: 1px; height: 18px; background: var(--line); margin: 0 4px;
}

/* Filter bar responsive (≤900px) ─ scroll horizontal con snap, ocultar
   label "MODALIDAD", apilar la fila de pills (cerrar pasadas + citas hoy)
   debajo en su propia barra. Evita que chips se amontonen en 3 filas. */
@media (max-width: 900px) {
    .agv2-filterbar {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        padding: 10px 0 12px;
        flex-wrap: nowrap;
    }
    .agv2-filter-left {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
        /* Sin bleed-out · alineamos el primer chip con el resto del contenido
           del módulo (Agenda hero, Nueva cita, cerrar pasadas). Padding-right
           extra deja afford visual de "hay más" al final. */
        margin-inline: 0;
        padding: 2px 24px 4px 0;
        gap: 8px;
    }
    .agv2-filter-left::-webkit-scrollbar { display: none; }
    .agv2-filter-left .agv2-chip {
        flex-shrink: 0;
        scroll-snap-align: start;
        padding: 7px 13px;
        min-height: 34px;
    }
    .agv2-filter-label { display: none; }
    .agv2-filter-divider {
        flex-shrink: 0;
        height: 16px;
    }
    .agv2-filter-right {
        flex-wrap: wrap;
        gap: 8px;
        justify-content: flex-start;
    }
    .agv2-pill-cerrar,
    .agv2-pill-today {
        min-height: 34px;
    }
}
.agv2-legend {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 12px; color: var(--ink-2);
}
.agv2-dot {
    display: inline-block; width: 8px; height: 8px; border-radius: 50%;
    background: var(--muted);
}
.agv2-dot-confirmed { background: #2eb568; }
.agv2-dot-pending   { background: #f5a623; }
.agv2-dot-done      { background: #9aa6b8; }
.agv2-side-eyebrow .agv2-dot-confirmed {
    animation: agv2-dot-breathe 1.8s ease-in-out infinite;
}
@keyframes agv2-dot-breathe {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 color-mix(in srgb, #2eb568 34%, transparent);
        opacity: .92;
    }
    50% {
        transform: scale(1.22);
        box-shadow: 0 0 0 6px color-mix(in srgb, #2eb568 0%, transparent);
        opacity: 1;
    }
}

.agv2-pill-today {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 12px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 999px;
    font-size: 12.5px;
    color: var(--ink-2);
}
.agv2-pill-today svg { color: var(--ink-2); flex: 0 0 13px; }
.agv2-pill-today strong { color: var(--ink); font-weight: 600; }
.agv2-pill-next {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 12px;
    border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--line));
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent-soft) 62%, var(--surface));
    color: var(--accent);
    font-size: 12.5px;
    font-weight: 650;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, transform .12s ease;
}
.agv2-pill-next:hover {
    background: color-mix(in srgb, var(--accent-soft) 82%, var(--surface));
    border-color: color-mix(in srgb, var(--accent) 42%, var(--line));
    transform: translateY(-1px);
}
.agv2-pill-next strong {
    color: color-mix(in srgb, var(--accent) 86%, var(--ink));
    font-weight: 760;
}
.agv2-pill-next span:last-child {
    color: var(--ink-2);
    font-weight: 560;
}
.agv2-mini-pill {
    display: inline-flex; align-items: center;
    padding: 2px 8px;
    background: color-mix(in srgb, var(--accent) 15%, transparent);
    color: var(--accent);
    border-radius: 999px;
    font-size: 11px; font-weight: 600;
}

/* Pill "cerrar pasadas" en filterbar de la agenda */
.agv2-pill-cerrar {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 5px 11px 5px 9px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--warn) 38%, var(--line));
    background: color-mix(in srgb, var(--warm-soft) 60%, var(--surface));
    color: color-mix(in srgb, var(--warn) 78%, var(--ink));
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, transform .12s ease;
}
.agv2-pill-cerrar:hover {
    background: color-mix(in srgb, var(--warm-soft) 80%, var(--surface));
    border-color: color-mix(in srgb, var(--warn) 56%, var(--line));
    transform: translateY(-1px);
}
.agv2-pill-cerrar svg { color: var(--warn); flex: 0 0 13px; }
.agv2-pill-cerrar strong { font-weight: 850; }
.agv2-pill-cerrar span { font-weight: 600; opacity: .85; }

/* ===== Panel "cerrar pasadas" =========================================== */
.cerrar-layer {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: grid;
    place-items: center;
    background: color-mix(in srgb, var(--ink) 38%, transparent);
    backdrop-filter: blur(2px);
    opacity: 0;
    transition: opacity .22s ease;
}
.cerrar-layer.is-open { opacity: 1; }
.cerrar-sheet {
    width: min(820px, calc(100vw - 32px));
    max-height: calc(100vh - 48px);
    display: flex; flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 18px;
    box-shadow: 0 30px 80px -30px color-mix(in srgb, var(--ink) 70%, transparent);
    overflow: hidden;
    transform: translateY(8px) scale(.985);
    transition: transform .22s ease;
}
.cerrar-layer.is-open .cerrar-sheet { transform: translateY(0) scale(1); }

.cerrar-head {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
    padding: 18px 20px 14px;
    border-bottom: 1px solid var(--line-soft);
}
.cerrar-eyebrow {
    display: block;
    color: var(--warn);
    font-size: 11px;
    font-weight: 880;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.cerrar-head h2 {
    margin: 4px 0 4px;
    color: var(--ink);
    font-size: 19px;
    font-weight: 600;
    line-height: 1.2;
}
.cerrar-head h2 span { color: var(--warn); }
.cerrar-head p {
    margin: 0;
    color: var(--ink-2);
    font-size: 12.5px;
    line-height: 1.45;
    max-width: 540px;
}
.cerrar-close {
    flex: 0 0 32px;
    width: 32px; height: 32px;
    display: grid; place-items: center;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: var(--surface);
    color: var(--ink-2);
    cursor: pointer;
}
.cerrar-close:hover { background: var(--surface-2); }

.cerrar-toolbar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 20px;
    background: color-mix(in srgb, var(--surface-2) 60%, var(--surface));
    border-bottom: 1px solid var(--line-soft);
    font-size: 12.5px;
}
.cerrar-checkall {
    display: inline-flex; align-items: center; gap: 8px;
    color: var(--ink-2);
    font-weight: 600;
    cursor: pointer;
}
.cerrar-checkall input { accent-color: var(--accent); }
.cerrar-selected { color: var(--muted); font-weight: 700; }

.cerrar-list {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 4px 8px;
}
.cerrar-row {
    display: grid;
    grid-template-columns: 28px 64px minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-bottom: 1px solid var(--line-soft);
}
.cerrar-row:last-child { border-bottom: 0; }
.cerrar-row-check input { accent-color: var(--accent); }
.cerrar-row-when {
    display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15;
}
.cerrar-row-when strong { color: var(--ink); font-size: 13.5px; font-weight: 700; }
.cerrar-row-when small { color: var(--muted); font-size: 11.5px; font-weight: 700; }
.cerrar-row-paciente {
    display: flex; align-items: center; gap: 10px; min-width: 0;
}
.cerrar-row-paciente strong {
    display: block;
    color: var(--ink);
    font-size: 13.5px;
    font-weight: 650;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cerrar-row-paciente small {
    display: block;
    color: var(--muted);
    font-size: 11.5px;
}
.cerrar-row-tarifa {
    color: var(--ink);
    font-size: 13px;
    font-weight: 700;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.cerrar-row-actions {
    display: inline-flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end;
    min-height: 28px;
    align-items: center;
}
.cerrar-row-spinner {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 4px 12px;
    border: 1px dashed color-mix(in srgb, var(--accent) 40%, var(--line));
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent-soft) 36%, var(--surface));
    color: color-mix(in srgb, var(--accent) 80%, var(--ink));
}
.cerrar-row-mark {
    width: 38px;
    height: 22px;
    position: relative;
}
.cerrar-row-mark .v-loader-circle {
    width: 16px;
    height: 16px;
    top: 3px;
    border-width: 1.6px;
    opacity: .9;
}
.cerrar-row-mark .v-loader-left  { left: 4px; animation: cerrarLoaderLeft 1.4s cubic-bezier(.45,0,.2,1) infinite; }
.cerrar-row-mark .v-loader-right { right: 4px; animation: cerrarLoaderRight 1.4s cubic-bezier(.45,0,.2,1) infinite; }
@keyframes cerrarLoaderLeft {
    0%, 100% { transform: translateX(-4px); }
    45%, 55% { transform: translateX(7px); }
}
@keyframes cerrarLoaderRight {
    0%, 100% { transform: translateX(4px); }
    45%, 55% { transform: translateX(-7px); }
}
.cerrar-row-spinner-label {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .01em;
}

.cerrar-row {
    overflow: hidden;
    transition: max-height .32s ease, opacity .25s ease, transform .32s ease,
                padding .3s ease, border-color .3s ease;
    will-change: max-height, opacity, transform;
}
.cerrar-row.is-leaving { pointer-events: none; }

.cerrar-empty {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center;
    gap: 10px;
    padding: 38px 24px 32px;
    color: var(--ink-2);
}
.cerrar-empty-mark {
    width: 56px; height: 56px;
    display: grid; place-items: center;
    border-radius: 50%;
    color: var(--ok);
    background: color-mix(in srgb, var(--ok-soft) 70%, var(--surface));
    border: 1px solid color-mix(in srgb, var(--ok) 32%, var(--line));
}
.cerrar-empty strong {
    color: var(--ink);
    font-size: 16px;
    font-weight: 700;
}
.cerrar-empty p {
    margin: 0;
    color: var(--muted);
    font-size: 12.5px;
    line-height: 1.45;
    max-width: 420px;
}
.cerrar-row-btn {
    padding: 5px 10px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--ink-2);
    font-size: 11.5px;
    font-weight: 700;
    cursor: pointer;
    transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.cerrar-row-btn:hover { background: var(--surface-2); }
.cerrar-row-btn[disabled] { opacity: .5; cursor: progress; }
.cerrar-row-btn-ok {
    border-color: color-mix(in srgb, var(--ok) 36%, var(--line));
    color: color-mix(in srgb, var(--ok) 78%, var(--ink));
}
.cerrar-row-btn-ok:hover {
    background: color-mix(in srgb, var(--ok-soft) 50%, var(--surface));
    border-color: color-mix(in srgb, var(--ok) 60%, var(--line));
}
.cerrar-row-btn-warn {
    border-color: color-mix(in srgb, var(--warn) 36%, var(--line));
    color: color-mix(in srgb, var(--warn) 78%, var(--ink));
}
.cerrar-row-btn-warn:hover {
    background: color-mix(in srgb, var(--warm-soft) 56%, var(--surface));
    border-color: color-mix(in srgb, var(--warn) 60%, var(--line));
}
.cerrar-row-btn-quiet { color: var(--muted); }

.cerrar-foot {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 14px 20px;
    border-top: 1px solid var(--line-soft);
    background: color-mix(in srgb, var(--surface-2) 50%, var(--surface));
}
.cerrar-foot-msg {
    flex: 1 1 auto;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--muted);
    min-height: 18px;
}
.cerrar-foot-msg.is-ok  { color: var(--ok); }
.cerrar-foot-msg.is-err { color: var(--rose); }
.cerrar-foot-buttons { display: inline-flex; gap: 8px; flex-wrap: wrap; }
.cerrar-bulk-warn {
    border-color: color-mix(in srgb, var(--warn) 36%, var(--line)) !important;
    color: color-mix(in srgb, var(--warn) 78%, var(--ink)) !important;
}

@media (max-width: 720px) {
    /* Fila: avatar+meta arriba, acciones full-width 3-col abajo con tap target proper */
    .cerrar-row {
        grid-template-columns: 28px 1fr auto;
        grid-template-areas:
            "check when    tarifa"
            "check pac     pac"
            "actions actions actions";
        row-gap: 10px;
    }
    .cerrar-row-check    { grid-area: check; }
    .cerrar-row-when     { grid-area: when; }
    .cerrar-row-tarifa   { grid-area: tarifa; }
    .cerrar-row-paciente { grid-area: pac; }
    .cerrar-row-actions {
        grid-area: actions;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 6px;
        justify-content: stretch;
        margin-top: 4px;
        padding-top: 10px;
        border-top: 1px dashed color-mix(in srgb, var(--line) 80%, transparent);
        min-height: 0;
    }
    .cerrar-row-btn {
        min-height: 36px;
        padding: 6px 8px;
        font-size: 12px;
        font-weight: 700;
        text-align: center;
        white-space: nowrap;
    }
    .cerrar-row-btn-ok   { background: color-mix(in srgb, var(--ok-soft) 38%, var(--surface)); }
    .cerrar-row-btn-warn { background: color-mix(in srgb, var(--warm-soft) 32%, var(--surface)); }
    /* El spinner reemplaza los 3 botones; lo centramos a lo ancho */
    .cerrar-row-spinner {
        grid-column: 1 / -1;
        justify-self: center;
    }

    /* Footer del bulk: jerarquía clara, sin botón Cerrar (la × del header sirve)
       1) Marcar realizadas (primary, full-width arriba)
       2) Marcar como no asistió (ghost-warn, full-width debajo)
       3) Mensaje de estado al final si lo hay */
    .cerrar-foot {
        flex-direction: column;
        align-items: stretch;
        padding: 12px 16px calc(14px + env(safe-area-inset-bottom, 0px));
        gap: 8px;
    }
    .cerrar-foot-msg {
        order: 2;
        text-align: center;
        font-size: 12px;
    }
    .cerrar-foot-msg:empty { display: none; }
    .cerrar-foot-buttons {
        order: 1;
        display: grid;
        grid-template-columns: 1fr;
        gap: 6px;
        width: 100%;
    }
    .cerrar-foot-buttons .btn-primary,
    .cerrar-foot-buttons .btn-ghost {
        width: 100%;
        min-height: 46px;
        justify-content: center;
        font-size: 13px;
    }
    /* Reordenar visualmente: primary primero, warn segundo, "Cerrar" oculto en mobile */
    .cerrar-foot-buttons [data-cerrar-bulk="REALIZADA"]  { order: 1; }
    .cerrar-foot-buttons [data-cerrar-bulk="NO_ASISTIO"] { order: 2; }
    .cerrar-foot-buttons [data-cerrar-close]             { display: none; }
}

/* Week grid ----------------------------------------------------------------- */
.agv2-week {
    --agv2-time-col: 56px;
    --agv2-day-min: 156px;
    --agv2-days-min-width: 1092px;
    position: relative;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 14px;
    overflow: hidden;
}
.agv2-week::before,
.agv2-week::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 46px;
    z-index: 8;
    pointer-events: none;
    opacity: 0;
    transition: opacity .18s ease;
}
.agv2-week::before {
    left: var(--agv2-time-col);
    background: linear-gradient(90deg,
        color-mix(in srgb, var(--surface) 94%, transparent) 0%,
        transparent 100%);
}
.agv2-week::after {
    right: 0;
    background: linear-gradient(270deg,
        color-mix(in srgb, var(--surface) 94%, transparent) 0%,
        transparent 100%);
}
.agv2-week.can-scroll-left::before,
.agv2-week.can-scroll-right::after {
    opacity: 1;
}
.agv2-week-head {
    display: grid;
    grid-template-columns: var(--agv2-time-col) repeat(7, minmax(var(--agv2-day-min), 1fr));
    border-bottom: 1px solid var(--line);
    background: color-mix(in srgb, var(--surface-2) 60%, var(--surface));
    overflow-x: hidden;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    scroll-behavior: smooth;
    cursor: grab;
}
.agv2-week-head::-webkit-scrollbar {
    display: none;
}
.agv2-week.is-x-panning .agv2-week-head {
    cursor: grabbing;
    scroll-behavior: auto;
}
.agv2-time-col-head {
    position: sticky;
    left: 0;
    z-index: 9;
    min-height: 62px;
    border-right: 1px solid var(--line);
    background: color-mix(in srgb, var(--surface-2) 60%, var(--surface));
}
.agv2-day-head {
    padding: 7px 10px;
    min-height: 62px;
    border-right: 1px solid var(--line);
    display: flex; flex-direction: column; align-items: flex-start; gap: 0;
    position: relative;
    min-width: 0;
}
.agv2-day-head.is-today { padding-right: 48px; }
.agv2-day-head:last-child { border-right: 0; }
.agv2-day-name {
    font-size: 10px; font-weight: 720; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--muted);
}
.agv2-day-num {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 24px; font-weight: 600; color: var(--ink);
    line-height: 1.05;
    margin-top: 1px;
}
.agv2-day-head.is-today .agv2-day-num {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px;
    background: var(--accent);
    color: var(--surface);
    border-radius: 50%;
    font-size: 18px;
}
.agv2-day-today {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    padding: 3px 6px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent) 10%, var(--surface));
    border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--line));
    font-size: 9px; font-weight: 780; letter-spacing: 0.1em;
    line-height: 1;
    color: var(--accent);
    pointer-events: none;
}

.agv2-week-body {
    display: grid;
    grid-template-columns: var(--agv2-time-col) repeat(7, minmax(var(--agv2-day-min), 1fr));
    position: relative;
    max-height: calc(100vh - 280px);
    overflow-y: auto;
    overflow-x: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scroll-behavior: smooth;
}
.agv2-week-body::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
.agv2-week-body::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--muted) 28%, transparent);
    border: 3px solid transparent;
    border-radius: 999px;
    background-clip: padding-box;
}
.agv2-week-body::-webkit-scrollbar-track {
    background: transparent;
}
.agv2-week-body.is-x-panning {
    cursor: grabbing;
    user-select: none;
    scroll-behavior: auto;
}
.agv2-week-x-btn {
    position: absolute;
    top: calc(62px + min(260px, 30vh));
    z-index: 12;
    width: 38px;
    height: 38px;
    display: inline-grid;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--line) 82%, white);
    border-radius: 999px;
    background: color-mix(in srgb, var(--surface) 82%, transparent);
    color: var(--ink);
    box-shadow:
        0 14px 30px -24px color-mix(in srgb, var(--ink) 70%, transparent),
        inset 0 1px 0 color-mix(in srgb, white 70%, transparent);
    backdrop-filter: blur(10px) saturate(1.08);
    -webkit-backdrop-filter: blur(10px) saturate(1.08);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-50%) scale(.98);
    transition:
        opacity .16s ease,
        transform .16s ease,
        background .16s ease,
        border-color .16s ease,
        color .16s ease;
}
.agv2-week-x-btn:not([disabled]):hover {
    background: var(--surface);
    border-color: color-mix(in srgb, var(--accent) 30%, var(--line));
    color: var(--accent);
    transform: translateY(-50%) scale(1);
}
.agv2-week-x-btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
.agv2-week-x-btn[disabled] {
    opacity: .34;
    cursor: default;
    pointer-events: none;
    filter: saturate(.7);
}
.agv2-week-x-prev {
    left: calc(var(--agv2-time-col) + 10px);
}
.agv2-week-x-next {
    right: 12px;
}
.agv2-week.has-x-overflow .agv2-week-x-btn {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(-50%) scale(1);
}
.agv2-week.has-x-overflow .agv2-week-x-btn[disabled] {
    opacity: .34;
    pointer-events: none;
}
.agv2-time-col {
    position: sticky;
    left: 0;
    z-index: 6;
    border-right: 1px solid var(--line);
    background: var(--surface);
    box-shadow: 1px 0 0 var(--line);
}
.agv2-time-row {
    position: relative;
}
.agv2-time-label {
    position: absolute;
    top: -7px; right: 7px;
    font-size: 10.5px; color: var(--muted);
    font-variant-numeric: tabular-nums;
}
.agv2-time-row:first-child .agv2-time-label { top: 4px; }

.agv2-day-col {
    position: relative;
    border-right: 1px solid var(--line);
    background:
        repeating-linear-gradient(135deg,
            color-mix(in srgb, var(--muted) 14%, transparent) 0 1px,
            transparent 1px 16px),
        color-mix(in srgb, var(--surface-2) 14%, var(--surface));
}
.agv2-day-col:last-child { border-right: 0; }
.agv2-day-col.is-today {
    background:
        repeating-linear-gradient(135deg,
            color-mix(in srgb, var(--accent) 12%, transparent) 0 1px,
            transparent 1px 16px),
        color-mix(in srgb, var(--accent-soft) 10%, var(--surface));
}
.agv2-hour-line {
    border-bottom: 1px solid color-mix(in srgb, var(--line) 65%, transparent);
}
.agv2-hour-line:last-child { border-bottom: 0; }

.agv2-free-slot {
    position: absolute;
    left: 1px;
    right: 1px;
    border-radius: 0;
    background: linear-gradient(180deg,
        var(--surface) 0%,
        color-mix(in srgb, var(--surface-2) 5%, var(--surface)) 100%);
    box-shadow: inset 0 1px 0 color-mix(in srgb, white 56%, transparent);
    opacity: 1;
    pointer-events: none;
    z-index: 0;
}
.agv2-day-col.has-slots:hover .agv2-free-slot {
    background: color-mix(in srgb, var(--accent-soft) 8%, var(--surface));
    box-shadow: inset 0 1px 0 color-mix(in srgb, white 64%, transparent);
}
.agv2-day-col.no-slots {
    background:
        repeating-linear-gradient(135deg,
            color-mix(in srgb, var(--muted) 16%, transparent) 0 1px,
            transparent 1px 16px),
        color-mix(in srgb, var(--surface-2) 20%, var(--surface));
}

/* Now-line · línea horizontal con la hora actual */
.agv2-now-line {
    position: absolute;
    left: 0;
    right: auto;
    width: max(100%, calc(var(--agv2-time-col) + var(--agv2-days-min-width)));
    height: 0;
    z-index: 7;
    pointer-events: none;
}
.agv2-now-line::after {
    content: "";
    position: absolute;
    top: 0;
    left: var(--agv2-time-col);
    right: 0;
    border-top: 2px dashed var(--agenda-now);
    filter: drop-shadow(0 1px 0 color-mix(in srgb, white 64%, transparent));
}
.agv2-now-badge {
    position: absolute;
    left: 7px;
    top: 0;
    transform: translateY(-50%);
    min-width: 43px;
    height: 23px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 8px;
    border-radius: 6px;
    background: var(--agenda-now);
    color: white;
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 11.5px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0;
    box-shadow: 0 8px 18px -12px color-mix(in srgb, var(--agenda-now) 86%, transparent);
}
.agv2-now-dot {
    position: absolute;
    left: calc(var(--agv2-time-col) - 4px);
    top: -4px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--agenda-now);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--agenda-now) 14%, transparent);
}

/* Almuerzo · zona no reservable · misma identidad visual del día libre */
.agv2-lunch {
    position: absolute;
    left: 3px; right: 3px;
    background:
        linear-gradient(90deg,
            color-mix(in srgb, var(--warm) 34%, var(--surface)) 0 3px,
            transparent 3px),
        repeating-linear-gradient(135deg,
            color-mix(in srgb, var(--warm-soft) 22%, var(--surface)) 0 1px,
            color-mix(in srgb, var(--warm-soft) 10%, var(--surface)) 1px 14px),
        color-mix(in srgb, var(--warm-soft) 18%, var(--surface));
    border: 0;
    border-radius: 5px;
    box-shadow:
        inset 0 0 0 1px color-mix(in srgb, var(--warm) 10%, transparent),
        inset 0 1px 0 color-mix(in srgb, white 52%, transparent);
    backdrop-filter: blur(4px) saturate(.92);
    -webkit-backdrop-filter: blur(4px) saturate(.92);
    pointer-events: none;
    display: flex; align-items: center; justify-content: center;
    color: color-mix(in srgb, var(--warm) 46%, var(--ink));
    font-size: 10.5px; font-weight: 650;
    letter-spacing: .02em;
    z-index: 1;
}
.agv2-lunch span {
    max-width: calc(100% - 18px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    opacity: .68;
}

/* Eventos ------------------------------------------------------------------- */
.agv2-evt {
    position: absolute;
    left: 4px; right: 4px;
    padding: 4px 7px;
    border: 0;
    border-radius: 5px;
    background: var(--surface-2);
    text-align: left;
    cursor: pointer;
    overflow: hidden;
    z-index: 2;
    transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
    display: flex; flex-direction: column; gap: 0;
    font-family: inherit;
    line-height: 1.2;
}
.agv2-evt:hover {
    filter: brightness(0.97);
    box-shadow: 0 4px 12px -6px rgba(0,0,0,.18);
}
.agv2-evt:focus-visible,
.agv2-evt.is-selected {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
    box-shadow: 0 4px 12px -6px rgba(0,0,0,.22);
}
.agv2-evt.is-focus-arrival {
    animation: agv2-focus-arrival 2.4s ease-out 1;
    z-index: 4;
}
@keyframes agv2-focus-arrival {
    0% {
        transform: translateY(-1px) scale(1);
        box-shadow:
            0 0 0 0 color-mix(in srgb, var(--accent) 38%, transparent),
            0 10px 24px -18px color-mix(in srgb, var(--accent) 76%, transparent);
    }
    32% {
        transform: translateY(-1px) scale(1.025);
        box-shadow:
            0 0 0 9px color-mix(in srgb, var(--accent) 18%, transparent),
            0 18px 34px -18px color-mix(in srgb, var(--accent) 90%, transparent);
    }
    66% {
        transform: translateY(-1px) scale(1.012);
        box-shadow:
            0 0 0 4px color-mix(in srgb, var(--accent) 12%, transparent),
            0 14px 28px -18px color-mix(in srgb, var(--accent) 80%, transparent);
    }
    100% {
        transform: translateY(0) scale(1);
        box-shadow:
            0 0 0 0 transparent,
            0 4px 12px -6px rgba(0,0,0,.22);
    }
}

/* Nombre · línea principal, prioritaria · contiene texto + mandorla */
.agv2-evt-name {
    display: flex; align-items: center; gap: 4px;
    font-size: 12.5px;
    font-weight: 620;
    color: var(--ink);
    overflow: hidden;
    line-height: 1.15;
}
.agv2-evt-name-text {
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.agv2-evt-mandorla {
    flex: 0 0 14px;
    color: var(--accent);
    opacity: .85;
}
.agv2-evt-cancelled .agv2-evt-mandorla,
.agv2-evt-blocked .agv2-evt-mandorla,
.agv2-evt-done .agv2-evt-mandorla { display: none; }
/* Hora · línea secundaria con icono modalidad */
.agv2-evt-time {
    display: inline-flex; align-items: center; gap: 3px;
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 10px;
    font-weight: 500;
    color: var(--ink-2);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.agv2-evt-time svg { flex: 0 0 11px; opacity: .75; }
.agv2-evt-time > span:first-child { overflow: hidden; text-overflow: ellipsis; }

.agv2-week-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 15px 20px 16px;
    border-top: 1px solid color-mix(in srgb, var(--line) 84%, var(--surface-2));
    background:
        linear-gradient(180deg,
            color-mix(in srgb, var(--surface) 88%, var(--surface-2)) 0%,
            color-mix(in srgb, var(--surface-2) 58%, var(--surface)) 100%);
}
.agv2-week-footer-stats {
    min-width: 0;
    display: flex;
    align-items: baseline;
    gap: clamp(16px, 2.4vw, 30px);
    flex-wrap: wrap;
}
.agv2-week-metric {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    color: color-mix(in srgb, var(--muted) 86%, var(--ink-2));
    font-size: 13px;
    line-height: 1.2;
    white-space: nowrap;
}
.agv2-week-metric strong {
    color: var(--ink);
    font-family: 'Fraunces', Georgia, serif;
    font-size: 20px;
    font-weight: 650;
    line-height: 1;
    letter-spacing: 0;
}
.agv2-week-footer-link {
    flex: 0 0 auto;
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--accent);
    font-size: 14px;
    font-weight: 780;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
}
.agv2-week-footer-link:hover {
    color: var(--accent-hover);
}
.agv2-week-footer-link svg {
    flex: 0 0 auto;
}

/* Estados visuales · solo fondo tinte (sin borde izquierdo) */
.agv2-evt.agv2-evt-confirmed {
    background: color-mix(in srgb, #2eb568 12%, var(--surface));
}
.agv2-evt.agv2-evt-pending {
    background: color-mix(in srgb, #f5a623 14%, var(--surface));
}
.agv2-evt.agv2-evt-done {
    background: color-mix(in srgb, #9aa6b8 12%, var(--surface));
    opacity: .85;
}
.agv2-evt.agv2-evt-done .agv2-evt-name { color: var(--ink-2); }
.agv2-evt.agv2-evt-cancelled {
    background: color-mix(in srgb, var(--rose) 10%, var(--surface));
    opacity: .65;
}
.agv2-evt.agv2-evt-cancelled .agv2-evt-name { text-decoration: line-through; }
.agv2-evt.agv2-evt-blocked {
    background: var(--surface-2);
    color: var(--muted);
    cursor: default;
}
/* Cita atada a paciente sistema (V62 · REVISION_IDENTIDAD) · ámbar suave
   con border-dashed izquierdo para indicar "necesita acción · es transitorio".
   Mismo tono que `.notification-item.is-urgent` (pill warn) para consistencia. */
.agv2-evt.agv2-evt-revision {
    background: color-mix(in srgb, var(--warn-soft) 38%, var(--surface));
    border-left: 3px dashed color-mix(in srgb, var(--warn) 70%, var(--line));
}
.agv2-evt.agv2-evt-revision .agv2-evt-name {
    color: color-mix(in srgb, var(--warn) 78%, var(--ink));
    font-style: italic;
}

/* Side panel · próxima sesión ---------------------------------------------- */
.agv2-side {
    position: sticky;
    top: 16px;
}
.agv2-side-clean {
    display: block;
}
.agv2-next-layer {
    position: fixed;
    inset: 0;
    z-index: 150;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    padding: clamp(16px, 3vw, 30px);
    background: color-mix(in srgb, var(--ink) 8%, transparent);
    opacity: 0;
    pointer-events: none;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    transition: opacity .18s ease;
}
.agv2-next-layer[hidden] {
    display: none;
}
.agv2-next-layer.is-open {
    opacity: 1;
    pointer-events: auto;
}
.agv2-next-card {
    position: relative;
    width: min(430px, calc(100vw - 32px));
    margin-top: clamp(38px, 7vh, 74px);
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    border: 1px solid color-mix(in srgb, var(--accent) 20%, var(--line));
    border-radius: 18px;
    background: color-mix(in srgb, var(--surface) 96%, white);
    box-shadow:
        0 24px 72px -42px color-mix(in srgb, var(--ink) 70%, transparent),
        0 1px 0 color-mix(in srgb, white 68%, transparent) inset;
    transform: translateY(-8px) scale(.985);
    transition: transform .2s cubic-bezier(.2,.72,.18,1);
}
.agv2-next-layer.is-open .agv2-next-card {
    transform: translateY(0) scale(1);
}
.agv2-next-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 34px;
    height: 34px;
    display: inline-grid;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--ink-2);
    cursor: pointer;
}
.agv2-next-close:hover {
    background: var(--surface);
    color: var(--ink);
}
.agv2-next-card .agv2-side-head {
    padding-right: 42px;
}
.agv2-side-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 18px;
    display: flex; flex-direction: column; gap: 16px;
    box-shadow: 0 1px 0 rgba(0,0,0,.02);
}

.agv2-side-head {
    display: flex; align-items: center; gap: 10px;
    flex-wrap: wrap;
}
.agv2-side-eyebrow {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 11px; font-weight: 700; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--accent);
}
.agv2-side-eta {
    margin-left: auto;
    padding: 4px 10px;
    font-size: 11.5px; font-weight: 600;
    background: var(--surface-2);
    border-radius: 999px;
    color: var(--ink-2);
}
.agv2-side-patient {
    display: flex; align-items: center; gap: 12px;
    position: relative;
}
.agv2-side-mandorla {
    margin-left: auto;
    color: var(--accent);
    opacity: .88;
    flex-shrink: 0;
}
.agv2-avatar {
    width: 44px; height: 44px;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 600; font-size: 14px;
    background: var(--surface-2);
    color: var(--ink-2);
    flex-shrink: 0;
}
.agv2-avatar-accent {
    background: color-mix(in srgb, var(--accent) 12%, var(--surface));
    color: var(--accent);
    border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line));
}
.agv2-patient-id { display: flex; flex-direction: column; min-width: 0; }
.agv2-patient-id strong {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 18px; font-weight: 600;
    color: var(--ink);
    line-height: 1.2;
}
.agv2-patient-id span {
    font-size: 12px; color: var(--muted);
    margin-top: 2px;
}

.agv2-side-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 16px;
    padding: 14px;
    background: var(--surface-2);
    border-radius: 10px;
}
.agv2-side-cell { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.agv2-cell-label {
    font-size: 10px; font-weight: 700; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--muted);
}
.agv2-cell-value {
    font-size: 14px; font-weight: 600;
    color: var(--ink);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.agv2-cell-value[data-focus-hour] {
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
}
.agv2-cell-with-icon {
    display: inline-flex; align-items: center; gap: 5px;
}
.agv2-cell-with-icon svg { color: var(--ink-2); }
.agv2-pago-ok { color: #2eb568; }
.agv2-pago-pending { color: #f5a623; }

/* ============================================================
 *  Drag-to-create + Drag-from-patients (estilo macOS Calendar)
 * ============================================================ */

/* ============================================================
 *  Sistema visual disponible / no disponible (vista semana)
 *  · Disponible: cursor cell, hover sutil con tinte accent.
 *  · No disponible (domingo, almuerzo, fuera de jornada): striping
 *    diagonal en gris suave + cursor not-allowed.
 * ============================================================ */
.agv2-day-col {
    cursor: not-allowed;
    transition: background-color .15s ease, filter .15s ease;
}
.agv2-day-col.has-slots {
    cursor: cell;
}
.agv2-day-col:not(.day-off):not(.no-slots):hover {
    filter: saturate(1.02);
}
.agv2-day-col.is-today:not(.day-off):not(.no-slots):hover {
    filter: saturate(1.05);
}

/* Día libre · columna entera con stripes diagonales · no clickeable */
.agv2-day-col.day-off {
    background:
        repeating-linear-gradient(135deg,
            color-mix(in srgb, var(--muted) 18%, transparent) 0 1px,
            transparent 1px 16px),
        color-mix(in srgb, var(--surface-2) 22%, var(--surface));
    cursor: not-allowed;
}
.agv2-day-col.day-off .agv2-evt,
.agv2-day-col.day-off .agv2-lunch { display: none; }

.agv2-day-col.no-slots { cursor: default; }
.agv2-day-col .agv2-evt,
.agv2-day-col .agv2-lunch {
    cursor: default;
}
.agv2-day-col .agv2-evt[data-id],
.agv2-day-col .agv2-evt[data-cita-url] {
    cursor: pointer;
}
.agv2-week-body.is-dragging {
    user-select: none;
    cursor: grabbing;
}
.agv2-week-body.is-dragging .agv2-day-col { cursor: grabbing; }
.agv2-shell.is-agenda-dragging .agv2-side-tabs {
    opacity: 1;
}
.agv2-shell.is-agenda-dragging .agv2-side-tabs button {
    cursor: pointer;
}
.agv2-shell.is-agenda-dragging .agv2-side-mode-toggle {
    opacity: 1;
    cursor: pointer;
    box-shadow:
        inset 0 0 0 1px color-mix(in srgb, var(--accent) 16%, transparent),
        0 12px 26px -24px color-mix(in srgb, var(--accent) 52%, transparent);
}
.agv2-shell.is-agenda-dragging .agv2-side {
    pointer-events: auto;
}
.agv2-shell.is-agenda-dragging .agv2-side > * {
    opacity: 1;
}

/* Ghost block · respira y muestra rango horario en vivo */
.agv2-ghost {
    position: absolute;
    left: 4px;
    right: 4px;
    z-index: 5;
    border-radius: 8px;
    pointer-events: none;
    overflow: hidden;
    display: flex;
    align-items: flex-start;
    padding: 6px 9px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: -0.005em;
    transition:
        top .08s linear,
        height .08s linear,
        opacity .18s ease,
        transform .18s ease,
        filter .18s ease,
        background .15s ease,
        border-color .15s ease;
    animation: agv2-ghost-in .14s ease-out;
}
.agv2-ghost-create {
    background: color-mix(in srgb, var(--accent) 22%, var(--surface));
    border: 1.5px dashed color-mix(in srgb, var(--accent) 64%, var(--line));
    color: color-mix(in srgb, var(--accent) 80%, var(--ink));
    box-shadow: 0 14px 28px -22px color-mix(in srgb, var(--accent) 60%, transparent);
}
.agv2-ghost-patient {
    background: color-mix(in srgb, var(--surface) 72%, transparent);
    border: 2px dashed color-mix(in srgb, var(--accent) 66%, var(--line));
    color: color-mix(in srgb, var(--accent) 78%, var(--ink));
    box-shadow:
        0 0 0 1px color-mix(in srgb, white 70%, transparent) inset,
        0 18px 34px -24px color-mix(in srgb, var(--accent) 72%, transparent);
    backdrop-filter: blur(4px) saturate(120%);
    -webkit-backdrop-filter: blur(4px) saturate(120%);
}
.agv2-ghost-patient .agv2-ghost-label {
    display: inline-flex;
    max-width: 100%;
    padding: 3px 6px;
    border-radius: 7px;
    background: color-mix(in srgb, var(--surface) 88%, white);
    box-shadow: 0 1px 0 rgba(255,255,255,.72) inset;
}
.agv2-ghost.is-pending {
    opacity: .55;
    background: color-mix(in srgb, var(--accent-soft) 70%, var(--surface));
}
.agv2-ghost.is-conflict {
    background: color-mix(in srgb, var(--rose) 16%, var(--surface));
    border-color: var(--rose);
    color: var(--rose);
    animation: agv2-ghost-pulse 0.6s ease-in-out infinite alternate;
}
.agv2-ghost.is-soft-warning {
    background: color-mix(in srgb, var(--warn-soft) 42%, var(--surface));
    border-color: color-mix(in srgb, var(--warn) 46%, var(--line));
    color: color-mix(in srgb, var(--warn) 74%, var(--ink));
    box-shadow: 0 16px 34px -28px color-mix(in srgb, var(--warn) 55%, transparent);
    animation: agv2-ghost-in .14s ease-out;
}
.agv2-ghost.is-soft-warning .agv2-ghost-label {
    display: inline-flex;
    max-width: 100%;
    padding: 3px 6px;
    border-radius: 7px;
    background: color-mix(in srgb, var(--surface) 86%, white);
    white-space: normal;
    overflow-wrap: anywhere;
}
.agv2-ghost.is-shake {
    animation: agv2-ghost-shake .32s ease-in-out;
}
.agv2-ghost.is-outside-calendar {
    opacity: .58;
    transform: scale(.985) translateY(2px);
    filter: blur(.6px) saturate(.82);
    background: color-mix(in srgb, var(--surface-2) 78%, transparent);
    border-color: color-mix(in srgb, var(--muted) 34%, var(--line));
    color: color-mix(in srgb, var(--muted) 80%, var(--ink));
    box-shadow:
        0 0 0 1px color-mix(in srgb, white 56%, transparent) inset,
        0 10px 24px -24px color-mix(in srgb, var(--ink) 50%, transparent);
}
.agv2-ghost.is-outside-calendar .agv2-ghost-label {
    background: color-mix(in srgb, var(--surface) 76%, transparent);
    color: color-mix(in srgb, var(--muted) 86%, var(--ink));
}
.agv2-ghost.is-dropping-out {
    opacity: 0;
    transform: scale(.94) translateY(10px);
    filter: blur(5px) saturate(.62);
    transition:
        opacity .52s ease,
        transform .52s cubic-bezier(.2,.72,.18,1),
        filter .52s ease,
        background .2s ease,
        border-color .2s ease;
}
@keyframes agv2-ghost-in {
    from { opacity: 0; transform: scale(.985); }
    to   { opacity: 1; transform: scale(1); }
}
@keyframes agv2-ghost-pulse {
    from { box-shadow: 0 0 0 0 color-mix(in srgb, var(--rose) 40%, transparent); }
    to   { box-shadow: 0 0 0 6px color-mix(in srgb, var(--rose) 0%, transparent); }
}
@keyframes agv2-ghost-shake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-4px); }
    40%, 80% { transform: translateX(4px); }
}
.agv2-ghost-label {
    line-height: 1.25;
    pointer-events: none;
}

.agenda-wizard-layer {
    background:
        radial-gradient(40% 36% at 50% 42%,
            color-mix(in srgb, var(--accent) 18%, transparent) 0,
            transparent 70%),
        color-mix(in srgb, var(--ink) 26%, transparent);
}
.agenda-wizard {
    width: min(560px, 100%);
    height: min(760px, calc(100vh - 48px));
}
.agenda-wizard .cuenta-wizard-eyebrow {
    color: var(--accent);
}
.agenda-wizard .cuenta-wizard-progress span.is-active {
    background: var(--accent);
}
.agenda-wizard-step {
    padding-top: 4px;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.agv2-quick-create {
    position: relative;
    z-index: 131;
    padding: 0;
}
.agv2-quick-create [hidden] {
    display: none !important;
}
.agv2-quick-top {
    display: flex;
    align-items: center;
    gap: 8px;
}
.agv2-quick-top strong {
    color: var(--ink);
    font-size: 14px;
    line-height: 1;
}
.agv2-quick-close {
    margin-left: auto;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface);
    color: var(--ink-2);
    cursor: pointer;
}
.agv2-quick-close:hover {
    background: var(--surface-2);
    color: var(--ink);
}
.agv2-quick-time {
    margin-top: 0;
    padding: 12px 14px;
    border: 1px solid var(--line-soft);
    border-radius: 12px;
    background: var(--surface-2);
    color: var(--ink);
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 13px;
    font-weight: 750;
    letter-spacing: 0;
}
.agv2-quick-create p {
    margin: 7px 0 0;
    color: var(--muted);
    font-size: 12.5px;
    line-height: 1.38;
}
.agv2-quick-steps {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 10px;
    color: var(--muted);
    font-size: 10.5px;
    font-weight: 800;
}
.agv2-quick-steps span {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 4px 8px;
    border-radius: 999px;
    background: var(--surface-2);
}
.agv2-quick-steps span.is-done {
    background: color-mix(in srgb, var(--ok-soft) 76%, var(--surface));
    color: var(--ok);
}
.agv2-quick-steps span.is-active {
    background: color-mix(in srgb, var(--accent-soft) 76%, var(--surface));
    color: var(--accent);
}
.agv2-quick-steps i {
    width: 18px;
    height: 1px;
    background: color-mix(in srgb, var(--line) 78%, transparent);
}
.agv2-quick-inline-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
    flex-wrap: wrap;
}
.agv2-quick-inline-actions .agv2-quick-btn {
    min-width: 136px;
}
.agv2-quick-patient-trigger {
    width: fit-content;
    margin-top: 0;
}
.agv2-quick-patient-card {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
    padding: 10px;
    border-radius: 12px;
    border: 1px solid color-mix(in srgb, var(--ok) 20%, var(--line));
    background: color-mix(in srgb, var(--ok-soft) 36%, var(--surface));
}
.agv2-quick-avatar {
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: color-mix(in srgb, var(--accent-soft) 70%, var(--surface));
    color: var(--accent);
    font-size: 12px;
    font-weight: 850;
}
.agv2-quick-patient-card > span:not(.agv2-quick-avatar) {
    display: grid;
    min-width: 0;
}
.agv2-quick-patient-card strong,
.agv2-quick-result strong {
    color: var(--ink);
    font-size: 13px;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.agv2-quick-patient-card small,
.agv2-quick-result small {
    margin-top: 3px;
    color: var(--muted);
    font-size: 11.5px;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.agv2-quick-patient-card button {
    margin-left: auto;
    border: 0;
    background: transparent;
    color: var(--accent);
    font-size: 11.5px;
    font-weight: 800;
    cursor: pointer;
}
.agv2-quick-picker {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    height: 310px;
    max-height: 310px;
    margin-top: 12px;
    padding: 12px;
    border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--line));
    border-radius: 14px;
    background: color-mix(in srgb, var(--surface-2) 48%, var(--surface));
}
.agv2-quick-search {
    height: 46px;
    flex: 0 0 46px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 14px;
    border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--line));
    border-radius: 12px;
    background: var(--surface);
    color: var(--muted);
    transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
.agv2-quick-picker.is-loading .agv2-quick-search {
    border-color: color-mix(in srgb, var(--accent) 30%, var(--line));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-soft) 38%, transparent);
}
.agv2-quick-search input {
    width: 100%;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--ink);
    font: inherit;
    font-size: 14px;
}
.agv2-quick-search-loader {
    width: 36px;
    height: 24px;
    flex: 0 0 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.agv2-quick-search-loader[hidden] { display: none; }
.agv2-quick-mandorla {
    width: 34px;
    height: 20px;
    transform: scale(.72);
    transform-origin: center;
}
.agv2-quick-mandorla .v-loader-circle {
    top: 2px;
    width: 16px;
    height: 16px;
    border-width: 1.7px;
    background: color-mix(in srgb, var(--surface) 84%, transparent);
    box-shadow: none;
}
.agv2-quick-mandorla .v-loader-left { left: 3px; }
.agv2-quick-mandorla .v-loader-right { right: 3px; }
.agv2-quick-results {
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    gap: 6px;
    align-content: start;
    max-height: none;
    margin-top: 12px;
    overflow: auto;
    overscroll-behavior: contain;
}
.agv2-quick-loading-state {
    min-height: 118px;
    display: grid;
    place-items: center;
}
.agv2-quick-results > span {
    padding: 10px 8px;
    color: var(--muted);
    font-size: 12.5px;
    line-height: 1.35;
}
.agv2-quick-results > span.is-error {
    color: var(--rose);
}
.agv2-quick-result {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
    width: 100%;
    padding: 8px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.agv2-quick-result > span:last-child {
    display: grid;
    min-width: 0;
}
.agv2-quick-result:hover,
.agv2-quick-result:focus-visible {
    background: var(--surface);
    border-color: color-mix(in srgb, var(--accent) 20%, var(--line));
    outline: 0;
}
.agv2-quick-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 0;
}
.agv2-quick-btn {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 8px;
    padding: 8px 11px;
    font: inherit;
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    transition: transform .14s ease, box-shadow .14s ease, background .14s ease, border-color .14s ease;
}
.agv2-quick-btn svg {
    flex: 0 0 auto;
}
.agv2-quick-secondary {
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--ink-2);
    box-shadow: none;
}
.agv2-quick-secondary:hover {
    background: var(--surface-2);
    color: var(--ink);
    border-color: var(--line);
}
.agv2-quick-primary {
    border: 0;
    background: var(--accent);
    color: white;
    box-shadow: none;
}
.agv2-quick-primary:hover {
    background: var(--accent-hover);
    filter: none;
    box-shadow: none;
}
.agv2-quick-btn:active {
    transform: translateY(1px) scale(.99);
}
.agv2-quick-btn:disabled {
    cursor: not-allowed;
    opacity: .52;
    filter: saturate(.72);
    box-shadow: none;
}
.agv2-quick-btn:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--accent) 70%, white);
    outline-offset: 2px;
}
.agv2-shell.is-patient-picking .agv2-week-head,
.agv2-shell.is-patient-picking .agv2-week-body,
.agv2-shell.is-patient-picking .agv2-side {
    filter: blur(5px) saturate(.84);
    opacity: .58;
    pointer-events: none;
    transition: filter .16s ease, opacity .16s ease;
}
@media (max-width: 420px) {
    .agenda-wizard {
        height: min(92vh, 760px);
    }
    .agv2-quick-picker {
        height: 300px;
        max-height: 300px;
    }
    .agv2-quick-actions {
        flex-direction: column;
    }
    .agv2-quick-inline-actions {
        flex-direction: column;
        align-items: stretch;
    }
    .agv2-quick-inline-actions .agv2-quick-btn {
        width: 100%;
    }
    .agv2-quick-btn {
        width: 100%;
    }
    .agv2-quick-patient-trigger {
        width: 100%;
    }
}
.agv2-quick-actions .btn-primary,
.agv2-quick-actions .btn-ghost {
    min-height: 36px;
    justify-content: center;
    padding: 7px 10px;
}

/* Hint visual del borde lateral durante auto-scroll de semana */
.agv2-week-body.is-edge-prev::before,
.agv2-week-body.is-edge-next::before {
    content: '';
    position: absolute;
    top: 0; bottom: 0;
    width: 90px;
    pointer-events: none;
    z-index: 6;
    animation: agv2-edge-pulse .52s ease-in-out infinite alternate;
}
.agv2-week-body.is-edge-prev::before {
    left: 0;
    background: linear-gradient(90deg,
        color-mix(in srgb, var(--accent) 30%, transparent) 0,
        transparent 100%);
}
.agv2-week-body.is-edge-next::before {
    right: 0;
    background: linear-gradient(270deg,
        color-mix(in srgb, var(--accent) 30%, transparent) 0,
        transparent 100%);
}
@keyframes agv2-edge-pulse {
    from { opacity: .5; }
    to   { opacity: 1; }
}

/* Toggle único del side panel · Modo agendar */
.agv2-side-mode-toggle {
    width: 100%;
    min-height: 62px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
    padding: 12px 14px;
    border: 1px solid color-mix(in srgb, var(--line) 86%, var(--accent-soft));
    border-radius: 16px;
    background:
        linear-gradient(180deg,
            color-mix(in srgb, var(--surface) 96%, white) 0%,
            color-mix(in srgb, var(--surface-2) 58%, var(--surface)) 100%);
    color: var(--ink-2);
    text-align: left;
    cursor: pointer;
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, white 70%, transparent),
        0 12px 28px -26px color-mix(in srgb, var(--ink) 44%, transparent);
    transition:
        background .16s ease,
        border-color .16s ease,
        color .16s ease,
        box-shadow .16s ease,
        transform .16s ease;
}
.agv2-side-mode-toggle:hover {
    background:
        linear-gradient(180deg,
            var(--surface) 0%,
            color-mix(in srgb, var(--accent-soft) 22%, var(--surface)) 100%);
    border-color: color-mix(in srgb, var(--accent) 22%, var(--line));
    color: var(--ink);
    transform: translateY(-1px);
}
.agv2-side-mode-toggle:active { transform: translateY(0); }
.agv2-side-mode-toggle:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--accent) 24%, transparent);
    outline-offset: 3px;
}
.agv2-side-mode-toggle:disabled,
.agv2-side-mode-toggle.is-disabled {
    pointer-events: none;
    opacity: .62;
    cursor: grabbing;
}
.agv2-side-mode-toggle.is-active {
    background:
        linear-gradient(180deg,
            color-mix(in srgb, var(--accent-soft) 62%, var(--surface)) 0%,
            color-mix(in srgb, var(--accent-soft) 38%, var(--surface)) 100%);
    border-color: color-mix(in srgb, var(--accent) 42%, var(--line));
    color: color-mix(in srgb, var(--accent) 80%, var(--ink));
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, white 74%, transparent),
        0 14px 34px -26px color-mix(in srgb, var(--accent) 62%, transparent);
}
.agv2-side-mode-copy {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
}
.agv2-side-mode-copy svg {
    flex: 0 0 14px;
    color: currentColor;
}
.agv2-side-mode-copy span {
    display: grid;
    min-width: 0;
    gap: 2px;
}
.agv2-side-mode-copy strong {
    color: currentColor;
    font-size: 13.5px;
    font-weight: 850;
    line-height: 1.1;
}
.agv2-side-mode-copy small {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.agv2-side-mode-toggle.is-active .agv2-side-mode-copy small {
    color: color-mix(in srgb, var(--accent) 58%, var(--muted));
}
.agv2-side-mode-switch {
    position: relative;
    width: 48px;
    height: 28px;
    flex: 0 0 48px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--ink) 12%, var(--line));
    box-shadow:
        inset 0 1px 2px color-mix(in srgb, var(--ink) 14%, transparent),
        inset 0 -1px 0 color-mix(in srgb, white 40%, transparent);
    transition: background .16s ease, box-shadow .16s ease;
}
.agv2-side-mode-switch i {
    position: absolute;
    top: 4px;
    left: 4px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--surface);
    box-shadow:
        0 5px 12px -7px color-mix(in srgb, var(--ink) 80%, transparent),
        inset 0 1px 0 color-mix(in srgb, white 74%, transparent);
    transition: transform .18s cubic-bezier(.32,.72,.32,1);
}
.agv2-side-mode-toggle.is-active .agv2-side-mode-switch {
    background: var(--accent);
    box-shadow:
        inset 0 1px 2px color-mix(in srgb, var(--ink) 14%, transparent),
        0 8px 18px -12px color-mix(in srgb, var(--accent) 70%, transparent);
}
.agv2-side-mode-toggle.is-active .agv2-side-mode-switch i {
    transform: translateX(20px);
}

/* Tabs legacy del side panel */
.agv2-side-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 12px;
    padding: 4px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--surface-2) 50%, var(--surface));
    border: 1px solid var(--line-soft);
}
.agv2-side-tab {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 32px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--ink-2);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}
.agv2-side-tab:hover { color: var(--ink); }
.agv2-side-tab.is-active {
    background: var(--surface);
    color: var(--accent);
    box-shadow: 0 4px 14px -10px color-mix(in srgb, var(--ink) 30%, transparent);
}
.agv2-side-tab svg { color: currentColor; flex: 0 0 13px; }

/* Panel "Agendar" del side · search + lista compacta */
.agv2-side-agendar {
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 16px;
    box-shadow: 0 22px 60px -50px color-mix(in srgb, var(--ink) 62%, transparent);
}
.agv2-side-agendar[hidden] { display: none; }
.agv2-agendar-head { display: flex; flex-direction: column; gap: 4px; }
.agv2-agendar-head p {
    margin: 0;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.45;
}
.agv2-agendar-search {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: color-mix(in srgb, var(--surface-2) 40%, var(--surface));
    transition: border-color .15s ease, background .15s ease;
}
.agv2-agendar-search:focus-within {
    border-color: color-mix(in srgb, var(--accent) 40%, var(--line));
    background: var(--surface);
}
.agv2-agendar-search > svg { color: var(--muted); flex: 0 0 14px; }
.agv2-agendar-input {
    flex: 1;
    border: 0;
    background: transparent;
    outline: none;
    font-size: 13px;
    color: var(--ink);
    min-width: 0;
}
.agv2-agendar-loader {
    display: none;
    width: 22px; height: 14px;
    align-items: center;
    justify-content: center;
    flex: 0 0 22px;
}
.agv2-agendar-loader.show { display: inline-flex; }
.agv2-agendar-loader .v-loader-mark {
    width: 22px; height: 12px;
    transform: scale(.62);
    transform-origin: center;
}
.agv2-agendar-loader .v-loader-circle {
    top: 0; width: 12px; height: 12px;
    border-width: 1.4px;
    background: color-mix(in srgb, var(--surface) 80%, transparent);
}
.agv2-agendar-loader .v-loader-left  { left: 0; }
.agv2-agendar-loader .v-loader-right { right: 0; }

.agv2-agendar-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 280px;
    overflow-y: auto;
}
.agv2-agendar-empty {
    padding: 14px 10px;
    color: var(--muted);
    font-size: 12.5px;
    text-align: center;
}
.agv2-agendar-item {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr) 18px;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: var(--surface);
    cursor: grab;
    transition: background .12s ease, border-color .12s ease, transform .12s ease;
    user-select: none;
    touch-action: none;
}
.agv2-agendar-item:hover {
    background: color-mix(in srgb, var(--accent-soft) 30%, var(--surface));
    border-color: color-mix(in srgb, var(--accent) 22%, var(--line));
    transform: translateY(-1px);
}
.agv2-agendar-item:active,
.agv2-agendar-item.is-dragging {
    cursor: grabbing;
    background: color-mix(in srgb, var(--accent-soft) 56%, var(--surface));
    border-color: color-mix(in srgb, var(--accent) 38%, var(--line));
    transform: scale(.98);
}
.agv2-agendar-avatar {
    width: 32px; height: 32px;
    border-radius: 50%;
    display: grid; place-items: center;
    background: color-mix(in srgb, var(--accent) 12%, var(--surface));
    color: var(--accent);
    font-size: 11.5px;
    font-weight: 700;
}
.agv2-agendar-copy {
    min-width: 0;
    display: flex; flex-direction: column; gap: 1px;
}
.agv2-agendar-copy strong {
    color: var(--ink);
    font-size: 13px;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.agv2-agendar-copy small {
    color: var(--muted);
    font-size: 11.5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.agv2-agendar-grip {
    color: var(--muted);
    font-size: 13px;
    line-height: 1;
    text-align: center;
    letter-spacing: -2px;
    cursor: grab;
}
.agv2-agendar-foot {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--muted);
    font-size: 11px;
    line-height: 1.35;
    padding-top: 8px;
    border-top: 1px dashed color-mix(in srgb, var(--line) 80%, transparent);
}
.agv2-agendar-foot svg { color: var(--accent); flex: 0 0 13px; }

/* Mobile (≤900px) · drag con touch + side se vuelve sticky abajo */
@media (max-width: 900px) {
    .agv2-side-tabs { margin-bottom: 8px; }
    .agv2-agendar-list { max-height: 220px; }
    .agv2-ghost { font-size: 10.5px; padding: 5px 7px; }
}

.agv2-side-actions {
    display: flex; flex-direction: column; gap: 10px;
}
.agv2-side-primary {
    width: 100%; justify-content: center;
    padding: 11px 16px !important;
    font-size: 13px;
}
.agv2-side-secondaries {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.agv2-side-secondary {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 10px 14px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface);
    color: var(--ink-2);
    text-decoration: none;
    font-size: 13px; font-weight: 500;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.agv2-side-secondary:hover {
    background: var(--surface-2);
    color: var(--ink);
}
.agv2-side-secondary svg { color: var(--ink-2); }

.agv2-side-empty {
    background: var(--surface);
    border: 1px dashed var(--line);
    border-radius: 14px;
    padding: 32px 20px;
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    text-align: center;
}
.agv2-side-empty-icon {
    color: var(--muted);
    margin-bottom: 4px;
}
.agv2-side-empty strong {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 16px; color: var(--ink);
}
.agv2-side-empty p {
    font-size: 12.5px; color: var(--muted);
    margin: 0;
}

/* Estado sin selección · placeholder visual del side-card */
.agv2-side.is-empty .agv2-side-card { opacity: .9; }
.agv2-side.is-empty .agv2-avatar {
    background: var(--surface-2);
    color: var(--muted);
    border-color: var(--line);
}
.agv2-side.is-empty .agv2-side-mandorla,
.agv2-side.is-empty .agv2-side-eta { visibility: hidden; }

.agv2-side .is-disabled,
.agv2-side a.is-disabled {
    pointer-events: none;
    opacity: .5;
    cursor: not-allowed;
    filter: grayscale(0.6);
}

/* Responsive · 4 tiers ----------------------------------------------------- */

/* Tier 2 · 1024-1279 · sidebar más angosto, paddings reducidos */
@media (max-width: 1279px) {
    .agv2-page-inner { padding: 18px 18px 60px; }
    .agv2-shell {
        grid-template-columns: minmax(0, 1fr) 280px;
        gap: 16px;
    }
}

/* Tier 3 · 768-1023 · panel arriba como FRANJA HORIZONTAL compacta */
@media (max-width: 1023px) {
    .agv2-page-inner { padding: 16px 16px 80px; }
    .agv2-shell {
        grid-template-columns: 1fr;
    }
    .agv2-side {
        position: static;
        order: -1;
        margin-bottom: 4px;
    }
    .agv2-side-card {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 14px;
        padding: 14px 16px;
    }
    .agv2-side-head { flex: 1 1 100%; gap: 10px; }
    .agv2-side-patient { flex: 1 1 220px; }
    .agv2-side-grid {
        flex: 1 1 280px;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 10px 12px;
        padding: 10px 14px;
    }
    .agv2-side-actions {
        flex: 1 1 100%;
        flex-direction: row;
        flex-wrap: wrap;
    }
    .agv2-side-primary { width: auto; flex: 1 1 200px; }
    .agv2-side-secondaries { flex: 1 1 280px; }
    .agv2-side-mandorla { display: none; }
    .agv2-hero-actions { width: 100%; justify-content: flex-start; }
    .agv2-week-footer {
        align-items: flex-start;
        flex-direction: column;
        gap: 14px;
    }
    .agv2-week-footer-link {
        margin-left: 0;
    }
}

/* Tier 4 · <768 · panel arriba apilado, calendario con scroll horizontal */
@media (max-width: 767px) {
    .agv2-page-inner { padding: 14px 12px 80px; }
    .agv2-hero-title {
        width: 100%;
        align-items: center;
        gap: 10px;
    }
    .agv2-shell {
        gap: 14px;
        overflow: hidden;
    }
    .agv2-main {
        overflow-x: visible;
        min-width: 0;
    }
    .agv2-side {
        width: 100%;
        min-width: 0;
    }
    .agv2-side-card {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        padding: 14px;
        width: 100%;
        min-width: 0;
    }
    .agv2-side-head,
    .agv2-side-patient,
    .agv2-side-grid,
    .agv2-side-actions,
    .agv2-side-secondaries {
        flex: none;
        width: 100%;
        min-width: 0;
    }
    .agv2-side-head {
        flex-wrap: nowrap;
        gap: 8px;
    }
    .agv2-side-eyebrow {
        min-width: 0;
        font-size: 10px;
        letter-spacing: 0.08em;
    }
    .agv2-side-eta {
        margin-left: auto;
        flex: 0 0 auto;
    }
    .agv2-avatar {
        width: 38px;
        height: 38px;
        font-size: 13px;
    }
    .agv2-patient-id strong { font-size: 16px; }
    .agv2-patient-id span {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .agv2-side-grid {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
        padding: 12px;
    }
    .agv2-cell-value {
        font-size: 13px;
        white-space: normal;
    }
    .agv2-side-actions {
        flex-direction: column;
        gap: 8px;
    }
    .agv2-side-primary {
        width: 100%;
        flex: none;
        min-height: 44px;
        height: auto;
        padding: 10px 14px !important;
    }
    .agv2-side-secondaries {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }
    .agv2-side-secondary {
        min-height: 42px;
        height: auto;
        padding: 9px 10px;
    }

    .agv2-week {
        --agv2-time-col: 44px;
        --agv2-day-min: 104px;
        --agv2-days-min-width: 728px;
        min-width: 0;
    }
    .agv2-week-body {
        grid-template-columns: var(--agv2-time-col) repeat(7, minmax(var(--agv2-day-min), 1fr));
        max-height: calc(100vh - 220px);
        overflow-x: auto;
    }
    .agv2-week-head {
        grid-template-columns: var(--agv2-time-col) repeat(7, minmax(var(--agv2-day-min), 1fr));
        overflow-x: hidden;
    }
    .agv2-week-head,
    .agv2-week-body { min-width: 0; }

    .agv2-evt {
        padding: 4px 6px;
        min-height: 28px;
    }
    .agv2-evt-name { font-size: 12px; gap: 3px; }
    .agv2-evt-time { font-size: 10px; }
    .agv2-day-num { font-size: 20px; }
    .agv2-day-head { padding: 8px 6px; }
    .agv2-day-head.is-today .agv2-day-num { width: 32px; height: 32px; font-size: 16px; }

    .agv2-hero-actions {
        flex-wrap: wrap;
        gap: 8px;
    }
    .agv2-view-switch { flex: 1 1 auto; justify-content: space-around; }
    .agv2-view { padding: 6px 10px; font-size: 12px; }
    .agv2-pill-today { font-size: 11.5px; padding: 5px 10px; }
    .agv2-week-footer {
        padding: 13px 14px 15px;
    }
    .agv2-week-footer-stats {
        gap: 12px 18px;
    }
    .agv2-week-metric {
        font-size: 12.5px;
    }
    .agv2-week-metric strong {
        font-size: 18px;
    }
    .agv2-week-footer-link {
        width: 100%;
        justify-content: flex-start;
        font-size: 13.5px;
    }
}

/* ===== PUBLIC BOOKING · premium polish + modality focus =================== */
body:has(.public-booking) {
    background:
        linear-gradient(135deg,
            color-mix(in srgb, var(--bg) 92%, white) 0%,
            color-mix(in srgb, var(--surface) 82%, var(--accent-soft)) 46%,
            color-mix(in srgb, var(--bg) 88%, var(--warm-soft)) 100%);
}
.public-booking-hero,
.public-booking-card {
    border-color: color-mix(in srgb, var(--line) 78%, white);
    box-shadow:
        0 30px 90px -74px color-mix(in srgb, var(--ink) 76%, transparent),
        0 1px 0 color-mix(in srgb, white 74%, transparent);
}
.public-booking-card {
    position: relative;
    overflow: hidden;
}
.public-booking-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 4px;
    background:
        linear-gradient(90deg,
            color-mix(in srgb, var(--accent) 78%, var(--ink)) 0%,
            color-mix(in srgb, var(--warm) 68%, var(--accent)) 100%);
    opacity: .76;
}
.public-booking-card > * {
    position: relative;
}
.public-step-number {
    background:
        linear-gradient(145deg,
            color-mix(in srgb, var(--ink) 88%, black),
            color-mix(in srgb, var(--ink-2) 78%, black));
    color: white;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .14),
        0 14px 26px -22px color-mix(in srgb, var(--ink) 82%, transparent);
}
.public-date-trigger,
.public-slot,
.public-consent {
    box-shadow:
        0 10px 24px -22px color-mix(in srgb, var(--ink) 48%, transparent),
        inset 0 1px 0 color-mix(in srgb, white 58%, transparent);
}
.public-slot.selected {
    color: color-mix(in srgb, var(--accent) 86%, var(--ink));
    border-color: color-mix(in srgb, var(--accent) 56%, var(--line));
    box-shadow:
        inset 0 0 0 1px color-mix(in srgb, var(--accent) 24%, transparent),
        0 14px 30px -24px color-mix(in srgb, var(--accent) 70%, transparent);
}
.public-booking-summary {
    position: relative;
    outline: 0;
    transition:
        border-color .18s ease,
        background .18s ease,
        box-shadow .18s ease,
        transform .18s ease;
}
.public-booking-summary::after {
    content: "";
    position: absolute;
    left: 16px;
    right: 16px;
    top: 10px;
    height: 3px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--rose) 72%, #D94B4B);
    box-shadow: 0 6px 18px -8px color-mix(in srgb, var(--rose) 86%, transparent);
    opacity: 0;
    transform: scaleX(.82);
    transform-origin: center;
    pointer-events: none;
    transition: opacity .18s ease, transform .22s ease;
}
.public-booking-summary.has-error {
    border-color: color-mix(in srgb, var(--rose) 34%, var(--line));
    background:
        linear-gradient(145deg,
            color-mix(in srgb, var(--surface) 92%, white) 0%,
            color-mix(in srgb, var(--rose) 7%, var(--surface)) 100%);
    box-shadow:
        inset 0 0 0 1px color-mix(in srgb, var(--rose) 12%, transparent),
        0 20px 44px -34px color-mix(in srgb, var(--rose) 64%, transparent);
}
.public-booking-summary.has-error::after,
.public-booking-summary.is-attention::after {
    opacity: 1;
    transform: scaleX(1);
}
.public-booking-summary.is-attention {
    animation: publicModalityNudge .9s cubic-bezier(.2, .8, .2, 1);
}
.public-summary-error {
    display: flex;
    align-items: center;
    min-height: 28px;
    margin: -2px 4px 6px;
    padding: 7px 10px;
    border-radius: 999px;
    color: color-mix(in srgb, var(--rose) 86%, var(--ink));
    background: color-mix(in srgb, var(--rose) 8%, var(--surface));
    border: 1px solid color-mix(in srgb, var(--rose) 22%, var(--line));
    font-size: 12.2px;
    font-weight: 820;
    line-height: 1.25;
}
.public-summary-error[hidden] {
    display: none !important;
}
.public-booking-summary.has-error .public-summary-choice {
    color: color-mix(in srgb, var(--rose) 84%, var(--ink));
    font-weight: 760;
}
.public-booking-summary.has-error .public-price-card {
    border-color: color-mix(in srgb, var(--rose) 24%, var(--line));
}
.public-booking-summary .public-price-card {
    box-shadow:
        0 14px 30px -27px color-mix(in srgb, var(--ink) 56%, transparent),
        inset 0 1px 0 color-mix(in srgb, white 58%, transparent);
}
.public-booking-summary .public-price-card:focus-visible {
    outline: none;
    border-color: color-mix(in srgb, var(--accent) 66%, var(--line));
    box-shadow:
        0 0 0 3px color-mix(in srgb, var(--surface) 84%, transparent),
        0 0 0 6px color-mix(in srgb, var(--accent) 24%, transparent),
        0 18px 36px -28px color-mix(in srgb, var(--accent) 62%, transparent);
}
.public-booking-summary.has-error .public-price-card:focus-visible {
    border-color: color-mix(in srgb, var(--rose) 58%, var(--line));
    box-shadow:
        0 0 0 3px color-mix(in srgb, var(--surface) 84%, transparent),
        0 0 0 6px color-mix(in srgb, var(--rose) 22%, transparent),
        0 18px 36px -28px color-mix(in srgb, var(--rose) 60%, transparent);
}
.public-booking-summary .public-price-card.is-active {
    transform: translateY(-1px);
}
.public-booking-summary .public-price-card.is-active,
.public-booking-summary.has-error .public-price-card.is-active {
    border-color: color-mix(in srgb, var(--accent) 74%, var(--line));
}
.public-summary-whatsapp {
    border-color: color-mix(in srgb, var(--accent) 18%, var(--line));
}
.public-summary-title {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.step-badge {
    width: max-content;
    max-width: 100%;
    min-height: 22px;
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent-soft) 66%, var(--surface));
    color: color-mix(in srgb, var(--accent) 78%, var(--ink));
    font-size: 10.5px;
    font-weight: 850;
    line-height: 1;
    text-transform: uppercase;
}
.public-service-section {
    display: grid;
    gap: 9px;
    margin: 2px 0 3px;
}
.public-service-section[hidden] {
    display: none !important;
}
.public-service-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.public-service-label,
.public-service-count {
    color: var(--muted);
    font-size: 11px;
    font-weight: 820;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.public-service-count {
    color: color-mix(in srgb, var(--accent) 70%, var(--ink-2));
    text-transform: none;
    letter-spacing: 0;
}
.public-service-tabs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
    gap: 8px;
}
.public-service-tabs.is-scroll {
    display: flex;
    overflow-x: auto;
    padding-bottom: 3px;
    scrollbar-width: thin;
}
.public-service-tab {
    min-width: 0;
    min-height: 42px;
    border: 1px solid color-mix(in srgb, var(--line) 88%, white);
    border-radius: 13px;
    background: color-mix(in srgb, var(--surface) 88%, var(--bg));
    color: var(--ink-2);
    padding: 8px 11px;
    font-size: 12.4px;
    font-weight: 800;
    line-height: 1.2;
    text-align: left;
    cursor: pointer;
    box-shadow: inset 0 1px 0 color-mix(in srgb, white 58%, transparent);
}
.public-service-tabs.is-scroll .public-service-tab {
    flex: 0 0 156px;
}
.public-service-tab:hover,
.public-service-tab.is-active {
    border-color: color-mix(in srgb, var(--accent) 42%, var(--line));
    background: color-mix(in srgb, var(--accent-soft) 48%, var(--surface));
    color: color-mix(in srgb, var(--ink) 86%, var(--accent));
}
.public-service-tab:focus-visible,
.public-service-dropdown input:focus,
.public-service-dropdown select:focus {
    outline: none;
    border-color: color-mix(in srgb, var(--accent) 62%, var(--line));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
.public-service-dropdown {
    display: grid;
    gap: 7px;
}
.public-service-dropdown[hidden] {
    display: none !important;
}
.public-service-dropdown input,
.public-service-dropdown select {
    width: 100%;
    min-height: 42px;
    border: 1px solid color-mix(in srgb, var(--line) 88%, white);
    border-radius: 13px;
    background: color-mix(in srgb, var(--surface) 92%, white);
    color: var(--ink);
    padding: 0 12px;
    font-size: 13.2px;
    font-weight: 720;
}
.public-service-desc {
    min-height: 34px;
    margin: 0;
    padding: 9px 11px;
    border: 1px solid color-mix(in srgb, var(--accent) 15%, var(--line));
    border-radius: 12px;
    background: color-mix(in srgb, var(--surface-2) 54%, var(--surface));
    color: var(--ink-2);
    font-size: 12.2px;
    font-weight: 650;
    line-height: 1.35;
}
.public-price-card[hidden] {
    display: none !important;
}
.public-price-card.is-disabled {
    opacity: .54;
    pointer-events: none;
}
.public-social {
    display: grid;
    gap: 8px;
    margin-top: 13px;
}
.public-social-label {
    color: var(--muted);
    font-size: 11px;
    font-weight: 840;
    letter-spacing: .07em;
    text-transform: uppercase;
}
.public-social-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.public-social-links.is-compact {
    gap: 6px;
}
.social-link {
    position: relative;
    min-width: 0;
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 100%;
    padding: 5px 10px 5px 6px;
    border: 1px solid color-mix(in srgb, var(--accent) 16%, var(--line));
    border-radius: 999px;
    background: color-mix(in srgb, var(--surface) 76%, transparent);
    color: color-mix(in srgb, var(--accent) 76%, var(--ink));
    text-decoration: none;
    font-size: 12.4px;
    font-weight: 760;
    box-shadow: inset 0 1px 0 color-mix(in srgb, white 58%, transparent);
}
.social-link:hover {
    border-color: color-mix(in srgb, var(--accent) 34%, var(--line));
    background: color-mix(in srgb, var(--accent-soft) 54%, var(--surface));
    color: color-mix(in srgb, var(--accent) 86%, var(--ink));
}
.social-ico {
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    display: inline-grid;
    place-items: center;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent-soft) 70%, var(--surface));
    color: var(--accent);
    font-size: 9.5px;
    font-weight: 900;
    line-height: 1;
}
.social-handle {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.public-social-links.is-compact .social-link {
    width: 34px;
    min-width: 34px;
    padding: 4px;
    justify-content: center;
}
.public-social-links.is-compact .social-handle {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}
.public-form-alert.is-error {
    box-shadow: none;
}
@keyframes publicModalityNudge {
    0%, 100% { transform: none; }
    28% { transform: translateY(-2px); }
    56% { transform: translateY(1px); }
}
@media (min-width: 861px) {
    .public-booking-shell {
        gap: 20px;
    }
    .public-booking-hero,
    .public-booking-card {
        border-radius: 20px;
    }
    .public-booking-card {
        padding: 26px 28px 28px;
    }
    .public-booking-summary::after {
        top: 0;
        left: 0;
        right: 0;
    }
    .public-summary-error {
        width: max-content;
        max-width: 100%;
        margin-top: -4px;
    }
}
@media (max-width: 860px) {
    .public-booking {
        background:
            linear-gradient(180deg,
                color-mix(in srgb, var(--surface) 86%, var(--accent-soft)) 0%,
                var(--bg) 42%,
                color-mix(in srgb, var(--surface) 82%, var(--warm-soft)) 100%);
    }
    .public-booking-card::before {
        height: 3px;
    }
    .public-booking-summary::after {
        top: 8px;
        left: 14px;
        right: 14px;
    }
    .public-summary-error {
        border-radius: 12px;
        margin-inline: 0;
    }
}

/* ===== PUBLIC REVIEW · premium psychologist decision ===================== */
body:has(.public-review) {
    background:
        linear-gradient(135deg,
            color-mix(in srgb, var(--surface) 88%, var(--accent-soft)) 0%,
            var(--bg) 46%,
            color-mix(in srgb, var(--surface) 84%, var(--warm-soft)) 100%);
}
body:has(.public-review) .theme-btn,
body:has(.public-review) .accessibility-btn {
    top: 28px;
    width: 50px;
    height: 50px;
    border-radius: 18px;
    border-color: color-mix(in srgb, var(--accent) 18%, var(--line));
    background: color-mix(in srgb, var(--surface) 88%, transparent);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow:
        0 18px 38px -31px color-mix(in srgb, var(--ink) 62%, transparent),
        inset 0 1px 0 color-mix(in srgb, white 68%, transparent);
}
body:has(.public-review) .theme-btn {
    right: 94px;
}
body:has(.public-review) .accessibility-btn {
    right: 28px;
}
.public-review {
    min-height: 100svh;
    background:
        linear-gradient(180deg,
            color-mix(in srgb, var(--surface) 58%, transparent) 0%,
            transparent 34%),
        linear-gradient(135deg,
            color-mix(in srgb, var(--accent-soft) 54%, var(--surface)) 0%,
            var(--bg) 48%,
            color-mix(in srgb, var(--warm-soft) 42%, var(--surface)) 100%);
    color: var(--ink);
}
.public-review .serif,
.public-review .public-kicker,
.public-review-status,
.public-review-detail span,
.public-review-appointment span,
.public-review-metrics small,
.public-review-secure {
    letter-spacing: 0;
}
.public-review-shell {
    width: min(100%, 1080px);
    margin: 0 auto;
    padding: 30px 22px 54px;
}
.public-review-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 24px;
    padding-right: 140px;
}
.public-review-brand {
    margin: 0;
    border-radius: 18px;
}
.public-review-brand span {
    color: var(--ink);
}
.public-review-secure {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 34px;
    padding: 7px 12px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line));
    background: color-mix(in srgb, var(--surface) 78%, transparent);
    color: color-mix(in srgb, var(--accent) 72%, var(--ink));
    font-size: 12px;
    font-weight: 800;
    box-shadow: inset 0 1px 0 color-mix(in srgb, white 64%, transparent);
}
.public-review-card {
    position: relative;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--line));
    border-radius: 30px;
    background: color-mix(in srgb, var(--surface) 94%, transparent);
    box-shadow:
        0 36px 92px -68px color-mix(in srgb, var(--ink) 78%, transparent),
        inset 0 1px 0 color-mix(in srgb, white 70%, transparent);
    padding: 0;
}
.public-review-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 6px;
    background: linear-gradient(90deg,
        var(--accent) 0%,
        #2D7A63 58%,
        color-mix(in srgb, var(--warm) 74%, var(--surface)) 100%);
}
.public-review-card.is-accepted::before {
    background: linear-gradient(90deg, #2D7A63, color-mix(in srgb, #2D7A63 54%, var(--accent)));
}
.public-review-card.is-rejected::before {
    background: linear-gradient(90deg, #A65F4B, color-mix(in srgb, var(--warm) 72%, #A65F4B));
}
.public-review-card.is-expired::before,
.public-review-card.is-blocked::before {
    background: linear-gradient(90deg, #7B6F68, color-mix(in srgb, var(--muted) 72%, var(--surface)));
}
.public-review-main {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    min-height: 430px;
}
.public-review-main:not(:has(.public-review-appointment)) {
    grid-template-columns: 1fr;
    min-height: 0;
}
.public-review-decision {
    min-width: 0;
    display: flex;
    flex-direction: column;
    padding: 44px 44px 40px;
}
.public-review-status {
    display: inline-flex;
    align-items: center;
    width: max-content;
    min-height: 36px;
    gap: 9px;
    padding: 8px 14px;
    border-radius: 999px;
    border-color: color-mix(in srgb, var(--accent) 18%, var(--line));
    background: color-mix(in srgb, var(--accent-soft) 54%, var(--surface));
    color: color-mix(in srgb, var(--ink) 70%, var(--accent));
    font-size: 12px;
    font-weight: 850;
    text-transform: uppercase;
}
.public-review-card.is-accepted .public-review-status {
    border-color: rgba(45, 122, 99, 0.22);
    background: rgba(45, 122, 99, 0.1);
    color: #285E4F;
}
.public-review-card.is-rejected .public-review-status {
    border-color: rgba(166, 95, 75, 0.22);
    background: rgba(166, 95, 75, 0.1);
    color: #8C4E3E;
}
.public-review-dot {
    width: 9px;
    height: 9px;
    border-radius: 999px;
    background: currentColor;
    box-shadow: 0 0 0 5px color-mix(in srgb, currentColor 10%, transparent);
}
.public-review-head {
    max-width: 610px;
    margin-top: 28px;
}
.public-review-head .public-kicker {
    margin-bottom: 8px;
    color: var(--accent);
    font-size: 13px;
    font-weight: 900;
    text-transform: uppercase;
}
.public-review-head h1 {
    max-width: 11ch;
    font-size: 48px;
    line-height: 1.03;
    color: var(--ink);
}
.public-review-head p:last-child {
    max-width: 560px;
    margin-top: 16px;
    color: var(--ink-3);
    font-size: 17px;
    line-height: 1.62;
}
.public-review-alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    width: min(100%, 590px);
    margin-top: 26px;
    border-radius: 16px;
    border-color: color-mix(in srgb, var(--accent) 16%, var(--line));
    padding: 13px 14px;
    background: color-mix(in srgb, var(--surface-2) 58%, var(--surface));
    color: var(--ink-2);
    font-size: 13px;
    font-weight: 760;
    line-height: 1.5;
    box-shadow: inset 0 1px 0 color-mix(in srgb, white 58%, transparent);
}
.public-review-alert[hidden],
.public-review-actions[hidden] {
    display: none;
}
.public-review-alert.is-ok {
    border-color: rgba(45, 122, 99, 0.22);
    background: color-mix(in srgb, #DCFCE7 42%, var(--surface));
}
.public-review-alert.is-error {
    border-color: rgba(166, 95, 75, 0.24);
    background: color-mix(in srgb, #FDE2D8 42%, var(--surface));
}
.public-review-actions {
    width: min(100%, 590px);
    display: grid;
    grid-template-columns: minmax(0, 1fr) 160px;
    gap: 12px;
    margin-top: auto;
    padding-top: 30px;
}
.public-review-action,
.public-review-login {
    min-height: 54px;
    border-radius: 16px;
    font-size: 15px;
    font-weight: 850;
}
.public-review-action.btn-primary,
.public-review-login.btn-primary {
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--ink) 92%, black) 0%,
        color-mix(in srgb, var(--accent) 48%, var(--ink)) 100%);
    box-shadow:
        0 20px 42px -31px color-mix(in srgb, var(--ink) 78%, transparent),
        inset 0 1px 0 color-mix(in srgb, white 18%, transparent);
}
.public-review-action.btn-primary:hover,
.public-review-login.btn-primary:hover {
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--ink) 96%, black) 0%,
        color-mix(in srgb, var(--accent) 60%, var(--ink)) 100%);
}
.public-review-action.btn-ghost {
    border-color: color-mix(in srgb, #A65F4B 28%, var(--line));
    background: color-mix(in srgb, var(--surface) 86%, transparent);
    color: color-mix(in srgb, #A65F4B 82%, var(--ink));
}
.public-review-action.btn-ghost:hover {
    background: color-mix(in srgb, #FDE2D8 42%, var(--surface));
    color: #8C4E3E;
}
.public-review-action.is-loading {
    position: relative;
    opacity: .82;
}
.public-review-action.is-loading::after {
    content: "";
    width: 16px;
    height: 16px;
    margin-left: 8px;
    border-radius: 999px;
    border: 2px solid color-mix(in srgb, currentColor 24%, transparent);
    border-top-color: currentColor;
    animation: reviewActionSpin .75s linear infinite;
}
.public-review-login {
    width: min(100%, 280px);
    margin-top: auto;
    display: inline-flex;
    justify-content: center;
    gap: 8px;
    padding-inline: 20px;
}
.public-review-login[hidden] {
    display: none !important;
}
.public-review-appointment {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 20px;
    min-width: 0;
    padding: 38px 34px 34px;
    color: white;
    background:
        linear-gradient(160deg,
            color-mix(in srgb, var(--ink) 96%, black) 0%,
            color-mix(in srgb, var(--accent) 30%, var(--ink)) 76%,
            color-mix(in srgb, var(--warm) 32%, var(--ink)) 100%);
}
.public-review-appointment::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(255,255,255,.08) 0 1px, transparent 1px 100%),
        linear-gradient(180deg, rgba(255,255,255,.08) 0 1px, transparent 1px 100%);
    background-size: 38px 38px;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, black 24%, black 100%);
    mask-image: linear-gradient(180deg, transparent 0%, black 24%, black 100%);
    opacity: .34;
    pointer-events: none;
}
.public-review-appointment > * {
    position: relative;
    z-index: 1;
}
.public-review-appointment span {
    color: color-mix(in srgb, white 68%, var(--accent-soft));
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}
.public-review-appointment > strong {
    display: block;
    color: #fff;
    font-size: 34px;
    line-height: 1.12;
}
.public-review-metrics {
    display: grid;
    gap: 10px;
    padding-top: 8px;
}
.public-review-metrics div {
    min-width: 0;
    display: grid;
    gap: 5px;
    padding: 13px 14px;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(255,255,255,.08);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
}
.public-review-metrics small {
    color: rgba(255,255,255,.64);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
}
.public-review-metrics b {
    min-width: 0;
    overflow-wrap: anywhere;
    color: white;
    font-size: 17px;
    line-height: 1.25;
}
.public-review-details {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, .85fr) minmax(0, 1fr);
    gap: 14px;
    margin-top: 16px;
}
.public-review-detail {
    min-width: 0;
    display: grid;
    gap: 8px;
    align-content: center;
    min-height: 118px;
    padding: 22px;
    border: 1px solid color-mix(in srgb, var(--accent) 14%, var(--line));
    border-radius: 22px;
    background: color-mix(in srgb, var(--surface) 88%, transparent);
    box-shadow:
        0 22px 54px -45px color-mix(in srgb, var(--ink) 56%, transparent),
        inset 0 1px 0 color-mix(in srgb, white 64%, transparent);
}
.public-review-detail.is-primary {
    border-color: color-mix(in srgb, var(--accent) 26%, var(--line));
    background:
        linear-gradient(135deg,
            color-mix(in srgb, var(--surface) 78%, var(--accent-soft)) 0%,
            color-mix(in srgb, var(--surface) 92%, transparent) 100%);
}
.public-review-detail span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}
.public-review-detail strong {
    min-width: 0;
    overflow-wrap: anywhere;
    color: var(--ink);
    font-size: 18px;
    line-height: 1.3;
}
.public-review-detail.is-primary strong {
    font-size: 22px;
}
@keyframes reviewActionSpin {
    to { transform: rotate(360deg); }
}
@media (max-width: 900px) {
    body:has(.public-review) .theme-btn,
    body:has(.public-review) .accessibility-btn {
        top: 22px;
        width: 46px;
        height: 46px;
        border-radius: 16px;
    }
    body:has(.public-review) .theme-btn {
        right: 82px;
    }
    body:has(.public-review) .accessibility-btn {
        right: 22px;
    }
    .public-review-shell {
        padding: 26px 18px 42px;
    }
    .public-review-topbar {
        min-height: 54px;
        padding-right: 132px;
        align-items: flex-start;
    }
    .public-review-secure {
        display: none;
    }
    .public-review-main {
        grid-template-columns: 1fr;
        min-height: 0;
    }
    .public-review-decision {
        padding: 34px 28px 28px;
    }
    .public-review-head h1 {
        max-width: none;
        font-size: 38px;
    }
    .public-review-head p:last-child {
        font-size: 16px;
    }
    .public-review-actions {
        grid-template-columns: 1fr;
    }
    .public-review-login {
        width: 100%;
        margin-top: 26px;
    }
    .public-review-appointment {
        padding: 28px;
        min-height: 300px;
    }
    .public-review-appointment > strong {
        font-size: 28px;
    }
    .public-review-details {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 520px) {
    .public-review-shell {
        padding-inline: 14px;
    }
    .public-review-topbar {
        padding-right: 118px;
        margin-bottom: 18px;
    }
    .public-review-brand {
        min-width: 0;
    }
    .public-review-brand span {
        font-size: 28px;
    }
    .public-review-card {
        border-radius: 24px;
    }
    .public-review-decision {
        padding: 28px 22px 24px;
    }
    .public-review-head h1 {
        font-size: 34px;
    }
    .public-review-appointment {
        padding: 24px 22px;
    }
    .public-review-appointment > strong {
        font-size: 25px;
    }
    .public-review-detail {
        min-height: 104px;
        border-radius: 18px;
        padding: 18px;
    }
}

/* ===== PUBLIC REPAIR · booking date/slot focus + stable review ============ */
.public-booking-card {
    overflow: visible;
}
.public-booking-card::before {
    border-radius: 20px 20px 0 0;
    pointer-events: none;
}
.public-date-wrap {
    z-index: 90;
}
.public-date-popover {
    z-index: 1600;
    max-height: min(460px, calc(100vh - 88px));
    overflow: auto;
}
.public-slots {
    position: relative;
    scroll-margin-top: 120px;
    transition:
        border-color .18s ease,
        background .18s ease,
        box-shadow .18s ease,
        transform .18s ease,
        padding .18s ease;
}
.public-slots::before {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    top: 0;
    height: 3px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--rose) 74%, #D94B4B);
    box-shadow: 0 7px 20px -9px color-mix(in srgb, var(--rose) 82%, transparent);
    opacity: 0;
    transform: scaleX(.82);
    transform-origin: center;
    pointer-events: none;
    transition: opacity .18s ease, transform .22s ease;
}
.public-slots.has-error {
    padding: 13px;
    border: 1px solid color-mix(in srgb, var(--rose) 25%, var(--line));
    border-radius: 18px;
    background:
        linear-gradient(145deg,
            color-mix(in srgb, var(--surface) 95%, white) 0%,
            color-mix(in srgb, var(--rose) 6%, var(--surface)) 100%);
    box-shadow:
        inset 0 0 0 1px color-mix(in srgb, var(--rose) 9%, transparent),
        0 18px 40px -32px color-mix(in srgb, var(--rose) 58%, transparent);
}
.public-slots.has-error::before,
.public-slots.is-attention::before {
    opacity: 1;
    transform: scaleX(1);
}
.public-slots.is-attention,
.public-next-panel.is-attention {
    animation: publicScheduleNudge .9s cubic-bezier(.2, .8, .2, 1);
}
.public-slots:focus {
    outline: none;
}
.public-slots:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--rose) 24%, transparent);
    outline-offset: 4px;
}
.public-next-panel.has-error {
    border-color: color-mix(in srgb, var(--rose) 25%, var(--line));
    background: color-mix(in srgb, var(--rose) 7%, var(--surface));
    color: color-mix(in srgb, var(--rose) 84%, var(--ink));
}
.public-next-panel.has-error .public-next-dot {
    background: color-mix(in srgb, var(--rose) 80%, #D94B4B);
    box-shadow: 0 0 0 5px color-mix(in srgb, var(--rose) 12%, transparent);
}
@keyframes publicScheduleNudge {
    0%, 100% { transform: none; }
    28% { transform: translateY(-2px); }
    56% { transform: translateY(1px); }
}

body:has(.public-review) {
    background:
        linear-gradient(135deg,
            color-mix(in srgb, var(--surface) 88%, var(--accent-soft)) 0%,
            var(--bg) 48%,
            color-mix(in srgb, var(--surface) 86%, var(--warm-soft)) 100%);
}
.public-review {
    min-height: 100svh;
    background:
        linear-gradient(180deg,
            color-mix(in srgb, var(--surface) 62%, transparent) 0%,
            transparent 40%),
        linear-gradient(135deg,
            color-mix(in srgb, var(--accent-soft) 48%, var(--surface)) 0%,
            var(--bg) 54%,
            color-mix(in srgb, var(--warm-soft) 34%, var(--surface)) 100%);
}
.public-review-shell {
    width: min(100%, 880px);
    margin: 0 auto;
    padding: 34px 22px 56px;
}
.public-review-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 22px;
    padding-right: 138px;
}
.public-review-brand {
    margin: 0;
}
.public-review-secure {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 34px;
    padding: 7px 12px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--accent) 20%, var(--line));
    background: color-mix(in srgb, var(--surface) 78%, transparent);
    color: color-mix(in srgb, var(--accent) 72%, var(--ink));
    font-size: 12px;
    font-weight: 800;
}
.public-review-card {
    position: relative;
    overflow: hidden;
    padding: clamp(28px, 5vw, 46px);
    border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--line));
    border-radius: 28px;
    background: color-mix(in srgb, var(--surface) 95%, transparent);
    box-shadow:
        0 36px 92px -68px color-mix(in srgb, var(--ink) 78%, transparent),
        inset 0 1px 0 color-mix(in srgb, white 72%, transparent);
}
.public-review-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 6px;
    background: linear-gradient(90deg,
        var(--accent),
        color-mix(in srgb, var(--warm) 58%, var(--accent)));
}
.public-review-card.is-accepted::before {
    background: linear-gradient(90deg, #2D7A63, color-mix(in srgb, #2D7A63 54%, var(--accent)));
}
.public-review-card.is-rejected::before {
    background: linear-gradient(90deg, #A65F4B, color-mix(in srgb, var(--warm) 72%, #A65F4B));
}
.public-review-card.is-expired::before,
.public-review-card.is-blocked::before {
    background: linear-gradient(90deg, #7B6F68, color-mix(in srgb, var(--muted) 72%, var(--surface)));
}
.public-review-status {
    display: inline-flex;
    align-items: center;
    width: max-content;
    min-height: 34px;
    gap: 9px;
    padding: 8px 14px;
    border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--line));
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent-soft) 52%, var(--surface));
    color: color-mix(in srgb, var(--ink) 70%, var(--accent));
    font-size: 12px;
    font-weight: 850;
    letter-spacing: 0;
    text-transform: uppercase;
}
.public-review-card.is-accepted .public-review-status {
    border-color: rgba(45, 122, 99, .22);
    background: rgba(45, 122, 99, .1);
    color: #285E4F;
}
.public-review-card.is-rejected .public-review-status {
    border-color: rgba(166, 95, 75, .22);
    background: rgba(166, 95, 75, .1);
    color: #8C4E3E;
}
.public-review-dot {
    width: 9px;
    height: 9px;
    border-radius: 999px;
    background: currentColor;
    box-shadow: 0 0 0 5px color-mix(in srgb, currentColor 10%, transparent);
}
.public-review-head {
    max-width: 680px;
    margin-top: 26px;
}
.public-review-head .public-kicker {
    margin: 0 0 8px;
    color: var(--accent);
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 0;
    text-transform: uppercase;
}
.public-review-head h1 {
    max-width: none;
    margin: 0;
    color: var(--ink);
    font-size: clamp(38px, 6vw, 58px);
    line-height: 1.02;
    letter-spacing: 0;
}
.public-review-head p:last-child {
    max-width: 640px;
    margin: 16px 0 0;
    color: var(--ink-3);
    font-size: 17px;
    line-height: 1.62;
}
.public-review-summary {
    display: grid;
    gap: 14px;
    margin-top: 28px;
    padding-top: 0;
    border-top: 0;
}
.public-review-date-card {
    display: grid;
    gap: 8px;
    padding: 20px 22px;
    border: 1px solid color-mix(in srgb, var(--accent) 20%, var(--line));
    border-radius: 20px;
    background:
        linear-gradient(135deg,
            color-mix(in srgb, var(--surface) 80%, var(--accent-soft)) 0%,
            color-mix(in srgb, var(--surface) 94%, transparent) 100%);
    box-shadow: inset 0 1px 0 color-mix(in srgb, white 62%, transparent);
}
.public-review-date-card span,
.public-review-grid dt {
    color: var(--muted);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0;
    text-transform: uppercase;
}
.public-review-date-card strong {
    color: var(--ink);
    font-size: clamp(23px, 4vw, 31px);
    line-height: 1.18;
}
.public-review-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin: 0;
}
.public-review-grid div {
    min-width: 0;
    display: grid;
    gap: 8px;
    align-content: center;
    min-height: 106px;
    padding: 18px;
    border: 1px solid color-mix(in srgb, var(--accent) 12%, var(--line));
    border-radius: 18px;
    background: color-mix(in srgb, var(--surface-2) 62%, var(--surface));
    box-shadow: inset 0 1px 0 color-mix(in srgb, white 56%, transparent);
}
.public-review-grid div.is-primary {
    grid-column: span 2;
    border-color: color-mix(in srgb, var(--accent) 24%, var(--line));
    background: color-mix(in srgb, var(--accent-soft) 34%, var(--surface));
}
.public-review-grid dt,
.public-review-grid dd {
    margin: 0;
}
.public-review-grid dd {
    min-width: 0;
    overflow-wrap: anywhere;
    color: var(--ink);
    font-size: 18px;
    font-weight: 850;
    line-height: 1.3;
}
.public-review-grid div.is-primary dd {
    font-size: 21px;
}
.public-review-alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 22px;
    border: 1px solid color-mix(in srgb, var(--accent) 16%, var(--line));
    border-radius: 16px;
    padding: 13px 14px;
    background: color-mix(in srgb, var(--surface-2) 58%, var(--surface));
    color: var(--ink-2);
    font-size: 13px;
    font-weight: 760;
    line-height: 1.5;
}
.public-review-alert[hidden],
.public-review-actions[hidden] {
    display: none;
}
.public-review-alert.is-ok {
    border-color: rgba(45, 122, 99, .22);
    background: color-mix(in srgb, #DCFCE7 42%, var(--surface));
}
.public-review-alert.is-error {
    border-color: rgba(166, 95, 75, .24);
    background: color-mix(in srgb, #FDE2D8 42%, var(--surface));
}
.public-review-actions {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 160px;
    gap: 12px;
    margin-top: 24px;
}
.public-review-action,
.public-review-login {
    min-height: 50px;
    border-radius: 15px;
    font-size: 15px;
    font-weight: 850;
}
.public-review-action.btn-primary {
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--ink) 92%, black),
        color-mix(in srgb, var(--accent) 48%, var(--ink)));
}
.public-review-action.btn-ghost {
    border-color: color-mix(in srgb, #A65F4B 28%, var(--line));
    background: color-mix(in srgb, var(--surface) 86%, transparent);
    color: color-mix(in srgb, #A65F4B 82%, var(--ink));
}
.public-review-login {
    width: max-content;
    min-height: 44px;
    margin-top: 24px;
    padding: 11px 16px;
    background: color-mix(in srgb, var(--accent) 82%, var(--ink));
}
.public-review-login[hidden] {
    display: none !important;
}
@media (max-width: 760px) {
    .public-review-shell {
        padding: 26px 16px 42px;
    }
    .public-review-topbar {
        min-height: 52px;
        padding-right: 120px;
    }
    .public-review-secure {
        display: none;
    }
    .public-review-card {
        border-radius: 23px;
        padding: 28px 22px 24px;
    }
    .public-review-grid {
        grid-template-columns: 1fr;
    }
    .public-review-grid div.is-primary {
        grid-column: auto;
    }
    .public-review-actions {
        grid-template-columns: 1fr;
    }
    .public-review-login {
        width: 100%;
        justify-content: center;
    }
}

.public-review.is-processing .public-review-card {
    filter: saturate(.98);
}
.public-review-confirm,
.public-review-loader {
    position: fixed;
    inset: 0;
    z-index: 170;
    display: grid;
    place-items: center;
    padding: 22px;
    background: color-mix(in srgb, var(--ink) 28%, transparent);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s ease;
}
.public-review-confirm[hidden],
.public-review-loader[hidden] {
    display: none;
}
.public-review-confirm.is-open,
.public-review-loader.is-open {
    opacity: 1;
    pointer-events: auto;
}
.public-review-confirm-card,
.public-review-loader-card {
    width: min(440px, calc(100vw - 32px));
    border: 1px solid color-mix(in srgb, var(--accent) 20%, var(--line));
    border-radius: 24px;
    background: color-mix(in srgb, var(--surface) 96%, white);
    box-shadow:
        0 34px 90px -54px color-mix(in srgb, var(--ink) 72%, transparent),
        inset 0 1px 0 color-mix(in srgb, white 68%, transparent);
}
.public-review-confirm-card {
    position: relative;
    display: grid;
    gap: 16px;
    padding: 24px;
    transform: translateY(10px) scale(.985);
    transition: transform .2s cubic-bezier(.2,.72,.18,1);
}
.public-review-confirm.is-open .public-review-confirm-card {
    transform: translateY(0) scale(1);
}
.public-review-confirm-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--ink-2);
    cursor: pointer;
}
.public-review-confirm-close:hover {
    background: var(--surface);
    color: var(--ink);
}
.public-review-confirm-mark {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 16px;
    background: color-mix(in srgb, #DCFCE7 54%, var(--surface));
    color: #2D7A63;
}
.public-review-confirm-mark.is-danger {
    background: color-mix(in srgb, #FDE2D8 54%, var(--surface));
    color: #A65F4B;
}
.public-review-confirm-copy {
    display: grid;
    gap: 8px;
    padding-right: 36px;
}
.public-review-confirm-copy .public-kicker {
    margin: 0;
    color: var(--accent);
    font-size: 11.5px;
    font-weight: 900;
    letter-spacing: 0;
    text-transform: uppercase;
}
.public-review-confirm-copy h2 {
    margin: 0;
    color: var(--ink);
    font-size: clamp(28px, 5vw, 38px);
    line-height: 1.06;
}
.public-review-confirm-copy p:last-child {
    margin: 0;
    color: var(--ink-3);
    font-size: 14.5px;
    line-height: 1.55;
}
.public-review-confirm-summary {
    display: grid;
    gap: 10px;
    padding: 14px;
    border: 1px solid color-mix(in srgb, var(--accent) 14%, var(--line));
    border-radius: 18px;
    background: color-mix(in srgb, var(--surface-2) 62%, var(--surface));
}
.public-review-confirm-summary div {
    display: grid;
    gap: 3px;
}
.public-review-confirm-summary span {
    color: var(--muted);
    font-size: 10.5px;
    font-weight: 900;
    letter-spacing: 0;
    text-transform: uppercase;
}
.public-review-confirm-summary strong {
    color: var(--ink);
    font-size: 14.5px;
    line-height: 1.3;
}
.public-review-confirm-actions {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 10px;
}
.public-review-confirm-actions .btn-primary,
.public-review-confirm-actions .btn-ghost {
    min-height: 46px;
    justify-content: center;
    border-radius: 14px;
    font-size: 14px;
    font-weight: 850;
}
.public-review-confirm-actions .btn-primary.is-danger {
    background: linear-gradient(135deg, #8F4C3D, #A65F4B);
}
.public-review-loader {
    z-index: 190;
    background: color-mix(in srgb, var(--surface) 22%, color-mix(in srgb, var(--ink) 34%, transparent));
}
.public-review-loader-card {
    display: grid;
    justify-items: center;
    gap: 16px;
    padding: 26px 28px 24px;
    transform: translateY(8px) scale(.99);
    transition: transform .2s cubic-bezier(.2,.72,.18,1);
}
.public-review-loader.is-open .public-review-loader-card {
    transform: translateY(0) scale(1);
}
.public-review-loader-mark {
    width: 66px;
    height: 38px;
    color: var(--accent);
}
.public-review-loader-copy {
    display: grid;
    gap: 4px;
    text-align: center;
}
.public-review-loader-copy strong {
    color: var(--ink);
    font-size: 14px;
    font-weight: 850;
}
.public-review-loader-copy small {
    color: var(--muted);
    font-size: 12.5px;
    font-weight: 600;
}
@media (max-width: 520px) {
    .public-review-confirm,
    .public-review-loader {
        padding: 16px;
    }
    .public-review-confirm-card {
        padding: 22px 18px 18px;
        border-radius: 22px;
    }
    .public-review-confirm-copy {
        padding-right: 32px;
    }
    .public-review-confirm-actions {
        grid-template-columns: 1fr;
    }
}

/* ================================================================
   Banner topbar · Reservas pendientes de aprobacion
   ================================================================
   Aparece a la izquierda del search global cuando el psicologo
   tiene reservas RECIBIDAS sin aprobar. Polling via
   reservas-pendientes-banner.js cada 60s. */
.reservas-pendientes-banner {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 7px 14px 7px 12px;
    height: 38px;
    margin-right: 12px;
    background: var(--warn-soft, #FEF3C7);
    color: #7C4F0A;
    border: 1px solid color-mix(in srgb, var(--warn, #D97706) 30%, transparent);
    border-radius: 999px;
    text-decoration: none;
    font-size: 12.5px;
    line-height: 1.15;
    transition: background .15s, border-color .15s, transform .12s;
    white-space: nowrap;
    flex-shrink: 0;
}
.reservas-pendientes-banner:hover {
    background: color-mix(in srgb, var(--warn, #D97706) 18%, var(--warn-soft));
    border-color: var(--warn, #D97706);
    transform: translateY(-1px);
}
.reservas-pendientes-banner-icon {
    display: inline-flex;
    align-items: center; justify-content: center;
    width: 22px; height: 22px;
    border-radius: 50%;
    background: var(--warn, #D97706);
    color: #fff;
}
.reservas-pendientes-banner-label  { display: inline-flex; flex-direction: column; gap: 1px; }
.reservas-pendientes-banner-label b {
    font-size: 12.5px;
    font-weight: 700;
    color: #7C4F0A;
}
.reservas-pendientes-banner-label small {
    font-size: 10.5px;
    color: color-mix(in srgb, #7C4F0A 75%, transparent);
}

/* Estado urgente · cuando la reserva mas critica esta a <= 30 min de vencer */
.reservas-pendientes-banner.is-urgent {
    background: #FEE2E2;
    color: #7F1D1D;
    border-color: #DC2626;
    animation: reservaPendientePulse 2s ease-in-out infinite;
}
.reservas-pendientes-banner.is-urgent .reservas-pendientes-banner-icon { background: #DC2626; }
.reservas-pendientes-banner.is-urgent .reservas-pendientes-banner-label b,
.reservas-pendientes-banner.is-urgent .reservas-pendientes-banner-label small {
    color: #7F1D1D;
}
@keyframes reservaPendientePulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0); }
    50%      { box-shadow: 0 0 0 6px rgba(220, 38, 38, 0.16); }
}
@media (max-width: 720px) {
    .reservas-pendientes-banner-label { display: none; }
    .reservas-pendientes-banner       { padding: 7px; height: 38px; width: 38px; justify-content: center; }
    .reservas-pendientes-banner-icon  { width: 18px; height: 18px; }
}

/* ================================================================
   Vista /reservas-pendientes · cards
   ================================================================ */
.page-reservas-pendientes .reservas-pendientes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr));
    gap: 14px;
    margin-top: 18px;
}
.reserva-pendiente-card {
    background: var(--surface, #FBFBF8);
    border: 1px solid var(--line, #D6DEDC);
    border-radius: 14px;
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: border-color .15s, box-shadow .15s, transform .12s;
}
.reserva-pendiente-card:hover {
    border-color: var(--ink-3, #4A5C5F);
    box-shadow: 0 6px 16px rgba(20, 39, 43, .06);
    transform: translateY(-1px);
}
.reserva-pendiente-card.is-urgent {
    border-color: #DC2626;
    background: linear-gradient(180deg, #FFF8F8 0%, var(--surface) 60%);
}

.reserva-pendiente-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
}
.reserva-pendiente-paciente strong {
    display: block;
    font-size: 15px;
    font-weight: 700;
    color: var(--ink, #14272B);
}
.reserva-pendiente-paciente small {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    color: var(--muted, #6B7B7E);
}
.reserva-pendiente-countdown {
    flex-shrink: 0;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    background: var(--accent-soft, #D7E5E9);
    color: var(--accent, #2D7A8C);
    white-space: nowrap;
}
.reserva-pendiente-countdown.is-urgent {
    background: #FEE2E2;
    color: #7F1D1D;
}

.reserva-pendiente-datos {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 14px;
    margin: 0;
    padding: 12px;
    background: var(--bg, #F2F5F4);
    border-radius: 10px;
}
.reserva-pendiente-datos > div { margin: 0; }
.reserva-pendiente-datos dt {
    font-size: 10.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--muted, #6B7B7E);
    margin: 0;
}
.reserva-pendiente-datos dd {
    margin: 1px 0 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink, #14272B);
}

.reserva-pendiente-foot { margin-top: auto; }
.reserva-pendiente-tip {
    margin: 0;
    padding: 10px 12px;
    background: color-mix(in srgb, var(--accent-soft) 50%, var(--surface));
    border-left: 3px solid var(--accent, #2D7A8C);
    border-radius: 8px;
    font-size: 12px;
    line-height: 1.45;
    color: var(--ink-2, #2C4145);
}
.reserva-pendiente-tip em {
    font-style: normal;
    font-weight: 700;
    color: var(--accent, #2D7A8C);
}

.page-reservas-pendientes .empty-state {
    text-align: center;
    padding: 80px 20px;
    color: var(--muted);
}
.page-reservas-pendientes .empty-state-icon {
    display: inline-flex;
    align-items: center; justify-content: center;
    width: 88px; height: 88px;
    border-radius: 50%;
    background: var(--ok-soft, #DCFCE7);
    color: var(--ok, #16A34A);
    margin-bottom: 18px;
}
.page-reservas-pendientes .empty-state h2 {
    font-size: 20px;
    font-weight: 700;
    color: var(--ink, #14272B);
    margin: 0 0 6px;
}

/* ================================================================
   Reserva publica · acciones post-success ("Salir" / "Hacer otra")
   ================================================================ */
.public-success-actions {
    display: flex;
    gap: 10px;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--line-soft, #E8ECEB);
    flex-wrap: wrap;
}
.public-success .btn-public-primary,
.public-success .btn-public-secondary {
    flex: 1 1 160px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 18px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s, transform .12s;
    text-decoration: none;
    white-space: nowrap;
}
.public-success .btn-public-primary {
    background: var(--accent, #2D7A8C);
    color: var(--accent-fg, #FFFFFF);
    border: 1px solid var(--accent, #2D7A8C);
}
.public-success .btn-public-primary:hover:not(:disabled) {
    background: var(--accent-hover, #1F6878);
    border-color: var(--accent-hover, #1F6878);
    transform: translateY(-1px);
}
.public-success .btn-public-secondary {
    background: var(--surface, #FBFBF8);
    color: var(--ink, #14272B);
    border: 1px solid var(--line, #D6DEDC);
}
.public-success .btn-public-secondary:hover:not(:disabled) {
    background: var(--surface-2, #E5ECEB);
    border-color: var(--ink-3, #4A5C5F);
}
.public-success .btn-public-primary:disabled,
.public-success .btn-public-secondary:disabled {
    opacity: .55;
    cursor: not-allowed;
    transform: none;
}
.public-success .btn-public-primary svg,
.public-success .btn-public-secondary svg {
    width: 16px;
    height: 16px;
    stroke-width: 2;
    flex-shrink: 0;
}
.public-success-bye {
    margin: 14px 0 0;
    padding: 10px 12px;
    background: var(--ok-soft, #DCFCE7);
    border-left: 3px solid var(--ok, #16A34A);
    border-radius: 8px;
    font-size: 13px;
    color: var(--ink-2, #2C4145);
    text-align: center;
}
@media (max-width: 480px) {
    .public-success-actions {
        flex-direction: column;
    }
    .public-success .btn-public-primary,
    .public-success .btn-public-secondary {
        flex: 0 0 auto;
        width: 100%;
    }
}

/* ================================================================
   Reservas vencidas reabribles · "rescate" del psi
   ================================================================
   Sección amarilla que aparece arriba de las pendientes. Tono más
   sutil que las urgentes (no es emergencia, es oportunidad). */
/* ════════════════════════════════════════════════════════════════════
   Reservas vencidas reabribles · diseño consistente con admin Vínculo
   (mismas variables, mismas alturas que cards de cita / paciente)
   ════════════════════════════════════════════════════════════════════ */
.reservas-vencidas-block {
    background: var(--surface, #FBFBF8);
    border: 1px solid var(--line, #D6DEDC);
    border-radius: 14px;
    padding: 20px 22px;
    margin-bottom: 20px;
}
.reservas-vencidas-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--line-soft, #E8ECEB);
}
.reservas-vencidas-icon {
    flex-shrink: 0;
    width: 36px; height: 36px;
    border-radius: 10px;
    background: var(--warn-soft, #FEF3C7);
    color: var(--warn, #D97706);
    display: inline-flex; align-items: center; justify-content: center;
}
.reservas-vencidas-head h2 {
    margin: 0;
    font-family: Georgia, serif;
    font-size: 17px;
    font-weight: 600;
    color: var(--ink, #14272B);
    line-height: 1.3;
}
.reservas-vencidas-head p {
    margin: 2px 0 0;
    font-size: 13px;
    color: var(--muted, #6B7B7E);
    line-height: 1.45;
}
.reservas-vencidas-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
    gap: 12px;
}
.reserva-vencida-card {
    background: var(--surface, #FBFBF8);
    border: 1px solid var(--line, #D6DEDC);
    border-radius: 10px;
    padding: 14px 16px;
    display: flex; flex-direction: column; gap: 12px;
    transition: border-color .15s, box-shadow .15s;
}
.reserva-vencida-card:hover {
    border-color: var(--ink-3, #4A5C5F);
    box-shadow: 0 4px 12px rgba(20,39,43,.04);
}
.reserva-vencida-head {
    display: flex; justify-content: space-between; align-items: flex-start; gap: 10px;
}
.reserva-vencida-head strong {
    display: block;
    font-size: 14px; font-weight: 600;
    color: var(--ink, #14272B);
    line-height: 1.3;
}
.reserva-vencida-head small {
    display: block; margin-top: 2px;
    font-size: 12px;
    color: var(--muted, #6B7B7E);
    word-break: break-all;
}
.reserva-vencida-tag {
    flex-shrink: 0;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    background: var(--warn-soft, #FEF3C7);
    color: var(--warn, #D97706);
    white-space: nowrap;
}
.reserva-vencida-datos {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 14px;
    margin: 0;
    padding: 0;
    background: transparent;
    border-radius: 0;
}
.reserva-vencida-datos > div { margin: 0; }
.reserva-vencida-datos dt {
    font-size: 11px;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    color: var(--muted, #6B7B7E);
    margin: 0 0 2px;
}
.reserva-vencida-datos dd {
    margin: 0;
    font-size: 13px;
    font-weight: 500;
    color: var(--ink, #14272B);
}
.reserva-vencida-foot {
    margin-top: auto;
    padding-top: 6px;
    border-top: 1px solid var(--line-soft, #E8ECEB);
}
/* Botón estilo accent del admin (mismo que el Confirmar de cita.html) */
.btn-reabrir-reserva {
    width: 100%;
    display: inline-flex;
    align-items: center; justify-content: center;
    gap: 8px;
    padding: 9px 14px;
    border-radius: 8px;
    background: var(--accent, #2D7A8C);
    color: var(--accent-fg, #FFFFFF);
    border: 0;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s, opacity .15s;
}
.btn-reabrir-reserva:hover:not(:disabled) {
    background: var(--accent-hover, #1F6878);
}
.btn-reabrir-reserva:disabled,
.btn-reabrir-reserva.is-loading {
    opacity: .55;
    cursor: progress;
}
.btn-reabrir-reserva svg {
    width: 14px; height: 14px;
    stroke-width: 2;
    flex-shrink: 0;
}

/* Aceptar / Rechazar reservas pendientes desde la sesión del psi
   (alternativa al link del mail). Aceptar usa el accent del admin
   (mismo tono que el "Reabrir"). Rechazar va tono neutro/danger sutil
   para que no compita con el accept y no se sienta agresivo. */
.reserva-pendiente-foot {
    margin-top: auto;
    padding-top: 6px;
    border-top: 1px solid var(--line-soft, #E8ECEB);
}
.reserva-pendiente-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}
.reserva-pendiente-actions .btn-link-cita {
    margin-right: auto;
}
.btn-aceptar-reserva,
.btn-rechazar-reserva {
    display: inline-flex;
    align-items: center; justify-content: center;
    gap: 6px;
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid transparent;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s, opacity .15s;
}
.btn-aceptar-reserva {
    background: var(--accent, #2D7A8C);
    color: var(--accent-fg, #FFFFFF);
}
.btn-aceptar-reserva:hover:not(:disabled) {
    background: var(--accent-hover, #1F6878);
}
.btn-rechazar-reserva {
    background: var(--surface, #FFFFFF);
    color: color-mix(in srgb, var(--rose) 80%, var(--ink));
    border-color: color-mix(in srgb, var(--rose) 35%, var(--line));
}
.btn-rechazar-reserva:hover:not(:disabled) {
    background: color-mix(in srgb, var(--rose) 10%, var(--surface));
    border-color: color-mix(in srgb, var(--rose) 55%, var(--line));
}
.btn-aceptar-reserva:disabled,
.btn-aceptar-reserva.is-loading,
.btn-rechazar-reserva:disabled,
.btn-rechazar-reserva.is-loading {
    opacity: .55;
    cursor: progress;
}
.btn-aceptar-reserva svg,
.btn-rechazar-reserva svg {
    width: 13px; height: 13px;
    stroke-width: 2;
    flex-shrink: 0;
}
.reserva-pendiente-hint {
    flex-basis: 100%;
    margin: 6px 0 0;
    font-size: 11.5px;
    color: var(--muted);
}

/* ════════════════════════════════════════════════════════════════════
   Tab Reglas (mensajería) · CRM de comunicación · Sprint 1

   Refactor 2026-05-08 (UX premium) · La página /reglas adoptó el
   lenguaje visual de /configuracion (config-page, config-shell,
   config-grid, config-card numeradas con config-step). Las clases
   .reglas-card y .reglas-card-head siguen aquí porque el tab
   "Reglas" interno de /mensajeria todavía las usa · pero la página
   /reglas standalone ya no las consume.

   Las clases internas .reglas-row, .reglas-row-toggle, .reglas-toggle,
   .reglas-slider-wrap, .reglas-slider-stops, etc. se conservan tal
   cual · los cards externos cambian al lenguaje config pero la
   mecánica de los toggles/sliders sigue idéntica.
   ════════════════════════════════════════════════════════════════════ */
.reglas-card {
    background: var(--surface, #FBFBF8);
    border: 1px solid var(--line, #D6DEDC);
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 16px;
}
.reglas-card-head h3 {
    margin: 0 0 4px;
    font-family: Georgia, serif;
    font-size: 19px;
    font-weight: 600;
    color: var(--ink, #14272B);
}
.reglas-card-head p {
    margin: 0 0 22px;
    font-size: 13.5px;
    color: var(--muted, #6B7B7E);
    line-height: 1.5;
}

/* ───── Centrado de /reglas a 1080px (mismo patrón que /cita) ─────────
   /configuracion usa .config-shell con max-width: 1480px porque tiene
   3 cards de 2 cols cada uno en una sola fila · necesita el ancho.
   /reglas en cambio tiene cards apiladas (cada card ocupa 6 cols
   completas), así que 1080px se siente más enfocado y consistente con
   el resto del sistema (/cita, /paciente, /cobros, /reservas). */
.reglas-page.config-page .config-shell {
    max-width: 1080px;
}

/* ───── Cards de /reglas · layout 1:3 (refactor 2026-05-08 UX) ────────
   Antes: head encima del contenido (stack vertical) · ocupaba ancho
   completo y dejaba mucho espacio en blanco a los costados.

   Ahora: grid 1fr 3fr · head a la izquierda (badge config-step + h2 + p
   apilados verticalmente) y contenido (.config-card-content) a la
   derecha. La descripción sirve de "etiqueta" del control y los
   sliders/toggles ocupan el ancho útil. */
.config-card-reglas {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(220px, 1fr) minmax(0, 3fr);
    gap: 28px;
    align-items: start;
}
/* Modifier wide se mantiene por compatibilidad pero ya no aporta nada
   extra · el grid-column 1 / -1 vive en la base. */
.config-card-reglas-wide {
    grid-column: 1 / -1;
}
.config-card-reglas .config-card-head {
    margin-bottom: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
}
.config-card-reglas .config-card-head > div {
    min-width: 0;
}
.config-card-reglas .config-card-content {
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.config-card-reglas .reglas-row {
    border-bottom: 1px solid var(--line-soft, #E8ECEB);
    padding: 16px 0;
    margin-bottom: 0;
}
.config-card-reglas .reglas-row:first-child {
    padding-top: 0;
}
.config-card-reglas .reglas-row:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}
@media (max-width: 760px) {
    /* En móvil colapsa a stack vertical · el head vuelve arriba. */
    .config-card-reglas {
        grid-template-columns: 1fr;
        gap: 18px;
    }
}
.reglas-page .reglas-footnote {
    margin: 22px 0 0;
    text-align: center;
    color: var(--muted);
    font-size: 12.5px;
}
.reglas-row {
    margin-bottom: 22px;
}
.reglas-row:last-child {
    margin-bottom: 0;
}
.reglas-row-label {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ink, #14272B);
}

/* ─── Slider con stops · refactor 2026-05-08 (UX premium · tres iter) ─
   Iteración 1: track 6px + thumb 22px (default original).
   Iteración 2: track 4px + thumb 16px.
   Iteración 3: track 3px + thumb 13px con borde 1.5px · alineado con
   el layout 1:3 y el lenguaje refinado de configuracion · se siente
   como una pieza fina, no como un control táctil. */
.reglas-slider-wrap {
    padding: 4px 2px;
}
.reglas-slider-wrap input[type="range"] {
    width: 100%;
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    height: 18px;
}
.reglas-slider-wrap input[type="range"]::-webkit-slider-runnable-track {
    height: 3px;
    background: linear-gradient(90deg, var(--accent, #2D7A8C) 0%, var(--accent, #2D7A8C) var(--pct, 17%),
                                       var(--surface-2, #E5ECEB) var(--pct, 17%), var(--surface-2, #E5ECEB) 100%);
    border-radius: 999px;
}
.reglas-slider-wrap input[type="range"]::-moz-range-track {
    height: 3px;
    background: var(--surface-2, #E5ECEB);
    border-radius: 999px;
}
.reglas-slider-wrap input[type="range"]::-moz-range-progress {
    height: 3px;
    background: var(--accent, #2D7A8C);
    border-radius: 999px;
}
.reglas-slider-wrap input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 13px; height: 13px;
    border-radius: 50%;
    background: #fff;
    border: 1.5px solid var(--accent, #2D7A8C);
    margin-top: -5px;
    cursor: grab;
    box-shadow: 0 1px 3px rgba(20,39,43,.12);
    transition: transform .12s, box-shadow .12s;
}
.reglas-slider-wrap input[type="range"]:active::-webkit-slider-thumb {
    cursor: grabbing;
    transform: scale(1.15);
    box-shadow: 0 2px 6px rgba(45,122,140,.28);
}
.reglas-slider-wrap input[type="range"]::-moz-range-thumb {
    width: 13px; height: 13px;
    border-radius: 50%;
    background: #fff;
    border: 1.5px solid var(--accent, #2D7A8C);
    cursor: grab;
}
.reglas-slider-wrap input[type="range"]:focus-visible::-webkit-slider-thumb {
    outline: 2px solid color-mix(in srgb, var(--accent, #2D7A8C) 32%, transparent);
    outline-offset: 1px;
}

/* ─── Stops del slider · calibrados al thumb (refactor 2026-05-08 UX) ──
   Antes los labels usaban flex:1 con text-align:center · cada label
   tomaba un séptimo del ancho y se centraba dentro · el visual center
   caía a (n+0.5)/7 del track. El thumb en cambio viaja a n/6 del track.
   Offset visible de ~2% que el ojo nota · "se ve descalibrado".

   Ahora cada label se posiciona ABSOLUTE en el porcentaje exacto del
   thumb (0%, 16.67%, 33.33%, 50%, 66.67%, 83.33%, 100%) y se centra
   con translateX(-50%). El primero y el último se anclan a las orillas
   (sin centrar) para que no se salgan del wrap. */
.reglas-slider-stops {
    position: relative;
    height: 14px;
    margin-top: 12px;
    font-size: 11px;
    color: var(--muted, #6B7B7E);
    font-weight: 600;
}
.reglas-slider-stops span {
    position: absolute;
    top: 0;
    transform: translateX(-50%);
    transition: color .15s, font-weight .15s;
    user-select: none;
    white-space: nowrap;
}
.reglas-slider-stops span[data-stop="0"] { left: 0;        transform: none; text-align: left; }
.reglas-slider-stops span[data-stop="1"] { left: 16.6667%; }
.reglas-slider-stops span[data-stop="2"] { left: 33.3333%; }
.reglas-slider-stops span[data-stop="3"] { left: 50%; }
.reglas-slider-stops span[data-stop="4"] { left: 66.6667%; }
.reglas-slider-stops span[data-stop="5"] { left: 83.3333%; }
.reglas-slider-stops span[data-stop="6"] { left: auto; right: 0; transform: none; text-align: right; }
.reglas-slider-stops span.is-active {
    color: var(--accent, #2D7A8C);
    font-weight: 700;
}

/* Hint del slider · subtítulo sutil estilo iOS settings.
   Sin uppercase, sin caja azul · solo texto gris pequeño. */
.reglas-row-hint {
    margin: 12px 4px 0;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    font-size: 13px;
    line-height: 1.55;
    color: var(--muted, #6B7B7E);
    text-transform: none !important;
    letter-spacing: normal;
    font-weight: 400;
}
.reglas-row-hint.is-warn {
    color: var(--warn, #D97706);
    background: transparent;
    border: 0;
    font-weight: 500;
}

/* ─── Toggle row ─── */
.reglas-row-toggle {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    padding: 14px 0;
    border-top: 1px solid var(--line-soft, #E8ECEB);
}
.reglas-row-toggle:first-child {
    border-top: 0;
    padding-top: 0;
}
.reglas-row-text { flex: 1; min-width: 0; }
.reglas-row-text strong {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--ink, #14272B);
    margin-bottom: 4px;
}
.reglas-row-text small {
    display: block;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--muted, #6B7B7E);
}

.reglas-pill-soon {
    display: inline-block;
    padding: 1px 8px;
    margin-left: 6px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    background: var(--surface-2, #E5ECEB);
    color: var(--muted, #6B7B7E);
    vertical-align: middle;
}
.reglas-row-toggle.is-coming-soon { opacity: .65; }

/* ─── Toggle switch ─── */
.reglas-toggle {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    user-select: none;
    flex-shrink: 0;
}
.reglas-toggle input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.reglas-toggle-track {
    position: relative;
    display: inline-block;
    width: 44px; height: 24px;
    border-radius: 999px;
    background: var(--surface-2, #E5ECEB);
    transition: background .2s cubic-bezier(.4,0,.2,1);
}
.reglas-toggle-thumb {
    position: absolute;
    top: 2px; left: 2px;
    width: 20px; height: 20px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 4px rgba(0,0,0,.15);
    transition: transform .2s cubic-bezier(.4,0,.2,1);
}
.reglas-toggle input:checked + .reglas-toggle-track {
    background: var(--accent, #2D7A8C);
}
.reglas-toggle input:checked + .reglas-toggle-track .reglas-toggle-thumb {
    transform: translateX(20px);
}
.reglas-toggle input:focus-visible + .reglas-toggle-track {
    outline: 3px solid color-mix(in srgb, var(--accent, #2D7A8C) 35%, transparent);
    outline-offset: 2px;
}
.reglas-toggle.is-disabled { cursor: not-allowed; }
.reglas-toggle.is-disabled .reglas-toggle-track { background: var(--line, #D6DEDC); }

/* ─── Saved feedback ─── */
.reglas-saved {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--ok, #16A34A);
    transition: opacity .25s;
}
.reglas-saved::before {
    content: "✓";
    display: inline-block;
    width: 14px; height: 14px;
    line-height: 14px;
    text-align: center;
    border-radius: 50%;
    background: var(--ok-soft, #DCFCE7);
    font-size: 10px;
}
.reglas-saved.is-flashing {
    animation: reglas-saved-flash .4s ease-out;
}
@keyframes reglas-saved-flash {
    0%   { transform: scale(.9); opacity: 0; }
    50%  { transform: scale(1.05); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}

.reglas-footnote {
    margin: 24px 4px 8px;
    padding-top: 14px;
    border-top: 1px solid var(--line-soft, #E8ECEB);
    font-size: 12px;
    color: var(--muted, #6B7B7E);
    line-height: 1.55;
}

@media (max-width: 720px) {
    .reglas-card { padding: 18px; }
    .reglas-row-toggle { flex-direction: column; align-items: stretch; gap: 14px; }
    .reglas-row-toggle .reglas-toggle { align-self: flex-end; }
    .reglas-slider-stops { font-size: 10px; }
}

/* ════════════════════════════════════════════════════════════════════
   Tab "Mails al paciente" · editor 3-cols · Sprint 2 parte B
   ════════════════════════════════════════════════════════════════════ */
.mails-layout {
    display: grid;
    grid-template-columns: 280px minmax(0, 1.2fr) minmax(0, 1fr);
    gap: 16px;
    align-items: stretch;
    min-height: 540px;
}

/* ─── Columna 1 · lista lateral ─── */
.mails-list {
    background: var(--surface, #FBFBF8);
    border: 1px solid var(--line, #D6DEDC);
    border-radius: 14px;
    padding: 16px;
    overflow-y: auto;
}
.mails-list-title {
    margin: 0 0 12px;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--muted, #6B7B7E);
}
.mails-list-items {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.mails-list-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    cursor: pointer;
    transition: background .12s;
    position: relative;
}
.mails-list-item:hover { background: var(--surface-2, #E5ECEB); }
.mails-list-item.is-selected {
    background: var(--accent-soft, #D7E5E9);
}
.mails-list-dot {
    flex-shrink: 0;
    font-size: 13px;
    color: var(--accent, #2D7A8C);
    line-height: 1.2;
    margin-top: 2px;
}
.mails-list-item.is-inactiva .mails-list-dot { color: var(--line, #D6DEDC); }
.mails-list-body {
    flex: 1;
    min-width: 0;
}
.mails-list-body strong {
    display: block;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ink, #14272B);
    line-height: 1.3;
}
.mails-list-body small {
    display: block;
    margin-top: 2px;
    font-size: 11.5px;
    line-height: 1.4;
    color: var(--muted, #6B7B7E);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.mails-list-badge {
    position: absolute;
    top: 8px; right: 8px;
    padding: 1px 7px;
    font-size: 9.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--accent, #2D7A8C);
    background: var(--accent-soft, #D7E5E9);
    border-radius: 999px;
}
.mails-list-empty {
    padding: 22px 8px;
    text-align: center;
    font-size: 13px;
    color: var(--muted, #6B7B7E);
}

/* ─── Columna 2 · editor ─── */
.mails-editor {
    background: var(--surface, #FBFBF8);
    border: 1px solid var(--line, #D6DEDC);
    border-radius: 14px;
    padding: 24px;
    display: flex;
    flex-direction: column;
}
.mails-editor-empty {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--muted, #6B7B7E);
    font-size: 13.5px;
    text-align: center;
}
.mails-editor-form {
    display: flex;
    flex-direction: column;
    gap: 18px;
    flex: 1;
}
.mails-editor-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--line-soft, #E8ECEB);
}
.mails-editor-head h3 {
    margin: 0 0 4px;
    font-family: Georgia, serif;
    font-size: 18px;
    color: var(--ink, #14272B);
}
.mails-editor-head p {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--muted, #6B7B7E);
}

.mails-editor-saved {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--ok, #16A34A);
    flex-shrink: 0;
}
.mails-editor-saved::before {
    content: "✓";
    width: 14px; height: 14px;
    line-height: 14px;
    text-align: center;
    border-radius: 50%;
    background: var(--ok-soft, #DCFCE7);
    font-size: 10px;
}
.mails-editor-saved.is-flashing { animation: reglas-saved-flash .4s ease-out; }

.mails-editor-field { display: flex; flex-direction: column; gap: 6px; }
.mails-editor-field label {
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--muted, #6B7B7E);
}
.mails-cuerpo-textarea {
    font-family: Inter, -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 14px;
    line-height: 1.55;
    min-height: 200px;
    resize: vertical;
}

/* Merge tags · pills clickeables */
.mails-editor-tags {
    background: var(--bg, #F2F5F4);
    border-radius: 12px;
    padding: 14px;
}
.mails-tags-label {
    margin: 0 0 10px;
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--muted, #6B7B7E);
}
.mails-tags-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.mails-tag-pill {
    padding: 5px 10px;
    border-radius: 999px;
    background: var(--surface, #FBFBF8);
    border: 1px solid var(--line, #D6DEDC);
    font-family: "SF Mono", Menlo, Consolas, monospace;
    font-size: 11.5px;
    color: var(--accent, #2D7A8C);
    cursor: pointer;
    transition: background .12s, border-color .12s, transform .1s;
}
.mails-tag-pill:hover {
    background: var(--accent-soft, #D7E5E9);
    border-color: var(--accent, #2D7A8C);
    transform: translateY(-1px);
}
.mails-tag-pill:active { transform: translateY(0); }

.mails-editor-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--line-soft, #E8ECEB);
    flex-wrap: wrap;
}
.mails-toggle-mini {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 13px;
    color: var(--ink-2, #2C4145);
}

/* ─── Columna 3 · preview ─── */
.mails-preview {
    background: var(--surface, #FBFBF8);
    border: 1px solid var(--line, #D6DEDC);
    border-radius: 14px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.mails-preview-head {
    padding: 14px 18px;
    border-bottom: 1px solid var(--line-soft, #E8ECEB);
    background: var(--surface-2, #E5ECEB);
}
.mails-preview-head strong {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: var(--ink, #14272B);
    line-height: 1.3;
    word-break: break-word;
}
.mails-preview-head small {
    display: block;
    margin-top: 4px;
    font-size: 11.5px;
    color: var(--muted, #6B7B7E);
}
.mails-preview-iframe {
    flex: 1;
    width: 100%;
    border: 0;
    background: #fff;
}

/* ─── Responsive ─── */
@media (max-width: 1024px) {
    .mails-layout { grid-template-columns: 240px 1fr; }
    .mails-preview { grid-column: 1 / -1; min-height: 400px; }
}
@media (max-width: 720px) {
    .mails-layout { grid-template-columns: 1fr; }
    .mails-list { max-height: 200px; }
    .mails-editor-foot { flex-direction: column; align-items: stretch; }
    .mails-editor-foot .btn-ghost,
    .mails-editor-foot .btn-secondary { width: 100%; text-align: center; }
}

/* ════════════════════════════════════════════════════════════════════
   Tab Analytics · Storytelling de KPIs · Sprint 7
   ════════════════════════════════════════════════════════════════════ */

/* ─── Selector de rango (7d / 30d / 90d) ─── */
.analytics-rango {
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    background: var(--surface-2, #E5ECEB);
    border-radius: 999px;
}
.analytics-rango-btn {
    padding: 6px 14px;
    background: transparent;
    border: 0;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ink-2, #2C4145);
    cursor: pointer;
    transition: background .12s, color .12s;
}
.analytics-rango-btn:hover { background: rgba(0,0,0,.04); }
.analytics-rango-btn.is-active {
    background: var(--surface, #FBFBF8);
    color: var(--accent, #2D7A8C);
    box-shadow: 0 1px 3px rgba(20,39,43,.08);
}

/* ─── Hero: la frase principal ─── */
.analytics-hero {
    margin: 22px 0;
    padding: 28px 28px;
    background: linear-gradient(135deg, var(--accent-soft, #D7E5E9) 0%, var(--surface, #FBFBF8) 100%);
    border: 1px solid var(--accent, #2D7A8C);
    border-radius: 18px;
    text-align: center;
}
.analytics-hero.is-good {
    background: linear-gradient(135deg, var(--ok-soft, #DCFCE7) 0%, var(--surface) 100%);
    border-color: var(--ok, #16A34A);
}
.analytics-hero.is-warn {
    background: linear-gradient(135deg, rgba(217,119,6,0.18) 0%, var(--surface) 100%);
    border-color: var(--warn, #D97706);
}
.analytics-hero-narrativa {
    margin: 0 0 8px;
    font-family: Georgia, serif;
    font-size: 22px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--ink, #14272B);
}
.analytics-hero-comparacion {
    margin: 0;
    font-size: 14.5px;
    color: var(--ink-2, #2C4145);
}

/* ─── Empty state ─── */
.analytics-empty {
    text-align: center;
    padding: 60px 20px;
    color: var(--muted, #6B7B7E);
    font-size: 14px;
    line-height: 1.65;
}

/* ─── Grid de cards ─── */
.analytics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    margin-bottom: 28px;
}
.analytics-card {
    background: var(--surface, #FBFBF8);
    border: 1px solid var(--line, #D6DEDC);
    border-radius: 14px;
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    transition: border-color .15s, transform .12s;
}
.analytics-card:hover {
    border-color: var(--ink-3, #4A5C5F);
    transform: translateY(-1px);
}
.analytics-card-warn {
    background: linear-gradient(180deg, #FEF3C7 0%, var(--surface) 100%);
    border-color: var(--warn, #D97706);
}
.analytics-card-label {
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--muted, #6B7B7E);
}
.analytics-card strong {
    font-family: Georgia, serif;
    font-size: 28px;
    font-weight: 600;
    color: var(--ink, #14272B);
    line-height: 1;
}
.analytics-card small {
    font-size: 11.5px;
    color: var(--muted, #6B7B7E);
    margin-top: 2px;
}

/* ─── Top plantillas ─── */
.analytics-tops {
    margin-bottom: 28px;
}
.analytics-tops h3 {
    margin: 0 0 14px;
    font-size: 16px;
    color: var(--ink, #14272B);
}
.analytics-tops-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.analytics-top-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 18px;
    background: var(--surface, #FBFBF8);
    border: 1px solid var(--line, #D6DEDC);
    border-radius: 12px;
    border-left-width: 4px;
}
.analytics-top-row.is-good  { border-left-color: var(--ok, #16A34A); }
.analytics-top-row.is-warn  { border-left-color: var(--warn, #D97706); }
.analytics-top-row.is-muted { border-left-color: var(--line, #D6DEDC); }
.analytics-top-main strong {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: var(--ink, #14272B);
    margin-bottom: 2px;
}
.analytics-top-main small {
    display: block;
    font-size: 12px;
    color: var(--muted, #6B7B7E);
}
.analytics-top-side {
    text-align: right;
    flex-shrink: 0;
}
.analytics-top-estado {
    display: block;
    font-size: 11.5px;
    font-weight: 700;
    margin-bottom: 2px;
}
.is-good  .analytics-top-estado { color: var(--ok, #16A34A); }
.is-warn  .analytics-top-estado { color: var(--warn, #D97706); }
.is-muted .analytics-top-estado { color: var(--muted, #6B7B7E); }
.analytics-top-sugerencia {
    display: block;
    font-size: 11.5px;
    color: var(--ink-3, #4A5C5F);
    max-width: 280px;
}

/* ─── Recomendaciones ─── */
.analytics-recs h3 {
    margin: 0 0 14px;
    font-size: 16px;
    color: var(--ink, #14272B);
}
.analytics-recs-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.analytics-rec-row {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 18px;
    background: linear-gradient(180deg, #FFFBEB 0%, var(--surface) 80%);
    border: 1px solid #FCD34D;
    border-radius: 12px;
}
.analytics-rec-icon {
    flex-shrink: 0;
    font-size: 20px;
    line-height: 1;
    width: 36px; height: 36px;
    border-radius: 50%;
    background: rgba(217,119,6,0.15);
    display: inline-flex;
    align-items: center; justify-content: center;
}
.analytics-rec-body { flex: 1; min-width: 0; }
.analytics-rec-body strong {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: #7C4F0A;
    margin-bottom: 4px;
}
.analytics-rec-body p {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--ink-2, #2C4145);
}
.analytics-rec-action {
    flex-shrink: 0;
    align-self: center;
    padding: 8px 14px;
    background: var(--accent, #2D7A8C);
    color: #fff;
    border-radius: 8px;
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none;
    transition: background .15s;
}
.analytics-rec-action:hover { background: var(--accent-hover, #1F6878); }

/* ─── Responsive ─── */
@media (max-width: 720px) {
    .analytics-hero { padding: 22px 18px; }
    .analytics-hero-narrativa { font-size: 18px; }
    .analytics-grid { grid-template-columns: repeat(2, 1fr); }
    .analytics-top-row { flex-direction: column; align-items: stretch; gap: 8px; }
    .analytics-top-side { text-align: left; }
    .analytics-rec-row { flex-direction: column; }
    .analytics-rec-action { align-self: flex-start; }
}

/* ════════════════════════════════════════════════════════════════════
   Preview de mail tipo email-client mockup · Sprint 2 mejora UX
   ════════════════════════════════════════════════════════════════════ */
.mails-preview {
    background: var(--bg, #F2F5F4);
    border: 1px solid var(--line, #D6DEDC);
    border-radius: 14px;
    padding: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* ─── Toolbar superior tipo Gmail/Apple Mail ─── */
.mails-preview-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: var(--surface-2, #E5ECEB);
    border-radius: 10px 10px 0 0;
    border: 1px solid var(--line, #D6DEDC);
    border-bottom: 0;
}
.mails-preview-dots { display: flex; gap: 6px; }
.mails-preview-dots .dot {
    width: 10px; height: 10px; border-radius: 50%;
    display: inline-block;
}
.mails-preview-dots .dot-r { background: #FF5F57; }
.mails-preview-dots .dot-y { background: #FEBC2E; }
.mails-preview-dots .dot-g { background: #28C840; }
.mails-preview-toolbar-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--muted, #6B7B7E);
}

/* ─── Header del mail (asunto + from + to) ─── */
.mails-preview-mailhead {
    background: var(--surface, #FBFBF8);
    border-left: 1px solid var(--line, #D6DEDC);
    border-right: 1px solid var(--line, #D6DEDC);
    padding: 18px 22px 14px;
}
.mails-preview-mailhead h3 {
    margin: 0 0 12px;
    font-family: Georgia, serif;
    font-size: 16px;
    font-weight: 700;
    color: var(--ink, #14272B);
    line-height: 1.3;
    word-break: break-word;
}
.mails-preview-meta {
    margin: 0;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 4px 12px;
    font-size: 12px;
}
.mails-preview-meta > div {
    display: contents;
    margin: 0;
}
.mails-preview-meta dt {
    color: var(--muted, #6B7B7E);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: 10.5px;
    padding-top: 2px;
}
.mails-preview-meta dd {
    margin: 0;
    color: var(--ink-2, #2C4145);
    word-break: break-word;
}

/* ─── Iframe del mail real ─── */
.mails-preview-iframe {
    flex: 1;
    width: 100%;
    border: 1px solid var(--line, #D6DEDC);
    border-top: 0;
    border-radius: 0 0 10px 10px;
    background: #FFFFFF;
    min-height: 480px;
    box-shadow: inset 0 6px 12px -8px rgba(0,0,0,.06);
}

/* ════════════════════════════════════════════════════════════════════
   Reservas pendientes · header propio + link "Ver cita"
   ════════════════════════════════════════════════════════════════════ */
.reservas-page-head {
    max-width: 720px;
    margin: 0 0 22px;
    padding: 0 8px;
}
.reservas-page-head h1 {
    margin: 0 0 6px;
    font-size: 24px;
    font-weight: 700;
    color: var(--ink, #14272B);
    line-height: 1.2;
}
.reservas-page-head p {
    margin: 0;
    font-size: 14px;
    line-height: 1.55;
    color: var(--muted, #6B7B7E);
}

/* ─── Link "Ver cita" (secundario) en cards ─── */
.btn-link-cita {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border-radius: 8px;
    background: transparent;
    color: var(--accent, #2D7A8C);
    border: 1px solid color-mix(in srgb, var(--accent, #2D7A8C) 25%, transparent);
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none;
    transition: background .12s, border-color .12s, color .12s;
    white-space: nowrap;
}
.btn-link-cita:hover {
    background: var(--accent-soft, #D7E5E9);
    border-color: var(--accent, #2D7A8C);
    color: var(--accent-hover, #1F6878);
}
.btn-link-cita svg { flex-shrink: 0; opacity: .8; }
.btn-link-cita:hover svg { opacity: 1; }

/* ─── Actions row en cards reabribles ─── */
.reserva-vencida-actions {
    display: flex;
    gap: 8px;
    align-items: stretch;
}
.reserva-vencida-actions .btn-link-cita {
    flex-shrink: 0;
}
.reserva-vencida-actions .btn-reabrir-reserva {
    flex: 1;
}
.reserva-vencida-hint {
    margin: 8px 0 0;
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--muted, #6B7B7E);
}
.reserva-vencida-hint a {
    color: var(--accent, #2D7A8C);
    font-weight: 600;
}

/* Ver cita arriba del tip en pendientes */
.reserva-pendiente-foot .btn-link-cita {
    align-self: flex-start;
    margin-bottom: 10px;
}

/* ════════════════════════════════════════════════════════════════════
   Reservas-shell · contenedor body
   ════════════════════════════════════════════════════════════════════ */
.reservas-shell {
    margin-top: 22px;
}

/* Bloque "Esperando tu aprobación" (mismo estilo que vencidas, otro color) */
.reservas-pendientes-block {
    background: var(--surface, #FBFBF8);
    border: 1px solid var(--line, #D6DEDC);
    border-radius: 14px;
    padding: 20px 22px;
    margin-bottom: 20px;
}
.reservas-pendientes-block-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--line-soft, #E8ECEB);
}
.reservas-pendientes-icon {
    flex-shrink: 0;
    width: 36px; height: 36px;
    border-radius: 10px;
    background: var(--accent-soft, #D7E5E9);
    color: var(--accent, #2D7A8C);
    display: inline-flex; align-items: center; justify-content: center;
}
.reservas-pendientes-block-head h2 {
    margin: 0;
    font-family: Georgia, serif;
    font-size: 17px;
    font-weight: 600;
    color: var(--ink, #14272B);
    line-height: 1.3;
}
.reservas-pendientes-block-head p {
    margin: 2px 0 0;
    font-size: 13px;
    color: var(--muted, #6B7B7E);
    line-height: 1.45;
}

/* Empty state limpio */
.reservas-empty {
    background: var(--surface, #FBFBF8);
    border: 1px solid var(--line, #D6DEDC);
    border-radius: 14px;
    padding: 56px 24px;
    text-align: center;
}
.reservas-empty-icon {
    display: inline-flex;
    align-items: center; justify-content: center;
    width: 76px; height: 76px;
    border-radius: 50%;
    background: var(--ok-soft, #DCFCE7);
    color: var(--ok, #16A34A);
    margin-bottom: 14px;
}
.reservas-empty h2 {
    margin: 0 0 4px;
    font-family: Georgia, serif;
    font-size: 18px;
    font-weight: 600;
    color: var(--ink, #14272B);
}
.reservas-empty p {
    margin: 0;
    font-size: 13.5px;
    color: var(--muted, #6B7B7E);
}

/* ════════════════════════════════════════════════════════════════════
   /cita/{id} v2 · composición fija + bloque "Qué sigue" parametrizado
   ════════════════════════════════════════════════════════════════════ */

.cita-page {
    /* Mismo gradiente sutil aqua-soft que /pacientes · da identidad de
       sección clínica sin pelear con el contenido. */
    background:
        linear-gradient(180deg,
            color-mix(in srgb, var(--accent-soft) 24%, transparent) 0,
            transparent 320px);
    min-height: 100vh;
    padding-bottom: 24px;
}

/* ───── Centrado del contenido · refactor 2026-05-08 (UX) ──────────────
   Replica el patrón de .form-wrap (880px) que usa /paciente/nuevo y la
   edición de ficha, pero con un poco más de aire (1080px) porque /cita
   tiene un grid de 2 columnas (Detalles + Actividad) que a 880px se
   sentiría apretado y colapsaría a 1 columna por la regla de 900px.

   Centramos cada bloque top-level de .cita-page (header, sections,
   footer) excluyendo los modales/sheets · esos son overlays y deben
   seguir cubriendo toda la pantalla.

   El padding lateral interno de cada bloque (px-8 = 32px) se conserva,
   por lo que el contenido respira incluso pegado al borde del wrapper. */
.cita-page > .module-header,
.cita-page > section,
.cita-page > footer {
    max-width: 1080px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}
.cita-page .breadcrumb {
    font-size: 13px;
    color: var(--muted);
}
.cita-page .breadcrumb a {
    color: var(--muted);
    text-decoration: none;
}
.cita-page .breadcrumb a:hover {
    color: var(--ink);
}
.cita-page .breadcrumb svg {
    color: var(--line);
    margin: 0 6px;
}

/* ── 1. HERO ───────────────────────────────────────────────────────── */
.cita-hero-v2 {
    background: var(--surface, #FBFBF8);
    border: 1px solid var(--line, #D6DEDC);
    border-radius: 18px;
    padding: 32px 40px 28px;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 32px;
    align-items: center;
    box-shadow: 0 1px 0 rgba(20, 39, 43, 0.02);
    position: relative;
    overflow: hidden;
}
.cita-hero-v2-copy {
    display: flex;
    flex-direction: column;
    gap: 24px;
    min-width: 0;
}
.cita-hero-v2-paciente {
    display: flex;
    align-items: center;
    gap: 18px;
}
.cita-hero-v2-paciente h1 {
    font-size: 32px;
    line-height: 1.15;
    margin: 0;
    color: var(--ink);
    font-weight: 600;
}
.cita-hero-v2-lead {
    margin: 4px 0 0;
    font-size: 14px;
    color: var(--muted);
    line-height: 1.45;
    max-width: 440px;
}

/* Chips de info clave: fecha · modalidad · tarifa */
.cita-hero-v2-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.cita-info-chip {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: var(--surface-2, #E5ECEB);
    border: 1px solid var(--line-soft, #E8ECEB);
    border-radius: 10px;
    color: var(--ink-2);
    font-size: 12.5px;
    line-height: 1.25;
}
.cita-info-chip > svg, .cita-info-chip > .mode-icon {
    color: var(--ink-3);
    flex-shrink: 0;
}
.cita-info-chip-stack {
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.cita-info-chip-stack strong {
    color: var(--ink);
    font-weight: 600;
    font-size: 13px;
    /* La fecha completa "13 de mayo de 2026" debe leerse entera · sin
       ellipsis ni truncado · que el chip se expanda lo necesario. */
    white-space: nowrap;
    overflow: visible;
    text-overflow: clip;
}
.cita-info-chip-stack small {
    color: var(--muted);
    font-size: 11.5px;
}

/* Ilustración flotante · sin recuadro propio · se mezcla con el hero */
.cita-hero-v2-illustration {
    width: 320px;
    max-width: 38vw;
    flex-shrink: 0;
    color: var(--accent, #2D7A8C);
    opacity: 0.92;
}
.cita-hero-v2-illustration svg {
    width: 100%;
    height: auto;
    display: block;
}

@media (max-width: 900px) {
    .cita-hero-v2 {
        grid-template-columns: 1fr;
        padding: 24px 24px 20px;
    }
    .cita-hero-v2-illustration {
        display: none;
    }
    .cita-hero-v2-paciente h1 {
        font-size: 26px;
    }
}

/* ── 2. BLOQUE "QUÉ SIGUE" · fragment parametrizado ────────────────── */
.cita-quesigue {
    background: var(--surface, #FBFBF8);
    border: 1px solid var(--line, #D6DEDC);
    border-radius: 18px;
    padding: 24px 28px 22px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    position: relative;
}
.cita-quesigue-chip {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.cita-quesigue-headline {
    font-size: 22px;
    line-height: 1.2;
    color: var(--ink);
    margin: 0;
    font-weight: 600;
}
.cita-quesigue-descripcion {
    margin: 0;
    font-size: 14px;
    color: var(--muted);
    max-width: 640px;
}
.cita-quesigue-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 10px;
    text-decoration: none;
    font-size: 13.5px;
    transition: background 120ms ease;
}
.cita-quesigue-banner.tone-warn {
    background: var(--warn-soft, #FEF3C7);
    color: #92400E;
}
.cita-quesigue-banner:hover:not(.is-static) {
    filter: brightness(0.97);
}
.cita-quesigue-banner-icon {
    color: currentColor;
    opacity: 0.85;
    display: inline-flex;
}
.cita-quesigue-banner-label {
    font-weight: 500;
}
.cita-quesigue-banner-valor {
    margin-left: auto;
    font-weight: 600;
    font-size: 14.5px;
}
.cita-quesigue-banner-arrow {
    color: currentColor;
    opacity: 0.7;
    flex-shrink: 0;
}
.cita-quesigue-siguiente {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.cita-quesigue-kicker {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted);
    font-weight: 600;
}
.cita-quesigue-siguiente strong {
    font-size: 14.5px;
    color: var(--ink);
    font-weight: 500;
}
.cita-quesigue-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin-top: 6px;
}
.cita-quesigue-primary {
    flex: 1 1 auto;
    min-width: 220px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 24px;
    font-size: 14.5px;
    font-weight: 600;
    border-radius: 12px;
}
.cita-quesigue-primary .cita-quesigue-arrow {
    margin-left: 4px;
}
.cita-quesigue-secondary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 18px;
    font-size: 13.5px;
    font-weight: 500;
    border-radius: 10px;
}
.cita-quesigue-gestionar {
    position: relative;
}
.cita-quesigue-gestionar > summary {
    list-style: none;
    cursor: pointer;
}
.cita-quesigue-gestionar > summary::-webkit-details-marker {
    display: none;
}
/* ───── Hint pasivo · refactor 2026-05-08 (UX) ─────────────────────────
   Antes: pill con fondo de color, suelto al final del card después del
   row de acciones. Se sentía como un banner desconectado y mal alineado
   con todo lo demás · efecto "isla violeta" abajo a la izquierda.

   Ahora: subtítulo inline debajo de .cita-quesigue-descripcion. Misma
   columna de texto, jerarquía clara como "nota de pie" del head. Sin
   pill de fondo · solo un icono coloreado por tono (semántica) + texto
   muted. No compite con el primary button. */
.cita-quesigue-hint {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 8px 0 0;
    padding: 0;
    background: transparent;
    border: 0;
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--muted, #667085);
    max-width: 640px;
}
.cita-quesigue-hint svg {
    flex-shrink: 0;
    opacity: 0.85;
}
/* El tono semántico ahora vive solo en el icono · texto siempre muted
   para no competir visualmente con la descripción de arriba. */
.cita-quesigue-hint.tone-amber svg,
.cita-quesigue-hint.tone-amber-oscuro svg { color: #B45309; }
.cita-quesigue-hint.tone-verde svg,
.cita-quesigue-hint.tone-verde-saturado svg { color: #047857; }
.cita-quesigue-hint.tone-azul svg,
.cita-quesigue-hint.tone-azul-oscuro svg { color: #1D4ED8; }
.cita-quesigue-hint.tone-violeta svg { color: #7C3AED; }
.cita-quesigue-hint.tone-teal svg { color: #0F766E; }
.cita-quesigue-hint.tone-naranja svg { color: #C2410C; }
.cita-quesigue-hint.tone-rojo svg,
.cita-quesigue-hint.tone-rojo-suave svg { color: #B91C1C; }
.cita-quesigue-hint.tone-gris svg { color: #6B7280; }

/* ───── "Ver paciente" en la actions row · refactor 2026-05-08 (UX) ────
   Versión anterior: footer sutil debajo de las acciones. Quedaba
   demasiado tímido (apenas se notaba) y desconectado del set de
   acciones del card.

   Versión actual: hereda btn-ghost + cita-quesigue-secondary (mismo
   estilo que "No asistió" y "Más opciones") y se empuja al extremo
   derecho con margin-left: auto. Esto separa visualmente:
     · Izquierda · acciones DE la cita (registrar, no asistió, gestionar)
     · Derecha   · navegación AL paciente
   sin necesitar labels ni separadores. Misma altura/peso que el resto
   del set, así no se siente perdido. */
.cita-quesigue-ver-paciente {
    margin-left: auto;
}
.cita-quesigue-ver-paciente svg {
    color: var(--muted, #6B7B7E);
}
.cita-quesigue-ver-paciente:hover svg {
    color: inherit;
}
@media (max-width: 760px) {
    /* En móvil la fila colapsa · el "Ver paciente" baja como cualquier
       otro botón. margin-left auto pierde sentido y haría que ocupe
       toda la fila por sí solo · forzamos margen automático off. */
    .cita-quesigue-ver-paciente {
        margin-left: 0;
    }
}

/* Tonos de chip · paleta unificada · 1 fila por tono */
.chip-tone-amber          { background: #FEF3C7; color: #92400E; }
.chip-tone-amber-oscuro   { background: #FED7AA; color: #9A3412; }

/* Pill con icono estático a la izquierda · todos los chip-tone-X.
   El icono usa currentColor para heredar el color del texto del chip,
   asi cada estado tiene su icono en su propio color sin reglas extra. */
.pill[class*="chip-tone-"] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.pill[class*="chip-tone-"] > svg {
    width: 11px;
    height: 11px;
    flex-shrink: 0;
}
.chip-tone-verde          { background: #D1FAE5; color: #065F46; }
.chip-tone-verde-saturado { background: #A7F3D0; color: #047857; }
.chip-tone-azul           { background: #DBEAFE; color: #1E40AF; }
.chip-tone-violeta        { background: #EDE9FE; color: #6D28D9; }
.chip-tone-teal           { background: #CCFBF1; color: #0F766E; }
.chip-tone-rojo-suave     { background: #FEE2E2; color: #B91C1C; }
.chip-tone-rojo           { background: #FECACA; color: #991B1B; }
.chip-tone-gris           { background: #F3F4F6; color: #4B5563; }

/* Chip "Familiar de …" en el header de la ficha del paciente (V62).
   Usa tono violeta + icon de personas. Clickeable → ficha del otro. */
.pat-vinculo-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    text-decoration: none;
    cursor: pointer;
    transition: filter .15s ease;
}
.pat-vinculo-chip:hover {
    filter: brightness(.95);
    text-decoration: none;
}
.pat-vinculo-chip svg {
    flex-shrink: 0;
    opacity: .85;
}

/* Radio pills "Tipo de vínculo" en el form de edición · paralelo al patrón
   de chips usado en la pantalla de revisión (revisar-vinculo). */
.vinculo-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
}
.vinculo-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface);
    cursor: pointer;
    font-size: 13px;
    color: var(--ink-2);
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.vinculo-pill input[type="radio"] {
    margin: 0;
    accent-color: var(--accent);
    width: 14px;
    height: 14px;
}
.vinculo-pill:hover {
    border-color: color-mix(in srgb, var(--accent) 30%, var(--line));
    color: var(--ink);
}
.vinculo-pill.is-selected,
.vinculo-pill:has(input:checked) {
    background: color-mix(in srgb, var(--accent-soft) 55%, var(--surface));
    border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
    color: color-mix(in srgb, var(--accent) 88%, var(--ink));
    font-weight: 650;
}
.vinculo-pill-clear {
    background: color-mix(in srgb, var(--surface-2) 30%, var(--surface));
    color: var(--muted);
}
.vinculo-pill-clear.is-selected,
.vinculo-pill-clear:has(input:checked) {
    background: var(--surface-2);
    color: var(--ink-2);
    border-color: var(--line);
    font-weight: 600;
}

/* Pulse sutil para el chip en estados que requieren acción urgente del psi.
   Usa el aqua del sistema (--accent) en lugar de violeta para mantener
   consistencia con el resto de la web. */
.cita-quesigue-tone-amber .cita-quesigue-chip,
.cita-quesigue-tone-amber-oscuro .cita-quesigue-chip {
    box-shadow: 0 0 0 4px rgba(45, 122, 140, 0);
    animation: cita-chip-pulse 2.4s ease-in-out infinite;
}
@keyframes cita-chip-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(45, 122, 140, 0); }
    50%      { box-shadow: 0 0 0 6px rgba(45, 122, 140, 0.08); }
}

/* Sin stripe de acento por tono · el card usa shadow + border estándar
   del sistema, sin delineado colorizado. La identidad de estado vive en
   el chip pill al lado del título, no en el borde del card. */

/* ── 3. DETALLES + ACTIVIDAD (2 columnas) ──────────────────────────── */
.cita-twocol {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}
@media (max-width: 900px) {
    .cita-twocol {
        grid-template-columns: 1fr;
    }
}

.cita-card-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
}
.cita-card-head h2 {
    font-size: 17px;
    font-weight: 600;
    color: var(--ink);
    margin: 0;
}
.cita-card-head .cita-section-kicker {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted);
    font-weight: 600;
}

/* DETALLES de la cita · lista key/value */
.cita-detalles-card {
    padding: 22px 26px;
}
.cita-detalles-list {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.cita-detalles-list > div {
    display: grid;
    grid-template-columns: 130px 1fr;
    align-items: baseline;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px dashed var(--line-soft, #E8ECEB);
}
.cita-detalles-list > div:last-child {
    border-bottom: 0;
}
.cita-detalles-list dt {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--muted);
    font-weight: 500;
}
.cita-detalles-list dt > svg, .cita-detalles-list dt > .mode-icon {
    color: var(--ink-3);
    flex-shrink: 0;
}
.cita-detalles-list dd {
    margin: 0;
    color: var(--ink);
    font-size: 14px;
}
.cita-detalles-list dd small {
    color: var(--muted);
    font-size: 12.5px;
    margin-left: 4px;
}
.cita-modalidad-value {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 10px;
}
.cita-meet-ready-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 30px;
    padding: 4px 10px 4px 5px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, #4285F4 24%, var(--line));
    background:
        linear-gradient(180deg,
            color-mix(in srgb, #FFFFFF 92%, #EAF4FF),
            color-mix(in srgb, #F5FAFF 82%, #E9F6EF));
    color: color-mix(in srgb, var(--accent) 78%, #1D4ED8);
    box-shadow: 0 8px 22px -18px color-mix(in srgb, #4285F4 70%, transparent);
    font-size: 12.5px;
    font-weight: 760;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
}
.cita-meet-ready-badge:hover {
    border-color: color-mix(in srgb, #4285F4 42%, var(--line));
    background:
        linear-gradient(180deg,
            color-mix(in srgb, #FFFFFF 96%, #EAF4FF),
            color-mix(in srgb, #F0F8FF 86%, #E6F5EA));
    color: color-mix(in srgb, var(--accent) 66%, #1D4ED8);
}
.cita-meet-ready-badge:focus-visible {
    outline: 3px solid color-mix(in srgb, #4285F4 20%, transparent);
    outline-offset: 2px;
}
.cita-meet-ready-icon {
    width: 24px;
    height: 24px;
    border-radius: 999px;
    display: inline-grid;
    place-items: center;
    background: #fff;
    box-shadow: inset 0 0 0 1px rgba(66, 133, 244, 0.10);
    flex: 0 0 auto;
}
.cita-meet-ready-icon svg,
.cita-meet-ready-arrow {
    flex: 0 0 auto;
}
.cita-meet-ready-arrow {
    opacity: .62;
}
.cita-link-subtle {
    color: var(--accent, #2D7A8C);
    text-decoration: none;
    font-size: 12.5px;
    font-weight: 500;
}
.cita-link-subtle:hover {
    text-decoration: underline;
}

/* ACTIVIDAD · timeline vertical */
.cita-actividad-card {
    padding: 22px 26px;
}
.cita-actividad-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}
.cita-actividad-list > li {
    display: grid;
    grid-template-columns: 24px 1fr;
    gap: 12px;
    padding: 10px 0 10px;
    position: relative;
}
/* Línea conectora entre dots */
.cita-actividad-list > li:not(:last-child)::after {
    content: '';
    position: absolute;
    left: 11px;
    top: 28px;
    bottom: -4px;
    width: 1px;
    background: var(--line-soft, #E8ECEB);
}
.cita-actividad-dot {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--surface);
    border: 2px solid var(--line, #D6DEDC);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 1px;
    z-index: 1;
}
.cita-actividad-list > li.is-done .cita-actividad-dot {
    border-color: var(--ok, #16A34A);
    background: var(--ok, #16A34A);
    position: relative;
}
.cita-actividad-list > li.is-done .cita-actividad-dot::after {
    content: '';
    width: 8px;
    height: 5px;
    border-left: 2px solid white;
    border-bottom: 2px solid white;
    transform: rotate(-45deg) translateY(-1px);
}
.cita-actividad-list > li.is-current .cita-actividad-dot {
    border-color: var(--accent, #2D7A8C);
    background: var(--accent, #2D7A8C);
    box-shadow: 0 0 0 4px rgba(45, 122, 140, 0.18);
}
.cita-actividad-copy {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.cita-actividad-copy strong {
    font-size: 13.5px;
    font-weight: 500;
    color: var(--ink);
}
.cita-actividad-copy small {
    font-size: 12px;
    color: var(--muted);
}
.cita-actividad-list > li.is-current .cita-actividad-copy strong {
    color: var(--accent, #2D7A8C);
    font-weight: 600;
}

/* ── 4. PACIENTE + ENCUADRE ────────────────────────────────────────── */
.cita-paciente-card,
.cita-encuadre-card {
    padding: 22px 26px;
}
.cita-paciente-row {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
}
.cita-paciente-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.cita-paciente-meta strong {
    font-size: 15px;
    font-weight: 600;
    color: var(--ink);
}
.cita-paciente-meta small {
    font-size: 12.5px;
    color: var(--muted);
}
.cita-paciente-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.cita-paciente-actions .btn-ghost {
    padding: 10px 14px;
    font-size: 13px;
}

.cita-encuadre-list {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.cita-encuadre-list > div {
    display: grid;
    grid-template-columns: 130px 1fr;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px dashed var(--line-soft, #E8ECEB);
}
.cita-encuadre-list > div:last-child {
    border-bottom: 0;
}
.cita-encuadre-list dt {
    font-size: 13px;
    color: var(--muted);
    font-weight: 500;
}
.cita-encuadre-list dd {
    margin: 0;
    color: var(--ink);
    font-size: 13.5px;
}
.cita-encuadre-icon {
    color: var(--muted);
    margin-left: auto;
}

/* Card-solid base ya existe en otros lugares · si no, fallback liviano. */
.cita-page .card-solid {
    background: var(--surface, #FBFBF8);
    border: 1px solid var(--line, #D6DEDC);
    border-radius: 16px;
}

/* ════════════════════════════════════════════════════════════════════
   /cita/{id} · rediseño estado por estado según mock 2026-05-08
   ════════════════════════════════════════════════════════════════════ */

/* Centrado del rediseño v3 · refactor 2026-05-08 (UX) ·
   El ancho original (1440px) dejaba a las secciones casi full-width
   en monitores normales, contradiciendo el intento de centrar el
   contenido. Bajado a 1080px para alinear con la regla equivalente
   de arriba (.cita-page > .module-header / > section / > footer)
   que replica el patrón de .form-wrap del registro de paciente.

   .cita-topbar-v3 se mantiene aquí pero la mayoría del trabajo de
   centrado lo hace ya la regla .cita-page > * de arriba. */
.cita-topbar-v3,
.cita-page .cita-breadcrumb,
.cita-page > section,
.cita-detail-footer {
    max-width: 1080px;
    margin-left: auto;
    margin-right: auto;
}

.cita-page {
    /* Mismo gradient aqua-soft que /pacientes · una sola identidad de
       sección clínica. La regla previa con radial violeta quedaba a medias
       entre cream y aqua y pegaba mal con el resto del sistema. */
    background:
        linear-gradient(180deg,
            color-mix(in srgb, var(--accent-soft) 24%, transparent) 0,
            transparent 320px);
}

.cita-topbar-v3 {
    min-height: 74px;
    padding: 14px 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.cita-topbar-left,
.cita-top-actions,
.cita-top-crumb {
    display: flex;
    align-items: center;
}

.cita-topbar-left {
    min-width: 0;
    gap: 14px;
}

.cita-top-actions {
    gap: 12px;
    flex-shrink: 0;
}

.cita-top-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1px solid rgba(18, 24, 38, 0.10);
    background: rgba(255, 255, 255, 0.82);
    color: #111827;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    box-shadow: 0 14px 34px rgba(17, 24, 39, 0.05);
}

.cita-top-icon:first-child {
    background: #F4F1FF;
    color: #111827;
    border-color: transparent;
}

.cita-top-dot {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    right: 11px;
    top: 9px;
    background: #6D35F2;
    box-shadow: 0 0 0 3px #fff;
}

.cita-top-crumb {
    gap: 12px;
    min-width: 0;
    font-size: 15px;
    color: #525866;
}

.cita-top-crumb a,
.cita-top-crumb strong {
    white-space: nowrap;
    color: inherit;
    text-decoration: none;
}

.cita-top-crumb strong {
    color: #0F172A;
    font-weight: 760;
}

.cita-top-crumb svg {
    color: #9CA3AF;
    flex-shrink: 0;
}

.cita-page .cita-breadcrumb {
    display: none;
}

.cita-hero-v3 {
    min-height: 420px;
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid rgba(17, 24, 39, 0.10);
    border-radius: 24px;
    padding: 38px 32px 34px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 420px);
    gap: 34px;
    align-items: center;
    box-shadow: 0 24px 60px rgba(17, 24, 39, 0.06);
    overflow: hidden;
}

.cita-hero-v3-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.cita-status-pill {
    align-self: flex-start;
    min-height: 42px;
    padding: 0 18px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: 15px;
    font-weight: 780;
    letter-spacing: 0;
}

.cita-status-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.9;
}

.cita-hero-v3-paciente {
    display: flex;
    align-items: center;
    gap: 20px;
}

.cita-hero-v3-paciente .av {
    width: 76px;
    height: 76px;
    font-size: 23px;
    font-weight: 760;
}

.cita-hero-v3-paciente h1 {
    margin: 0;
    color: #0F2147;
    font-size: 46px;
    line-height: 1.04;
    font-weight: 760;
}

.cita-hero-v3-lead {
    margin: -4px 0 0 98px;
    max-width: 560px;
    color: #333B4C;
    font-size: 17px;
    line-height: 1.5;
    display: flex;
    flex-direction: column;
}

.cita-hero-v3-chips {
    display: grid;
    grid-template-columns: repeat(3, minmax(150px, 1fr));
    max-width: 660px;
    border: 1px solid rgba(17, 24, 39, 0.10);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.86);
    overflow: hidden;
}

.cita-hero-v3 .cita-info-chip {
    border: 0;
    border-radius: 0;
    background: transparent;
    padding: 18px 20px;
    min-width: 0;
}

.cita-hero-v3 .cita-info-chip + .cita-info-chip {
    border-left: 1px solid rgba(17, 24, 39, 0.08);
}

.cita-hero-v3 .cita-info-chip-stack strong {
    font-size: 13px;
    color: #111827;
}

.cita-hero-v3 .cita-info-chip-stack small {
    color: #374151;
    font-size: 12.5px;
}

.cita-hero-balance {
    max-width: 660px;
    min-height: 58px;
    border-radius: 10px;
    padding: 0 20px;
    display: flex;
    align-items: center;
    gap: 14px;
    text-decoration: none;
    background: #FFF7DF;
    color: #A16207;
    border: 1px solid #F6D993;
    font-size: 15px;
}

.cita-hero-balance strong {
    margin-left: auto;
    color: #7C3F00;
    font-size: 17px;
}

.cita-hero-v3-illustration {
    align-self: stretch;
    min-height: 330px;
    border-radius: 24px;
    overflow: hidden;
    background: #F0EDFF;
}

.cita-hero-v3-illustration img {
    width: 100%;
    height: 100%;
    min-height: 330px;
    object-fit: cover;
    display: block;
}

.chip-tone-amber,
.chip-tone-amber-oscuro { background: #FFF3C4; color: #A16207; }
.chip-tone-verde,
.chip-tone-verde-saturado { background: #DDF8E8; color: #087443; }
.chip-tone-azul { background: #DCEBFF; color: #155EEF; }
.chip-tone-violeta { background: #EFE7FF; color: #6D35F2; }
.chip-tone-teal { background: #DDF8EC; color: #047857; }
.chip-tone-naranja { background: #FFE7D8; color: #C2410C; }
.chip-tone-rojo,
.chip-tone-rojo-suave { background: #FFE4E6; color: #BE123C; }
.chip-tone-gris { background: #EEF1F5; color: #475467; }

.cita-quesigue {
    background: rgba(255, 255, 255, 0.74);
    border: 1px solid rgba(17, 24, 39, 0.08);
    border-radius: 14px;
    padding: 18px 22px 16px;
    gap: 14px;
    box-shadow: 0 12px 28px rgba(17, 24, 39, 0.04);
}

.cita-quesigue-head {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: flex-start;
}

.cita-quesigue-headline {
    margin: 0 0 4px;
    font-size: 17px;
    line-height: 1.2;
    color: #0F172A;
    font-weight: 600;
}

.cita-quesigue-descripcion {
    max-width: 680px;
    color: #475467;
    font-size: 13px;
    line-height: 1.5;
    margin: 0;
}

.cita-quesigue-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.cita-state-badge {
    min-height: 32px;
    padding: 0 12px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    font-weight: 740;
    white-space: nowrap;
}

.cita-state-badge.tone-green { background: #E5F7E9; color: #087443; }
.cita-state-badge.tone-blue { background: #E8F1FF; color: #155EEF; }
.cita-state-badge.tone-violet { background: #F1E9FF; color: #6D35F2; }
.cita-state-badge.tone-orange { background: #FFECE1; color: #C2410C; }
.cita-state-badge.tone-red { background: #FFE7EA; color: #BE123C; }
.cita-state-badge.tone-gray { background: #EEF1F5; color: #475467; }

.cita-quesigue-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: stretch;
}

.cita-quesigue-primary,
.cita-quesigue-secondary {
    min-height: 44px;
    border-radius: 10px;
    letter-spacing: 0;
}

/* ───── Primary "Qué sigue" · refactor 2026-05-08 (UX) ──────────────
   Antes: botón filled con var(--accent) sólido y texto blanco · se
   sentía agresivo y fuera del lenguaje del resto del sistema (btn-ghost
   y "Ver reportes" ya usaban white bg + borde sutil).

   Ahora: white bg + borde aqua del sistema + ink text + sombra suave.
   Replica el patrón del btn-ghost pero más prominente que un secondary
   gracias a:
     · Borde de mayor saturación (--accent en vez de --line)
     · Sombra elevada con tinte aqua
     · Padding mayor que las secondaries
     · Mismo color del icono que el texto (no muted)

   Las tone-* dejan de pintar el bg y solo cambian el color del borde
   y el texto · así un primary violeta (Pendiente de cierre) y un
   primary verde (Cita confirmada) leen distinto sin que ninguno grite. */
.cita-quesigue-primary {
    flex: 0 1 320px;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
    padding: 10px 18px;
    background: var(--surface, #FBFBF8);
    color: var(--ink, #14272B);
    border: 1px solid color-mix(in srgb, var(--accent) 38%, var(--line));
    box-shadow: 0 6px 14px rgba(45, 122, 140, 0.14);
}
.cita-quesigue-primary:hover {
    background: var(--surface, #FBFBF8);
    border-color: color-mix(in srgb, var(--accent) 56%, var(--line));
    color: var(--accent, #2D7A8C);
    box-shadow: 0 8px 18px rgba(45, 122, 140, 0.18);
}
.cita-quesigue-primary svg,
.cita-quesigue-primary .cita-quesigue-arrow {
    color: var(--accent, #2D7A8C);
}

/* Variantes por tono · ahora solo cambian el color del borde + arrow.
   El bg sigue siendo white para conservar el lenguaje uniforme y la
   jerarquía visual viene del borde tonal + la sombra. */
.cita-quesigue-primary.tone-violet {
    border-color: color-mix(in srgb, #7C3AED 38%, var(--line));
    box-shadow: 0 6px 14px rgba(124, 58, 237, 0.14);
}
.cita-quesigue-primary.tone-violet:hover {
    border-color: color-mix(in srgb, #7C3AED 56%, var(--line));
    color: #7C3AED;
    box-shadow: 0 8px 18px rgba(124, 58, 237, 0.18);
}
.cita-quesigue-primary.tone-violet svg,
.cita-quesigue-primary.tone-violet .cita-quesigue-arrow { color: #7C3AED; }

.cita-quesigue-primary.tone-green {
    border-color: color-mix(in srgb, #047857 38%, var(--line));
    box-shadow: 0 6px 14px rgba(4, 120, 87, 0.14);
}
.cita-quesigue-primary.tone-green:hover {
    border-color: color-mix(in srgb, #047857 56%, var(--line));
    color: #047857;
    box-shadow: 0 8px 18px rgba(4, 120, 87, 0.18);
}
.cita-quesigue-primary.tone-green svg,
.cita-quesigue-primary.tone-green .cita-quesigue-arrow { color: #047857; }

.cita-quesigue-primary.tone-amber {
    border-color: color-mix(in srgb, #B45309 38%, var(--line));
    box-shadow: 0 6px 14px rgba(180, 83, 9, 0.14);
}
.cita-quesigue-primary.tone-amber:hover {
    border-color: color-mix(in srgb, #B45309 56%, var(--line));
    color: #B45309;
    box-shadow: 0 8px 18px rgba(180, 83, 9, 0.18);
}
.cita-quesigue-primary.tone-amber svg,
.cita-quesigue-primary.tone-amber .cita-quesigue-arrow { color: #B45309; }

.cita-quesigue-primary.tone-red {
    border-color: color-mix(in srgb, #B42318 38%, var(--line));
    box-shadow: 0 6px 14px rgba(180, 35, 24, 0.14);
}
.cita-quesigue-primary.tone-red:hover {
    border-color: color-mix(in srgb, #B42318 56%, var(--line));
    color: #B42318;
    box-shadow: 0 8px 18px rgba(180, 35, 24, 0.18);
}
.cita-quesigue-primary.tone-red svg,
.cita-quesigue-primary.tone-red .cita-quesigue-arrow { color: #B42318; }

.cita-quesigue-primary.tone-gray {
    border-color: var(--line);
    color: var(--ink-2);
    box-shadow: 0 6px 14px rgba(17, 24, 39, 0.06);
}
.cita-quesigue-primary.tone-gray:hover {
    border-color: var(--ink-3);
    color: var(--ink);
}
.cita-quesigue-primary.tone-gray svg,
.cita-quesigue-primary.tone-gray .cita-quesigue-arrow { color: var(--muted); }

/* Tone-blue (azul oscuro · sesión en curso) · usa accent del sistema
   ya que el accent del tema es aqua-celeste, mismo lenguaje. */
.cita-quesigue-primary.tone-blue {
    border-color: color-mix(in srgb, #1D4ED8 38%, var(--line));
    box-shadow: 0 6px 14px rgba(29, 78, 216, 0.14);
}
.cita-quesigue-primary.tone-blue:hover {
    border-color: color-mix(in srgb, #1D4ED8 56%, var(--line));
    color: #1D4ED8;
    box-shadow: 0 8px 18px rgba(29, 78, 216, 0.18);
}
.cita-quesigue-primary.tone-blue svg,
.cita-quesigue-primary.tone-blue .cita-quesigue-arrow { color: #1D4ED8; }

.cita-quesigue-primary.tone-orange {
    border-color: color-mix(in srgb, #C2410C 38%, var(--line));
    box-shadow: 0 6px 14px rgba(194, 65, 12, 0.14);
}
.cita-quesigue-primary.tone-orange:hover {
    border-color: color-mix(in srgb, #C2410C 56%, var(--line));
    color: #C2410C;
    box-shadow: 0 8px 18px rgba(194, 65, 12, 0.18);
}
.cita-quesigue-primary.tone-orange svg,
.cita-quesigue-primary.tone-orange .cita-quesigue-arrow { color: #C2410C; }

.cita-quesigue-secondary {
    min-width: 0;
    justify-content: center;
    background: #fff;
    border: 1px solid rgba(17, 24, 39, 0.12);
    color: #111827;
    font-size: 13px;
    font-weight: 600;
    padding: 10px 14px;
    gap: 8px;
}
.cita-quesigue-secondary:hover {
    background: #F8FAFC;
}

.cita-quesigue-gestionar > summary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    min-height: 44px;
    font-size: 13px;
    font-weight: 600;
    color: #111827;
    background: #fff;
    border: 1px solid rgba(17, 24, 39, 0.12);
    border-radius: 10px;
    transition: background 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}
.cita-quesigue-gestionar > summary:hover {
    background: #F8FAFC;
    border-color: rgba(45, 122, 140, 0.32);
}
/* Focus accesible · aqua suave en vez del outline azul default del browser */
.cita-quesigue-gestionar > summary:focus,
.cita-quesigue-gestionar > summary:focus-visible {
    outline: none;
    border-color: var(--accent, #2D7A8C);
    box-shadow: 0 0 0 3px rgba(45, 122, 140, 0.18);
}
/* Cuando el dropdown está abierto, el summary toma el aqua del sistema
   para indicar conexión visual con el panel debajo · sin perder el botón */
.cita-quesigue-gestionar[open] > summary {
    background: var(--surface-2, #E5ECEB);
    border-color: var(--accent, #2D7A8C);
    color: var(--accent, #2D7A8C);
}
.cita-quesigue-gestionar[open] > summary:focus,
.cita-quesigue-gestionar[open] > summary:focus-visible {
    box-shadow: 0 0 0 3px rgba(45, 122, 140, 0.22);
}

/* .cita-quesigue-hint · sus estilos se definen una sola vez arriba (línea
   ~22553). El refactor 2026-05-08 lo movió al head y lo aligeró a un
   sublabel inline sin pill de fondo. La definición duplicada que vivía
   aquí se eliminó porque pintaba el hint como pill grande y peleaba
   con el nuevo estilo. */

.cita-action-menu-panel {
    min-width: 260px;
    right: 0;
}

.cita-menu-item {
    width: 100%;
    border: 0;
    background: transparent;
    text-align: left;
}

.cita-detalles-card,
.cita-actividad-card,
.cita-paciente-encuadre-card {
    background: rgba(255, 255, 255, 0.78);
    border-color: rgba(17, 24, 39, 0.09);
    box-shadow: 0 16px 38px rgba(17, 24, 39, 0.035);
}

.cita-card-more {
    margin-top: 18px;
    min-height: 44px;
    border: 1px solid rgba(17, 24, 39, 0.10);
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #5B21B6;
    text-decoration: none;
    font-weight: 760;
    font-size: 13.5px;
}

.cita-actividad-list > li.is-danger .cita-actividad-dot {
    border-color: #F04438;
    background: #FFF1F0;
    position: relative;
}

.cita-actividad-list > li.is-danger .cita-actividad-dot::after {
    content: '';
    position: absolute;
    display: block;
    width: 9px;
    height: 2px;
    background: #F04438;
    transform: rotate(45deg);
    box-shadow: 0 0 0 0 #F04438;
}

.cita-actividad-list > li.is-danger .cita-actividad-dot::before {
    content: '';
    position: absolute;
    display: block;
    width: 9px;
    height: 2px;
    background: #F04438;
    transform: rotate(-45deg);
}

.cita-actividad-list > li.is-pending .cita-actividad-dot {
    background: #fff;
    border-color: #E5E7EB;
}

.cita-actividad-list > li.is-pending .cita-actividad-copy strong {
    color: #667085;
}

.cita-paciente-encuadre-card {
    padding: 32px 36px;
    display: grid;
    grid-template-columns: minmax(360px, 430px) minmax(0, 1fr);
    column-gap: 42px;
    align-items: stretch;
}

.cita-paciente-pane {
    display: flex;
    gap: 22px;
    align-items: flex-start;
    align-self: stretch;
    padding-right: 36px;
    border-right: 1px solid rgba(17, 24, 39, 0.08);
}

.cita-paciente-pane .av {
    width: 76px;
    height: 76px;
    font-size: 22px;
}

.cita-paciente-meta {
    gap: 8px;
}

.cita-paciente-meta strong {
    font-size: 23px;
    color: #0F2147;
}

.cita-paciente-actions {
    margin-top: 8px;
    display: grid;
    gap: 10px;
    max-width: 260px;
}

.cita-paciente-actions .btn-ghost {
    min-height: 46px;
    justify-content: space-between;
    border-radius: 8px;
}

.cita-encuadre-pane .cita-card-head {
    margin-bottom: 18px;
}

.cita-encuadre-pane {
    min-width: 0;
}

.cita-detail-footer {
    border-top: 1px solid rgba(17, 24, 39, 0.08);
    min-height: 70px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #667085;
    font-size: 13px;
}

.cita-detail-footer span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.cita-detail-footer b {
    font-weight: 520;
    color: #475467;
}

@media (max-width: 1040px) {
    .cita-page .cita-hero {
        grid-template-columns: 1fr;
        min-height: 0;
    }
    .cita-page .cita-hero-illustration {
        display: none;
    }
}

@media (max-width: 980px) {
    .cita-page .cita-paciente-encuadre-card {
        grid-template-columns: 1fr;
        row-gap: 28px;
    }
    .cita-page .cita-paciente-pane {
        padding-right: 0;
        padding-bottom: 28px;
        border-right: 0;
        border-bottom: 1px solid rgba(17, 24, 39, 0.08);
    }
}

@media (max-width: 760px) {
    .cita-page {
        padding-bottom: 16px;
    }
    .cita-page > section.px-8,
    .cita-page > nav.px-8 {
        padding-left: 18px;
        padding-right: 18px;
    }
    .cita-page .cita-hero {
        padding: 22px 20px;
        border-radius: 16px;
    }
    .cita-page .cita-hero-name {
        align-items: flex-start;
        flex-direction: column;
        gap: 12px;
    }
    .cita-page .cita-hero-name h1 {
        font-size: 26px;
    }
    .cita-page .cita-hero-lead {
        font-size: 14px;
        max-width: 100%;
    }
    /* Chips: pasan a stack vertical, separados por línea sutil */
    .cita-page .cita-hero-chips {
        flex-direction: column;
        gap: 0;
    }
    .cita-page .cita-hero-chips .cita-info-chip {
        border-radius: 0;
        border: 0;
        border-bottom: 1px solid var(--line-soft, #E8ECEB);
        background: transparent;
        padding: 12px 0;
    }
    .cita-page .cita-hero-chips .cita-info-chip:last-child {
        border-bottom: 0;
    }
    /* Banner saldo full width */
    .cita-page .cita-hero-balance {
        flex-wrap: wrap;
    }
    /* Bloque "Qué sigue" · acciones stacked */
    .cita-page .cita-quesigue-actions {
        flex-direction: column;
        align-items: stretch;
    }
    .cita-page .cita-quesigue-primary,
    .cita-page .cita-quesigue-secondary,
    .cita-page .cita-quesigue-gestionar > summary {
        width: 100%;
        min-width: 0;
        flex: 1 1 auto;
    }
    /* Detalles + Actividad ya colapsa via .cita-twocol @ 900px */
    .cita-page .cita-paciente-encuadre-card {
        grid-template-columns: 1fr;
        padding: 24px 22px;
    }
    .cita-page .cita-paciente-pane {
        padding-right: 0;
        border-right: 0;
        border-bottom: 1px solid rgba(17, 24, 39, 0.08);
        padding-bottom: 24px;
    }
    .cita-detail-footer {
        align-items: flex-start;
        flex-direction: column;
        justify-content: center;
        gap: 10px;
    }
}

/* ════════════════════════════════════════════════════════════════════
   /cita/{id} · hero clínico con ilustración
   (excepción al patrón module-header austero · esta página es la más
   importante del flujo del psi y merece más rica jerarquía visual)
   ════════════════════════════════════════════════════════════════════ */

/* Breadcrumb sutil arriba del hero */
.cita-page .cita-breadcrumb {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    line-height: 1.4;
    font-weight: 500;
    color: var(--muted, #6B7B7E);
    margin-bottom: 6px;
}
.cita-page .cita-breadcrumb a {
    color: var(--muted, #6B7B7E);
    text-decoration: none;
    transition: color 120ms ease;
}
.cita-page .cita-breadcrumb a:hover {
    color: var(--ink, #14272B);
}
.cita-page .cita-breadcrumb svg {
    color: var(--line, #D6DEDC);
    flex-shrink: 0;
}

/* ───── module-header de /cita · mismo lenguaje que /pacientes ─────
   Sin card, sin borde, sin stripes colorizados, sin ilustración.
   El title-row tiene avatar+H1 (clickeable, link a la ficha) + pill al lado.
   El breadcrumb va DEBAJO del título (estilo Notion) como navegación
   secundaria muted. El subtítulo une la descripción + siguiente paso.
   La identidad visual del estado vive solo en el chip pill.
*/
.cita-page .cita-module-header {
    padding-top: 8px;
    padding-bottom: 18px;
}
.cita-page .cita-module-header .module-header-row {
    align-items: center;
}
.cita-page .cita-module-titleblock {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

/* ───── Avatar+nombre del paciente como link a su ficha ──────────────
   Antes había un botón "Ver paciente" suelto arriba a la derecha que
   duplicaba el link del breadcrumb y dejaba la fila del título mal
   balanceada (botón huérfano frente a un titleblock de 3 niveles).

   Ahora el avatar vive a la izquierda del H1 y el conjunto entero es
   el link a la ficha. Hover discreto · no debe sentirse como un botón,
   solo como "este nombre lleva al paciente". */
.cita-page .cita-patient-link {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: inherit;
    border-radius: 12px;
    padding: 4px 8px 4px 4px;
    margin-left: -4px;
    transition: background 140ms ease;
    min-width: 0;
}
.cita-page .cita-patient-link:hover {
    background: var(--surface-2, #EEF1EF);
}
.cita-page .cita-patient-link:hover .module-h1 {
    color: var(--accent, #2D7A8C);
}
.cita-page .cita-patient-link:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(45, 122, 140, 0.18);
}
.cita-page .cita-patient-link .module-h1 {
    transition: color 140ms ease;
    margin: 0;
}
.cita-page .cita-patient-avatar {
    width: 38px;
    height: 38px;
    font-size: 13.5px;
    flex-shrink: 0;
}

/* Breadcrumb DEBAJO del título · pequeño, muted, separadores con · */
.cita-page .cita-breadcrumb-below {
    font-size: 12.5px;
    color: var(--muted, #6B7B7E);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}
.cita-page .cita-breadcrumb-below a {
    color: var(--muted, #6B7B7E);
    text-decoration: none;
    transition: color 120ms ease;
}
.cita-page .cita-breadcrumb-below a:hover {
    color: var(--ink, #14272B);
}
.cita-page .cita-breadcrumb-below span[aria-hidden="true"] {
    color: var(--line, #D6DEDC);
}

/* Subtítulo · descripcion del estado + siguiente paso (más fuerte) */
.cita-page .cita-subtitle-next {
    color: var(--ink-2, #2C4145);
    font-weight: 500;
}

/* Strip horizontal: chips fecha · modalidad · tarifa
   Debajo del title-row · idéntico estilo a las pat-chipbar de /pacientes */
.cita-page .cita-info-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

/* ───── Banner saldo pendiente · refactor 2026-05-08 (UX) ──────────────
   Antes vivía como bloque suelto debajo del strip de chips, separado
   con margin-top: 12px · se sentía flotando.

   Ahora es un chip más DENTRO del strip · misma altura y padding que
   los demás cita-info-chip, así comparte línea base y el strip wraps
   limpiamente. La diferenciación visual viene del color (warn ámbar
   o accent aqua según tono), no de su posición separada. */
.cita-page .cita-balance-banner {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border: 1px solid transparent;
    border-radius: 10px;
    text-decoration: none;
    font-size: 12.5px;
    line-height: 1.25;
    transition: filter 120ms ease, border-color 120ms ease;
    max-width: 100%;
}
.cita-page .cita-balance-banner.tone-warn {
    background: var(--warn-soft, #FEF3C7);
    border-color: color-mix(in srgb, #B45309 18%, transparent);
    color: #92400E;
}
.cita-page .cita-balance-banner.tone-accent {
    background: color-mix(in srgb, var(--accent-soft) 64%, transparent);
    border-color: color-mix(in srgb, var(--accent) 18%, transparent);
    color: color-mix(in srgb, var(--accent) 88%, var(--ink));
}
.cita-page .cita-balance-banner:hover {
    filter: brightness(0.97);
}
.cita-page .cita-balance-banner strong {
    margin-left: 4px;
    font-weight: 600;
    font-size: 13px;
    color: inherit;
}
.cita-page .cita-balance-banner svg {
    flex-shrink: 0;
}

@media (max-width: 760px) {
    .cita-page .cita-module-titleblock {
        gap: 4px;
    }
    .cita-page .cita-info-strip {
        flex-direction: column;
        gap: 0;
    }
    .cita-page .cita-info-strip .cita-info-chip {
        border-radius: 0;
        border: 0;
        border-bottom: 1px solid var(--line-soft, #E8ECEB);
        background: transparent;
        padding: 12px 0;
    }
    .cita-page .cita-info-strip .cita-info-chip:last-child {
        border-bottom: 0;
    }
}

/* ===== Reserva publica · servicios escalables, correccion visual ==========
   Mantiene el lenguaje aprobado: perfil editorial arriba, consulta como
   bloque compacto y modalidades claras. */
@media (min-width: 861px) {
    .public-booking-shell {
        width: min(1180px, 100%);
    }
    .public-booking-hero {
        padding: 30px clamp(28px, 3.8vw, 44px) 34px;
    }
    .public-booking-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 14px 16px;
        padding-top: 24px;
    }
    .public-summary-head,
    .public-service-section,
    .public-summary-choice,
    .public-summary-error,
    .public-summary-whatsapp {
        grid-column: 1 / -1;
    }
    .public-summary-head {
        align-items: end;
        margin-bottom: 2px;
    }
    .public-summary-title {
        gap: 6px;
    }
    .public-summary-head span#publicModalityTitle {
        font-size: 13px;
        letter-spacing: .12em;
    }
    .public-service-section {
        padding: 14px;
        border: 1px solid color-mix(in srgb, var(--accent) 14%, var(--line));
        border-radius: 16px;
        background: color-mix(in srgb, var(--surface-2) 48%, var(--surface));
    }
    .public-service-tabs {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    }
    .public-service-tab {
        min-height: 48px;
        padding: 10px 13px;
        font-size: 13px;
        line-height: 1.18;
    }
    .public-service-desc {
        min-height: 0;
        padding: 10px 12px;
        font-size: 13px;
        background: color-mix(in srgb, var(--surface) 92%, white);
    }
    .public-booking-summary .public-price-card {
        min-height: 92px;
        grid-template-columns: auto auto minmax(0, 1fr);
        gap: 14px;
        padding: 16px 18px;
    }
    .public-booking-summary.has-one-modality .public-price-card:not([hidden]) {
        grid-column: 1 / -1;
    }
    .public-booking-summary .public-price-card > svg {
        display: inline-grid;
    }
    .public-price-copy strong {
        display: inline;
        margin-right: 6px;
        font-size: 18px;
        line-height: 1.05;
    }
    .public-price-copy b {
        display: inline;
        font-size: 17px;
    }
    .public-price-copy small {
        display: block;
        margin-top: 5px;
        font-size: 13px;
    }
    .public-summary-choice {
        margin: 0;
        font-size: 14px;
        line-height: 1.35;
    }
    .public-summary-whatsapp {
        min-height: 68px;
        margin-top: 0;
    }
}

@media (max-width: 860px) {
    .public-booking-summary {
        grid-template-columns: 1fr !important;
    }
    .public-summary-head,
    .public-service-section,
    .public-summary-choice,
    .public-summary-error,
    .public-summary-whatsapp,
    .public-booking-summary .public-price-card {
        grid-column: 1 / -1;
    }
    .public-service-tabs {
        display: flex;
        overflow-x: auto;
        padding-bottom: 4px;
    }
    .public-service-tab {
        flex: 0 0 152px;
    }
}

/* ==========================================================================
   ===== RESERVA PÚBLICA · V3 PROLIJO (refinamiento senior) =================
   ==========================================================================
   Sobrescribe los estilos base de .public-booking con detalles materiales:
   tipografía variable Fraunces+Inter Tight, elevación en capas (sombra
   ambiental + key light + hairline 0.5px), tracking óptico, números tabulares,
   focus rings de 4px tipo iOS, micro-elevación en hover y pulse en dot.
   No toca selectores fuera de .public-booking — el resto del app intacto.
   Source order: este bloque va al final, gana por orden sin !important.
   ========================================================================== */

.public-booking {
    /* Tokens scoped al booking público */
    --pb-line-soft: rgba(20,39,43,.06);
    --pb-line:      rgba(20,39,43,.10);
    --pb-line-strong: rgba(20,39,43,.16);
    --pb-paper-warm: color-mix(in srgb, var(--surface) 96%, var(--bg));
    --pb-elev-1: 0 1px 2px rgba(20,39,43,.04), 0 0 0 0.5px rgba(20,39,43,.04);
    --pb-elev-2: 0 1px 2px rgba(20,39,43,.04), 0 4px 12px rgba(20,39,43,.04), 0 0 0 0.5px rgba(20,39,43,.05);
    --pb-elev-3: 0 1px 2px rgba(20,39,43,.05), 0 8px 24px rgba(20,39,43,.06), 0 0 0 0.5px rgba(20,39,43,.06);
    --pb-elev-pop: 0 2px 6px rgba(20,39,43,.06), 0 16px 40px rgba(20,39,43,.08);
    /* Fondo: gradiente radial sage suave + base limpia */
    background:
        radial-gradient(60% 50% at 14% 12%,
            color-mix(in srgb, var(--accent-soft) 42%, transparent) 0,
            transparent 70%),
        linear-gradient(180deg, var(--bg) 0%, var(--surface) 100%);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.public-booking .serif {
    font-family: 'Fraunces', 'Times New Roman', serif;
    font-weight: 400;
    font-variation-settings: 'opsz' 96;
    letter-spacing: -0.018em;
}

/* ===== Hero / cards · elevación material + padding consistente =====
   Ambos contenedores comparten exactamente el mismo padding horizontal
   responsive · garantiza que los pasos 1 / 2 / 3 alinean a la misma columna
   visual sin importar el viewport. */
.public-booking .public-booking-hero,
.public-booking .public-booking-card {
    border: 0;
    border-radius: 20px;
    background: var(--surface);
    box-shadow: var(--pb-elev-2);
    padding: 24px;
}
@media (min-width: 861px) {
    .public-booking .public-booking-hero,
    .public-booking .public-booking-card {
        padding: 30px clamp(28px, 3.8vw, 44px) 34px !important;
    }
}
@media (max-width: 860px) {
    .public-booking .public-booking-hero,
    .public-booking .public-booking-card {
        padding: 22px 18px !important;
    }
}

/* ===== Branding ===== */
.public-booking .public-brand .serif {
    font-family: 'Fraunces', serif;
    font-weight: 500;
    font-size: 18px;
    letter-spacing: -0.005em;
    color: var(--accent-hover);
}

/* ===== Profile · grid 2 columnas (avatar | copy) =====
   FIX: la regla responsive (línea ~14470) define grid-template-columns pero
   nunca activa display:grid · de ahí que el perfil se viera apilado en
   desktop. Forzamos display:grid con 2 columnas (auto | 1fr). */
.public-booking .public-booking-profile {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    gap: 22px !important;
    align-items: start !important;
}
@media (min-width: 861px) {
    .public-booking .public-booking-profile {
        grid-template-columns: 132px minmax(0, 1fr) !important;
        gap: 28px !important;
    }
    .public-booking .public-booking-profile .av-lg,
    .public-booking .public-booking-profile .avatar-photo.av-lg {
        width: 132px !important;
        height: 132px !important;
    }
}
@media (max-width: 540px) {
    .public-booking .public-booking-profile {
        grid-template-columns: 1fr !important;
        justify-items: start;
        gap: 14px !important;
    }
}

/* ===== Profile · tipografía display refinada ===== */
.public-booking .public-kicker {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 11px;
    letter-spacing: 0.16em;
    color: var(--accent-hover);
    display: flex;
    align-items: center;
    gap: 10px;
}
.public-booking .public-kicker::before {
    content: '';
    width: 18px; height: 1px;
    background: var(--accent);
}
.public-booking .public-booking-profile h1 {
    font-family: 'Fraunces', serif;
    font-weight: 400;
    font-variation-settings: 'opsz' 144;
    font-size: 36px;
    line-height: 1.05;
    letter-spacing: -0.022em;
    margin: 10px 0 14px;
}
@media (min-width: 1024px) {
    .public-booking .public-booking-profile h1 { font-size: 42px; }
}

/* Avatar · anillo de papel + elevación */
.public-booking .avatar-photo.av-lg,
.public-booking .av.av-lg.av-2 {
    background: linear-gradient(135deg, var(--surface), var(--accent-soft));
    padding: 3px;
    border-radius: 50%;
    border: 0;
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.6),
        0 1px 2px rgba(20,39,43,.06),
        0 8px 24px rgba(20,39,43,.08);
}

/* Credencial · pill con punto teal */
.public-booking .public-credential {
    background: var(--surface);
    border: 0;
    box-shadow: inset 0 0 0 0.5px var(--pb-line);
    color: var(--ink-2);
    font-family: 'Inter Tight', 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.04em;
    font-variant-numeric: tabular-nums;
    padding: 5px 12px 5px 9px;
    gap: 6px;
}
.public-booking .public-credential::before {
    content: '';
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--accent);
    flex-shrink: 0;
}

/* Specialty chips · sage 100 plano */
.public-booking .public-specialty-chips > span {
    background: color-mix(in srgb, var(--accent-soft) 80%, var(--surface));
    color: var(--accent-hover);
    font-size: 12px;
    font-weight: 500;
    padding: 5px 11px;
    border-radius: 999px;
    border: 0;
    letter-spacing: -0.005em;
}

/* Bio · más legible */
.public-booking .public-booking-bio {
    margin-top: 16px;
}
.public-booking .public-booking-bio span {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin-bottom: 10px;
}
.public-booking .public-booking-bio p {
    font-size: 15.3px;
    line-height: 1.6;
    color: var(--ink-2);
}

/* ===== Booking summary · tarjeta con stripe de marca ===== */
.public-booking .public-booking-summary {
    position: relative;
    border-radius: 18px;
    background: var(--surface);
    box-shadow: var(--pb-elev-3);
    padding: 22px;
    overflow: hidden;
}
.public-booking .public-booking-summary::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg,
        var(--accent-hover) 0%,
        var(--accent) 50%,
        var(--accent-soft) 100%);
}

/* Summary head · badge + título */
.public-booking .public-summary-head {
    align-items: center;
    padding-bottom: 14px;
    margin-bottom: 16px;
    border-bottom: 0.5px solid var(--pb-line-soft);
    gap: 12px;
}
/* Badge + título · MISMO formato que pasos 2 y 3 (círculo + serif title) */
.public-booking .public-summary-title {
    min-width: 0;
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    gap: 14px;
}
.public-booking .step-badge {
    /* Círculo perfecto · width y height bloqueados con min/max para evitar
       que el flex container lo estire horizontalmente. */
    width: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;
    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
    aspect-ratio: 1 / 1;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    gap: 0 !important;
    background: var(--accent-hover) !important;
    color: white !important;
    font-family: 'Fraunces', serif !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    font-variant-numeric: tabular-nums;
    flex: 0 0 32px !important;
    flex-shrink: 0;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.12),
        0 1px 2px color-mix(in srgb, var(--accent-hover) 50%, transparent) !important;
}
.public-booking .public-summary-head h2#publicModalityTitle,
.public-booking #publicModalityTitle {
    font-family: 'Fraunces', serif !important;
    font-weight: 500 !important;
    font-variation-settings: 'opsz' 96;
    font-size: 22px !important;
    line-height: 1.1 !important;
    letter-spacing: -0.018em !important;
    color: var(--ink) !important;
    text-transform: none !important;
    margin: 0 !important;
}
.public-booking .public-summary-head strong {
    font-family: 'Inter Tight', 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 500;
    color: var(--ink-2);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
    flex-shrink: 0;
    white-space: nowrap;
    align-self: flex-start;
    margin-top: 2px;
}

/* ===== Service tabs · segmented control material ===== */
/* Anula el envoltorio pesado (border + sage bg) que viene de la regla
   responsive `.public-service-section` en el bloque previo. La sección queda
   limpia y el segmented control se autocontiene. */
.public-booking .public-service-section,
.public-booking .public-booking-summary .public-service-section {
    border: 0 !important;
    background: transparent !important;
    padding: 0;
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 0.5px solid var(--pb-line-soft) !important;
    border-radius: 0;
    display: grid;
    gap: 10px;
}
.public-booking .public-service-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}
.public-booking .public-service-label {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-3);
}
.public-booking .public-service-count {
    font-family: 'Inter Tight', 'Inter', sans-serif;
    font-size: 11px;
    color: var(--ink-3);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
}

/* Track del segmented control · paper-warm con hairline interior */
.public-booking .public-service-tabs,
.public-booking .public-booking-summary .public-service-tabs {
    display: flex !important;
    grid-template-columns: none !important;
    gap: 4px !important;
    background: var(--pb-paper-warm);
    border-radius: 12px;
    padding: 4px;
    box-shadow: inset 0 0 0 0.5px var(--pb-line);
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
}
.public-booking .public-service-tabs::-webkit-scrollbar { display: none; }
/* FIX · cuando hay 8+ servicios el JS oculta el contenedor de tabs y muestra
   el combo dropdown · sin este override, el `display: flex !important` de
   arriba sobreescribía el `[hidden] { display:none }` y dejaba un pill vacío
   visible bajo el header "TIPO DE CONSULTA". */
.public-booking .public-service-tabs[hidden] {
    display: none !important;
}

/* Tab individual · ancho por contenido, nunca wrap */
.public-booking .public-service-tab,
.public-booking .public-service-tabs .public-service-tab {
    flex: 0 0 auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    width: auto;
    border: 0 !important;
    background: transparent !important;
    border-radius: 9px !important;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.2;
    color: var(--ink-2);
    padding: 9px 14px !important;
    cursor: pointer;
    transition: all 180ms ease;
    text-align: center;
    white-space: nowrap;
    box-shadow: none;
    text-transform: none;
    letter-spacing: 0;
}
.public-booking .public-service-tab:hover {
    color: var(--accent-hover);
    background: color-mix(in srgb, var(--accent-soft) 28%, var(--surface)) !important;
    border-color: transparent;
}
/* Estado activo · mismo lenguaje visual que .public-price-card.is-active:
   sage-soft tint + hairline accent · el halo exterior 4px del price-card
   queda recortado por el `overflow:auto` del rail, así que aquí lo
   reemplazamos por un inset 2px (efecto similar sin clipping). */
.public-booking .public-service-tab.is-active,
.public-booking .public-service-tab[aria-selected="true"] {
    background: color-mix(in srgb, var(--accent-soft) 32%, var(--surface)) !important;
    color: var(--accent-hover) !important;
    border-color: transparent !important;
    font-weight: 550 !important;
    box-shadow:
        inset 0 0 0 1px var(--accent),
        inset 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent) !important;
}
.public-booking .public-service-tab.is-active:hover,
.public-booking .public-service-tab[aria-selected="true"]:hover {
    background: color-mix(in srgb, var(--accent-soft) 44%, var(--surface)) !important;
    color: var(--accent-hover) !important;
}
.public-booking .public-service-tab:focus-visible {
    outline: 0;
    box-shadow:
        inset 0 0 0 0.5px var(--accent),
        0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent) !important;
}

/* Descripción · sage 25 limpio sin border */
.public-booking .public-service-desc,
.public-booking .public-booking-summary .public-service-desc {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.55;
    color: var(--ink-2);
    background: color-mix(in srgb, var(--accent-soft) 26%, var(--surface)) !important;
    border: 0 !important;
    border-radius: 10px !important;
    padding: 10px 14px !important;
    margin: 0;
    min-height: 0;
}

/* ===== Modality price card · ring 4px en activo ===== */
.public-booking .public-booking-summary .public-price-card {
    background: var(--surface);
    border: 0;
    border-radius: 12px;
    padding: 12px 14px;
    box-shadow: inset 0 0 0 0.5px var(--pb-line);
    transition: box-shadow 180ms ease, background 180ms ease;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    text-align: left;
    margin-bottom: 8px;
    position: relative;
}
.public-booking .public-booking-summary .public-price-card:hover {
    box-shadow: inset 0 0 0 0.5px color-mix(in srgb, var(--accent) 38%, var(--pb-line));
}
.public-booking .public-booking-summary .public-price-card.is-active {
    background: color-mix(in srgb, var(--accent-soft) 24%, var(--surface));
    box-shadow:
        inset 0 0 0 1px var(--accent),
        0 0 0 4px color-mix(in srgb, var(--accent) 8%, transparent);
}

/* Radio check · iOS-style outer ring + centered dot
   IMPORTANTE: anula el checkmark (border-left + border-bottom rotado) que viene
   del CSS base, y reemplaza por un punto centrado limpio. */
.public-booking .public-price-check {
    width: 18px !important;
    height: 18px !important;
    border-radius: 50% !important;
    border: 0 !important;
    background: var(--surface) !important;
    box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ink) 22%, var(--line)) !important;
    flex-shrink: 0;
    display: inline-block !important;
    position: relative;
    transition: box-shadow 180ms ease;
    place-items: unset;
}
.public-booking .public-price-card.is-active .public-price-check {
    background: var(--surface) !important;
    border: 0 !important;
    box-shadow: inset 0 0 0 1.5px var(--accent) !important;
}
.public-booking .public-price-card.is-active .public-price-check::after,
.public-booking .public-price-check::after {
    /* Reset total del checkmark heredado · forzamos punto circular centrado */
    content: '' !important;
    width: auto !important;
    height: auto !important;
    border: 0 !important;
    border-left: 0 !important;
    border-bottom: 0 !important;
    transform: none !important;
    position: absolute !important;
    inset: 4px !important;
    background: transparent !important;
    border-radius: 50% !important;
    transition: background 180ms ease;
}
.public-booking .public-price-card.is-active .public-price-check::after {
    background: var(--accent) !important;
}

/* Modality icon bubble · sage circular */
.public-booking .public-booking-summary .public-price-card > svg {
    width: 32px; height: 32px;
    padding: 8px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--accent-soft) 50%, var(--surface));
    color: var(--accent-hover);
    flex-shrink: 0;
}

/* Modality copy · números tabulares */
.public-booking .public-price-copy {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.public-booking .public-price-copy strong {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
    line-height: 1.3;
}
.public-booking .public-price-copy b {
    font-size: 13px;
    font-weight: 500;
    color: var(--ink-2);
    line-height: 1.35;
}
.public-booking .public-price-copy small {
    font-size: 11px;
    color: var(--ink-3);
    margin-top: 2px;
}

/* Selected pill · solo visible en activo */
.public-booking .public-selected-pill {
    display: none;
    font-size: 9.5px;
    font-weight: 600;
    color: var(--accent-hover);
    background: color-mix(in srgb, var(--accent-soft) 80%, var(--surface));
    padding: 3px 8px;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    align-self: center;
}
.public-booking .public-price-card.is-active .public-selected-pill {
    display: inline-flex;
}

/* Summary choice */
.public-booking .public-summary-choice {
    text-align: center;
    font-size: 12px;
    color: var(--ink-3);
    margin-top: 12px;
    padding-top: 12px;
    border-top: 0.5px solid var(--pb-line-soft);
}

/* WhatsApp · burbuja material */
.public-booking .public-summary-whatsapp {
    background: color-mix(in srgb, var(--accent-soft) 25%, var(--surface));
    border-radius: 12px;
    padding: 12px;
    margin-top: 14px;
    border: 0;
}
.public-booking .public-summary-whatsapp svg {
    width: 28px; height: 28px;
    padding: 6px;
    background: var(--surface);
    border-radius: 50%;
    color: var(--accent-hover);
    box-shadow: var(--pb-elev-1);
    flex-shrink: 0;
}
.public-booking .public-summary-whatsapp strong {
    font-size: 12px;
    font-weight: 500;
    color: var(--ink);
}
.public-booking .public-summary-whatsapp small {
    font-size: 11px;
    color: var(--ink-3);
}

/* ===== Step (paso 2 + 3) ===== */
.public-booking .public-step-number {
    background: var(--accent-hover);
    color: white;
    width: 32px; height: 32px;
    border-radius: 50%;
    border: 0;
    font-family: 'Fraunces', serif;
    font-size: 14px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.12),
        0 1px 2px color-mix(in srgb, var(--accent-hover) 50%, transparent);
}
.public-booking .public-step h2 {
    font-family: 'Fraunces', serif;
    font-weight: 400;
    font-variation-settings: 'opsz' 96;
    font-size: 26px;
    line-height: 1.1;
    letter-spacing: -0.018em;
}
.public-booking .public-step-second {
    border-top: 0.5px solid var(--pb-line-soft);
    margin-top: 32px;
    padding-top: 28px;
}

/* ===== Inputs · focus ring 4px iOS-style ===== */
.public-booking .input,
.public-booking .input-with-prefix {
    background: var(--pb-paper-warm);
    border: 0;
    border-radius: 12px;
    box-shadow: inset 0 0 0 0.5px var(--pb-line);
    height: 44px;
    transition: box-shadow 180ms ease, background 180ms ease;
    font-family: 'Inter', sans-serif;
}
.public-booking .input:focus {
    outline: 0;
    background: var(--surface);
    box-shadow:
        inset 0 0 0 1px var(--accent),
        0 0 0 4px color-mix(in srgb, var(--accent) 10%, transparent);
}
.public-booking .input-with-prefix:focus-within {
    background: var(--surface);
    box-shadow:
        inset 0 0 0 1px var(--accent),
        0 0 0 4px color-mix(in srgb, var(--accent) 10%, transparent);
}
.public-booking .input-with-prefix > span {
    border-right: 0.5px solid var(--pb-line-soft);
    padding-right: 8px;
    margin-right: 10px;
    color: var(--ink-3);
    font-variant-numeric: tabular-nums;
    font-weight: 500;
}
.public-booking .input.mono {
    font-family: 'JetBrains Mono', monospace;
    font-variant-numeric: tabular-nums;
}

.public-booking .field-label {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 500;
    color: var(--ink-2);
    letter-spacing: 0;
    text-transform: none;
}

.public-booking .public-field .input,
.public-booking .public-field .input-with-prefix {
    box-sizing: border-box;
    background: #FFFFFF;
    border: 1px solid #E5EAF0;
    border-radius: 20px;
    box-shadow: none;
    transition: border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.public-booking .public-field .input:focus,
.public-booking .public-field .input:focus-visible,
.public-booking .public-field .input-with-prefix:focus-within {
    background: #FFFFFF;
    border-color: color-mix(in srgb, var(--accent) 38%, #E5EAF0);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 10%, transparent);
}

.public-booking .public-field.has-error .input,
.public-booking .public-field.has-error .input-with-prefix {
    background: #FFFFFF;
    border-color: #DCCBC7;
    box-shadow: none;
}

.public-booking .public-field.has-error .input:focus,
.public-booking .public-field.has-error .input:focus-visible,
.public-booking .public-field.has-error .input-with-prefix:focus-within {
    background: #FFFFFF;
    border-color: color-mix(in srgb, var(--accent) 38%, #DCCBC7);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 10%, transparent);
}

.public-booking .field-msg {
    margin-top: 6px;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
}

.public-booking .public-consent-wrap .field-msg {
    margin-top: 8px;
    padding-left: 0;
    font-size: 13px;
    color: #A58A86;
}

.public-booking .public-email-hint {
    margin-top: 6px;
    color: #7B8794;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
}

.public-booking .public-details .public-form-grid {
    gap: 17px 14px;
}

.public-booking .public-details .field-label {
    margin-bottom: 7px;
    color: color-mix(in srgb, var(--ink-2) 78%, var(--muted));
    font-size: 11.5px;
    font-weight: 650;
    letter-spacing: .02em;
}

.public-booking .public-details .public-field .input,
.public-booking .public-details .public-field .input-with-prefix {
    min-height: 54px;
    border-radius: 18px;
}

.public-booking .public-details .public-field .input {
    padding: 0 16px;
}

.public-booking .public-details .public-field .input-with-prefix input {
    min-height: 52px;
    padding: 0 16px;
    font-size: 14.5px;
}

.public-booking .public-details .public-field .input::placeholder,
.public-booking .public-details .public-field .input-with-prefix input::placeholder {
    color: color-mix(in srgb, var(--muted) 78%, var(--ink-3));
}

.public-booking .public-field-hint {
    margin: 7px 0 0;
    color: #7B8794;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.38;
}

.public-booking .public-confirm-summary {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 14px;
    margin: 18px 0 24px;
    padding: 15px 17px;
    border: 1px solid color-mix(in srgb, var(--accent) 8%, #E5EAF0);
    border-radius: 18px;
    background: color-mix(in srgb, var(--accent-soft) 4%, #FFFFFF);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.72);
}

.public-booking .public-confirm-summary[hidden] {
    display: none !important;
}

.public-booking .public-confirm-summary-icon {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: color-mix(in srgb, var(--accent-hover) 54%, var(--ink-3));
    flex: 0 0 auto;
}

.public-booking .public-confirm-summary-copy {
    min-width: 0;
    display: grid;
    gap: 5px;
}

.public-booking .public-confirm-summary-head {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex-wrap: wrap;
}

.public-booking .public-confirm-summary-kicker {
    color: color-mix(in srgb, var(--ink-3) 86%, var(--muted));
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .11em;
    line-height: 1.2;
    text-transform: uppercase;
}

.public-booking .public-confirm-summary-rel {
    display: inline-flex;
    align-items: center;
    min-height: 19px;
    padding: 2px 7px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent-soft) 18%, #FFFFFF);
    color: color-mix(in srgb, var(--accent-hover) 42%, var(--ink-3));
    font-size: 10.5px;
    font-weight: 600;
    line-height: 1.2;
}

.public-booking .public-confirm-summary strong {
    min-width: 0;
    color: var(--ink);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.18;
    letter-spacing: -.015em;
}

.public-booking .public-confirm-summary small {
    color: #7B8794;
    font-size: 14.5px;
    font-weight: 500;
    line-height: 1.35;
}

@media (max-width: 520px) {
    .public-booking .public-confirm-summary {
        gap: 12px;
        margin-bottom: 22px;
        padding: 14px 14px;
    }
    .public-booking .public-confirm-summary-icon {
        width: 36px;
        height: 36px;
    }
    .public-booking .public-confirm-summary-icon svg {
        width: 22px;
        height: 22px;
    }
    .public-booking .public-confirm-summary strong {
        font-size: 16px;
    }
    .public-booking .public-confirm-summary small {
        font-size: 13.5px;
    }
}

.public-booking .public-confirm-trust {
    margin: 9px 0 0;
    color: #7B8794;
    font-size: 12.5px;
    line-height: 1.4;
    text-align: center;
}

/* ===== Date trigger ===== */
.public-booking .date-trigger.public-date-trigger {
    height: 44px;
    background: var(--pb-paper-warm);
    border: 0;
    border-radius: 12px;
    box-shadow: inset 0 0 0 0.5px var(--pb-line);
    color: var(--ink);
    font-family: 'Inter', sans-serif;
    transition: box-shadow 180ms ease;
}
.public-booking .date-trigger.public-date-trigger:hover {
    box-shadow: inset 0 0 0 0.5px color-mix(in srgb, var(--accent) 30%, var(--pb-line));
}
.public-booking .date-trigger.public-date-trigger > svg:first-of-type {
    color: var(--accent-hover);
}
.public-booking .date-trigger .date-text {
    font-weight: 500;
    color: var(--ink);
}
.public-booking .date-trigger .date-relative {
    background: color-mix(in srgb, var(--accent-soft) 50%, var(--surface));
    color: var(--accent-hover);
    border-radius: 999px;
    padding: 3px 9px;
    font-size: 11px;
    font-weight: 500;
}

/* ===== Date popover · pop elevation ===== */
.public-booking .date-popover.public-date-popover {
    background: var(--surface);
    border: 0;
    border-radius: 14px;
    box-shadow: var(--pb-elev-pop);
    padding: 16px;
}
.public-booking .date-pop-title {
    font-family: 'Fraunces', serif;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: -0.005em;
    color: var(--ink);
}
.public-booking .date-pop-nav {
    width: 30px; height: 30px;
    border-radius: 50%;
    border: 0;
    background: transparent;
    color: var(--ink-2);
    transition: background 180ms ease, color 180ms ease;
}
.public-booking .date-pop-nav:hover {
    background: color-mix(in srgb, var(--accent-soft) 50%, var(--surface));
    color: var(--accent-hover);
}
.public-booking .date-dow {
    font-family: 'Inter', sans-serif;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ink-3);
}
.public-booking .date-cell {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    border-radius: 6px;
    color: var(--ink-2);
    font-variant-numeric: tabular-nums;
    transition: background 120ms ease, color 120ms ease;
}
.public-booking .date-cell:hover:not(.disabled):not(.dim) {
    background: color-mix(in srgb, var(--accent-soft) 50%, var(--surface));
    color: var(--accent-hover);
}
.public-booking .date-cell.today {
    color: var(--accent-hover);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent);
}
.public-booking .date-cell.selected {
    background: var(--accent-hover);
    color: white;
    box-shadow: 0 1px 2px color-mix(in srgb, var(--accent-hover) 40%, transparent);
}
.public-booking .date-cell.recommended:not(.selected) {
    color: var(--accent-hover);
    font-weight: 500;
}
.public-booking .date-cell.recommended:not(.selected)::after {
    content: '';
    position: absolute;
    bottom: 4px; left: 50%;
    transform: translateX(-50%);
    width: 3px; height: 3px;
    border-radius: 50%;
    background: var(--accent);
}

/* ===== Slots · números tabulares + active material ===== */
.public-booking .public-slot {
    background: var(--surface);
    border: 0;
    border-radius: 10px;
    box-shadow: inset 0 0 0 0.5px var(--pb-line);
    padding: 8px 14px;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    transition: all 180ms ease;
}
.public-booking .public-slot:hover {
    background: color-mix(in srgb, var(--accent-soft) 35%, var(--surface));
    box-shadow: inset 0 0 0 0.5px color-mix(in srgb, var(--accent) 36%, var(--pb-line));
}
.public-booking .public-slot.selected {
    background: var(--accent-hover);
    color: white;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.10),
        0 1px 2px rgba(20,39,43,.10),
        0 0 0 4px color-mix(in srgb, var(--accent) 14%, transparent);
}

/* ===== Next panel · pulse en dot ===== */
.public-booking .public-next-panel {
    background: color-mix(in srgb, var(--accent-soft) 28%, var(--surface));
    border-radius: 12px;
    border: 0;
    box-shadow: inset 0 0 0 0.5px var(--pb-line-soft);
    color: var(--ink-2);
    padding: 12px 16px;
    font-size: 13px;
}
.public-booking .public-next-dot {
    width: 8px; height: 8px;
    background: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
    animation: pb-pulse 2.4s ease-in-out infinite;
}
@keyframes pb-pulse {
    0%, 100% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
    50%      { box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 12%, transparent); }
}

/* ===== Form alert ===== */
.public-booking .public-form-alert {
    border-radius: 12px;
    padding: 12px 16px;
    box-shadow: inset 0 0 0 0.5px var(--pb-line-soft);
}

/* ===== Consent · bloque material ===== */
.public-booking .public-consent {
    background: #FFFFFF;
    border: 1px solid #E5EAF0;
    border-radius: 20px;
    box-shadow: none;
    padding: 14px 16px;
    transition: border-color 180ms ease, box-shadow 180ms ease;
}
.public-booking .public-consent:hover {
    border-color: color-mix(in srgb, var(--accent) 24%, #E5EAF0);
    box-shadow: none;
}
.public-booking .public-consent:focus-within {
    outline: 0;
    border-color: #E5EAF0;
    box-shadow: none;
}
.public-booking .public-consent input {
    accent-color: var(--accent-hover);
}
.public-booking .public-consent input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    display: inline-grid;
    place-content: center;
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin-top: 2px;
    border: 1px solid #DCE6EF;
    border-radius: 5px;
    background: #FFFFFF;
    cursor: pointer;
}
.public-booking .public-consent input[type="checkbox"]::after {
    content: "";
    width: 4px;
    height: 8px;
    border: solid #FFFFFF;
    border-width: 0 1.6px 1.6px 0;
    opacity: 0;
    transform: rotate(45deg) translate(-1px, -1px);
}
.public-booking .public-consent input[type="checkbox"]:checked {
    border-color: color-mix(in srgb, var(--accent) 45%, #DCE6EF);
    background: var(--accent);
}
.public-booking .public-consent input[type="checkbox"]:checked::after {
    opacity: 1;
}
.public-booking .public-consent input[type="checkbox"]:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 10%, transparent);
}
.public-booking .public-consent-wrap.has-error .public-consent {
    border-color: #DCCBC7;
    background: #FFFFFF;
    box-shadow: none;
}
.public-booking .public-consent-wrap.has-error .public-consent:focus-within,
.public-booking .public-consent-wrap.has-error .public-consent:hover {
    border-color: #DCCBC7;
}

/* ===== Primary CTA · highlight + dual shadow ===== */
.public-booking .btn-primary,
.public-booking .btn-public-primary {
    background: var(--accent-hover);
    color: white;
    border: 0;
    border-radius: 12px;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    letter-spacing: 0.005em;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.10),
        0 1px 2px color-mix(in srgb, var(--accent-hover) 60%, transparent),
        0 4px 12px color-mix(in srgb, var(--accent-hover) 40%, transparent);
    transition: transform 120ms ease, background 180ms ease, box-shadow 180ms ease;
}
.public-booking .btn-primary:hover,
.public-booking .btn-public-primary:hover {
    background: var(--accent);
    transform: translateY(-0.5px);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.12),
        0 2px 4px color-mix(in srgb, var(--accent-hover) 60%, transparent),
        0 8px 20px color-mix(in srgb, var(--accent-hover) 50%, transparent);
}
.public-booking .btn-primary:active,
.public-booking .btn-public-primary:active {
    transform: translateY(0);
    box-shadow: inset 0 1px 2px rgba(0,0,0,.16);
}
.public-booking .btn-public-secondary {
    background: var(--surface);
    color: var(--ink-2);
    border: 0;
    border-radius: 12px;
    box-shadow: inset 0 0 0 0.5px var(--pb-line-strong);
    transition: all 180ms ease;
}
.public-booking .btn-public-secondary:hover {
    background: var(--pb-paper-warm);
    color: var(--ink);
}

/* ===== Social links · pills materiales · 2 columnas en desktop ===== */
.public-booking .public-social {
    margin-top: 22px;
    padding-top: 20px;
    border-top: 0.5px solid var(--pb-line-soft);
}
.public-booking .public-social-label {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-3);
}
.public-booking .public-social-links {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    flex-wrap: unset !important;
}
@media (max-width: 540px) {
    .public-booking .public-social-links {
        grid-template-columns: 1fr !important;
    }
}
.public-booking .public-social-links.is-compact {
    /* Fila horizontal con iconos circulares · más limpio que el grid de
       pills largos. Wrap si no entran en una sola línea. */
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    grid-template-columns: none !important;
    gap: 10px !important;
    justify-content: flex-start;
}
.public-booking .social-link {
    background: var(--surface);
    border: 0;
    border-radius: 12px;
    box-shadow: inset 0 0 0 0.5px var(--pb-line);
    padding: 6px 12px 6px 6px;
    color: var(--ink-2);
    font-family: 'Inter', sans-serif;
    font-size: 12.5px;
    font-weight: 500;
    text-decoration: none;
    transition: all 180ms ease;
    display: flex !important;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 38px;
    justify-content: flex-start;
}
.public-booking .social-link .social-handle {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.public-booking .social-link:hover {
    background: color-mix(in srgb, var(--accent-soft) 30%, var(--surface));
    color: var(--accent-hover);
    box-shadow: inset 0 0 0 0.5px color-mix(in srgb, var(--accent) 36%, var(--pb-line));
    transform: translateY(-0.5px);
}
.public-booking .social-link:active { transform: translateY(0); }
.public-booking .social-ico {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--accent-soft) 70%, var(--surface));
    color: var(--accent-hover);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: 'Inter', sans-serif;
    font-size: 10px;
    font-weight: 600;
    flex-shrink: 0;
    transition: background 180ms ease, color 180ms ease;
}
.public-booking .social-ico svg {
    width: 18px;
    height: 18px;
    display: block;
    /* Garantiza que el SVG se renderice incluso si algún reset global le
       aplica display:none o lo escala a 0. */
    visibility: visible !important;
    opacity: 1 !important;
}
.public-booking .social-link:hover .social-ico {
    background: color-mix(in srgb, var(--accent-soft) 80%, var(--surface));
}
/* Tints por marca · solo en hover (estado de reposo se mantiene en el
   look editorial sage). Van después del hover genérico para ganar por
   orden con la misma especificidad. */
.public-booking .social-link:hover .social-ico--instagram { color: #E1306C; background: color-mix(in srgb, #E1306C 12%, var(--surface)); }
.public-booking .social-link:hover .social-ico--linkedin  { color: #0A66C2; background: color-mix(in srgb, #0A66C2 12%, var(--surface)); }
.public-booking .social-link:hover .social-ico--tiktok    { color: #111111; background: color-mix(in srgb, #111111 10%, var(--surface)); }
.public-booking .social-link:hover .social-ico--facebook  { color: #1877F2; background: color-mix(in srgb, #1877F2 12%, var(--surface)); }
.public-booking .social-link:hover .social-ico--youtube   { color: #FF0000; background: color-mix(in srgb, #FF0000 12%, var(--surface)); }
.public-booking .social-link:hover .social-ico--x         { color: #111111; background: color-mix(in srgb, #111111 10%, var(--surface)); }
.public-booking .public-social-links.is-compact .social-link {
    /* Botón circular puro · sin texto · width:auto para que no se estire al 100% */
    padding: 0 !important;
    width: 42px !important;
    height: 42px !important;
    min-height: 0 !important;
    border-radius: 50% !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
    box-shadow:
        0 1px 2px rgba(20,39,43,.05),
        inset 0 0 0 0.5px rgba(20,39,43,.08) !important;
    transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease;
}
.public-booking .public-social-links.is-compact .social-link:hover {
    transform: translateY(-1px);
    box-shadow:
        0 4px 12px -4px rgba(20,39,43,.12),
        inset 0 0 0 0.5px color-mix(in srgb, var(--accent) 36%, rgba(20,39,43,.08)) !important;
}
.public-booking .public-social-links.is-compact .social-ico {
    /* El ícono ocupa todo el círculo · sin background extra para evitar
       el doble-círculo (círculo de boton + círculo de ícono). */
    width: 100% !important;
    height: 100% !important;
    background: transparent !important;
    box-shadow: none !important;
}
.public-booking .public-social-links.is-compact .social-ico svg {
    width: 19px;
    height: 19px;
}
.public-booking .public-social-links.is-compact .social-handle {
    display: none;
}

/* ===== Success state · pantalla de "Reserva recibida" =====
   Layout · ícono centrado arriba → eyebrow → título display Fraunces →
   párrafo descriptivo → panel de resumen 3 columnas → acciones.
   Todo centrado en una card con padding generoso. */
.public-booking .public-success {
    text-align: center;
    padding: 56px clamp(24px, 4vw, 48px) 44px !important;
    background: var(--surface);
    border-radius: 20px;
}
.public-booking .post-create-title {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 14px !important;
    margin-bottom: 8px !important;
    padding: 0 !important;
    border: 0 !important;
}
.public-booking .post-create-icon {
    width: 64px !important;
    height: 64px !important;
    border-radius: 50% !important;
    background: color-mix(in srgb, var(--accent-soft) 60%, var(--surface)) !important;
    color: var(--accent-hover) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow:
        inset 0 0 0 1px color-mix(in srgb, var(--accent) 8%, transparent),
        0 1px 2px rgba(20,39,43,.06),
        0 8px 24px color-mix(in srgb, var(--accent) 14%, transparent) !important;
    margin: 0 0 6px !important;
    flex-shrink: 0;
}
.public-booking .public-success .msg-sheet-kicker {
    display: block;
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--accent-hover);
    margin: 0;
}
.public-booking .public-success h2.serif,
.public-booking .public-success #publicSuccessTitle {
    font-family: 'Fraunces', serif !important;
    font-weight: 500 !important;
    font-variation-settings: 'opsz' 144 !important;
    font-size: clamp(28px, 3.4vw, 40px) !important;
    line-height: 1.05 !important;
    letter-spacing: -0.022em !important;
    color: var(--ink) !important;
    margin: 4px 0 6px !important;
}
.public-booking .public-success p#publicSuccessText {
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    line-height: 1.55;
    color: var(--ink-3);
    max-width: 540px;
    margin: 0 auto !important;
}

/* ===== Summary card · 3 columnas (cuándo / modalidad / inversión) ===== */
.public-booking .public-success-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    background: color-mix(in srgb, var(--accent-soft) 30%, var(--surface));
    border-radius: 14px;
    padding: 20px clamp(20px, 3vw, 32px);
    margin: 28px auto;
    max-width: 640px;
    text-align: left;
}
@media (max-width: 540px) {
    /* Mobile · resumen en horizontal (3 columnas compactas)
       Mantiene la lectura "Cuándo · Modalidad · Inversión" en una sola
       línea visual · más cómodo que un stack vertical en pantallas chicas. */
    .public-booking .public-success-summary {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 10px;
        padding: 14px 12px;
    }
    .public-booking .success-cell .cell-label {
        font-size: 9.5px;
        letter-spacing: 0.12em;
        margin-bottom: 1px;
    }
    .public-booking .success-cell .cell-value-primary,
    .public-booking .success-cell .cell-value-primary.serif {
        font-size: 15px;
        line-height: 1.12;
    }
    .public-booking .success-cell .cell-value-secondary {
        font-size: 12px;
        line-height: 1.25;
    }
}
.public-booking .success-cell {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.public-booking .success-cell .cell-label {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin-bottom: 2px;
}
.public-booking .success-cell .cell-value-primary,
.public-booking .success-cell .cell-value-primary.serif {
    font-family: 'Fraunces', serif;
    font-weight: 500;
    font-variation-settings: 'opsz' 96;
    font-size: 18px;
    line-height: 1.15;
    letter-spacing: -0.005em;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}
.public-booking .success-cell .cell-value-secondary {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    line-height: 1.35;
    color: var(--ink-3);
    font-variant-numeric: tabular-nums;
}

/* Acciones centradas debajo del resumen */
.public-booking .public-success-actions {
    display: flex !important;
    justify-content: center !important;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 8px;
}

/* ===== Lectura cómoda dentro de booking ===== */
body.reading-comfort .public-booking .serif,
body.reading-comfort .public-booking h1,
body.reading-comfort .public-booking h2 {
    font-family: 'Atkinson Hyperlegible', sans-serif !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
}

/* ===== Responsive · móvil refinado ===== */
@media (max-width: 860px) {
    .public-booking .public-booking-profile h1 { font-size: 28px; }
    .public-booking .public-booking-summary { padding: 18px; }
    .public-booking .public-step h2 { font-size: 22px; }
    .public-booking .public-summary-head { gap: 10px; align-items: flex-start; }
    /* Badge circular · ligeramente más pequeño en móvil para no apretar el header */
    .public-booking .step-badge {
        width: 28px !important;
        min-width: 28px !important;
        max-width: 28px !important;
        height: 28px !important;
        min-height: 28px !important;
        max-height: 28px !important;
        flex: 0 0 28px !important;
        font-size: 13px !important;
    }
    .public-booking .public-summary-title { gap: 12px !important; }
    .public-booking .public-summary-head h2#publicModalityTitle,
    .public-booking #publicModalityTitle { font-size: 19px !important; }
    /* Tabs scroll horizontal real en móvil */
    .public-booking .public-service-tabs {
        margin-left: -4px;
        margin-right: -4px;
        padding-left: 8px;
        padding-right: 8px;
    }
    .public-booking .public-service-tab {
        padding: 9px 12px !important;
        font-size: 12.5px;
    }
    /* Pasos 2 y 3 · número idéntico al Paso 1, solo escala */
    .public-booking .public-step-number {
        width: 28px !important;
        height: 28px !important;
        font-size: 13px !important;
    }
}

/* ===== Desktop · sumario refinado ===== */
@media (min-width: 861px) {
    /* Título más prominente en desktop */
    .public-booking .public-summary-head h2#publicModalityTitle,
    .public-booking #publicModalityTitle {
        font-size: 24px !important;
        line-height: 1.08 !important;
        letter-spacing: -0.018em !important;
        text-transform: none !important;
    }
    .public-booking .public-summary-head {
        align-items: flex-start;
    }
    .public-booking .public-summary-title {
        gap: 14px !important;
        flex-direction: row !important;
        align-items: center !important;
    }
    /* Los modality cards · proporciones cómodas en grid 2 columnas */
    .public-booking .public-booking-summary .public-price-card {
        padding: 14px 16px !important;
        min-height: 0 !important;
        align-items: center;
    }
    /* Limpiar el "S/120 Presencial" inline · queremos stack vertical */
    .public-booking .public-price-copy strong {
        display: block !important;
        margin: 0 !important;
        font-size: 15px !important;
        line-height: 1.25 !important;
    }
    .public-booking .public-price-copy b {
        display: block !important;
        font-size: 13px !important;
        margin-top: 1px !important;
        font-weight: 500 !important;
    }
    .public-booking .public-price-copy small {
        display: block !important;
        margin-top: 2px !important;
        font-size: 11.5px !important;
    }
    .public-booking .public-summary-choice {
        font-size: 12.5px !important;
    }
}
/* ========================================================================== */
/* ===== FIN · RESERVA PÚBLICA V3 PROLIJO ================================== */
/* ========================================================================== */

/* ==========================================================================
   ===== RESERVA PÚBLICA · DESKTOP 2-COL INTRO ==============================
   ==========================================================================
   Restaura el layout de dos columnas en la introducción para desktop:
   columna izquierda con el perfil apilado (avatar arriba + texto debajo)
   y columna derecha con la card "Elige tu consulta" alineada al inicio.
   Sobreescribe los overrides previos (línea ~14616 lo aplastaba a 1fr).
   ========================================================================== */
@media (min-width: 861px) {
    .public-booking .public-booking-intro {
        display: grid !important;
        grid-template-columns: minmax(0, 1.05fr) minmax(360px, 0.92fr) !important;
        gap: clamp(28px, 4.4vw, 64px) !important;
        align-items: start !important;
    }
    /* Profile · stack vertical (avatar centrado arriba + copy debajo) */
    .public-booking .public-booking-profile {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-rows: auto !important;
        gap: 0 !important;
        padding: 6px 0 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        min-height: 0 !important;
        align-items: start !important;
    }
    /* Restablece el flujo natural en profile-copy (otra @media lo dejaba como
       display:contents · acá lo necesitamos como bloque normal). */
    .public-booking .public-profile-copy {
        display: block !important;
        width: 100%;
        min-width: 0;
    }
    /* Avatar grande, centrado en la parte superior de la columna izquierda. */
    .public-booking .public-booking-profile .av-lg,
    .public-booking .public-booking-profile .avatar-photo.av-lg {
        grid-column: 1 !important;
        grid-row: auto !important;
        justify-self: center;
        margin: 0 0 18px !important;
        width: clamp(180px, 17vw, 232px) !important;
        height: clamp(180px, 17vw, 232px) !important;
        font-size: 56px !important;
    }
    /* Kicker · alineado a la derecha bajo el avatar (mantiene el dash + texto). */
    .public-booking .public-kicker {
        grid-column: auto !important;
        grid-row: auto !important;
        justify-self: end;
        margin-bottom: 10px;
    }
    /* Resto del perfil · alineación natural a la izquierda · reset de los
       grid-column/grid-row provenientes de overrides previos. */
    .public-booking .public-booking-profile h1,
    .public-booking .public-profile-meta,
    .public-booking .public-booking-bio,
    .public-booking .public-social {
        grid-column: auto !important;
        grid-row: auto !important;
    }
    .public-booking .public-booking-bio {
        max-width: none !important;
    }
    /* Meta del perfil · CPSP en su propia fila, chips de especialidad en la
       siguiente. Antes era flex horizontal con wrap · CPSP y chips quedaban
       en la misma línea visual. Ahora forzamos columna para que el código
       CPSP se vea claro debajo del nombre y los chips abajo. */
    .public-booking .public-profile-meta {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 10px !important;
        margin-top: 12px !important;
    }
    /* Columna del sumario (envuelve badge + card) · que conserve su altura
       propia y se alinee arriba. */
    .public-booking .public-booking-summary-col,
    .public-booking .public-booking-summary {
        align-self: start;
    }
}

/* ==========================================================================
   ===== RESERVA PÚBLICA · SELECT2-LIKE COMBO ===============================
   ==========================================================================
   Reemplaza el <input> + <select> nativo por un combo a medida estilo
   Select2 · trigger pill arriba + panel flotante con search y lista
   scroll. El <select> nativo se mantiene oculto como fallback a11y.
   ========================================================================== */
.public-booking .public-service-combo {
    position: relative;
    display: block;
}
.public-booking .public-service-combo[hidden] { display: none !important; }

/* Trigger · pill editorial · hairline 0.5px · sin focus ring grueso.
   Mantiene el lenguaje sage del resto del booking. */
.public-booking .public-service-combo-trigger {
    width: 100%;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 14px;
    background: var(--surface);
    border: 0;
    border-radius: 12px;
    box-shadow: inset 0 0 0 0.5px var(--pb-line);
    color: var(--ink);
    font-family: 'Inter Tight', 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 450;
    line-height: 1.2;
    letter-spacing: -0.005em;
    cursor: pointer;
    text-align: left;
    transition: box-shadow 160ms ease, background 160ms ease;
}
.public-booking .public-service-combo-trigger:hover {
    box-shadow: inset 0 0 0 0.5px color-mix(in srgb, var(--accent) 32%, var(--pb-line));
}
.public-booking .public-service-combo-trigger:focus-visible,
.public-booking .public-service-combo-trigger.is-open {
    outline: none;
    box-shadow:
        inset 0 0 0 0.5px color-mix(in srgb, var(--accent) 60%, var(--pb-line)),
        0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent);
}
.public-booking .public-service-combo-trigger.is-empty .public-service-combo-text {
    color: var(--ink-3);
    font-weight: 400;
}
.public-booking .public-service-combo-text {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.public-booking .public-service-combo-caret {
    flex-shrink: 0;
    color: color-mix(in srgb, var(--ink-3) 80%, var(--ink));
    transition: transform 160ms ease, color 160ms ease;
}
.public-booking .public-service-combo-trigger.is-open .public-service-combo-caret {
    transform: rotate(180deg);
    color: var(--accent);
}

/* Panel · sombra delicada · sin filled background pesado */
.public-booking .public-service-combo-panel {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 30;
    background: var(--surface);
    border-radius: 12px;
    box-shadow:
        0 1px 2px rgba(20,39,43,.04),
        0 8px 24px -10px rgba(20,39,43,.12),
        inset 0 0 0 0.5px var(--pb-line-soft);
    padding: 6px;
    max-height: 320px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: pb-combo-pop 130ms ease-out;
}
.public-booking .public-service-combo-panel[hidden] { display: none !important; }
@keyframes pb-combo-pop {
    from { opacity: 0; transform: translateY(-3px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Search · sin píldora alrededor del icono · todo en línea */
.public-booking .public-service-combo-search {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px 8px;
    margin: 0;
    border-bottom: 0.5px solid var(--pb-line-soft);
    color: color-mix(in srgb, var(--ink-3) 80%, var(--ink));
    flex-shrink: 0;
}
.public-booking .public-service-combo-search:focus-within {
    color: var(--accent);
}
.public-booking .public-service-combo-search > svg { flex-shrink: 0; }
.public-booking .public-service-combo-search input {
    flex: 1;
    min-width: 0;
    border: 0;
    background: transparent;
    padding: 2px 0;
    color: var(--ink);
    font-family: 'Inter Tight', 'Inter', sans-serif;
    font-size: 13.5px;
    font-weight: 400;
    letter-spacing: -0.003em;
    outline: none;
    box-shadow: none !important;
}
.public-booking .public-service-combo-search input::placeholder {
    color: var(--ink-3);
    font-weight: 400;
}
.public-booking .public-service-combo-search input::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
}

/* Lista · scrollbar fino · padding generoso */
.public-booking .public-service-combo-list {
    list-style: none;
    margin: 0;
    padding: 4px 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    max-height: 256px;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--ink) 14%, transparent) transparent;
}
.public-booking .public-service-combo-list::-webkit-scrollbar { width: 6px; }
.public-booking .public-service-combo-list::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--ink) 14%, transparent);
    border-radius: 999px;
}
.public-booking .public-service-combo-list::-webkit-scrollbar-track { background: transparent; }

/* Item · editorial · sin checkmark con fondo · sin selected ruidoso */
.public-booking .public-service-combo-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 9px 10px 10px;
    border-radius: 8px;
    cursor: pointer;
    color: var(--ink);
    position: relative;
    transition: background 120ms ease;
}
.public-booking .public-service-combo-item + .public-service-combo-item {
    margin-top: 2px;
}
.public-booking .public-service-combo-item:hover,
.public-booking .public-service-combo-item:focus-visible {
    background: color-mix(in srgb, var(--accent-soft) 32%, var(--surface));
    outline: none;
}
.public-booking .public-service-combo-item.is-selected {
    background: color-mix(in srgb, var(--accent-soft) 50%, var(--surface));
    color: var(--ink);
}
.public-booking .public-service-combo-item.is-selected::before {
    content: '';
    position: absolute;
    left: 3px;
    top: 11px;
    bottom: 11px;
    width: 2px;
    border-radius: 2px;
    background: var(--accent);
}

/* Check · solo se ve cuando está seleccionado · simple SVG en accent · no
   tiene fondo circular ni outline en estado idle. */
.public-booking .public-service-combo-check {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    margin-top: 3px;
    display: inline-grid;
    place-items: center;
    color: transparent;
    transition: color 120ms ease;
}
.public-booking .public-service-combo-check svg {
    width: 12px;
    height: 12px;
    display: block;
}
.public-booking .public-service-combo-item.is-selected .public-service-combo-check {
    color: var(--accent);
}

/* Body · nombre + descripción · jerarquía fina sin bold pesado */
.public-booking .public-service-combo-item-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.public-booking .public-service-combo-item-name {
    font-family: 'Inter Tight', 'Inter', sans-serif;
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: -0.005em;
    color: var(--ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.public-booking .public-service-combo-item.is-selected .public-service-combo-item-name {
    color: var(--accent-hover);
    font-weight: 500;
}
.public-booking .public-service-combo-item-desc {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    line-height: 1.4;
    color: var(--ink-3);
    font-weight: 400;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: normal;
}

.public-booking .public-service-combo-empty {
    margin: 16px 10px 14px;
    padding: 0;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 400;
    color: var(--ink-3);
    text-align: center;
}

/* Mobile · ajustes mínimos · trigger un pelo más alto · panel más alto */
@media (max-width: 540px) {
    .public-booking .public-service-combo-trigger { min-height: 46px; font-size: 14.5px; }
    .public-booking .public-service-combo-panel   { max-height: 380px; }
    .public-booking .public-service-combo-list    { max-height: 300px; }
    .public-booking .public-service-combo-item-name { font-size: 14px; }
}

/* ==========================================================================
   ===== RESERVA PÚBLICA · BADGE "ACEPTA RESERVAS HOY" ======================
   ==========================================================================
   Pill arriba de la card de "Elige tu consulta" · solo se renderiza si el
   psi tiene al menos un slot reservable hoy (controller `aceptaReservasHoy`).
   El punto verde pulsa para captar la atención sin saturar.
   ========================================================================== */
.public-booking-summary-col {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}
.public-booking .public-today-badge {
    align-self: flex-end;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 8px 16px 8px 14px;
    background: var(--surface);
    border-radius: 999px;
    box-shadow:
        0 1px 2px rgba(20,39,43,.05),
        0 6px 18px -8px rgba(20,39,43,.08),
        inset 0 0 0 0.5px rgba(20,39,43,.06);
    color: var(--ink-2);
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.005em;
    white-space: nowrap;
}
.public-booking .public-today-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #18C964;
    box-shadow: 0 0 0 3px color-mix(in srgb, #18C964 24%, transparent);
    flex-shrink: 0;
    animation: public-today-pulse 2s ease-in-out infinite;
}
.public-booking .public-today-text {
    color: var(--ink);
    font-weight: 500;
}
@keyframes public-today-pulse {
    0%, 100% {
        box-shadow: 0 0 0 3px color-mix(in srgb, #18C964 26%, transparent);
        transform: scale(1);
    }
    50% {
        box-shadow: 0 0 0 6px color-mix(in srgb, #18C964 12%, transparent);
        transform: scale(0.9);
    }
}
@media (max-width: 860px) {
    .public-booking-summary-col {
        gap: 10px;
        width: 100%;
        min-width: 0;
    }
    .public-booking .public-today-badge {
        /* En mobile el badge se ancla a la izquierda · `display:inline-flex
           !important` y `visibility:visible !important` blindan al pill
           contra cualquier reset global. */
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        align-self: flex-start;
        font-size: 12.5px;
        padding: 7px 14px 7px 12px;
        white-space: nowrap;
    }
    .public-booking .public-today-text {
        /* Texto siempre visible · sin overflow:hidden que lo colapse en
           inline-context. */
        display: inline !important;
        visibility: visible !important;
        opacity: 1 !important;
        white-space: nowrap;
        color: var(--ink);
        font-weight: 500;
    }
}

/* ==========================================================================
   ===== RESERVA PÚBLICA · DESKTOP 2-COL FORM ===============================
   ==========================================================================
   En desktop el formulario está SIEMPRE en 2 columnas: columna 1 con el
   paso 2 (fecha + slots + next-panel + alert) y columna 2 reservada para
   el paso 3 (datos del paciente). El paso 3 está oculto hasta que el
   paciente elige un horario · cuando aparece, simplemente ocupa la columna
   2 que ya estaba reservada · el paso 2 nunca se reflowa.
   El paso 2 está envuelto en .public-booking-step2 para que cada paso sea
   un único grid item · evita gaps grandes con el paso 3 (que es más alto).
   ========================================================================== */
@media (min-width: 861px) {
    .public-booking #publicBookingForm.public-booking-card {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        column-gap: clamp(28px, 3.6vw, 56px);
        row-gap: 0;
        align-items: start;
    }
    /* Step 2 wrapper · siempre en columna 1 · visible desde el inicio. */
    .public-booking #publicBookingForm.public-booking-card > .public-booking-step2 {
        grid-column: 1;
        grid-row: 1;
        align-self: start;
        min-width: 0;
    }
    /* Step 3 · columna 2 · sigue oculto vía [hidden] hasta que el paciente
       elige horario. Cuando se descubre, ocupa el slot ya reservado. */
    .public-booking #publicBookingForm.public-booking-card > #publicDetails {
        grid-column: 2;
        grid-row: 1;
        align-self: start;
        min-width: 0;
        margin-top: 0 !important;
    }
    /* Header del paso 3 · ya estamos al lado del paso 2, no necesita el
       margin-top extra que agrega .public-step-second en mobile. */
    .public-booking #publicBookingForm.public-booking-card .public-step-second {
        margin-top: 0;
    }
}

/* ===========================================================================
   SERVICIOS · página /servicios (catálogo del psicólogo)
   Reusa .pat-chipbar, .pat-toolbar, .pat-search, .pat-more, .pat-menu, .pill,
   .empty-state. Aporta el grid de filas, toggle activo, health bar y warnings.
   =========================================================================== */
.serv-page {
    background:
        linear-gradient(180deg,
            color-mix(in srgb, var(--accent-soft) 22%, transparent) 0,
            transparent 320px);
}
.module-header-servicios {
    border-bottom: 1px solid var(--line-soft);
    padding-bottom: 18px;
}
.serv-hero {
    /* Hereda padding del module-header base */
}
.serv-header-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}
.serv-public-link {
    color: var(--accent);
    text-decoration: none;
    font-weight: 600;
    border-bottom: 1px dashed color-mix(in srgb, var(--accent) 40%, transparent);
}
.serv-public-link:hover {
    border-bottom-color: var(--accent);
}
.serv-actions {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.serv-actions .btn-primary,
.serv-actions .btn-ghost {
    min-height: 40px;
    border-radius: 11px;
    padding-inline: 16px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
}
.serv-action-public {
    color: var(--ink-2);
}

/* === HEALTH BANNER · aviso simple cuando algún servicio necesita ajuste === */
.serv-health-banner {
    margin-top: 14px;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid color-mix(in srgb, var(--warn, #b45309) 32%, var(--line));
    border-radius: 12px;
    background: color-mix(in srgb, var(--warn, #b45309) 6%, var(--surface));
    color: var(--warn, #b45309);
    font-size: 12.5px;
    font-weight: 600;
}

/* === TOOLBAR · search + sort + meta ======================================= */
.serv-toolbar {
    /* Hereda de .pat-toolbar */
}
.serv-sort {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.serv-sort-label {
    font-size: 12px;
    font-weight: 700;
    color: var(--muted);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.serv-sort-select {
    min-height: 36px;
    padding: 6px 28px 6px 12px;
    font-size: 13px;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: var(--surface);
    color: var(--ink);
    cursor: pointer;
}
.serv-sort-select:hover {
    border-color: color-mix(in srgb, var(--accent) 30%, var(--line));
}
.serv-sort-select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent);
}
.serv-meta {
    /* Hereda de .pat-toolbar-meta */
}
.serv-list-shell {
    max-width: 1280px;
    margin: 0 auto;
}

/* === TABLA · grid de servicios ============================================ */
.serv-table {
    overflow: visible;
    border-radius: 18px;
    border: 1px solid color-mix(in srgb, var(--accent) 12%, var(--line));
    background: var(--surface);
    box-shadow: 0 22px 62px -50px color-mix(in srgb, var(--ink) 62%, transparent);
}
/* Grid: drag(34) · nombre(1.6fr) · modal(1.05fr) · dur(0.55fr) · status(0.85fr) · acciones(60) */
.serv-table-header,
.serv-row {
    display: grid;
    grid-template-columns: 34px minmax(280px, 1.6fr) minmax(190px, 1.05fr) minmax(90px, 0.55fr) minmax(150px, 0.85fr) 60px;
    gap: 16px;
    align-items: center;
}
.serv-table-header {
    padding: 13px 20px;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--muted);
    background: color-mix(in srgb, var(--accent-soft) 34%, var(--surface-2));
    border-bottom: 1px solid var(--line);
    border-radius: 18px 18px 0 0;
}
.serv-row {
    position: relative;
    padding: 16px 20px;
    border-bottom: 1px solid var(--line-soft);
    transition: background .18s ease, opacity .25s ease, transform .25s ease;
}
.serv-row:last-child { border-bottom: none; }
.serv-row:hover { background: color-mix(in srgb, var(--accent-soft) 14%, transparent); }
.serv-row.is-borrador { background: color-mix(in srgb, var(--surface-2) 50%, transparent); }
.serv-row.is-borrador .serv-name-link,
.serv-row.is-borrador .serv-modal,
.serv-row.is-borrador .serv-dur-cell { opacity: .7; }
.serv-row.is-removing {
    opacity: 0;
    transform: translateY(-6px);
    pointer-events: none;
}
.serv-row.is-dragging {
    opacity: .5;
    background: color-mix(in srgb, var(--accent-soft) 30%, var(--surface));
}
.serv-row.is-drop-target {
    border-top: 2px solid var(--accent);
}
.serv-row[hidden] { display: none; }

/* === Drag handle =========================================================== */
.serv-drag {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    color: var(--muted);
    cursor: grab;
    border-radius: 8px;
    opacity: 0;
    transition: opacity .15s ease, background .15s ease, color .15s ease;
}
.serv-row:hover .serv-drag,
.serv-drag:focus-visible {
    opacity: 1;
}
.serv-drag:hover {
    background: var(--surface-2);
    color: var(--ink);
}
.serv-drag:active { cursor: grabbing; }

/* === Nombre + tipo + warnings ============================================== */
.serv-name-cell {
    min-width: 0;
}
.serv-name-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 4px;
}
.serv-name-link {
    color: var(--ink);
    font-weight: 650;
    font-size: 14.5px;
    text-decoration: none;
    border-bottom: 1px dashed transparent;
}
.serv-name-link:hover {
    color: var(--accent);
    border-bottom-color: color-mix(in srgb, var(--accent) 40%, transparent);
}
.serv-tipo {
    font-size: 11px;
    padding: 2px 8px;
}
.serv-warn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--warn, #fef3c7) 30%, var(--surface));
    color: var(--warn, #b45309);
    border: 1px solid color-mix(in srgb, var(--warn, #b45309) 30%, var(--line));
    font-size: 11px;
    font-weight: 600;
}
.serv-warn.warn-soft {
    background: var(--surface-2);
    color: var(--muted);
    border-color: var(--line);
}
.serv-desc {
    margin: 0;
    color: var(--ink-2);
    font-size: 13px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.serv-desc-empty {
    color: var(--muted);
    font-style: italic;
}

/* === Modalidades · pills con precio inline ================================= */
.serv-modal-cell {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}
.serv-modal {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    font-size: 12px;
}
.serv-precio {
    font-weight: 700;
    color: var(--ink);
    margin-left: 4px;
}
.serv-modal-empty {
    color: var(--muted);
    font-size: 12px;
    font-style: italic;
}

/* === Duración ============================================================== */
.serv-dur-cell {
    font-size: 13px;
    color: var(--ink-2);
}
.serv-dur-cell .muted { color: var(--muted); margin-left: 2px; }

/* === Toggle activo · checkbox CSS-only ===================================== */
.serv-status-cell {
    display: inline-flex;
    align-items: center;
}
.serv-toggle {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    cursor: pointer;
    user-select: none;
}
.serv-toggle input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 0;
    height: 0;
}
.serv-toggle-track {
    position: relative;
    width: 36px;
    height: 20px;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: 999px;
    transition: background .18s ease, border-color .18s ease;
}
.serv-toggle-thumb {
    position: absolute;
    top: 1px;
    left: 1px;
    width: 16px;
    height: 16px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 1px 3px color-mix(in srgb, var(--ink) 24%, transparent);
    transition: transform .2s cubic-bezier(.45,0,.2,1), background .18s ease;
}
.serv-toggle input:checked + .serv-toggle-track {
    background: var(--accent);
    border-color: var(--accent);
}
.serv-toggle input:checked + .serv-toggle-track .serv-toggle-thumb {
    transform: translateX(16px);
}
.serv-toggle input:focus-visible + .serv-toggle-track {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent);
}
.serv-toggle input:disabled + .serv-toggle-track {
    opacity: .55;
    cursor: not-allowed;
}
.serv-toggle-label {
    font-size: 12.5px;
    color: var(--ink-2);
    font-weight: 600;
    min-width: 64px;
}
.serv-toggle input:checked ~ .serv-toggle-label {
    color: var(--accent);
}

/* === Acciones (menú ⋯) ===================================================== */
.serv-actions-cell {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
}

/* === Empty states ========================================================== */
.serv-empty {
    grid-column: 1 / -1;
    padding: 48px 24px;
    text-align: center;
    color: var(--muted);
}
.serv-empty svg {
    color: var(--line);
    margin-bottom: 14px;
}
.serv-empty-actions {
    margin-top: 14px;
    display: inline-flex;
    gap: 10px;
    justify-content: center;
}
.serv-empty-filtered[hidden] { display: none; }

/* === Responsive · móvil colapsa a tarjetas ================================= */
@media (max-width: 900px) {
    .serv-table-header { display: none; }
    .serv-row {
        grid-template-columns: 28px 1fr auto;
        grid-template-areas:
            "drag name actions"
            ".    modal modal"
            ".    dur   status";
        row-gap: 10px;
        padding: 16px;
    }
    .serv-drag { grid-area: drag; opacity: 1; }
    .serv-name-cell { grid-area: name; }
    .serv-modal-cell { grid-area: modal; }
    .serv-dur-cell { grid-area: dur; }
    .serv-status-cell { grid-area: status; justify-content: flex-end; }
    .serv-actions-cell { grid-area: actions; }
    .serv-modal-cell::before,
    .serv-dur-cell::before {
        content: attr(data-label) ":";
        font-size: 11px;
        font-weight: 700;
        color: var(--muted);
        text-transform: uppercase;
        letter-spacing: 0.06em;
        margin-right: 6px;
    }
}
@media (max-width: 540px) {
    .serv-header-row { flex-direction: column; align-items: stretch; }
    .serv-actions { justify-content: flex-end; }
    .serv-toggle-label { min-width: 0; }
}

/* ===========================================================================
   SERVICIOS · DRAWER de edición (Tanda C)
   Slide-in desde la derecha (480px). Triggered by [data-serv-edit-id].
   =========================================================================== */
.serv-drawer {
    position: fixed;
    inset: 0;
    z-index: 70;
}
.serv-drawer[hidden] { display: none; }
.serv-drawer-scrim {
    position: absolute;
    inset: 0;
    background: color-mix(in srgb, var(--ink) 35%, transparent);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    opacity: 0;
    transition: opacity .25s ease;
}
.serv-drawer.is-open .serv-drawer-scrim { opacity: 1; }
.serv-drawer-panel {
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: min(480px, 100vw);
    background: var(--surface);
    box-shadow: -24px 0 60px -24px color-mix(in srgb, var(--ink) 50%, transparent);
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform .28s cubic-bezier(.45,0,.2,1);
    will-change: transform;
}
.serv-drawer.is-open .serv-drawer-panel { transform: translateX(0); }

/* === Header =============================================================== */
.serv-drawer-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 22px 24px 16px;
    border-bottom: 1px solid var(--line-soft);
}
.serv-drawer-kicker {
    display: block;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 4px;
}
.serv-drawer-title {
    margin: 0;
    font-size: 22px;
    line-height: 1.15;
    color: var(--ink);
    font-weight: 600;
}
.serv-drawer-close {
    width: 34px; height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--ink-2);
    border-radius: 10px;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.serv-drawer-close:hover {
    background: var(--surface-2);
    border-color: color-mix(in srgb, var(--accent) 26%, var(--line));
    color: var(--ink);
}

/* === Tabs ================================================================= */
.serv-drawer-tabs {
    display: flex;
    gap: 4px;
    padding: 0 24px;
    border-bottom: 1px solid var(--line-soft);
    overflow-x: auto;
    scrollbar-width: none;
}
.serv-drawer-tabs::-webkit-scrollbar { display: none; }
.serv-drawer-tab {
    border: 0;
    background: transparent;
    padding: 12px 14px;
    font-size: 13px;
    font-weight: 650;
    color: var(--muted);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color .15s ease, border-color .15s ease;
    white-space: nowrap;
}
.serv-drawer-tab:hover { color: var(--ink-2); }
.serv-drawer-tab.is-active {
    color: var(--accent);
    border-bottom-color: var(--accent);
}
.serv-drawer-tab:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--accent) 30%, transparent);
    outline-offset: 2px;
    border-radius: 6px;
}

/* === Form / panes ========================================================= */
.serv-drawer-form {
    flex: 1;
    overflow-y: auto;
    padding: 22px 24px;
}
.serv-drawer-pane {
    display: none;
    flex-direction: column;
    gap: 18px;
}
.serv-drawer-pane.is-active { display: flex; }
.serv-drawer-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    position: relative;
}
.serv-drawer-label {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ink-2);
}
.serv-drawer-hint {
    font-size: 11.5px;
    color: var(--muted);
    align-self: flex-end;
    margin-top: 2px;
}
.serv-drawer-hint.is-warn { color: var(--warn, #b45309); font-weight: 600; }
.serv-drawer-inline {
    display: flex;
    align-items: stretch;
    gap: 8px;
}
.serv-drawer-inline .input { flex: 1; min-width: 0; }
.serv-drawer-prefix,
.serv-drawer-unit {
    display: inline-flex;
    align-items: center;
    padding: 0 10px;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: 9px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}

/* === Fieldset (modalidades) =============================================== */
.serv-drawer-fieldset {
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 14px 16px;
    margin: 0;
    background: color-mix(in srgb, var(--surface-2) 30%, var(--surface));
}
.serv-drawer-fieldset legend {
    padding: 0 6px;
    margin-left: -6px;
}
.serv-drawer-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ink);
    cursor: pointer;
}
.serv-drawer-checkbox input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--accent);
    cursor: pointer;
}
.serv-drawer-fieldset .serv-drawer-field {
    margin-top: 12px;
}

/* === Validación viva ====================================================== */
.serv-drawer-validation {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    padding: 9px 12px;
    background: color-mix(in srgb, var(--warn, #fef3c7) 35%, var(--surface));
    color: var(--warn, #b45309);
    border: 1px solid color-mix(in srgb, var(--warn, #b45309) 35%, var(--line));
    border-radius: 10px;
    font-size: 12.5px;
    font-weight: 600;
}
.serv-drawer-validation[hidden] { display: none; }

/* === Toggle row (visibilidad) ============================================= */
.serv-drawer-toggle-row {
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: color-mix(in srgb, var(--surface-2) 30%, var(--surface));
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* === Footer · status + acciones =========================================== */
.serv-drawer-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 24px;
    border-top: 1px solid var(--line-soft);
    background: color-mix(in srgb, var(--surface-2) 28%, var(--surface));
}
.serv-drawer-status {
    font-size: 12px;
    color: var(--muted);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.serv-drawer-status.is-saving { color: var(--accent); }
.serv-drawer-status.is-saving::before {
    content: "";
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--accent);
    animation: serv-pulse .9s ease-in-out infinite;
}
.serv-drawer-status.is-saved { color: var(--accent); }
.serv-drawer-status.is-error { color: var(--field-warning); }
@keyframes serv-pulse {
    0%, 100% { opacity: .35; transform: scale(.85); }
    50%      { opacity: 1;   transform: scale(1.1); }
}
.serv-drawer-actions { display: inline-flex; gap: 10px; }
.serv-drawer-actions .btn-primary,
.serv-drawer-actions .btn-ghost {
    min-height: 36px;
    padding-inline: 14px;
    border-radius: 10px;
}

/* Estado dirty del input · borde sutil hasta que auto-save lo persista */
.serv-drawer-form input.is-dirty,
.serv-drawer-form textarea.is-dirty,
.serv-drawer-form select.is-dirty {
    border-color: color-mix(in srgb, var(--accent) 32%, var(--line));
}
/* Estado pendiente — borde sutil + fondo casi imperceptible, sin halo. */
.serv-drawer-form input.is-invalid,
.serv-drawer-form textarea.is-invalid,
.serv-drawer-form select.is-invalid {
    border-color: var(--field-warning-edge);
    background: var(--field-warning-soft);
    box-shadow: none;
}

/* === Mobile · drawer ocupa 100vw ========================================== */
@media (max-width: 540px) {
    .serv-drawer-panel { width: 100vw; }
    .serv-drawer-header { padding: 18px 18px 14px; }
    .serv-drawer-tabs { padding: 0 18px; }
    .serv-drawer-form { padding: 18px; }
    .serv-drawer-footer { padding: 12px 18px; }
}

/* === Tarjeta resumen "Servicios publicados" en /configuracion (Tanda E) === */
.config-card-services-summary .services-summary-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 14px;
    padding: 17px;
    margin-top: 0;
    background:
        linear-gradient(180deg,
            color-mix(in srgb, var(--accent-soft) 22%, var(--surface)) 0%,
            color-mix(in srgb, var(--surface-2) 35%, var(--surface)) 100%);
    border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--line));
    border-radius: 14px;
    box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 68%, transparent);
}
.config-card-services-summary .services-summary-count {
    display: block;
    font-size: 13.5px;
    line-height: 1.35;
    color: var(--ink-2);
}
.config-card-services-summary .services-summary-count strong {
    display: inline-block;
    font-size: 30px;
    line-height: .95;
    color: var(--accent);
    font-weight: 760;
    margin-right: 7px;
    vertical-align: baseline;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-feature-settings: "tnum" 1;
}
.config-card-services-summary .btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: max-content;
    max-width: 100%;
    min-height: 38px;
    padding-inline: 14px;
    border-radius: 10px;
}

/* === Templates picker (Tanda D) =========================================== */
/* Modal centrado con grid de plantillas + extras (Desde cero / Duplicar).    */
/* Aparece al click en "Nuevo servicio". Patrón: scrim + panel + transición.  */

.serv-tpl {
    position: fixed;
    inset: 0;
    z-index: 1100;
    display: block;
}
.serv-tpl[hidden] { display: none; }
.serv-tpl-scrim {
    position: absolute;
    inset: 0;
    background: color-mix(in srgb, var(--ink) 38%, transparent);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    opacity: 0;
    transition: opacity .22s ease;
}
.serv-tpl.is-open .serv-tpl-scrim { opacity: 1; }
.serv-tpl-panel {
    position: absolute;
    inset: 50% auto auto 50%;
    transform: translate(-50%, -46%) scale(.98);
    width: min(880px, calc(100vw - 32px));
    max-height: calc(100vh - 48px);
    overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 16px;
    box-shadow: 0 24px 64px -24px color-mix(in srgb, var(--ink) 50%, transparent);
    display: flex;
    flex-direction: column;
    opacity: 0;
    transition: opacity .22s ease, transform .22s ease;
}
.serv-tpl.is-open .serv-tpl-panel {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.serv-tpl-view {
    display: none;
    flex-direction: column;
    overflow: hidden;
}
.serv-tpl-view.is-active { display: flex; }

.serv-tpl-header {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 22px 24px 18px;
    border-bottom: 1px solid var(--line);
}
.serv-tpl-header > div {
    flex: 1;
    min-width: 0;
}
.serv-tpl-kicker {
    display: inline-block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--accent);
    font-weight: 700;
    margin-bottom: 4px;
}
.serv-tpl-title {
    font-size: 22px;
    line-height: 1.2;
    margin: 0;
    color: var(--ink);
}
.serv-tpl-subtitle {
    margin: 4px 0 0;
    font-size: 13px;
    color: var(--muted);
}
.serv-tpl-close {
    flex-shrink: 0;
    border: 0;
    background: transparent;
    color: var(--muted);
    padding: 6px;
    border-radius: 8px;
    cursor: pointer;
    line-height: 0;
    transition: background .15s, color .15s;
}
.serv-tpl-close:hover {
    background: color-mix(in srgb, var(--surface-2) 60%, transparent);
    color: var(--ink-2);
}
.serv-tpl-back {
    align-self: flex-start;
    border: 0;
    background: transparent;
    color: var(--muted);
    font-size: 12px;
    padding: 4px 8px 4px 4px;
    border-radius: 6px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-right: 4px;
}
.serv-tpl-back:hover { color: var(--ink-2); background: color-mix(in srgb, var(--surface-2) 60%, transparent); }

.serv-tpl-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    padding: 20px 24px;
    overflow-y: auto;
}
.serv-tpl-card {
    text-align: left;
    display: flex;
    gap: 12px;
    padding: 14px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 12px;
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s, transform .15s;
    color: var(--ink);
    font: inherit;
}
.serv-tpl-card:hover {
    border-color: color-mix(in srgb, var(--accent) 40%, var(--line));
    box-shadow: 0 8px 22px -18px color-mix(in srgb, var(--ink) 40%, transparent);
    transform: translateY(-1px);
}
.serv-tpl-card:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
.serv-tpl-card-icon {
    width: 38px;
    height: 38px;
    display: inline-grid;
    place-items: center;
    border-radius: 10px;
    background: color-mix(in srgb, var(--accent-soft) 70%, var(--surface));
    color: var(--accent);
    flex-shrink: 0;
}
.serv-tpl-card-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    flex: 1;
}
.serv-tpl-card-name {
    font-size: 14px;
    font-weight: 650;
    color: var(--ink);
    line-height: 1.25;
}
.serv-tpl-card-desc {
    font-size: 12px;
    color: var(--muted);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.serv-tpl-card-meta {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
    font-size: 11px;
    color: var(--ink-2);
}
.serv-tpl-card-meta .mono { font-size: 11px; }
.serv-tpl-card-dur { color: var(--muted); }
.serv-tpl-card-price {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--ink-2);
}
.serv-tpl-card-price .mode-icon {
    width: 12px;
    height: 12px;
    color: var(--muted);
}

.serv-tpl-divider {
    text-align: center;
    color: var(--muted);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .12em;
    position: relative;
    margin: 4px 24px;
}
.serv-tpl-divider::before,
.serv-tpl-divider::after {
    content: '';
    position: absolute;
    top: 50%;
    width: calc(50% - 24px);
    height: 1px;
    background: var(--line);
}
.serv-tpl-divider::before { left: 0; }
.serv-tpl-divider::after { right: 0; }
.serv-tpl-divider span {
    background: var(--surface);
    padding: 0 10px;
    position: relative;
}

.serv-tpl-extras {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding: 12px 24px 22px;
}
.serv-tpl-extra {
    text-align: left;
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 12px 14px;
    background: var(--surface);
    border: 1px dashed var(--line);
    border-radius: 12px;
    cursor: pointer;
    transition: border-color .15s, background .15s;
    color: var(--ink);
    font: inherit;
}
.serv-tpl-extra:hover:not([disabled]) {
    border-color: color-mix(in srgb, var(--accent) 35%, var(--line));
    background: color-mix(in srgb, var(--accent-soft) 18%, var(--surface));
}
.serv-tpl-extra[disabled] {
    opacity: .55;
    cursor: not-allowed;
}
.serv-tpl-extra-icon {
    width: 34px;
    height: 34px;
    display: inline-grid;
    place-items: center;
    border-radius: 9px;
    background: color-mix(in srgb, var(--surface-2) 70%, transparent);
    color: var(--ink-2);
    flex-shrink: 0;
}
.serv-tpl-extra-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.serv-tpl-extra-name {
    font-size: 13px;
    font-weight: 650;
    color: var(--ink);
}
.serv-tpl-extra-desc {
    font-size: 11px;
    line-height: 1.4;
}

/* Sub-vista duplicar · lista de servicios existentes */
.serv-tpl-dup-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px 24px 22px;
    overflow-y: auto;
    max-height: 60vh;
}
.serv-tpl-dup-empty {
    text-align: center;
    padding: 24px 0;
    font-size: 13px;
}
.serv-tpl-dup-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 14px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 10px;
    cursor: pointer;
    transition: border-color .15s, background .15s;
    color: var(--ink);
    text-align: left;
    font: inherit;
}
.serv-tpl-dup-row:hover:not([disabled]) {
    border-color: color-mix(in srgb, var(--accent) 35%, var(--line));
    background: color-mix(in srgb, var(--accent-soft) 14%, var(--surface));
}
.serv-tpl-dup-row.is-borrador { opacity: .68; }
.serv-tpl-dup-row.is-loading { opacity: .55; cursor: wait; }
.serv-tpl-dup-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.serv-tpl-dup-meta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    color: var(--ink-2);
    flex-shrink: 0;
}
.serv-tpl-dup-meta .pill { font-size: 11px; padding: 3px 8px; }
.serv-tpl-dup-meta .mode-icon { width: 12px; height: 12px; color: var(--muted); }

body.serv-tpl-open { overflow: hidden; }

/* Mobile · panel ocupa casi todo el viewport, grid colapsa a 1 columna */
@media (max-width: 720px) {
    .serv-tpl-panel { width: calc(100vw - 16px); max-height: calc(100vh - 24px); }
    .serv-tpl-header { padding: 18px 18px 14px; }
    .serv-tpl-grid { grid-template-columns: 1fr; padding: 16px 18px; }
    .serv-tpl-extras { grid-template-columns: 1fr; padding: 10px 18px 18px; }
    .serv-tpl-divider { margin: 4px 18px; }
    .serv-tpl-dup-list { padding: 14px 18px 18px; }
}

/* ========================================================================== */
/* ===== FIN · SERVICIOS =================================================== */
/* ========================================================================== */

/* ========================================================================== */
/* ===== ENLACES PUBLICOS (rediseño 2026-05-14) ============================ */
/* ========================================================================== */
/* Lista sobria para una app clínica: canales públicos opcionales, no un bloque
   social protagónico. Toggle publicado/borrador, drag, auto-save y picker. */

.config-card-redes .config-card-head {
    align-items: center;
    gap: 10px;
}
.config-card-redes {
    padding: 16px 18px 18px;
    border-color: color-mix(in srgb, var(--ink) 7%, var(--line));
    box-shadow: 0 16px 42px -42px color-mix(in srgb, var(--ink) 52%, transparent);
}
.config-card-redes .config-card-head > div {
    max-width: 680px;
}
.config-card-redes .config-step {
    width: 30px;
    height: 30px;
    border-radius: 10px;
    font-size: 11px;
    color: color-mix(in srgb, var(--accent) 66%, var(--ink-2));
    background: color-mix(in srgb, var(--surface-2) 72%, var(--surface));
}
.config-card-redes h2 {
    font-size: 16px;
    font-weight: 650;
    letter-spacing: 0;
}
.config-card-redes .config-card-head p {
    margin-top: 2px;
    font-size: 12px;
    color: var(--muted);
}
.redes-meta-pill {
    margin-left: auto;
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    padding: 3px 9px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--surface-2) 68%, var(--surface));
    color: var(--muted);
    font-size: 11px;
    font-weight: 650;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-feature-settings: "tnum" 1;
}
.redes-meta-pill strong {
    color: var(--ink-2);
    font-size: 11.5px;
    font-weight: 800;
}

.redes-list {
    display: block;
    max-height: min(560px, calc(100vh - 245px));
    overflow: auto;
    padding: 0;
    margin-top: 2px;
    border: 1px solid color-mix(in srgb, var(--ink) 8%, var(--line));
    border-radius: 12px;
    background: var(--surface);
    scrollbar-gutter: stable;
}
.redes-list::-webkit-scrollbar {
    width: 8px;
}
.redes-list::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent) 18%, var(--line));
}

.redes-table-head {
    position: sticky;
    top: 0;
    z-index: 3;
    display: grid;
    grid-template-columns: 34px minmax(128px, .72fr) minmax(270px, 1.35fr) minmax(150px, .75fr) 92px 64px;
    gap: 10px;
    align-items: center;
    padding: 8px 10px;
    border-bottom: 1px solid color-mix(in srgb, var(--ink) 8%, var(--line));
    background: color-mix(in srgb, var(--surface-2) 56%, var(--surface));
    color: var(--muted);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
}
.redes-table-head span:nth-child(4) {
    text-transform: none;
}

.red-card {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    padding: 9px 10px;
    border-bottom: 1px solid color-mix(in srgb, var(--ink) 6%, var(--line));
    background: transparent;
    transition: background .15s, box-shadow .15s, transform .15s, opacity .15s;
}
.red-card:last-child {
    border-bottom: 0;
}
.red-card:hover {
    background: color-mix(in srgb, var(--surface-2) 44%, var(--surface));
}
.red-card.is-borrador {
    opacity: .68;
    background: color-mix(in srgb, var(--surface-2) 50%, var(--surface));
}
.red-card[draggable="true"] { cursor: default; }
.red-card.is-dragging {
    opacity: .4;
    transform: scale(.98);
}
.red-card.is-drop-target {
    box-shadow: inset 3px 0 0 color-mix(in srgb, var(--accent) 80%, transparent);
}

.red-drag {
    display: inline-grid;
    place-items: center;
    align-self: center;
    width: 30px;
    height: 34px;
    margin-top: 0;
    border: 0;
    background: transparent;
    color: var(--muted);
    cursor: grab;
    border-radius: 6px;
}
.red-drag:hover {
    background: color-mix(in srgb, var(--surface-2) 60%, transparent);
    color: var(--ink-2);
}
.red-drag:active { cursor: grabbing; }

.red-body {
    display: grid;
    grid-template-columns: minmax(128px, .72fr) minmax(270px, 1.35fr) minmax(150px, .75fr) 92px 64px;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.red-head {
    display: contents;
}

.red-platform {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    grid-column: 1;
    grid-row: 1;
}
.red-platform-icon {
    width: 28px;
    height: 28px;
    display: inline-grid;
    place-items: center;
    border-radius: 8px;
    border: 1px solid color-mix(in srgb, var(--ink) 8%, var(--line));
    background: color-mix(in srgb, var(--surface-2) 62%, var(--surface));
    color: var(--ink-2);
    flex-shrink: 0;
}
.red-platform-name {
    font-size: 13px;
    font-weight: 650;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Tonos por plataforma · mantienen reconocimiento visual sin convertir la
   sección en un bloque social protagónico. */
.red-tone-instagram .red-platform-icon { background: color-mix(in srgb, #e1306c 14%, var(--surface)); color: #c2185b; }
.red-tone-linkedin  .red-platform-icon { background: color-mix(in srgb, #0a66c2 14%, var(--surface)); color: #0a66c2; }
.red-tone-tiktok    .red-platform-icon { background: color-mix(in srgb, #010101 8%,  var(--surface)); color: #111; }
.red-tone-website   .red-platform-icon { background: color-mix(in srgb, var(--accent) 14%, var(--surface)); color: var(--accent); }
.red-tone-facebook  .red-platform-icon { background: color-mix(in srgb, #1877f2 14%, var(--surface)); color: #1877f2; }
.red-tone-youtube   .red-platform-icon { background: color-mix(in srgb, #ff0000 12%, var(--surface)); color: #cc0000; }
.red-tone-x         .red-platform-icon { background: color-mix(in srgb, #000 8%,    var(--surface)); color: #000; }

/* ─────────────────────────────────────────────────────────────────
   Red social picker (modal) · reusa shell de .esp-picker pero con
   lista vertical de 1 columna · cada fila lleva icono coloreado +
   título + subtítulo descriptivo. Reemplaza al menú flotante feo.
   ───────────────────────────────────────────────────────────────── */
.red-picker .red-picker-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px 22px 18px;
}
.red-picker-item {
    display: flex !important;
    align-items: center;
    gap: 14px !important;
    padding: 12px 14px !important;
}
.red-picker-icon {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: var(--surface-2);
    color: var(--ink-3, #64748b);
}
.red-picker-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1 1 auto;
    line-height: 1.3;
}
.red-picker-text strong {
    font-family: 'Inter', sans-serif;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--ink);
}
.red-picker-text small {
    font-size: 12px;
    color: var(--muted);
}
/* Aplica el mismo color del icono que las tarjetas listadas (red-tone-*). */
.red-picker-item.red-tone-instagram .red-picker-icon,
.red-picker-icon.red-tone-instagram { background: color-mix(in srgb, #e1306c 14%, var(--surface)); color: #c2185b; }
.red-picker-item.red-tone-linkedin  .red-picker-icon,
.red-picker-icon.red-tone-linkedin { background: color-mix(in srgb, #0a66c2 14%, var(--surface)); color: #0a66c2; }
.red-picker-item.red-tone-tiktok    .red-picker-icon,
.red-picker-icon.red-tone-tiktok { background: color-mix(in srgb, #010101 8%,  var(--surface)); color: #111; }
.red-picker-item.red-tone-website   .red-picker-icon,
.red-picker-icon.red-tone-website { background: color-mix(in srgb, var(--accent) 14%, var(--surface)); color: var(--accent); }
.red-picker-item.red-tone-facebook  .red-picker-icon,
.red-picker-icon.red-tone-facebook { background: color-mix(in srgb, #1877f2 14%, var(--surface)); color: #1877f2; }
.red-picker-item.red-tone-youtube   .red-picker-icon,
.red-picker-icon.red-tone-youtube { background: color-mix(in srgb, #ff0000 12%, var(--surface)); color: #cc0000; }
.red-picker-item.red-tone-x         .red-picker-icon,
.red-picker-icon.red-tone-x { background: color-mix(in srgb, #000 8%,    var(--surface)); color: #000; }
.red-picker-item.is-added,
.red-picker-item:disabled {
    opacity: .56;
    cursor: not-allowed;
}
.red-picker-item.is-added::after {
    content: "Agregado";
    margin-left: auto;
    flex: 0 0 auto;
    padding: 3px 8px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--surface-2) 80%, var(--surface));
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
}
@media (max-width: 540px) {
    .red-picker .red-picker-list { padding: 10px 14px 14px; }
    .red-picker-item { padding: 10px 12px !important; }
}

.red-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    grid-column: 4;
    grid-row: 1;
    justify-self: start;
    padding: 4px 8px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: color-mix(in srgb, var(--surface-2) 42%, var(--surface));
    color: var(--muted);
    font-size: 10.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
}
.red-status:hover { border-color: color-mix(in srgb, var(--accent) 30%, var(--line)); }
.red-status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    display: inline-block;
}
.red-status.is-on {
    background: color-mix(in srgb, var(--ok) 8%, var(--surface));
    color: color-mix(in srgb, var(--ok) 74%, var(--ink-2));
    border-color: color-mix(in srgb, var(--ok) 22%, var(--line));
}
.red-status.is-off {
    background: color-mix(in srgb, var(--surface-2) 60%, var(--surface));
    color: var(--ink-2);
}

.red-actions {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    grid-column: 5;
    grid-row: 1;
    justify-self: end;
}
.red-action {
    width: 26px;
    height: 26px;
    display: inline-grid;
    place-items: center;
    border-radius: 8px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
}
.red-action:hover {
    background: color-mix(in srgb, var(--surface-2) 60%, transparent);
    color: var(--ink-2);
}
.red-action-eliminar:hover {
    background: color-mix(in srgb, var(--rose) 10%, var(--surface));
    color: var(--rose);
    border-color: color-mix(in srgb, var(--rose) 24%, var(--line));
}

.red-fields {
    display: contents;
}
.red-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.red-fields .red-field:nth-child(1) {
    grid-column: 2;
    grid-row: 1;
}
.red-fields .red-field:nth-child(2) {
    grid-column: 3;
    grid-row: 1;
}
.red-field-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    font-size: 11px;
    color: var(--muted);
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.red-field-label .muted { color: var(--muted); font-weight: 500; text-transform: none; letter-spacing: 0; }
.red-field-input {
    font-size: 13px;
    padding: 6px 10px;
    border-radius: 8px;
    min-height: 34px;
}

.red-status-line {
    display: none;
    grid-column: 2 / 6;
    grid-row: 2;
    font-size: 11px;
    color: var(--muted);
    font-style: italic;
}
.red-status-line.is-saving,
.red-status-line.is-error,
.red-status-line.is-saved {
    display: block;
}
.red-status-line.is-saving { color: var(--accent); }
.red-status-line.is-error  { color: var(--rose); font-style: normal; }
.red-status-line.is-saved  { color: var(--ok); }

@media (max-width: 1000px) {
    .redes-list {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
        max-height: none;
        overflow: visible;
        border: 0;
        border-radius: 0;
        background: transparent;
    }
    .redes-table-head {
        display: none;
    }
    .red-card {
        align-items: start;
        padding: 10px 12px;
        border: 1px solid color-mix(in srgb, var(--ink) 8%, var(--line));
        border-radius: 10px;
        background: var(--surface);
    }
    .red-body {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 10px 12px;
    }
    .red-platform { grid-column: 1; grid-row: 1; }
    .red-status { grid-column: 2; grid-row: 1; justify-self: end; }
    .red-actions { grid-column: 2; grid-row: 2; justify-self: end; }
    .red-fields {
        display: grid;
        grid-column: 1 / -1;
        grid-row: 2;
        grid-template-columns: minmax(0, 1fr) minmax(170px, .7fr);
        gap: 8px;
    }
    .red-fields .red-field:nth-child(1),
    .red-fields .red-field:nth-child(2) {
        grid-column: auto;
        grid-row: auto;
    }
    .red-field-label {
        position: static;
        width: auto;
        height: auto;
        overflow: visible;
        clip: auto;
        white-space: normal;
    }
    .red-status-line {
        display: block;
        grid-column: 1 / -1;
        grid-row: 3;
        min-height: 14px;
    }
}

@media (max-width: 700px) {
    .red-fields { grid-template-columns: 1fr; }
    .red-status,
    .red-actions {
        grid-column: 1;
        justify-self: start;
    }
    .red-status { grid-row: 3; }
    .red-actions { grid-row: 4; }
    .red-status-line { grid-row: 5; }
}

.redes-empty {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    padding: 17px;
    color: var(--muted);
    text-align: left;
    border: 1px dashed color-mix(in srgb, var(--ink) 10%, var(--line));
    border-radius: 14px;
    margin-top: 0;
    background:
        linear-gradient(180deg,
            color-mix(in srgb, var(--surface-2) 45%, var(--surface)) 0%,
            var(--surface) 100%);
}
.redes-empty svg {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    color: var(--ink-2);
}
.redes-empty p {
    margin: 1px 0 0;
    max-width: 360px;
    font-size: 13px;
    line-height: 1.45;
}

.redes-add-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px dashed color-mix(in srgb, var(--ink) 10%, var(--line));
    flex-wrap: wrap;
}
.red-add { position: relative; }
.red-add-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 10px;
    font-size: 12.5px;
    font-weight: 650;
}
/* El botón vive en redes-add-row, al pie del card. Si el menú abriera
   hacia abajo se saldría del card y solaparía la sección Calendario.
   Por eso abre hacia arriba. En mobile (max 700px) cae a posición fija
   al pie de pantalla para evitar overflow horizontal. */
.red-add-menu {
    position: absolute;
    bottom: calc(100% + 6px);
    left: 0;
    min-width: 220px;
    max-width: min(280px, calc(100vw - 32px));
    max-height: 320px;
    overflow-y: auto;
    padding: 6px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: 0 -18px 40px -22px color-mix(in srgb, var(--ink) 50%, transparent);
    z-index: 30;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
@media (max-width: 700px) {
    .red-add-menu {
        position: fixed;
        bottom: 12px;
        left: 12px;
        right: 12px;
        max-width: none;
        max-height: 60vh;
        box-shadow: 0 18px 60px -10px color-mix(in srgb, var(--ink) 60%, transparent);
    }
}
.red-add-menu[hidden] { display: none; }
.red-add-menu button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border: 0;
    background: transparent;
    color: var(--ink);
    font-size: 13px;
    text-align: left;
    border-radius: 8px;
    cursor: pointer;
}
.red-add-menu button:hover {
    background: color-mix(in srgb, var(--accent-soft) 50%, var(--surface));
}
.red-add-menu button[disabled] { opacity: .5; cursor: not-allowed; }
.red-add-menu svg { color: var(--ink-2); }

.redes-cap-hint {
    font-size: 11px;
    color: color-mix(in srgb, var(--muted) 82%, var(--surface-2));
}

@media (max-width: 540px) {
    .config-card-services-summary .btn-primary,
    .red-add-btn {
        width: 100%;
    }
    .redes-empty {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .redes-add-row {
        align-items: stretch;
    }
    .red-add {
        width: 100%;
    }
}

/* ========================================================================== */
/* ===== FIN · REDES SOCIALES ============================================== */
/* ========================================================================== */


/* ==========================================================================
   ===== /reservas-pendientes · REDESIGN EDITORIAL =========================
   ==========================================================================
   Adopta el lenguaje del booking público (Fraunces + Inter Tight, hairlines
   0.5px, sombras layered, tabular-nums). Sage para "esperando aprobación",
   warm-amber sutil para "vencidas reabribles", verde para empty state.
   Source order: bloque al final · gana por orden sin pelear con !important.
   ========================================================================== */

.reservas-page {
    /* Tokens scoped a esta vista · iguales a los del booking V3 prolijo */
    --rp-line-soft: rgba(20,39,43,.06);
    --rp-line:      rgba(20,39,43,.10);
    --rp-line-strong: rgba(20,39,43,.16);
    --rp-paper-warm: color-mix(in srgb, var(--surface) 96%, var(--bg));
    --rp-elev-1: 0 1px 2px rgba(20,39,43,.04), 0 0 0 0.5px rgba(20,39,43,.05);
    --rp-elev-2: 0 1px 2px rgba(20,39,43,.04), 0 6px 18px -8px rgba(20,39,43,.10), 0 0 0 0.5px rgba(20,39,43,.06);
    --rp-elev-3: 0 1px 2px rgba(20,39,43,.05), 0 14px 36px -12px rgba(20,39,43,.14), 0 0 0 0.5px rgba(20,39,43,.06);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ===== Header de página · Fraunces + kicker + pills tabulares ===== */
.reservas-page .module-header.cita-module-header {
    padding-top: 28px;
    padding-bottom: 22px;
}
.reservas-page .module-h1 {
    font-family: 'Fraunces', 'Times New Roman', serif !important;
    font-weight: 400 !important;
    font-variation-settings: 'opsz' 144;
    font-size: clamp(30px, 3.6vw, 40px) !important;
    line-height: 1.05 !important;
    letter-spacing: -0.022em !important;
    color: var(--ink) !important;
}
.reservas-page .module-subtitle {
    font-family: 'Inter', sans-serif;
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--ink-3);
    margin-top: 8px;
    max-width: 640px;
}
.reservas-page .module-title-row {
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

/* ===== Pills del header · hairlines + tabular-nums + sin chunky chip-tone ===== */
.reservas-page .cita-state-pill {
    background: var(--surface) !important;
    border: 0 !important;
    box-shadow: inset 0 0 0 0.5px var(--rp-line) !important;
    color: var(--ink-2) !important;
    font-family: 'Inter Tight', 'Inter', sans-serif !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    letter-spacing: 0.02em;
    padding: 5px 12px 5px 9px !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    align-items: center;
    gap: 7px;
    font-variant-numeric: tabular-nums;
    text-transform: none;
}
.reservas-page .cita-state-pill::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent);
    flex-shrink: 0;
}
.reservas-page .cita-state-pill.chip-tone-amber::before {
    background: #D97706;
}

/* ===== Sección block · contenedor con hairline · sin border 1px sólido ===== */
.reservas-page .reservas-vencidas-block,
.reservas-page .reservas-pendientes-block {
    background: var(--surface);
    border: 0;
    border-radius: 18px;
    padding: 24px clamp(18px, 2.4vw, 28px) 22px;
    margin-bottom: 18px;
    box-shadow: var(--rp-elev-2);
}

/* ===== Section header · icono editorial + kicker + Fraunces h2 ===== */
.reservas-page .reservas-vencidas-head,
.reservas-page .reservas-pendientes-block-head {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 18px;
    padding-bottom: 0;
    border-bottom: 0;
}
.reservas-page .reservas-vencidas-head > div:not(.reservas-vencidas-icon),
.reservas-page .reservas-pendientes-block-head > div:not(.reservas-pendientes-icon) {
    flex: 1;
    min-width: 0;
    padding-top: 4px;
}
.reservas-page .reservas-vencidas-icon,
.reservas-page .reservas-pendientes-icon {
    width: 44px !important;
    height: 44px !important;
    border-radius: 14px !important;
    flex-shrink: 0;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    box-shadow:
        inset 0 0 0 0.5px var(--rp-line-soft),
        0 1px 2px rgba(20,39,43,.04);
}
.reservas-page .reservas-pendientes-icon {
    background: color-mix(in srgb, var(--accent-soft) 70%, var(--surface)) !important;
    color: var(--accent-hover) !important;
}
.reservas-page .reservas-vencidas-icon {
    background: color-mix(in srgb, var(--warm-soft, #FEF3C7) 60%, var(--surface)) !important;
    color: #B45309 !important;
}
.reservas-page .reservas-vencidas-head h2,
.reservas-page .reservas-pendientes-block-head h2 {
    font-family: 'Fraunces', serif !important;
    font-weight: 500 !important;
    /* opsz auto · que el browser elija el tamaño óptico que corresponde al
       font-size real (24px) en vez del 'opsz' 96 que era para display. */
    font-size: clamp(20px, 2.2vw, 24px) !important;
    line-height: 1.15 !important;
    letter-spacing: -0.018em !important;
    color: var(--ink) !important;
    margin: 0 0 4px !important;
}
.reservas-page .reservas-vencidas-head p,
.reservas-page .reservas-pendientes-block-head p {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    line-height: 1.5;
    color: var(--ink-3);
    margin: 0;
    max-width: 560px;
}

/* ===== Grid de cards · responsive auto-fill ===== */
.reservas-page .reservas-vencidas-grid,
.reservas-page .page-reservas-pendientes .reservas-pendientes-grid,
.reservas-page .reservas-pendientes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr));
    gap: 14px;
    margin-top: 0;
}

/* ===== Card de reserva · sombra layered · sin border sólido ===== */
.reservas-page .reserva-pendiente-card,
.reservas-page .reserva-vencida-card {
    background: var(--surface);
    border: 0;
    border-radius: 16px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    box-shadow: var(--rp-elev-1);
    transition: box-shadow 200ms ease, transform 180ms ease;
}
.reservas-page .reserva-pendiente-card:hover,
.reservas-page .reserva-vencida-card:hover {
    box-shadow: var(--rp-elev-2);
    transform: translateY(-1px);
    border: 0;
}
.reservas-page .reserva-pendiente-card.is-urgent {
    background: linear-gradient(180deg,
        color-mix(in srgb, #FEE2E2 24%, var(--surface)) 0%,
        var(--surface) 60%);
    box-shadow:
        inset 0 0 0 0.5px color-mix(in srgb, #DC2626 24%, var(--rp-line)),
        0 1px 2px rgba(20,39,43,.04),
        0 6px 18px -8px rgba(220,38,38,.10);
}

/* ===== Card header · nombre + email | countdown ===== */
.reservas-page .reserva-pendiente-head,
.reservas-page .reserva-vencida-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}
.reservas-page .reserva-pendiente-head .reserva-pendiente-paciente strong,
.reservas-page .reserva-vencida-head strong {
    display: block;
    /* Nombre del paciente en sans (Inter), igual que en otras cards de la app
       (agenda, pacientes). La serif decorativa ('opsz' 96 a 18px) generaba
       una "P" exagerada que rompía el lenguaje del resto del producto. */
    font-family: 'Inter', sans-serif !important;
    font-weight: 650 !important;
    font-size: 15px !important;
    line-height: 1.25 !important;
    letter-spacing: -0.005em !important;
    color: var(--ink) !important;
}
.reservas-page .reserva-pendiente-head .reserva-pendiente-paciente small,
.reservas-page .reserva-vencida-head small {
    display: block;
    margin-top: 3px;
    font-family: 'Inter', sans-serif !important;
    font-size: 12.5px !important;
    font-weight: 400 !important;
    color: var(--ink-3) !important;
    word-break: break-word;
}

/* ===== Countdown pill · sage soft + tabular-nums + dot pulsante ===== */
.reservas-page .reserva-pendiente-countdown {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 12px 5px 9px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent-soft) 56%, var(--surface));
    color: var(--accent-hover);
    font-family: 'Inter Tight', 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.005em;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    box-shadow: inset 0 0 0 0.5px color-mix(in srgb, var(--accent) 14%, transparent);
}
.reservas-page .reserva-pendiente-countdown::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent);
    flex-shrink: 0;
}
.reservas-page .reserva-pendiente-countdown.is-urgent {
    background: color-mix(in srgb, #FEE2E2 78%, var(--surface));
    color: #991B1B;
    box-shadow: inset 0 0 0 0.5px rgba(220,38,38,.18);
}
.reservas-page .reserva-pendiente-countdown.is-urgent::before {
    background: #DC2626;
    box-shadow: 0 0 0 3px rgba(220,38,38,.18);
    animation: rp-pulse-urgent 1.6s ease-in-out infinite;
}
@keyframes rp-pulse-urgent {
    0%, 100% { box-shadow: 0 0 0 3px rgba(220,38,38,.18); transform: scale(1); }
    50%      { box-shadow: 0 0 0 5px rgba(220,38,38,.10); transform: scale(0.92); }
}

/* ===== Tag de "vencida hace X" · warm soft ===== */
.reservas-page .reserva-vencida-tag {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 11px 4px 9px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--warm-soft, #FEF3C7) 64%, var(--surface));
    color: #92400E;
    font-family: 'Inter Tight', 'Inter', sans-serif;
    font-size: 11.5px;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    box-shadow: inset 0 0 0 0.5px rgba(180,83,9,.16);
}
.reservas-page .reserva-vencida-tag::before {
    content: '';
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #D97706;
    flex-shrink: 0;
}

/* ===== Datos de la cita · grid label/value editorial · sin fondo gris ===== */
.reservas-page .reserva-vencida-datos,
.reservas-page .reserva-pendiente-card .reserva-vencida-datos {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 18px;
    margin: 4px 0 0;
    padding: 14px 0 0;
    background: transparent;
    border-radius: 0;
    border-top: 0.5px solid var(--rp-line-soft);
}
.reservas-page .reserva-vencida-datos > div { margin: 0; }
.reservas-page .reserva-vencida-datos dt {
    font-family: 'Inter', sans-serif !important;
    font-size: 10.5px !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.12em !important;
    color: var(--ink-3) !important;
    margin: 0 0 4px !important;
}
.reservas-page .reserva-vencida-datos dd {
    margin: 0 !important;
    font-family: 'Inter Tight', 'Inter', sans-serif !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.3 !important;
    color: var(--ink) !important;
    font-variant-numeric: tabular-nums;
}

/* ===== Footer · acciones · primary + secondary refinados ===== */
.reservas-page .reserva-pendiente-foot,
.reservas-page .reserva-vencida-foot {
    margin-top: auto;
    padding-top: 12px;
    border-top: 0.5px solid var(--rp-line-soft);
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.reservas-page .reserva-vencida-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* Primary · "Reabrir y avisar" */
.reservas-page .btn-reabrir-reserva {
    flex: 1;
    min-width: 140px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 16px;
    border: 0;
    border-radius: 11px;
    background: var(--accent-hover);
    color: white;
    font-family: 'Inter', sans-serif;
    font-size: 13.5px;
    font-weight: 500;
    letter-spacing: -0.005em;
    line-height: 1;
    cursor: pointer;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.10),
        0 1px 2px color-mix(in srgb, var(--accent-hover) 50%, transparent),
        0 4px 12px color-mix(in srgb, var(--accent-hover) 28%, transparent);
    transition: transform 120ms ease, background 180ms ease, box-shadow 180ms ease;
}
.reservas-page .btn-reabrir-reserva:hover:not(:disabled) {
    background: var(--accent);
    transform: translateY(-0.5px);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.12),
        0 2px 4px color-mix(in srgb, var(--accent-hover) 60%, transparent),
        0 8px 20px color-mix(in srgb, var(--accent-hover) 36%, transparent);
}
.reservas-page .btn-reabrir-reserva:active:not(:disabled) {
    transform: translateY(0);
}
.reservas-page .btn-reabrir-reserva:disabled,
.reservas-page .btn-reabrir-reserva.is-loading {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* Secondary · "Ver cita" */
.reservas-page .btn-link-cita {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 9px 14px;
    border-radius: 10px;
    background: var(--surface);
    color: var(--ink-2);
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: -0.005em;
    line-height: 1;
    text-decoration: none;
    box-shadow: inset 0 0 0 0.5px var(--rp-line);
    transition: background 180ms ease, color 180ms ease, box-shadow 180ms ease, transform 120ms ease;
}
.reservas-page .btn-link-cita:hover {
    background: color-mix(in srgb, var(--accent-soft) 22%, var(--surface));
    color: var(--accent-hover);
    box-shadow: inset 0 0 0 0.5px color-mix(in srgb, var(--accent) 32%, var(--rp-line));
    transform: translateY(-0.5px);
}

/* En cards de pendientes el "Ver cita" va solo · centrado-alineado start */
.reservas-page .reserva-pendiente-foot .btn-link-cita {
    align-self: flex-start;
}

/* Hint sobre mail desactivado */
.reservas-page .reserva-vencida-hint {
    margin: 0;
    font-family: 'Inter', sans-serif;
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--ink-3);
}
.reservas-page .reserva-vencida-hint a {
    color: var(--accent-hover);
    text-decoration: none;
    font-weight: 500;
    border-bottom: 0.5px solid color-mix(in srgb, var(--accent) 38%, transparent);
}
.reservas-page .reserva-vencida-hint a:hover {
    border-bottom-color: var(--accent);
}

/* ===== Empty state · editorial · circle sage + check ===== */
.reservas-page .reservas-empty {
    background: var(--surface);
    border: 0;
    border-radius: 20px;
    padding: 64px 32px 56px;
    text-align: center;
    box-shadow: var(--rp-elev-2);
}
.reservas-page .reservas-empty-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--accent-soft) 60%, var(--surface));
    color: var(--accent-hover);
    margin-bottom: 18px;
    box-shadow:
        inset 0 0 0 1px color-mix(in srgb, var(--accent) 8%, transparent),
        0 1px 2px rgba(20,39,43,.04),
        0 8px 24px color-mix(in srgb, var(--accent) 12%, transparent);
}
.reservas-page .reservas-empty h2 {
    font-family: 'Fraunces', serif !important;
    font-weight: 500 !important;
    font-variation-settings: 'opsz' 144;
    font-size: clamp(24px, 2.6vw, 30px) !important;
    line-height: 1.1 !important;
    letter-spacing: -0.022em !important;
    color: var(--ink) !important;
    margin: 0 0 8px !important;
}
.reservas-page .reservas-empty p {
    font-family: 'Inter', sans-serif;
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--ink-3);
    margin: 0;
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
}

/* ===== Responsive · mobile compact ===== */
@media (max-width: 720px) {
    .reservas-page .reservas-vencidas-block,
    .reservas-page .reservas-pendientes-block {
        padding: 20px 16px 18px;
        border-radius: 14px;
    }
    .reservas-page .reservas-vencidas-head,
    .reservas-page .reservas-pendientes-block-head {
        gap: 12px;
    }
    .reservas-page .reservas-vencidas-icon,
    .reservas-page .reservas-pendientes-icon {
        width: 38px !important;
        height: 38px !important;
        border-radius: 11px !important;
    }
    .reservas-page .reserva-pendiente-card,
    .reservas-page .reserva-vencida-card {
        padding: 16px;
        border-radius: 14px;
    }
    .reservas-page .reserva-pendiente-head .reserva-pendiente-paciente strong,
    .reservas-page .reserva-vencida-head strong {
        font-size: 16px !important;
    }
    .reservas-page .reserva-vencida-datos {
        gap: 10px 14px;
    }
    .reservas-page .reservas-empty {
        padding: 48px 20px 40px;
    }
}

/* ========================================================================== */
/* ===== FIN · /reservas-pendientes REDESIGN =============================== */
/* ========================================================================== */


/* ==========================================================================
   ===== RESERVA PÚBLICA · MOBILE · ALINEAR BULLETS 1 Y 2 ===================
   ==========================================================================
   En mobile, la card "Elige tu consulta" (donde vive el bullet 1) era una
   card anidada con bg + hairline + padding interno · eso indentaba el
   bullet 1 vs el bullet 2 (que vive directo en la form card). Acá disolvemos
   el frame de esa card SOLO en mobile · pasa a ser una sección plana dentro
   del hero, igual jerarquía que el perfil. En desktop el frame se mantiene
   (en desktop el summary vive al costado del perfil en col 2 · ahí el frame
   sí aporta jerarquía visual).
   ========================================================================== */
@media (max-width: 860px) {
    .public-booking .public-booking-summary {
        background: transparent !important;
        box-shadow: none !important;
        border: 0 !important;
        padding: 0 !important;
        border-radius: 0 !important;
        overflow: visible !important;
    }
    /* La barra superior de marca (::before del card) se va con el frame · si
       existiera para summary, también la silenciamos. */
    .public-booking .public-booking-summary::before {
        display: none !important;
    }
    /* Mantenemos el separador entre profile y summary · ahora viene de un
       border-top sutil, no del card frame. Hairline 0.5px con el mismo
       lenguaje del resto de divisores. */
    .public-booking .public-booking-summary {
        margin-top: 18px;
        padding-top: 20px !important;
        border-top: 0.5px solid color-mix(in srgb, var(--ink) 8%, transparent) !important;
    }
    /* Header del summary (badge "1" + título + "60 min") · sin padding
       horizontal · que el bullet 1 quede pegado al edge del card padre,
       igual que el bullet 2 de la form card. */
    .public-booking .public-summary-head {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

/* ════════════════════════════════════════════════════════════════════════
   RESEÑAS ANÓNIMAS · perfil público del psicólogo
   Hermana de .public-booking-hero y .public-booking-card · mismo card frame.
   Anonimato visual: avatar con iniciales sobre accent-soft, sin foto.
   ════════════════════════════════════════════════════════════════════════ */
.public-reviews-card {
    border: 1px solid color-mix(in srgb, var(--accent) 16%, var(--line));
    border-radius: 24px;
    background: color-mix(in srgb, var(--surface) 94%, transparent);
    box-shadow: 0 34px 100px -68px color-mix(in srgb, var(--ink) 70%, transparent);
    padding: 28px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-width: 0;
}

/* ── Encabezado: título a la izquierda, score a la derecha ────────────── */
.public-reviews-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 24px;
    flex-wrap: wrap;
}
.public-reviews-title h2 {
    margin: 0 0 4px;
    color: var(--ink);
    font-size: 22px;
    line-height: 1.15;
    letter-spacing: -.005em;
}
.public-reviews-title p {
    margin: 0;
    color: var(--ink-3);
    font-size: 13.5px;
    line-height: 1.5;
    max-width: 480px;
}
.public-reviews-score {
    text-align: right;
    min-width: 110px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}
.public-reviews-score-num {
    font-family: 'Cormorant Garamond', 'Times New Roman', serif;
    font-size: 38px;
    font-weight: 600;
    line-height: 1;
    color: var(--ink);
    letter-spacing: -.02em;
}
.public-reviews-score-stars {
    display: inline-flex;
    gap: 1px;
    color: #E0A93C; /* dorado sobrio, alineado con el lenguaje cálido del accent */
}
.public-reviews-score-stars svg {
    width: 14px;
    height: 14px;
    fill: currentColor;
}
.public-reviews-score-count {
    font-size: 11.5px;
    color: var(--muted);
    font-weight: 600;
    letter-spacing: .02em;
}

/* ── Filtros · pills sobrios, mismo lenguaje que specialty-chips ──────── */
.public-reviews-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.public-reviews-chip {
    appearance: none;
    border: 1px solid var(--line);
    background: color-mix(in srgb, var(--surface) 80%, transparent);
    color: var(--ink-2);
    font-size: 12.5px;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 999px;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease, color .15s ease;
    font-family: inherit;
}
.public-reviews-chip:hover {
    border-color: color-mix(in srgb, var(--accent) 35%, var(--line));
    color: var(--ink);
}
.public-reviews-chip.is-active {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-fg);
}

/* ── Grid de reseñas · 2 col desktop, 1 col mobile ────────────────────── */
.public-reviews-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
@media (max-width: 760px) {
    .public-reviews-grid { grid-template-columns: 1fr; }
    .public-reviews-card { padding: 20px; }
    .public-reviews-head { gap: 12px; }
    .public-reviews-score { align-items: flex-start; text-align: left; }
}

/* ── Tarjeta individual ───────────────────────────────────────────────── */
.public-review {
    border: 1px solid var(--line-soft);
    border-radius: 14px;
    background: color-mix(in srgb, var(--surface) 96%, transparent);
    padding: 14px 16px;
    transition: border-color .15s ease, transform .15s ease;
    min-width: 0;
}
.public-review:hover {
    border-color: color-mix(in srgb, var(--accent) 22%, var(--line));
}

.public-review-head {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 9px;
}
.public-review-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--accent-soft);
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 11.5px;
    letter-spacing: .04em;
    flex-shrink: 0;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.public-review-who {
    flex: 1;
    min-width: 0;
}
.public-review-line1 {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    line-height: 1.3;
}
.public-review-name {
    font-weight: 700;
    font-size: 13.5px;
    color: var(--ink);
    letter-spacing: .01em;
}
.public-review-age {
    font-size: 12.5px;
    color: var(--ink-3);
}
.public-review-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 3px;
    font-size: 11.5px;
    color: var(--muted);
}
.public-review-stars {
    display: inline-flex;
    gap: 1px;
    color: #E0A93C;
}
.public-review-stars svg {
    width: 12px;
    height: 12px;
    fill: currentColor;
}
.public-review-stars svg.is-empty {
    color: color-mix(in srgb, var(--ink) 14%, var(--line));
}
.public-review-date {
    font-weight: 500;
}

/* ── Badge verificada / sin verificar ─────────────────────────────────── */
.public-review-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10.5px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
    line-height: 1.5;
    letter-spacing: .02em;
}
.public-review-badge.is-verified {
    background: var(--accent-soft);
    color: var(--accent);
}
.public-review-badge.is-verified svg {
    width: 11px;
    height: 11px;
}
.public-review-badge.is-unverified {
    background: color-mix(in srgb, var(--ink) 5%, var(--surface-2));
    color: var(--muted);
}

/* ── Cuerpo y tags ────────────────────────────────────────────────────── */
.public-review-body {
    margin: 4px 0 11px;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--ink-2);
    overflow-wrap: anywhere;
}
.public-review-foot {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    align-items: center;
}
.public-review-tag {
    font-size: 10.5px;
    color: var(--ink-3);
    background: color-mix(in srgb, var(--surface-2) 50%, var(--surface));
    border: 1px solid var(--line-soft);
    padding: 2px 8px;
    border-radius: 6px;
    font-weight: 600;
    letter-spacing: .01em;
}

/* ── Footer: leyenda + CTA ────────────────────────────────────────────── */
.public-reviews-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    padding-top: 14px;
    border-top: 1px solid var(--line-soft);
}
.public-reviews-legend {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--muted);
}
.public-reviews-legend-text {
    font-weight: 500;
}
.public-reviews-cta {
    appearance: none;
    background: var(--surface);
    border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line));
    color: var(--accent);
    font-size: 12.5px;
    font-weight: 700;
    padding: 8px 14px;
    border-radius: 999px;
    cursor: pointer;
    letter-spacing: .01em;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
    font-family: inherit;
}
.public-reviews-cta:hover {
    background: var(--accent);
    color: var(--accent-fg);
    border-color: var(--accent);
}

/* ════════════════════════════════════════════════════════════════════════
   Rediseño /r/{slug} · hero + secciones bloque + carrusel testimonios
   Aprovecha tokens existentes (--accent, --surface, --line, --shadow).
   ════════════════════════════════════════════════════════════════════════ */

/* Topbar: brand a la izquierda + 2 botones a la derecha */
.public-topbar-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}
.public-topbar-actions {
    display: inline-flex;
    gap: 8px;
}
.public-topbar-btn {
    width: 38px; height: 38px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 12px;
    color: var(--accent);
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer; appearance: none;
    transition: border-color .15s ease, background .15s ease;
}
.public-topbar-btn:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 5%, var(--surface)); }

/* Columna izquierda del grid · contiene hero + secciones */
.public-booking-left {
    min-width: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
}

/* Mobile / tablet · colapsa el grid del intro a 1 columna. Sin esto, el
   default (1.35fr / .65fr con min 240px en la derecha) aplasta el hero a
   un ancho insuficiente y todo el contenido se hace invisible/desbordado. */
@media (max-width: 860px) {
    .public-booking-intro {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
    }
}

/* Hero card · centrado single-column */
.public-hero-card {
    width: 100%;
    text-align: center;
    padding: 12px 0 8px;
    display: flex; flex-direction: column; align-items: center;
}
.public-hero-avatar {
    width: 160px; height: 160px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 25%,
        #fff,
        color-mix(in srgb, var(--surface) 92%, var(--accent-soft)) 55%,
        color-mix(in srgb, var(--accent-soft) 60%, var(--surface)));
    border: 1px solid var(--line-soft);
    box-shadow:
        inset 0 0 0 10px rgba(255,255,255,.6),
        0 8px 40px -16px color-mix(in srgb, var(--ink) 22%, transparent);
    display: flex; align-items: center; justify-content: center;
    margin: 0 0 22px;
    overflow: hidden;
}
.public-hero-photo { width: 100%; height: 100%; object-fit: cover; }
.public-hero-letter {
    font-family: 'Cormorant Garamond', 'Times New Roman', serif;
    font-size: 76px; font-weight: 600;
    color: #B8843E;     /* amber del lenguaje · igual que mockup */
    line-height: 1;
}
.public-hero-kicker {
    display: inline-flex; align-items: center; gap: 12px;
    font-size: 11.5px; font-weight: 700;
    color: var(--accent);
    letter-spacing: .14em; text-transform: uppercase;
    margin-bottom: 10px;
}
.public-hero-name {
    font-size: 48px; margin: 0 0 14px;
    line-height: 1.05; letter-spacing: -.005em;
    color: var(--ink);
}
.public-hero-meta {
    display: flex; flex-direction: column; gap: 10px;
    align-items: center;
    width: 100%;
    margin-bottom: 4px;
}
.public-hero-credential {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--surface);
    border: 1px solid var(--line);
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 13.5px; color: var(--ink-2); font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.public-hero-credential-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--accent);
}
/* Centro el contenedor original de chips dentro del hero, permitiendo wrap
   y respetando el ancho disponible (sin desbordar). */
.public-hero-card .public-specialty-chips {
    justify-content: center;
    max-width: 100%;
    flex-wrap: wrap;
}

/* Section block · "Sobre mí" / "Lo que valoran los pacientes".
   Espaciado apretado: el aire visual venía de margin+padding compuesto
   (48px) entre cada bloque, demasiado en mobile. */
.public-section-block {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--line-soft);
}
.public-section-block:first-of-type { margin-top: 10px; }
.public-section-block-head {
    display: flex; align-items: center; gap: 16px;
    margin-bottom: 12px;
}
.public-section-block-icon {
    width: 44px; height: 44px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--accent-soft) 60%, var(--surface));
    color: var(--accent);
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.public-section-block-title {
    font-size: 28px; margin: 0; line-height: 1.1; letter-spacing: -.005em;
    color: var(--ink);
}
.public-section-block-body {
    color: var(--ink-2);
    font-size: 15px; line-height: 1.6;
    margin: 0 0 18px;
    padding-left: 60px;   /* alineado con el título · sangría del ícono */
}

/* Carrusel testimonios · 2 cards desktop, 1 mobile · dots + arrows */
.reviews-carousel-wrap {
    position: relative;
    margin: 0 0 16px;
}
.reviews-carousel {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - 18px) / 2);
    gap: 18px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 4px 4px 12px;
    scrollbar-width: none;
}
.reviews-carousel::-webkit-scrollbar { display: none; }
.review-card {
    scroll-snap-align: start;
    background: var(--surface);
    border: 1px solid var(--line-soft);
    border-radius: 20px;
    padding: 24px 22px 20px;
    display: flex; flex-direction: column;
    min-height: 200px;
    transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.review-card:hover {
    border-color: color-mix(in srgb, var(--accent) 22%, var(--line));
    transform: translateY(-2px);
    box-shadow: 0 12px 24px -18px rgba(31,52,87,.18);
}
.review-mark {
    color: var(--accent);
    margin-bottom: 10px;
    line-height: 0;
}
.review-body {
    color: var(--ink);
    font-size: 15px; line-height: 1.55;
    margin: 0 0 18px;
    flex: 1;
}
.review-foot {
    padding-top: 14px;
    border-top: 1px solid var(--line-soft);
    color: var(--accent);
    font-size: 13.5px; line-height: 1.4;
}
.review-foot b {
    display: block;
    color: var(--accent);
    font-weight: 700;
    margin-bottom: 2px;
}
.review-foot span { color: var(--accent); opacity: .82; font-weight: 500; }

.reviews-arrow {
    position: absolute;
    top: 50%; transform: translateY(-50%);
    right: -8px;
    width: 38px; height: 38px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 50%;
    color: var(--ink-2);
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer; appearance: none;
    box-shadow: 0 6px 16px -8px rgba(31,52,87,.22);
    transition: border-color .15s ease, color .15s ease, transform .15s ease;
    z-index: 2;
}
.reviews-arrow:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.reviews-arrow:disabled { opacity: .35; cursor: not-allowed; }
.reviews-arrow.is-prev { right: auto; left: -8px; }

.reviews-dots {
    display: flex; justify-content: center; gap: 8px;
    margin-top: 6px;
}
.reviews-dot {
    appearance: none; border: 0;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--line);
    cursor: pointer;
    padding: 0;
    transition: background .18s ease, width .18s ease;
}
.reviews-dot:hover { background: color-mix(in srgb, var(--accent) 30%, var(--line)); }
.reviews-dot.is-active {
    background: var(--accent);
    width: 24px;
    border-radius: 999px;
}

/* Mobile · 1 card por página, sin flechas */
@media (max-width: 720px) {
    .public-hero-name { font-size: 36px; }
    .public-hero-avatar { width: 132px; height: 132px; }
    .public-hero-letter { font-size: 62px; }
    .public-section-block { margin-top: 8px; padding-top: 8px; }
    .public-section-block:first-of-type { margin-top: 6px; }
    .public-section-block-title { font-size: 22px; }
    .public-section-block-body { padding-left: 0; font-size: 14px; }
    .public-section-block-head { gap: 12px; }
    .public-section-block-icon { width: 38px; height: 38px; }
    .reviews-carousel { grid-auto-columns: 100%; gap: 14px; }
    .reviews-arrow { display: none; }
}

/* Social section · misma estructura visual que sections block */
.public-social-section { text-align: center; }
.public-social-section .public-social { display: flex; flex-direction: column; align-items: center; gap: 10px; }

/* ════════════════════════════════════════════════════════════════════════
   /r/{slug} · DATE STRIP (reemplaza al date-picker popover) + banner del
   día + slots 2 columnas. Diseño para pacientes con ansiedad:
   - Transiciones suaves (220ms)
   - Sin overflow horizontal escondido
   - Focus visible accesible
   - Estados disabled informativos, no agresivos
   ════════════════════════════════════════════════════════════════════════ */

.public-datestrip-head {
    display: flex; align-items: center; gap: 12px;
    margin: 4px 0 14px;
}
.public-datestrip-icon {
    width: 38px; height: 38px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--accent-soft) 60%, var(--surface));
    color: var(--accent);
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.public-datestrip-head-text { min-width: 0; }
.public-datestrip-title {
    display: block;
    font-size: 15.5px; font-weight: 700; color: var(--ink);
    letter-spacing: -.005em;
    line-height: 1.2;
}
.public-datestrip-sub {
    display: block;
    font-size: 12.5px; color: var(--muted);
    margin-top: 2px;
}

.public-monthbar {
    position: relative;
    min-height: 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 10px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}
.public-monthbar-current {
    appearance: none;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 7px 13px 7px 9px;
    border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--line));
    border-radius: 14px;
    background: var(--surface);
    color: var(--ink);
    font-family: 'Inter Tight', 'Inter', sans-serif;
    cursor: pointer;
    box-shadow:
        0 1px 2px rgba(20,39,43,.03),
        inset 0 1px 0 rgba(255,255,255,.5);
    transition: border-color 160ms ease, background 160ms ease, color 160ms ease, box-shadow 160ms ease;
}
.public-monthbar-current:hover {
    background: color-mix(in srgb, var(--accent-soft) 38%, var(--surface));
    border-color: color-mix(in srgb, var(--accent) 42%, var(--line));
    color: var(--accent-hover);
}
.public-monthbar-current:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 12%, transparent);
}
.public-monthbar-current.is-open {
    border-color: color-mix(in srgb, var(--accent) 58%, var(--line));
    box-shadow:
        0 8px 24px -18px color-mix(in srgb, var(--accent) 42%, transparent),
        0 0 0 3px color-mix(in srgb, var(--accent) 8%, transparent);
}
.public-monthbar-icon {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: color-mix(in srgb, var(--accent-soft) 58%, var(--surface));
    color: var(--accent-hover);
    flex: 0 0 auto;
}
.public-monthbar-label {
    min-width: 0;
    color: inherit;
    font-size: 15px;
    font-weight: 650;
    line-height: 1.2;
    letter-spacing: -0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.public-monthbar-caret {
    color: color-mix(in srgb, var(--ink-3) 78%, var(--ink));
    flex: 0 0 auto;
    transition: transform 160ms ease;
}
.public-monthbar-current.is-open .public-monthbar-caret {
    transform: rotate(180deg);
}
.public-monthbar-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}
.public-monthbar-nav {
    appearance: none;
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid color-mix(in srgb, var(--accent) 12%, var(--line));
    border-radius: 50%;
    background: var(--surface);
    color: var(--ink-2);
    cursor: pointer;
    box-shadow: 0 6px 16px -12px rgba(31,52,87,.22);
    transition: border-color 160ms ease, color 160ms ease, box-shadow 160ms ease, opacity 160ms ease;
}
.public-monthbar-nav:hover:not(:disabled) {
    border-color: color-mix(in srgb, var(--accent) 42%, var(--line));
    color: var(--accent-hover);
    box-shadow: 0 8px 20px -12px color-mix(in srgb, var(--accent) 34%, transparent);
}
.public-monthbar-nav:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 12%, transparent);
}
.public-monthbar-nav:disabled {
    opacity: .42;
    cursor: not-allowed;
    box-shadow: none;
}
.public-monthbar-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    width: min(500px, 100%, calc(100vw - 44px));
    box-sizing: border-box;
    z-index: 20;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    padding: 16px;
    border-radius: 16px;
    background: var(--surface);
    overflow: visible;
    box-shadow:
        0 16px 42px -22px color-mix(in srgb, var(--ink) 42%, transparent),
        0 1px 2px rgba(20,39,43,.04),
        inset 0 0 0 0.5px color-mix(in srgb, var(--accent) 14%, var(--line-soft));
}
.public-monthbar-menu::before {
    content: "";
    position: absolute;
    top: -7px;
    left: 94px;
    width: 14px;
    height: 14px;
    background: var(--surface);
    transform: rotate(45deg);
    box-shadow: -0.5px -0.5px 0 color-mix(in srgb, var(--accent) 14%, var(--line-soft));
}
.public-monthbar-menu[hidden] {
    display: none !important;
}
.public-monthbar-option {
    appearance: none;
    width: 100%;
    min-width: 0;
    min-height: 118px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 14px 10px 12px;
    border: 1px solid color-mix(in srgb, var(--accent) 12%, var(--line));
    border-radius: 14px;
    background: color-mix(in srgb, var(--surface) 98%, var(--accent-soft));
    color: var(--ink);
    font-family: 'Inter Tight', 'Inter', sans-serif;
    text-align: center;
    cursor: pointer;
    box-shadow: 0 8px 24px -22px color-mix(in srgb, var(--ink) 42%, transparent);
    transition: border-color 160ms ease, background 160ms ease, color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}
.public-monthbar-option:hover,
.public-monthbar-option:focus-visible {
    outline: 0;
    border-color: color-mix(in srgb, var(--accent) 32%, var(--line));
    background: color-mix(in srgb, var(--accent-soft) 28%, var(--surface));
    color: var(--accent-hover);
    transform: translateY(-1px);
}
.public-monthbar-option.is-active {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent-soft) 34%, var(--surface));
    color: var(--accent-hover);
    box-shadow:
        0 10px 26px -18px color-mix(in srgb, var(--accent) 45%, transparent),
        inset 0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent);
}
.public-monthbar-option.is-active::after {
    content: none;
    display: none;
}
.public-monthbar-option-icon {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: color-mix(in srgb, var(--accent-soft) 60%, var(--surface));
    color: var(--accent);
    margin-bottom: 3px;
}
.public-monthbar-option-name {
    display: block;
    max-width: 100%;
    color: inherit;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.public-monthbar-option-year {
    display: block;
    color: var(--ink-3);
    font-size: 13px;
    font-weight: 450;
    line-height: 1.15;
}

.public-datestrip-wrap {
    position: relative;
    margin: 0 0 16px;
}
.public-datestrip {
    display: flex; gap: 10px;
    overflow-x: auto;
    padding: 4px 4px 12px;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.public-datestrip::-webkit-scrollbar { display: none; }

.public-datecard {
    position: relative;
    flex: 0 0 calc((100% - 50px) / 6);   /* 6 visibles desktop */
    min-width: 88px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-md, 14px);
    padding: 12px 8px 10px;
    text-align: center;
    cursor: pointer;
    appearance: none;
    font-family: inherit;
    scroll-snap-align: start;
    transition: border-color .22s cubic-bezier(.2,.72,.18,1),
                transform .22s cubic-bezier(.2,.72,.18,1),
                box-shadow .22s cubic-bezier(.2,.72,.18,1);
}
.public-datecard:hover:not(.is-disabled):not(.is-active) {
    border-color: color-mix(in srgb, var(--accent) 35%, var(--line));
    transform: translateY(-1px);
}
.public-datecard:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--accent) 55%, transparent);
    outline-offset: 2px;
}
.public-datecard.is-active {
    border: 1.5px solid var(--accent);
    box-shadow: 0 6px 18px -10px color-mix(in srgb, var(--accent) 45%, transparent);
}
.public-datecard.is-disabled {
    background: color-mix(in srgb, var(--surface-2, var(--surface)) 60%, var(--surface));
    border-color: var(--line-soft, var(--line));
    color: var(--disabled, var(--muted));
    cursor: not-allowed;
}
.public-datecard-dow {
    display: block;
    font-size: 11px; font-weight: 400;
    text-transform: uppercase; letter-spacing: .12em;
    color: var(--muted);
    margin-bottom: 4px;
}
.public-datecard-num {
    display: block;
    font-family: 'Fraunces', 'Cormorant Garamond', 'Times New Roman', serif;
    font-size: 32px; font-weight: 400;
    color: var(--ink);
    line-height: 1;
    margin-bottom: 6px;
    font-variant-numeric: tabular-nums;
    /* opsz baja en Fraunces · ductus más fino, sin contraste pesado */
    font-variation-settings: "opsz" 14, "wght" 400;
}
.public-datecard.is-disabled .public-datecard-num { color: var(--disabled, var(--muted)); }
.public-datecard-rule {
    display: block;
    width: 18px; height: 1.5px;
    background: var(--line);
    margin: 0 auto 6px;
    border-radius: 2px;
}
.public-datecard-badge {
    display: inline-block;
    font-size: 9.5px;
    letter-spacing: .06em;
    padding: 2px 7px;
    border-radius: 999px;
    min-height: 16px;
}
.public-datecard-badge.is-today {
    background: color-mix(in srgb, var(--ok, #3E8D5A) 18%, var(--surface));
    color: color-mix(in srgb, var(--ok, #3E8D5A) 78%, var(--ink));
}
.public-datecard-badge.is-tomorrow {
    background: color-mix(in srgb, var(--accent) 14%, var(--surface));
    color: var(--accent);
}
.public-datecard-badge-empty {
    display: inline-block; min-height: 16px; visibility: hidden;
}
/* Pill "en X días" en el banner debajo del strip, al lado del título. */
.public-day-banner-rel {
    display: inline-flex;
    align-items: center;
    margin-left: 0;
    padding: 2px 8px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent-soft) 28%, var(--surface));
    color: color-mix(in srgb, var(--accent-hover) 58%, var(--ink-2));
    font-size: 11.5px;
    font-weight: 650;
    letter-spacing: 0;
    vertical-align: middle;
    font-family: 'Inter Tight', 'Inter', sans-serif;
    font-feature-settings: "tnum" 1;
}
.public-day-banner-rel.is-today {
    background: color-mix(in srgb, var(--ok, #3E8D5A) 12%, var(--surface));
    color: color-mix(in srgb, var(--ok, #3E8D5A) 62%, var(--ink));
}

/* Conteo sutil de cupos · solo aparece cuando hay escasez (libres ≤ 3) o
   cuando el día está lleno. Sin uppercase, sin pills, sin urgencia · pensado
   para no estresar a pacientes con ansiedad. */
.public-datecard-count {
    display: block;
    margin-top: 4px;
    font-size: 10.5px; font-weight: 500;
    color: var(--muted);
    line-height: 1.2;
    letter-spacing: 0;
    text-transform: none;
}
.public-datecard-count.is-low {
    color: color-mix(in srgb, var(--muted) 70%, var(--ink) 30%);
}
.public-datecard-count.is-empty {
    color: var(--muted);
    opacity: .85;
}

/* Estado "sin cupo": día en gris, sin tachado · clickeable sigue activo
   para que el paciente vea el detalle si quiere, pero la card pierde realce. */
.public-datecard.is-sold-out {
    background: color-mix(in srgb, var(--surface-2, var(--surface)) 40%, var(--surface));
    border-color: color-mix(in srgb, var(--line) 70%, transparent);
}
.public-datecard.is-sold-out .public-datecard-dow,
.public-datecard.is-sold-out .public-datecard-num {
    color: color-mix(in srgb, var(--muted) 80%, var(--ink) 20%);
}
.public-datecard.is-sold-out:hover:not(.is-active) {
    background: color-mix(in srgb, var(--surface-2, var(--surface)) 55%, var(--surface));
}

/* Banner del día seleccionado */
.public-day-banner {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 13px 15px;
    margin: 0 0 16px;
    background: color-mix(in srgb, var(--accent-soft) 8%, var(--surface));
    border: 1px solid color-mix(in srgb, var(--accent) 10%, var(--line-soft));
    border-radius: 18px;
}
.public-day-banner-icon {
    width: 34px; height: 34px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--accent-soft) 26%, var(--surface));
    color: color-mix(in srgb, var(--accent-hover) 60%, var(--ink-3));
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.public-day-banner-text { min-width: 0; }
.public-day-banner-title {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: space-between;
    flex-wrap: nowrap;
    font-size: 15px; font-weight: 700; color: var(--ink);
    line-height: 1.2;
}
.public-day-banner-title > #publicDateLabel {
    min-width: 0;
    flex: 1 1 auto;
}
.public-day-banner-title > #publicDateRelPill {
    margin-left: auto;
    flex: 0 0 auto;
}
.public-day-banner-sub {
    margin-top: 5px;
    font-size: 13px;
    color: color-mix(in srgb, var(--ink-3) 78%, var(--ink-2));
    line-height: 1.35;
}

@media (max-width: 520px) {
    .public-day-banner {
        align-items: flex-start;
        padding: 12px 13px;
    }
    .public-day-banner-icon {
        width: 32px;
        height: 32px;
    }
    .public-day-banner-title {
        gap: 6px;
        font-size: 14px;
        align-items: flex-start;
        flex-wrap: wrap;
    }
    .public-day-banner-title > #publicDateRelPill {
        margin-left: auto;
    }
    .public-day-banner-sub {
        font-size: 12.5px;
    }
}

/* Mejorar slots existentes · grid 2 cols, padding generoso, estado active
   con check. La clase .public-slot ya la usa el JS · solo aumentamos
   especificidad para vencer reglas viejas. */
.public-booking .public-slots#publicSlots {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 8px;
}
.public-booking .public-slots#publicSlots .public-slots-empty {
    grid-column: 1 / -1;
    /* Forzar block-level flex · sobrescribe el `inline-flex` de
       `.slot-inline-message` que viene después en la cascada y hacía que
       la caja encogiera al ancho del contenido en vez de ocupar todo el
       grid-area de #publicSlots (se veía descentrado).                    */
    display: flex;
    width: 100%;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--muted);
    padding: 18px 16px;
    background: color-mix(in srgb, var(--surface-2, var(--surface)) 40%, var(--surface));
    border: 1px dashed var(--line);
    border-radius: var(--radius-md, 14px);
    font-size: 13.5px;
    text-align: left;     /* el centrado lo da justify-content */
}
.public-booking .public-slots#publicSlots .public-slots-empty > span { min-width: 0; }
.public-booking .public-slots#publicSlots .public-slot {
    appearance: none; font-family: inherit;
    background: var(--surface);
    border: 1px solid var(--line);
    color: var(--ink);
    border-radius: var(--radius-md, 14px);
    padding: 13px 14px;
    font-size: 15px; font-weight: 700;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    text-align: left;
    transition: border-color .18s ease, color .18s ease,
                background .18s ease, box-shadow .18s ease;
}
.public-booking .public-slots#publicSlots .public-slot:hover {
    border-color: var(--accent);
    color: var(--accent);
}
.public-booking .public-slots#publicSlots .public-slot:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--accent) 55%, transparent);
    outline-offset: 2px;
}
/* Estado seleccionado · reusa exactamente el estilo legacy de
   .public-booking .public-slot.selected · background accent-hover, texto
   blanco, doble sombra (inset + outer ring suave). Más cálido y firme que
   el "fill plano" que tenía mi versión nueva. */
.public-booking .public-slots#publicSlots .public-slot.selected {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
    color: #fff;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.10),
        0 1px 2px rgba(20,39,43,.10),
        0 0 0 4px color-mix(in srgb, var(--accent) 14%, transparent);
}
.public-booking .public-slots#publicSlots .public-slot.selected .public-slot-hour,
.public-booking .public-slots#publicSlots .public-slot.selected .public-slot-meridian {
    color: inherit;            /* hereda blanco · sin override muted */
}

/* Mobile · 4 cards visibles en strip, 1 columna en slots */
@media (max-width: 720px) {
    .public-monthbar {
        min-height: 52px;
        gap: 8px;
    }
    .public-monthbar-current {
        gap: 8px;
        min-height: 42px;
        padding: 6px 10px 6px 8px;
    }
    .public-monthbar-icon {
        width: 28px;
        height: 28px;
    }
    .public-monthbar-label {
        font-size: 14px;
    }
    .public-monthbar-actions {
        gap: 6px;
    }
    .public-monthbar-nav {
        width: 38px;
        height: 38px;
    }
    .public-monthbar-menu {
        left: 0;
        width: min(100%, calc(100vw - 28px));
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
        padding: 10px;
        border-radius: 14px;
    }
    .public-monthbar-menu::before {
        left: 72px;
    }
    .public-monthbar-option {
        min-height: 92px;
        gap: 4px;
        padding: 11px 6px 9px;
        border-radius: 12px;
    }
    .public-monthbar-option-icon {
        width: 30px;
        height: 30px;
        margin-bottom: 1px;
    }
    .public-monthbar-option-name {
        font-size: 12.8px;
    }
    .public-monthbar-option-year {
        font-size: 12px;
    }
    .public-monthbar-option.is-active::after {
        content: none;
        display: none;
    }
    .public-datecard {
        flex: 0 0 calc((100% - 24px) / 4);   /* 4 visibles · 3 gaps 8px */
        min-width: 0;
        padding: 10px 6px 8px;
    }
    .public-datestrip { gap: 8px; padding: 4px 0 10px; }
    .public-datecard-num { font-size: 28px; }
    .public-datecard-dow { font-size: 10.5px; }
    .public-datecard-badge { font-size: 9px; padding: 1px 5px; min-height: 14px; }

    .public-booking .public-slots#publicSlots {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    .public-booking .public-slots#publicSlots .public-slot {
        min-height: 48px;
    }
}

/* ════════════════════════════════════════════════════════════════════════
   /r/{slug} · Escala tipográfica unificada · jerarquía clara para reducir
   competencia visual entre nombre, subtítulos, body, chips y testimonios.
   Usa clamp() para escalar mobile→desktop sin breakpoints adicionales.
   ════════════════════════════════════════════════════════════════════════ */
:root {
    /* Tamaños (clamp = min, fluid, max) */
    --pub-fs-name:      clamp(28px, 4vw + 8px, 38px);   /* mobile 28→32, desktop 36→38 */
    --pub-fs-h2:        clamp(20px, 2vw + 12px, 24px);  /* mobile 21→24, desktop 24 */
    --pub-fs-body:      15.5px;
    --pub-fs-meta:      13px;
    --pub-fs-chip:      12.5px;
    --pub-fs-review:    15px;
    --pub-fs-tag:       13.5px;
    --pub-fs-modality:  12.5px;

    /* Pesos */
    --pub-fw-name:      600;
    --pub-fw-h2:        600;
    --pub-fw-body:      400;
    --pub-fw-tag:       600;

    /* Line-heights */
    --pub-lh-tight:     1.1;
    --pub-lh-body:      1.62;
    --pub-lh-review:    1.6;

    /* Colores (re-mapeados a tokens existentes para mantener tema aqua) */
    --pub-color-name:   var(--ink);
    --pub-color-h2:     var(--ink);
    --pub-color-body:   var(--ink-2);   /* lectura · más suave que el título */
    --pub-color-meta:   var(--muted);
    --pub-color-tag:    var(--ink-2);
    --pub-color-modality: var(--muted);

    /* Espaciado vertical entre bloques principales */
    --pub-gap-section:  32px;
    --pub-gap-card:     16px;
}

/* ── Nombre del profesional ───────────────────────────────────────────── */
.public-hero-card .public-hero-name {
    font-size:   var(--pub-fs-name);
    font-weight: var(--pub-fw-name);
    color:       var(--pub-color-name);
    line-height: var(--pub-lh-tight);
    letter-spacing: -.005em;
    margin: 0 0 12px;
}

/* ── Subtítulos de sección ("Sobre mí" / "Lo que valoran...") ─────────── */
.public-section-block .public-section-block-title {
    font-size:   var(--pub-fs-h2);
    font-weight: var(--pub-fw-h2);
    color:       var(--pub-color-h2);
    line-height: var(--pub-lh-tight);
    letter-spacing: -.003em;
    margin: 0;
}

/* ── Texto descriptivo ────────────────────────────────────────────────── */
.public-section-block .public-section-block-body {
    font-size:   var(--pub-fs-body);
    font-weight: var(--pub-fw-body);
    color:       var(--pub-color-body);
    line-height: var(--pub-lh-body);
    margin: 0 0 16px;
}

/* ── Chips de especialidad ────────────────────────────────────────────── */
.public-hero-card .public-specialty-chips > span {
    font-size:   var(--pub-fs-chip);
    font-weight: 600;
    padding:     4px 10px;
    min-height:  auto;
    color:       color-mix(in srgb, var(--accent) 78%, var(--ink));
    background:  color-mix(in srgb, var(--accent-soft) 55%, var(--surface));
    border-color: color-mix(in srgb, var(--accent) 18%, var(--line));
    letter-spacing: 0;
    line-height: 1.35;
}

/* ── CPSP credential pill · armonizada con chips ──────────────────────── */
.public-hero-card .public-hero-credential {
    font-size: var(--pub-fs-meta);
    font-weight: 600;
    padding: 5px 12px;
}

/* ── Testimonios ──────────────────────────────────────────────────────── */
.review-card .review-mark {
    color: color-mix(in srgb, var(--accent) 38%, var(--muted));   /* discreto */
    opacity: .65;
    margin-bottom: 8px;
}
.review-card .review-mark svg { width: 18px; height: 18px; }
.review-card .review-body {
    font-size:   var(--pub-fs-review);
    font-weight: 400;
    color:       var(--pub-color-body);
    line-height: var(--pub-lh-review);
    margin: 0 0 18px;
}
.review-card .review-foot {
    border-top: 1px solid color-mix(in srgb, var(--line-soft) 80%, var(--line));
    padding-top: 14px;
    color: var(--pub-color-tag);
}
.review-card .review-foot b {
    display: block;
    font-size:   var(--pub-fs-tag);
    font-weight: var(--pub-fw-tag);    /* peso medio, no agresivo */
    color:       var(--pub-color-tag);
    margin-bottom: 2px;
    letter-spacing: 0;
}
.review-card .review-foot span {
    color: var(--pub-color-modality);
    font-size: var(--pub-fs-modality);
    font-weight: 400;
    opacity: 1;                        /* color ya hace el contraste */
}

/* ── Espaciado vertical entre secciones ──────────────────────────────── */
.public-section-block { margin-top: var(--pub-gap-section); padding-top: 24px; }
.public-section-block:first-of-type { margin-top: 20px; padding-top: 0; border-top: 0; }
.public-section-block + .public-section-block { padding-top: 24px; }

/* Divisor sutil entre secciones (no marcado) */
.public-section-block + .public-section-block {
    border-top: 1px solid color-mix(in srgb, var(--line-soft) 60%, transparent);
}

/* ── Ícono de sección · armonizado con la jerarquía ──────────────────── */
.public-section-block .public-section-block-icon {
    width: 40px; height: 40px;
}
.public-section-block .public-section-block-icon svg { width: 20px; height: 20px; }

/* ── Eyebrow del hero (ESPACIO PRIVADO) · más discreto ───────────────── */
.public-hero-card .public-hero-kicker {
    font-size: 10.5px;
    letter-spacing: .16em;
    color: color-mix(in srgb, var(--accent) 70%, var(--ink-3));
    margin-bottom: 12px;
}

/* ── Bio sangrada con respiro extra ──────────────────────────────────── */
.public-section-block .public-section-block-body {
    max-width: 60ch;
}

/* ════════════════════════════════════════════════════════════════════════
   Slots agrupados por franja (Mañana / Tarde / Noche)
   ════════════════════════════════════════════════════════════════════════ */
/* Reset: el contenedor general ya no es grid · ahora alberga 1+ sections */
.public-booking .public-slots#publicSlots {
    display: block;
    margin-bottom: 8px;
}

.public-slot-band {
    margin-top: 18px;
}
.public-slot-band:first-child { margin-top: 0; }

.public-slot-band-head {
    display: flex; align-items: center; gap: 12px;
    margin-bottom: 12px;
}
.public-slot-band-icon {
    color: var(--accent);
    flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
}
.public-slot-band-text { min-width: 0; }
.public-slot-band-label {
    font-size: 12.5px; font-weight: 700;
    color: var(--ink);
    letter-spacing: .12em; text-transform: uppercase;
    line-height: 1.2;
}
.public-slot-band-range {
    margin-top: 2px;
    font-size: 12px;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

/* Grid 3 columnas siempre · solo en mobile muy angosto baja a 2 para
   que "10:00 a. m." entre cómodo. Nunca 1 columna · perdíamos la
   lectura de "3 opciones por franja". */
.public-slot-band-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}
@media (max-width: 480px) {
    .public-slot-band-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
}

/* Slot ajustado para entrar cómodo en 3 columnas · padding más medido */
.public-booking .public-slots#publicSlots .public-slot {
    padding: 12px 12px;
    font-size: 14.5px;
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
}

/* ════════════════════════════════════════════════════════════════════════
   Flechas flotantes del date strip · navegan días con scroll suave.
   ENCIMA del strip (overlay), no empujan las cards · el strip conserva su
   ancho original. Gradient mask en los bordes para fade-out suave de las
   cards bajo las flechas (no se cortan secas).
   ════════════════════════════════════════════════════════════════════════ */
.public-datestrip-wrap { padding: 0; }   /* sin padding · las flechas flotan encima */

.public-datestrip-wrap::before,
.public-datestrip-wrap::after {
    content: '';
    position: absolute;
    top: 4px; bottom: 12px;       /* alineado con el padding interno del strip */
    width: 44px;
    pointer-events: none;
    z-index: 1;
    transition: opacity .2s ease;
}
.public-datestrip-wrap::before {
    left: 0;
    background: linear-gradient(to right,
        var(--surface) 0%,
        color-mix(in srgb, var(--surface) 86%, transparent) 60%,
        transparent 100%);
}
.public-datestrip-wrap::after {
    right: 0;
    background: linear-gradient(to left,
        var(--surface) 0%,
        color-mix(in srgb, var(--surface) 86%, transparent) 60%,
        transparent 100%);
}
.public-datestrip-wrap.no-fade-prev::before { opacity: 0; }
.public-datestrip-wrap.no-fade-next::after { opacity: 0; }

.public-datestrip-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(calc(-50% - 4px));   /* compensa padding del strip */
    width: 32px; height: 32px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 50%;
    color: var(--ink-2);
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer; appearance: none;
    box-shadow: 0 6px 16px -8px rgba(31,52,87,.24);
    transition: border-color .15s ease, color .15s ease,
                box-shadow .15s ease, opacity .18s ease;
    z-index: 3;
}
.public-datestrip-arrow:hover:not(:disabled) {
    border-color: var(--accent);
    color: var(--accent);
    box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--accent) 32%, transparent);
}
.public-datestrip-arrow:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--accent) 55%, transparent);
    outline-offset: 2px;
}
.public-datestrip-arrow:disabled {
    opacity: 0;                        /* desaparece cuando no aplica */
    pointer-events: none;
}
.public-datestrip-arrow.is-prev { left: 2px; }
.public-datestrip-arrow.is-next { right: 2px; }

/* Badge en minúsculas · ajuste de peso y spacing para que se lea natural */
.public-datecard-badge {
    font-size: 11px;
    letter-spacing: 0;
    text-transform: none;
    padding: 2px 9px;
    min-height: 18px;
}

@media (max-width: 720px) {
    .public-datestrip-arrow { width: 28px; height: 28px; }
    .public-datestrip-arrow svg { width: 12px; height: 12px; }
    .public-datestrip-wrap::before,
    .public-datestrip-wrap::after { width: 32px; }
    .public-datecard-badge { font-size: 10px; padding: 1px 7px; }
}

/* ════════════════════════════════════════════════════════════════════════
   Slot: hora + meridiano · weight medio (no negrita), meridiano secundario
   ════════════════════════════════════════════════════════════════════════ */
.public-booking .public-slots#publicSlots .public-slot {
    font-weight: 500;          /* ya no negrita */
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    text-align: left;
}
.public-booking .public-slots#publicSlots .public-slot .public-slot-hour {
    font-size: 15px;
    font-weight: 500;
    color: inherit;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
}
.public-booking .public-slots#publicSlots .public-slot .public-slot-meridian {
    font-size: 12px;
    font-weight: 400;
    color: var(--muted);
    letter-spacing: 0;
}
.public-booking .public-slots#publicSlots .public-slot:hover .public-slot-meridian {
    color: color-mix(in srgb, var(--accent) 75%, var(--muted));
}
.public-booking .public-slots#publicSlots .public-slot.selected .public-slot-meridian {
    color: color-mix(in srgb, var(--accent-fg, #fff) 78%, transparent);
}

/* ════════════════════════════════════════════════════════════════════════
   "Lo que valoran los pacientes" · panel con fondo azul soft + cards
   blancas con sombra suave. Reemplaza al carrusel + dots por una stack
   vertical más amigable (no exige interacción para ver todo).
   ════════════════════════════════════════════════════════════════════════ */
.public-reviews-panel {
    margin-top: var(--pub-gap-section, 32px);
    padding: 28px 24px;
    background: color-mix(in srgb, var(--accent-soft) 35%, var(--surface));
    border: 1px solid color-mix(in srgb, var(--accent) 10%, var(--line-soft));
    border-radius: 22px;
}
.public-reviews-title {
    font-size: var(--pub-fs-h2, clamp(20px, 2vw + 12px, 24px));
    font-weight: 600;
    color: var(--ink);
    line-height: 1.15;
    letter-spacing: -.003em;
    margin: 0 0 8px;
}
.public-reviews-sub {
    margin: 0 0 18px;
    font-size: 14px; line-height: 1.55;
    color: var(--ink-2);
    max-width: 58ch;
}

/* Carrusel paginado · 2 cards visibles desktop · 1 mobile.
   align-items: stretch (default de grid) + height: 100% en la card +
   margin-top: auto en el footer = todas las cards a la misma altura del
   row y footer alineado al pie sin importar la longitud del cuerpo. */
.public-reviews-carousel-wrap {
    position: relative;
    margin: 0 0 14px;
}
.public-reviews-carousel {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - 16px) / 2);
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 4px 4px 12px;
    scrollbar-width: none;
    align-items: stretch;
}
.public-reviews-carousel::-webkit-scrollbar { display: none; }

.public-testimonio-card {
    scroll-snap-align: start;
    background: var(--surface);
    border: 1px solid color-mix(in srgb, var(--accent) 9%, var(--line-soft));
    border-radius: 18px;
    padding: 22px 22px 18px;
    box-shadow: 0 6px 18px -14px color-mix(in srgb, var(--ink) 30%, transparent);
    display: flex; flex-direction: column;
    height: 100%;            /* stretch al row del grid */
    min-height: 220px;
}
.public-testimonio-mark {
    display: block;
    font-family: 'Cormorant Garamond', serif;
    font-size: 36px;
    font-weight: 600;
    line-height: 0.6;
    color: var(--accent);
    opacity: .72;
    margin-bottom: 4px;
}
.public-testimonio-body {
    margin: 0 0 18px;
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 17px;
    line-height: 1.5;
    color: var(--ink);
    font-weight: 500;
    flex: 1;
}
.public-testimonio-foot {
    display: flex; align-items: center; gap: 12px;
    padding-top: 14px;
    margin-top: auto;        /* clavado al pie de la card */
    border-top: 1px solid color-mix(in srgb, var(--line-soft) 70%, var(--line));
}
.public-testimonio-avatar {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--accent-soft) 60%, var(--surface));
    color: var(--accent);
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.public-testimonio-foot-text {
    font-size: 13.5px;
    color: var(--ink-2);
    line-height: 1.35;
}
.public-testimonio-foot-text b {
    font-weight: 600;
    color: var(--ink);
}
.public-testimonio-sep {
    margin: 0 6px;
    color: var(--muted);
}

/* Flechas circulares laterales del carrusel · estilo idéntico a las del
   date strip y del compartir · floating con sombra suave */
.public-reviews-arrow {
    position: absolute;
    top: 50%; transform: translateY(-50%);
    width: 36px; height: 36px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 50%;
    color: var(--ink-2);
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer; appearance: none;
    box-shadow: 0 6px 16px -8px rgba(31,52,87,.24);
    transition: border-color .15s ease, color .15s ease,
                box-shadow .15s ease, opacity .18s ease;
    z-index: 3;
}
.public-reviews-arrow:hover:not(:disabled) {
    border-color: var(--accent);
    color: var(--accent);
}
.public-reviews-arrow:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--accent) 55%, transparent);
    outline-offset: 2px;
}
.public-reviews-arrow:disabled {
    opacity: 0; pointer-events: none;
}
.public-reviews-arrow.is-prev { left: -8px; }
.public-reviews-arrow.is-next { right: -8px; }
/* En desktop · flechas salen del carrusel para no tapar el primer/último
   testimonio · el panel azul soft tiene espacio lateral suficiente */
@media (min-width: 900px) {
    .public-reviews-arrow.is-prev { left: -20px; }
    .public-reviews-arrow.is-next { right: -20px; }
    .public-reviews-arrow {
        width: 38px; height: 38px;
        box-shadow:
            0 1px 0 rgba(255,255,255,.6) inset,
            0 8px 20px -10px rgba(31,52,87,.22);
    }
}

/* Dots · idénticos visualmente al patrón de validados */
.public-reviews-dots {
    display: flex; justify-content: center; gap: 8px;
    margin: 4px 0 14px;
}
.public-reviews-dots .reviews-dot,
.public-reviews-dots > button {
    appearance: none; border: 0;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--line);
    cursor: pointer;
    padding: 0;
    transition: background .18s ease, width .18s ease;
}
.public-reviews-dots > button:hover {
    background: color-mix(in srgb, var(--accent) 30%, var(--line));
}
.public-reviews-dots > button.is-active {
    background: var(--accent);
    width: 24px;
    border-radius: 999px;
}

/* Mobile · 1 card por página, flechas ocultas */
@media (max-width: 720px) {
    .public-reviews-carousel { grid-auto-columns: 100%; gap: 12px; }
    .public-reviews-arrow { display: none; }
}

/* CTA "Ver horarios y reservar" · full-width, accent fill, ícono cal */
.public-reviews-cta-big {
    appearance: none; font-family: inherit;
    width: 100%;
    background: var(--accent);
    color: var(--accent-fg, #fff);
    border: 0;
    border-radius: 14px;
    padding: 15px 22px;
    font-size: 15.5px; font-weight: 600;
    letter-spacing: 0;
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    gap: 10px;
    box-shadow: 0 8px 22px -10px color-mix(in srgb, var(--accent) 55%, transparent);
    transition: background .15s ease, transform .15s ease, box-shadow .15s ease;
}
.public-reviews-cta-big:hover {
    background: var(--accent-hover, var(--accent));
    transform: translateY(-1px);
    box-shadow: 0 10px 24px -10px color-mix(in srgb, var(--accent) 60%, transparent);
}
.public-reviews-cta-big:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--accent) 55%, transparent);
    outline-offset: 3px;
}
.public-reviews-cta-big svg { color: currentColor; }

.public-reviews-trust {
    display: flex; align-items: center; justify-content: center;
    gap: 8px;
    margin: 12px 0 0;
    font-size: 12.5px;
    color: var(--ink-3);
    text-align: center;
}
.public-reviews-trust svg {
    color: color-mix(in srgb, var(--accent) 65%, var(--muted));
    flex-shrink: 0;
}

@media (max-width: 720px) {
    .public-reviews-panel { padding: 22px 18px; border-radius: 18px; }
    .public-review-card { padding: 18px 18px 16px; border-radius: 16px; }
    .public-review-body { font-size: 16px; }
}

/* ════════════════════════════════════════════════════════════════════════
   Hero horizontal · avatar grande izq + info (eyebrow/nombre/credencial/
   chips) der · bio debajo del row a todo el ancho. Mobile colapsa a
   single column con avatar centrado arriba.
   ════════════════════════════════════════════════════════════════════════ */
.public-hero-card {
    display: block;
    text-align: left;
    padding: 12px 0 16px;
}
.public-hero-row {
    display: flex;
    align-items: center;
    gap: 28px;
    margin-bottom: 16px;
}
.public-hero-avatar {
    flex-shrink: 0;
    margin: 0;
}
.public-hero-info {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}
.public-hero-info .public-hero-kicker {
    margin: 0;                       /* sin margin bottom · gap del flex lo separa */
}
.public-hero-info .public-hero-name {
    margin: 0;
    text-align: left;
}
.public-hero-info .public-hero-credential {
    margin: 0;
}
.public-hero-info .public-specialty-chips {
    justify-content: flex-start;     /* alineado a la izquierda · no centrado */
    margin-top: 2px;
}

/* Bio debajo del row · ancho completo del card, sin sangría */
.public-hero-card .public-hero-bio {
    margin: 4px 0 0;
    color: var(--ink-2);
    font-size: 15.5px;
    line-height: 1.62;
    max-width: 62ch;
}

/* Mobile · colapsa a single column · avatar centrado arriba.
   Avatar más compacto, chips con padding reducido para que dos quepan
   por fila cuando el texto es corto. */
@media (max-width: 720px) {
    .public-hero-card { text-align: center; padding: 4px 0 12px; }
    .public-hero-row {
        flex-direction: column;
        align-items: center;
        gap: 14px;
        margin-bottom: 12px;
    }
    .public-hero-avatar { width: 128px; height: 128px; }
    .public-hero-letter { font-size: 60px; }
    .public-hero-info {
        align-items: center;
        gap: 8px;
        width: 100%;
    }
    .public-hero-info .public-hero-kicker {
        font-size: 10px;
        letter-spacing: .14em;
    }
    .public-hero-info .public-hero-name { text-align: center; }
    .public-hero-info .public-specialty-chips {
        justify-content: center;
        gap: 6px;
        max-width: 100%;
    }
    .public-hero-card .public-specialty-chips > span {
        font-size: 12px;
        padding: 4px 11px;
    }
    .public-hero-card .public-hero-credential {
        font-size: 12.5px;
        padding: 4px 11px;
    }
    .public-hero-card .public-hero-bio {
        margin: 4px auto 0;
        text-align: center;
        font-size: 14.5px;
        line-height: 1.6;
        max-width: 100%;
    }
}

/* Mobile angosto · avatar aún más compacto, nombre más controlado */
@media (max-width: 420px) {
    .public-hero-avatar { width: 112px; height: 112px; }
    .public-hero-letter { font-size: 52px; }
    .public-hero-info .public-hero-name {
        font-size: clamp(24px, 7vw, 30px);
        line-height: 1.08;
    }
}


/* ════════════════════════════════════════════════════════════════════════
   /comentarios · Gestión de testimonios del psicólogo
   ════════════════════════════════════════════════════════════════════════ */
.cmt-page { padding-bottom: 60px; }
.cmt-link { color: var(--accent); font-weight: 600; text-decoration: none; }
.cmt-link:hover { text-decoration: underline; }

.cmt-list-shell { display: block; }

/* Empty state */
.cmt-empty {
    padding: 48px 32px;
    display: flex; flex-direction: column; align-items: center; gap: 16px;
    text-align: center;
    color: var(--ink-2);
    font-size: 14px;
}
.cmt-empty-actions { margin-top: 8px; }

/* Lista (header + filas) */
.cmt-list {
    display: flex; flex-direction: column;
    overflow: hidden;
}
.cmt-list-head,
.cmt-row {
    display: grid;
    grid-template-columns: 56px minmax(0, 1.4fr) minmax(160px, 1fr) 120px 84px;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
}
.cmt-list-head {
    color: var(--muted);
    font-size: 11px; font-weight: 800;
    letter-spacing: .08em; text-transform: uppercase;
    border-bottom: 1px solid var(--line-soft);
    background: color-mix(in srgb, var(--surface-2, var(--surface)) 36%, var(--surface));
}
.cmt-row {
    border-top: 1px solid var(--line-soft);
    transition: background .15s ease;
}
.cmt-list-head + .cmt-row { border-top: 0; }
.cmt-row:hover { background: color-mix(in srgb, var(--accent-soft) 18%, var(--surface)); }
.cmt-row.is-draft .cmt-body-text { color: var(--ink-3); }

/* Drag handle · mismo patrón que /servicios (.serv-drag) */
.cmt-drag {
    width: 28px; height: 28px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 0;
    background: transparent;
    color: var(--muted);
    cursor: grab;
    border-radius: 8px;
    opacity: 0;
    transition: opacity .15s ease, background .15s ease, color .15s ease;
}
.cmt-row:hover .cmt-drag,
.cmt-drag:focus-visible { opacity: 1; }
.cmt-drag:hover {
    background: var(--surface-2);
    color: var(--ink);
}
.cmt-drag:active { cursor: grabbing; }

/* Estados visuales del drag & drop */
.cmt-row {
    user-select: none;
}
.cmt-row.is-dragging {
    opacity: .5;
    background: color-mix(in srgb, var(--accent-soft) 30%, var(--surface));
}
.cmt-row.is-drop-target {
    border-top: 2px solid var(--accent);
}

/* Body cell */
.cmt-body-cell { min-width: 0; }
.cmt-body-text {
    margin: 0;
    font-size: 14px;
    line-height: 1.45;
    color: var(--ink-2);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Tag cell */
.cmt-tag-cell {
    display: flex; flex-direction: column; gap: 2px;
    min-width: 0;
}
.cmt-tag {
    font-size: 13px; font-weight: 700; color: var(--ink);
    line-height: 1.25;
}
.cmt-modalidad {
    font-size: 12.5px;
    color: var(--muted);
    line-height: 1.3;
}

/* Toggle publicar · estilo coherente con .serv-toggle si existe */
.cmt-toggle {
    display: inline-flex; align-items: center; gap: 8px;
    cursor: pointer;
    user-select: none;
}
.cmt-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.cmt-toggle-track {
    position: relative;
    width: 34px; height: 20px;
    background: var(--line);
    border-radius: 999px;
    transition: background .18s ease;
    flex-shrink: 0;
}
.cmt-toggle-thumb {
    position: absolute;
    top: 2px; left: 2px;
    width: 16px; height: 16px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 1px 2px rgba(31,52,87,.18);
    transition: transform .18s ease;
}
.cmt-toggle input:checked + .cmt-toggle-track {
    background: var(--accent);
}
.cmt-toggle input:checked + .cmt-toggle-track .cmt-toggle-thumb {
    transform: translateX(14px);
}
.cmt-toggle-label {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ink-2);
}

/* Acciones */
.cmt-actions-cell {
    display: flex; gap: 4px;
    justify-content: flex-end;
}
.cmt-action-btn {
    appearance: none; font-family: inherit;
    width: 32px; height: 32px;
    border: 1px solid var(--line);
    background: var(--surface);
    border-radius: 8px;
    color: var(--ink-2);
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: border-color .14s ease, color .14s ease, background .14s ease;
}
.cmt-action-btn:hover {
    border-color: var(--accent); color: var(--accent);
    background: color-mix(in srgb, var(--accent-soft) 35%, var(--surface));
}
.cmt-action-btn.cmt-action-danger:hover {
    border-color: var(--rose, #B8888A);
    color: var(--rose, #B8888A);
    background: color-mix(in srgb, var(--rose, #B8888A) 8%, var(--surface));
}

/* ── Pendientes de moderación (V53) ─────────────────────────────────── */
/* Tabs */
.cmt-tabs {
    display: inline-flex; gap: 4px;
    margin-top: 18px;
    padding: 4px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--surface-2, var(--surface)) 90%, var(--ink) 6%);
    border: 1px solid var(--line);
}
.cmt-tab {
    appearance: none; font-family: inherit;
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 16px;
    border: 0;
    background: transparent;
    color: var(--ink-2, var(--muted));
    font-size: 13px; font-weight: 500;
    border-radius: 999px;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}
.cmt-tab:hover { color: var(--ink); }
.cmt-tab.is-active {
    background: var(--surface);
    color: var(--ink);
    font-weight: 600;
    box-shadow:
        0 1px 0 rgba(255,255,255,.7) inset,
        0 2px 6px rgba(20,39,43,.10);
}
.cmt-tab-count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 22px; padding: 1px 8px;
    border-radius: 999px;
    font-size: 11.5px; font-weight: 600;
    background: color-mix(in srgb, var(--ink) 10%, var(--surface));
    color: var(--ink-2);
}
.cmt-tab.is-active .cmt-tab-count {
    background: color-mix(in srgb, var(--accent) 16%, var(--surface));
    color: var(--accent);
}
.cmt-tab-count-accent {
    background: var(--accent) !important;
    color: #fff !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent);
}

/* Tab con count=0 · sigue clickeable pero más bajo en contraste */
.cmt-tab.is-zero { color: color-mix(in srgb, var(--muted) 80%, var(--ink) 20%); }
.cmt-tab.is-zero .cmt-tab-count {
    background: color-mix(in srgb, var(--ink) 6%, var(--surface));
    color: var(--muted);
}

/* Row pendiente · borde superior accent + bg suave */
.cmt-row.is-pendiente {
    background: color-mix(in srgb, var(--accent) 5%, var(--surface));
}
.cmt-row.is-pendiente:hover {
    background: color-mix(in srgb, var(--accent) 9%, var(--surface));
}
.cmt-row.is-pendiente + .cmt-row:not(.is-pendiente) {
    border-top: 1px solid color-mix(in srgb, var(--accent) 20%, var(--line-soft));
}
.cmt-pendiente-badge {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px;
    color: var(--accent);
}
.cmt-pendiente-badge svg {
    animation: cmtPulseDot 2.4s ease-in-out infinite;
}
@keyframes cmtPulseDot {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: .55; transform: scale(.85); }
}

/* Rating inline en la fila */
.cmt-rating {
    display: inline-flex; align-items: center;
    gap: 4px;
    margin-bottom: 4px;
}
.cmt-rating-star {
    display: inline-flex;
    color: #C9892F;
}
.cmt-rating-star svg { display: block; }
.cmt-rating-num {
    margin-left: 6px;
    font-size: 11.5px; font-weight: 600;
    color: var(--ink-2);
    font-variant-numeric: tabular-nums;
}
.cmt-body-empty {
    font-style: italic;
    color: var(--muted) !important;
    -webkit-line-clamp: 1 !important;
}

/* Chips abajo del cuerpo */
.cmt-chips-row {
    margin-top: 6px;
    display: inline-flex; flex-wrap: wrap; gap: 4px;
}
.cmt-chip {
    padding: 2px 10px;
    font-size: 11px; font-weight: 500;
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 8%, var(--surface));
    border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
    border-radius: 999px;
}

/* Pill "Pendiente" en publish-cell */
.cmt-publish-cell-pendiente { display: flex; align-items: center; }
.cmt-pendiente-pill {
    display: inline-flex; align-items: center;
    padding: 5px 12px;
    font-size: 11.5px; font-weight: 600;
    letter-spacing: .03em;
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 12%, var(--surface));
    border: 1px solid color-mix(in srgb, var(--accent) 24%, transparent);
    border-radius: 999px;
}

/* Acciones pendiente · publicar (primary) + descartar (text danger) */
.cmt-actions-cell-pendiente {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
}
.cmt-action-aprobar {
    padding: 7px 14px !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    justify-content: center !important;
    white-space: nowrap;
}
.cmt-action-descartar {
    appearance: none; font-family: inherit;
    background: transparent;
    border: 0;
    padding: 4px 8px;
    color: var(--muted);
    font-size: 12px; font-weight: 500;
    cursor: pointer;
    border-radius: 6px;
    transition: color .14s ease, background .14s ease;
}
.cmt-action-descartar:hover {
    color: var(--rose, #B8888A);
    background: color-mix(in srgb, var(--rose, #B8888A) 8%, transparent);
}

/* Drawer crear/editar */
.cmt-drawer-overlay {
    position: fixed; inset: 0;
    background: color-mix(in srgb, var(--ink) 32%, transparent);
    z-index: 1200;
    display: flex; align-items: stretch; justify-content: flex-end;
    backdrop-filter: blur(2px);
}
.cmt-drawer {
    width: 100%; max-width: 480px;
    background: var(--surface);
    box-shadow: -20px 0 50px -20px rgba(20,39,43,.18);
    display: flex; flex-direction: column;
    animation: cmt-drawer-in .28s cubic-bezier(.2, .72, .18, 1) both;
}
@keyframes cmt-drawer-in {
    from { transform: translateX(40px); opacity: 0; }
    to   { transform: translateX(0); opacity: 1; }
}
.cmt-drawer-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px;
    padding: 22px 28px 14px;
    border-bottom: 1px solid var(--line-soft);
}
.cmt-drawer-head h2 {
    margin: 0;
    font-size: 22px; color: var(--ink);
}
.cmt-drawer-close {
    appearance: none; font-family: inherit;
    width: 32px; height: 32px;
    border: 1px solid var(--line);
    background: var(--surface);
    border-radius: 8px;
    color: var(--ink-2);
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
}
.cmt-drawer-close:hover { border-color: var(--accent); color: var(--accent); }

.cmt-drawer-body {
    padding: 18px 28px 24px;
    display: flex; flex-direction: column; gap: 16px;
    flex: 1;
    overflow-y: auto;
}
.cmt-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
.cmt-publish-check {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 14px;
    background: color-mix(in srgb, var(--accent-soft) 22%, var(--surface));
    border: 1px solid color-mix(in srgb, var(--accent) 12%, var(--line-soft));
    border-radius: 12px;
    font-size: 13.5px;
    color: var(--ink-2);
    cursor: pointer;
}
.cmt-publish-check input { width: 16px; height: 16px; }

.cmt-drawer-foot {
    display: flex; justify-content: flex-end; gap: 10px;
    margin-top: 8px;
}

/* Sentence case en los labels del drawer de testimonios · más humano que el
   uppercase corporativo del resto del sistema */
.cmt-drawer .field-label {
    text-transform: none;
    letter-spacing: 0;
    font-size: 13px; font-weight: 600;
    color: var(--ink);
}

/* Meta-fila bajo el textarea · solo ubica al ai-improve-btn alineado a la
   derecha. El estilo del botón viene de ai-magic.css (pill negro + sparkle). */
.cmt-textarea-meta {
    display: flex;
    justify-content: flex-end;
    margin-top: 8px;
}
.cmt-textarea-meta .ai-improve-btn--inline {
    margin-top: 0;             /* override del default .ai-improve-btn--inline */
}

/* Responsive · mobile */
@media (max-width: 720px) {
    .cmt-list-head { display: none; }
    .cmt-row {
        grid-template-columns: 1fr;
        gap: 8px;
        padding: 14px;
    }
    .cmt-row .cmt-drag {
        align-self: flex-start;
        opacity: 1;            /* en mobile siempre visible · sin hover */
    }
    .cmt-row .cmt-actions-cell { justify-content: flex-start; }

    .cmt-form-row { grid-template-columns: 1fr; }
    .cmt-drawer { max-width: 100%; }
    .cmt-drawer-head { padding: 18px 18px 12px; }
    .cmt-drawer-body { padding: 14px 18px 18px; }
}

/* ╔═══════════════════════════════════════════════════════════════════════╗
   ║  POST-SESIÓN · "¿Te atendiste con X? Déjale un comentario"           ║
   ║                                                                       ║
   ║  CTA en /r/{slug} + overlay tipo bottom-sheet con 4 pasos:           ║
   ║    1. Verificación (teléfono o correo)                                ║
   ║    2. Valoración (estrellas + chips)                                  ║
   ║    3. Comentario abierto (opcional)                                   ║
   ║    4. Gracias + preview                                               ║
   ║                                                                       ║
   ║  Diseño ultra premium · tuteo peruano · sin urgencia · sin emojis.   ║
   ╚═══════════════════════════════════════════════════════════════════════╝ */

/* ─── Footer legal · misma fórmula que .auth-legal de login pero en flow
       normal (sin position:absolute) para que viva al final del scroll. ──── */
.public-legal-foot {
    max-width: 640px;
    margin: 48px auto 28px;
    padding: 12px 20px;
    text-align: center;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.65;
    letter-spacing: .005em;
}
.public-legal-foot a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color .15s ease;
}
.public-legal-foot a:hover { color: var(--ink-2, var(--ink)); }

@media (max-width: 560px) {
    .public-legal-foot {
        margin: 28px auto 18px;
        font-size: 11.5px;
    }
}

/* ─── Empty state · cuando el psi todavía no tiene testimonios aprobados ─ */
.public-reviews-empty {
    margin: 16px 0 6px;
    padding: 28px 24px;
    border: 1px dashed color-mix(in srgb, var(--accent) 22%, var(--line));
    background: color-mix(in srgb, var(--accent) 4%, var(--surface));
    border-radius: 18px;
    text-align: center;
    display: flex; flex-direction: column;
    align-items: center; gap: 10px;
}
.public-reviews-empty-ico {
    display: inline-flex; align-items: center; justify-content: center;
    width: 56px; height: 56px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--accent) 10%, var(--surface));
    color: var(--accent);
    border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line));
}
.public-reviews-empty-line {
    margin: 4px 0 0;
    font-size: 15px; font-weight: 500;
    color: var(--ink);
    letter-spacing: .002em;
}
.public-reviews-empty-sub {
    margin: 0;
    font-size: 13px;
    color: var(--muted);
    max-width: 38ch;
    line-height: 1.5;
}

/* ─── Invite a dejar comentario · pill blanco + trust line debajo ──────── */
.public-reviews-invite {
    margin: 18px 0 26px;
    display: flex; flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}
.public-reviews-invite-btn {
    appearance: none; font-family: inherit;
    display: inline-flex; align-items: center; gap: 9px;
    padding: 9px 18px 9px 11px;
    background: var(--surface);
    border: 1px solid var(--line);
    color: var(--ink);
    font-size: 13.5px; font-weight: 500;
    letter-spacing: .002em;
    border-radius: 999px;
    cursor: pointer;
    /* Sombra de una sola capa · vive sobre el panel azul soft, sin pelearse */
    box-shadow: 0 1px 2px rgba(20,39,43,.05);
    transition: transform .18s ease, box-shadow .22s ease,
                border-color .18s ease, color .18s ease;
}
.public-reviews-invite-btn:hover {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--accent) 32%, var(--line));
    color: var(--accent);
    box-shadow: 0 8px 22px -12px color-mix(in srgb, var(--accent) 38%, transparent);
}
.public-reviews-invite-btn:active { transform: translateY(0); }
.public-reviews-invite-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 16%, transparent);
}
.public-reviews-invite-ico {
    display: inline-flex; align-items: center; justify-content: center;
    width: 24px; height: 24px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--accent) 10%, var(--surface));
    color: var(--accent);
    flex: 0 0 24px;
}
.public-reviews-invite-ico svg { width: 13px; height: 13px; }
/* Trust line anclada al ícono del botón · el lock nace bajo el círculo de chat */
.public-reviews-invite-trust {
    margin: 0 0 0 14px;
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 12.5px;
    color: var(--muted);
    line-height: 1.4;
}
.public-reviews-invite-trust svg { flex: 0 0 12px; color: var(--muted); opacity: .85; }

@media (max-width: 560px) {
    .public-reviews-invite-btn {
        padding: 8px 16px 8px 10px;
        font-size: 13px;
    }
    .public-reviews-invite-ico { width: 22px; height: 22px; flex-basis: 22px; }
    .public-reviews-invite-ico svg { width: 12px; height: 12px; }
}

/* ─── Overlay + sheet ──────────────────────────────────────────────────── */
.post-sesion-overlay {
    position: fixed; inset: 0;
    z-index: 20000;
    display: flex; align-items: flex-end; justify-content: center;
    background: color-mix(in srgb, #0F1F22 60%, transparent);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    animation: postSesionOverlayIn .25s ease-out;
}
.post-sesion-overlay[hidden] { display: none; }
.public-booking-left:has(.post-sesion-overlay:not([hidden])) {
    z-index: 20000;
}
@keyframes postSesionOverlayIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.post-sesion-sheet {
    position: relative;
    width: 100%;
    max-width: 600px;                    /* desktop: más respiración interna */
    max-height: 92vh;
    overflow: hidden;
    background: var(--surface);
    border-radius: 26px 26px 0 0;
    box-shadow:
        0 -10px 60px -10px rgba(20,39,43,.30),
        0 1px 0 rgba(255,255,255,.5) inset;
    display: flex; flex-direction: column;
    animation: postSesionSheetIn .35s cubic-bezier(.16,1,.3,1);
}
@keyframes postSesionSheetIn {
    from { transform: translateY(40px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}

/* ─── Header del sheet (back + avatar mini + cerrar) ──────────────────── */
.post-sesion-head {
    flex: 0 0 auto;
    display: flex; align-items: center; justify-content: space-between;
    gap: 14px;
    padding: 16px 20px 12px;
}
.post-sesion-head-left {
    display: inline-flex; align-items: center; gap: 10px;
    min-width: 0;
}
/* "Volver" · pill sobrio · solo visible cuando hay paso anterior · controlado
   por el atributo data-step en .post-sesion-sheet */
.post-sesion-back {
    appearance: none; font-family: inherit;
    display: none;                                     /* default oculto */
    align-items: center; gap: 5px;
    padding: 7px 12px 7px 9px;
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--ink-2, var(--muted));
    font-size: 12.5px; font-weight: 500;
    border-radius: 999px;
    cursor: pointer;
    transition: background .15s ease, color .15s ease,
                border-color .15s ease, transform .15s ease;
}
.post-sesion-back:hover {
    background: var(--surface-2, color-mix(in srgb, var(--surface) 92%, var(--ink) 4%));
    color: var(--ink);
    border-color: color-mix(in srgb, var(--accent) 22%, var(--line));
    transform: translateX(-1px);
}
.post-sesion-back:focus-visible {
    outline: none;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 16%, transparent);
}
.post-sesion-back svg { flex: 0 0 14px; }

/* Visible solo en pasos intermedios · no en verificar (no hay paso previo)
   ni en gracias (flujo terminado · solo "Volver al perfil") */
.post-sesion-sheet[data-step="valoracion"] .post-sesion-back,
.post-sesion-sheet[data-step="comentario"] .post-sesion-back {
    display: inline-flex;
}

.post-sesion-head-id {
    display: inline-flex; align-items: center; gap: 12px;
    min-width: 0;
}
.post-sesion-mini-avatar {
    width: 40px; height: 40px;
    flex-shrink: 0;
    overflow: hidden;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background:
        radial-gradient(circle at 35% 30%,
            color-mix(in srgb, var(--surface) 95%, var(--accent) 5%),
            color-mix(in srgb, var(--surface-2, var(--surface)) 80%, transparent));
    border: 1px solid var(--line);
    font-family: 'Fraunces', serif;
    font-size: 19px; font-weight: 500;
    color: #BE8C39;                  /* dorado del avatar grande del psi */
    letter-spacing: -.01em;
    font-variation-settings: "opsz" 16, "wght" 500;
}
.post-sesion-mini-avatar img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 50%;
}
.post-sesion-head-text {
    display: inline-flex; flex-direction: column;
    line-height: 1.15; min-width: 0;
}
.post-sesion-head-eyebrow {
    font-size: 10px; font-weight: 500;
    letter-spacing: .12em; text-transform: uppercase;
    color: color-mix(in srgb, var(--accent) 70%, var(--muted));
}
.post-sesion-head-name {
    font-size: 14px; font-weight: 600;
    color: var(--ink);
}
.post-sesion-close {
    appearance: none; font-family: inherit;
    width: 34px; height: 34px;
    border-radius: 50%;
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--muted);
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.post-sesion-close:hover {
    background: var(--surface-2);
    color: var(--ink);
}

/* ─── Barra de progreso (4 segmentos) ──────────────────────────────────── */
.post-sesion-progress {
    flex: 0 0 auto;
    display: flex; gap: 6px;
    padding: 0 20px 4px;
}
.post-sesion-progress-step {
    flex: 1;
    height: 3px;
    border-radius: 2px;
    background: color-mix(in srgb, var(--line) 55%, transparent);
    transition: background .35s ease;
}
.post-sesion-progress-step.is-active,
.post-sesion-progress-step.is-done {
    background: var(--accent);
}
.post-sesion-progress-step.is-done {
    opacity: .55;
}

/* ─── Steps · contenedor común ─────────────────────────────────────────── */
.post-sesion-step {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 8px 28px 28px;
    display: flex; flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
    animation: postSesionStepIn .3s ease-out;
}
.post-sesion-step.is-hidden { display: none; }
@keyframes postSesionStepIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.post-sesion-step-icon {
    margin-top: 14px;
    /* Tamaño fijo blindado · `flex-basis: 60px` en column-flex es altura, así
       que también lockeamos min/max-width/height para que ningún flex padre
       lo estire en mobile (caso real reportado 2026-05-12). */
    flex: 0 0 60px;
    width: 60px; min-width: 60px; max-width: 60px;
    height: 60px; min-height: 60px; max-height: 60px;
    aspect-ratio: 1;
    flex-shrink: 0;
    box-sizing: border-box;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    align-self: center;
    background:
        radial-gradient(circle at 50% 35%,
            color-mix(in srgb, var(--accent) 18%, var(--surface)),
            color-mix(in srgb, var(--accent) 10%, var(--surface)));
    color: var(--accent);
    border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--line));
    box-shadow:
        0 1px 0 rgba(255,255,255,.5) inset,
        0 8px 24px -14px color-mix(in srgb, var(--accent) 45%, transparent);
}
.post-sesion-step-title {
    margin: 4px 0 0;
    font-size: clamp(22px, 2.4vw, 28px);
    font-weight: 400;
    line-height: 1.16;
    color: var(--ink);
    letter-spacing: -.01em;
    font-variation-settings: "opsz" 20, "wght" 400;
    max-width: 24ch;
}
.post-sesion-step-sub {
    margin: 0;
    max-width: 44ch;
    color: var(--ink-2, var(--muted));
    font-size: 14.5px;
    line-height: 1.55;
}
.post-sesion-eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 11px; font-weight: 500;
    letter-spacing: .14em; text-transform: uppercase;
    color: color-mix(in srgb, var(--accent) 70%, var(--ink) 30%);
}
.post-sesion-eyebrow::before {
    content: '';
    width: 28px; height: 1px;
    background: currentColor;
    opacity: .8;
}

/* ─── Paso 1 · Tabs + input ────────────────────────────────────────────── */
.post-sesion-tabs {
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    margin-top: 16px;
    border-radius: 999px;
    /* Contenedor más oscuro · destaca el tab activo blanco que viene encima */
    background: color-mix(in srgb, var(--surface-2, var(--surface)) 90%, var(--ink) 6%);
    border: 1px solid var(--line);
}
.post-sesion-tab {
    appearance: none; font-family: inherit;
    padding: 9px 22px;
    border: 0;
    background: transparent;
    color: var(--muted);
    font-size: 13px; font-weight: 500;
    border-radius: 999px;
    cursor: pointer;
    transition: background .18s ease, color .18s ease,
                box-shadow .18s ease, transform .18s ease;
}
.post-sesion-tab:hover { color: var(--ink-2, var(--ink)); }
.post-sesion-tab.is-active {
    background: var(--surface);
    color: var(--ink);
    font-weight: 600;
    box-shadow:
        0 1px 0 rgba(255,255,255,.7) inset,
        0 2px 6px rgba(20,39,43,.12);
}
.post-sesion-field-wrap {
    width: 100%;
    max-width: 360px;
    margin-top: 16px;
    text-align: left;
}
.post-sesion-field-wrap.is-hidden { display: none; }
.post-sesion-field-label {
    display: block;
    font-size: 13px; font-weight: 500;
    color: var(--ink-2, var(--muted));
    margin-bottom: 8px;
}
.post-sesion-input {
    appearance: none; font-family: inherit;
    width: 100%;
    padding: 13px 16px;
    border: 1px solid var(--line);
    background: var(--surface);
    border-radius: 14px;
    color: var(--ink);
    font-size: 15px;
    transition: border-color .18s ease, box-shadow .18s ease;
}
.post-sesion-input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 14%, transparent);
}
.post-sesion-input::placeholder { color: color-mix(in srgb, var(--muted) 80%, transparent); }
.post-sesion-field-msg {
    margin: 6px 2px 0;
    font-size: 12.5px;
    color: var(--rose, #B0494E);
    min-height: 1em;
}

/* ─── Paso 2 · Estrellas + chips ───────────────────────────────────────── */
.post-sesion-stars {
    display: inline-flex;
    gap: 12px;
    margin-top: 20px;
}
.post-sesion-star {
    appearance: none; font-family: inherit;
    width: 56px; height: 56px;
    border: 0; background: transparent;
    color: color-mix(in srgb, var(--muted) 55%, var(--ink) 0%);
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 14px;
    cursor: pointer;
    transition: transform .15s cubic-bezier(.34,1.56,.64,1),
                color .2s ease,
                background .2s ease;
}
.post-sesion-star svg { width: 38px; height: 38px; }
.post-sesion-star svg { transition: fill .2s ease; }
.post-sesion-star:hover { transform: translateY(-2px); }
.post-sesion-star.is-on {
    color: #C9892F;
}
.post-sesion-star.is-on svg { fill: #E5A340; }
.post-sesion-star:focus-visible {
    outline: none;
    background: color-mix(in srgb, var(--accent) 8%, transparent);
}
.post-sesion-stars-hint {
    margin: 10px 0 0;
    min-height: 1.4em;
    font-size: 13.5px; font-weight: 500;
    color: color-mix(in srgb, var(--accent) 60%, var(--ink) 40%);
    letter-spacing: .002em;
    transition: opacity .25s ease;
}

.post-sesion-chips {
    width: 100%;
    margin-top: 14px;
    display: flex; flex-direction: column; gap: 10px;
    animation: postSesionStepIn .3s ease-out;
}
.post-sesion-chips-label {
    font-size: 12.5px;
    color: var(--muted);
    text-align: center;
}
.post-sesion-chips-grid {
    display: flex; flex-wrap: wrap; gap: 8px;
    justify-content: center;
}
.post-sesion-chip {
    appearance: none; font-family: inherit;
    padding: 8px 14px;
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--ink-2, var(--muted));
    font-size: 13px; font-weight: 500;
    border-radius: 999px;
    cursor: pointer;
    transition: border-color .18s ease, color .18s ease,
                background .18s ease, box-shadow .18s ease;
}
.post-sesion-chip:hover {
    border-color: color-mix(in srgb, var(--accent) 35%, var(--line));
    color: var(--ink);
}
.post-sesion-chip.is-on {
    border-color: var(--accent);
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 8%, var(--surface));
    box-shadow: 0 1px 2px color-mix(in srgb, var(--accent) 18%, transparent);
}

/* ─── Paso 3 · Recap + textarea ────────────────────────────────────────── */
/* Pill estructurado: "Tu valoración · ★★★★★ · 5 de 5"
   No es solo decoración · da contexto al usuario de lo que ya eligió. */
.post-sesion-recap {
    display: inline-flex; align-items: center;
    gap: 10px;
    margin-top: 14px;
    padding: 9px 18px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent) 8%, var(--surface));
    border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--line));
    font-size: 13px;
    color: var(--ink-2, var(--muted));
}
.post-sesion-recap-label {
    font-weight: 500;
    letter-spacing: .003em;
}
.post-sesion-recap-sep {
    width: 1px; height: 14px;
    background: color-mix(in srgb, var(--accent) 28%, transparent);
}
.post-sesion-recap-stars {
    display: inline-flex; gap: 3px;
    color: #C9892F;
}
.post-sesion-recap-stars svg { fill: #E5A340; }
.post-sesion-recap-num {
    font-weight: 600;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}
.post-sesion-recap-of {
    color: var(--muted);
    font-size: 12.5px;
}

.post-sesion-textarea-wrap {
    position: relative;
    width: 100%;
    margin-top: 8px;
    text-align: left;
}
.post-sesion-textarea {
    appearance: none; font-family: inherit;
    width: 100%;
    padding: 18px 18px 36px;
    min-height: 132px;
    resize: vertical;
    border: 1px solid var(--line);
    background: var(--surface);
    border-radius: 16px;
    color: var(--ink);
    font-size: 15px;
    line-height: 1.55;
    transition: border-color .18s ease, box-shadow .18s ease;
}
.post-sesion-textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 14%, transparent);
}
.post-sesion-textarea::placeholder {
    color: color-mix(in srgb, var(--muted) 80%, transparent);
    font-style: italic;
}
.post-sesion-char-counter {
    position: absolute;
    right: 14px; bottom: 12px;
    font-size: 11.5px;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
    background: color-mix(in srgb, var(--surface) 90%, transparent);
    padding: 2px 7px;
    border-radius: 6px;
}

/* ─── CTAs comunes a todos los pasos ───────────────────────────────────── */
.post-sesion-cta-primary {
    appearance: none; font-family: inherit;
    width: 100%; max-width: 360px;
    margin-top: 20px;
    padding: 14px 24px;
    border: 0;
    background: linear-gradient(180deg,
        var(--accent),
        color-mix(in srgb, var(--accent) 88%, #0F1F22));
    color: var(--accent-ink, #fff);
    font-size: 15px; font-weight: 600;
    letter-spacing: .005em;
    border-radius: 999px;                            /* pill coherente con el resto */
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
    box-shadow:
        0 1px 0 rgba(255,255,255,.18) inset,
        0 10px 28px -12px color-mix(in srgb, var(--accent) 60%, transparent);
}
.post-sesion-cta-primary:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow:
        0 1px 0 rgba(255,255,255,.22) inset,
        0 10px 28px -10px color-mix(in srgb, var(--accent) 70%, transparent);
}
.post-sesion-cta-primary:active:not(:disabled) { transform: translateY(0); }
.post-sesion-cta-primary:disabled {
    cursor: not-allowed;
    opacity: .45;
    box-shadow: none;
}

.post-sesion-cta-text {
    appearance: none; font-family: inherit;
    background: transparent;
    border: 0;
    margin: 4px 0 4px;
    padding: 10px 12px;
    color: var(--accent);
    font-size: 13.5px; font-weight: 500;
    cursor: pointer;
    border-radius: 8px;
    transition: background .15s ease;
}
.post-sesion-cta-text:hover {
    background: color-mix(in srgb, var(--accent) 8%, transparent);
}

/* Nota al pie · pill sobrio con candado · alineado al inicio del texto para
   que no flote sobre la primera línea cuando el texto envuelve. Ancho
   coincide con el CTA primary (360px) para crear una columna vertical
   limpia: título → sub → contenido → CTA → nota, todos al mismo eje. */
.post-sesion-foot-note {
    margin: 14px 0 0;
    display: flex;                   /* block-level flex para respetar width */
    align-items: flex-start;
    gap: 10px;
    padding: 11px 14px;
    width: 100%;
    max-width: 360px;
    background: color-mix(in srgb, var(--surface-2, var(--surface)) 55%, var(--surface));
    border: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
    border-radius: 14px;
    color: var(--ink-2, var(--muted));
    font-size: 12.5px;
    line-height: 1.5;
    text-align: left;
}
/* Variante compacta · pill "🔒 Anónimo" + texto explicativo TODO en una sola
   línea horizontal · perfecta para modal con espacio acotado. */
.post-sesion-foot-note-compact {
    align-items: center;
    gap: 8px;
    padding: 6px 12px 6px 6px;
    width: auto;
    max-width: none;                 /* no fuerza wrap · ocupa el ancho disponible */
    border-radius: 999px;
    font-size: 11.5px;
    line-height: 1.4;
    background: color-mix(in srgb, var(--surface-2, var(--surface)) 40%, var(--surface));
    border-color: color-mix(in srgb, var(--line) 80%, transparent);
    flex-wrap: nowrap;               /* todo en una sola fila */
    white-space: nowrap;
}
.post-sesion-foot-note-compact > svg { display: none; }   /* el lock vive dentro del badge */
.post-sesion-anon-badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 9px;
    flex: 0 0 auto;
    background: color-mix(in srgb, var(--accent) 10%, var(--surface));
    border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
    border-radius: 999px;
    color: var(--accent);
    font-weight: 600;
    font-size: 11px;
    letter-spacing: .01em;
    white-space: nowrap;
}
.post-sesion-anon-badge svg { color: var(--accent); }
.post-sesion-foot-text {
    color: var(--muted);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;          /* si la modal se angosta mucho · "…" */
}

/* En mobile (modal a ancho casi total < 380px) el contenido puede no caber
   en una sola línea sin que la elipsis trunque info útil. Permitimos que
   se relaje el nowrap solo bajo 420px de ventana. */
@media (max-width: 420px) {
    .post-sesion-foot-note-compact {
        white-space: normal;
        flex-wrap: wrap;
    }
    .post-sesion-foot-text {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
    }
}
.post-sesion-foot-note svg {
    flex: 0 0 12px;
    margin-top: 3px;             /* baja el icono al baseline de la primera línea */
    color: var(--accent);
    opacity: .75;
}
.post-sesion-foot-note strong {
    font-weight: 600;
    color: var(--ink);
    display: block;
    margin-bottom: 1px;
}
.post-sesion-foot-note .anonymous-tag {
    display: inline-block;
    padding: 1px 7px;
    margin: 0 1px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 6px;
    font-size: 11.5px;
    font-weight: 500;
    color: var(--ink-2, var(--muted));
    letter-spacing: 0;
}

/* ─── Paso 4 · Éxito + preview ─────────────────────────────────────────── */
.post-sesion-success {
    position: relative;
    width: 96px; height: 96px;
    margin-top: 16px;
    display: flex; align-items: center; justify-content: center;
    color: var(--accent);
}
.post-sesion-success-orb {
    position: absolute; inset: 0;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 45%,
        color-mix(in srgb, var(--accent) 22%, transparent),
        transparent 70%);
}
.post-sesion-success-check {
    position: relative; z-index: 1;
    animation: postSesionCheckIn .55s cubic-bezier(.16,1,.3,1);
}
@keyframes postSesionCheckIn {
    from { transform: scale(.6); opacity: 0; }
    to   { transform: scale(1);  opacity: 1; }
}
.post-sesion-success-spark {
    position: absolute;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--accent) 80%, transparent);
    opacity: 0;
    animation: postSesionSpark 1.6s ease-out infinite;
}
.post-sesion-success-spark.s1 { top: 10%; left: 14%;  animation-delay: .2s; }
.post-sesion-success-spark.s2 { top: 22%; right: 8%;  animation-delay: .7s; }
.post-sesion-success-spark.s3 { bottom: 18%; left: 0; animation-delay: 1.1s; }
@keyframes postSesionSpark {
    0%   { opacity: 0; transform: scale(.4); }
    40%  { opacity: .8; transform: scale(1); }
    100% { opacity: 0; transform: scale(.4); }
}

.post-sesion-preview {
    width: 100%; max-width: 440px;
    margin-top: 18px;
    padding: 18px 20px 16px;
    background: color-mix(in srgb, var(--accent) 5%, var(--surface));
    border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--line));
    border-radius: 18px;
    text-align: left;
    box-shadow:
        0 1px 0 rgba(255,255,255,.5) inset,
        0 12px 32px -18px color-mix(in srgb, var(--accent) 28%, transparent),
        0 1px 2px rgba(20,39,43,.04);
}
.post-sesion-preview[hidden] { display: none; }
.post-sesion-preview-head {
    display: flex; align-items: center; gap: 10px;
}
.post-sesion-preview-mark {
    font-family: 'Fraunces', serif;
    font-size: 28px;
    color: var(--accent);
    line-height: 1;
    margin-top: -6px;
}
.post-sesion-preview-tag {
    flex: 1;
    font-size: 13px; font-weight: 600;
    color: var(--ink);
}
.post-sesion-preview-pill {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 9px;
    font-size: 10.5px; font-weight: 500;
    letter-spacing: .04em;
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 10%, var(--surface));
    border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line));
    border-radius: 999px;
}
.post-sesion-preview-body {
    margin: 10px 0 0;
    font-family: 'Fraunces', 'Cormorant Garamond', serif;
    font-size: 16px; font-weight: 400;
    line-height: 1.5;
    color: var(--ink);
    font-style: italic;
}
.post-sesion-preview-foot {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid color-mix(in srgb, var(--accent) 16%, var(--line));
    display: flex; align-items: center; justify-content: space-between;
}
.post-sesion-preview-stars {
    display: inline-flex; gap: 3px;
    color: #C9892F;
}
.post-sesion-preview-stars svg { fill: #E5A340; }

/* ─── Responsive · mobile bottom sheet ─────────────────────────────────── */
@media (min-width: 720px) {
    .post-sesion-overlay {
        align-items: center;
        padding: 24px;
    }
    .post-sesion-sheet {
        border-radius: 26px;
        max-height: 88vh;
    }
    .post-sesion-step {
        padding: 8px 40px 32px;
    }
}
@media (max-width: 480px) {
    .post-sesion-step { padding: 8px 20px 22px; }
    .post-sesion-step-title { font-size: 22px; }
    .post-sesion-stars { gap: 6px; }
    .post-sesion-star { width: 46px; height: 46px; }
    .post-sesion-star svg { width: 32px; height: 32px; }
    .post-sesion-head { padding: 14px 16px 10px; }
    .post-sesion-mini-avatar { width: 36px; height: 36px; min-width: 36px; flex-shrink: 0; font-size: 17px; }
    .post-sesion-progress { padding: 0 16px 4px; }
    .post-sesion-step-icon { width: 48px; min-width: 48px; max-width: 48px; height: 48px; min-height: 48px; max-height: 48px; flex: 0 0 48px; }

    /* En mobile · cuando hay "Volver" visible, recortamos el bloque del psi a
       solo el avatar para que el header no haga wrap ni recorte el botón. */
    .post-sesion-sheet[data-step="valoracion"] .post-sesion-head-text,
    .post-sesion-sheet[data-step="comentario"] .post-sesion-head-text {
        display: none;
    }
    .post-sesion-back span { display: none; }            /* solo flecha */
    .post-sesion-back { padding: 7px 9px; }
}

/* ═══════════════════════════════════════════════════════════════
   /disponibilidad · Toolbar de modalidad
   Control compacto para elegir cómo se pintan los bloques de la grilla.
   Se mantiene liviano para no competir con los días/horas.
   ═══════════════════════════════════════════════════════════════ */
.availability-modalidad-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 7px;
    margin-bottom: 10px;
    background:
        linear-gradient(180deg,
            color-mix(in srgb, var(--surface-2) 44%, var(--surface)) 0%,
            color-mix(in srgb, var(--surface) 92%, var(--accent-soft)) 100%);
    border: 1px solid color-mix(in srgb, var(--line) 90%, var(--accent-soft));
    border-radius: 10px;
    box-shadow: inset 0 1px 0 color-mix(in srgb, white 70%, transparent);
}
.availability-modalidad-toolbar .modalidad-toolbar-label {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 760;
    letter-spacing: 0;
    text-transform: none;
    color: color-mix(in srgb, var(--ink) 72%, var(--muted));
    padding: 0 8px;
    white-space: nowrap;
}
.availability-modalidad-toolbar .modalidad-toolbar-options {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 3px;
    flex: 1 1 440px;
    max-width: 560px;
    padding: 3px;
    border: 1px solid color-mix(in srgb, var(--line) 84%, transparent);
    border-radius: 8px;
    background: color-mix(in srgb, var(--surface-2) 38%, var(--surface));
}
.availability-modalidad-toolbar button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 0;
    min-height: 34px;
    padding: 7px 10px;
    border-radius: 6px;
    border: 1px solid transparent;
    background: transparent;
    font-size: 12.5px;
    font-weight: 720;
    line-height: 1;
    color: color-mix(in srgb, var(--ink) 66%, var(--muted));
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.availability-modalidad-toolbar button > span:not(.modalidad-toolbar-icons) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.availability-modalidad-toolbar .mode-icon {
    width: 14px;
    height: 14px;
}
.availability-modalidad-toolbar .modalidad-toolbar-icons {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    flex: 0 0 auto;
}
.availability-modalidad-toolbar button:hover {
    color: var(--ink);
    background: color-mix(in srgb, var(--surface) 72%, transparent);
    border-color: color-mix(in srgb, var(--line) 88%, var(--accent-soft));
}
.availability-modalidad-toolbar button.active {
    color: color-mix(in srgb, var(--ink) 86%, var(--accent));
    background: var(--surface);
    border-color: color-mix(in srgb, var(--accent) 24%, var(--line));
    box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.06),
        inset 0 1px 0 color-mix(in srgb, white 74%, transparent);
}
@media (max-width: 640px) {
    .availability-modalidad-toolbar {
        align-items: stretch;
    }
    .availability-modalidad-toolbar .modalidad-toolbar-label {
        width: 100%;
        padding: 1px 2px 0;
    }
    .availability-modalidad-toolbar .modalidad-toolbar-options {
        flex-basis: 100%;
        max-width: none;
    }
    .availability-modalidad-toolbar button {
        padding-left: 7px;
        padding-right: 7px;
        font-size: 12px;
    }
}

/* ═══════════════════════════════════════════════════════════════
   /disponibilidad · Modal "Editar reglas de reserva"
   Antes los labels tenían un pill .opt inline que hacía wrap
   inconsistente (algunos campos a 1 línea, otros a 2 con la pill
   centrada vertical → "torcido"). Ahora: labels en una sola línea,
   unidad como sufijo dentro del input, helper text bajo cada
   campo para evitar el "qué significa esto?".
   ═══════════════════════════════════════════════════════════════ */
.reglas-modal {
    max-width: 560px;
}
.reglas-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 18px;
}
.reglas-form-grid .field-wrap { min-width: 0; }
.reglas-form-grid .field-label {
    /* Una sola línea siempre — la unidad vive ahora dentro del input. */
    flex-wrap: nowrap;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 8px;
}
.reglas-form-grid .field-helper {
    font-size: 11.5px;
    line-height: 1.45;
    color: var(--muted);
    margin-top: 6px;
    min-height: 28px;        /* alinea visualmente filas con helpers de 1 vs 2 líneas */
}
.reglas-form-grid .input-with-prefix input {
    text-align: left;
    font-variant-numeric: tabular-nums;
}
/* Buffer (último campo) toma fila completa para que la frase larga
   "Tiempo libre entre una sesión y la siguiente..." no apriete al
   helper de cancelación a su lado. */
.reglas-form-grid .field-wrap[data-regla-field="bufferMin"] {
    grid-column: 1 / -1;
}
.reglas-form-grid .field-wrap[data-regla-field="bufferMin"] .input-with-prefix {
    max-width: 260px;
}
@media (max-width: 540px) {
    .reglas-form-grid { grid-template-columns: 1fr; gap: 14px; }
    .reglas-form-grid .field-wrap[data-regla-field="bufferMin"] .input-with-prefix { max-width: none; }
    .reglas-form-grid .field-helper { min-height: 0; }
}

/* ═══════════════════════════════════════════════════════════════
   /reservas-pendientes/{id}/revisar · resolución de conflicto de
   identidad. 2 columnas (visitante vs paciente sugerido) +
   acciones grandes con tono claro por intención (asociar/familiar/
   nueva/rechazar).
   ═══════════════════════════════════════════════════════════════ */
.revisar-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 18px;
}
.revisar-card {
    background: var(--surface, #fff);
    border: 1px solid var(--line-soft, rgba(15, 23, 42, 0.08));
    border-radius: 18px;
    padding: 22px 22px 18px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.revisar-card-head {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 16px;
}
.revisar-card-head h2 {
    font-size: 20px;
    line-height: 1.25;
    margin: 0;
    color: var(--ink, #0f172a);
}
.revisar-card-tag {
    display: inline-block;
    align-self: flex-start;
    font-family: 'Inter', sans-serif;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(244, 114, 182, 0.12);
    color: #be185d;
}
.revisar-card-tag.is-existing {
    background: rgba(59, 130, 246, 0.12);
    color: #1d4ed8;
}
.revisar-card-datos {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 18px;
    margin: 0;
}
.revisar-card-datos > div { min-width: 0; }
.revisar-card-datos dt {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--ink-3, #64748b);
    margin: 0 0 2px;
}
.revisar-card-datos dd {
    font-family: 'Inter', sans-serif;
    font-size: 14.5px;
    color: var(--ink, #0f172a);
    margin: 0;
    word-break: break-word;
}
.revisar-card-foot {
    margin-top: 16px;
    border-top: 1px dashed var(--line-soft, rgba(15, 23, 42, 0.08));
    padding-top: 12px;
}

.revisar-acciones {
    margin-top: 18px;
    background: var(--surface, #fff);
    border: 1px solid var(--line-soft, rgba(15, 23, 42, 0.08));
    border-radius: 18px;
    padding: 22px 22px 20px;
}
.revisar-acciones h3 {
    font-size: 18px;
    margin: 0 0 6px;
    color: var(--ink, #0f172a);
}
.revisar-acciones-hint {
    font-family: 'Inter', sans-serif;
    font-size: 13.5px;
    color: var(--ink-3, #64748b);
    margin: 0 0 16px;
}
.revisar-acciones-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 12px;
}
.revisar-action {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 14px 16px;
    border-radius: 14px;
    border: 1px solid var(--line-soft, rgba(15, 23, 42, 0.08));
    background: #fff;
    text-align: left;
    cursor: pointer;
    transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.revisar-action:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08);
}
.revisar-action:disabled {
    opacity: .5;
    cursor: not-allowed;
}
.revisar-action-title {
    font-family: 'Inter', sans-serif;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--ink, #0f172a);
}
.revisar-action-desc {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    color: var(--ink-3, #64748b);
    line-height: 1.4;
}
.revisar-action-asociar  { border-color: rgba(34, 197, 94, 0.35); }
.revisar-action-nueva    { border-color: rgba(59, 130, 246, 0.35); }
.revisar-action-familiar { border-color: rgba(168, 85, 247, 0.35); }
.revisar-action-rechazar { border-color: rgba(239, 68, 68, 0.35); }
.revisar-action-rechazar .revisar-action-title { color: #b91c1c; }

/* Vínculo familiar · radio pills bajo la grilla de acciones · solo el JS
   las lee cuando el psi clickea FAMILIAR. Default "Otro" para que el flow
   siga siendo un click si al psi no le importa el detalle. */
.revisar-vinculo {
    margin-top: 14px;
    padding: 12px 14px;
    border: 1px dashed color-mix(in srgb, var(--line) 90%, var(--accent-soft));
    border-radius: 12px;
    background: color-mix(in srgb, var(--surface-2) 22%, var(--surface));
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}
.revisar-vinculo legend {
    flex-basis: 100%;
    padding: 0;
    margin: 0 0 6px;
    font-size: 12.5px;
    color: var(--muted);
    font-weight: 600;
}
.revisar-vinculo-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface);
    cursor: pointer;
    font-size: 12.5px;
    color: var(--ink-2);
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.revisar-vinculo-pill:hover {
    border-color: color-mix(in srgb, var(--accent) 30%, var(--line));
    color: var(--ink);
}
.revisar-vinculo-pill input[type="radio"] {
    margin: 0;
    accent-color: var(--accent);
    width: 14px;
    height: 14px;
}
.revisar-vinculo-pill:has(input:checked) {
    background: color-mix(in srgb, var(--accent-soft) 60%, var(--surface));
    border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
    color: color-mix(in srgb, var(--accent) 88%, var(--ink));
    font-weight: 650;
}

@media (max-width: 720px) {
    .revisar-card { padding: 18px 16px 14px; border-radius: 14px; }
    .revisar-card-datos { grid-template-columns: 1fr; gap: 10px; }
    .revisar-acciones { padding: 18px 16px 16px; border-radius: 14px; }
}