/* ============================================================
   MelateIA — App web (rediseño jul/2026)
   CSS copiado tal cual del mockup aprobado (MELATEIA-DISENO).
   Este es el diseño nuevo; aquí solo se conecta al backend.
   ============================================================ */

@font-face { font-family:'Fredoka'; font-style:normal; font-weight:300 700; font-display:swap;
  src:url('fredoka.woff2') format('woff2'); }
@font-face { font-family:'Outfit'; font-style:normal; font-weight:100 900; font-display:swap;
  src:url('outfit.woff2') format('woff2'); }

:root {
  --noche:#101433; --noche-2:#181D42; --noche-3:#222859; --papel:#F3F5FB;
  --oro:#F2B233; --oro-tinta:#9A6A10;
  --bg:var(--noche); --bg-raise:var(--noche-2); --bg-raise-2:var(--noche-3);
  --ink:#EEF0FA; --ink-2:#A9AFCE; --ink-3:#6E749B;
  --line:rgba(238,240,250,.12); --accent:var(--oro); --accent-ink:#1A1403;
  --ball-face:#FDFDFF; --ball-num:#1B2050;
  --ok:#4ADE94; --warn:#FBBF5B; --bad:#F87F7F;
  --shadow:0 10px 30px rgba(0,0,0,.35);
  --ia-chatgpt:#2FBF97; --ia-claude:#E2846B; --ia-gemini:#5B95F5;
  --ia-grok:#B9C1D4; --ia-deepseek:#7B87FF; --ia-mistral:#B57BF2;
}
@media (prefers-color-scheme: light) {
  :root {
    --bg:var(--papel); --bg-raise:#FFFFFF; --bg-raise-2:#E9ECF6;
    --ink:#171B3D; --ink-2:#4B5170; --ink-3:#7A80A3;
    --line:rgba(23,27,61,.13); --accent:#DE9A14; --accent-ink:#241A02;
    --ok:#178A56; --warn:#B0700A; --bad:#C43D3D;
    --shadow:0 10px 26px rgba(23,27,61,.10); --ia-grok:#6B7690;
  }
}
:root[data-theme="dark"] {
  --bg:var(--noche); --bg-raise:var(--noche-2); --bg-raise-2:var(--noche-3);
  --ink:#EEF0FA; --ink-2:#A9AFCE; --ink-3:#6E749B;
  --line:rgba(238,240,250,.12); --accent:var(--oro); --accent-ink:#1A1403;
  --ok:#4ADE94; --warn:#FBBF5B; --bad:#F87F7F;
  --shadow:0 10px 30px rgba(0,0,0,.35); --ia-grok:#B9C1D4;
}
:root[data-theme="light"] {
  --bg:var(--papel); --bg-raise:#FFFFFF; --bg-raise-2:#E9ECF6;
  --ink:#171B3D; --ink-2:#4B5170; --ink-3:#7A80A3;
  --line:rgba(23,27,61,.13); --accent:#DE9A14; --accent-ink:#241A02;
  --ok:#178A56; --warn:#B0700A; --bad:#C43D3D;
  --shadow:0 10px 26px rgba(23,27,61,.10); --ia-grok:#6B7690;
}

* { box-sizing:border-box; }
[hidden] { display:none !important; }
html, body { overflow-x:hidden; }
body { margin:0; background:var(--bg); color:var(--ink);
  font-family:'Outfit',system-ui,sans-serif; font-size:15.5px; line-height:1.55; }
h1,h2,h3 { font-family:'Fredoka','Outfit',sans-serif; line-height:1.12; margin:0; text-wrap:balance; }
p { margin:0; }
button { font:inherit; cursor:pointer; }

