/* Hub Bajar a Tierra · temas por persona (9/10/2026). Cada una elige en "Mi hub" (js/temas.js): dirección (aurora, joya,
   papeleria o clasico), color de acento y cuánto brillo. Se aplica con atributos en <html>: data-tema, data-acento,
   data-brillo. Todo detrás de html.sistema. Los colores del proyecto abierto (--plum, --plum-deep, --amber) siguen
   mandando en la barra y el logo; el tema cambia el entorno: fondo, tarjetas, botones, luces. */

/* ===== acento ===== */
html.sistema { --ac: var(--plum-mid); --ac2: var(--amber); --ac-suave: color-mix(in srgb, var(--ac) 14%, #fff); }
html.sistema[data-acento="ciruela"] { --ac: #540545; --ac2: #b53c93; }
html.sistema[data-acento="magenta"] { --ac: #b53c93; --ac2: #ff7ad1; }
html.sistema[data-acento="ambar"] { --ac: #d9951f; --ac2: #f6d27a; }
html.sistema[data-acento="teal"] { --ac: #006666; --ac2: #2fbf8a; }
html.sistema[data-acento="bosque"] { --ac: #0b3b43; --ac2: #7ad0c9; }
html.sistema[data-acento="rosa"] { --ac: #d86fb4; --ac2: #f4d4ec; }
html.sistema[data-acento] { --glow: 0 0 0 1px color-mix(in srgb, var(--ac) 40%, transparent), 0 8px 28px -10px color-mix(in srgb, var(--ac) 55%, transparent); }
html.sistema[data-acento] .view-header h1 em { background: linear-gradient(92deg, var(--ac) 0%, var(--ac2) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
html.sistema[data-acento] .btn-add, html.sistema[data-acento] .campana-btn-approve, html.sistema[data-acento] .brief-approve-btn, html.sistema[data-acento] .crx-go, html.sistema[data-acento] .estudio .btn.primario, html.sistema[data-acento] .estudio .btn.amber, html.sistema[data-acento] .pz-nueva { background: linear-gradient(135deg, var(--ac) 0%, color-mix(in srgb, var(--ac) 60%, var(--ac2)) 100%); }
html.sistema[data-acento] .pz-segb.activa, html.sistema[data-acento] .subtab.active, html.sistema[data-acento] .cal-view-btn.active, html.sistema[data-acento] .grilla-view-btn.active, html.sistema[data-acento] .plx-tab.active, html.sistema[data-acento] .crx-subtabs button.activa, html.sistema[data-acento] .campana-filter-btn.active, html.sistema[data-acento] .channel-btn.active { background: linear-gradient(135deg, var(--ac) 0%, color-mix(in srgb, var(--ac) 70%, var(--ac2)) 100%); }
html.sistema[data-acento] .nav-tab.active { box-shadow: inset 0 -2px 0 var(--ac2), 0 0 18px -4px color-mix(in srgb, var(--ac2) 70%, transparent); }
html.sistema[data-acento] .pz-grupo summary em { background: var(--ac-suave); color: var(--ac); }

/* ===== destellos (los pone js/temas.js en las cabeceras) ===== */
html.sistema .view:not(.active) .tema-chispa { display: none; }
html.sistema .tema-chispa { position: absolute; pointer-events: none; will-change: transform, opacity; color: #fff; font-size: 14px; text-shadow: 0 0 10px var(--ac2), 0 0 22px var(--ac); animation: temaFlota 6s ease-in-out infinite; opacity: .9; z-index: 1; }
html.sistema .tema-chispa:nth-child(2n) { animation-duration: 8s; animation-delay: -3s; font-size: 10px; }
html.sistema .tema-chispa:nth-child(3n) { animation-duration: 7s; animation-delay: -1.5s; font-size: 12px; }
@keyframes temaFlota { 0%, 100% { transform: translateY(0) scale(1); opacity: .55; } 50% { transform: translateY(-10px) scale(1.25); opacity: 1; } }
html.sistema[data-brillo="tranquilo"] .tema-chispa { display: none; }
html.sistema[data-brillo="tranquilo"] .topbar::after, html.sistema[data-brillo="tranquilo"] body::before { animation: none !important; }
html.sistema[data-brillo="tranquilo"] .btn-add::after, html.sistema[data-brillo="tranquilo"] .pz-nueva::after { display: none; }

/* ===================================================================== A · AURORA ===================================================================== */
html.sistema[data-tema="aurora"] body { background: #f7edf4; }
/* las luces son degradés radiales ya suaves (sin filter: blur, que obligaba a recalcular toda la pantalla en cada cuadro); se mueven solo con transform, en su propia capa */
html.sistema[data-tema="aurora"] body::before { content: ''; position: fixed; inset: -12%; z-index: -1; pointer-events: none; background: radial-gradient(38% 46% at 20% 20%, color-mix(in srgb, var(--ac2) 55%, #f4a8dc) 0%, transparent 70%), radial-gradient(42% 50% at 80% 15%, #ffd9a0 0%, transparent 70%), radial-gradient(46% 54% at 60% 90%, color-mix(in srgb, var(--ac) 70%, #fff) 0%, transparent 70%), radial-gradient(38% 46% at 10% 85%, #9fe0d8 0%, transparent 70%), linear-gradient(120deg, #fbe4f1, #f7edf4 60%, #fff2dc); opacity: .85; will-change: transform; animation: temaAurora 40s ease-in-out infinite alternate; }
@keyframes temaAurora { from { transform: translate3d(-1.5%, -1%, 0); } to { transform: translate3d(1.5%, 1.5%, 0); } }
html.sistema[data-brillo="tranquilo"][data-tema="aurora"] body::before { animation: none; }
html.sistema[data-tema="aurora"] .topbar { background: linear-gradient(100deg, color-mix(in srgb, var(--plum-deep) 92%, transparent), color-mix(in srgb, var(--plum) 86%, transparent) 60%, color-mix(in srgb, var(--ac) 82%, transparent)); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 10px 40px -10px color-mix(in srgb, var(--plum) 50%, transparent); }
html.sistema[data-tema="aurora"] .topbar::after { background: linear-gradient(90deg, transparent, #ffd38a 30%, var(--ac2) 50%, #fff 70%, transparent); background-size: 200% 100%; }
html.sistema[data-tema="aurora"] .brand-emblem { box-shadow: 0 0 0 3px rgba(255, 211, 138, .5), 0 0 24px rgba(255, 211, 138, .8); }
html.sistema[data-tema="aurora"] .nav-tab.active { background: linear-gradient(135deg, rgba(255, 255, 255, .3), rgba(255, 255, 255, .12)); box-shadow: 0 0 18px rgba(255, 211, 138, .55), inset 0 0 0 1px rgba(255, 255, 255, .35); }
html.sistema[data-tema="aurora"] .view-header .eyebrow::before { color: #e7a83e; text-shadow: 0 0 10px #ffd38a; }
html.sistema[data-tema="aurora"] .card, html.sistema[data-tema="aurora"] .idea-card, html.sistema[data-tema="aurora"] .name-card, html.sistema[data-tema="aurora"] .campana-item, html.sistema[data-tema="aurora"] .inbox-item, html.sistema[data-tema="aurora"] .pp-idea, html.sistema[data-tema="aurora"] .tablero-card, html.sistema[data-tema="aurora"] .plx-kpi, html.sistema[data-tema="aurora"] .crx-card, html.sistema[data-tema="aurora"] .section-card, html.sistema[data-tema="aurora"] .brief-doc, html.sistema[data-tema="aurora"] .change-card, html.sistema[data-tema="aurora"] .checklist-widget, html.sistema[data-tema="aurora"] .pz-grupo, html.sistema[data-tema="aurora"] .pz-card, html.sistema[data-tema="aurora"] .pz-col, html.sistema[data-tema="aurora"] .pz-dia, html.sistema[data-tema="aurora"] .hs-col, html.sistema[data-tema="aurora"] .campana-welcome { background: rgba(255, 255, 255, .74); border: 1px solid rgba(255, 255, 255, .9); box-shadow: 0 12px 32px -16px color-mix(in srgb, var(--plum) 35%, transparent), inset 0 1px 0 #fff; }
html.sistema[data-tema="aurora"] .pz-col { background: rgba(255, 255, 255, .45); }
html.sistema[data-tema="aurora"] .pz-dia.finde { background: rgba(255, 255, 255, .4); }
html.sistema[data-tema="aurora"] .card:hover, html.sistema[data-tema="aurora"] .pz-card:hover, html.sistema[data-tema="aurora"] .pz-dia:hover, html.sistema[data-tema="aurora"] .hs-col:hover, html.sistema[data-tema="aurora"] .change-card:hover, html.sistema[data-tema="aurora"] .campana-item:hover { box-shadow: 0 0 0 1px color-mix(in srgb, var(--ac) 40%, transparent), 0 18px 44px -16px color-mix(in srgb, var(--ac) 50%, transparent), inset 0 1px 0 #fff; }
html.sistema[data-tema="aurora"] .pz-bar .pz-seg, html.sistema[data-tema="aurora"] .pz-sel, html.sistema[data-tema="aurora"] .pz-mio, html.sistema[data-tema="aurora"] .pz-busca { background-color: rgba(255, 255, 255, .78); border-color: rgba(255, 255, 255, .95); }
html.sistema[data-tema="aurora"] #homeDailyScene { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--ac), 0 0 0 6px color-mix(in srgb, var(--ac2) 60%, #fff), 0 30px 60px -20px color-mix(in srgb, var(--plum) 55%, transparent) !important; }
html.sistema[data-tema="aurora"] .btn-add, html.sistema[data-tema="aurora"] .pz-nueva { box-shadow: 0 12px 28px -10px var(--ac), inset 0 0 0 1px rgba(255, 255, 255, .4); border-radius: 999px; }
html.sistema[data-tema="aurora"] .pz-est.programado, html.sistema[data-tema="aurora"] .pz-est.publicado { box-shadow: 0 6px 14px -8px var(--pe); }
html.sistema[data-tema="aurora"] .est-sec, html.sistema[data-tema="aurora"] .estudio .est-panel { background: rgba(255, 255, 255, .7); }

/* ===================================================================== B · JOYA (oscuro con oro) ===================================================================== */
html.sistema[data-tema="joya"] { --sup-0: #160612; --sup-1: #22101f; --sup-2: #2a1527; --linea: rgba(231, 168, 62, .26); --linea-fuerte: rgba(231, 168, 62, .5); --text: #f3e9ee; --text-soft: #cdb3c4; --ink: #ffffff; --border: rgba(231, 168, 62, .26); --cream: #160612; --warm-white: #22101f; --plum-pale: #2a1527; --plum-light: #3a1a36; --sh-1: 0 1px 2px rgba(0, 0, 0, .4); --sh-2: 0 10px 30px rgba(0, 0, 0, .5); --sh-3: 0 30px 70px rgba(0, 0, 0, .7); color-scheme: dark; }
html.sistema[data-tema="joya"] body { background: #160612; color: var(--text); }
html.sistema[data-tema="joya"] body::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; will-change: transform; background: radial-gradient(900px 500px at 15% 0%, color-mix(in srgb, var(--plum) 70%, #5c0f4d) 0%, transparent 55%), radial-gradient(800px 500px at 100% 100%, #3a1a0a 0%, transparent 55%), url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><circle cx='10' cy='10' r='1' fill='white' opacity='.5'/><circle cx='70' cy='40' r='.8' fill='white' opacity='.4'/><circle cx='120' cy='100' r='1.2' fill='white' opacity='.35'/><circle cx='40' cy='110' r='.7' fill='white' opacity='.45'/><circle cx='100' cy='20' r='.6' fill='white' opacity='.3'/></svg>"); }
html.sistema[data-tema="joya"] .topbar { background: rgba(22, 6, 18, .72); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid rgba(231, 168, 62, .35); box-shadow: 0 10px 40px -10px #000; }
html.sistema[data-tema="joya"] .topbar::after { background: linear-gradient(90deg, transparent, #e7a83e 30%, #fff 50%, #e7a83e 70%, transparent); background-size: 200% 100%; height: 1px; }
html.sistema[data-tema="joya"] .brand-emblem { box-shadow: 0 0 0 2px #2a0a25, 0 0 0 3px #e7a83e, 0 0 26px rgba(231, 168, 62, .7); }
html.sistema[data-tema="joya"] .nav-tab.active { background: linear-gradient(135deg, rgba(231, 168, 62, .35), rgba(231, 168, 62, .12)); color: #ffe3a3; box-shadow: inset 0 0 0 1px rgba(231, 168, 62, .6), 0 0 16px rgba(231, 168, 62, .35); }
html.sistema[data-tema="joya"] .nav-tab:hover { background: rgba(231, 168, 62, .14); }
html.sistema[data-tema="joya"] .view-header h1, html.sistema[data-tema="joya"] .subview-title, html.sistema[data-tema="joya"] h2, html.sistema[data-tema="joya"] h3, html.sistema[data-tema="joya"] h4 { color: #fff; }
html.sistema[data-tema="joya"] .view-header .eyebrow { color: #e7a83e; }
html.sistema[data-tema="joya"] .view-header h1 em { background: linear-gradient(90deg, #f6d27a, var(--ac2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
html.sistema[data-tema="joya"] .view-header p, html.sistema[data-tema="joya"] #homeSceneCaption { color: #e8c9dd; }
/* superficies: tarjetas, filas, columnas, modales */
html.sistema[data-tema="joya"] .card, html.sistema[data-tema="joya"] .idea-card, html.sistema[data-tema="joya"] .name-card, html.sistema[data-tema="joya"] .campana-item, html.sistema[data-tema="joya"] .inbox-item, html.sistema[data-tema="joya"] .pp-idea, html.sistema[data-tema="joya"] .tablero-card, html.sistema[data-tema="joya"] .plx-kpi, html.sistema[data-tema="joya"] .crx-card, html.sistema[data-tema="joya"] .section-card, html.sistema[data-tema="joya"] .brief-doc, html.sistema[data-tema="joya"] .change-card, html.sistema[data-tema="joya"] .checklist-widget, html.sistema[data-tema="joya"] .pz-grupo, html.sistema[data-tema="joya"] .pz-card, html.sistema[data-tema="joya"] .pz-col, html.sistema[data-tema="joya"] .pz-dia, html.sistema[data-tema="joya"] .hs-col, html.sistema[data-tema="joya"] .campana-welcome, html.sistema[data-tema="joya"] .modal-box, html.sistema[data-tema="joya"] .piece-modal, html.sistema[data-tema="joya"] .bell-panel, html.sistema[data-tema="joya"] .plx-atencion { background: linear-gradient(160deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .03)), #22101f; border: 1px solid rgba(231, 168, 62, .28); box-shadow: 0 20px 40px -24px #000, inset 0 1px 0 rgba(255, 255, 255, .1); color: var(--text); }
html.sistema[data-tema="joya"] .card:hover, html.sistema[data-tema="joya"] .pz-card:hover, html.sistema[data-tema="joya"] .pz-dia:hover, html.sistema[data-tema="joya"] .hs-col:hover, html.sistema[data-tema="joya"] .change-card:hover, html.sistema[data-tema="joya"] .campana-item:hover { border-color: rgba(231, 168, 62, .7); box-shadow: 0 0 28px -6px rgba(231, 168, 62, .45); }
html.sistema[data-tema="joya"] .pz-col { background: rgba(255, 255, 255, .04); }
html.sistema[data-tema="joya"] .pz-dia.finde { background: rgba(255, 255, 255, .02); }
html.sistema[data-tema="joya"] .pz-dia.otro { opacity: .45; }
html.sistema[data-tema="joya"] .pz-fila { border-top-color: rgba(255, 255, 255, .06); }
html.sistema[data-tema="joya"] .pz-fila:hover { background: rgba(231, 168, 62, .08); }
html.sistema[data-tema="joya"] .pz-fila.suceso { background: rgba(231, 168, 62, .09); }
html.sistema[data-tema="joya"] .pz-tit, html.sistema[data-tema="joya"] .pz-card-t, html.sistema[data-tema="joya"] .pz-dia-n, html.sistema[data-tema="joya"] .pz-grupo summary, html.sistema[data-tema="joya"] .pz-col header, html.sistema[data-tema="joya"] .pz-resp, html.sistema[data-tema="joya"] .pz-chip, html.sistema[data-tema="joya"] .pz-resumen b { color: #fff; }
html.sistema[data-tema="joya"] .pz-chip { background: rgba(255, 255, 255, .06); }
html.sistema[data-tema="joya"] .pz-ev { color: #160612; }
html.sistema[data-tema="joya"] .pz-sec { background: rgba(255, 255, 255, .08); color: #e8c9dd; }
html.sistema[data-tema="joya"] .pz-est { background: color-mix(in srgb, var(--pe, #999) 22%, #22101f); border-color: color-mix(in srgb, var(--pe, #999) 45%, transparent); color: color-mix(in srgb, var(--pe, #999) 40%, #fff); }
html.sistema[data-tema="joya"] .pz-est.programado, html.sistema[data-tema="joya"] .pz-est.publicado { background: linear-gradient(135deg, #e7a83e, #f6d27a); color: #2a0a25; }
html.sistema[data-tema="joya"] .pz-grupo summary em { background: rgba(231, 168, 62, .2); color: #ffe3a3; }
html.sistema[data-tema="joya"] .pz-bar .pz-seg, html.sistema[data-tema="joya"] .pz-sel, html.sistema[data-tema="joya"] .pz-mio, html.sistema[data-tema="joya"] .pz-busca, html.sistema[data-tema="joya"] select, html.sistema[data-tema="joya"] input, html.sistema[data-tema="joya"] textarea { background-color: #22101f; border-color: rgba(231, 168, 62, .3); color: var(--text); }
html.sistema[data-tema="joya"] .pz-sel { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' fill='none' stroke='%23e7a83e' stroke-width='1.6'/></svg>"); }
html.sistema[data-tema="joya"] .pz-segb { color: #cdb3c4; }
html.sistema[data-tema="joya"] .pz-segb.activa, html.sistema[data-tema="joya"] .subtab.active, html.sistema[data-tema="joya"] .pz-mio.activa { background: linear-gradient(135deg, #e7a83e, #f6d27a); color: #2a0a25; }
html.sistema[data-tema="joya"] .btn-add, html.sistema[data-tema="joya"] .pz-nueva, html.sistema[data-tema="joya"] .campana-btn-approve, html.sistema[data-tema="joya"] .brief-approve-btn, html.sistema[data-tema="joya"] .crx-go { background: linear-gradient(135deg, #f6d27a, #e7a83e 60%, #c9931c); color: #2a0a25; box-shadow: 0 14px 30px -10px rgba(231, 168, 62, .7); }
html.sistema[data-tema="joya"] .pz-link, html.sistema[data-tema="joya"] .pz-abrir { color: #f6d27a; }
html.sistema[data-tema="joya"] .pz-sync { color: #cdb3c4; }
html.sistema[data-tema="joya"] #homeDailyScene { box-shadow: 0 0 0 1px rgba(231, 168, 62, .55), 0 0 50px -10px rgba(231, 168, 62, .5), 0 40px 70px -30px #000 !important; }
html.sistema[data-tema="joya"] #homeAlmanaque { background: #22101f !important; color: #f3e9ee; }
html.sistema[data-tema="joya"] .hs-col h4, html.sistema[data-tema="joya"] .pz-col header { color: #e7a83e; }
/* lo que el monolito pinta blanco en línea */
html.sistema[data-tema="joya"] [style*="background:#fff"], html.sistema[data-tema="joya"] [style*="background: #fff"], html.sistema[data-tema="joya"] [style*="background:white"], html.sistema[data-tema="joya"] [style*="background:#ffffff"], html.sistema[data-tema="joya"] [style*="background-color:#fff"] { background: #22101f !important; color: var(--text); }
html.sistema[data-tema="joya"] [style*="color:var(--ink)"], html.sistema[data-tema="joya"] [style*="color: var(--ink)"] { color: #fff !important; }
html.sistema[data-tema="joya"] [style*="color:var(--text)"] { color: var(--text) !important; }
html.sistema[data-tema="joya"] [style*="background:var(--plum-pale)"], html.sistema[data-tema="joya"] [style*="background:var(--cream)"], html.sistema[data-tema="joya"] [style*="background:var(--warm-white)"] { background: #2a1527 !important; }
html.sistema[data-tema="joya"] .skel { background: #2a1527; }
/* el Estudio se queda claro: el editor y las placas necesitan el fondo crema */
html.sistema[data-tema="joya"] .estudio { --text: #2a2430; --text-soft: #6f6372; --ink: #0a1b2f; --border: rgba(10, 27, 47, .1); --cream: #f6f2ec; --warm-white: #fffdfa; --plum-pale: #faf0f7; color: #2a2430; color-scheme: light; background: #f6f2ec; }
html.sistema[data-tema="joya"] .estudio [style*="background:#fff"] { background: #fff !important; color: #2a2430; }
html.sistema[data-tema="joya"] .estudio h4, html.sistema[data-tema="joya"] .estudio h3 { color: #0a1b2f; }
html.sistema[data-tema="joya"] .estudio select, html.sistema[data-tema="joya"] .estudio input, html.sistema[data-tema="joya"] .estudio textarea { background-color: #fff; color: #2a2430; border-color: #e6dfd3; }
html.sistema[data-tema="joya"] .pz-mini, html.sistema[data-tema="joya"] .pz-card-img { border-color: rgba(231, 168, 62, .3); }

/* ===================================================================== C · PAPELERÍA ===================================================================== */
html.sistema[data-tema="papeleria"] { --sup-0: #fbf3f0; --sup-1: #ffffff; --linea: #f1d6e6; --text: #3a2434; --text-soft: #8a5a7a; }
html.sistema[data-tema="papeleria"] body { background: #fbf3f0; }
html.sistema[data-tema="papeleria"] body::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; will-change: transform; background: radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--ac) 16%, transparent) 1px, transparent 1.6px) 0 0/22px 22px, linear-gradient(180deg, #fff6f3, #fbeff2 55%, #fff3e3); }
html.sistema[data-tema="papeleria"] .topbar { background: linear-gradient(100deg, var(--plum-deep), color-mix(in srgb, var(--plum) 70%, var(--ac))); box-shadow: 0 10px 30px -14px var(--plum); }
html.sistema[data-tema="papeleria"] .topbar::after { height: 4px; background: repeating-linear-gradient(90deg, var(--amber) 0 14px, #f4d4ec 14px 28px, var(--ac) 28px 42px); animation: none; opacity: .95; }
html.sistema[data-tema="papeleria"] .brand-emblem { box-shadow: 0 0 0 3px #f4d4ec, 0 0 0 5px var(--amber); }
html.sistema[data-tema="papeleria"] .nav-tab.active { background: #f4d4ec; color: var(--plum); box-shadow: 0 4px 12px -4px var(--plum); }
html.sistema[data-tema="papeleria"] .nav-tab.active .ic { color: var(--plum); }
html.sistema[data-tema="papeleria"] .view-header .eyebrow::before { content: '❀'; color: var(--amber); text-shadow: none; }
html.sistema[data-tema="papeleria"] .view-header h1 em { background: none; -webkit-text-fill-color: initial; color: var(--ac); text-decoration: underline wavy var(--amber); text-underline-offset: 7px; text-decoration-thickness: 2px; }
html.sistema[data-tema="papeleria"] .card, html.sistema[data-tema="papeleria"] .idea-card, html.sistema[data-tema="papeleria"] .campana-item, html.sistema[data-tema="papeleria"] .inbox-item, html.sistema[data-tema="papeleria"] .pp-idea, html.sistema[data-tema="papeleria"] .tablero-card, html.sistema[data-tema="papeleria"] .plx-kpi, html.sistema[data-tema="papeleria"] .section-card, html.sistema[data-tema="papeleria"] .change-card, html.sistema[data-tema="papeleria"] .checklist-widget, html.sistema[data-tema="papeleria"] .pz-grupo, html.sistema[data-tema="papeleria"] .pz-card, html.sistema[data-tema="papeleria"] .pz-col, html.sistema[data-tema="papeleria"] .pz-dia, html.sistema[data-tema="papeleria"] .hs-col { background: #fff; border: 1.5px solid #f1d6e6; box-shadow: 0 10px 24px -14px color-mix(in srgb, var(--plum) 35%, transparent); position: relative; }
html.sistema[data-tema="papeleria"] .pz-grupo, html.sistema[data-tema="papeleria"] .hs-col, html.sistema[data-tema="papeleria"] .checklist-widget, html.sistema[data-tema="papeleria"] .pz-col { overflow: visible; }
html.sistema[data-tema="papeleria"] .pz-grupo::before, html.sistema[data-tema="papeleria"] .hs-col::before, html.sistema[data-tema="papeleria"] .checklist-widget::before, html.sistema[data-tema="papeleria"] .pz-col::before { content: ''; position: absolute; top: -8px; left: 18px; width: 46px; height: 14px; background: color-mix(in srgb, var(--amber) 60%, transparent); transform: rotate(-6deg); border-radius: 2px; z-index: 1; pointer-events: none; }
html.sistema[data-tema="papeleria"] .card:hover, html.sistema[data-tema="papeleria"] .pz-card:hover, html.sistema[data-tema="papeleria"] .pz-dia:hover, html.sistema[data-tema="papeleria"] .hs-col:hover { border-color: var(--ac); box-shadow: 0 14px 30px -14px color-mix(in srgb, var(--ac) 55%, transparent); }
html.sistema[data-tema="papeleria"] .pz-dia.finde { background: #fff8f2; }
html.sistema[data-tema="papeleria"] #homeDailyScene { box-shadow: 0 24px 50px -22px color-mix(in srgb, var(--plum) 50%, transparent), 0 0 0 8px #fff, 0 0 0 9px #f4d4ec !important; transform: rotate(-1.2deg); }
html.sistema[data-tema="papeleria"] #homeDailyScene:hover { transform: rotate(0deg); }
html.sistema[data-tema="papeleria"] .pz-segb.activa, html.sistema[data-tema="papeleria"] .subtab.active, html.sistema[data-tema="papeleria"] .cal-view-btn.active, html.sistema[data-tema="papeleria"] .grilla-view-btn.active, html.sistema[data-tema="papeleria"] .plx-tab.active, html.sistema[data-tema="papeleria"] .crx-subtabs button.activa, html.sistema[data-tema="papeleria"] .campana-filter-btn.active, html.sistema[data-tema="papeleria"] .channel-btn.active { background: #f4d4ec; color: var(--plum); box-shadow: 0 4px 12px -6px var(--plum); }
html.sistema[data-tema="papeleria"] .pz-mio.activa { background: #ffe9bf; color: #5a3a00; box-shadow: none; }
html.sistema[data-tema="papeleria"] .btn-add, html.sistema[data-tema="papeleria"] .pz-nueva, html.sistema[data-tema="papeleria"] .campana-btn-approve, html.sistema[data-tema="papeleria"] .brief-approve-btn, html.sistema[data-tema="papeleria"] .crx-go { background: var(--plum); color: #fff; border: 2px solid var(--amber); box-shadow: 0 10px 24px -10px var(--plum); }
html.sistema[data-tema="papeleria"] .pz-grupo summary em { background: #f4d4ec; color: var(--plum); border: 1px solid #e9b8d9; }
html.sistema[data-tema="papeleria"] .pz-grupo summary { font-size: 17px; }
html.sistema[data-tema="papeleria"] .pz-est.programado, html.sistema[data-tema="papeleria"] .pz-est.publicado { background: #dff3e6; color: #1f5a2a; border-color: #b9e3c6; }
html.sistema[data-tema="papeleria"] .pz-est.programado i, html.sistema[data-tema="papeleria"] .pz-est.publicado i { background: #1f5a2a; }
html.sistema[data-tema="papeleria"] .tema-chispa { color: var(--amber); text-shadow: none; }
html.sistema[data-tema="papeleria"] .tema-chispa::before { content: '❀'; }

/* ===================================================================== CLÁSICO: lo de sistema.css tal cual ===================================================================== */
html.sistema[data-tema="clasico"] body::before { display: none; }

/* ===================================================================== el Estudio y la ventana de la pieza, bajo los temas ===================================================================== */
/* común */
html.sistema .estudio .est-barra-arriba { position: relative; }
html.sistema .estudio .est-barra-arriba::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: linear-gradient(90deg, transparent, var(--ac2) 35%, var(--ac) 50%, var(--ac2) 65%, transparent); opacity: .8; pointer-events: none; }
html.sistema .estudio .est-tipochip, html.sistema .estudio .btn, html.sistema .estudio .est-chip { border-radius: 10px; }
html.sistema .piece-modal { border-radius: 20px; box-shadow: var(--sh-3), 0 0 0 1px color-mix(in srgb, var(--ac) 25%, transparent); }
html.sistema .piece-title-input { border-radius: 12px; transition: box-shadow var(--t), border-color var(--t); }
html.sistema .piece-title-input:focus { outline: 0; border-color: var(--ac); box-shadow: var(--glow); }
html.sistema .status-step { border-radius: 999px; transition: box-shadow var(--t), transform var(--t), border-color var(--t); }
html.sistema .status-step:hover { box-shadow: var(--glow); border-color: var(--ac); transform: none; }
html.sistema .status-step.active { background: linear-gradient(135deg, var(--ac) 0%, color-mix(in srgb, var(--ac) 65%, var(--ac2)) 100%); border-color: transparent; transform: none; box-shadow: 0 8px 18px -8px var(--ac); }
html.sistema .channel-btn { border-radius: 12px; transition: box-shadow var(--t), transform var(--t), border-color var(--t); }
html.sistema .channel-btn:hover { box-shadow: var(--glow); }
html.sistema .channel-btn.active { border-color: var(--ac); background: var(--ac-suave); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ac) 18%, transparent); transform: none; }
/* Aurora: el editor sobre las luces, paneles de vidrio claro */
html.sistema[data-tema="aurora"] .estudio { background: transparent; }
html.sistema[data-tema="aurora"] .estudio .est-lado { background: rgba(255, 255, 255, .78); border-color: rgba(255, 255, 255, .9); }
html.sistema[data-tema="aurora"] .estudio .est-barra-arriba { background: rgba(255, 255, 255, .82); border-bottom-color: rgba(255, 255, 255, .9); }
html.sistema[data-tema="aurora"] .estudio .centro { background: transparent; }
html.sistema[data-tema="aurora"] .estudio .est-sec { background: rgba(255, 255, 255, .85); border-color: rgba(255, 255, 255, .95); }
html.sistema[data-tema="aurora"] .estudio .est-sec summary:hover { background: color-mix(in srgb, var(--ac) 10%, #fff); }
html.sistema[data-tema="aurora"] .estudio .est-tipos-caja, html.sistema[data-tema="aurora"] .estudio .est-menu-lista { background: rgba(255, 255, 255, .94); }
html.sistema[data-tema="aurora"] .piece-modal { background: rgba(255, 255, 255, .94); box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--ac), 0 0 0 6px color-mix(in srgb, var(--ac2) 60%, #fff), var(--sh-3); }
/* Papelería: papel, cinta y rosa */
html.sistema[data-tema="papeleria"] .estudio { background: #fbf3f0; }
html.sistema[data-tema="papeleria"] .estudio .est-lado { background: #fff; border-color: #f1d6e6; }
html.sistema[data-tema="papeleria"] .estudio .est-barra-arriba { background: #fff; border-bottom: 1.5px solid #f1d6e6; }
html.sistema[data-tema="papeleria"] .estudio .est-barra-arriba::after { height: 4px; background: repeating-linear-gradient(90deg, var(--amber) 0 14px, #f4d4ec 14px 28px, var(--ac) 28px 42px); opacity: .9; }
html.sistema[data-tema="papeleria"] .estudio .est-sec { border: 1.5px solid #f1d6e6; overflow: visible; }
html.sistema[data-tema="papeleria"] .estudio .est-sec::before { content: ''; position: absolute; top: -7px; left: 14px; width: 36px; height: 11px; background: color-mix(in srgb, var(--amber) 60%, transparent); transform: rotate(-6deg); border-radius: 2px; z-index: 1; pointer-events: none; }
html.sistema[data-tema="papeleria"] .estudio .est-sec { position: relative; }
html.sistema[data-tema="papeleria"] .estudio .est-tab.activa { box-shadow: inset 0 -2px 0 var(--ac); background: #f4d4ec; }
html.sistema[data-tema="papeleria"] .piece-modal { border: 1.5px solid #f1d6e6; box-shadow: 0 0 0 8px #fff, 0 0 0 9px #f4d4ec, 0 30px 70px -30px rgba(84, 5, 69, .6); overflow: visible; }
html.sistema[data-tema="papeleria"] .piece-modal::before { content: ''; position: absolute; top: -10px; left: 50%; width: 70px; height: 18px; margin-left: -35px; background: color-mix(in srgb, var(--amber) 55%, transparent); transform: rotate(-3deg); border-radius: 2px; }
html.sistema[data-tema="papeleria"] .status-step.active { background: #f4d4ec; color: var(--plum); box-shadow: 0 4px 12px -6px var(--plum); }
html.sistema[data-tema="papeleria"] .channel-btn.active { background: #fff3e3; border-color: var(--amber); }
/* Joya: el Estudio queda claro (está arriba); la ventana de la pieza va oscura con oro */
html.sistema[data-tema="joya"] .piece-modal { box-shadow: 0 0 0 1px rgba(231, 168, 62, .55), 0 0 50px -10px rgba(231, 168, 62, .45), 0 40px 70px -30px #000; }
html.sistema[data-tema="joya"] .piece-title-input { background: #22101f; color: #fff; border-color: rgba(231, 168, 62, .35); }
html.sistema[data-tema="joya"] .status-step { border-color: rgba(231, 168, 62, .3); color: #f3e9ee; }
html.sistema[data-tema="joya"] .status-step.active { background: linear-gradient(135deg, #e7a83e, #f6d27a); color: #2a0a25; }
html.sistema[data-tema="joya"] .channel-btn { border-color: rgba(231, 168, 62, .3); color: #f3e9ee; }
html.sistema[data-tema="joya"] .channel-btn.active { background: rgba(231, 168, 62, .18); border-color: #e7a83e; }
html.sistema[data-tema="joya"] #pieceCopyEditor, html.sistema[data-tema="joya"] .piece-modal [contenteditable] { background: #22101f; color: #f3e9ee; border-color: rgba(231, 168, 62, .3); }
html.sistema[data-tema="joya"] .piece-modal label, html.sistema[data-tema="joya"] .piece-modal .piece-section-label { color: #e7a83e; }