:root {
    --pro-ink: #213128;
    --pro-ink-soft: #4f6056;
    --pro-muted: #66776d;
    --pro-surface: rgba(255, 255, 255, 0.94);
    --pro-surface-strong: #f8fdf9;
    --pro-soft: #f2f7f2;
    --pro-soft-2: #edf4ee;
    --pro-accent: #4a6e5c;
    --pro-accent-strong: #06402B;
    --pro-accent-deep: #032e1e;
    --pro-gold: #D4AF37;
    --pro-gold-soft: #fdf8e8;
    --pro-border: rgba(215, 226, 220, 0.9);
    --pro-border-strong: rgba(201, 212, 205, 0.9);
    --pro-glow: rgba(74, 110, 92, 0.16);
    --pro-shadow-sm: 0 12px 24px rgba(25, 37, 30, 0.08);
    --pro-shadow: 0 24px 48px rgba(19, 28, 23, 0.14);
    --pro-shadow-lg: 0 34px 74px rgba(16, 22, 19, 0.2);
    --pro-radius-sm: 16px;
    --pro-radius-md: 22px;
    --pro-radius-lg: 30px;
    --pro-font-display: "Cormorant Garamond", "Playfair Display", Georgia, serif;
    --pro-font-body: "Plus Jakarta Sans", "Montserrat", "Poppins", Arial, sans-serif;
}

html,
body {
    scroll-behavior: smooth;
}

body {
    transition: background 0.35s ease, color 0.2s ease;
}

