/* TDM Citas — Modo Día / Noche
   Variables CSS site-wide + estilos del toggle
   =================================================== */

/* ── Tokens del tema (light por defecto) ── */
:root {
    --tdmc-theme-bg:        #ffffff;
    --tdmc-theme-bg-soft:   #f5f5f7;
    --tdmc-theme-surface:   #ffffff;
    --tdmc-theme-surface-2: #fafafa;
    --tdmc-theme-text:      #1d1d1f;
    --tdmc-theme-text-mid:  #424245;
    --tdmc-theme-text-mute: #6e6e73;
    --tdmc-theme-border:    rgba(0,0,0,0.10);
    --tdmc-theme-border-st: rgba(0,0,0,0.18);
    --tdmc-theme-shadow:    0 2px 18px rgba(0,0,0,0.06);
    --tdmc-theme-shadow-h:  0 8px 36px rgba(0,0,0,0.12);
    --tdmc-theme-red:       #D70015;
    --tdmc-theme-red-light: #fff0f0;
}

/* ── Modo noche ── */
html[data-tdm-theme="dark"] {
    --tdmc-theme-bg:        #0b0b0d;
    --tdmc-theme-bg-soft:   #131316;
    --tdmc-theme-surface:   #18181b;
    --tdmc-theme-surface-2: #1f1f23;
    --tdmc-theme-text:      #f5f5f7;
    --tdmc-theme-text-mid:  #c7c7cf;
    --tdmc-theme-text-mute: #8e8e93;
    --tdmc-theme-border:    rgba(255,255,255,0.10);
    --tdmc-theme-border-st: rgba(255,255,255,0.20);
    --tdmc-theme-shadow:    0 2px 18px rgba(0,0,0,0.5);
    --tdmc-theme-shadow-h:  0 8px 36px rgba(0,0,0,0.6);
    --tdmc-theme-red:       #FF3B47;
    --tdmc-theme-red-light: rgba(255,59,71,0.12);

    color-scheme: dark;
    background: var(--tdmc-theme-bg);
    color: var(--tdmc-theme-text);
}

html[data-tdm-theme="dark"] body {
    background: var(--tdmc-theme-bg);
    color: var(--tdmc-theme-text);
}

/* ── Aplicar variables a las secciones del plugin ── */
.tdmc-taller,
.tdmc-form-section {
    background: var(--tdmc-theme-bg-soft);
    color: var(--tdmc-theme-text);
}
.tdmc-form-section {
    background: linear-gradient(180deg, var(--tdmc-theme-bg) 0%, var(--tdmc-theme-bg-soft) 100%);
}
.tdmc-title { color: var(--tdmc-theme-text); }
.tdmc-subtitle,
.tdmc-servicio-desc,
.tdmc-meta-item { color: var(--tdmc-theme-text-mute); }
.tdmc-eyebrow,
.tdmc-presupuesto { color: var(--tdmc-theme-red); }

.tdmc-servicio-card,
.tdmc-form,
.tdmc-calendar {
    background: var(--tdmc-theme-surface);
    border-color: var(--tdmc-theme-border);
    color: var(--tdmc-theme-text);
}
.tdmc-servicio-card:hover { box-shadow: var(--tdmc-theme-shadow-h); }

.tdmc-servicio-title { color: var(--tdmc-theme-text); }
.tdmc-servicio-meta { border-color: var(--tdmc-theme-border); }

.tdmc-option-body {
    background: var(--tdmc-theme-surface);
    border-color: var(--tdmc-theme-border);
    color: var(--tdmc-theme-text);
}
.tdmc-servicio-option:hover .tdmc-option-body {
    background: var(--tdmc-theme-surface-2);
    border-color: var(--tdmc-theme-border-st);
}
.tdmc-option-info strong { color: var(--tdmc-theme-text); }
.tdmc-option-info span   { color: var(--tdmc-theme-text-mute); }
.tdmc-option-icon { background: var(--tdmc-theme-red-light); color: var(--tdmc-theme-red); }
.tdmc-servicio-icon { background: var(--tdmc-theme-red-light); color: var(--tdmc-theme-red); }

.tdmc-slots {
    background: var(--tdmc-theme-bg-soft);
}
.tdmc-slots-title { color: var(--tdmc-theme-text-mute); }
.tdmc-slot {
    background: var(--tdmc-theme-surface);
    border-color: var(--tdmc-theme-border);
    color: var(--tdmc-theme-text);
}