/* ============ componentes marca ============ */
.ball { display:inline-flex; align-items:center; justify-content:center; border-radius:50%;
  background:radial-gradient(circle at 32% 28%, #FFF 0%, var(--ball-face) 42%, #C9CDE4 100%);
  color:var(--ball-num); font-family:'Fredoka',sans-serif; font-weight:600;
  box-shadow:inset -3px -5px 10px rgba(27,32,80,.22), 0 3px 8px rgba(0,0,0,.22);
  font-variant-numeric:tabular-nums; flex:none; width:34px; height:34px; font-size:15px; }
.ball.gold { background:radial-gradient(circle at 32% 28%, #FFDF8E 0%, var(--oro) 48%, #C07E0D 100%);
  color:#241A02; box-shadow:inset -3px -5px 10px rgba(120,72,4,.35), 0 3px 9px rgba(0,0,0,.26); }
.ball.adic { background:radial-gradient(circle at 32% 28%, #D9DEF7 0%, #A9AFCE 55%, #767CA3 100%); color:#14183A; }
.ball.hit { outline:2.5px solid var(--ok); outline-offset:1px; }
.ball.sm { width:28px; height:28px; font-size:12.5px; }
.lw { font-family:'Fredoka',sans-serif; font-weight:600; letter-spacing:-0.02em; color:var(--ink); }
.logo { display:inline-flex; align-items:center; gap:5px; text-decoration:none; }
.logo .lw { font-size:22px; }
.logo .ball { width:26px; height:26px; font-size:12px; }

.eyebrow { font-size:11.5px; font-weight:600; letter-spacing:.17em; text-transform:uppercase; color:var(--accent); margin-bottom:10px; }
.card { border:1px solid var(--line); border-radius:14px; padding:20px; background:var(--bg-raise); }
.card h4 { margin:0 0 14px; font-size:11.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-3); font-weight:600; font-family:'Outfit',sans-serif; }
.grid { display:grid; gap:18px; }
.row-2 { display:grid; grid-template-columns:1.5fr 1fr; gap:18px; }
.row-22 { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
@media (max-width:760px) { .row-2,.row-22 { grid-template-columns:1fr; } }
/* los hijos de grids no fuerzan el ancho de la página (min-width:auto desborda) */
.grid > *, .row-2 > *, .row-22 > *, .app-body > * { min-width:0; }

.btn { display:inline-block; border:none; border-radius:999px; padding:10px 24px;
  font-weight:600; font-size:14.5px; text-decoration:none; background:var(--accent); color:var(--accent-ink); }
.btn:disabled { opacity:.5; cursor:not-allowed; }
.btn.ghost { background:transparent; color:var(--ink); border:1px solid var(--line); }
.btn.blk { display:block; width:100%; text-align:center; }
.pill { display:inline-flex; align-items:center; gap:6px; border:1px solid var(--line);
  border-radius:999px; padding:4px 12px; font-size:12.5px; font-weight:500; color:var(--ink-2); background:var(--bg-raise); cursor:pointer; }
.pill.on { background:var(--accent); color:var(--accent-ink); border-color:var(--accent); font-weight:600; }
.dot { width:11px; height:11px; border-radius:50%; flex:none; }
.badge { font-size:11px; font-weight:700; border-radius:999px; padding:3px 10px; letter-spacing:.05em; }
.badge.ok { background:color-mix(in srgb, var(--ok) 18%, transparent); color:var(--ok); }
.badge.off { background:var(--bg-raise-2); color:var(--ink-3); }
.badge.win { background:var(--accent); color:var(--accent-ink); }

table.tbl { width:100%; border-collapse:collapse; font-size:14px; }
table.tbl th { text-align:left; font-size:10.5px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-3); font-weight:600; padding:0 10px 9px 0; white-space:nowrap; }
table.tbl td { padding:9px 10px 9px 0; border-top:1px solid var(--line); font-variant-numeric:tabular-nums; vertical-align:middle; }
.scroll-x { overflow-x:auto; }

.screen { display:none; }
.screen.on { display:block; }

/* ============ auth ============ */
.auth-wrap { min-height:70vh; display:flex; align-items:center; justify-content:center; padding:56px 22px;
  background:radial-gradient(ellipse 55% 42% at 50% 0%, rgba(242,178,51,.12), transparent 70%); }
.auth-card { width:100%; max-width:400px; border:1px solid var(--line); border-radius:18px;
  background:var(--bg-raise); box-shadow:var(--shadow); padding:34px 30px; }
.auth-tabs { display:flex; border:1px solid var(--line); border-radius:999px; padding:3px; margin:22px 0 24px; }
.auth-tabs button { flex:1; border:none; background:none; color:var(--ink-3); border-radius:999px; padding:7px 0; font-weight:600; font-size:14px; }
.auth-tabs button.on { background:var(--accent); color:var(--accent-ink); }
.fld { margin-bottom:14px; }
.fld label { display:block; font-size:12.5px; font-weight:600; color:var(--ink-2); margin-bottom:5px; }
.fld input { width:100%; border:1px solid var(--line); background:var(--bg); color:var(--ink);
  border-radius:10px; padding:11px 13px; font:inherit; font-size:14.5px; }
.fld input:focus { outline:2px solid var(--accent); outline-offset:-1px; }
.auth-alt { margin-top:16px; text-align:center; font-size:13px; color:var(--ink-3); }
.gbtn { display:flex; align-items:center; justify-content:center; gap:9px; width:100%;
  border:1px solid var(--line); background:var(--bg); color:var(--ink); border-radius:999px;
  padding:10px 0; font-weight:600; font-size:14px; margin-top:10px; }
.auth-msg { margin-top:14px; font-size:13px; text-align:center; min-height:18px; }
.auth-msg.bad { color:var(--bad); }
.auth-msg.ok { color:var(--ok); }

/* ============ app chrome ============ */
.app-top { border-bottom:1px solid var(--line); background:var(--bg-raise); position:sticky; top:0; z-index:50; }
.app-top-in { max-width:1080px; margin:0 auto; padding:12px 22px; display:flex; align-items:center; gap:16px; }
.app-nav { display:flex; gap:4px; margin-left:auto; flex-wrap:wrap; }
.app-nav button { border:none; background:none; color:var(--ink-3); font-size:13.5px; font-weight:500;
  padding:6px 12px; border-radius:999px; }
.app-nav button.on { color:var(--ink); background:var(--bg-raise-2); }
.avatar { width:32px; height:32px; border-radius:50%; background:var(--accent); color:var(--accent-ink);
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:13px; flex:none; }
.theme-tog { display:flex; gap:2px; border:1px solid var(--line); border-radius:999px; padding:2px; }
.theme-tog button { border:none; background:none; color:var(--ink-3); border-radius:999px; padding:4px 11px; font-size:12.5px; font-weight:600; }
.theme-tog button.on { background:var(--accent); color:var(--accent-ink); }
.app-body { max-width:1080px; margin:0 auto; padding:28px 22px 64px; display:grid; gap:18px; }
.page-h { display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; margin-bottom:4px; }
.page-h h2 { font-size:25px; font-weight:600; }
.page-h .mut { color:var(--ink-3); font-size:13.5px; }

.res-row { display:flex; align-items:center; gap:7px; margin-bottom:11px; flex-wrap:wrap; }
.res-row:last-child { margin-bottom:0; }
.res-tag { width:88px; font-size:13px; font-weight:600; color:var(--ink-2); flex:none; }
.plus { color:var(--ink-3); font-size:13px; }
.count-num { font-size:38px; font-weight:700; font-variant-numeric:tabular-nums; line-height:1.1; }
.count-sub { font-size:13px; color:var(--ink-2); margin-top:3px; }
.bolsa { margin-top:13px; padding-top:13px; border-top:1px dashed var(--line); font-size:14px; color:var(--ink-2); }
.bolsa b { font-size:20px; color:var(--accent); font-variant-numeric:tabular-nums; display:block; }

.ia-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); gap:13px; }
.ia-card { border:1px solid var(--line); border-radius:13px; padding:15px; background:var(--bg); }
.ia-head { display:flex; align-items:center; gap:8px; margin-bottom:11px; }
.ia-head .nm { font-weight:600; font-size:14.5px; }
.ia-head .rk { margin-left:auto; font-size:12px; color:var(--ink-3); font-variant-numeric:tabular-nums; }
.ia-card .balls { display:flex; gap:4px; flex-wrap:wrap; }
.ia-card .why { margin-top:10px; font-size:12.5px; color:var(--ink-3); line-height:1.45; }
.lock { filter:blur(4px); user-select:none; }
.lock-note { font-size:12px; color:var(--accent); font-weight:600; margin-top:6px; }

.chart-box { border:1px solid var(--line); border-radius:13px; background:var(--bg); padding:16px; }
.legend { display:flex; gap:14px; flex-wrap:wrap; font-size:12.5px; color:var(--ink-2); margin-top:10px; }
.legend span { display:inline-flex; align-items:center; gap:6px; }
.inp { border:1px solid var(--line); background:var(--bg); color:var(--ink); border-radius:999px;
  padding:5px 14px; font:inherit; font-size:13px; width:170px; }
.inp:focus { outline:2px solid var(--accent); outline-offset:-1px; }

.num-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(64px,1fr)); gap:8px; }
.num-cell { border:1px solid var(--line); border-radius:10px; padding:8px 6px 7px; text-align:center; background:var(--bg); cursor:pointer; user-select:none; }
.num-cell .n { font-family:'Fredoka',sans-serif; font-weight:600; font-size:16px; }
.num-cell .bar { height:4px; border-radius:2px; background:var(--bg-raise-2); margin:6px 4px 4px; overflow:hidden; }
.num-cell .bar i { display:block; height:100%; background:var(--ink-3); border-radius:2px; }
.num-cell.hot .bar i { background:var(--accent); }
.num-cell.hot { border-color:var(--accent); }
.num-cell.sel { border-color:var(--accent); background:var(--accent); }
.num-cell.sel .n { color:var(--accent-ink); }
.num-cell .f { font-size:10.5px; color:var(--ink-3); font-variant-numeric:tabular-nums; }

