/* Manantial: capa de estilo sobre Bootstrap 5.3 (claro/oscuro con data-bs-theme). Paleta azul, responsive de 320 px a pantallas anchas. */
:root{
  --bs-primary:#2457d6; --bs-primary-rgb:36,87,214;
  --bs-link-color:#2457d6; --bs-link-hover-color:#1a43a8;
  --bs-body-bg:#eef3fb; --bs-body-color:#0c1b33; --bs-secondary-color:#566a86;
  --bs-border-color:#d5deec; --bs-tertiary-bg:#f1f5fc;
  --bs-font-sans-serif:'Instrument Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --bs-body-font-size:.95rem;
  --bs-border-radius:.85rem; --bs-border-radius-lg:1.1rem;
  --mt-display:'Bricolage Grotesque','Instrument Sans',system-ui,sans-serif;
  --mt-mono:'IBM Plex Mono',ui-monospace,Consolas,monospace;
  --mt-coin:#c25a14; --mt-glow1:rgba(36,87,214,.15); --mt-glow2:rgba(232,119,46,.11);
  --mt-surface:#fff; --mt-soft:#f1f5fc; --mt-track:#dbe5f5; --mt-shadow:0 18px 40px -26px rgba(12,27,51,.35);
  --mt-on-primary:#fff;
}
[data-bs-theme=dark]{
  --bs-primary:#6ea8ff; --bs-primary-rgb:110,168,255;
  --bs-link-color:#6ea8ff; --bs-link-hover-color:#9cc3ff;
  --bs-body-bg:#0a1424; --bs-body-color:#e8eefa; --bs-secondary-color:#92a6c6;
  --bs-border-color:#1f3558; --bs-tertiary-bg:#132440;
  --mt-coin:#ffb067; --mt-glow1:rgba(110,168,255,.12); --mt-glow2:rgba(255,176,103,.07);
  --mt-surface:#0f1d33; --mt-soft:#132440; --mt-track:#1c3358; --mt-shadow:0 18px 40px -26px rgba(0,0,0,.7);
  --mt-on-primary:#07182f;
}
body{
  background:radial-gradient(900px 480px at 8% -8%,var(--mt-glow1),transparent 70%),radial-gradient(760px 420px at 100% 0,var(--mt-glow2),transparent 70%),var(--bs-body-bg);
  background-attachment:fixed;
  padding-left:env(safe-area-inset-left,0px);padding-right:env(safe-area-inset-right,0px);
  overflow-x:hidden;
}
h1,h2,h3,h4,h5,.display-font{font-family:var(--mt-display);letter-spacing:-.02em;text-wrap:balance}
.mono{font-family:var(--mt-mono);font-variant-numeric:tabular-nums}
.btn-primary{--bs-btn-bg:var(--bs-primary);--bs-btn-border-color:var(--bs-primary);--bs-btn-hover-bg:color-mix(in srgb,var(--bs-primary) 86%,#000);--bs-btn-hover-border-color:color-mix(in srgb,var(--bs-primary) 86%,#000);--bs-btn-active-bg:color-mix(in srgb,var(--bs-primary) 80%,#000);--bs-btn-active-border-color:color-mix(in srgb,var(--bs-primary) 80%,#000);--bs-btn-color:var(--mt-on-primary);--bs-btn-hover-color:var(--mt-on-primary);--bs-btn-active-color:var(--mt-on-primary);--bs-btn-disabled-bg:var(--mt-track);--bs-btn-disabled-border-color:var(--mt-track);--bs-btn-disabled-color:var(--bs-secondary-color);--bs-btn-disabled-opacity:1;font-weight:600}
.form-control,.form-select,.input-group-text{background-color:var(--mt-soft);border-color:var(--bs-border-color);color:var(--bs-body-color)}
.form-control:focus,.form-select:focus,.btn:focus-visible,.btn-check:focus-visible+.btn{border-color:var(--bs-primary);box-shadow:0 0 0 .2rem rgba(var(--bs-primary-rgb),.25)}
.dropdown-menu{--bs-dropdown-bg:var(--mt-surface);--bs-dropdown-border-color:var(--bs-border-color);--bs-dropdown-link-hover-bg:var(--mt-soft);--bs-dropdown-color:var(--bs-body-color);--bs-dropdown-link-color:var(--bs-body-color);--bs-dropdown-header-color:var(--bs-secondary-color);--bs-dropdown-divider-bg:var(--bs-border-color)}

/* barra superior */
.mt-nav{background:color-mix(in srgb,var(--bs-body-bg) 94%,transparent);backdrop-filter:blur(12px);padding-top:max(.5rem,env(safe-area-inset-top,0px))}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--bs-body-color)}
.brand svg{width:34px;height:34px}
.brand b{font-family:var(--mt-display);font-size:1.45rem;font-weight:700;letter-spacing:-.03em}
.btn-icon{width:38px;height:38px;display:inline-grid;place-items:center;border-radius:50%;border:1px solid var(--bs-border-color);background:var(--mt-surface);color:var(--bs-body-color)}
.btn-icon:hover{border-color:var(--bs-primary);color:var(--bs-primary)}
.user-chip{display:flex;align-items:center;gap:.55rem;padding:.25rem .8rem .25rem .3rem;border:1px solid var(--bs-border-color);border-radius:999px;background:var(--mt-surface);color:var(--bs-body-color)}
.user-chip .av{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:.8rem;background:var(--bs-primary);color:var(--mt-on-primary)}