.tdmc-cal-nav {
    background: var(--tdmc-theme-surface);
    border-color: var(--tdmc-theme-border);
    color: var(--tdmc-theme-text);
}
.tdmc-cal-nav:hover:not(:disabled) {
    background: var(--tdmc-theme-bg-soft);
    border-color: var(--tdmc-theme-border-st);
}
.tdmc-cal-weekdays span { color: var(--tdmc-theme-text-mute); }
.tdmc-cal-title { color: var(--tdmc-theme-text); }
.tdmc-cal-day { color: var(--tdmc-theme-text); }
.tdmc-cal-day.is-available { background: var(--tdmc-theme-surface-2); }
.tdmc-cal-day.is-available:hover { background: var(--tdmc-theme-red-light); }

.tdmc-field input,
.tdmc-field textarea {
    background: var(--tdmc-theme-surface);
    border-color: var(--tdmc-theme-border);
    color: var(--tdmc-theme-text);
}
.tdmc-field label { color: var(--tdmc-theme-text); }
.tdmc-check { color: var(--tdmc-theme-text-mid); }

.tdmc-resumen {
    background: var(--tdmc-theme-bg-soft);
}
.tdmc-resumen li { border-color: var(--tdmc-theme-border); }
.tdmc-resumen li span { color: var(--tdmc-theme-text-mute); }
.tdmc-resumen li strong { color: var(--tdmc-theme-text); }

.tdmc-step-title { color: var(--tdmc-theme-text); }
.tdmc-step-hint  { color: var(--tdmc-theme-text-mute); }
.tdmc-stepper li { color: var(--tdmc-theme-text-mute); }
.tdmc-stepper li.is-active { color: var(--tdmc-theme-text); }
.tdmc-stepper li span {
    background: var(--tdmc-theme-surface);
    border-color: var(--tdmc-theme-border);
    color: var(--tdmc-theme-text-mute);
}
.tdmc-stepper::before { background: var(--tdmc-theme-border); }

.tdmc-btn-ghost {
    color: var(--tdmc-theme-text);
    border-color: var(--tdmc-theme-border-st);
    background: transparent;
}
.tdmc-btn-ghost:hover { background: var(--tdmc-theme-bg-soft); }

.tdmc-success-detail {
    background: var(--tdmc-theme-bg-soft);
    color: var(--tdmc-theme-text-mid);
}
.tdmc-step-success h3 { color: var(--tdmc-theme-text); }
.tdmc-step-success p  { color: var(--tdmc-theme-text-mute); }

/* ══════════════════════════════════
   TOGGLE BUTTON (en menú y flotante)
   ══════════════════════════════════ */
.tdmc-theme-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 999px;
    border: 1.5px solid currentColor;
    background: transparent;
    font: inherit;
    font-size: 14px;
    font-weight: 500;
    color: inherit;
    cursor: pointer;
    transition: all 0.25s ease;
    line-height: 1;
    text-decoration: none;
}
.tdmc-theme-toggle:hover {
    background: rgba(215,0,21,0.08);
    color: #D70015;
    border-color: #D70015;
}
.tdmc-theme-toggle .tdmc-theme-icon {
    display: inline-block;
    transition: transform 0.4s cubic-bezier(.2,.7,.2,1), opacity 0.25s ease;
}
.tdmc-theme-toggle .tdmc-icon-moon { display: none; }
html[data-tdm-theme="dark"] .tdmc-theme-toggle .tdmc-icon-sun  { display: none; }
html[data-tdm-theme="dark"] .tdmc-theme-toggle .tdmc-icon-moon { display: inline-block; }

.tdmc-theme-toggle:hover .tdmc-theme-icon { transform: rotate(20deg); }

/* En menús el botón vive dentro de <li> — limpiamos defaults del tema */
.menu-item.tdmc-theme-toggle-item {
    list-style: none;
    display: flex;
    align-items: center;
}
.menu-item.tdmc-theme-toggle-item > .tdmc-theme-toggle {
    margin: 0;
}

/* Esconder label en menús muy estrechos */
@media (max-width: 720px) {
    .tdmc-theme-toggle .tdmc-theme-toggle-label { display: none; }
    .tdmc-theme-toggle { padding: 8px; }
}

/* Floating fallback (visible solo si no hay menú) */
.tdmc-theme-floating {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 9999;
}
.tdmc-theme-floating .tdmc-theme-toggle {
    background: var(--tdmc-theme-surface);
    border-color: var(--tdmc-theme-border-st);
    color: var(--tdmc-theme-text);
    box-shadow: var(--tdmc-theme-shadow);
    padding: 10px 14px;
}
.tdmc-theme-floating .tdmc-theme-toggle-label { display: none; }

/* Cuando el tema oscuro está activo, también pinta el body del tema (no solo del plugin) */
html[data-tdm-theme="dark"] {
    background: var(--tdmc-theme-bg);
}