/* ============================================================ GN MOBILE SKIN — 10-ago-2026 Estética de la placa (violeta + tarjetas blancas + tiles pastel) SOLO en pantallas chicas. El escritorio queda EXACTAMENTE igual. Se carga como al final del : para volver atrás, se borra esa línea y listo (no toca el CSS del sistema). ============================================================ */ @media (max-width: 700px) { /* fondo general lila muy suave */ body, #app { background: #f3f0fb !important; } html[data-theme="dark"] body, html[data-theme="dark"] #app { background: #17102e !important; } /* ── topbar violeta con esquinas inferiores redondeadas ── */ #topbar { background: linear-gradient(120deg, #6C3EF5, #5330c2) !important; border-bottom: none !important; border-radius: 0 0 22px 22px !important; box-shadow: 0 10px 26px rgba(42, 23, 99, .25) !important; color: #fff !important; } #topbar #logo { border-right-color: rgba(255,255,255,.25) !important; } #topbar #logo-text { color: #fff !important; } #topbar #logo-text span { background: none !important; -webkit-text-fill-color: #fff !important; color: #fff !important; } #topbar .menu-btn, #topbar button, #topbar a { color: #fff !important; } #topbar svg { stroke: #fff; } /* ── tarjeta de saldos flotante ── */ .dash-saldos-strip, .bnk-top { background: #fff !important; border-radius: 20px !important; box-shadow: 0 10px 30px rgba(42, 23, 99, .10) !important; border: none !important; } html[data-theme="dark"] .dash-saldos-strip, html[data-theme="dark"] .bnk-top { background: #241a45 !important; box-shadow: 0 10px 30px rgba(0, 0, 0, .35) !important; } /* ── accesos rápidos como tiles de la placa ── */ #bru-actions.bru-actions { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 12px !important; } #bru-actions .bru-act { background: #fff !important; border: none !important; border-radius: 18px !important; box-shadow: 0 8px 22px rgba(42, 23, 99, .08) !important; padding: 16px 6px 13px !important; display: flex !important; flex-direction: column !important; align-items: center !important; gap: 8px !important; transition: transform .15s; } #bru-actions .bru-act:active { transform: scale(.96); } html[data-theme="dark"] #bru-actions .bru-act { background: #241a45 !important; box-shadow: 0 8px 22px rgba(0, 0, 0, .3) !important; } #bru-actions .bru-act-ic { width: 44px; height: 44px; border-radius: 14px; display: flex; align-items: center; justify-content: center; } #bru-actions .bru-act-ic svg { width: 20px; height: 20px; } /* pasteles por posición (misma paleta que la placa) */ #bru-actions .bru-act:nth-child(6n+1) .bru-act-ic { background: #eee8ff; color: #6C3EF5; } #bru-actions .bru-act:nth-child(6n+2) .bru-act-ic { background: #e6f0ff; color: #2f6fdd; } #bru-actions .bru-act:nth-child(6n+3) .bru-act-ic { background: #fdeee6; color: #d4652a; } #bru-actions .bru-act:nth-child(6n+4) .bru-act-ic { background: #e4f6ee; color: #118a56; } #bru-actions .bru-act:nth-child(6n+5) .bru-act-ic { background: #fdeaf2; color: #c33e79; } #bru-actions .bru-act:nth-child(6n) .bru-act-ic { background: #f0edf8; color: #5a4d85; } #bru-actions .bru-act-t { font-size: 12px !important; font-weight: 600 !important; color: #33265e !important; } html[data-theme="dark"] #bru-actions .bru-act-t { color: #d8ccff !important; } /* ── paneles redondeados suaves ── */ #page-dashboard .panel { border-radius: 20px !important; border: none !important; box-shadow: 0 8px 22px rgba(42, 23, 99, .08) !important; overflow: hidden; } html[data-theme="dark"] #page-dashboard .panel { box-shadow: 0 8px 22px rgba(0, 0, 0, .3) !important; } }