/* ============================================================
   Alke Wallet — estilos compartidos por las 5 pantallas.
   Dark mode via [data-theme="dark"] en <html> (sin flash de tema).
   ============================================================ */
:root{ --accent:#2f6df6; --muted:#6b7385; --line:#e9edf4; --green:#1f9d57; --red:#e0533d; }

body{
  font-family:'Inter', system-ui, sans-serif; background:#eef1f6; color:#1a2233; margin:0;
  min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px;
}
.app{
  width:100%; max-width:410px; background:#fff; border-radius:22px;
  box-shadow:0 18px 50px rgba(20,30,60,.12); overflow:hidden;
}
.app-top{ display:flex; align-items:center; gap:12px; padding:16px 22px; border-bottom:1px solid var(--line); }
.app-top a{ color:#1a2233; font-size:1.2rem; text-decoration:none; }
.app-top .ttl{ font-weight:700; }
.app-body{ padding:22px; }

.brand{ font-weight:700; letter-spacing:-.3px; }
.brand span{ color:var(--accent); }

.lbl{ font-weight:500; font-size:.86rem; color:var(--muted); margin-bottom:6px; }
.form-control:focus{ border-color:var(--accent); box-shadow:0 0 0 .2rem rgba(47,109,246,.15); }

.balance{ background:linear-gradient(135deg,#13315c,#1c4a8a); color:#fff;
          border-radius:16px; padding:20px; margin-bottom:20px; }
.balance small{ opacity:.85; }
.balance .amount{ font-size:1.9rem; font-weight:700; letter-spacing:-.5px; }

.btn-accent{ background:var(--accent); color:#fff; border-radius:12px; font-weight:600; border:none; }
.btn-accent:hover{ background:#2459d6; color:#fff; }

.menu-btn{ display:flex; align-items:center; gap:14px; text-align:left; width:100%;
           background:#f6f8fc; border:1px solid var(--line); color:#1a2233; border-radius:13px;
           padding:14px 16px; font-weight:600; margin-bottom:10px; cursor:pointer; transition:background .15s; }
.menu-btn:hover{ background:#eef2fb; }
.chev{ margin-left:auto; color:var(--muted); }

#redir-msg{ display:none; text-align:center; padding:10px 14px; border-radius:10px;
            background:#e7eefc; color:var(--accent); font-weight:600; font-size:.9rem; margin-top:8px; }

.chips{ display:flex; gap:8px; margin:14px 0 18px; }
.chip{ flex:1; text-align:center; background:#f6f8fc; border:1px solid var(--line); border-radius:10px;
       padding:9px 0; font-size:.85rem; cursor:pointer; transition:.15s; }
.chip:hover{ background:#e7eefc; border-color:var(--accent); color:var(--accent); font-weight:600; }

.saldo-actual{ background:#f6f8fc; border-radius:12px; padding:11px 16px; margin:14px 0;
               font-size:.9rem; color:var(--muted); }
.saldo-actual strong{ color:#1a2233; }

/* Contactos (enviar dinero) */
.contact{ display:flex; align-items:center; gap:12px; padding:11px 8px; border-bottom:1px solid var(--line);
          cursor:pointer; border-radius:8px; transition:background .12s; }
.contact:hover{ background:#f6f8fc; }
.contact.selected{ background:#e7eefc; }
.av{ width:40px; height:40px; border-radius:50%; background:#e7eefc; color:var(--accent);
     flex-shrink:0; display:flex; align-items:center; justify-content:center; font-weight:700; }
.contact .meta{ font-size:.8rem; color:var(--muted); }

/* Movimientos (transactions) */
.tx{ display:flex; align-items:center; gap:13px; padding:13px 0; border-bottom:1px solid var(--line); }
.tx-ic{ width:40px; height:40px; border-radius:12px; flex-shrink:0; display:flex; align-items:center;
        justify-content:center; font-size:1.1rem; }
.tx-ic.in{ background:#e6f6ec; color:var(--green); }
.tx-ic.out{ background:#fdecea; color:var(--red); }
.tx .desc{ font-weight:600; }
.tx .date{ color:var(--muted); font-size:.8rem; }
.tx .amt{ margin-left:auto; font-weight:700; white-space:nowrap; }
.tx .amt.pos{ color:var(--green); }
.tx .amt.neg{ color:var(--red); }

.empty-state{ text-align:center; color:var(--muted); padding:28px 0; font-size:.92rem; }
.hint{ background:#fffbe6; border:1px solid #ffe58f; border-radius:10px; padding:10px 14px;
       font-size:.82rem; color:#876800; margin-bottom:16px; }
.leyenda{ display:none; margin-top:12px; padding:10px 14px; border-radius:10px; background:#f6f8fc;
          color:var(--muted); font-size:.88rem; text-align:center; }

/* ============================================================
   DARK MODE — activado con data-theme="dark" en <html>.
   Se usa un atributo en <html> (no en <body>) para poder aplicarlo
   antes del primer paint y evitar el "flash" de tema incorrecto.
   ============================================================ */
[data-theme="dark"] body { background:#0d1117; color:#e6edf3; }
[data-theme="dark"] .app { background:#161b27; box-shadow:0 18px 50px rgba(0,0,0,.5); }
[data-theme="dark"] .app-top { border-color:#21273a; }
[data-theme="dark"] .app-top a { color:#e6edf3; }
[data-theme="dark"] h4,[data-theme="dark"] h5 { color:#e6edf3; }
[data-theme="dark"] .text-muted { color:#8d96a7 !important; }
[data-theme="dark"] .form-control { background:#21273a; border-color:#30384d; color:#e6edf3; }
[data-theme="dark"] .form-control::placeholder { color:#4d5668; }
[data-theme="dark"] .form-control:focus { background:#21273a; color:#e6edf3; border-color:#4d8aff; box-shadow:0 0 0 .2rem rgba(77,138,255,.2); }
[data-theme="dark"] .input-group-text { background:#21273a; border-color:#30384d; color:#8d96a7; }
[data-theme="dark"] select.form-control option { background:#161b27; }
[data-theme="dark"] .menu-btn { background:#21273a; border-color:#30384d; color:#e6edf3; }
[data-theme="dark"] .menu-btn:hover { background:#29304a; }
[data-theme="dark"] .saldo-actual { background:#21273a; color:#8d96a7; }
[data-theme="dark"] .saldo-actual strong { color:#e6edf3; }
[data-theme="dark"] .chip { background:#21273a; border-color:#30384d; color:#e6edf3; }
[data-theme="dark"] .chip:hover { background:#1e2d4a; border-color:#4d8aff; color:#4d8aff; }
[data-theme="dark"] .contact { border-color:#21273a; }
[data-theme="dark"] .contact:hover { background:#21273a; }
[data-theme="dark"] .contact.selected { background:#1e2d4a; }
[data-theme="dark"] .av { background:#1e2d4a; color:#4d8aff; }
[data-theme="dark"] .tx { border-color:#21273a; }
[data-theme="dark"] .tx .desc { color:#e6edf3; }
[data-theme="dark"] .leyenda { background:#21273a; color:#8d96a7; }
[data-theme="dark"] #redir-msg { background:#1e2d4a; color:#4d8aff; }
[data-theme="dark"] .hint { background:#261e00; border-color:#5a4500; color:#d4a100; }
[data-theme="dark"] .btn-light { background:#21273a; border-color:#30384d; color:#e6edf3; }
[data-theme="dark"] .btn-light:hover { background:#29304a; color:#e6edf3; }
[data-theme="dark"] .btn-accent { background:#4d8aff; }
[data-theme="dark"] .btn-accent:hover { background:#3a74e8; }
[data-theme="dark"] .empty-state { color:#8d96a7; }
[data-theme="dark"] .progress { background:#21273a; }
[data-theme="dark"] .movs-resumen .small { color:#8d96a7; }

/* Botón de toggle claro/oscuro */
.theme-btn {
  margin-left:auto; background:none; border:none; cursor:pointer;
  font-size:1.15rem; padding:4px 8px; border-radius:8px;
  line-height:1; transition:background .15s;
}
.theme-btn:hover { background:rgba(47,109,246,.1); }
[data-theme="dark"] .theme-btn:hover { background:rgba(77,138,255,.15); }