/* Cuoti — design system. Light theme only (the owner's choice, 2026-10-23): tokens, then layout, components, charts and motion.
   Brand "Cartelera" (chosen 2026-10-28): berenjena ink, crema background, rojo cuota for actions, Bricolage Grotesque (self-hosted, OFL). */
@font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("../fonts/bricolage-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("../fonts/bricolage-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
:root {
  --bg: #f6f4f1; --surface: #ffffff; --surface-2: #f1ede8; --ink: #1d1230; --muted: #5d5470; --line: #e7e2dc;
  --brand: #d33a22; --brand-2: #e0604c; --brand-ink: #ffffff; --brand-soft: #fbe9e5; --brand-3: #d33a22; --brand-deep: #a82a16; --brand-glow: rgba(211, 58, 34, .22);
  --night: #1d1230; --night-2: #2c1d46; --night-3: #3a2a57; --lila: #cdbfe6; --lila-2: #dcd2ee;
  --ok: #0e7c66; --ok-soft: #e3f3ec; --warn: #a8570f; --warn-soft: #fbefdf; --bad: #c22f1a; --bad-soft: #fbe6e2; --info: #2b4c9b; --info-soft: #e6ecf8;
  --shadow: 0 1px 2px rgba(29, 18, 48, .04); --shadow-lg: 0 14px 40px rgba(29, 18, 48, .16);
  --radius: 20px; --radius-sm: 12px;
  --font: "Bricolage Grotesque", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;
  --ease: cubic-bezier(.2, .8, .2, 1);
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body { font-family: var(--font); background: var(--bg); color: var(--ink); font-size: 15px; line-height: 1.45; -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--brand); }
.num { font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.muted { color: var(--muted); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--brand) 55%, transparent); outline-offset: 2px; border-radius: 8px; }

/* ---------- layout ---------- */
.app { display: grid; grid-template-columns: minmax(0, 1fr); min-height: 100dvh; }
.side { display: none; }
.main { padding: 0 16px 104px; max-width: 1180px; width: 100%; min-width: 0; margin: 0 auto; }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 25; background: var(--bg); }
.topbar { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; display: flex; align-items: center; gap: 12px; padding: 14px 16px; margin: 0 -16px;
          background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.brand { display: flex; align-items: center; gap: 9px; font-weight: 800; font-size: 19px; letter-spacing: -.02em; text-decoration: none; color: var(--ink); }
.logo { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; color: #fff;
        background: var(--night); }
.brand-dot { color: var(--brand); margin-left: -9px; }
.topbar .spacer { flex: 1; }
.icon-btn { width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); display: grid; place-items: center; cursor: pointer; }
.icon-btn:hover { border-color: var(--brand-2); }
.tabbar { position: fixed; left: calc(12px + env(safe-area-inset-left, 0px)); right: calc(12px + env(safe-area-inset-right, 0px)); bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 30; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 6px;
          background: var(--night); border-radius: 22px; box-shadow: var(--shadow-lg); }
.tab { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 7px 4px; border-radius: 16px; font-size: 11.5px; font-weight: 600;
       color: var(--lila); text-decoration: none; min-height: 48px; justify-content: center; position: relative; }
.tab[aria-current="page"] { color: var(--night); background: #fff; }
.fab { position: fixed; right: 20px; bottom: 92px; z-index: 31; width: 56px; height: 56px; border-radius: 18px; border: 0; color: #fff; cursor: pointer;
       background: var(--brand); box-shadow: 0 10px 28px var(--brand-glow); display: grid; place-items: center; }
@media (min-width: 960px) {
  .app { grid-template-columns: 248px minmax(0, 1fr); }
  .side { display: flex; flex-direction: column; gap: 6px; position: sticky; top: 0; height: 100dvh; padding: 22px 16px; border-right: 1px solid var(--line); background: var(--surface); }
  .side .brand { padding: 4px 10px 18px; }
  .side a.nav { display: flex; align-items: center; gap: 11px; padding: 11px 12px; border-radius: 12px; color: var(--muted); font-weight: 600; text-decoration: none; }
  .side a.nav:hover { background: var(--surface-2); color: var(--ink); }
  .side a.nav[aria-current="page"] { background: var(--brand-soft); color: var(--brand); }
  .side .grow { flex: 1; }
  .main { padding: 0 32px 48px; }
  .topbar { margin: 0 -32px; padding: 18px 32px; }
  .tabbar, .fab { display: none; }
  .topbar .brand { display: none; }
}

/* ---------- page header ---------- */
.ph { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin: 6px 0 18px; flex-wrap: wrap; }
.ph h1 { margin: 0; font-size: clamp(24px, 4.2vw, 32px); letter-spacing: -.03em; line-height: 1.1; }
.ph p { margin: 4px 0 0; color: var(--muted); }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line);
        font-size: 12.5px; font-weight: 600; color: var(--muted); }
.pill.sample { background: var(--warn-soft); color: var(--warn); border-color: transparent; white-space: nowrap; }
@media (max-width: 420px) { .pill.sample .long { display: none; } }

/* ---------- cards ---------- */
.grid { display: grid; gap: 14px; grid-template-columns: repeat(12, minmax(0, 1fr)); }
.card { background: var(--surface); border: 1px solid transparent; border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px; min-width: 0; }
.card h2, .card h3 { margin: 0 0 4px; font-size: 15px; letter-spacing: -.01em; }
.card .sub { color: var(--muted); font-size: 13px; }
.c12 { grid-column: span 12; } .c6 { grid-column: span 12; } .c4 { grid-column: span 12; } .c8 { grid-column: span 12; } .c3 { grid-column: span 6; }
@media (min-width: 720px) { .c6 { grid-column: span 6; } .c4 { grid-column: span 6; } .c3 { grid-column: span 3; } }
@media (min-width: 1100px) { .c4 { grid-column: span 4; } .c8 { grid-column: span 8; } }

