/* =====================================================================
   SafeTech · Mejoras visuales solicitadas · v10.45.1-m6
   Cambios de diseño pedidos explícitamente (fondo, logo, interruptor de
   tema en móvil y recuadros de las fichas de producto).
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. Fondo sin cuadrícula
   La cuadrícula de 42 px (safetech.css / theme-r8.css) estaba en todas las
   páginas, pero solo se notaba donde quedaba mucho fondo a la vista, como en
   Preguntas Frecuentes. Se quita en todo el sitio para que el fondo sea el
   mismo gris liso en todas partes (claro: #f5f5f7; oscuro: el del tema).
   --------------------------------------------------------------------- */
html body:before{background-image:none!important}

/* ---------------------------------------------------------------------
   2. Logo más sutil (claro y oscuro, header y pie)
   Antes: 156 px (escritorio) / 132 px (≤700 px) / 151 px en páginas de ayuda.
   --------------------------------------------------------------------- */
html body .st-brand img,html body.has-st-shell .st-help-brand img{width:122px!important;max-width:122px!important;max-height:42px!important}
@media(max-width:700px){
  html body .st-brand img,html body.has-st-shell .st-help-brand img{width:104px!important;max-width:104px!important;max-height:38px!important}
}
@media(max-width:380px){
  html body .st-header .st-brand img,html body.has-st-shell .st-header .st-help-brand img{width:92px!important;max-width:92px!important}
}
html body .st-footer .st-brand img{width:118px!important;max-width:118px!important}

/* ---------------------------------------------------------------------
   3. Interruptor claro/oscuro visible en móvil
   safetech.css lo ocultaba bajo 430 px. Ahora queda como un botón redondo
   con un solo ícono: ☀ en modo claro, ☾ en modo oscuro.
   --------------------------------------------------------------------- */
@media(max-width:430px){
  html body .st-theme-toggle{
    display:inline-flex!important;flex:0 0 38px;width:38px!important;min-width:38px!important;height:38px;padding:0!important;
    border-radius:50%;gap:0;
  }
  html body .st-theme-toggle__track,html body .st-theme-toggle__label{display:none!important}
  html body .st-theme-toggle__icon{display:none!important;font-size:1rem}
  html:not([data-theme="dark"]) body .st-theme-toggle__icon:first-child{display:block!important}
  html[data-theme="dark"] body .st-theme-toggle__icon:nth-child(3){display:block!important}
  html body .st-header .st-actions{gap:6px!important}
  html body .st-market-selector__trigger{max-width:84px!important}
}
@media(max-width:380px){
  html body .st-header .st-header__inner{gap:8px!important}
  html body .st-market-selector__trigger{max-width:66px!important}
  html body .st-header .st-actions{gap:5px!important}
  html body .st-cart{padding:8px 10px!important;gap:5px!important}
  html body .st-menu{width:38px!important;height:38px!important}
}

/* ---------------------------------------------------------------------
   4. Recuadros de las fichas de producto: cada tipo con su propio color
   motion.js (§10) marca cada panel con data-stm-kind según su título.
   Paleta (cada color tiene un significado y se repite igual en todo el sitio):
     verde   → Qué incluye (beneficios)
     azul    → Detalles del producto (datos)
     violeta → Aplicaciones incluidas
     pizarra → Garantía, términos y exención (legal)
     rojo    → Escoge tu versión (acción)
     turquesa→ Recuadros informativos (compatibilidad, aclaraciones)
     ámbar   → "Importante" (ya existía; se refuerza)
   --------------------------------------------------------------------- */
