/* ===================================================================== Motor de Contenido · v41 — SISTEMA DE 2 TEMAS (elección Jonathan 19/21-jul) · PRINCIPAL ("el A") = D1 ORO EDITORIAL: negro cálido, oro racionado, Playfair Display, jerarquía editorial. Se aplica por defecto. · ALTERNO = D3 ESTUDIO CREMA (la clarita/fancy): papel, tinta, oro fino. Se activa con el botón ☀/☾ del header → html[data-tema="claro"], persistido en localStorage 'mc_tema' (script inline en ). Capa de tokens sobre el estilo v39: cero cambios de lógica en app.js. Quedan con su look propio A PROPÓSITO: teleprompter (grabación), marco del email (branding DD) y píldoras sobre miniaturas. ===================================================================== */ /* ========== TEMA PRINCIPAL · D1 ORO EDITORIAL (por defecto) ========== */ :root{ --bg:#0a0a08; --card:#13110c; --card2:#181510; --line:rgba(245,239,226,.09); --line-gold:rgba(212,175,55,.28); --ink:#f5efe2; --muted:#b8b0a0; --muted2:#a89f8e; --sand:#b8b0a0; --olive:#4A4638; --gold:#d4af37; --amber:#f0d98c; --coral:#E06555; --ivory:#f5efe2; --verde:#9fc78a; --shadow:0 1px 8px rgba(0,0,0,.20); --shadow-card:0 2px 14px rgba(0,0,0,.28); --shadow-h:0 10px 26px rgba(0,0,0,.42); --serif:'Playfair Display', Georgia, serif; } header{background:rgba(10,10,8,.9)} .skeleton, .ethumb.cargando, .sk-kpi, .sk-row{ background:linear-gradient(90deg,#16130d 25%,#1d1913 50%,#16130d 75%); background-size:200% 100%} #lock{background:radial-gradient(1200px 600px at 50% -10%, #181510 0%, var(--bg) 60%)} /* botón primario D1: oro → oro claro, texto tinta oscura */ .btn-pri, .dec-btn.ap, .reco-btns button.ac, .chat-send, .au-btn{ background:linear-gradient(135deg,var(--gold),#f0d98c); border:none; color:#1a1508} .au-tab.on{background:var(--gold); border-color:var(--gold); color:#1a1508} .seg button.on{background:var(--gold); color:#1a1508} /* nav D1: versalitas espaciadas */ .tab{font-family:var(--sans); font-size:11.5px; font-weight:700; letter-spacing:.11em; text-transform:uppercase; padding:11px 12px 13px} .tab.on{color:var(--gold); border-bottom-color:var(--gold)} /* ========== TEMA ALTERNO · D3 ESTUDIO CREMA (html[data-tema="claro"]) ========== */ html[data-tema="claro"]{ --bg:#f7f2e9; --card:#fffdf8; --card2:#f3ecdc; --line:#e5dcc8; --line-gold:rgba(176,141,47,.38); --ink:#1a1712; --muted:#6f675a; --muted2:#7d7566; --sand:#8a8172; --olive:#cdc4ae; --gold:#b08d2f; --amber:#8a6a15; --coral:#c14b3a; --ivory:#F2EEE3; --verde:#5c8a4d; --shadow:0 1px 6px rgba(26,23,18,.05); --shadow-card:0 6px 24px rgba(26,23,18,.07); --shadow-h:0 14px 40px rgba(26,23,18,.14); color-scheme:light; } html[data-tema="claro"] ::selection{background:var(--gold); color:#fffdf8} html[data-tema="claro"] .skeleton, html[data-tema="claro"] .ethumb.cargando, html[data-tema="claro"] .sk-kpi, html[data-tema="claro"] .sk-row{ background:linear-gradient(90deg,#ece5d1 25%,#f6f1e3 50%,#ece5d1 75%); background-size:200% 100%} html[data-tema="claro"] #lock{background:radial-gradient(1200px 600px at 50% -10%, #fffdf8 0%, var(--bg) 60%)} html[data-tema="claro"] header{background:rgba(247,242,233,.9)} @media(max-width:640px){ html[data-tema="claro"] header::after{background:linear-gradient(90deg, rgba(247,242,233,0), rgba(247,242,233,.94))} } html[data-tema="claro"] .ethumb .fb{background:radial-gradient(420px 300px at 50% 0%, #efe8d4 0%, var(--card2) 70%)} html[data-tema="claro"] .ig-embed-err{background:radial-gradient(600px 300px at 50% 30%, #efe8d4, var(--card) 70%)} html[data-tema="claro"] .epill.patron{color:#E3C458} /* píldora oscura sobre miniatura: ámbar claro */ html[data-tema="claro"] .epill.tipo{background:rgba(26,23,18,.82); color:#f7f2e9} html[data-tema="claro"] .chip{background:rgba(26,23,18,.05)} html[data-tema="claro"] .badge{background:rgba(26,23,18,.05)} html[data-tema="claro"] .msg.user{background:var(--ink); color:#f7f2e9} /* botón primario D3: tinta sobre papel */ html[data-tema="claro"] .btn-pri, html[data-tema="claro"] .dec-btn.ap, html[data-tema="claro"] .reco-btns button.ac, html[data-tema="claro"] .au-btn, html[data-tema="claro"] .chat-send{ background:var(--ink); border:1px solid var(--ink); color:#f7f2e9; box-shadow:0 2px 10px rgba(26,23,18,.16)} html[data-tema="claro"] .btn-pri:hover, html[data-tema="claro"] .dec-btn.ap:hover, html[data-tema="claro"] .reco-btns button.ac:hover, html[data-tema="claro"] .chat-send:hover:not(:disabled){ filter:none; background:#2c2620} html[data-tema="claro"] .au-tab.on{background:var(--ink); border-color:var(--ink); color:#f7f2e9} html[data-tema="claro"] .seg button.on{background:var(--ink); color:#f7f2e9} html[data-tema="claro"] .dec-btn.ap.on{background:rgba(176,141,47,.14); border-color:var(--gold); color:var(--amber)} html[data-tema="claro"] .reco-btns button.ac.on{background:rgba(176,141,47,.14); border-color:var(--gold); color:var(--amber)} /* nav D3: caja normal, subrayado oro */ html[data-tema="claro"] .tab{font-size:13.5px; font-weight:600; letter-spacing:.2px; text-transform:none; padding:9px 13px 11px} html[data-tema="claro"] .tab.on{color:var(--ink); border-bottom-color:var(--gold)} html[data-tema="claro"] #btnEjecutar{background:var(--ink); border-color:var(--ink); color:#f7f2e9; box-shadow:0 12px 32px rgba(26,23,18,.28)} html[data-tema="claro"] #btnEjecutar:hover{background:#2c2620} html[data-tema="claro"] #temaBtn{border-color:var(--line); color:var(--muted)} /* ========== COMPARTIDO (ambos temas) ========== */ /* tipografía editorial */ .serif{letter-spacing:-.01em} .hcard .hval{font-family:var(--serif); font-weight:500; font-size:32px} header h1{font-weight:500} header h1 small{color:var(--gold)} /* retícula editorial: esquinas serenas */ .hcard,.kcol,.kpi,.chartbox,.calwrap,.tbl-wrap,.ecard,.pieza,.reco,.varcard, .hoy-lista,.chat-wrap,#lock .box,.ig-embed{border-radius:8px} .kcard{border-radius:6px} /* pastillas */ .btn-pri,.btn-sec,.btn-ter,.au-btn,.au-tab,.dec-btn,.reco-btns button,.chat-send{border-radius:999px} /* icono de marca: monograma MC (opción 2, Jonathan 21-jul) — M recta + C itálica, sin marco */ .brand .mono-mc, #lock .mono-mc{background:none; border:none; box-shadow:none; border-radius:0} .mono-mc .m{fill:var(--gold)} .mono-mc .c{fill:var(--amber)} html[data-tema="claro"] .mono-mc .m{fill:var(--ink)} html[data-tema="claro"] .mono-mc .c{fill:var(--gold)} /* ---------- conmutador de tema (☀/☾, junto al guardado) ---------- */ #temaBtn{flex:0 0 auto; width:34px; height:34px; border-radius:50%; background:transparent; border:1px solid var(--line-gold); color:var(--amber); font-size:15px; line-height:1; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; transition:.15s} #temaBtn:hover{border-color:var(--gold); color:var(--gold)} /* ---------- botón EJECUTAR · siempre visible (tema D1: oro) ---------- */ #btnEjecutar{position:fixed; right:18px; bottom:calc(18px + env(safe-area-inset-bottom)); z-index:60; display:inline-flex; align-items:center; gap:9px; background:linear-gradient(135deg,var(--gold),#f0d98c); color:#1a1508; border:1px solid rgba(212,175,55,.4); border-radius:999px; padding:14px 26px; font-family:var(--sans); font-size:14px; font-weight:800; letter-spacing:.02em; cursor:pointer; box-shadow:0 12px 32px rgba(0,0,0,.35); transition:filter .15s, transform .12s} #btnEjecutar::before{content:''; width:8px; height:8px; border-radius:50%; background:#1a1508; opacity:.75} #btnEjecutar:hover{filter:brightness(1.06)} #btnEjecutar:active{transform:scale(.97)} @media(max-width:640px){ #btnEjecutar{right:14px; bottom:calc(14px + env(safe-area-inset-bottom)); padding:12px 20px; font-size:13px} }