/* ── Accel Systems — Modo Oscuro ────────────────────────────────────────────── */

/* Variables para modo oscuro: sobreescriben los presets de theme.json.
   html[data-theme="dark"] tiene mayor especificidad que :root */
html[data-theme="dark"] {
    --wp--preset--color--background:  #1c1c1c;
    --wp--preset--color--warm-cream:  #252525;
    --wp--preset--color--surface:     #252525;
    --wp--preset--color--text:        #f0ead8;
    --wp--preset--color--text-muted:  #a0a0a0;
    --wp--preset--color--border:      #3a3a3a;
    --wp--preset--color--white:       #f0ead8;
}

/* Transición suave entre modos */
html {
    transition: background-color 250ms ease, color 250ms ease;
}

/* ── Botón toggle ────────────────────────────────────────────────────────────── */

.accel-dark-mode-toggle-wrap {
    display: flex;
    align-items: center;
}

.accel-theme-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1.5px solid rgba(255, 255, 255, 0.35);
    background: transparent;
    color: #ffffff;
    cursor: pointer;
    padding: 0;
    transition: background 200ms ease, border-color 200ms ease, transform 200ms ease;
    flex-shrink: 0;
}

.accel-theme-toggle:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.65);
    transform: rotate(20deg);
}

.accel-theme-toggle .icon-sun,
.accel-theme-toggle .icon-moon {
    position: absolute;
    transition: opacity 200ms ease, transform 200ms ease;
}

/* Modo claro → mostrar luna */
html:not([data-theme="dark"]) .accel-theme-toggle .icon-sun  { opacity: 0; transform: scale(0.5) rotate(90deg); }
html:not([data-theme="dark"]) .accel-theme-toggle .icon-moon { opacity: 1; transform: scale(1); }

/* Modo oscuro → mostrar sol */
html[data-theme="dark"] .accel-theme-toggle .icon-sun  { opacity: 1; transform: scale(1); }
html[data-theme="dark"] .accel-theme-toggle .icon-moon { opacity: 0; transform: scale(0.5) rotate(-90deg); }

/* ── Página Nosotros: secciones con inline background hardcodeado ──────────── */

/* Secciones claras → oscuras en dark mode */
html[data-theme="dark"] .cc-nos-familia  { background-color: #1E1C18 !important; }
html[data-theme="dark"] .cc-nos-historia { background-color: #1A1A18 !important; }
html[data-theme="dark"] .cc-nos-ferias   { background-color: #1c1c1c !important; }
html[data-theme="dark"] .cc-nos-valores  { background-color: #1A1A18 !important; }

/* Variables locales nosotros:
   --nos-dark  cambia (era texto oscuro sobre fondo claro, ahora es texto claro sobre fondo oscuro)
   --nos-light NO cambia (sigue siendo claro: es texto sobre hero/máquina/CTA que siguen oscuros) */
html[data-theme="dark"] .cc-page-nosotros {
    --nos-dark:   #E8E8E5;
    --nos-muted:  #9B9B96;
    --nos-border: #3a3a3a;
}

/* Cards de timeline y valores usan --nos-light como fondo → override directo */
html[data-theme="dark"] .cc-nos-tl-body {
    background: #252525 !important;
    border-color: #3a3a3a !important;
}
html[data-theme="dark"] .cc-nos-card {
    background: #252525 !important;
    border-color: #3a3a3a !important;
}

/* Dot de timeline: borde blanco hardcodeado → color del fondo oscuro */
html[data-theme="dark"] .cc-nos-tl-year::after { border-color: #1A1A18 !important; }

/* ── Callout descuento por cantidad ── */
html[data-theme="dark"] .cc-qty-discount-callout {
    background: rgba(194, 123, 46, 0.12);
    border-color: rgba(194, 123, 46, 0.35);
    color: #E8E8E5;
}

/* ── Reseñas Google (Trustindex) ── */
html[data-theme="dark"] .cc-section--reviews {
    background-color: #1C1C1C !important;
}

html[data-theme="dark"] .cc-section--reviews .ti-review-item {
    background: #252525 !important;
    border-color: #3a3a3a !important;
}

html[data-theme="dark"] .cc-section--reviews .ti-rating.ti-rating-large {
    color: #E8E8E5 !important;
}

html[data-theme="dark"] .cc-section--reviews .ti-name {
    color: #E8E8E5 !important;
}

html[data-theme="dark"] .cc-section--reviews .ti-date {
    color: #6B6B6B !important;
}

html[data-theme="dark"] .cc-section--reviews .ti-review-content p,
html[data-theme="dark"] .cc-section--reviews .ti-review-content {
    color: #B0B0AB !important;
}

html[data-theme="dark"] .cc-section--reviews .ti-footer {
    color: #E8E8E5 !important;
}

/* ── FiboSearch en header — modo oscuro ─────────────────────────────────────── */

/* Wrapper pill: fondo oscuro semi-transparente + borde sutil blanco */
html[data-theme="dark"] .site-header .dgwt-wcas-sf-wrapp {
    border-color: rgba(255,255,255,0.12) !important;
}
html[data-theme="dark"] .site-header .dgwt-wcas-sf-wrapp:focus-within {
    border-color: var(--wp--preset--color--accent) !important;
    box-shadow: 0 0 0 3px rgba(194,123,46,0.2) !important;
}

/* Input */
html[data-theme="dark"] .site-header .dgwt-wcas-search-input {
    color: #f0ead8 !important;
}
html[data-theme="dark"] .site-header .dgwt-wcas-search-input::placeholder {
    color: rgba(240,234,216,0.45) !important;
}

/* Resultados del autocomplete */
html[data-theme="dark"] .dgwt-wcas-suggestions-wrapp {
    background: #252525 !important;
    border-color: #3a3a3a !important;
}
html[data-theme="dark"] .dgwt-wcas-suggestion {
    border-color: #3a3a3a !important;
}
html[data-theme="dark"] .dgwt-wcas-suggestion:hover,
html[data-theme="dark"] .dgwt-wcas-suggestion.dgwt-wcas-suggestion--selected {
    background: #303030 !important;
}
html[data-theme="dark"] .dgwt-wcas-suggestion-title,
html[data-theme="dark"] .dgwt-wcas-suggestion-title mark,
html[data-theme="dark"] .dgwt-wcas-sp__title {
    color: #f0ead8 !important;
}
html[data-theme="dark"] .dgwt-wcas-suggestion-price,
html[data-theme="dark"] .dgwt-wcas-sp__price {
    color: var(--wp--preset--color--accent) !important;
}
html[data-theme="dark"] .dgwt-wcas-details-outside {
    background: #1e1e1e !important;
    border-color: #3a3a3a !important;
}

/* ── Checkout (Block) — campo teléfono en modo oscuro ───────────────────────── */
html[data-theme="dark"] .wc-block-components-address-form__phone input,
html[data-theme="dark"] input#billing-phone {
    background-color: #252525 !important;
    color: #f0ead8 !important;
    border-color: #3a3a3a !important;
}