.kpi { position: relative; overflow: hidden; }
.kpi .k { font-size: 12.5px; font-weight: 600; color: var(--muted); display: flex; align-items: center; gap: 7px; }
.kpi .v { font-size: clamp(22px, 5.6vw, 30px); font-weight: 800; letter-spacing: -.03em; margin-top: 8px; line-height: 1.05; }
.kpi .s { font-size: 12px; color: var(--muted); margin-top: 6px; }
.kpi .dot { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; }
.kpi.hero { color: #fff; border: 0; background: var(--night); box-shadow: none; }
.kpi.hero .k, .kpi.hero .s { color: var(--lila-2); }
.todo { display: flex; align-items: center; gap: 14px; text-decoration: none; color: inherit; border-color: color-mix(in srgb, var(--bad) 30%, var(--line));
        background: linear-gradient(90deg, var(--bad-soft), var(--surface) 70%); }
.todo b { display: block; font-size: 15px; } .todo .sub { display: block; margin-top: 2px; }
.todo.ok { border-color: color-mix(in srgb, var(--ok) 30%, var(--line)); background: linear-gradient(90deg, var(--ok-soft), var(--surface) 70%); }
.todo-ic { width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; background: var(--ok); color: #fff; flex: none; }
.todo-avs { display: flex; flex: none; } .todo-avs .av { width: 34px; height: 34px; margin-left: -10px; border: 2px solid var(--surface); font-size: 13px; }
.todo-avs .av:first-child { margin-left: 0; }
.kpi.hero .dot { background: rgba(255, 255, 255, .18); }
.kpi.hero::after { content: ""; position: absolute; right: -40px; bottom: -60px; width: 160px; height: 160px; border-radius: 50%; background: var(--night-2); }
.kpi.hero > * { position: relative; z-index: 1; }

/* ---------- ring + charts ---------- */
.ringwrap { display: flex; align-items: center; gap: 18px; }
.ring { width: 132px; height: 132px; flex: none; }
.ring .track { stroke: var(--surface-2); }
.ring .bar { stroke: var(--brand); stroke-linecap: round; transition: stroke-dashoffset 1.1s var(--ease); }
.ring text { fill: var(--ink); font-weight: 800; font-size: 26px; letter-spacing: -.03em; }
.ring .pct { font-size: 12px; fill: var(--muted); font-weight: 600; }
.chart { width: 100%; height: auto; display: block; overflow: visible; margin-top: 10px; }
.chart .b { fill: var(--lila); transform-box: fill-box; transform-origin: bottom; }
.chart .b.cur { fill: var(--brand); }
.chart .exp { stroke: var(--muted); stroke-dasharray: 4 5; stroke-width: 1.5; fill: none; opacity: .7; }
.chart .lbl { fill: var(--muted); font-size: 13px; }
.chart .val { fill: var(--ink); font-size: 12.5px; font-weight: 700; }
.legend { display: flex; gap: 14px; font-size: 12px; color: var(--muted); margin-top: 8px; }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }

.stat-mini { display: flex; flex-direction: column; gap: 6px; }
.stat-mini .big { font-size: 26px; font-weight: 800; letter-spacing: -.03em; }
.ringwrap .stat-mini .big { font-size: 21px; line-height: 1.15; }
.trend { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px; width: fit-content; }
.trend.better { color: var(--ok); background: var(--ok-soft); } .trend.worse { color: var(--bad); background: var(--bad-soft); } .trend.same { color: var(--muted); background: var(--surface-2); }

.week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; margin-top: 10px; }
.day { border-radius: 12px; padding: 8px 4px; text-align: center; background: var(--surface-2); min-height: 74px; }
.day .wd { font-size: 11px; color: var(--muted); text-transform: capitalize; font-weight: 600; }
.day .dn { font-size: 17px; font-weight: 800; margin: 2px 0 4px; }
.day.today { background: var(--brand-soft); } .day.today .dn { color: var(--brand); }
.day .avs { display: flex; justify-content: center; }
.day .avs .av { width: 20px; height: 20px; font-size: 10px; margin-left: -5px; border: 2px solid var(--surface-2); }

.rank { list-style: none; padding: 0; margin: 10px 0 0; display: flex; flex-direction: column; gap: 10px; }
.rank li { display: flex; align-items: center; gap: 10px; }
.rank .n { flex: 1; min-width: 0; } .rank .n b { display: block; font-size: 14px; } .rank .n span { font-size: 12px; color: var(--muted); }

/* ---------- avatars, chips, buttons ---------- */
.av { width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; font-weight: 800; color: #fff; flex: none; font-size: 15px; }
.chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; padding: 4px 9px; border-radius: 999px; white-space: nowrap; }
.chip.overdue { color: var(--bad); background: var(--bad-soft); } .chip.claimed { color: var(--info); background: var(--info-soft); }
.chip.due_soon { color: var(--warn); background: var(--warn-soft); } .chip.ok, .chip.paid { color: var(--ok); background: var(--ok-soft); }
.chip.archived, .chip.starts { color: var(--muted); background: var(--surface-2); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 13px; border: 1px solid var(--line);
       background: var(--surface); font-weight: 700; cursor: pointer; text-decoration: none; color: var(--ink); transition: transform .12s var(--ease), background .2s; }
