:root {
  --bg: var(--background-color);
  --card: var(--card-color);
  --muted: var(--text-muted);
  --text: var(--text-color);
  --accent: var(--accent-color);
  --bg-light: #ffffff;
      --bg-dark: #121212;
      --nav-light: #f8f9fa;
      --nav-dark: #1e1e1e;
      --text-light: #000000;
      
      --text-dark: #ffffff;
      --shadow-light: rgba(0, 0, 0, 0.1);
      --shadow-dark: rgba(255, 255, 255, 0.1);
          --color-texto-claro: #222222;
--color-texto-oscuro: #eeeeee;
--color-fondo-claro: #f5f7fa;
--color-fondo-oscuro: #121212;
--color-acento-claro: #0088cc;
--color-acento-oscuro: #00d8ff;
}
 
 body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial,sans-serif;background:var(--bg);color:var(--text);}
  .wrap{max-width:980px;margin:24px auto;padding:16px;}
  h2{font-size:1.5rem;margin:0 0 12px}
  .card{background:var(--card);border:1px solid rgba(255,255,255,.06);border-radius:16px;padding:16px 16px 12px;margin-bottom:16px;box-shadow:0 10px 30px rgba(0,0,0,.25)}
  .grid{display:grid;gap:12px}
  @media(min-width:760px){.grid{grid-template-columns:repeat(2,1fr)}}
  label{font-size:.9rem;margin-bottom:6px;display:block;color:var(--muted)}
  select,input{width:100%;padding:10px 12px;border-radius:10px;border:1px solid rgba(255,255,255,.08);background:#0f1626;color:var(--text-dark)}
  .row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
  .row > *{flex:1}
  .pill{display:inline-flex;gap:8px;align-items:center;background:#0f1626;border:1px solid rgba(255,255,255,.08);padding:8px 10px;border-radius:999px;color: var(--text-dark)}
  .muted{color:var(--muted);font-size:.9rem}
  .btn{cursor:pointer;border:0;background:#1a2540;color:var(--text-dark);padding:12px 16px;border-radius:12px;font-weight:700}
  .btn.secondary{background:#1a2540;color:var(--text-dark);border:1px solid rgba(255,255,255,.08)}
  .actions{display:flex;gap:10px;flex-wrap:wrap}
  .result{font-size:1.3rem;font-weight:800}
  .small{font-size:.85rem;color:var(--muted)}
  .hidden{display:none !important}
  .inline{display:inline-flex;gap:10px;align-items:center}
  .divider{height:1px;background:rgba(255,255,255,.08);margin:12px 0}
  .danger{color:#ff6b6b}
  .ok{color:#36d399}
  .loading{opacity:.7;pointer-events:none}