.chk { display:flex; align-items:center; gap:9px; font-size:14px; color:var(--ink-2); margin-bottom:9px; cursor:pointer; user-select:none; }
.chk .box { width:17px; height:17px; border-radius:5px; border:1.5px solid var(--ink-3); flex:none; }
.chk.on .box { background:var(--accent); border-color:var(--accent); position:relative; }
.chk.on .box::after { content:"✓"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:800; color:var(--accent-ink); }

.gen-modes { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:12px; }
.gmode { border:1px solid var(--line); border-radius:13px; padding:16px; background:var(--bg); cursor:pointer; }
.gmode.on { border-color:var(--accent); box-shadow:0 0 0 1px var(--accent); }
.gmode .t { font-weight:600; font-size:15px; display:flex; align-items:center; gap:8px; }
.gmode p { font-size:12.5px; color:var(--ink-3); margin-top:6px; }
.gen-result { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:18px 0; }
.gen-result .ball { width:44px; height:44px; font-size:19px; }

.play-item { display:flex; align-items:center; gap:14px; padding:14px 0; border-top:1px solid var(--line); flex-wrap:wrap; }
.play-item:first-of-type { border-top:none; }
.play-item .nmb { display:flex; gap:5px; }
.play-item .meta { font-size:12.5px; color:var(--ink-3); }
.play-item .r { margin-left:auto; text-align:right; }

