/* ==========================================================================
   Pase de Lista ITM
   Palette taken from the TecNM / ITM institutional identity:
   deep navy, institutional blue, and the ITM orange used on campus signage.
   ========================================================================== */

:root {
  --ink:      #0B1F3A;
  --navy:     #16365E;
  --azul:     #1D6FB8;
  --azul-soft:#E4EEF8;
  --naranja:  #E0611F;
  --naranja-soft:#FCEAE0;
  --verde:    #17795A;
  --verde-soft:#E0F1EA;
  --ambar:    #B57614;
  --ambar-soft:#FAEFD8;
  --rojo:     #A32B22;
  --rojo-soft:#F8E6E4;

  --paper:    #F1F5F9;
  --surface:  #FFFFFF;
  --line:     #D2DCE7;
  --line-soft:#E7EDF3;
  --muted:    #5B6D82;

  --radius:   10px;
  --radius-sm:6px;
  --shadow:   0 1px 2px rgba(11,31,58,.06), 0 8px 24px -12px rgba(11,31,58,.18);

  --sans: "IBM Plex Sans", ui-sans-serif, system-ui, "Segoe UI", Roboto, sans-serif;
  --display: "Archivo", "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

/* The institutional strip: three bars, the TecNM signature. Structural, not decor. */
.brandbar { height: 4px; display: flex; }
.brandbar span { flex: 1; }
.brandbar span:nth-child(1) { background: var(--ink); }
.brandbar span:nth-child(2) { background: var(--azul); flex: 0 0 22%; }
.brandbar span:nth-child(3) { background: var(--naranja); flex: 0 0 10%; }

/* -------------------------------------------------------------- masthead */
.masthead {
  background: var(--ink);
  color: #fff;
  padding: .8rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.masthead .mark {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -.015em;
  color: #fff;
  text-decoration: none;
  display: flex;
  align-items: baseline;
  gap: .5rem;
}
.masthead .mark small {
  font-family: var(--sans);
  font-weight: 400;
  font-size: .75rem;
  color: #9CB4D0;
  letter-spacing: 0;
}
.masthead nav { margin-left: auto; display: flex; gap: .25rem; align-items: center; flex-wrap: wrap; }
.masthead nav a {
  color: #C8D8EA;
  text-decoration: none;
  font-size: .88rem;
  padding: .35rem .7rem;
  border-radius: var(--radius-sm);
}
.masthead nav a:hover { background: rgba(255,255,255,.1); color: #fff; }
.masthead .who { font-size: .82rem; color: #8FA8C4; padding-right: .5rem; }

/* -------------------------------------------------------------- layout */
.wrap { max-width: 74rem; margin: 0 auto; padding: 1.75rem 1.25rem 4rem; }
.wrap.narrow { max-width: 32rem; }
.wrap.reading { max-width: 46rem; }

.pagehead { margin-bottom: 1.5rem; }
.pagehead h1 {
  font-family: var(--display);
  font-size: clamp(1.5rem, 3.2vw, 2rem);
  font-weight: 700;
  letter-spacing: -.02em;
  margin: 0 0 .2rem;
}
.pagehead p { margin: 0; color: var(--muted); }
.pagehead .back { font-size: .85rem; color: var(--azul); text-decoration: none; }
.pagehead .back:hover { text-decoration: underline; }

h2 {
  font-family: var(--display);
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: -.01em;
  margin: 0 0 .75rem;
}
h3 { font-size: .98rem; font-weight: 600; margin: 0 0 .4rem; }

.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.25rem;
  margin-bottom: 1.25rem;
}
.panel--flush { padding: 0; overflow: hidden; }
.panel__head {
  padding: .9rem 1.25rem;
  border-bottom: 1px solid var(--line-soft);
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
}
.panel__head h2 { margin: 0; }
.panel__head .spacer { margin-left: auto; }

.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }

/* Named layouts instead of inline grid-template-columns: an inline style beats
   a media query, which silently kept these pages two-up on phones. */
.split-live   { display: grid; grid-template-columns: minmax(0,21rem) minmax(0,1fr);
                gap: 1.25rem; align-items: start; }
.split-points { display: grid; grid-template-columns: minmax(0,1.4fr) minmax(0,1fr);
                gap: 1.25rem; align-items: start; }

@media (max-width: 900px) {
  .grid2, .grid3, .split-live, .split-points { grid-template-columns: 1fr; }
}

/* -------------------------------------------------------------- forms */
label { display: block; font-size: .82rem; font-weight: 600; margin-bottom: .3rem; color: var(--navy); }
input[type=text], input[type=email], input[type=password], input[type=number],
select, textarea {
  width: 100%;
  padding: .6rem .7rem;
  font: inherit;
  font-size: .95rem;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible, a:focus-visible {
  outline: 3px solid var(--azul);
  outline-offset: 2px;
}
.field { margin-bottom: .9rem; }
.field .hint { font-size: .78rem; color: var(--muted); font-weight: 400; margin-top: .3rem; }
.row { display: flex; gap: .75rem; flex-wrap: wrap; }
.row > * { flex: 1 1 12rem; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  font: inherit;
  font-size: .92rem;
  font-weight: 600;
  padding: .6rem 1.1rem;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  background: var(--navy);
  color: #fff;
  cursor: pointer;
  text-decoration: none;
}
.btn:hover { background: var(--ink); }
.btn--ghost { background: #fff; color: var(--navy); border-color: var(--line); }
.btn--ghost:hover { background: var(--azul-soft); color: var(--ink); }
.btn--accent { background: var(--naranja); }
.btn--accent:hover { background: #C6501A; }
.btn--danger { background: #fff; color: var(--rojo); border-color: #E7C4C0; }
.btn--danger:hover { background: var(--rojo-soft); }
.btn--sm { font-size: .82rem; padding: .35rem .7rem; }
.btn--block { width: 100%; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

/* -------------------------------------------------------------- notices */
.notice {
  padding: .7rem .9rem;
  border-radius: var(--radius-sm);
  font-size: .9rem;
  margin-bottom: 1rem;
  border-left: 3px solid;
}
.notice--ok   { background: var(--verde-soft); border-color: var(--verde); color: #0D4C38; }
.notice--warn { background: var(--ambar-soft); border-color: var(--ambar); color: #6B4708; }
.notice--bad  { background: var(--rojo-soft); border-color: var(--rojo); color: #7A211A; }
.notice--info { background: var(--azul-soft); border-color: var(--azul); color: var(--navy); }

/* -------------------------------------------------------------- tables */
table { width: 100%; border-collapse: collapse; font-size: .9rem; }
th {
  text-align: left;
  font-size: .78rem;
  font-weight: 600;
  color: var(--muted);
  padding: .55rem .75rem;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
td { padding: .55rem .75rem; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
tr:last-child td { border-bottom: 0; }
.num { font-variant-numeric: tabular-nums; }
.tablewrap { overflow-x: auto; }

.tag {
  display: inline-block;
  font-size: .72rem;
  font-weight: 600;
  padding: .15rem .5rem;
  border-radius: 999px;
  background: var(--azul-soft);
  color: var(--navy);
}
.tag--ok    { background: var(--verde-soft); color: var(--verde); }
.tag--late  { background: var(--ambar-soft); color: var(--ambar); }
.tag--bad   { background: var(--rojo-soft); color: var(--rojo); }
.tag--muted { background: var(--line-soft); color: var(--muted); }
.tag--accent{ background: var(--naranja-soft); color: var(--naranja); }

/* -------------------------------------------------------------- code panel
   The rotating code is the loudest element in the product, on purpose:
   it is read across a classroom from a projector. */
.codepanel {
  background: var(--ink);
  color: #fff;
  border-radius: var(--radius);
  padding: 1.5rem 1.25rem;
  text-align: center;
}
.codepanel .caption { font-size: .82rem; color: #9CB4D0; margin: 0 0 .5rem; }
.codedigits {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(2.75rem, 11vw, 5.25rem);
  line-height: 1;
  letter-spacing: .06em;
  font-variant-numeric: tabular-nums;
  margin: 0;
}
.codebar { height: 4px; background: rgba(255,255,255,.18); border-radius: 999px; margin-top: 1rem; overflow: hidden; }
.codebar i { display: block; height: 100%; background: var(--naranja); width: 100%; }
.codepanel .sub { font-size: .8rem; color: #8FA8C4; margin: .6rem 0 0; }

/* -------------------------------------------------------------- roster grid */
.tally { display: flex; gap: 1.5rem; flex-wrap: wrap; margin: 0 0 1rem; }
.tally div { min-width: 4.5rem; }
.tally b {
  display: block;
  font-family: var(--display);
  font-size: 1.9rem;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.tally span { font-size: .78rem; color: var(--muted); }

.roster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(13.5rem, 1fr));
  gap: .6rem;
}
@media (max-width: 640px) {
  .roster { grid-template-columns: 1fr; gap: .5rem; }
}
.seat {
  position: relative;
  border: 1px solid var(--line);
  border-left: 4px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fff;
  padding: .55rem .7rem;
  text-align: left;
  font: inherit;
  cursor: pointer;
  display: block;
  width: 100%;
}
.seat:hover { border-color: var(--azul); }
.seat__no { font-size: .7rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.seat__name { font-size: .88rem; font-weight: 600; line-height: 1.25; }
.seat__meta { font-size: .72rem; color: var(--muted); margin-top: .15rem; }
.seat[data-status="present"] { border-left-color: var(--verde); background: var(--verde-soft); }
.seat[data-status="late"]    { border-left-color: var(--ambar); background: var(--ambar-soft); }
.seat[data-status="absent"]  { border-left-color: var(--rojo); background: var(--rojo-soft); }
.seat[data-status="excused"] { border-left-color: var(--azul); background: var(--azul-soft); }
.seat.is-flagged::after {
  content: "";
  position: absolute; top: .45rem; right: .45rem;
  width: .5rem; height: .5rem; border-radius: 50%;
  background: var(--naranja);
}
.seat .pts {
  display: inline-block;
  margin-top: .3rem;
  font-size: .72rem;
  font-weight: 600;
  color: var(--naranja);
}

/* one orchestrated moment: a seat filling in during rollcall */
@keyframes seatIn {
  from { transform: scale(.96); background: #fff; }
  to   { transform: scale(1); }
}
.seat.just-marked { animation: seatIn .28s ease-out; }
@media (prefers-reduced-motion: reduce) {
  .seat.just-marked { animation: none; }
  .codebar i { transition: none !important; }
}

/* -------------------------------------------------------------- student card */
.checkcard {
  border: 2px solid var(--navy);
  border-radius: 14px;
  background: #fff;
  padding: 1.5rem 1.25rem;
  text-align: center;
}
.checkcard h2 { font-size: 1.4rem; margin-bottom: .25rem; }
.checkcard .course { color: var(--muted); font-size: .9rem; margin: 0 0 1.25rem; }
.checkcard.is-done { border-color: var(--verde); background: var(--verde-soft); }
.checkcard.is-late { border-color: var(--ambar); background: var(--ambar-soft); }
.bigcheck {
  width: 100%;
  font-family: var(--display);
  font-size: 1.35rem;
  font-weight: 700;
  padding: 1.4rem 1rem;
  border: 0;
  border-radius: 12px;
  background: var(--naranja);
  color: #fff;
  cursor: pointer;
}
.bigcheck:hover { background: #C6501A; }
.bigcheck[disabled] { background: var(--line); color: var(--muted); cursor: not-allowed; }
.codeinput {
  font-family: var(--display);
  font-size: 2rem;
  font-weight: 700;
  text-align: center;
  letter-spacing: .3em;
  padding: .6rem;
  font-variant-numeric: tabular-nums;
}
.geostate { font-size: .85rem; color: var(--muted); margin: .9rem 0 0; min-height: 1.4em; }
.stamp {
  font-family: var(--display);
  font-size: 2.4rem;
  font-weight: 700;
  color: var(--verde);
  margin: .5rem 0 .25rem;
}

/* -------------------------------------------------------------- misc */
.cardlist { display: grid; gap: .75rem; }
.coursecard {
  display: block;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1rem 1.1rem;
  text-decoration: none;
  color: inherit;
}
.coursecard:hover { border-color: var(--azul); }
.coursecard h3 { margin: 0 0 .15rem; font-size: 1.02rem; }
.coursecard .meta { font-size: .82rem; color: var(--muted); }
.coursecard .live {
  display: inline-block; font-size: .72rem; font-weight: 700;
  color: var(--verde); background: var(--verde-soft);
  padding: .1rem .5rem; border-radius: 999px; margin-left: .4rem;
}

.empty { text-align: center; padding: 2.5rem 1rem; color: var(--muted); }
.empty p { margin: 0 0 1rem; }

.foot { text-align: center; font-size: .78rem; color: var(--muted); padding: 2rem 1rem 3rem; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

dialog {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.25rem;
  max-width: 24rem;
  width: calc(100% - 2rem);
  box-shadow: var(--shadow);
}
dialog::backdrop { background: rgba(11,31,58,.45); }


/* ==========================================================================
   Mobile. Most rollcall traffic is a phone held one-handed in a classroom,
   so these are corrections to real use, not a shrunken desktop.
   ========================================================================== */

/* Never let a stray long string (an email, a control number) widen the page. */
body { overflow-wrap: break-word; }

/* Kill the grey flash on tap; it reads as a rendering glitch on Android. */
a, button, .seat { -webkit-tap-highlight-color: transparent; }

/* Respect the notch and the home indicator. */
.wrap { padding-bottom: max(4rem, env(safe-area-inset-bottom)); }

@media (max-width: 700px) {
  body { font-size: 15px; }

  .wrap { padding: 1.25rem .85rem 4rem; }

  .masthead { padding: .65rem .85rem; gap: .5rem; }
  .masthead .mark { font-size: .95rem; }
  .masthead .mark small { display: none; }      /* the long institutional name */
  .masthead nav { width: 100%; margin-left: 0; gap: 0; justify-content: space-between; }
  .masthead nav a { padding: .3rem .5rem; font-size: .82rem; }
  .masthead .who {
    width: 100%; padding: 0 0 .1rem; font-size: .78rem;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }

  .panel { padding: 1rem .85rem; border-radius: 8px; }
  .panel__head { padding: .8rem .85rem; }
  .panel--flush > div[style*="padding"] { padding: .85rem !important; }

  .pagehead h1 { font-size: 1.4rem; }

  /* 44px minimum touch target, the figure both Apple and Google use. */
  .btn { padding: .7rem 1rem; min-height: 44px; }
  .btn--sm { min-height: 38px; padding: .45rem .75rem; }
  input, select, textarea { min-height: 44px; font-size: 16px; }  /* 16px stops iOS zoom */

  .row { gap: .5rem; }
  .row > * { flex: 1 1 100%; }

  .field { margin-bottom: .75rem; }

  td, th { padding: .5rem .5rem; }

  .tally { gap: 1rem; }
  .tally b { font-size: 1.5rem; }

  .seat { padding: .7rem .8rem; min-height: 52px; }
  .seat__name { font-size: .95rem; }

  .codepanel { padding: 1.1rem .85rem; }
  .codedigits { letter-spacing: .04em; }

  .checkcard { padding: 1.25rem .9rem; }
  .bigcheck { padding: 1.6rem 1rem; font-size: 1.3rem; }
  .codeinput { font-size: 1.75rem; letter-spacing: .22em; }

  dialog { padding: 1rem; border-radius: 12px; }
  dialog .btn { min-height: 48px; }
}

/* On a phone the teacher scrolls the roster constantly; keep the code and the
   tally reachable instead of stranded at the top of the page. */
@media (max-width: 900px) {
  .livebar {
    position: sticky;
    top: 0;
    z-index: 20;
    background: var(--ink);
    color: #fff;
    margin: 0 -.85rem 1rem;
    padding: .6rem .85rem;
    display: flex;
    align-items: center;
    gap: .9rem;
    box-shadow: 0 2px 12px rgba(11,31,58,.25);
  }
  .livebar .lb-code {
    font-family: var(--display);
    font-weight: 700;
    font-size: 1.9rem;
    letter-spacing: .08em;
    font-variant-numeric: tabular-nums;
    line-height: 1;
  }
  .livebar .lb-counts { font-size: .78rem; color: #9CB4D0; margin-left: auto; text-align: right; }
  .livebar .lb-counts b { color: #fff; font-size: 1rem; }
  .livebar .lb-ring {
    width: 34px; height: 34px; flex: 0 0 34px; border-radius: 50%;
    background: conic-gradient(var(--naranja) var(--p, 100%), rgba(255,255,255,.15) 0);
  }
  #codepanel { display: none; }        /* the sticky bar replaces it */
}
@media (min-width: 901px) { .livebar { display: none; } }

/* Blocked-device attempts, shown to the teacher during rollcall. */
.blocked { border-left: 3px solid var(--naranja); padding: .5rem .7rem;
           background: var(--naranja-soft); border-radius: var(--radius-sm);
           font-size: .82rem; margin-bottom: .4rem; }

/* A student's page updating itself under their thumb needs to announce it. */
.wake {
  display: block;
  border: 0;
  width: 100%;
  text-align: left;
  background: var(--verde);
  color: #fff;
  border-radius: var(--radius);
  padding: 1rem 1.1rem;
  margin-bottom: 1rem;
  text-decoration: none;
  font: inherit;
  cursor: pointer;
}
.wake strong { display: block; font-family: var(--display); font-size: 1.15rem; }
.wake span { font-size: .85rem; opacity: .9; }
@keyframes wakeIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; } }
.wake { animation: wakeIn .25s ease-out; }
@media (prefers-reduced-motion: reduce) { .wake { animation: none; } }

/* ---------------------------------------------------------- rewards admin */
.rewardrow { padding: .85rem 1.25rem; border-bottom: 1px solid var(--line-soft); }
.rewardrow:last-of-type { border-bottom: 0; }
.rewardrow__top { display: flex; justify-content: space-between; gap: 1rem; align-items: start; }
.rewardrow__acts { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .6rem; }
.rewardrow__edit {
  margin-top: .75rem; padding-top: .75rem; border-top: 1px dashed var(--line);
}

/* ---------------------------------------------------------- redemption queue */
.canjerow {
  display: flex; justify-content: space-between; align-items: center; gap: .75rem;
  padding: .65rem 0; border-bottom: 1px solid var(--line-soft);
}
.canjerow:last-child { border-bottom: 0; }
@media (max-width: 520px) {
  .canjerow { flex-direction: column; align-items: stretch; }
  .canjerow > div:last-child { display: flex; gap: .4rem; }
  .canjerow .btn { flex: 1; }
}

/* A request arriving while you are looking at the screen should announce itself. */
@keyframes canjeIn { from { background: var(--verde-soft); } to { background: transparent; } }
.canjerow.is-new { animation: canjeIn 1.6s ease-out; }

/* And a balance that changes under the student's thumb should too. */
@keyframes bump { 0% { transform: scale(1); } 40% { transform: scale(1.09); } 100% { transform: scale(1); } }
.bump { animation: bump .35s ease-out; }

@media (prefers-reduced-motion: reduce) {
  .canjerow.is-new, .bump { animation: none; }
}