:root {
  --color-bg: #f4f4f5;
  --color-surface: #ffffff;
  --color-text: #17181a;
  --color-ink: #1b1c1e;
  --color-border: rgba(23,24,26,0.18);
  --color-divider: rgba(23,24,26,0.14);
  --color-muted: #5b5e63;

  --color-accent: #c8271b;
  --color-accent-100: #fbeae8;
  --color-accent-200: #f4c6c1;
  --color-accent-300: #e79b92;
  --color-accent-400: #d75647;
  --color-accent-500: #c8271b;
  --color-accent-600: #a91f14;
  --color-accent-700: #85180f;
  --color-accent-800: #5d100a;
  --color-accent-900: #340806;

  --color-neutral-100: #e9e9ea;
  --color-neutral-500: #74777c;
  --color-neutral-700: #3d3f42;

  --font-heading: "Barlow Condensed", "Barlow", sans-serif;
  --font-body: "Barlow", sans-serif;

  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;

  --shadow-lg: 0 12px 32px rgba(23,24,26,0.22);
}

* { box-sizing: border-box; }

/* Blueprint corner brackets */
.blueprint { position: relative; }
.blueprint .corner { position: absolute; width: 10px; height: 10px; pointer-events: none; }
.blueprint .corner.tl { top: -1px; left: -1px; border-top: 2px solid var(--color-accent); border-left: 2px solid var(--color-accent); }
.blueprint .corner.tr { top: -1px; right: -1px; border-top: 2px solid var(--color-accent); border-right: 2px solid var(--color-accent); }
.blueprint .corner.bl { bottom: -1px; left: -1px; border-bottom: 2px solid var(--color-accent); border-left: 2px solid var(--color-accent); }
.blueprint .corner.br { bottom: -1px; right: -1px; border-bottom: 2px solid var(--color-accent); border-right: 2px solid var(--color-accent); }

.duotone { background: var(--color-surface); overflow: hidden; }
/* Red duotone treatment for uploaded photos: desaturate the photo itself,
   then multiply a solid accent-red layer over it — white areas of the
   grayscale photo become pure accent red, black areas stay black, and
   midtones land in between. The .corner brackets sit above the tint
   (explicit z-index) so they stay crisp instead of getting tinted too.
   The template only renders .duotone-tint when a photo is actually present,
   so there's no empty-state case to guard against here. */
.duotone img { filter: grayscale(1) contrast(1.05); }
.duotone .corner { position: absolute; z-index: 2; }
.duotone-tint {
  position: absolute; inset: 0; z-index: 1;
  background: var(--color-accent);
  mix-blend-mode: multiply;
  pointer-events: none;
}

/* Empty-state placeholder for a site photo that hasn't been uploaded yet
   (replaces the old <image-slot> empty state, which only ever worked inside
   the design tool the site was originally built in — never on the live site). */
.site-photo-placeholder {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 10px; text-align: center; padding: 16px; box-sizing: border-box;
  color: var(--color-muted); background: rgba(127,127,127,.06);
}
.site-photo-placeholder svg { opacity: .5; }
.site-photo-placeholder span { font-size: 13px; max-width: 22ch; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 1px solid transparent; font-family: var(--font-heading); font-weight: 600;
  text-transform: uppercase; cursor: pointer; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  padding: 12px 20px; font-size: 14px; letter-spacing: 0.1em;
}
.btn-primary { background: var(--color-accent); color: #fff; }
.btn-primary:hover { background: var(--color-accent-600); }
.btn-secondary { background: var(--color-surface); color: var(--color-text); border-color: var(--color-border); }
.btn-secondary:hover { border-color: var(--color-accent); color: var(--color-accent-700); }
.btn-ghost { background: transparent; color: var(--color-muted); border-color: transparent; }
.btn-ghost:hover { color: var(--color-accent-700); }
.btn-block { width: 100%; }

/* Cards */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
}
.card-title { font-family: var(--font-heading); text-transform: uppercase; line-height: 1.1; color: var(--color-text); }
.card-meta { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-neutral-500); margin-top: 6px; }