.acct-row { display:flex; align-items:center; gap:12px; padding:13px 0; border-top:1px solid var(--line); font-size:14.5px; }
.acct-row:first-of-type { border-top:none; }
.acct-row .k { color:var(--ink-2); width:180px; flex:none; }
.acct-row .v { font-weight:500; }

.soon { border:1px dashed var(--line); border-radius:12px; padding:16px; background:var(--bg);
  color:var(--ink-2); font-size:13.5px; }
.soon b { color:var(--accent); }
.center { text-align:center; }
.mut { color:var(--ink-3); }

/* ============ navegación inferior (tab bar) ============ */
.tab-bar { display:none; }   /* solo existe en móvil */
.sheet-veil { position:fixed; inset:0; z-index:70; background:rgba(10,13,32,.55); }
.sheet { position:absolute; left:0; right:0; bottom:0; background:var(--bg-raise);
  border-top:1px solid var(--line); border-radius:20px 20px 0 0;
  padding:10px 14px calc(14px + env(safe-area-inset-bottom));
  box-shadow:0 -14px 40px rgba(0,0,0,.35); animation:sheetUp .22s ease; }
@keyframes sheetUp { from { transform:translateY(35%); opacity:.4; } to { transform:none; opacity:1; } }
.sheet-handle { width:38px; height:4px; border-radius:2px; background:var(--ink-3); opacity:.45; margin:2px auto 10px; }
.sheet button { display:flex; align-items:center; gap:13px; width:100%; border:none; background:none;
  color:var(--ink); font-size:15.5px; font-weight:500; padding:13px 8px; border-radius:12px; text-align:left; }
