/* ===== APPLE.CSS — capa de estilo sobre styles.css, cargada en casi todo el sitio =====
   Fase 2 del rediseño (docs/auditoria-diseno-2026.md): el :root que antes vivía
   aquí (redefiniendo --bg/--ink/--primary/--a-*... por encima de styles.css) se
   ha movido a ser el :root REAL de styles.css — los mismos valores, sin cambiar
   ni uno, así que no hay ningún cambio visual en este paso. Esta hoja sigue
   existiendo para lo que styles.css todavía no expresa con variables (tipografía
   DM Sans, materiales translúcidos, y los componentes con color fijo en vez de
   var() que se listan a partir de aquí) — se va reduciendo fase a fase según se
   migra cada componente a tokens, no de golpe. */

body{
  font-family:'DM Sans',-apple-system,BlinkMacSystemFont,'Inter','Segoe UI',Roboto,sans-serif;
}

/* ===== NAV: material translúcido, no una barra sólida ===== */
.nav{
  background:rgba(0,0,0,.7);
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  border-bottom:1px solid transparent;
  transition:border-color .3s ease, box-shadow .3s ease;
}
.nav.scrolled{border-bottom-color:var(--a-line);box-shadow:none}
.nav-inner{height:52px}
.logo{font-weight:600;font-size:1.05rem;letter-spacing:-.01em;color:var(--a-ink)}
.logo-mark{width:18px;height:18px;color:var(--a-ink);flex-shrink:0}
.logo-ia{background:none;-webkit-text-fill-color:currentColor;color:var(--a-ink)}
.nav-links{gap:32px}
.nav-links a{font-weight:400;font-size:.82rem;color:var(--a-ink);letter-spacing:0}
.nav-links a:not(.btn):hover{color:var(--a-muted);opacity:.8}
.nav-links a.btn-primary{
  background:var(--a-ink);color:var(--a-bg);text-shadow:none;box-shadow:none;
  border-radius:980px;padding:7px 16px;font-size:.82rem;font-weight:500;
}
.nav-links a.btn-primary:hover{background:var(--a-muted)}

/* ===== BOTONES: la definición base (píldora, sin degradado, ghost subrayado) vive
   ahora en styles.css como el .btn real (Fase 4). Aquí solo quedan los overrides
   de contexto de más abajo (nav, tarjetas de precio, auditoría, tarjeta clara). ===== */

/* ===== HERO: fondo negro, tipografía grande, sin manchas de color ===== */
.hero{padding:170px 0 110px;background:var(--a-bg);color:var(--a-ink)}
.blob{display:none}
.hero-grid{gap:72px}
/* .badge: valor real (azul, sin degradado) ya vive en styles.css (Fase 4). */
.hero-text h1{
  font-size:clamp(2.2rem,4.4vw,3.6rem);
  line-height:1.05;
  letter-spacing:-.03em;
  font-weight:700;
  color:var(--a-ink);
  margin-bottom:26px;
}
.hero-text h1 .grad{
  background:none;-webkit-text-fill-color:currentColor;color:var(--a-accent);
}
.hero-text .lead{
  color:var(--a-muted);font-size:1.2rem;line-height:1.55;font-weight:400;
  max-width:52ch;
}
.hero-trust{gap:10px 14px;color:var(--a-ink);font-size:.92rem}
.hero-trust .ht-item{
  opacity:1;background:var(--a-blue-soft);border:1px solid rgba(114,174,255,.4);
  color:var(--a-ink);font-weight:600;padding:7px 14px 7px 10px;border-radius:999px;
}
.ht-item::before{color:var(--a-blue);font-weight:900}

/* ===== CHAT MOCKUP: se queda como superficie clara "flotando" sobre el
   fondo negro del hero — da profundidad real en vez de perderse en el
   fondo. Si prefieres que la tarjeta también sea oscura, dímelo y la
   invierto también. ===== */
