:root{
	--brand:#ffd100; /* amarillo */
	--brand-700:#e0b900;
	--ink:#1a1a1a;
	--muted:#6b7280;
	--surface:#ffffff;
	--bg:#f3f4f6;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
	margin:0;
	font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
	color:var(--ink);
	background:var(--bg);
}
.page-wrap{min-height:100%;display:flex;flex-direction:column}
.brand{display:flex;justify-content:center;padding:24px 0}
.brand__logo{color:#000;font-weight:800;padding:10px 16px;border-radius:999px;background:transparent !important}
.bottom-nav{position:fixed;left:0;right:0;bottom:0;background:rgba(255,209,0,.25);backdrop-filter:saturate(150%) blur(6px);border-top:1px solid rgba(0,0,0,.05)}
.bottom-nav__inner{display:flex;gap:8px;justify-content:space-around;padding:10px 12px}
.tab{display:flex;flex-direction:column;align-items:center;gap:6px;color:#4b5563;text-decoration:none;font-weight:600}
.tab--active{color:#000}
.hero{background:#f3e89a;border-radius:16px;padding:16px;margin-bottom:16px}
.balance{font-size:32px;font-weight:800;color:#4c1d95}
.container{flex:1;display:flex;align-items:center;justify-content:center;padding:24px}

.card{
	width:100%;
	max-width:420px;
	background:var(--surface);
	border-radius:24px;
	box-shadow:0 10px 25px rgba(0,0,0,.08);
	padding:28px;
}
.title{font-size:22px;font-weight:700;margin:0 0 16px}
.field{margin:14px 0}
.label{font-weight:700;margin:0 0 8px;display:block}
.input{
	width:100%;
	padding:16px 14px;
	border:1px solid #e5e7eb;
	border-radius:16px;
	background:#fafafa;
	font-size:16px;
	outline:none;
}
.input:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(255,209,0,.25)}
.actions{margin-top:18px}
.btn{
	width:100%;
	background:var(--brand);
	color:#000;
	border:0;
	font-weight:700;
	padding:16px;
	border-radius:999px;
	cursor:pointer;
	font-size:16px;
}
.btn:hover{background:var(--brand-700)}
.muted{color:var(--muted);font-size:14px;text-align:center;margin-top:14px}
.muted a{color:#7c3aed;text-decoration:none;font-weight:600}
.quick-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:16px 0}
.qa{
	background:#fff;border:1px solid #e5e7eb;border-radius:16px;padding:20px;display:flex;flex-direction:column;align-items:center;gap:10px;font-weight:700;color:#4b5563;text-decoration:none
}
.records{margin-top:16px;display:flex;flex-direction:column;gap:12px}
.record{background:#fff;border-radius:16px;box-shadow:0 1px 0 rgba(0,0,0,.04);overflow:hidden;border:1px solid #e5e7eb}
.record__head{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;font-weight:700;color:#fff}
.record--success .record__head{background:#22c55e}
.record--failed .record__head{background:#ef4444}
.record__body{padding:14px;color:#111}
.chip{font-weight:800}
.modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;padding:16px;z-index:50}
.modal--open{display:flex}
.modal__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.45)}
.modal__dialog{position:relative;background:#fff;border-radius:20px;max-width:560px;width:100%;padding:20px;box-shadow:0 25px 60px rgba(0,0,0,.25)}
.modal__title{font-size:18px;font-weight:800;margin:0 0 8px}
.modal .input{background:#fff}
.modal__close{position:absolute;right:12px;top:12px;background:transparent;border:0;font-size:22px;cursor:pointer}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}

/* Logo sin fondo */
.brand__logo img {
	background: transparent !important;
}