/* Diseño de pantalla V10 · apariencia 1.1; independiente de la versión del producto. */
:root{color-scheme:dark;--evo-bg:#081735;--evo-ink:#f4f7ff;--evo-muted:#b7c9e4;--evo-panel:#1b3457;--evo-field:#122744;--evo-border:#6d91be;--evo-button:#20395d;--evo-hover:#305082;--evo-accent:#91f4ca;--evo-pink:#ffa3d6}
:root[data-theme=light]{color-scheme:light;--evo-bg:#f0f5fd;--evo-ink:#193453;--evo-muted:#4b6380;--evo-panel:#f8fbff;--evo-field:#fff;--evo-border:#9db8d8;--evo-button:#eaf2ff;--evo-hover:#d9e8ff;--evo-accent:#215d50;--evo-pink:#97366f}
body:not(.overlay){background:var(--evo-bg);background-image:radial-gradient(ellipse at 95% 5%,#cd79b418,transparent 50%);color:var(--evo-ink)}
button,a.button{background:var(--evo-button);color:var(--evo-ink);border-color:var(--evo-border)}
button:hover,a.button:hover{background:var(--evo-hover)}
button:focus-visible,a:focus-visible{outline-color:#598ee9}
.primary{background:linear-gradient(120deg,#92ebd0,#77ddba)!important;color:#123f37!important}
.danger{background:#6f2943;color:#ffe6ed;border-color:#da88a5}
input,select,textarea{background:var(--evo-field);color:var(--evo-ink);border-color:var(--evo-border)}
small,.muted,footer,.hero p{color:var(--evo-muted)}
header,.tag{border-color:var(--evo-border)}
.brand b,.eyebrow{color:var(--evo-accent)}
.panel,dialog{background:var(--evo-panel);color:var(--evo-ink);border-color:var(--evo-border)}
.preview{background:linear-gradient(135deg,#cfe7ff,#f2d7ed);color:#234369}
.preview .card{background:#f4faff;color:#234369}
.touchpad{background:radial-gradient(#6f95ba55 1px,transparent 1px) 0 0/20px 20px,var(--evo-field);color:var(--evo-muted);border-color:var(--evo-border)}
.steps button.active{background:#305c97;color:white;border-color:#aac9ed}
#keyboardPanel{border-color:var(--evo-pink)}
#toast{background:#244e80;color:white}
.appearance{display:flex;gap:4px;flex-wrap:wrap;border:1px solid var(--evo-border);border-radius:15px;padding:4px}
.appearance button{background:transparent;border:0;padding:7px 12px;min-height:44px;font-size:16px}
.appearance button[aria-pressed=true]{background:#3266cc;color:white}
header>.row{justify-content:flex-end}
@media(max-width:700px){header{flex-wrap:wrap}header>.row{justify-content:flex-start}.appearance{max-width:100%}}
