:root {
  --cmr: #1d4ed8;
  --cmr-dark: #1e3a8a;
  --bg: #f1f5f9;
  --card: #ffffff;
  --border: #e2e8f0;
  --text: #1e293b;
  --muted: #64748b;
  --ok: #16a34a;
  --ok-bg: #dcfce7;
  --pend: #d97706;
  --pend-bg: #fef3c7;
  --err: #dc2626;
  --err-bg: #fee2e2;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body { height: 100%; margin: 0; }

body {
  font-family: -apple-system, system-ui, 'Segoe UI', Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 17px;
}

.hidden { display: none !important; }

/* --- Topbar --- */
.topbar {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between;
  background: var(--cmr); color: #fff;
  padding: 12px 16px; padding-top: calc(12px + env(safe-area-inset-top));
}
.topbar-title { font-weight: 700; }
.topbar-right { display: flex; align-items: center; gap: 12px; }
.op-name { opacity: .9; font-size: 15px; }

/* --- Layout --- */
#app { padding: 16px; max-width: 900px; margin: 0 auto; }
.view-center { min-height: 80vh; display: flex; align-items: center; justify-content: center; }

/* --- Cards & forms --- */
.card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: 16px; padding: 20px;
  box-shadow: 0 1px 3px rgba(0,0,0,.05);
}
.login-card { width: 100%; max-width: 380px; }
.login-title { margin: 0 0 4px; color: var(--cmr); font-size: 22px; }
.login-sub { margin: 0 0 18px; color: var(--muted); font-size: 14px; }

.label { display: block; font-size: 14px; color: var(--muted); margin: 12px 0 6px; }
.req { color: var(--err); }
.opt { color: var(--muted); font-weight: 400; }

.input {
  width: 100%; font-size: 17px; padding: 14px;
  border: 1px solid #cbd5e1; border-radius: 12px; background: #fff;
  outline: none;
}
.input:focus { border-color: var(--cmr); box-shadow: 0 0 0 3px rgba(29,78,216,.15); }
.select { appearance: none; background: #fff; }

/* --- Buttons (tap-friendly) --- */
.btn {
  font-size: 17px; font-weight: 600; border: none; border-radius: 12px;
  padding: 14px 18px; cursor: pointer; min-height: 50px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  transition: background .15s, opacity .15s;
}
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-primary { background: var(--cmr); color: #fff; }
.btn-primary:active:not(:disabled) { background: var(--cmr-dark); }
.btn-ghost { background: rgba(255,255,255,.15); color: inherit; border: 1px solid var(--border); }
.topbar .btn-ghost { border-color: rgba(255,255,255,.4); color: #fff; background: rgba(255,255,255,.12); }
.btn-block { width: 100%; margin-top: 18px; }
.btn-lg { min-height: 60px; font-size: 19px; }
.btn-sm { min-height: 38px; padding: 8px 14px; font-size: 15px; }
.btn-back { background: transparent; color: var(--cmr); padding-left: 0; margin-bottom: 8px; }
.btn-scan { background: var(--cmr); color: #fff; white-space: nowrap; }
.btn-scan:active { background: var(--cmr-dark); }

/* --- Alerts --- */
.alert { border-radius: 12px; padding: 12px 14px; margin: 12px 0; font-size: 15px; }
.alert-error { background: var(--err-bg); color: var(--err); }
.alert-ok { background: var(--ok-bg); color: var(--ok); }

/* --- Toolbar lista --- */
.toolbar { display: flex; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.toolbar .select { flex: 0 0 auto; min-width: 180px; }
.toolbar .input:not(.select) { flex: 1 1 220px; }

/* --- Grid de alumnos --- */
.alumnos-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 640px) { .alumnos-grid { grid-template-columns: 1fr 1fr; } }

.alumno-card {
  display: flex; align-items: center; gap: 14px; text-align: left;
  background: var(--card); border: 1px solid var(--border); border-radius: 16px;
  padding: 12px 14px; cursor: pointer; width: 100%; font: inherit; color: inherit;
}
.alumno-card:active { background: #f8fafc; }
.alumno-foto { width: 56px; height: 56px; border-radius: 12px; object-fit: cover; background: #e2e8f0; flex: 0 0 auto; }
.alumno-body { flex: 1 1 auto; min-width: 0; }
.alumno-nombre { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.alumno-meta { color: var(--muted); font-size: 14px; }

.badge { font-size: 13px; font-weight: 700; border-radius: 999px; padding: 5px 12px; white-space: nowrap; }
.badge-ok { background: var(--ok-bg); color: var(--ok); }
.badge-pend { background: var(--pend-bg); color: var(--pend); }

.empty { text-align: center; color: var(--muted); padding: 40px 0; }

/* --- Ficha --- */
.ficha { background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 20px; }
.ficha-head { display: flex; gap: 16px; align-items: center; margin-bottom: 16px; }
.ficha-foto { width: 96px; height: 96px; border-radius: 14px; object-fit: cover; background: #e2e8f0; flex: 0 0 auto; }
.ficha-nombre { font-size: 20px; font-weight: 700; }
.ficha-meta { color: var(--muted); font-size: 15px; margin: 4px 0 8px; }

.serie-group { margin-bottom: 8px; }
.serie-row { display: flex; gap: 10px; }
.serie-input { flex: 1 1 auto; font-family: ui-monospace, 'SF Mono', Menlo, monospace; }
.btn-scan { flex: 0 0 auto; }

/* --- Scanner overlay --- */
.scanner-overlay {
  position: fixed; inset: 0; z-index: 100; background: #000;
  display: flex; flex-direction: column;
}
.scanner-bar {
  display: flex; align-items: center; justify-content: space-between;
  color: #fff; padding: 14px 16px; padding-top: calc(14px + env(safe-area-inset-top));
  font-weight: 600; background: rgba(0,0,0,.6);
}
.scanner-region { flex: 1 1 auto; }
.scanner-region video { width: 100% !important; height: 100% !important; object-fit: cover; }
.scanner-hint { color: #fff; text-align: center; padding: 16px; padding-bottom: calc(16px + env(safe-area-inset-bottom)); background: rgba(0,0,0,.6); }