/* PapaTrack — estilos de la app real (encima de tokens.css) */

.app-header{
  position:sticky; top:0; z-index:10;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 18px; background:var(--surface); border-bottom:1px solid var(--line);
}
.app-header .brand{display:flex; align-items:center; gap:8px; font-family:var(--font-display); font-weight:600; font-size:19px;}
.app-header .brand .leaf{color:var(--accent);}
.app-header .who{display:flex; align-items:center; gap:10px; font-size:12.5px; color:var(--ink-soft);}
.app-header button{
  font-family:var(--font-mono); font-size:11.5px; font-weight:600; color:var(--ink-soft);
  background:var(--surface-2); border:1px solid var(--line); border-radius:100px; padding:6px 13px; cursor:pointer;
}
.app-header button:hover{color:var(--ink);}

.app-body{max-width:640px; margin:0 auto; padding:16px 16px 90px;}

/* ---- pantalla de login ---- */
.login-screen{
  min-height:100dvh; display:flex; align-items:center; justify-content:center; padding:24px;
}
.login-card{
  background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:36px 30px;
  box-shadow:var(--shadow); max-width:360px; width:100%; text-align:center;
}
.login-card .leaf-badge{
  width:52px; height:52px; border-radius:14px; background:var(--accent-soft); color:var(--accent-ink);
  display:flex; align-items:center; justify-content:center; font-size:24px; margin:0 auto 18px;
}
.login-card h1{font-family:var(--font-display); font-size:24px; margin:0 0 8px;}
.login-card p{color:var(--ink-soft); font-size:14px; line-height:1.5; margin:0 0 22px;}
.btn-google{
  display:flex; align-items:center; justify-content:center; gap:10px; width:100%;
  background:var(--accent); color:#fff; border:none; border-radius:10px; padding:13px 18px;
  font-family:var(--font-body); font-weight:600; font-size:14.5px; cursor:pointer;
}
.btn-google:hover{filter:brightness(1.06);}
.login-note{margin-top:16px; font-size:11.5px; color:var(--ink-faint);}

/* ---- estados de carga / vacío / error ---- */
.center-screen{min-height:60dvh; display:flex; align-items:center; justify-content:center; color:var(--ink-faint); font-family:var(--font-mono); font-size:13px;}
.empty-state, .error-state{
  text-align:center; padding:60px 20px; color:var(--ink-soft);
}
.empty-state .icon, .error-state .icon{font-size:34px; margin-bottom:14px; display:block;}
.error-state{color:var(--danger);}

/* ---- lista de botes ---- */
.group-label{
  font-family:var(--font-mono); font-size:11px; text-transform:uppercase; letter-spacing:.06em;
  color:var(--ink-faint); margin:20px 0 8px; display:flex; justify-content:space-between;
}
.group-label:first-child{margin-top:4px;}
.bote-card{
  background:var(--surface); border:1px solid var(--line); border-radius:13px; padding:13px 15px;
  display:flex; flex-direction:column; gap:6px; margin-bottom:9px; box-shadow:var(--shadow);
}
.bote-card.danger{border-color:var(--danger); background:var(--danger-soft);}
.bote-card .row1{display:flex; justify-content:space-between; align-items:center; gap:8px;}
.bote-id{font-family:var(--font-mono); font-weight:700; font-size:14.5px;}
.chip{font-size:11px; font-weight:600; padding:4px 10px; border-radius:100px; white-space:nowrap;}
.chip.fase{background:var(--accent-soft); color:var(--accent-ink);}
.chip.ok{background:var(--ok); color:#fff;}
.chip.danger{background:var(--danger); color:#fff;}
.chip.muted{background:var(--surface-2); color:var(--ink-faint);}
.row2{display:flex; justify-content:space-between; align-items:center; font-size:12.5px; color:var(--ink-soft);}