/* Base compartida: interfaz rápida, de pocos toques y alto contraste para uso en barra */
* { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --fondo: #12151a; --panel: #1c2129; --panel2: #262d38; --borde: #39424f;
  --texto: #eef1f5; --texto2: #9aa5b1; --acento: #2f81f7; --ok: #2ea55f;
  --aviso: #d29922; --peligro: #e5534b; --morado: #8957e5;
}
* { -webkit-tap-highlight-color: transparent; }
body { font-family: system-ui, -apple-system, sans-serif; background: var(--fondo); color: var(--texto); min-height: 100vh; min-height: 100dvh; }
button { font: inherit; border: none; border-radius: 10px; cursor: pointer; padding: 12px 16px; background: var(--panel2); color: var(--texto); touch-action: manipulation; min-height: 44px; }
button:active { transform: scale(.97); }
button.primario { background: var(--acento); color: #fff; font-weight: 600; }
button.ok { background: var(--ok); color: #fff; font-weight: 600; }
button.peligro { background: var(--peligro); color: #fff; }
input, select, textarea { font: inherit; font-size: max(16px, 1em); background: var(--panel2); color: var(--texto); border: 1px solid var(--borde); border-radius: 8px; padding: 10px; width: 100%; }
.tarjeta { background: var(--panel); border: 1px solid var(--borde); border-radius: 14px; padding: 16px; }
.fila { display: flex; gap: 10px; align-items: center; }
.crece { flex: 1; }
.oculto { display: none !important; }
.muted { color: var(--texto2); font-size: .9em; }
#toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background: var(--panel2); border: 1px solid var(--borde); padding: 12px 20px; border-radius: 10px; z-index: 99; transition: opacity .3s; opacity: 0; pointer-events: none; max-width: 90vw; }
#toast.visible { opacity: 1; }
#toast.error { border-color: var(--peligro); color: #ffb3ae; }