.btn:active { transform: scale(.97); }
.btn.primary { background: var(--brand); color: #fff; border: 0; box-shadow: none; }
.btn.primary:hover { background: var(--brand-deep); }
.btn.wa { background: #1fae5a; color: #fff; border: 0; }
.btn.ghost { background: transparent; }
.btn.sm { min-height: 38px; padding: 0 12px; font-size: 13.5px; border-radius: 11px; }
.btn.paid-btn { border-color: color-mix(in srgb, var(--ok) 40%, var(--line)); color: var(--ok); }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

/* ---------- student list ---------- */
.group { margin-top: 18px; }
.group-h { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin: 0 4px 8px; }
.group-h .cnt { background: var(--surface-2); border-radius: 999px; padding: 1px 8px; font-size: 12px; }
.row { display: flex; align-items: center; gap: 12px; padding: 12px; background: var(--surface); border: 1px solid transparent; border-radius: 16px; margin-bottom: 8px;
       transition: background .5s, border-color .5s; }
.row .who { flex: 1; min-width: 0; text-decoration: none; color: inherit; }
.row .who b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row .who .meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 3px; font-size: 13px; color: var(--muted); }
.row .amt { font-weight: 800; white-space: nowrap; }
.row .acts { display: flex; gap: 6px; }
.row.flash { background: var(--ok-soft); border-color: color-mix(in srgb, var(--ok) 45%, transparent); }
@media (max-width: 520px) {
  .row { flex-wrap: wrap; } .row .acts { width: 100%; } .row .acts .btn { flex: 1; }
}

/* ---------- forms ---------- */
.form { display: grid; gap: 14px; max-width: 560px; }
.field label { display: block; font-size: 13px; font-weight: 700; margin-bottom: 6px; }
.field input, .field select, .field textarea { width: 100%; min-height: 46px; padding: 11px 13px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); }
.field textarea { min-height: 110px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-soft); }
.field .err { color: var(--bad); font-size: 12.5px; margin-top: 5px; min-height: 1em; }
.field .help { color: var(--muted); font-size: 12.5px; margin-top: 5px; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.bubble { background: #dcf8c6; color: #111; border-radius: 14px 14px 14px 4px; padding: 11px 13px; max-width: 420px; font-size: 14px; white-space: pre-wrap;
          box-shadow: 0 1px 1px rgba(0, 0, 0, .08); }

/* ---------- student detail ---------- */
.dots { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.dot-m { text-align: center; font-size: 11.5px; color: var(--muted); text-transform: capitalize; }
.dot-m span { display: block; height: 38px; border-radius: 11px; margin-bottom: 5px; }
.dot-m .on_time { background: var(--ok); } .dot-m .late { background: var(--warn); } .dot-m .unpaid { background: var(--bad); }
.dot-m .pending { background: var(--surface-2); border: 2px dashed var(--line); } .dot-m .claimed { background: var(--info); } .dot-m .none { background: transparent; border: 2px dashed var(--line); opacity: .6; }
.linkbox { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; background: var(--surface-2); border-radius: 12px; padding: 8px 8px 8px 12px; font-size: 12.5px; }
.linkbox code { flex: 1 1 180px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--mono); }

/* ---------- empty / welcome / plan ---------- */
.empty { text-align: center; padding: 36px 18px; }
.empty .art { width: 84px; height: 84px; margin: 0 auto 14px; border-radius: 26px; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand); }
.steps { display: grid; gap: 10px; margin: 18px 0; counter-reset: s; }
.steps li { list-style: none; display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 14px; background: var(--surface-2); font-weight: 600; }
.steps li::before { counter-increment: s; content: counter(s); width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center;
                    background: var(--brand); color: #fff; font-weight: 800; flex: none; }
.checks { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 8px; }
.checks li { display: flex; gap: 9px; align-items: center; }
.checks li::before { content: "✓"; width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; background: var(--ok-soft); color: var(--ok); font-weight: 800; font-size: 13px; }
.meter { height: 10px; border-radius: 999px; background: var(--surface-2); overflow: hidden; margin: 10px 0 6px; }
.meter > i { display: block; height: 100%; border-radius: inherit; background: var(--brand); transition: width 1s var(--ease); }

/* ---------- added 2026-10-23: schedule, notices, page, leads, report ---------- */
.tabbar { grid-template-columns: repeat(5, 1fr); }
.tab { position: relative; }
.badge { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--bad); color: #fff; font-size: 11.5px; font-weight: 800;
         display: inline-grid; place-items: center; }