body {
    font-family: var(--pro-font-body);
    color: var(--pro-ink);
    background:
        radial-gradient(1000px 520px at 12% -8%, rgba(74, 110, 92, 0.10), transparent 60%),
        radial-gradient(760px 420px at 100% 14%, rgba(163, 194, 167, 0.16), transparent 58%),
        radial-gradient(900px 460px at 84% 100%, rgba(108, 138, 112, 0.14), transparent 62%),
        linear-gradient(180deg, #f9fbf7 0%, #eff5ef 44%, #e7efe8 100%);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

body::before,
body::after {
    content: "";
    position: fixed;
    inset: auto;
    pointer-events: none;
    z-index: 0;
    filter: blur(8px);
    opacity: 0.66;
}

body::before {
    top: 112px;
    right: -90px;
    width: 240px;
    height: 240px;
    background: radial-gradient(circle, rgba(74, 110, 92, 0.18) 0%, rgba(74, 110, 92, 0) 70%);
}

body::after {
    left: -88px;
    bottom: 14%;
    width: 280px;
    height: 280px;
    background: radial-gradient(circle, rgba(127, 156, 133, 0.18) 0%, rgba(127, 156, 133, 0) 72%);
}

body > * {
    position: relative;
    z-index: 1;
}

h1,
h2,
h3,
h4,
.hero-title,
.section-head h2,
.login-card h1,
.login-card h2,
.card h2,
.modal-card h2,
.modal-card h3 {
    font-family: var(--pro-font-display);
    color: var(--pro-ink);
    letter-spacing: -0.01em;
}

p,
label,
small,
span,
li,
.hero-sub,
.block-copy,
.trust-copy,
.form-subcopy {
    color: var(--pro-muted);
}

a,
button,
.btn,
.btn-primary,
.btn-reservar,
.btn-buscar,
.btn-entrar,
.primary-submit,
.hero-primary,
.showcase-button.primary {
    transition: transform .22s ease, box-shadow .22s ease, filter .22s ease, background .22s ease, border-color .22s ease;
}

a:hover,
button:hover,
.btn:hover,
.btn-primary:hover,
.btn-reservar:hover,
.btn-buscar:hover,
.btn-entrar:hover,
.primary-submit:hover,
.hero-primary:hover,
.showcase-button.primary:hover {
    transform: translateY(-3px);
}

button,
.btn,
.btn-primary,
.btn-reservar,
.btn-buscar,
.btn-entrar,
.primary-submit,
.hero-primary,
.showcase-button.primary {
    background: linear-gradient(135deg, var(--pro-accent) 0%, var(--pro-accent-strong) 52%, var(--pro-accent-deep) 100%);
    color: #fff;
    border: none;
    box-shadow: 0 18px 30px rgba(6, 64, 43, 0.22), inset 0 1px 0 rgba(200, 230, 215, 0.24);
}

button,
.btn,
.btn-primary,
.btn-reservar,
.btn-buscar,
.btn-entrar,
.primary-submit,
.hero-primary,
.hero-secondary,
.showcase-button,
.btn-nav,
.btn-mini,
.mode-toggle,
.flow-switch-button {
    border-radius: 999px;
    font-family: var(--pro-font-body);
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

input,
textarea,
select,
.input,
.input-dni,
.select-input {
    border: 1.5px solid var(--pro-border);
    background: rgba(255, 255, 255, 0.96);
    color: var(--pro-ink);
    border-radius: var(--pro-radius-sm);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.86);
}

input:focus,
textarea:focus,
select:focus,
.input:focus,
.input-dni:focus,
.select-input:focus {
    outline: none;
    border-color: rgba(6, 64, 43, 0.45);
    box-shadow: 0 0 0 5px rgba(74, 110, 92, 0.14);
}

.container,
.card,
.modal-card,
.form-card,
.login-card,
.trust-card,
.servicio,
.servicio-card,
.turno-item,
.kpi-card,
.calendar-container,
.detalle-dia-card,
.login-box,
.hero-card,
.showcase-block,
.faq-item,
.metric-card,
.info-box,
.horarios-admin-card {
    border-radius: var(--pro-radius-md);
    border: 1px solid rgba(255, 255, 255, 0.76);
    box-shadow: var(--pro-shadow);
    backdrop-filter: blur(10px);
}

.container,
.card,
.login-card,
.modal-card,
.login-box,
.hero-card,
.showcase-block {
    background:
        radial-gradient(circle at top right, rgba(74, 110, 92, 0.06), rgba(74, 110, 92, 0) 28%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(245, 249, 246, 0.96) 100%);
}

.logo,
.hero-brand-mark,
.logo-hero,
.hero-logo {
    filter: drop-shadow(0 14px 22px rgba(31, 43, 35, 0.14));
}

.logo,
.hero-brand-lockup,
.logo-hero {
    position: relative;
    isolation: isolate;
}

.hero,
.hero-section {
    isolation: isolate;
}

.hero::after,
.hero-section::after,
.hero-overlay,
.hero-bg,
.login-page-container::before {
    filter: saturate(1.05);
}

.hero-card,
.hero-content,
.login-card,
.container,
.card {
    overflow: hidden;
}

.hero-card::before,
.login-card::before,
.card::before,
.container::before,
.modal-card::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(120deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.02) 42%, rgba(255, 255, 255, 0.14) 72%, rgba(255, 255, 255, 0));
    opacity: 0.7;
}

.hero h1,
.hero-title,
.section-head h2,
.card h2,
.modal-card h2,
.login-card h1,
.login-card h2 {
    text-shadow: 0 10px 22px rgba(29, 46, 35, 0.08);
}

.btn-nav,
.btn-mini,
.mode-toggle {
    background: rgba(255, 255, 255, 0.82);
    color: var(--pro-ink);
    border: 1px solid rgba(197, 211, 201, 0.84);
    box-shadow: 0 12px 24px rgba(31, 46, 36, 0.08);
}

.btn-nav.active,
.btn-mini.alerta,
.pill.reservado,
.pill.bloqueado {
    box-shadow: 0 12px 22px rgba(31, 46, 36, 0.08);
}