.st-product-panel,.st-info-box,.st-alert{position:relative;overflow:hidden}
.st-product-panel[data-stm-kind]{
  background:var(--k-soft)!important;border-color:var(--k-line)!important;
}
.st-product-panel[data-stm-kind]::before,.st-info-box::before,.st-alert::before{
  content:"";position:absolute;pointer-events:none;background:var(--k);
}
.st-product-panel[data-stm-kind]::before{inset:0 0 auto 0;height:4px}
.st-info-box::before,.st-alert::before{inset:0 auto 0 0;width:4px}
.st-product-panel[data-stm-kind] .st-panel-heading>span{background:var(--k)!important;color:#fff!important;box-shadow:0 4px 12px var(--k-line)}
.st-product-panel[data-stm-kind] .st-panel-heading h2{color:var(--k-ink)}

.st-product-panel[data-stm-kind="include"]{--k:#059669;--k-soft:#f0fdf6;--k-line:rgba(5,150,105,.26);--k-ink:#064e3b}
.st-product-panel[data-stm-kind="details"]{--k:#2563eb;--k-soft:#f3f7ff;--k-line:rgba(37,99,235,.24);--k-ink:#1e3a8a}
.st-product-panel[data-stm-kind="apps"]{--k:#7c3aed;--k-soft:#f7f3ff;--k-line:rgba(124,58,237,.24);--k-ink:#4c1d95}
.st-product-panel[data-stm-kind="legal"]{--k:#475569;--k-soft:#f6f8fb;--k-line:rgba(71,85,105,.26);--k-ink:#1e293b}
.st-product-panel[data-stm-kind="variant"]{--k:#dc2626;--k-soft:#fff6f6;--k-line:rgba(220,38,38,.24);--k-ink:#7f1d1d}

/* Datos dentro de "Detalles": línea lateral azul y fondo blanco */
.st-product-panel[data-stm-kind="details"] .st-meta div{border-left-color:var(--k)!important;background:#fff!important;border-color:rgba(37,99,235,.16)}
.st-product-panel[data-stm-kind="details"] .st-meta strong{color:#1e40af}
/* Viñetas de "Qué incluye" en círculo verde */
.st-product-panel[data-stm-kind="include"] .st-list li:not(.st-list-alert):before{
  content:"✓";display:inline-grid;place-items:center;width:17px;height:17px;top:3px;border-radius:50%;
  background:#059669;color:#fff;font-size:.62rem;line-height:1
}

/* Recuadros informativos (compatibilidad, aclaraciones): turquesa */
.st-info-box{--k:#0891b2;background:#f0fbfd!important;border-color:rgba(8,145,178,.26)!important;padding-left:21px}
.st-info-box>strong{color:#155e75}
/* "Importante": ámbar con línea lateral */
.st-alert{--k:#f59e0b;padding-left:21px}
.st-alert--red{--k:#dc2626}

/* Recuadro de compra: franja roja superior y sombra más marcada */
.st-checkout-card{position:relative;overflow:hidden;box-shadow:0 18px 44px rgba(220,38,38,.12),0 4px 14px rgba(15,23,42,.06)!important;border-color:rgba(220,38,38,.22)!important}
.st-checkout-card::after{content:"";position:absolute;inset:0 0 auto 0;height:5px;background:linear-gradient(90deg,#dc2626,#991b1b);pointer-events:none}

/* Desplegable "Información importante": franja roja lateral en el resumen */
.st-purchase-scope summary{box-shadow:inset 4px 0 0 #dc2626}

/* ----- Modo oscuro: mismos colores sobre fondo oscuro ----- */
html[data-theme="dark"] .st-product-panel[data-stm-kind]{background:color-mix(in srgb,var(--k) 9%,#122036)!important;border-color:color-mix(in srgb,var(--k) 42%,transparent)!important}
html[data-theme="dark"] .st-product-panel[data-stm-kind] .st-panel-heading h2{color:#f8fafc!important}
html[data-theme="dark"] .st-product-panel[data-stm-kind] .st-panel-heading>span{color:#fff!important}
html[data-theme="dark"] .st-product-panel[data-stm-kind="details"] .st-meta div{background:#16243a!important;border-left-color:#60a5fa!important}
html[data-theme="dark"] .st-product-panel[data-stm-kind="details"] .st-meta strong{color:#bfdbfe!important}
html[data-theme="dark"] .st-product-panel[data-stm-kind="legal"]{--k:#94a3b8}
html[data-theme="dark"] .st-info-box{background:#0f2a33!important;border-color:rgba(34,211,238,.32)!important}
html[data-theme="dark"] .st-info-box>strong{color:#a5f3fc!important}
html[data-theme="dark"] .st-checkout-card{box-shadow:0 18px 44px rgba(0,0,0,.35),0 0 0 1px rgba(239,68,68,.25)!important}

/* ---------------------------------------------------------------------
   5. Modo oscuro en páginas de ayuda (Preguntas Frecuentes y guías)  · m6
   Esas páginas traen estilos propios en claro (#fff, #f9fafb, #1e293b…)
   que el tema oscuro no cubría: filas blancas en las tablas, títulos y
   negritas casi invisibles, códigos y recuadros claros.
   --------------------------------------------------------------------- */
/* sin cuadrícula también en el tema oscuro de las páginas de ayuda */
html[data-theme] body.has-st-shell:before,html[data-theme] body:before{background-image:none!important}

html[data-theme="dark"] body:is(.has-st-shell,.st-faq-unified) :is(h1,h2,h3,h4,.section-h3,.step-title,.faq-q,.article-title):not(.cta-card *):not(.ideal-card.highlight *):not(.st-header *):not(.st-footer *){color:var(--st-text)!important}
html[data-theme="dark"] body:is(.has-st-shell,.st-faq-unified) :is(.alert-card,.box,.feature-summary,.faq-answer,.step-body,.intro-card,.mini-card,.method-item,.error-box) strong{color:#fff!important}
html[data-theme="dark"] body :is(.box,.feature-summary,.faq-answer,.step-body,.mini-card,.method-item,.error-box) :is(p,li){color:var(--st-text-soft)}

/* Tablas comparativas */
html[data-theme="dark"] body .table-wrap{background:var(--st-surface)!important;border-color:var(--st-border)!important}
html[data-theme="dark"] body table.compare-table{background:var(--st-surface)!important;color:var(--st-text-soft)}
html[data-theme="dark"] body table.compare-table :is(td,th){border-color:var(--st-border)!important}
html[data-theme="dark"] body table.compare-table thead th:first-child,
html[data-theme="dark"] body table.compare-table thead th.col-2021{background:var(--st-surface-2)!important;color:var(--st-text)!important}
html[data-theme="dark"] body table.compare-table thead th.col-365{background:rgba(220,38,38,.14)!important;color:#fca5a5!important}
html[data-theme="dark"] body table.compare-table thead th.col-365 .sub{color:#fca5a5!important}
html[data-theme="dark"] body table.compare-table thead th.col-2024{background:#0b1322!important;color:#fff!important}
html[data-theme="dark"] body tr.row-section td{background:var(--st-surface-3)!important;color:#cbd5e1!important}
html[data-theme="dark"] body td.label{background:var(--st-surface-2)!important;color:var(--st-text)!important}
html[data-theme="dark"] body td.cell-365{background:rgba(220,38,38,.07)!important}
html[data-theme="dark"] body td.cell-2021{background:var(--st-surface)!important}
html[data-theme="dark"] body td.cell-2024{background:var(--st-surface-2)!important}
html[data-theme="dark"] body .cell-text{color:var(--st-text-soft)!important}
html[data-theme="dark"] body .cell-text.ok,html[data-theme="dark"] body .tag-green{color:#6ee7b7!important}
html[data-theme="dark"] body .cell-text.warn,html[data-theme="dark"] body .tag-amber{color:#fcd34d!important}
html[data-theme="dark"] body .tag-gray{background:var(--st-surface-3)!important;color:#cbd5e1!important;border-color:var(--st-border-strong)!important}
html[data-theme="dark"] body .tag-red{color:#fca5a5!important}
html[data-theme="dark"] body .badge-best{background:#f8fafc!important;color:#0f172a!important}

/* Recuadros y tarjetas */
html[data-theme="dark"] body .feature-summary{background:var(--st-surface-2)!important;border-color:var(--st-border)!important;color:var(--st-text-soft)!important}
html[data-theme="dark"] body .box-tip{background:rgba(59,130,246,.1)!important;border-color:rgba(96,165,250,.35)!important;color:#cfe0ff!important}
html[data-theme="dark"] body .box-warn{background:rgba(245,158,11,.1)!important;border-color:rgba(251,191,36,.35)!important;color:#fde7b0!important}
html[data-theme="dark"] body .ideal-card:not(.highlight){background:rgba(220,38,38,.09)!important;border-color:rgba(248,113,113,.3)!important}
html[data-theme="dark"] body .ideal-card:not(.highlight) h3{color:#fff!important}
html[data-theme="dark"] body .ideal-card:not(.highlight) p{color:#cbd5e1!important}
html[data-theme="dark"] body .ideal-card.highlight{background:#0b1322!important;border-color:var(--st-border-strong)!important}
html[data-theme="dark"] body .program-title{color:#fca5a5!important;background:rgba(220,38,38,.12)!important}
html[data-theme="dark"] body .method-item{background:var(--st-surface-2)!important;border-color:var(--st-border)!important;color:var(--st-text-soft)!important}
html[data-theme="dark"] body :is(code,.cmd){background:var(--st-surface-3)!important;border-color:var(--st-border-strong)!important;color:#fca5a5!important}
html[data-theme="dark"] body .alert-card{color:var(--st-text-soft)!important}
/* Botones de WhatsApp: verde con texto blanco legible en ambos temas */
html body :is(.btn-whatsapp,a.btn-whatsapp){color:#fff!important}
html[data-theme="dark"] body.has-st-shell table.compare-table .badge-best{background:#f8fafc!important;color:#0f172a!important}
html[data-theme="dark"] body.has-st-shell :is(a.btn-whatsapp,.btn-whatsapp),html[data-theme="dark"] body.has-st-shell :is(a.btn-whatsapp,.btn-whatsapp) *{color:#fff!important}
html[data-theme="dark"] body :is(.method-title,.mini-card h3,.error-box h3,.step-body h3){color:var(--st-text)!important}
/* Garantía (fichas CCleaner / Windows Retail) */
html[data-theme="dark"] body .st-warranty{background:#0b3028!important;border-color:rgba(110,231,183,.3)!important;border-left-color:#22c55e!important;color:#bbf7d0!important}
html[data-theme="dark"] body .st-warranty *{color:#bbf7d0!important}
html[data-theme="dark"] body .st-warranty strong{color:#ecfdf5!important}
/* El tema oscuro pinta de rojo/gris claro los enlaces dentro de tarjetas con
   una regla muy específica; :is(#stm-x, …) sube la prioridad sin tocar el HTML. */
html[data-theme="dark"] body :is(#stm-x, .btn-whatsapp),html[data-theme="dark"] body :is(#stm-x, .btn-whatsapp) *{color:#fff!important}
html[data-theme="dark"] body :is(#stm-x, .badge-best){background:#f8fafc!important;color:#0f172a!important}