.sheet button svg { width:21px; height:21px; color:var(--ink-2); flex:none; }
.sheet button.on { background:var(--bg-raise-2); }
.sheet button.on svg { color:var(--accent); }
.sheet button:active { background:var(--bg-raise-2); }

/* ============ móvil ============ */
@media (max-width:820px){
  /* barra superior mínima: logo + tema + avatar. La navegación vive
     en la tab bar inferior (zona del pulgar), no en un scroll horizontal. */
  .app-top-in { padding:10px 14px; gap:10px; }
  .theme-tog { margin-left:auto; }
  .app-nav { display:none; }

  .tab-bar { display:flex; position:fixed; left:0; right:0; bottom:0; z-index:60;
    background:var(--bg-raise); border-top:1px solid var(--line);
    box-shadow:0 -8px 24px rgba(0,0,0,.16);
    padding:6px max(6px, env(safe-area-inset-right)) max(7px, env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-left)); }
  .tab-bar button { flex:1; min-width:0; border:none; background:none; color:var(--ink-3);
    display:flex; flex-direction:column; align-items:center; gap:3px;
    font-size:10.5px; font-weight:600; letter-spacing:.01em; padding:4px 2px 3px; border-radius:12px; }
  .tab-bar button svg { width:23px; height:23px; flex:none; }
  .tab-bar button span { max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .tab-bar button.on { color:var(--accent); }
  .tab-bar button.on span { color:var(--ink); }

  /* el contenido nunca queda debajo de la tab bar */
  .app-body { padding:18px 14px calc(84px + env(safe-area-inset-bottom)); }
  .card { padding:16px 14px; }
  /* textos largos (correos, nombres) nunca ensanchan la página */
  .acct-row .v, .play-item .meta, .ia-card .why, .auth-msg { overflow-wrap:anywhere; }
  /* notch/safe-area de iPhone */
  .app-top-in { padding-left:max(14px, env(safe-area-inset-left)); padding-right:max(14px, env(safe-area-inset-right)); }
  .page-h h2 { font-size:22px; }
  .count-num { font-size:30px; }
  .res-tag { width:76px; }
  .acct-row { flex-wrap:wrap; row-gap:2px; }
  .acct-row .k { width:100%; }
  .inp { width:100%; margin-left:0 !important; }
  .auth-card { padding:26px 20px; }
  .gen-result .ball { width:38px; height:38px; font-size:17px; }
}

@media (prefers-reduced-motion:reduce){ *{transition:none!important;animation:none!important;} }