/* tarjetas */
.mt-card{background:var(--mt-surface);border:1px solid var(--bs-border-color);border-radius:var(--bs-border-radius-lg);box-shadow:var(--mt-shadow);min-width:0}
.eyebrow{font-size:.72rem;text-transform:uppercase;letter-spacing:.14em;color:var(--bs-secondary-color)}

/* anuncios */
.ad{margin:0 auto;max-width:100%;display:flex;justify-content:center;flex-wrap:wrap;text-align:center;overflow:hidden}
.ad:empty{display:none}

/* entrada: una columna en móvil (titular, formulario, detalles) y dos en pantallas anchas */
.landing{display:grid;gap:1.5rem 3rem;grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "form" "extra";align-items:start;padding-block:.5rem}
.l-head{grid-area:head}.l-form{grid-area:form}.l-extra{grid-area:extra}
@media(min-width:992px){.landing{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);grid-template-areas:"head form" "extra form";padding-block:1.5rem}}
.hero h1{font-size:clamp(2.05rem,6.5vw,3.6rem);line-height:1.03;font-weight:700}
.hero h1 em{font-style:normal;color:var(--mt-coin)}
.feat{display:flex;gap:.75rem;align-items:flex-start}
.feat i{flex:none;width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:rgba(var(--bs-primary-rgb),.13);color:var(--bs-primary);font-size:1.1rem}
.stat-pill{display:flex;flex-direction:column;padding:.7rem 1rem;border:1px solid var(--bs-border-color);border-radius:var(--bs-border-radius);background:var(--mt-surface);min-width:120px}
.stat-pill b{font-family:var(--mt-display);font-size:1.3rem;font-variant-numeric:tabular-nums}
.stat-pill span{font-size:.74rem;color:var(--bs-secondary-color)}