/* Tags */
.tag {
  display: inline-flex; align-items: center; padding: 4px 10px; font-size: 11px;
  letter-spacing: 0.1em; text-transform: uppercase; background: var(--color-neutral-100); color: var(--color-neutral-700);
}
.tag-outline { background: transparent; border: 1px solid var(--color-border); }
.tag-accent { background: var(--color-accent-100); color: var(--color-accent-700); }

/* Form fields */
.field { display: grid; gap: 6px; font-size: 12px; color: var(--color-muted); }
.input {
  font-family: var(--font-body); font-size: 14px; padding: 11px 14px;
  border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text);
}
.input:focus { outline: 2px solid var(--color-accent); outline-offset: 1px; }

/* Segmented control */
.seg { display: inline-flex; max-width: 100%; border: 1px solid var(--color-border); overflow-x: auto; -webkit-overflow-scrolling: touch; }
.seg-opt {
  flex: none; border: 0; padding: 9px 14px; font-family: var(--font-heading); font-size: 12px;
  letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; background: transparent; color: var(--color-text);
  white-space: nowrap;
}

/* Table */
.table { width: 100%; min-width: 620px; border-collapse: collapse; background: var(--color-surface); font-size: 13px; }
.table th, .table td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--color-divider); white-space: nowrap; }
.table th { font-family: var(--font-heading); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-muted); }

/* Tables scroll horizontally on narrow screens instead of squeezing or breaking layout */
#alunosTableWrap, #finTableWrap, .aulasTableWrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Nav (admin) */
.nav { border-bottom: 1px solid var(--color-divider); background: var(--color-surface); }
.nav-brand { color: var(--color-text); }

/* Dialog */
.dialog-backdrop {
  position: fixed; inset: 0; background: rgba(23,24,26,0.5); z-index: 100;
  align-items: center; justify-content: center; padding: var(--space-4);
}
.dialog {
  background: var(--color-surface); border: 1px solid var(--color-border);
  padding: var(--space-6); width: 100%; box-shadow: var(--shadow-lg);
}
.dialog-title { font-family: var(--font-heading); font-size: 20px; text-transform: uppercase; margin-bottom: var(--space-4); }
.dialog-actions { display: flex; justify-content: flex-end; gap: var(--space-3); margin-top: var(--space-6); }

/* ---------------------------------------------------------------- */
/* Mobile responsiveness                                            */
/* ---------------------------------------------------------------- */

html { -webkit-text-size-adjust: 100%; }
body { overflow-x: hidden; }

/* Grid/flex items default to min-width:auto, which lets an unshrinkable
   child (a pill row, a table, a long word) force its whole track wider than
   the viewport instead of wrapping or scrolling internally. Reset it down
   the tree so overflow is contained by the element that actually needs to
   scroll (e.g. .seg, .table) rather than by the page. */
main, section, .card, [style*="display: grid"], [style*="display:grid"],
[style*="display: flex"], [style*="display:flex"] {
  min-width: 0;
}

img, svg { max-width: 100%; }

/* Never let an unbreakable long word (URLs, headings) force horizontal scroll */
h1, h2, h3, p { overflow-wrap: break-word; }

/* Stat grids with a known, fixed item count: force an even layout with no
   trailing "orphan" cell, instead of relying on auto-fit, which leaves a
   dangling half-empty row whenever the item count doesn't divide evenly
   into however many minmax() columns happen to fit at a given width. Set
   unconditionally (not just under a mobile media query) since the same
   orphan-cell gap shows up at plenty of desktop/tablet widths too. */
.stat-grid-4 { grid-template-columns: repeat(4, 1fr) !important; }
.stat-grid-3 { grid-template-columns: repeat(3, 1fr) !important; }
@media (max-width: 640px) {
  .stat-grid-4 { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 360px) {
  .stat-grid-3 { grid-template-columns: repeat(1, 1fr) !important; }
}

/* Buttons and pills stay tappable and never overflow their row on tiny screens */
@media (max-width: 480px) {
  .btn { padding: 12px 16px; font-size: 13px; }
  .table { min-width: 560px; }
}