.hero-secondary,
.showcase-button,
.btn-dismiss {
    background: rgba(255, 255, 255, 0.86);
    color: #31463b;
    border: 1px solid rgba(120, 141, 126, 0.28);
    box-shadow: 0 16px 30px rgba(49, 63, 53, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.service-card:hover,
.servicio:hover,
.turno-item:hover,
.kpi-card:hover,
.faq-item:hover,
.metric-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--pro-shadow-lg);
}

.servicio,
.service-card,
.metric-card,
.faq-item,
.turno-item,
.kpi-card,
.calendar-container,
.detalle-dia-card {
    transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease;
}

.estado-tag.confirmado,
.pill.disponible,
.turno-item .fecha-tag {
    background: #eef7f2;
    color: #2f7c5d;
}

.estado-tag.cancelado {
    background: #fdf8e8;
    color: #8a6c00;
}

.footer,
#footerContainer {
    color: #738278;
}

@media (max-width: 768px) {
    body {
        background:
            radial-gradient(820px 420px at 10% -16%, rgba(74, 110, 92, 0.10), transparent 62%),
            linear-gradient(180deg, #f8fbf8 0%, #edf3ee 100%);
    }

    body::before,
    body::after {
        opacity: 0.5;
    }

    .container,
    .card,
    .modal-card,
    .login-card,
    .hero-card,
    .showcase-block {
        border-radius: 22px;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
    }
}

/* ===== TEMAS DE COLOR ===== */

/* Esmeralda — vivaz y fresco */
body[data-tema="esmeralda"] {
    --pro-accent: #1a8a56;
    --pro-accent-strong: #00512e;
    --pro-accent-deep: #00301b;
    --pro-ink: #0d2117;
    --pro-ink-soft: #385244;
    --pro-muted: #5a7a6a;
    --pro-soft: #eaf7f1;
    --pro-soft-2: #d8f0e5;
    --pro-surface-strong: #f5fdf8;
    --pro-border: rgba(160, 220, 195, 0.9);
    --pro-glow: rgba(26, 138, 86, 0.18);
    --pro-shadow-sm: 0 12px 24px rgba(0, 60, 35, 0.10);
    --pro-shadow: 0 24px 48px rgba(0, 50, 28, 0.16);
}

/* Bosque — profundo y premium */
body[data-tema="bosque"] {
    --pro-accent: #3a5c47;
    --pro-accent-strong: #1c3528;
    --pro-accent-deep: #0e201a;
    --pro-ink: #182820;
    --pro-ink-soft: #40564a;
    --pro-muted: #58706480;
    --pro-soft: #f0f5f2;
    --pro-soft-2: #e5ede8;
    --pro-surface-strong: #f6f9f7;
    --pro-border: rgba(180, 200, 190, 0.9);
    --pro-glow: rgba(58, 92, 71, 0.16);
    --pro-shadow-sm: 0 12px 24px rgba(20, 40, 30, 0.10);
    --pro-shadow: 0 24px 48px rgba(15, 30, 22, 0.16);
}

/* Anuncio banner para pacientes */
.mimar-anuncio-banner {
    background: linear-gradient(135deg, var(--pro-accent-strong) 0%, var(--pro-accent) 100%);
    color: #fff;
    text-align: center;
    padding: 10px 20px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.03em;
    position: relative;
    z-index: 100;
    line-height: 1.5;
    animation: none;
}
.mimar-anuncio-banner a { color: #fff; text-decoration: underline; }
.mimar-anuncio-cerrar {
    position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
    background: none; border: none; color: rgba(255,255,255,0.8);
    cursor: pointer; font-size: 18px; line-height: 1; padding: 0 4px;
}

/* ===== SENSITIVE DATA BLUR ===== */
.dato-sensible {
    filter: blur(5px);
    transition: filter 0.18s ease, opacity 0.18s ease;
    cursor: pointer;
    user-select: none;
    border-radius: 3px;
    display: inline-block;
    opacity: 0.8;
}
.dato-sensible:hover {
    filter: blur(3px);
    opacity: 1;
}
.dato-sensible.revelado {
    filter: none;
    opacity: 1;
    cursor: default;
    user-select: text;
}
.dato-sensible-wrap {
    display: flex;
    align-items: baseline;
    gap: 4px;
}
.dato-sensible-hint {
    font-size: 10px;
    color: var(--pro-muted);
    opacity: 0.55;
    letter-spacing: 0.03em;
    transition: opacity 0.15s ease;
    pointer-events: none;
}
.dato-sensible.revelado + .dato-sensible-hint {
    display: none;
}

/* ===== GRADIENT ACCENT BAR ON CARDS ===== */
.servicio,
.service-card,
.turno-item,
.detalle-dia-card {
    position: relative;
    overflow: hidden;
}
.servicio::before,
.service-card::before,
.turno-item::before,
.detalle-dia-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--pro-accent-strong) 0%, var(--pro-accent) 52%, var(--pro-accent-light, #7db89e) 100%);
    opacity: 0;
    transition: opacity 0.26s ease;
    z-index: 1;
}
.servicio:hover::before,
.service-card:hover::before,
.turno-item:hover::before,
.detalle-dia-card:hover::before {
    opacity: 1;
}

/* ===== ENHANCED BADGE STYLES ===== */
.pill {
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.pill:hover {
    transform: translateY(-1px);
}
.pill.disponible {
    background: #eef7f2;
    color: #1b5c3f;
    border: 1px solid rgba(78, 163, 127, 0.3);
}
.pill.bloqueado {
    background: #f8f0e8;
    color: #7a4e1c;
    border: 1px solid rgba(180, 120, 60, 0.25);
}
.pill.reservado {
    background: #edf4ff;
    color: #1a4a8a;
    border: 1px solid rgba(66, 120, 200, 0.25);
}
.pill.cancelado {
    background: #fdf6e8;
    color: #8a5c00;
    border: 1px solid rgba(200, 155, 0, 0.25);
}

/* ===== SKELETON LOADER ===== */
@keyframes shimmerSlide {
    0%   { background-position: -200% 0; }
    100% { background-position:  200% 0; }
}

.skeleton {
    pointer-events: none;
    user-select: none;
}
.skeleton * { visibility: hidden !important; }
.skeleton {
    position: relative;
    overflow: hidden;
    border-radius: inherit;
}
.skeleton::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        rgba(74,110,92,0.05) 0%,
        rgba(74,110,92,0.11) 40%,
        rgba(74,110,92,0.05) 100%
    );
    background-size: 200% 100%;
    animation: shimmerSlide 1.5s ease infinite;
    border-radius: inherit;
}

/* ===== CARD ENTRANCE — stagger helpers ===== */
@keyframes cardIn {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

.animate-in {
    animation: cardIn 0.42s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.animate-in:nth-child(1)  { animation-delay: 0.04s; }
.animate-in:nth-child(2)  { animation-delay: 0.09s; }
.animate-in:nth-child(3)  { animation-delay: 0.14s; }
.animate-in:nth-child(4)  { animation-delay: 0.19s; }
.animate-in:nth-child(5)  { animation-delay: 0.24s; }
.animate-in:nth-child(6)  { animation-delay: 0.29s; }
.animate-in:nth-child(n+7) { animation-delay: 0.34s; }

/* ===== GLASS BUTTON (secundario) ===== */
.btn-glass {
    background: rgba(255, 255, 255, 0.82);
    color: var(--pro-ink);
    border: 1.5px solid rgba(140, 180, 160, 0.38);
    box-shadow: 0 10px 24px rgba(29, 51, 42, 0.08);
    border-radius: 999px;
    font-family: var(--pro-font-body);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    cursor: pointer;
    backdrop-filter: blur(8px);
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.btn-glass:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 32px rgba(29, 51, 42, 0.13);
    border-color: rgba(100, 160, 130, 0.60);
}