.chat{
  border:none;
  border-radius:20px;
  box-shadow:0 0 0 1px rgba(255,255,255,.06), 0 30px 70px -20px rgba(0,0,0,.6);
  overflow:hidden;
  background:#fff;
}
.chat-top{background:#f5f5f7;border-bottom:1px solid rgba(0,0,0,.08)}
/* .chat-title hereda color:var(--muted), que aquí es el gris claro pensado para el resto
   de la web (oscura): sobre el fondo claro del mockup de chat, forzado justo arriba, da
   2.36:1 de contraste (Lighthouse lo marca). #5b5b73 es el mismo gris ya usado en otras
   tarjetas claras de este mismo apple.css, con contraste de sobra sobre #f5f5f7. */
.chat-title{color:#5b5b73}
.chat .dot.r,.chat .dot.y{background:#d2d2d7}
.chat .dot.g{background:#86868b}
.msg.user{background:#000;color:#fff}
.ai-avatar{background:#f5f5f7;color:#000;border-color:rgba(0,0,0,.08)}
.ai-bubble{background:#f5f5f7;color:#000}
.ai-text :where(b,strong){color:#000}
.ai-text .hl{background:none;-webkit-text-fill-color:currentColor;color:#000}
.cursor{color:#000}
.reco-badge{background:#fff;color:#000;border-color:rgba(0,0,0,.08)}

/* ===== LOGOS: fila neutra, sin color hasta el hover ===== */
.logos-ias{padding:36px 0;background:var(--a-bg)}
.logos-label{
  font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;
  color:var(--a-muted);font-weight:600;
}
.ai-logo{display:inline-flex;align-items:center;gap:9px;color:var(--a-muted);opacity:1;font-weight:600}
.ai-logo:hover{color:var(--a-ink)}
.ai-logo-ico{width:20px;height:20px;flex-shrink:0}
.logos-row{align-items:center}
.brand-logo{width:auto;opacity:.55;transition:opacity .25s;display:block}
.brand-logo:hover{opacity:1}

/* ===== Selector de idioma: gris/blanco, sin degradado ===== */
.lang-switch{border-color:var(--a-line)}
.lang-switch button{color:var(--a-muted)}
.lang-switch button.active{background:var(--a-ink);color:var(--a-bg)}

/* ===== RESTO DE LA HOME: mismo lenguaje (negro, DM Sans, sin degradado) =====
   Tarjetas oscuras elevadas (--a-bg-soft + borde --a-line) en vez de tarjetas
   blancas con sombra de color. Lo "destacado" (plan popular, columna VisibAI
   de la comparativa) se resuelve invirtiendo a blanco sobre negro, no con color
   — así hay jerarquía sin romper el blanco y negro. */

body,.section,main{background:var(--a-bg);color:var(--a-ink)}
.section.alt,.section-alt{background:var(--a-bg-soft)}
.section-lead{color:var(--a-muted)}
.kicker{color:var(--a-muted)}
h2,h3{color:var(--a-ink)}
.grad{background:none;-webkit-text-fill-color:currentColor;color:var(--a-ink)}

/* ---- Auditoría (formulario funcional) ---- */
.auditoria{background:var(--a-bg)}
.audit-form{
  background:#fff;border:1px solid rgba(114,174,255,.45);
  box-shadow:0 0 0 1px rgba(114,174,255,.1),0 30px 80px -24px rgba(114,174,255,.45),0 0 70px -16px rgba(114,174,255,.3);
  position:relative;
}
.audit-form .field label,.field label{color:#6e6e73}
.audit-form .field input,.audit-fields select,.audit-form .field select{
  background:#f5f5f7;border-color:#e2e2e6;color:#000;
}
.audit-form .field input:focus,.audit-form .field select:focus{
  border-color:var(--a-blue);background:#fff;box-shadow:0 0 0 4px var(--a-blue-soft);
}
.audit-form .field input.invalid{border-color:#dc2626;background:#fef2f2}
.auditoria .btn-primary{background:var(--a-blue);color:#00142e}
.auditoria .btn-primary:hover{background:#8dbdff}
.audit-form .field input::placeholder{color:#9a9a9e}
.audit-form .audit-disclaimer{color:#6e6e73}
.audit-mas{color:#000}
.audit-mas>summary{color:#6e6e73}
.aud-compartir{border-top-color:var(--a-line)}
.aud-compartir span{color:var(--a-muted)}
.aud-compartir input{background:rgba(255,255,255,.04);border-color:var(--a-line);color:var(--a-muted)}
.spinner{border-color:var(--a-line);border-top-color:var(--a-ink)}
.audit-loading p{color:var(--a-muted)}
.audit-info{background:var(--a-bg-soft);border-color:var(--a-line);color:var(--a-muted)}
.audit-error{background:var(--a-bg-soft);border:1px solid var(--a-line);color:var(--a-ink)}
.aud-score-lab{color:var(--a-muted)}
.aud-score-baja .aud-score-num,.aud-score-media .aud-score-num,.aud-score-alta .aud-score-num{color:var(--a-ink)}
.aud-lider{background:rgba(255,255,255,.05);border:1px solid var(--a-line)}
.aud-lider-tag{color:var(--a-muted)}
.aud-lider-veces{color:var(--a-muted)}
.aud-ejemplo{background:rgba(255,255,255,.03);border:1px solid var(--a-line)}
.aud-ejemplo-q{color:var(--a-muted)}
.aud-pos{background:rgba(255,255,255,.1);color:var(--a-ink)}
.aud-tuya{border-top:1px dashed var(--a-line)}
.aud-tuya.aud-no{color:var(--a-ink)}
.aud-tuya.aud-no .aud-pos{background:var(--a-ink);color:var(--a-bg)}
.aud-tuya.aud-si{color:var(--a-ink)}
.aud-tuya.aud-si .aud-pos{background:var(--a-ink);color:var(--a-bg)}
.audit-cta{border-top-color:var(--a-line)}
.audit-cta p{color:var(--a-muted)}
.ag-aviso{color:var(--a-muted)}

/* ---- Logos (marcas analizadas) ---- */
.logos{background:var(--a-bg);border-color:var(--a-line)}
.logos-marcas{border-top:1px solid var(--a-line)}

/* Stats, Coste+garantía, Resultados, Reseñas, Confianza, Cómo funciona, Características
   y "+ funciones" ya viven con su valor real (sin degradado morado) en styles.css (Fase 9). */

/* ---- Ventaja / futuro ---- */
.futuro{border-left-color:var(--a-ink);background:var(--a-bg-soft)}
.futuro p{color:var(--a-ink)}
.futuro-tag{color:var(--a-muted)}

/* ---- Precios ---- */
.toggle-label{color:var(--a-muted)}
.toggle-label.active{color:var(--a-ink)}
.save{background:rgba(255,255,255,.1);color:var(--a-ink)}
.switch{background:rgba(255,255,255,.2)}
.switch.on{background:var(--a-ink)}
.knob{background:#fff}
.switch.on .knob{background:var(--a-bg)}
.moneda-pick label{color:var(--a-muted)}
.moneda-pick select{background:var(--a-bg-soft);border-color:var(--a-line);color:var(--a-ink)}
.oferta{background:var(--a-bg-soft);border-color:var(--a-line)}
.oferta-razon{color:var(--a-muted);border-top-color:var(--a-line)}
.oferta-lista li::before{color:var(--a-ink)}
.plan{background:var(--a-bg-soft);border:1px solid var(--a-line);box-shadow:none}
.plan-desc{color:var(--a-muted)}
.plan-billed{color:var(--a-muted)}
.plan-feats li{color:var(--a-ink)}
.plan-feats li::before{color:var(--a-ink)}
.plan-feats li.plan-feats-heredado{color:var(--a-muted)}
.plan-salto{background:rgba(255,255,255,.06);color:var(--a-muted)}
.plan-salto strong{color:var(--a-ink)}
/* El plan popular se invierte a blanco: es la jerarquía sin usar color */
.plan.popular{background:var(--a-ink);border-color:var(--a-ink);color:var(--a-bg)}
.plan.popular .plan-desc,.plan.popular .plan-billed{color:#54545a}
.plan.popular .plan-name{color:var(--a-bg)} /* los h3 van en blanco: en la tarjeta blanca el nombre del plan no se veía */
.plan.popular .plan-feats li{color:var(--a-bg)}
.plan.popular .plan-feats li::before{color:var(--a-bg)}
.plan.popular .plan-feats li.plan-feats-heredado{color:#54545a}
.plan.popular .plan-salto{background:rgba(0,0,0,.08);color:#3a3a3d}
.plan.popular .plan-salto strong{color:var(--a-bg)}
.plan-tag{background:var(--a-bg);color:var(--a-ink);box-shadow:none;border:1px solid var(--a-ink)}
.plan.popular .btn-primary{background:var(--a-bg);color:var(--a-ink)}
.plan.popular .btn-primary:hover{background:#000}
/* El btn-ghost global es un enlace subrayado sin fondo (bien para CTAs secundarias),
   pero aquí es la ÚNICA acción de la tarjeta: sin botón visible, Starter y Brand
   parecían no tener forma de contratar. Le devolvemos aspecto de botón real. */
.plan .btn-ghost{
  background:rgba(255,255,255,.06);border:1px solid var(--a-line);color:var(--a-ink);
  padding:12px 22px;text-decoration:none;
}
.plan .btn-ghost:hover{background:rgba(255,255,255,.12);border-color:var(--a-ink);opacity:1;color:var(--a-ink)}
.precios-garantia,.pricing-note p{color:var(--a-muted)}
.pricing-note{background:var(--a-bg-soft);border-color:var(--a-line)}
.pricing-note .pn-lead,.pricing-note strong{color:var(--a-ink)}
/* Precios 2026-10: coste diario, ancla Enterprise, comparativa completa y dudas antes de elegir. */
.plan-dia{margin:-6px 0 14px;font-size:.82rem;color:var(--a-muted)}
.plan.popular .plan-dia{color:#54545a}
/* Enterprise: tarjeta sin precio fijo; «A medida» en lugar del importe. */
.plan-enterprise .amount-texto{font-size:2.2rem}
.plan-comparar{max-width:1100px;margin:18px auto 0}
.plan-comparar summary{cursor:pointer;text-align:center;font-weight:600;color:var(--a-blue);padding:10px;list-style:none}
.plan-comparar summary::-webkit-details-marker{display:none}
.plan-comparar summary::after{content:" ↓"}
.plan-comparar[open] summary::after{content:" ↑"}
.pc-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--a-line);border-radius:14px;margin-top:8px}
.pc-tabla{width:100%;min-width:560px;border-collapse:collapse;font-size:.88rem}
.pc-tabla th,.pc-tabla td{padding:10px 12px;border-bottom:1px solid var(--a-line);text-align:center;color:var(--a-ink)}
.pc-tabla thead th{font-weight:700;background:rgba(255,255,255,.04)}
.pc-tabla tbody th{text-align:left;font-weight:500;color:var(--a-muted)}
.pc-tabla tbody tr:last-child th,.pc-tabla tbody tr:last-child td{border-bottom:0}
.plan-dudas{max-width:760px;margin:28px auto 0}
.plan-dudas h3{text-align:center;font-size:1.1rem;margin:0 0 10px;color:var(--a-ink)}
.plan-dudas details{border-bottom:1px solid var(--a-line);padding:12px 2px}
.plan-dudas summary{cursor:pointer;font-weight:600;color:var(--a-ink)}
.plan-dudas p{margin:8px 0 0;color:var(--a-muted);font-size:.92rem;line-height:1.55}
.plan-dudas a{color:var(--a-blue)}
.precios-nota{text-align:center;font-size:.78rem;color:var(--a-muted);margin:18px auto 0}
@media (max-width:640px){
  .pc-tabla{font-size:.8rem}
  .pc-tabla th,.pc-tabla td{padding:8px}
}

/* ===== PÁGINAS DE CONTENIDO (.legal): blog, SEO, legales, afiliados... =====
   styles.css fuerza el CTA de estas páginas a texto blanco (pensado para el
   botón morado con degradado de antes); con el botón nuevo (píldora blanca,
   texto oscuro) eso deja el texto invisible sobre su propio fondo. */
.legal a.btn-primary{color:var(--a-bg)}
/* Tarjetas del índice del blog: tenían fondo blanco fijo, así que el h2 (que
   hereda el color de texto del body, ahora blanco) quedaba invisible encima. */
.blog-card{background:var(--a-bg-soft);border-color:var(--a-line)}
.blog-card:hover{box-shadow:none;border-color:var(--a-ink)}
.blog-card p{color:var(--a-muted)}
.blog-fecha{color:var(--a-muted)}
.blog-leer{color:var(--a-ink)}

/* ---- Comparativa: la columna VisibAI se invierte a blanco, como el plan popular ---- */
.cmp-wrap{border-color:var(--a-line)}
.cmp th,.cmp td{border-color:var(--a-line);color:var(--a-ink)}
.cmp thead th{background:var(--a-bg-soft);color:var(--a-muted)}
.cmp tbody th{color:var(--a-ink)}
.cmp thead th.cmp-yo,.cmp td.cmp-yo{background:var(--a-ink);color:var(--a-bg)}
.cmp thead th.cmp-yo{font-weight:800}
.cmp td.cmp-yo strong{color:var(--a-bg)}
.cmp-2col thead th:nth-child(3),.cmp-2col tbody td:nth-child(3){color:var(--a-muted)}
.cmp-nota{color:var(--a-muted)}
.cmp-mal{color:var(--a-ink);font-weight:800;text-decoration:underline;text-underline-offset:2px}
.cmp-remate{background:var(--a-bg-soft);color:var(--a-ink)}
.cmp-fuente{color:var(--a-muted)}

/* ---- Agencias ---- */
.ag-feat{background:var(--a-bg-soft);border-color:var(--a-line)}
.ag-feat p{color:var(--a-muted)}

/* ---- FAQ ---- */
.faq details{background:var(--a-bg-soft);border-color:var(--a-line)}
.faq details[open]{border-color:var(--a-ink);box-shadow:none}
.faq summary{color:var(--a-ink)}
.faq summary::after{color:var(--a-ink)}
.faq details p{color:var(--a-muted)}

/* ---- CTA final ---- */
.cta-final{background:var(--a-bg)}
.cta-pasos{color:var(--a-muted)}

/* ---- Integraciones de confianza ---- */
.integs{border-color:var(--a-line)}
.integs-label{color:var(--a-muted)}
.integ-item{color:var(--a-ink)}
.integ-item svg{color:var(--a-ink)}

/* ---- Footer: ya era casi negro (var(--ink)); lo dejamos negro puro ---- */
.footer{background:var(--a-bg);border-top:1px solid var(--a-line)}
.footer-brand .logo-ia{background:none;-webkit-text-fill-color:currentColor;color:var(--a-ink)}

@media (max-width:720px){
  .hero{padding:130px 0 70px}
  .hero-text h1{font-size:clamp(2.1rem,8vw,2.8rem)}
}

/* ===== PANEL DE CUENTAS (panel.html) =====
   Las variables redefinidas arriba ya cubren la mayoría (tarjetas con
   var(--bg-soft), texto con var(--ink)/var(--muted), bordes con var(--line)).
   Aquí solo lo que estaba en blanco fijo (#fff) y no iba a heredar nada. */
/* .field input, .contact-form ...:focus y .afi-form input:focus ya viven con su valor
   real (oscuro) en styles.css (Fase 4). select/textarea sueltos dentro de .field (rol de
   equipo, conectores GA4/Search Console, embajadores) e .integ-box input siguen sin base
   propia ahí, así que su estado focus sigue viviendo aquí. */
.field select:focus,.field textarea:focus,.integ-box input:focus{
  background:rgba(255,255,255,.06) !important;box-shadow:0 0 0 4px var(--a-blue-soft) !important;
}
.nav-app{background:rgba(0,0,0,.7)}
.panel{background:var(--a-bg)}
.panel-user{color:var(--a-ink)}
/* La tarjeta "de superficie" (panel-card, tool-card, ag-feat, ck-onb, cc-rule, ag-cli,
   lb-row, afi-ejemplo, kpi, canal-card...) ya no se fuerza aquí: su fondo/borde/sombra
   viven directamente en styles.css con var(--bg-soft)/var(--line) (Fase 4). */
.canal-rec{background:rgba(255,255,255,.05) !important;color:var(--a-muted) !important}
.canal-delta{background:rgba(255,255,255,.08) !important;color:var(--a-muted) !important}
.canal-delta.up{background:rgba(34,197,94,.16) !important;color:#4ade80 !important}
.canal-delta.down{background:rgba(239,68,68,.16) !important;color:#f87171 !important}
.tool-card.locked{background:rgba(255,255,255,.03) !important}
/* .sn-item:hover/.active y su fondo móvil ya viven con su valor real en styles.css (Fase 5). */
.modal{background:rgba(0,0,0,.7)}
/* .tool-result va siempre junto a .modal-box en esta sección: es la misma tarjeta
   BLANCA de resultado de herramienta, ahora en su propia página en vez de en una
   ventana emergente. Los RENDER.* de las herramientas se diseñaron para un fondo
   claro, así que el contenedor se queda claro venga de donde venga. */
.modal-box,.tool-result{background:#fff !important;color:#000}
/* UX F0: el botón principal del tema oscuro es blanco; sobre estas tarjetas blancas desaparecía. */
.modal-box .btn-primary,.tool-result:not(.tool-result-dark) .btn-primary{background:#000;color:#fff;border-color:#000}
.modal-box .btn-primary:hover,.tool-result:not(.tool-result-dark) .btn-primary:hover{background:#1d1d1f}
/* Test de prompts: única herramienta con un resultado pensado para el tema
   oscuro del panel (anillo, chips por IA...) en vez de la tarjeta de informe
   blanca de siempre — ver .ps-* en styles.css. */
/* Fondo negro puro (antes gris con un halo azul/violeta que lo hacía ver azulado). */
.tool-result.tool-result-dark{background:#000 !important;color:var(--a-ink) !important;border:1px solid rgba(255,255,255,.12);
  box-shadow:0 24px 70px -32px rgba(0,0,0,.9) !important}
.modal-box h3,.modal-box h2,.modal-box h4,.tool-result h3,.tool-result h2,.tool-result h4{color:#000}
.modal-box .muted,.modal-box p,.tool-result .muted,.tool-result p{color:#5b5b73}
/* En las tarjetas oscuras ese gris (#5b5b73) sobre negro no llega al contraste mínimo (≈3:1): se usa
   el gris secundario del tema (#a1a1a6, ≈8:1). Las reglas con su propio color siguen mandando. */
.tool-result.tool-result-dark .muted,.tool-result.tool-result-dark p{color:#a1a1a6}
.modal-box .field label,.tool-result .field label{color:#5b5b73}
.modal-box .field input,.modal-box .field select,.modal-box .field textarea,
.modal-box input,.modal-box select,.modal-box textarea,
.tool-result .field input,.tool-result .field select,.tool-result .field textarea,
.tool-result input,.tool-result select,.tool-result textarea{background:#f5f5f7 !important;color:#000;border-color:#e2e2e6}
.modal-box .bullet li,.tool-result .bullet li{color:#000}
.modal-box .copy-pre,.tool-result .copy-pre{background:#f5f5f7;color:#000}
.modal-box .btn-ghost,.modal-box .btn-ghost:disabled,.tool-result .btn-ghost,.tool-result .btn-ghost:disabled{
  background:#f5f5f7 !important;border:1px solid #e2e2e6 !important;color:#000 !important;
  text-decoration:none;opacity:1;
}
.modal-box .btn-ghost:hover,.tool-result .btn-ghost:hover{border-color:var(--a-blue) !important;color:#000 !important;opacity:1;transform:none}
.modal-box .q-item,.tool-result .q-item{background:#f5f5f7 !important}
.modal-box .q-text span,.tool-result .q-text span{color:#5b5b73}
.modal-box .opt-card,.tool-result .opt-card{background:#f5f5f7 !important;border-color:#e2e2e6 !important}
.modal-box .opt-card p,.tool-result .opt-card p{color:#000 !important}
.modal-box .opt-card h5,.tool-result .opt-card h5{color:#000 !important}
.modal-box .src-tipo,.tool-result .src-tipo{background:var(--a-blue-soft)}
/* Motor de contenido: reutiliza los bloques compartidos "copiar"/"publicar" (copy-pre,
   copy-btn, btn-ghost) que las reglas de arriba fuerzan a claro para la tarjeta blanca de
   siempre — aquí viven sobre .tool-result-dark, así que se sobrescriben otra vez a oscuro sin
   tocar el resto de usos (agente, api, concierge…), que siguen siendo la tarjeta blanca. */
.tool-result-dark .copy-pre{background:rgba(255,255,255,.05) !important;color:#e5e5ea !important;border-color:rgba(255,255,255,.1) !important}
.tool-result-dark .copy-btn{background:rgba(114,174,255,.12) !important;border-color:rgba(114,174,255,.3) !important;color:#fff !important}
.tool-result-dark .copy-btn:hover{background:rgba(114,174,255,.22) !important}
.tool-result-dark .btn-ghost,.tool-result-dark .btn-ghost:disabled{background:rgba(255,255,255,.06) !important;border:1px solid rgba(255,255,255,.16) !important;color:#fff !important}
.tool-result-dark .btn-ghost:hover{border-color:#72aeff !important;color:#fff !important}
.tool-result-dark .chip{background:rgba(255,255,255,.06) !important;color:#e5e5ea !important;border-color:rgba(255,255,255,.14) !important}
.tool-result-dark .pub-estado{color:#c7c7cc !important}
.tool-result-dark .pub-estado a{color:#72aeff !important}
.tool-result-dark .audit-block h4{color:#fff !important}
.tool-result-dark .audit-block .muted,.tool-result-dark .audit-block p{color:#c7c7cc !important}
/* Análisis SEO: reutiliza la lista de comprobaciones (q-item/q-badge/q-text) que las reglas
   de arriba fuerzan a claro para la tarjeta blanca — mismo criterio que el resto de esta
   sección: se sobrescribe a oscuro solo dentro de .tool-result-dark. */
.tool-result-dark .q-item{background:rgba(255,255,255,.04) !important}
.tool-result-dark .q-text span{color:#c7c7cc !important}
.tool-result-dark .q-badge.si{background:rgba(34,197,94,.16) !important;color:#4ade80 !important}
.tool-result-dark .q-badge.aveces{background:rgba(251,191,36,.16) !important;color:#fbbf24 !important}
.tool-result-dark .q-badge.no{background:rgba(239,68,68,.16) !important;color:#f87171 !important}
/* .audit-error tiene arriba un estilo oscuro genérico (línea ~189) para cuando
   aparece suelto en el panel; dentro de la tarjeta blanca del resultado debe
   verse como una alerta real (rojo/rosa), no como una tarjeta oscura más. */
.modal-box .audit-error,.tool-result .audit-error{background:#fef2f2 !important;border-color:#fecaca !important;color:#b91c1c !important}
/* .ck-onb-barra, .eq-proy-chip.on, .rf-prog/.rf-prog-bar y .mr-bar ya viven con su
   valor real (sin degradado morado heredado) en styles.css (Fase 6). */
.ck-donut::before{background:var(--a-bg-soft) !important}
/* .dot.d1/.dot.d2, .modal-close, .ia-ring-in y la tarjeta .ia-circle ya viven con su
   valor real en styles.css (Fase 6). */
.ficha-tag{background:var(--a-blue-soft) !important;color:var(--a-blue) !important}
.ag-fill{background:var(--a-blue) !important}
.ag-slider:focus-visible .ag-thumb{box-shadow:0 0 0 5px var(--a-blue-soft) !important}
.ia-hint{background:var(--a-blue-soft) !important}
.ia-ring{--ia-track:rgba(255,255,255,.12);position:relative;filter:drop-shadow(0 8px 16px rgba(0,0,0,.35))}
.ia-ring-sheen{position:absolute;inset:2px;border-radius:50%;background:linear-gradient(135deg,rgba(255,255,255,.32),rgba(255,255,255,0) 55%);mix-blend-mode:overlay;pointer-events:none}
.ia-circle.alta .ia-ring{filter:drop-shadow(0 8px 16px rgba(0,0,0,.35)) drop-shadow(0 0 14px rgba(34,197,94,.35))}
.ia-circle.media .ia-ring{filter:drop-shadow(0 8px 16px rgba(0,0,0,.35)) drop-shadow(0 0 14px rgba(245,158,11,.3))}
.ia-circle.baja .ia-ring{filter:drop-shadow(0 8px 16px rgba(0,0,0,.35)) drop-shadow(0 0 14px rgba(239,68,68,.3))}
.ia-circle:not(.locked){transition:transform .3s cubic-bezier(.22,1,.36,1)}
.ia-circle:not(.locked):hover{transform:translateY(-4px) scale(1.02)}
.ia-scores-card{background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,0) 45%) var(--a-bg-soft) !important;border:1px solid var(--a-line) !important;box-shadow:0 40px 80px -40px rgba(0,0,0,.65) !important}
.ia-scores-card h2{font-size:1.35rem;letter-spacing:-.015em}
/* .integ-pill, .api-key-raw, .toast, .moneda-sel, .dev-banner/.dev-plans y .copy-btn
   ya viven con su valor real en styles.css (Fase 6). */
.knob{background:#fff}
.cc-rule input{background:rgba(255,255,255,.05) !important}

/* ---- Monitorización multi-IA: estadísticas + desglose por IA ----
   Se renderiza dentro de .modal-box o .tool-result, que se mantienen BLANCOS
   a propósito (igual que el resto de resultados de herramientas) — por eso usa la
   misma paleta clara que .q-item/.copy-pre, no las variables oscuras
   del panel. */
.mon-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:14px 0}
.mon-stat{background:#f5f5f7;border:1px solid #e2e2e6;border-radius:14px;padding:14px 16px}
.mon-stat-lab{font-size:.78rem;color:#5b5b73;display:block;margin-bottom:8px}
.mon-stat-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.mon-stat-row strong{font-size:1.5rem;font-weight:800;color:#000}
.mon-stat-row strong small{font-size:.85rem;font-weight:600;color:#5b5b73}
.mon-delta{font-size:.75rem;font-weight:700;padding:2px 7px;border-radius:6px;white-space:nowrap}
.mon-delta.up{color:#15803d;background:#dcfce7}
.mon-delta.down{color:#b91c1c;background:#fee2e2}
.mon-delta.neutral{color:#8a8a93;background:transparent}
.mon-table{border:1px solid #e2e2e6;border-radius:14px;overflow:hidden}
.mon-row{display:grid;grid-template-columns:1.4fr 1.6fr .9fr .9fr;gap:10px;align-items:center;padding:11px 14px;border-bottom:1px solid #e2e2e6;background:#fff}
.mon-row.mon-row-3{grid-template-columns:1.6fr .9fr 1.1fr}
.mon-row:last-child{border-bottom:0}
.mon-row.mon-head{background:#f5f5f7;font-size:.72rem;text-transform:uppercase;letter-spacing:.03em;color:#5b5b73;font-weight:700}
.mon-row-name{font-weight:700;color:#000}
.mon-row-score{display:flex;align-items:center;gap:8px;font-weight:700;color:#000;font-variant-numeric:tabular-nums}
.mon-bar{flex:1;height:6px;border-radius:99px;background:#e5e5ea;overflow:hidden;display:inline-block;max-width:90px}
.mon-bar b{display:block;height:100%;border-radius:99px;background:var(--a-blue)}
@media(max-width:720px){.mon-stats{grid-template-columns:repeat(2,1fr)}.mon-row{grid-template-columns:1fr 1fr;row-gap:6px}}

/* ---- Evolución por IA: panel de analítica limpio (líneas finas, cuadrícula discontinua, leyenda en lista) ---- */
.comp-rango{display:flex;gap:6px;flex-wrap:wrap;margin:12px 0 4px}
.comp-rango button{background:rgba(255,255,255,.05);border:1px solid var(--a-line);color:var(--a-muted);border-radius:999px;padding:6px 14px;font-size:.82rem;font-weight:600;cursor:pointer;transition:color 0.2s var(--ease-out),background-color 0.2s var(--ease-out),border-color 0.2s var(--ease-out),box-shadow 0.2s var(--ease-out),opacity 0.2s var(--ease-out),transform 0.2s var(--ease-out),filter 0.2s var(--ease-out);font-family:inherit}
.comp-rango button.on{background:var(--a-blue-soft);border-color:var(--a-blue);color:var(--a-ink)}
.comp-rango button:hover{border-color:var(--a-blue);color:var(--a-ink)}
.comp-rango-custom{display:flex;align-items:center;gap:8px;margin:10px 0 4px;font-size:.85rem;color:var(--a-muted)}
.comp-rango-custom input{background:rgba(255,255,255,.05);border:1px solid var(--a-line);border-radius:8px;padding:6px 10px;color:var(--a-ink);font-family:inherit;color-scheme:dark}
.comp-stat{display:flex;align-items:baseline;gap:10px;margin:2px 0 16px}
.comp-stat strong{font-size:2.1rem;font-weight:800;color:var(--a-ink);letter-spacing:-.02em}
.comp-layout{display:flex;gap:22px;flex-wrap:wrap}
.comp-leyenda-list{display:flex;flex-direction:column;gap:0;flex:0 0 200px;min-width:180px}
.comp-row{display:flex;align-items:center;justify-content:space-between;gap:10px;background:transparent;border:0;border-bottom:1px solid var(--a-line);padding:9px 2px;font-size:.85rem;color:var(--a-muted);cursor:pointer;text-align:left;opacity:.5;transition:opacity .2s}
.comp-row.on{opacity:1;color:var(--a-ink)}
.comp-row:hover{opacity:1}
.comp-row-name{display:flex;align-items:center;gap:9px;font-weight:600}
.comp-row-name i{width:13px;height:3px;border-radius:2px;background:var(--cc);display:inline-block;flex-shrink:0}
.comp-row-val{display:flex;align-items:center;gap:6px;font-weight:700;font-variant-numeric:tabular-nums}
.comp-delta{font-size:.7rem;font-weight:700;padding:1px 5px;border-radius:5px;white-space:nowrap}
.comp-delta.up{color:#4ade80;background:rgba(74,222,128,.12)}
.comp-delta.down{color:#fb7185;background:rgba(251,113,133,.12)}
.comp-chart{background:rgba(255,255,255,.02);border:1px solid var(--a-line);border-radius:18px;padding:14px 8px 4px;position:relative;flex:1 1 360px;min-width:260px}
.comp-svg{display:block;width:100%;height:auto}
.comp-tip{background:rgba(20,20,24,.94) !important;backdrop-filter:blur(12px) saturate(160%);border:1px solid var(--a-line);box-shadow:0 20px 40px -12px rgba(0,0,0,.6)}
@media(max-width:640px){.comp-leyenda-list{flex:1 1 100%;flex-direction:row;flex-wrap:wrap;gap:4px 16px}.comp-row{border-bottom:0;padding:2px}}

/* ===== INICIO DE SESIÓN (cuenta.html) =====
   Misma lógica que el formulario de auditoría: tarjeta blanca flotando sobre
   el fondo negro, con el mismo borde+resplandor azul para que se note que es
   la acción principal de la página. */
.auth-wrap{background:var(--a-bg);min-height:100vh}
.auth-card{
  background:#fff;border:1px solid rgba(114,174,255,.4);
  box-shadow:0 0 0 1px rgba(114,174,255,.08),0 30px 80px -24px rgba(114,174,255,.4),0 0 60px -18px rgba(114,174,255,.25);
  color:#000;
}
.auth-title{color:#000}
.auth-sub{color:#6e6e73}
.auth-plan{background:var(--a-blue-soft);color:#0a4faa}
.auth-card .field label{color:#6e6e73}
.auth-card .field input{background:#f5f5f7;border-color:#e2e2e6;color:#000}
.auth-card .field input:focus{border-color:var(--a-blue);background:#fff;box-shadow:0 0 0 4px var(--a-blue-soft)}
.auth-card .field input::placeholder{color:#9a9a9e}
.auth-forgot a,.auth-switch a{color:#0a5fd6}
.auth-switch{color:#6e6e73}
.auth-card .btn-primary{background:var(--a-blue);color:#00142e}
.auth-card .btn-primary:hover{background:#8dbdff}
/* #8a93a5 daba 3.08:1 sobre la tarjeta blanca (insuficiente, Lighthouse lo marca);
   #6e6e73 es el mismo gris ya usado en .auth-sub/.auth-switch de esta misma tarjeta. */
.auth-legal{font-size:.76rem;color:#6e6e73;text-align:center;margin-top:10px;line-height:1.5}
.auth-legal a{color:#0a5fd6;text-decoration:underline}
.auth-consent{display:flex;gap:8px;align-items:flex-start;font-size:.82rem;line-height:1.45;color:#3a3a40;margin:2px 0 8px}
.auth-consent input{margin-top:3px;flex:none}

/* ===== GAP PHASE 11 — interacción (Emil Kowalski / Apple fluid interfaces) =====
   1) Los "lift" de hover solo en dispositivos con ratón: en táctil el :hover se queda pegado
      tras el tap y la tarjeta queda flotando. Se neutralizan sin tocar color/sombra.
   2) Feedback de pulsación en los controles que aún no lo tenían (chips, filtros, copiar…).
   3) Foco de teclado visible y coherente en todo lo pulsable y en los campos nuevos.
   4) Cifras con ancho fijo en tablas y KPIs: los números no "bailan" al actualizarse.
   5) prefers-reduced-motion también en apple.css: sin desplazamientos, solo fundidos. */
@media (hover:none),(pointer:coarse){
  .btn-primary:hover,.partner:hover,.step:hover,.feature:hover,.lb-row:hover,.plan:hover,
  .plan.popular:hover,.review:hover,.tool-card:hover,.star-input button:hover,.blog-card:hover,
  .ia-circle:hover,.ia-circle:not(.locked):hover,.kpi:hover,.conf:hover,.mm:hover,.caso-card:hover{transform:none}
}
.opp-tag,.eq-proy-chip,.copy-btn,.pi-filtro,.pi-mas,.comp-row,.red-quitar,.hecho-quitar,.aud-nota-link,.switch{
  transition:color .15s var(--ease-out),background-color .15s var(--ease-out),border-color .15s var(--ease-out),transform .12s var(--ease-out)
}
.opp-tag:active,.eq-proy-chip:active,.copy-btn:active,.pi-filtro:active,.pi-mas:active,.comp-row:active,
.red-quitar:active,.hecho-quitar:active,.switch:active{transform:scale(.97)}
:where(a,button,[role="button"],[tabindex]:not([tabindex="-1"]),summary):focus-visible{
  outline:2px solid var(--a-blue,#72aeff);outline-offset:2px
}
:where(input,select,textarea):focus-visible{outline:2px solid var(--a-blue,#72aeff);outline-offset:1px}
.cw-tabla,.r2-tabla,.ps-stat-val,.kpi,.r2-score,.wi-res,.rc-pasos,:where(table){font-variant-numeric:tabular-nums}
@media (prefers-reduced-motion:reduce){
  .opp-tag:active,.eq-proy-chip:active,.copy-btn:active,.pi-filtro:active,.pi-mas:active,.comp-row:active,
  .red-quitar:active,.hecho-quitar:active,.switch:active,.clasif-btn:active,.pi-accion:active{transform:none}
  .ia-circle:not(.locked):hover,.step:hover,.feature:hover,.plan:hover,.review:hover,.tool-card:hover,
  .lb-row:hover,.mm:hover,.caso-card:hover,.kpi:hover,.conf:hover,.blog-card:hover{transform:none}
}

/* EVO PHASE 2 — "¿Por qué esta puntuación?", dimensiones y metodología del AI Rank */
.vis-filas{display:grid;gap:6px;margin:8px 0 14px}
.vis-fila{display:grid;grid-template-columns:minmax(120px,1.2fr) minmax(80px,.8fr) 2fr 48px;align-items:center;gap:10px;font-size:.86rem}
.vis-nom{color:var(--ink,#fff)}
.vis-val{font-variant-numeric:tabular-nums;color:var(--ink,#fff)}
.vis-val small{color:var(--muted,#a1a1a6);margin-left:2px}
.vis-bar{max-width:none !important;width:100%}
.vis-pts{text-align:right;font-variant-numeric:tabular-nums;color:var(--muted,#a1a1a6)}
.vis-dims{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;margin:0 0 12px}
.vis-dims>div{border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:10px 12px;display:flex;flex-direction:column;gap:4px}
.vis-dims span{font-size:.72rem;color:var(--muted,#a1a1a6);text-transform:uppercase;letter-spacing:.04em}
.vis-dims strong{font-size:.86rem;font-weight:600;font-variant-numeric:tabular-nums}
.vis-dims small{display:block;font-weight:400;color:var(--muted,#a1a1a6);font-size:.74rem;margin-top:2px}
.cw-salud{margin:14px 0}
.cw-salud h4{margin:0 0 4px}
.cw-salud .vis-dims{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
.cw-salud .vis-dims>div{border-color:rgba(0,0,0,.1)}
.cmp-jev .vis-dims{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin:8px 0}
.cmp-jev .vis-dims>div{padding:7px 10px;gap:2px}
.cmp-jev .vis-dims span{font-size:.66rem}
.vis-como{font-size:.84rem;color:var(--muted,#a1a1a6);margin-bottom:12px}
.vis-como summary{cursor:pointer;color:var(--ink,#fff);font-weight:600}
.vis-como code{font-size:.78rem;white-space:normal}
@media (max-width:560px){.vis-fila{grid-template-columns:1fr auto;}.vis-bar{grid-column:1/-1}.vis-pts{display:none}}
.vis-bloque{margin-top:22px;padding-top:18px;border-top:1px solid rgba(255,255,255,.08)}

/* Rediseño de la cuenta (F4): las ventanas del panel usan la MISMA superficie oscura que los diálogos de
   confirmación (.dlg-caja). Antes eran blancas y las confirmaciones oscuras: parecían dos aplicaciones.
   Solo en panel.html (#toolModal, #integModal); la web pública y los resultados de herramienta
   (.tool-result) siguen como estaban. El informe embebido conserva su tarjeta clara propia. */
:is(#toolModal,#integModal) .modal-box{background:#1d1f24 !important;color:#f2f4f7;border:1px solid rgba(255,255,255,.14);box-shadow:0 18px 48px rgba(0,0,0,.5)}
:is(#toolModal,#integModal) .modal-box :is(h2,h3,h4,h5){color:#f2f4f7}
:is(#toolModal,#integModal) .modal-box :is(.muted,p),:is(#toolModal,#integModal) .modal-box .field label{color:#a1a1a6}
:is(#toolModal,#integModal) .modal-box :is(input,select,textarea){background:#111317 !important;color:#f2f4f7;border-color:rgba(255,255,255,.16)}
:is(#toolModal,#integModal) .modal-box .bullet li{color:#e5e7eb}
:is(#toolModal,#integModal) .modal-box :is(.copy-pre,.q-item,.opt-card){background:#111317 !important;color:#f2f4f7;border-color:rgba(255,255,255,.12) !important}
:is(#toolModal,#integModal) .modal-box .opt-card :is(p,h5){color:#f2f4f7 !important}
:is(#toolModal,#integModal) .modal-box .q-text span{color:#a1a1a6}
:is(#toolModal,#integModal) .modal-box .btn-primary{background:#fff;color:#000;border-color:#fff}
:is(#toolModal,#integModal) .modal-box .btn-primary:hover{background:#e5e5ea}
:is(#toolModal,#integModal) .modal-box :is(.btn-ghost,.btn-ghost:disabled){background:rgba(255,255,255,.06) !important;border:1px solid rgba(255,255,255,.16) !important;color:#f2f4f7 !important}
:is(#toolModal,#integModal) .modal-box .btn-ghost:hover{border-color:var(--a-blue) !important;color:#fff !important}
:is(#toolModal,#integModal) .modal-box .audit-error{background:rgba(239,68,68,.12) !important;border-color:rgba(239,68,68,.35) !important;color:#fca5a5 !important}
:is(#toolModal,#integModal) .modal-box .pm-codigo{background:rgba(114,174,255,.1);color:#e5e7eb}
:is(#toolModal,#integModal) .modal-box .pm-codigo.err{background:rgba(239,68,68,.12)}
:is(#toolModal,#integModal) .modal-box .plan-mini{border-color:rgba(255,255,255,.14);background:#16181d}
:is(#toolModal,#integModal) .modal-box .plan-mini.destacado{border-color:var(--primary)}
:is(#toolModal,#integModal) .modal-box .modal-close{background:rgba(255,255,255,.08);color:#f2f4f7;border-color:rgba(255,255,255,.16)}
:is(#toolModal,#integModal) .modal-box .modal-close:hover{background:rgba(255,255,255,.16)}
#toolModal .modal-box .informe-emb{background:#fff;color:#000;border-radius:12px;padding:16px}