/* Configura tu IA — temas claro y oscuro (un solo archivo para todo el sitio). * * Cómo funciona: cada página decide su tema por defecto con . * El botón de la cabecera (lo pone /medir.js) guarda la elección en localStorage (ctia_tema) * y la respeta en las demás páginas. * * 1) Las páginas que nacieron CLARAS (la portada) aquí reciben su versión oscura. * 2) Las páginas que nacieron OSCURAS (newsletter, kit, guía, prompts, skill) aquí reciben su * versión clara: se cambian superficies y textos, no los acentos de marca. */ /* ============================ 1) Portada en modo oscuro ============================ */ html[data-tema="oscuro"]{ --paper:#0A0E23; --ink:#EAEAF5; --card:#141B3A; --line:rgba(196,181,253,.22); --muted:#A9A3C4; --aubergine:#0F1530; --raspberry:#FF1E8C; --lav:#C4B5FD; --amber:#C4B5FD; } html[data-tema="oscuro"] nav{background:rgba(10,14,35,.9);border-bottom-color:var(--line)} html[data-tema="oscuro"] .sinriesgo{background:rgba(31,122,74,.16);border-color:rgba(120,220,160,.32)} html[data-tema="oscuro"] .sinriesgo span{color:#9FE7BE} html[data-tema="oscuro"] .btn-primary{box-shadow:5px 5px 0 rgba(196,181,253,.30)} html[data-tema="oscuro"] .nota-plan{color:#EAEAF5} html[data-tema="oscuro"] .pagos .nota-pago{color:var(--muted)} html[data-tema="oscuro"] .cta-mid .caja{background:#131A38;border:1px solid var(--line)} html[data-tema="oscuro"] footer{color:var(--muted)} html[data-tema="oscuro"] footer .legal a{color:var(--lav)} html[data-tema="oscuro"] .aviso{color:var(--muted)} html[data-tema="oscuro"] .dato b{color:var(--raspberry)} html[data-tema="oscuro"] .card-yo a{color:var(--raspberry)} html[data-tema="oscuro"] details.faq{background:var(--card);border-color:var(--line)} /* ==================== 2) Newsletter, kit, guía y skill en modo claro ==================== */ html[data-tema="claro"] body{background:#F2F3F5;color:#17131F} html[data-tema="claro"] header.bar{background:rgba(242,243,245,.92);border-bottom-color:#E3E5E9} html[data-tema="claro"] .marca{color:#17131F} html[data-tema="claro"] .marca span{color:#FF1E8C} html[data-tema="claro"] a{color:#6D28D9} html[data-tema="claro"] .volver{color:#6D28D9} html[data-tema="claro"] h1,html[data-tema="claro"] h2,html[data-tema="claro"] h3{color:#17131F} html[data-tema="claro"] p,html[data-tema="claro"] li{color:#3B3550} html[data-tema="claro"] .card, html[data-tema="claro"] .mini, html[data-tema="claro"] .quehace, html[data-tema="claro"] .acceso, html[data-tema="claro"] details.faq, html[data-tema="claro"] .lado-card, html[data-tema="claro"] .nota-item .cta-mini, html[data-tema="claro"] .skill-sug{background:#FFFFFF;border-color:#E3E5E9} html[data-tema="claro"] .mini b,html[data-tema="claro"] .quehace b{color:#17131F} html[data-tema="claro"] .quehace p, html[data-tema="claro"] details.faq p, html[data-tema="claro"] .nota-item .resumen, html[data-tema="claro"] .gran-titular .entradilla{color:#3B3550} html[data-tema="claro"] .quehace .cierre,html[data-tema="claro"] .precio small, html[data-tema="claro"] .msg,html[data-tema="claro"] .nota-item .fuente-orig{color:#6D28D9} html[data-tema="claro"] .kicker{color:#6D28D9;border-color:#DDD6FE} html[data-tema="claro"] .btn.sec{color:#17131F;border-color:#CFC8E4} html[data-tema="claro"] pre{background:#F6F5FA;color:#241E36;border-color:#E3E5E9} html[data-tema="claro"] input,html[data-tema="claro"] select{background:#FFFFFF;color:#17131F;border-color:#DDD6FE} html[data-tema="claro"] th{background:#F1EDFD;color:#241E36} html[data-tema="claro"] th,html[data-tema="claro"] td{border-color:#E3E5E9;color:#241E36} html[data-tema="claro"] .nota, html[data-tema="claro"] .nota-item .meta, html[data-tema="claro"] .nota-item .porque, html[data-tema="claro"] .gran-titular .meta, html[data-tema="claro"] footer{color:#6E667C} html[data-tema="claro"] .nota-item .titular, html[data-tema="claro"] .gran-titular .titular-grande{color:#17131F} html[data-tema="claro"] .nota-item,html[data-tema="claro"] .gran-titular{border-bottom-color:#E3E5E9} html[data-tema="claro"] .nota-item .detalle, html[data-tema="claro"] .gran-titular .detalle{border-left-color:#CFC8E4} html[data-tema="claro"] .nota-item .tema{color:#6D28D9;border-color:#DDD6FE} html[data-tema="claro"] .etiqueta-tiempo{color:#9D174D;background:#FDF2F8;border-color:#FBCFE8} html[data-tema="claro"] .aviso{background:#F1EDFD;border-color:#DDD6FE;color:#3B3550} html[data-tema="claro"] .aviso.ok{background:#ECFDF3;border-color:#BBF7D0;color:#166534} html[data-tema="claro"] footer{border-top-color:#E3E5E9} /* ============================== El botón del tema ============================== */ button.ctia-tema{ display:inline-flex;align-items:center;justify-content:center;gap:6px; width:38px;height:38px;padding:0;border-radius:999px;cursor:pointer; background:transparent;border:1px solid rgba(120,110,150,.45);color:inherit; transition:background .15s ease, transform .15s ease;flex:0 0 auto; } button.ctia-tema:hover{transform:translateY(-1px)} button.ctia-tema svg{width:19px;height:19px;display:block} button.ctia-tema.flotante{position:fixed;top:14px;right:14px;z-index:90; background:rgba(10,14,35,.65);color:#fff;border-color:rgba(255,255,255,.35);backdrop-filter:blur(6px)} html[data-tema="claro"] button.ctia-tema{border-color:rgba(110,102,124,.45)} html[data-tema="claro"] button.ctia-tema.flotante{background:rgba(255,255,255,.85);color:#17131F;border-color:#E3E5E9} @media (max-width:560px){button.ctia-tema{width:34px;height:34px}button.ctia-tema svg{width:17px;height:17px}}