/* base.css — reset, variables y tipografía global */

* { box-sizing: border-box; margin: 0; padding: 0; }

body { font-family: sans-serif; background-color: #131a33ec; }

/* ─── Vistas ─────────────────────────────────────────────────────────────── */
.view { background-color:#131a33ec; display: none; }
.view.active { display: block; }

/* ─── Toast ──────────────────────────────────────────────────────────────── */
.toast {
  position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
  background: #000000; color: #fff; padding: 8px 18px;
  border-radius: 20px; font-size: 12px;
  opacity: 0; transition: opacity .3s;
  pointer-events: none; white-space: nowrap; z-index: 99;
}
.toast.show { opacity: 1; }

/* ─── Utilidades compartidas ─────────────────────────────────────────────── */
.pill { font-size: 11px; padding: 2px 8px; border-radius: 20px; white-space: nowrap; }
.pill.pending  { background: #FAEEDA; color: #633806; }
.pill.done-pill { background: #EAF3DE; color: #27500A; }
.pill.review   { background: #E6F1FB; color: #0C447C; }

.progress-bar { height: 6px; background: rgba(0,0,0,.08); border-radius: 3px; margin-top: 10px; overflow: hidden; }
.progress-fill { height: 100%; border-radius: 3px; }

.wrap { padding: 1rem 1.5rem 2rem; }
.view-title { color:white; font-size:18px; font-weight: 500; margin-bottom: 1.25rem; }
.back-btn {
  background: rgba(7, 59, 230, 0.145); border: 0.5px solid rgba(0,0,0,.15); border-radius: 8px;
  padding: 5px 12px; font-size: 13px; color: #ffffff;
  cursor: pointer; display: inline-flex; align-items: center; gap: 6px; margin-bottom: 1.25rem;
}
.back-btn:hover { background: rgba(77, 95, 157, 0.245); border-color: rgba(0,0,0,.3); color: #111; }

.empty-state { padding: 2.5rem; text-align: center; color: #aaa; font-size: 14px; }