/* =======================================================
   Estilos globales, alto contraste y dorado corporativo.
   ======================================================= */
:root {
  --bg:#f7f7f8;          /* fondo neutro */
  --fg:#1b1b1f;          /* texto */
  --card:#fff;           /* tarjetas */
  --muted:#5c5f66;       /* texto secundario */
  --accent:#c89246;       /* DORADO corporativo */
  --border:#e4e5e7;      /* bordes suaves */
}
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color: var(--fg); font:18px/1.6 system-ui, -apple-system, Segoe UI, Roboto, Arial; }
.container { max-width: 1140px; margin: 0 auto; padding: 24px; }
.header { margin-bottom: 12px; }
h1 { font-size: 28px; margin: 0 0 6px; }
.lead { color: var(--muted); margin-top: 0; }
.card { background: var(--card); border:1px solid var(--border); border-radius: 16px; padding: 18px; }
.grid { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media(min-width:980px){ .grid { grid-template-columns: 1fr 1fr; } }
label { display:block; font-weight:700; margin:10px 0 6px; }
input[type="text"], input[type="number"], select { width:100%; padding:12px 14px; border:1px solid var(--border); border-radius:12px; font-size:18px; }
.tabbar { display:flex; gap:8px; margin:12px 0; flex-wrap:wrap; }
.tab { padding:10px 14px; border:1px solid var(--border); border-radius:10px; background:#fff; cursor:pointer; }
.tab.active { background: var(--accent); color:#fff; border-color: var(--accent); }
.hidden { display:none; }
.btnbar { display:flex; gap:10px; margin-top: 12px; flex-wrap: wrap; }
button { padding: 12px 18px; border:0; border-radius: 12px; font-size: 18px; cursor:pointer; }
button.primary { background: var(--accent); color: #fff; }
button.secondary { background: #ece6df; color:#503a1f; }
.result { min-height: 132px; }
.result .big { font-size: 30px; }
.result .sub { color: var(--muted); }
.result .result-placeholder { color: var(--muted); }
.kbd { display:flex; flex-wrap:wrap; gap:8px; }
.kbd kbd.key { display:inline-block; border:1px solid var(--border); border-radius:10px; padding:10px 13px; min-width:44px; text-align:center; font-size:20px; background:#fff; cursor:pointer; }
.kbd kbd.key:hover { background:#fff8f0; border-color: var(--accent); }
.kbd kbd.key:active { background:#f0f0f0; }
.kbd-input { margin-top:8px; }
.tips { margin-top: 12px; }
.tips-content { color: var(--muted); }
.footer { margin-top: 14px; color: var(--muted); }

/* Selector de sistemas en 2 columnas responsivas */
.system-grid { display:grid; grid-template-columns: 1fr; gap:10px; }
@media(min-width:720px){ .system-grid { grid-template-columns: 1fr 1fr; } }
.sys { display:flex; align-items:center; gap:10px; border:1px solid var(--border); border-radius:12px; padding:10px; background:#fff; }
.sys input[type="radio"] { width:20px; height:20px; accent-color: var(--accent); }
.sys span { font-weight:600; }

/* FIX: evitar que CSS global (Bootstrap / sitio) deje las teclas "vacías" */
.kbd kbd.key{
  color: var(--fg) !important;
  font-size: 20px !important;
  line-height: 1.2 !important;
  opacity: 1 !important;
  text-shadow: none !important;
}