/* =====================================================================================
   themes/moderno.css — estilo MODERNO. Coloreados (clase en <body>): clasico (violeta),
   clasico-rojo, clasico-oceano, clasico-bosque, clasico-dorado, clasico-rosa y neon.
   Para agregar un coloreado: bloque "body.<nombre>{--theme-*:...}", su swatch en
   "#colorway-group button[data-colorway=...]" y darlo de alta en THEMES (js/theme.js).
   ===================================================================================== */
body.neon{--theme-bg:#07110d;--theme-surface:#0d1b15;--theme-border:#173a2b;--theme-text:#e8fff3;--theme-muted:#9ab5a7;--theme-primary:#00df81;--theme-secondary:#00a85f;}
body.clasico{--theme-bg:#0f172a;--theme-surface:#1e293b;--theme-border:#475569;--theme-text:#f8fafc;--theme-muted:#cbd5e1;--theme-primary:#a78bfa;--theme-secondary:#fbbf24;}
body.clasico-rojo{--theme-bg:#1a0e10;--theme-surface:#3a0f14;--theme-border:#7a1e26;--theme-text:#fdf3f2;--theme-muted:#d9b3b6;--theme-primary:#e0293f;--theme-secondary:#c9a15a;}
body.clasico-rojo .bg-surface\/30{background:color-mix(in srgb,#5c1620 55%,#1a0e10);}
body.clasico-rojo .bg-surface\/50{background:color-mix(in srgb,#5c1620 78%,#1a0e10);}
body.clasico-rojo .border-border2{border-color:color-mix(in srgb,#7a1e26 70%,transparent);}
body.clasico-rojo .text-secondary{color:#e8c27a;}
body.clasico-oceano{--theme-bg:#061826;--theme-surface:#123245;--theme-border:#2f6a82;--theme-text:#f3fafd;--theme-muted:#a9cbd9;--theme-primary:#4fc3e8;--theme-secondary:#f2b134;}
body.clasico-oceano .bg-surface\/30{background:color-mix(in srgb,#1a3f52 55%,#061826);}
body.clasico-oceano .bg-surface\/50{background:color-mix(in srgb,#1a3f52 78%,#061826);}
body.clasico-oceano .border-border2{border-color:color-mix(in srgb,#2f6a82 70%,transparent);}
body.clasico-oceano .text-secondary{color:#ffd485;}
body.clasico-bosque{--theme-bg:#0b1a10;--theme-surface:#173625;--theme-border:#2f6a4a;--theme-text:#f1fdf5;--theme-muted:#a9d9bb;--theme-primary:#4fe0a0;--theme-secondary:#f2c14f;}
body.clasico-bosque .bg-surface\/30{background:color-mix(in srgb,#1e4a30 55%,#0b1a10);}
body.clasico-bosque .bg-surface\/50{background:color-mix(in srgb,#1e4a30 78%,#0b1a10);}
body.clasico-bosque .border-border2{border-color:color-mix(in srgb,#2f6a4a 70%,transparent);}
body.clasico-bosque .text-secondary{color:#ffe08a;}
body.clasico-dorado{--theme-bg:#1c1408;--theme-surface:#3a2a10;--theme-border:#7a5a1e;--theme-text:#fdf7ef;--theme-muted:#d9c3a3;--theme-primary:#e0a72f;--theme-secondary:#c95a3a;}
body.clasico-dorado .bg-surface\/30{background:color-mix(in srgb,#5c4116 55%,#1c1408);}
body.clasico-dorado .bg-surface\/50{background:color-mix(in srgb,#5c4116 78%,#1c1408);}
body.clasico-dorado .border-border2{border-color:color-mix(in srgb,#7a5a1e 70%,transparent);}
body.clasico-dorado .text-secondary{color:#ff9a6b;}
body.clasico-rosa{--theme-bg:#1a0b16;--theme-surface:#3a1730;--theme-border:#7a2f66;--theme-text:#fdf2fa;--theme-muted:#d9a9cd;--theme-primary:#e04fc0;--theme-secondary:#4fc9e0;}
body.clasico-rosa .bg-surface\/30{background:color-mix(in srgb,#5c1e4d 55%,#1a0b16);}
body.clasico-rosa .bg-surface\/50{background:color-mix(in srgb,#5c1e4d 78%,#1a0b16);}
body.clasico-rosa .border-border2{border-color:color-mix(in srgb,#7a2f66 70%,transparent);}
body.clasico-rosa .text-secondary{color:#8adcf0;}
body.clasico{background:var(--theme-bg);color:var(--theme-text);font-family:'Inter',system-ui,sans-serif;}
body.clasico h1, body.clasico h2, body.clasico h3, body.clasico h4, body.clasico .font-display{font-family:'Sora','Inter',system-ui,sans-serif;letter-spacing:-.02em;}
body.clasico header, body.clasico footer{background:var(--theme-bg);border-color:var(--theme-border);}
body.clasico section{border-color:var(--theme-border);}
body.clasico .bg-background, body.clasico .bg-surface, body.clasico .bg-surface\/30, body.clasico .bg-surface\/50{background:var(--theme-surface);}
body.clasico .text-foreground, body.clasico .text-foreground\/80, body.clasico .text-foreground\/75, body.clasico .text-foreground\/90{color:var(--theme-text);}
body.clasico .text-muted, body.clasico .text-muted\/80{color:var(--theme-muted);}
body.clasico .text-primary{color:var(--theme-primary);}
body.clasico .text-secondary{color:var(--theme-secondary);}
body.clasico .bg-primary{background:var(--theme-primary);color:var(--theme-bg);}
body.clasico .border-border2{border-color:var(--theme-border);}
body.clasico a:hover, body.clasico .hover\\:text-primary:hover{color:var(--theme-primary);}
body.clasico .rounded-xl, body.clasico .rounded-2xl{border-radius:14px;}
body.clasico .card-hover:hover{transform:translateY(-3px);box-shadow:0 20px 50px -25px color-mix(in srgb,var(--theme-primary) 35%,transparent);}
body.neon .comic-toggle, body.clasico .comic-toggle{background:transparent;color:var(--theme-text);border-color:var(--theme-primary);}
body.clasico .border-primary\/20{border-color:color-mix(in srgb,var(--theme-primary) 20%,transparent);}
body.clasico .border-primary\/30{border-color:color-mix(in srgb,var(--theme-primary) 30%,transparent);}
body.clasico .bg-primary\/10{background-color:color-mix(in srgb,var(--theme-primary) 10%,transparent);}
body.clasico .from-primary\/10{--tw-gradient-from:color-mix(in srgb,var(--theme-primary) 10%,transparent) var(--tw-gradient-from-position);--tw-gradient-to:transparent var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to);}
body.clasico .from-primary\/5{--tw-gradient-from:color-mix(in srgb,var(--theme-primary) 5%,transparent) var(--tw-gradient-from-position);--tw-gradient-to:transparent var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to);}
body.clasico .hover\:border-primary\/50:hover{border-color:color-mix(in srgb,var(--theme-primary) 50%,transparent);}
body.clasico .hover\:bg-secondary:hover{background-color:var(--theme-secondary);}
body.clasico .hover\:text-primary:hover{color:var(--theme-primary);}
body.clasico .shadow-glow{--tw-shadow:0 0 0 1px color-mix(in srgb,var(--theme-primary) 25%,transparent),0 20px 60px -20px color-mix(in srgb,var(--theme-primary) 35%,transparent);--tw-shadow-colored:0 0 0 1px var(--tw-shadow-color),0 20px 60px -20px var(--tw-shadow-color);}
body.clasico .bg-background\/30{background-color:color-mix(in srgb,var(--theme-bg) 30%,transparent);}
body.clasico .bg-background\/50{background-color:color-mix(in srgb,var(--theme-bg) 50%,transparent);}
body.clasico .bg-background\/85{background-color:color-mix(in srgb,var(--theme-bg) 85%,transparent);}
body.clasico .from-background\/90{--tw-gradient-from:color-mix(in srgb,var(--theme-bg) 90%,transparent) var(--tw-gradient-from-position);--tw-gradient-to:transparent var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to);}
#colorway-group button[data-colorway="clasico"]{background:#a78bfa;color:#a78bfa;}
#colorway-group button[data-colorway="clasico-rojo"]{background:#e0293f;color:#e0293f;}
#colorway-group button[data-colorway="clasico-oceano"]{background:#4fc3e8;color:#4fc3e8;}
#colorway-group button[data-colorway="clasico-bosque"]{background:#4fe0a0;color:#4fe0a0;}
#colorway-group button[data-colorway="clasico-dorado"]{background:#e0a72f;color:#e0a72f;}
#colorway-group button[data-colorway="clasico-rosa"]{background:#e04fc0;color:#e04fc0;}
#colorway-group button[data-colorway="neon"]{background:#00df81;color:#00df81;}
body.clasico .m-obra-overlay{display:none;}
body.clasico .m-obra-media{border-width:2px;}
body.clasico .m-obra-cap{display:block;padding:10px 2px 0;}
body.clasico .m-obra-autor{color:var(--theme-primary);font-weight:700;margin-top:2px;}
body.clasico .m-obra-tag{background:var(--theme-surface);}
body.clasico #m-back-to-top{background:rgba(15,23,42,.9);border-color:rgba(167,139,250,.35);color:#e2e8f0;}
body.clasico #m-back-to-top:hover{background:#a78bfa;color:#0f172a;border-color:#a78bfa;}
body.clasico-rojo.clasico #m-back-to-top{background:rgba(26,14,16,.9);border-color:rgba(224,41,63,.35);color:#fdf3f2;}
body.clasico-rojo.clasico #m-back-to-top:hover{background:#e0293f;color:#fdf3f2;border-color:#e0293f;}
body.clasico-oceano.clasico #m-back-to-top{background:rgba(6,24,38,.9);border-color:rgba(79,195,232,.35);color:#f3fafd;}
body.clasico-oceano.clasico #m-back-to-top:hover{background:#4fc3e8;color:#061826;border-color:#4fc3e8;}
body.clasico-bosque.clasico #m-back-to-top{background:rgba(11,26,16,.9);border-color:rgba(79,224,160,.35);color:#f1fdf5;}
body.clasico-bosque.clasico #m-back-to-top:hover{background:#4fe0a0;color:#0b1a10;border-color:#4fe0a0;}
body.clasico-dorado.clasico #m-back-to-top{background:rgba(28,20,8,.9);border-color:rgba(224,167,47,.35);color:#fdf7ef;}
body.clasico-dorado.clasico #m-back-to-top:hover{background:#e0a72f;color:#1c1408;border-color:#e0a72f;}
body.clasico-rosa.clasico #m-back-to-top{background:rgba(26,11,22,.9);border-color:rgba(224,79,192,.35);color:#fdf2fa;}
body.clasico-rosa.clasico #m-back-to-top:hover{background:#e04fc0;color:#1a0b16;border-color:#e04fc0;}