.dot-badge { position: absolute; top: 4px; right: calc(50% - 22px); margin: 0; min-width: 18px; height: 18px; font-size: 10.5px; }
.av.sm { width: 28px; height: 28px; border-radius: 9px; font-size: 12px; }
.amt small.late { display: block; font-size: 11px; font-weight: 700; color: var(--bad); text-align: right; }
.chip.paused { color: var(--muted); background: var(--surface-2); }
.dot-ic { width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand); flex: none; }
.today-card { text-decoration: none; color: inherit; display: flex; flex-direction: column; gap: 12px; }
.today-card.leads .dot-ic { background: var(--info-soft); color: var(--info); }
.tc-h { display: flex; align-items: center; gap: 10px; } .tc-h b { font-size: 15px; }
.tl { display: flex; gap: 8px; flex-wrap: wrap; }
.tl-i { display: inline-flex; align-items: center; gap: 7px; padding: 6px 10px 6px 8px; border-radius: 12px; background: var(--surface-2); font-weight: 600; font-size: 13.5px; }
.tl-i .mono { font-family: var(--font); font-size: 14px; color: var(--ink); font-weight: 800; font-variant-numeric: tabular-nums; }
.raise-card { display: flex; align-items: center; gap: 14px; text-decoration: none; color: inherit; }
.raise-card b { display: block; } .raise-card .sub { display: block; margin-top: 2px; }
.raise-card:hover, .today-card:hover { border-color: var(--brand-2); }
.raise-sum { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.raise-sum > div { display: flex; flex-direction: column; } .raise-sum b { font-size: 22px; letter-spacing: -.02em; }
.raise-sum .arrow { font-size: 22px; color: var(--muted); }
.tbl { overflow-x: auto; margin-top: 12px; }
.tbl table { width: 100%; border-collapse: collapse; font-size: 14px; }
.tbl th { text-align: left; font-size: 12px; color: var(--muted); font-weight: 700; padding: 8px 6px; border-bottom: 1px solid var(--line); }
.tbl td { padding: 9px 6px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.tbl td .av { display: inline-grid; vertical-align: middle; margin-right: 8px; }
.tbl .r { text-align: right; } .tbl tr:last-child td { border-bottom: 0; }
.fs { border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px 14px; margin: 0; display: grid; gap: 10px; }
.fs legend { font-weight: 800; font-size: 13.5px; padding: 0 6px; }
.months { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.mchip { position: relative; } .mchip input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.mchip span { display: block; text-align: center; padding: 8px 0; border-radius: 10px; border: 1px solid var(--line); font-size: 13px; font-weight: 600; text-transform: capitalize; }
.mchip input:checked + span { background: var(--brand); color: #fff; border-color: transparent; }
.mchip input:focus-visible + span { outline: 3px solid color-mix(in srgb, var(--brand) 55%, transparent); }
.banner { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 12px; font-weight: 600; font-size: 13.5px; }
.banner.ok { background: var(--ok-soft); color: var(--ok); }
.banner.warn { background: var(--warn-soft); color: var(--warn); }
a.access-banner { text-decoration: none; margin-bottom: 14px; } .access-banner svg { flex: none; }
.kpi.hero.warn-hero { background: var(--brand); } .kpi.hero.warn-hero::after { background: var(--brand-2); }
.btn.on-dark { color: #fff; border-color: rgba(255, 255, 255, .5); background: transparent; margin-top: 12px; }
.confirm-box { margin-top: 12px; padding: 12px; border-radius: 12px; background: rgba(255, 255, 255, .16); display: grid; gap: 10px; position: relative; z-index: 1; }
.confirm-box p { margin: 0; font-weight: 600; } .confirm-box .btn:not(.on-dark) { background: #fff; color: var(--ink); }
.row.sent { opacity: .7; }
.agenda { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); }
.agenda-day { display: grid; gap: 8px; align-content: start; }
.agenda-day.is-today { border-color: var(--brand-2); box-shadow: 0 0 0 3px var(--brand-soft), var(--shadow); }
.ad-h { display: flex; justify-content: space-between; align-items: baseline; }
.class-i { display: flex; align-items: center; gap: 9px; padding: 6px 4px; border-radius: 10px; }
.class-i .mono { font-family: var(--font); font-size: 14px; color: var(--ink); font-weight: 800; font-variant-numeric: tabular-nums; width: 46px; }
.class-i .cn { flex: 1; color: inherit; text-decoration: none; font-weight: 600; }
.lead { display: grid; gap: 10px; margin-bottom: 12px; }
.lead-h { display: flex; gap: 12px; align-items: center; } .lead-h .who b { display: block; } .lead-h .meta { font-size: 13px; color: var(--muted); }
.lead-msg { margin: 0; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); }
.note-form { display: grid; gap: 8px; margin: 12px 0; } .note-form textarea { width: 100%; min-height: 64px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); resize: vertical; }
.notes { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.notes li { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: start; padding: 10px; border-radius: 12px; background: var(--surface-2); font-size: 14px; }
.notes .mono { font-family: var(--mono); font-size: 12px; padding-top: 2px; }
.icon-btn.sm { width: 32px; height: 32px; border-radius: 10px; }
@media (max-width: 420px) { .months { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---------- third round: day, attendance, groups, business, materials, reviews ---------- */
.grp-dot { width: 26px; height: 26px; border-radius: 9px; display: inline-grid; place-items: center; background: var(--info-soft); color: var(--info); flex: none; }
.grp-dot svg { width: 15px; height: 15px; }
.goal-card { text-decoration: none; color: inherit; display: grid; gap: 4px; }
.goal-card .dot-ic { background: var(--ok-soft); color: var(--ok); }
.bday { display: flex; gap: 14px; align-items: flex-start; } .bday .dot-ic { background: var(--warn-soft); color: var(--warn); }
.bday-i { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 4px 0; }
.att { display: flex; gap: 4px; width: 100%; padding-left: 55px; flex-wrap: wrap; }
.att-b { min-width: 38px; height: 34px; padding: 0 9px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); font-weight: 700; font-size: 12.5px; cursor: pointer; color: var(--muted); }
.att-b.on.present, .att-b.on.makeup { background: var(--ok); color: #fff; border-color: transparent; }
.att-b.on.absent { background: var(--bad); color: #fff; border-color: transparent; }
.att-b.on.excused, .att-b.on.cancelled { background: var(--info); color: #fff; border-color: transparent; }
.att-b.mk { color: var(--ok); font-size: 12.5px; }
.class-i { flex-wrap: wrap; } .class-i.grp { text-decoration: none; color: inherit; }
.makeups { display: flex; gap: 14px; align-items: flex-start; } .makeups .dot-ic { background: var(--info-soft); color: var(--info); font-weight: 800; }
.makeups .tl-i { text-decoration: none; color: inherit; }
.group-card { display: grid; gap: 12px; }
.members { display: grid; gap: 6px; padding-top: 6px; border-top: 1px solid var(--line); }
.mem { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; min-height: 36px; }
.mem input { width: 18px; height: 18px; accent-color: var(--brand); }
.pbars { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; align-items: end; height: 130px; margin-top: 12px; }
.pb { display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; font-size: 11.5px; color: var(--muted); text-transform: capitalize; }
.pb-bars { flex: 1; width: 100%; display: flex; gap: 3px; align-items: flex-end; justify-content: center; }
.pb-bars i { width: 42%; border-radius: 6px 6px 3px 3px; min-height: 3px; }
.pb-bars .pc { background: var(--brand); } .pb-bars .pe { background: var(--lila); }
.mats { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 6px; }
.mats li { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 12px; background: var(--surface-2); }
.mats li a { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
#mform input { min-height: 42px; padding: 9px 12px; border-radius: 11px; border: 1px solid var(--line); background: var(--surface); min-width: 0; }
.mini-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 10px; }
.mini-stats div { padding: 10px; border-radius: 12px; background: var(--surface-2); display: grid; gap: 2px; }
.mini-stats b { font-size: 20px; letter-spacing: -.02em; }
.reviews { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 10px; }
.reviews li { padding: 12px; border-radius: 12px; background: var(--surface-2); display: grid; gap: 6px; }
.reviews li.hidden { opacity: .6; } .reviews p { margin: 0; }
.stars { color: #f2a93b; letter-spacing: 2px; font-size: 15px; }
.invite { display: flex; gap: 14px; align-items: flex-start; } .invite .dot-ic { background: var(--warn-soft); color: var(--warn); }
.invite b { display: block; } .invite .sub { display: block; }
.rubros { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 4px; }
.rubro { min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); font-weight: 700; cursor: pointer; }
.rubro.on { background: var(--brand); color: #fff; border-color: transparent; }

/* ---------- home sections and customizing ---------- */
.dsec { margin-top: 26px; }
.dsec:first-of-type { margin-top: 8px; }
.dsec-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 0 4px 12px; }
.dsec-h h2 { margin: 0; font-size: 21px; font-weight: 800; letter-spacing: -.025em; }
.sec-a { font-size: 13.5px; font-weight: 700; text-decoration: none; color: var(--brand); }
.tile { display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: inherit; }
@media (min-width: 720px) { .tile { min-height: 150px; } }
a.tile:hover { border-color: var(--brand-2); }
.tile-k { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.tile-v { font-size: 21px; letter-spacing: -.02em; line-height: 1.2; }
.tile-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 6px; }
.todo-tile { background: var(--brand-soft); }
.todo-tile .tile-v { color: var(--bad); font-weight: 800; font-size: 28px; letter-spacing: -.035em; }
.ok-tile { background: var(--ok-soft); }
.ok-tile .tile-v { color: var(--ok); }
.news { display: grid; gap: 8px; margin-top: 2px; }
.news-i { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; color: inherit; text-decoration: none; }
.dot-ic.sm { width: 30px; height: 30px; border-radius: 10px; } .dot-ic.sm svg { width: 16px; height: 16px; }
.dot-ic.info { background: var(--info-soft); color: var(--info); } .dot-ic.warn { background: var(--warn-soft); color: var(--warn); }
/* This month: the cartelera hero — berenjena card, big amount, the ring in rojo cuota */
.month-card { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px 22px; align-items: center; background: var(--night); color: #fff; border-radius: 24px; padding: 22px; }
.month-card .tile-k, .month-card .sub { color: var(--lila-2); }
.month-card .ring .track { stroke: var(--night-3); } .month-card .ring text { fill: #fff; } .month-card .ring .pct { fill: var(--lila); }
.mc-main { display: grid; gap: 2px; min-width: 0; }
.mc-big { font-size: clamp(36px, 9vw, 52px); font-weight: 800; letter-spacing: -.04em; line-height: .98; }
.mc-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 12px 0 0; }
.mc-stats div { background: var(--night-2); border-radius: 12px; padding: 9px 11px; min-width: 0; }
.mc-stats dt { font-size: 12px; color: var(--lila); font-weight: 600; } .mc-stats dd { margin: 2px 0 0; font-weight: 800; font-size: 17px; color: #fff !important; }
.mc-goal { grid-column: 1 / -1; display: grid; gap: 4px; padding-top: 14px; border-top: 1px solid var(--night-3); }
.mc-goal .btn { justify-self: start; background: #fff; color: var(--night); border: 0; }
.month-card .meter { background: var(--night-3); }
@media (min-width: 900px) {
  .month-card { grid-template-columns: auto minmax(0, 1fr) minmax(220px, 280px); }
  .mc-goal { grid-column: auto; padding: 0 0 0 22px; border-top: 0; border-left: 1px solid var(--night-3); }
}
@media (max-width: 520px) { .month-card { grid-template-columns: 1fr; justify-items: start; } .mc-ring .ring { width: 108px; height: 108px; } .mc-main { width: 100%; } }
.more-group summary { cursor: pointer; list-style: none; padding: 10px 4px; }
.more-group summary::-webkit-details-marker { display: none; }
.more-group summary::before { content: "▸"; margin-right: 6px; } .more-group[open] summary::before { content: "▾"; }
.sub-h { margin-top: 10px; font-size: 12px; }
.customize { margin-bottom: 6px; border-color: var(--brand-2); box-shadow: 0 0 0 3px var(--brand-soft), var(--shadow); }
.cust { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.cust li { display: flex; align-items: center; gap: 8px; padding: 10px; border-radius: 12px; background: var(--surface-2); }
.cust li.off { opacity: .55; }
.cust .grip { color: var(--muted); font-size: 14px; letter-spacing: -2px; }
.cust .cn { flex: 1; min-width: 0; } .cust .cn b { display: block; } .cust .cn .sub { display: block; font-size: 12.5px; }
.cust .icon-btn[disabled] { opacity: .35; cursor: default; }
.switch { position: relative; width: 44px; height: 26px; flex: none; }
.switch input { position: absolute; inset: 0; opacity: 0; cursor: pointer; margin: 0; z-index: 1; }
.switch span { position: absolute; inset: 0; border-radius: 999px; background: var(--line); transition: background .2s; }
.switch span::after { content: ""; position: absolute; left: 3px; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform .2s var(--ease); box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.switch input:checked + span { background: var(--brand); } .switch input:checked + span::after { transform: translateX(18px); }
.switch input:focus-visible + span { outline: 3px solid color-mix(in srgb, var(--brand) 55%, transparent); }

/* ---------- plans, extras, Pro gate ---------- */
.seg { display: inline-flex; gap: 4px; padding: 4px; border-radius: 13px; background: var(--surface); border: 1px solid var(--line); }
.seg button { min-height: 36px; padding: 0 14px; border: 0; border-radius: 10px; background: transparent; color: var(--muted); font: inherit; font-weight: 700; font-size: 14px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.seg button.on { background: var(--brand); color: var(--brand-ink); box-shadow: 0 4px 12px color-mix(in srgb, var(--brand) 30%, transparent); }
.seg .save { font-size: 11px; font-weight: 800; padding: 2px 7px; border-radius: 999px; background: var(--ok-soft); color: var(--ok); }
.seg button.on .save { background: rgba(255, 255, 255, .22); color: #fff; }
.plan-card { display: flex; flex-direction: column; gap: 8px; transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
.plan-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.plan-card.pro { border-color: var(--night); background: var(--surface); }
.plan-card.current { outline: 2px solid var(--brand); outline-offset: -1px; }
.plan-card .btn { margin-top: auto; }
.plan-card .checks { margin-bottom: 8px; }
.pc-h { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .pc-h b { font-size: 18px; margin-right: auto; }
.pc-price { font-size: 32px; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; } .pc-price small { font-size: 14px; font-weight: 600; color: var(--muted); letter-spacing: 0; }
.extra { display: flex; gap: 14px; align-items: flex-start; } .extra b { display: block; } .extra .sub { display: block; }
.ex-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; } .ex-foot b { font-size: 18px; } .ex-foot .btn { margin-left: auto; }
.brand-form { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--line); display: grid; gap: 10px; justify-items: start; }
.brand-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.brand-logo { width: 52px; height: 52px; border-radius: 14px; object-fit: contain; background: var(--surface-2); border: 1px solid var(--line); }
.brand-logo.none { display: grid; place-items: center; color: var(--muted); }
.color-pick { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 700; cursor: pointer; }
.color-pick input { width: 38px; height: 38px; padding: 0; border: 1px solid var(--line); border-radius: 11px; background: var(--surface); cursor: pointer; }
.pro-badge { display: inline-block; margin-left: auto; font-size: 10px; font-weight: 800; letter-spacing: .06em; padding: 2px 6px; border-radius: 6px; background: var(--brand-soft); color: var(--brand); vertical-align: middle; }
.tile-k .pro-badge { margin-left: 6px; }
.locked { text-align: center; padding: 36px 20px; max-width: 560px; margin: 28px auto; }
.locked h1 { margin: 8px 0 4px; font-size: 24px; letter-spacing: -.02em; text-wrap: balance; }
.lock-ic { width: 64px; height: 64px; margin: 0 auto; border-radius: 20px; display: grid; place-items: center; font-size: 28px; background: var(--brand-soft); }
.lock-ic.sm { width: 40px; height: 40px; margin: 0; border-radius: 12px; font-size: 18px; flex: none; }
a.locked-mini { text-decoration: none; color: inherit; border-style: dashed; background: var(--surface-2); }
.card.c6.locked-mini { display: flex; gap: 12px; align-items: center; } .card.c6.locked-mini b, .card.c6.locked-mini .sub { display: block; }

/* ---------- automatic reminders ---------- */
.auto-card { display: grid; gap: 12px; }
.auto-h { display: flex; gap: 12px; align-items: flex-start; } .auto-h h3 { margin: 0; } .auto-h .sub { display: block; }
.auto-steps { display: grid; gap: 12px; }
.auto-today { display: grid; gap: 8px; padding: 12px; border-radius: 12px; background: var(--surface-2); }
.auto-i { display: flex; align-items: center; gap: 8px; font-weight: 600; } .auto-i .chip { margin-left: auto; }
a.auto-locked { display: flex; gap: 12px; align-items: center; } .auto-locked b, .auto-locked .sub { display: block; }

/* ---------- share: links, QR, story and poster ---------- */
.share-links { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 10px; }
.share-links li { display: grid; gap: 8px; padding: 12px; border-radius: 12px; background: var(--surface-2); }
.share-links b { display: block; } .share-links code { font-family: var(--mono); font-size: 13px; color: var(--brand); overflow-wrap: anywhere; }
.sl-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.addr-form { margin-top: 12px; }
.addr-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .addr-row input { flex: 1 1 140px; min-width: 0; font-family: var(--mono); }
.login-wrap { position: fixed; inset: 0; overflow-y: auto; display: grid; place-items: center; padding-block: 16px; overscroll-behavior: none; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.login-card { width: min(420px, 100%); display: grid; gap: 14px; padding: 28px; }
.login-card h1 { margin: 0; font-size: 26px; letter-spacing: -.02em; } .login-card p { margin: 0; }
.gbtn { display: grid; place-items: center; min-height: 44px; }
.login-seg { display: grid; grid-template-columns: 1fr 1fr; width: 100%; } .login-seg button { justify-content: center; min-height: 42px; }
.qr-card { display: grid; justify-items: center; gap: 10px; text-align: center; } .qr-card h3 { justify-self: start; }
.qr { width: min(240px, 100%); height: auto; border-radius: 14px; border: 1px solid var(--line); }
.qr-link { font-family: var(--mono); font-weight: 700; color: var(--brand); }
.share-img { display: grid; gap: 10px; align-content: start; }
.story-prev { width: min(220px, 100%); aspect-ratio: 9 / 16; border-radius: 16px; box-shadow: var(--shadow-lg); justify-self: center; }
.poster-prev { width: min(260px, 100%); aspect-ratio: 1240 / 1754; border-radius: 8px; border: 1px solid var(--line); box-shadow: var(--shadow); justify-self: center; }
.share-cta .sub { overflow-wrap: anywhere; }
.class-i.booking { background: var(--info-soft); }
.class-i.noticed .cn { text-decoration: line-through; color: var(--muted); }
.notice-rule .field { max-width: 320px; }

[hidden] { display: none !important; }       /* hidden always wins over a component's own display */
html { touch-action: manipulation; }          /* no double-tap zoom (owner's decision: no zoom on phones) */
/* phones: 16px in form fields, so iPhone does not zoom the page when a field is tapped */
@media (max-width: 760px) { input, select, textarea { font-size: 16px; } }

img.av { object-fit: cover; display: inline-block; }
/* students list: search + quiet filter chips (one scrollable row on phones) */
.list-tools { display: grid; gap: 10px; }
.search-box { display: flex; align-items: center; gap: 8px; padding: 0 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--muted); }
.search-box input { flex: 1; min-width: 0; border: 0; background: transparent; padding: 11px 0; outline: none; }
.search-box:focus-within { border-color: var(--brand-2); }
.chips-row { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; } .chips-row::-webkit-scrollbar { display: none; }
.fchip { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface);
  color: var(--ink); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.fchip span { font-size: 11.5px; color: var(--muted); font-weight: 700; } .fchip.on { background: var(--ink); color: var(--surface); border-color: transparent; } .fchip.on span { color: inherit; opacity: .7; }
.pub-list { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 8px; }
.pub-list li { display: grid; grid-template-columns: auto 1fr auto auto; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); }
.pub-text { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 560px) { .pub-list li { grid-template-columns: 1fr auto; } .pub-list li .mono { grid-column: 1 / -1; } }
.pick-list { display: grid; gap: 8px; } .small-note { font-size: 13.5px; }
.back-btn { flex: none; }
/* phone with the fixed +54 9, class schedule with frequency */
.phone-in { display: flex; align-items: stretch; } .phone-in input { flex: 1; min-width: 0; border-top-left-radius: 0; border-bottom-left-radius: 0; }
.phone-pre { display: grid; place-items: center; padding: 0 12px; border: 1px solid var(--line); border-right: 0; border-radius: var(--radius-sm) 0 0 var(--radius-sm); background: var(--surface-2); font-weight: 700; color: var(--muted); white-space: nowrap; }
.sched-row { display: grid; gap: 6px; margin-bottom: 10px; }
.sched-main { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; align-items: center; } .sched-main select[data-freq] { grid-column: 1 / -1; grid-row: 2; }
@media (min-width: 560px) { .sched-main { grid-template-columns: 1fr 120px 1.2fr auto; } .sched-main select[data-freq] { grid-column: auto; grid-row: auto; } }
.sched-add { justify-self: start; margin-top: 2px; }
.card-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .card-h h3 { margin: 0; }
.sched-inline { display: grid; gap: 10px; margin-top: 10px; }
.sched-weeks { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 13.5px; }
.sched-weeks[hidden] { display: none; }
.sched-weeks .mchip span { min-width: 44px; min-height: 40px; padding: 9px 10px; display: grid; place-items: center; text-transform: none; }

/* ---------- guided welcome ---------- */
.wz-wrap { min-height: 100vh; display: grid; place-items: center; padding-block: 24px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px));
  background: var(--bg); }
.wizard { width: min(520px, 100%); padding: 24px; display: grid; gap: 18px; }
.wz-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.wz-dots { display: flex; gap: 6px; } .wz-dot { width: 26px; height: 6px; border-radius: 99px; background: var(--line); transition: background .3s var(--ease); }
.wz-dot.on { background: var(--brand); } .wz-dot.done { background: var(--brand-2); }
.wz-body { display: grid; gap: 12px; } .wz-body h1 { margin: 0; font-size: clamp(24px, 6vw, 30px); letter-spacing: -.03em; line-height: 1.1; text-wrap: balance; }
.wz-body > p.muted { margin: 0; } .wz-body .err { margin: 0; min-height: 1em; }
.wz-step { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--brand); }
.wz-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.wz-right { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; margin-left: auto; }
.wz-ok { width: 64px; height: 64px; border-radius: 20px; display: grid; place-items: center; background: var(--ok); color: #fff; font-size: 32px; font-weight: 800; animation: pop .45s var(--ease); }
.wz-sum { margin: 0; }

/* ---------- toast ---------- */
.toast { position: fixed; left: 50%; bottom: 96px; transform: translate(-50%, 20px); opacity: 0; z-index: 50; display: flex; align-items: center; gap: 12px;
         background: var(--ink); color: var(--bg); padding: 11px 12px 11px 16px; border-radius: 14px; box-shadow: var(--shadow-lg); font-weight: 600; font-size: 14px;
         transition: opacity .25s, transform .25s var(--ease); pointer-events: none; max-width: calc(100vw - 32px); }
.toast.show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.toast button { background: transparent; border: 0; color: var(--brand-2); font-weight: 800; cursor: pointer; padding: 6px 8px; }
@media (min-width: 960px) { .toast { bottom: 28px; } }

/* ---------- motion (subtle; off with reduced motion) ---------- */
/* content is always visible at rest: motion only moves it a little (a paused or skipped animation never hides anything) */
@keyframes rise { from { transform: translateY(10px); } to { transform: none; } }
@keyframes grow { from { transform: scaleY(.25); } to { transform: scaleY(1); } }
@keyframes pop { 0% { transform: scale(.6); opacity: 0; } 60% { transform: scale(1.15); opacity: 1; } 100% { transform: scale(1); } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.view { animation: fade .25s var(--ease); }
.reveal { animation: rise .5s var(--ease) both; animation-delay: calc(var(--i, 0) * 50ms); }
.chart .b { animation: grow .8s var(--ease) both; animation-delay: calc(var(--i, 0) * 70ms + 150ms); }
.tick { display: inline-block; animation: pop .45s var(--ease); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; }
}

/* Personalizá tu Cuoti (2026-10-26) */
.swatches { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.swatch { width: 40px; height: 40px; border-radius: 50%; border: 3px solid #fff; background: var(--c); box-shadow: 0 0 0 1px var(--line); cursor: pointer; padding: 0; transition: transform .15s var(--ease); }
.swatch:hover { transform: scale(1.08); }
.swatch.on { box-shadow: 0 0 0 3px var(--c); }
.swatch.custom { position: relative; display: grid; place-items: center; background: conic-gradient(#e5484d, #e0821b, #16a34a, #0ea5a4, #2563eb, #6c4cf5, #c0399e, #e5484d); color: #fff; font-weight: 800; overflow: hidden; }
.swatch.custom input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.brand-phone { --brand: var(--bc); margin-top: 12px; max-width: 280px; border-radius: 26px; border: 1px solid var(--line); padding: 16px; background: var(--bg, #f6f6fb); display: grid; gap: 12px; }
.bp-top { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.bp-top img, .bp-logo { width: 32px; height: 32px; border-radius: 9px; object-fit: contain; background: #fff; }
.bp-logo { display: grid; place-items: center; color: #fff; font-weight: 800; background: var(--bc); }
.bp-card { background: #fff; border-radius: 18px; padding: 14px; display: grid; gap: 6px; box-shadow: var(--shadow); }
.bp-card .num { font-size: 26px; }
.bp-btn { justify-self: start; padding: 8px 14px; border-radius: 12px; color: #fff; font-weight: 700; font-size: 13px; background: var(--bc); }
.bp-tabs { display: flex; justify-content: space-around; }
.bp-tabs i { width: 22px; height: 6px; border-radius: 3px; background: var(--line); }
.bp-tabs i.on { background: var(--bc); }
/* Agregar a la pantalla de inicio (2026-10-26) */
.install-card { position: relative; display: grid; grid-template-columns: 44px 1fr; align-items: center; column-gap: 12px; row-gap: 10px; padding-right: 44px; margin-bottom: 14px; border: 1px solid transparent; background: var(--brand-soft); }
.install-card img { border-radius: 12px; flex: none; box-shadow: var(--shadow); }
.install-card .ic-t { flex: 1; min-width: 0; display: grid; gap: 2px; }
.install-card .sub { font-size: 13px; }.install-card .btn { grid-column: 2; justify-self: start; }
.install-card [data-install="hide"] { position: absolute; top: 10px; right: 10px; }
/* deleting the account (teacher) / the student's data */
.btn.danger { background: var(--bad); color: #fff; border: 0; }
.btn.danger:disabled { opacity: .6; }
.acc-link { color: var(--bad); border-color: transparent; }
.acc-card { display: grid; gap: 14px; max-width: 640px; }
.acc-list { margin: 0; padding-left: 20px; display: grid; gap: 8px; }
.acc-alt { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 14px; border-radius: 12px; background: var(--surface-2); }
.acc-alt p { margin: 0; flex: 1 1 240px; }
.acc-form { display: grid; gap: 12px; padding-top: 14px; border-top: 1px solid var(--line); }
.acc-form .btn { justify-self: start; }
.s-forget { border-color: color-mix(in srgb, var(--bad) 30%, var(--line)); background: var(--bad-soft); display: grid; gap: 12px; }
.s-forget p { margin: 0; }