/* reclamo */
.claim-top{display:flex;gap:1.1rem;align-items:center;justify-content:space-between;flex-wrap:nowrap;padding:1.4rem 1.5rem;background:linear-gradient(180deg,var(--mt-soft),var(--mt-surface));border-radius:var(--bs-border-radius-lg) var(--bs-border-radius-lg) 0 0}
.reward-big{font-family:var(--mt-display);font-weight:700;font-size:clamp(1.6rem,4.2vw,2.3rem);line-height:1.05;letter-spacing:-.03em;color:var(--mt-coin);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.reward-big small{font-size:.45em;margin-left:.4rem;color:var(--bs-body-color);letter-spacing:0}
.ring{position:relative;width:112px;height:112px;flex:none}
.ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.ring .bg{stroke:var(--mt-track)}
.ring .fg{stroke:var(--bs-primary);stroke-linecap:round;transition:stroke-dashoffset .9s linear,stroke .3s}
.ring.ready .fg{stroke:var(--mt-coin)}
.ring .tx{position:absolute;inset:0;display:grid;place-content:center;text-align:center;line-height:1.1}
.ring .tx b{font-family:var(--mt-display);font-size:1.4rem;font-variant-numeric:tabular-nums}
.ring .tx span{font-size:.7rem;color:var(--bs-secondary-color)}
.coin-pill{display:flex;flex-direction:column;align-items:flex-start;min-width:96px;padding:.5rem .85rem;border:1px solid var(--bs-border-color);background:var(--mt-soft);border-radius:.9rem;line-height:1.2;text-align:left;color:var(--bs-body-color)}
.coin-pill b{font-family:var(--mt-display)}
.coin-pill small{color:var(--bs-secondary-color);font-family:var(--mt-mono);font-size:.74rem}
.btn-check:checked+.coin-pill{border-color:var(--bs-primary);background:var(--mt-surface);box-shadow:0 0 0 2px var(--bs-primary) inset;color:var(--bs-body-color)}
.coin-pill:hover{border-color:var(--bs-primary);color:var(--bs-body-color)}
.up{color:#0d8559}.down{color:#c42626}
[data-bs-theme=dark] .up{color:#3fd69b}[data-bs-theme=dark] .down{color:#ff7b7b}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.kpi{padding:1rem 1.1rem}
.kpi .v{font-family:var(--mt-display);font-weight:700;font-size:1.6rem;font-variant-numeric:tabular-nums;line-height:1.1}
.kpi .l{font-size:.74rem;color:var(--bs-secondary-color);text-transform:uppercase;letter-spacing:.08em}
.kpi i{font-size:1.25rem;color:var(--bs-primary)}
.table{--bs-table-bg:transparent;--bs-table-color:var(--bs-body-color);--bs-table-border-color:var(--bs-border-color);font-size:.88rem}
.table th{font-weight:500;font-size:.72rem;text-transform:uppercase;letter-spacing:.07em;color:var(--bs-secondary-color)}

/* ---------- responsive ---------- */
/* móvil */
@media (max-width:575.98px){
  .mt-nav{position:static}
  .brand b{font-size:1.25rem}.brand svg{width:30px;height:30px}
  .mt-card.p-4,.mt-card .p-4{padding:1.1rem!important}
  .claim-top{flex-wrap:wrap;justify-content:center;text-align:center;padding:1.1rem}
  .claim-top>div:first-child{flex:1 1 100%}
  .ring{width:100px;height:100px}.ring .tx b{font-size:1.2rem}
  .stat-pill{flex:1 1 0;min-width:0;padding:.6rem .75rem}.stat-pill b{font-size:1.15rem}
  .coin-pill{flex:1 1 calc(50% - .5rem);min-width:0}
  .kpi{padding:.85rem}.kpi .v{font-size:1.35rem}
  .btn-lg{padding:.85rem 1rem}
  .table{font-size:.82rem}
}
/* tablet */
@media (min-width:576px) and (max-width:991.98px){
  .claim-top{padding:1.3rem 1.6rem}
  .ring{width:120px;height:120px}
}
/* pantallas táctiles: objetivos de al menos 44 px */
@media (pointer:coarse){
  .btn-icon{width:44px;height:44px}
  .user-chip{min-height:44px}
  .coin-pill{min-height:52px}
}
@media (prefers-reduced-motion:reduce){.ring .fg{transition:none}}

/* ---------- Capa moderna: ticker, racha semanal, estados animados, barra inferior, avisos ---------- */
.min-w-0{min-width:0}
.mt-card{background:color-mix(in srgb,var(--mt-surface) 90%,transparent);backdrop-filter:blur(10px)}
.claim.mt-card{position:relative}
.kpi{transition:transform .2s ease,border-color .2s ease}
@media (hover:hover){.kpi:hover{transform:translateY(-2px);border-color:var(--bs-primary)}}

/* ticker de últimos pagos */
.ticker{overflow:hidden;border-bottom:1px solid var(--bs-border-color);background:color-mix(in srgb,var(--mt-surface) 72%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.ticker-track{display:flex;width:max-content;animation:tk 60s linear infinite}
.ticker:hover .ticker-track{animation-play-state:paused}
.tk-half{display:flex;gap:2.2rem;padding:.5rem 1.1rem}
.tk{display:inline-flex;align-items:center;gap:.4rem;white-space:nowrap;font-size:.8rem;color:var(--bs-secondary-color)}
.tk i{color:#0d8559}
[data-bs-theme=dark] .tk i{color:#3fd69b}
.tk b{color:var(--bs-body-color);font-weight:500}
.tk em{font-style:normal;opacity:.7}
@keyframes tk{to{transform:translateX(-50%)}}

/* racha semanal */
.week-dots{display:grid;grid-template-columns:repeat(7,1fr);gap:.35rem;margin:.7rem 0 .9rem}
.wd{display:flex;flex-direction:column;align-items:center;gap:.25rem;font-size:.7rem;color:var(--bs-secondary-color)}
.wd .dot{width:100%;max-width:36px;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;border:2px dashed var(--bs-border-color);font-size:1rem;color:var(--mt-on-primary)}
.wd.done .dot{background:var(--bs-primary);border:2px solid var(--bs-primary)}
.wd.today .dot{border-color:var(--mt-coin)}
.wd.today:not(.done) .dot{animation:pulse 2s ease-in-out infinite}
.wd.today .dn{color:var(--bs-body-color);font-weight:600}
.meter{height:8px;border-radius:99px;background:var(--mt-track);overflow:hidden}
.meter>i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--bs-primary),var(--mt-coin));transition:width .6s ease}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(194,90,20,0)}50%{box-shadow:0 0 0 6px rgba(194,90,20,.18)}}

/* estado listo: el botón y el anillo llaman la atención */
#btn:not(:disabled){animation:glow 2.4s ease-in-out infinite}
@keyframes glow{0%,100%{box-shadow:0 0 0 0 rgba(var(--bs-primary-rgb),0)}50%{box-shadow:0 0 0 .5rem rgba(var(--bs-primary-rgb),.18)}}
.ring.ready{animation:readyPop .5s ease-out}
@keyframes readyPop{0%{transform:scale(.94)}60%{transform:scale(1.05)}100%{transform:scale(1)}}

/* lluvia de monedas */
.coin-fx{position:absolute;left:50%;top:50%;width:11px;height:11px;border-radius:50%;background:var(--mt-coin);box-shadow:inset -2px -2px 0 rgba(0,0,0,.2);pointer-events:none;opacity:0;animation:fx 1.05s cubic-bezier(.2,.7,.3,1) forwards}
@keyframes fx{0%{opacity:1;transform:translate(-50%,-50%) scale(.4)}20%{opacity:1}100%{opacity:0;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) rotate(var(--r)) scale(1)}}

/* avisos (reemplazan a los cuadros fijos) */
.mt-toasts{position:fixed;z-index:1090;display:grid;gap:.5rem;pointer-events:none;right:max(1rem,env(safe-area-inset-right,0px));bottom:max(1rem,env(safe-area-inset-bottom,0px));width:min(380px,calc(100vw - 2rem))}
.mt-toast{display:flex;gap:.6rem;align-items:flex-start;padding:.75rem 1rem;border:1px solid var(--bs-border-color);border-left:4px solid var(--bs-primary);border-radius:var(--bs-border-radius);background:var(--mt-surface);box-shadow:var(--mt-shadow);pointer-events:auto;opacity:0;transform:translateY(12px);transition:opacity .25s,transform .25s}
.mt-toast.in{opacity:1;transform:none}
.mt-toast.ok{border-left-color:#0d8559}.mt-toast.ok i{color:#0d8559}
.mt-toast.err{border-left-color:#c42626}.mt-toast.err i{color:#c42626}
[data-bs-theme=dark] .mt-toast.ok i{color:#3fd69b}[data-bs-theme=dark] .mt-toast.err i{color:#ff7b7b}

/* barra inferior en móvil */
.dock{position:fixed;left:0;right:0;bottom:0;z-index:1030;padding:.6rem max(.9rem,env(safe-area-inset-right,0px)) calc(.6rem + env(safe-area-inset-bottom,0px)) max(.9rem,env(safe-area-inset-left,0px));background:color-mix(in srgb,var(--mt-surface) 94%,transparent);backdrop-filter:blur(12px);border-top:1px solid var(--bs-border-color);transform:translateY(110%);transition:transform .3s ease}
.dock.show{transform:none}
.dock-in{display:flex;align-items:center;justify-content:space-between;gap:.8rem;max-width:720px;margin:0 auto}
.dock-in b{font-size:1.05rem;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--mt-coin)}
.dock .btn{min-width:130px}
@media (min-width:992px){.dock{display:none}}
body.has-dock{padding-bottom:0}
@media (max-width:991.98px){body.has-dock{padding-bottom:4.8rem}.mt-toasts{left:50%;right:auto;transform:translateX(-50%);bottom:calc(5.4rem + env(safe-area-inset-bottom,0px))}}

/* preguntas frecuentes */
.faq{display:grid;gap:.5rem}
.faq details{border:1px solid var(--bs-border-color);border-radius:var(--bs-border-radius);background:color-mix(in srgb,var(--mt-surface) 90%,transparent);padding:.15rem 1rem}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.7rem 0;font-weight:500}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:.55rem;height:.55rem;border-right:2px solid var(--bs-secondary-color);border-bottom:2px solid var(--bs-secondary-color);transform:rotate(45deg);transition:transform .2s}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq p{margin:0 0 .8rem;color:var(--bs-secondary-color)}

@media (prefers-reduced-motion:reduce){
  .ticker-track{animation:none}.ticker{overflow-x:auto;-webkit-mask-image:none;mask-image:none}
  #btn:not(:disabled),.ring.ready,.wd.today:not(.done) .dot{animation:none}
  .dock,.mt-toast,.meter>i,.kpi{transition:none}
}