/* Team2Talk (t3) — estilo oscuro verde azulado (tema claro opcional) */
:root {
  --accent: #21c27e; --accent-2: #179e66; --accent-soft: rgba(33,194,126,.16);
  --violet: #2bb3a3; --violet-2: #6fd8ca; --glow: rgba(43,179,163,.4); --ok: #2ee6a6; --live: #ff3d6e;
  --app: #0b141a; --panel: #111b21; --panel-2: #16232a; --head: #1a262d; --chat: #0b141a;
  --out: #035e4c; --out-2: #024a3c; --in: #1f2c33; --text: #e9edef; --text-2: #c5ced3; --muted: #8696a0;
  --border: #233138; --border-2: #2f3f47; --hover: #1d2a31; --active: #22323a; --input: #1f2c33; --field: #1a262d;
  --shadow: 0 1px 0 rgba(255,255,255,.03) inset, 0 6px 18px rgba(0,0,0,.35); --pop: 0 20px 60px rgba(0,0,0,.6);
  --danger: #ff5c6c; --warn: #f5a623; --blue: #53bdeb; --sys: #1b2830; --sys-text: #9eb0b8;
  --doodle: rgba(255,255,255,.035); --r: 14px;
  --font: "Inter", "Segoe UI", system-ui, -apple-system, Arial, "Segoe UI Emoji", "Apple Color Emoji", sans-serif;
  --display: "Inter", "Segoe UI", system-ui, sans-serif;
  color-scheme: dark;
}
:root[data-theme="light"] {
  --accent: #14a86b; --accent-2: #0f8a57; --accent-soft: rgba(20,168,107,.14); --glow: rgba(43,179,163,.25); --violet: #1f9c8e; --violet-2: #0f7d71;
  --app: #eef1ef; --panel: #ffffff; --panel-2: #f7f8f8; --head: #f0f2f5; --chat: #efeae2;
  --out: #d9fdd3; --out-2: #cff5c8; --in: #ffffff; --text: #111b21; --text-2: #3b4a54; --muted: #667781;
  --border: #e2e6e4; --border-2: #d1d7db; --hover: #f5f6f6; --active: #e9edef; --input: #ffffff; --field: #f0f2f5;
  --shadow: 0 1px 2px rgba(11,20,26,.08), 0 4px 14px rgba(11,20,26,.06); --pop: 0 20px 50px rgba(11,20,26,.2);
  --sys: #ffffff; --sys-text: #54656f; --doodle: rgba(0,0,0,.04); color-scheme: light;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { font: 14.5px/1.45 var(--font); background: var(--app); color: var(--text); -webkit-font-smoothing: antialiased; overflow: hidden; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
input, textarea, select { font: inherit; color: inherit; }
a { color: #027eb5; }
[hidden] { display: none !important; }
h1, h2, h3, h4 { margin: 0; font-weight: 600; }
svg { flex-shrink: 0; }
.muted { color: var(--muted); }
.center { text-align: center; }
.grow { flex: 1; }
.err { color: var(--danger); min-height: 1em; margin: 0; font-size: 13px; }
.late { color: var(--danger); }
.on-txt { color: var(--accent); }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-thumb { background: rgba(134,150,160,.35); border-radius: 3px; }

/* ---------- avatar ---------- */
.avatar { width: var(--s); height: var(--s); min-width: var(--s); border-radius: 50%; background: var(--c); color: #fff; display: grid; place-items: center; font-weight: 600; font-size: calc(var(--s) * .38); letter-spacing: .5px; user-select: none; }

/* ---------- botones ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 38px; padding: 0 18px; border-radius: 20px; font-weight: 600; transition: background .15s, opacity .15s; white-space: nowrap; }
.btn svg { width: 18px; height: 18px; }
.btn.primary { background: var(--accent); color: #fff; }
.btn.primary:hover { background: var(--accent-2); }
.btn.ghost { color: var(--accent); border: 1px solid var(--border); background: var(--panel); }
.btn.ghost:hover { background: var(--hover); }
.btn.danger { background: var(--danger); color: #fff; }
.btn.danger-ghost { color: var(--danger); border: 1px solid var(--border); }
.btn.danger-ghost:hover { background: var(--hover); }
.btn.sm { height: 30px; padding: 0 12px; font-size: 13px; }
.btn.block { width: 100%; }
.btn:disabled { opacity: .6; cursor: default; }
.btn.loading { position: relative; color: transparent !important; }
.btn.loading::after { content: ''; position: absolute; width: 16px; height: 16px; border: 2px solid #fff; border-right-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; }
.btn.ghost.loading::after { border-color: var(--accent); border-right-color: transparent; }
@keyframes spin { to { transform: rotate(360deg); } }
.icon-btn { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: var(--muted); transition: background .15s; }
.icon-btn:hover { background: var(--active); }
.icon-btn.sm { width: 32px; height: 32px; }
.icon-btn.sm svg { width: 18px; height: 18px; }
.icon-btn.danger { color: var(--danger); }
.link { color: var(--accent); font-weight: 600; font-size: 13px; }
.chip { height: 32px; padding: 0 14px; border-radius: 16px; background: var(--field); color: var(--muted); font-size: 14px; white-space: nowrap; transition: background .15s; }
.chip:hover { background: var(--active); }
.chip.on { background: var(--accent-soft); color: var(--accent-2); font-weight: 600; }
:root[data-theme="dark"] .chip.on { color: #d9fdd3; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .chip.on { color: #d9fdd3; } }
.pill { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 11px; font-size: 12px; font-weight: 600; background: var(--field); color: var(--muted); white-space: nowrap; }
.pill.sm { height: 18px; font-size: 11px; }
.pill.green, .pill.good { background: #d9fdd3; color: #0a7a5a; }
.pill.blue { background: #dcf1fb; color: #0a6a9a; }
.pill.red, .pill.low { background: #fde3e7; color: #c0002c; }
.pill.mid { background: #fdefd9; color: #a55a00; }

/* ---------- formularios ---------- */
.form { display: flex; flex-direction: column; gap: 14px; }
.form label, .lbl { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--muted); font-weight: 600; }
.lbl.between { flex-direction: row; justify-content: space-between; align-items: center; }
.input { width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--input); outline: none; font-size: 15px; font-weight: 400; color: var(--text); transition: border-color .15s, box-shadow .15s; }
.input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.input.sm { padding: 5px 8px; font-size: 13px; width: auto; }
.input.inline { border-color: transparent; background: transparent; padding: 4px 0; resize: vertical; }
.input.inline:focus { border-color: var(--accent); padding: 4px 8px; box-shadow: none; }
textarea.input { resize: vertical; min-height: 44px; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.hint { margin: 0; font-size: 13px; color: var(--muted); background: var(--field); padding: 8px 12px; border-radius: 8px; }
.form label.check { flex-direction: row; align-items: center; gap: 8px; font-weight: 400; color: var(--text); font-size: 14px; }
.check input { accent-color: var(--accent); width: 17px; height: 17px; }
.searchbar { display: flex; align-items: center; gap: 12px; background: var(--field); border-radius: 8px; padding: 0 12px; height: 36px; color: var(--muted); }
.searchbar svg { width: 18px; height: 18px; }
.searchbar input { flex: 1; border: 0; background: none; outline: none; font-size: 14px; color: var(--text); min-width: 0; }
.searchbar.sm { height: 32px; }
.colors { display: flex; flex-wrap: wrap; gap: 8px; }
.sw { width: 28px; height: 28px; border-radius: 50%; border: 3px solid transparent; box-shadow: 0 0 0 1px var(--border); transition: transform .12s; }
.sw:hover { transform: scale(1.1); }
.sw.on { border-color: var(--panel); box-shadow: 0 0 0 2px var(--accent); }
.file-pick { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--muted); }
.switch-row { display: flex !important; flex-direction: row !important; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; color: var(--text) !important; font-weight: 400 !important; padding: 8px 0; position: relative; }
.switch-row > span { display: flex; align-items: center; gap: 14px; color: var(--muted); }
.switch-row > span > span { display: flex; flex-direction: column; color: var(--text); }
.switch-row small { color: var(--muted); font-size: 12.5px; }
.switch-row input { position: absolute; opacity: 0; pointer-events: none; }
.sw-ui { width: 36px; height: 20px; border-radius: 10px; background: #c4c9cc; position: relative; flex-shrink: 0; transition: background .15s; }
.sw-ui::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .15s; box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.switch-row input:checked + .sw-ui { background: var(--accent); }
.switch-row input:checked + .sw-ui::after { transform: translateX(16px); }
.switch-row input:focus-visible + .sw-ui { outline: 2px solid var(--accent); outline-offset: 3px; }
.switch-row.tight { padding: 0; display: inline-flex !important; }

/* ---------- autenticación ---------- */
.auth-page { min-height: 100vh; min-height: 100dvh; height: auto; overflow: visible; display: grid; grid-template-columns: 1.1fr 1fr; align-items: center; align-content: safe center; gap: 40px; padding: 40px max(24px, 6vw);
  background: radial-gradient(1200px 600px at 0% 0%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 60%), linear-gradient(160deg, var(--app), var(--panel)); }
body:has(#app.auth-page) { height: auto; min-height: 100%; overflow-x: hidden; overflow-y: auto; }
.auth-hero { max-width: 560px; }
.brand-big { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.brand-big h1 { font-size: 44px; letter-spacing: -1px; }
.logo { position: relative; width: 64px; height: 64px; border-radius: 18px; background: var(--accent); color: #fff; display: grid; place-items: center; box-shadow: 0 10px 30px color-mix(in srgb, var(--accent) 40%, transparent); }
.logo svg { width: 36px; height: 36px; }
.logo span { position: absolute; right: -8px; bottom: -8px; font-size: 26px; }
.logo.big { width: 96px; height: 96px; border-radius: 28px; margin: 0 auto 22px; }
.logo.big svg { width: 54px; height: 54px; }
.tagline { font-size: 18px; color: var(--text-2); margin: 0 0 22px; line-height: 1.5; }
.feature-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.feature-list li { background: var(--panel); padding: 12px 16px; border-radius: 12px; box-shadow: var(--shadow); font-size: 15px; }
.auth-card { background: var(--panel); border-radius: 18px; padding: 26px; box-shadow: var(--pop); max-width: 440px; width: 100%; justify-self: center; }
.auth-google-error { display: grid; gap: 7px; margin: 0 0 14px; padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--danger) 35%, transparent); border-radius: 12px; background: color-mix(in srgb, var(--danger) 9%, var(--panel)); color: var(--text); font-size: 13px; line-height: 1.45; }
.auth-google-error span { color: var(--text-2); }
.auth-google-error a { color: var(--accent); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
body:has(.maintenance-page) { height: auto; overflow-y: auto; }
.maintenance-page { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: 36px 20px; color: #edf5ec; background: radial-gradient(ellipse at 15% 0%, #164b3f 0%, transparent 60%), #0b191d; }
.maintenance-card { width: min(100%, 620px); text-align: center; }
.maintenance-logo { width: 74px; height: 74px; object-fit: contain; margin: 0 auto 18px; }
.maintenance-eyebrow { font-size: 11px; letter-spacing: .18em; color: #a5bfb4; margin: 0 0 36px; }
.maintenance-chip { display: inline-block; padding: 8px 14px; border: 1px solid #396557; border-radius: 30px; color: #97e7bb; font-size: 12px; }
.maintenance-card h1 { font: 500 clamp(32px, 6vw, 56px)/1.12 Georgia, serif; letter-spacing: -.035em; margin: 24px 0 20px; }
.maintenance-message { max-width: 490px; margin: 0 auto 30px; color: #b7c9c3; font-size: 16px; line-height: 1.7; overflow-wrap: anywhere; white-space: pre-line; }
.maintenance-card .btn { max-width: 100%; height: auto; min-height: 44px; white-space: normal; padding: 12px 20px; }
.maintenance-foot { color: #9bb3aa; font-size: 12px; line-height: 1.6; margin: 22px 0 32px; }
.maintenance-admin { color: #b8cbc3; font-size: 12px; text-decoration: underline; text-underline-offset: 4px; }
.seg { display: grid; grid-template-columns: repeat(3, 1fr); background: var(--field); border-radius: 12px; padding: 4px; margin-bottom: 20px; }
.seg button { height: 36px; border-radius: 9px; font-weight: 600; color: var(--muted); font-size: 13.5px; }
.seg button.on { background: var(--panel); color: var(--text); box-shadow: var(--shadow); }
.demo { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border); display: flex; flex-wrap: wrap; gap: 8px; }
.demo .lbl { width: 100%; }
@media (max-width: 860px) { .auth-page { grid-template-columns: 1fr; padding: 24px 16px; } .feature-list { display: none; } .brand-big h1 { font-size: 34px; } .tagline { font-size: 15px; } }
@media (min-width: 861px) and (max-height: 760px) { .auth-page { align-content: start; padding-top: 24px; padding-bottom: 32px; } }

/* ---------- layout principal ---------- */
.layout { height: 100vh; height: 100dvh; display: grid; grid-template-columns: 64px minmax(320px, 420px) 1fr 0; background: var(--app); }
.layout.drawer-open { grid-template-columns: 64px minmax(320px, 420px) 1fr 380px; }
.layout.full { grid-template-columns: 64px 0 1fr 0; }
.layout.full .side { display: none; }
.rail { grid-column: 1; background: var(--head); border-right: 1px solid var(--border); display: flex; flex-direction: column; justify-content: space-between; align-items: center; padding: 10px 0; }
.rail-top, .rail-bottom { display: flex; flex-direction: column; gap: 6px; align-items: center; }
.rail-btn { position: relative; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: var(--muted); transition: background .15s; }
.rail-btn:hover { background: var(--active); }
.rail-btn.on { background: var(--active); color: var(--text); }
.rail-lbl { display: none; }
.rail-badge { position: absolute; top: 2px; right: 0; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--accent); color: #fff; font-size: 11px; font-weight: 700; display: none; place-items: center; }
.rail-badge.show { display: grid; }
.rail-me { border-radius: 50%; padding: 2px; }
.side { grid-column: 2; background: var(--panel); border-right: 1px solid var(--border); display: flex; flex-direction: column; min-width: 0; overflow: hidden; }
.side-head { height: 64px; padding: 0 12px 0 20px; display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; }
.side-title h2 { font-size: 22px; }
.side-title small { color: var(--muted); font-size: 12.5px; }
.head-actions { display: flex; gap: 4px; align-items: center; }
.side > .searchbar { margin: 0 12px 8px; }
.filters { display: flex; gap: 8px; padding: 2px 12px 10px; overflow-x: auto; flex-shrink: 0; }
.filters::-webkit-scrollbar { display: none; }
.chat-list { flex: 1; overflow-y: auto; }
.chat-item { width: 100%; display: flex; align-items: center; gap: 14px; padding: 0 14px; text-align: left; transition: background .1s; }
.chat-item:hover { background: var(--hover); }
.chat-item.on { background: var(--active); }
.av-wrap { position: relative; padding: 10px 0; }
.av-wrap .dot { position: absolute; right: 0; bottom: 12px; width: 13px; height: 13px; border-radius: 50%; background: #25d366; border: 2px solid var(--panel); }
.av-wrap .kind { position: absolute; right: -4px; bottom: 6px; font-size: 15px; font-style: normal; filter: drop-shadow(0 1px 1px rgba(0,0,0,.25)); }
.av-wrap.ring .avatar { box-shadow: 0 0 0 2px var(--panel), 0 0 0 4px var(--accent); }
.plus-badge { position: absolute; right: -2px; bottom: 8px; width: 20px; height: 20px; border-radius: 50%; background: var(--accent); color: #fff; font-style: normal; display: grid; place-items: center; font-weight: 700; border: 2px solid var(--panel); }
.ci-main { flex: 1; min-width: 0; border-bottom: 1px solid var(--border); padding: 12px 0; display: flex; flex-direction: column; gap: 2px; align-self: stretch; justify-content: center; }
.chat-item:last-child .ci-main { border-bottom: 0; }
.ci-top, .ci-bottom { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ci-name { font-weight: 500; font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ci-top small { color: var(--muted); font-size: 12px; flex-shrink: 0; }
.ci-top small.hot { color: var(--accent); font-weight: 600; }
.ci-prev { color: var(--muted); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; display: flex; align-items: center; gap: 3px; }
.ci-prev .lock svg { width: 14px; height: 14px; vertical-align: -2px; }
.typing-txt { color: var(--accent); font-weight: 500; }
.badge { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--accent); color: #fff; font-size: 12px; font-weight: 700; display: grid; place-items: center; }
.muted-ic { font-size: 12px; opacity: .7; }
.list-sep { padding: 14px 20px 6px; color: var(--accent); font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .3px; }
.empty-list { padding: 40px 20px; text-align: center; color: var(--muted); }
.loading-block { padding: 40px; text-align: center; color: var(--muted); }

/* ---------- área principal ---------- */
.main { grid-column: 3; position: relative; display: flex; flex-direction: column; min-width: 0; overflow: hidden; background: var(--chat); }
.main.drop::after { content: 'Suelta los archivos para enviarlos'; position: absolute; inset: 12px; border: 3px dashed var(--accent); border-radius: 16px; background: color-mix(in srgb, var(--panel) 85%, transparent); display: grid; place-items: center; font-size: 20px; font-weight: 600; color: var(--accent); z-index: 20; }
.empty-main { margin: auto; text-align: center; max-width: 460px; padding: 30px; color: var(--muted); }
.empty-main h2 { color: var(--text); font-weight: 300; font-size: 30px; margin-bottom: 12px; }
.empty-main p { line-height: 1.6; }
.empty-main small { display: inline-flex; align-items: center; gap: 6px; margin-top: 30px; }
.empty-main small svg { width: 14px; height: 14px; }
.empty-main.inline { margin: 40px auto; }
.empty-main.inline .btn { margin-top: 12px; }
.layout:not(.full) .main:has(.empty-main) { background: var(--head); border-bottom: 6px solid var(--accent); }

.chat-head { height: 64px; background: var(--head); display: flex; align-items: center; gap: 8px; padding: 0 12px 0 16px; flex-shrink: 0; border-left: 1px solid var(--border); z-index: 2; }
.chat-head .back { display: none; }
.ch-info { flex: 1; display: flex; align-items: center; gap: 14px; text-align: left; min-width: 0; }
.ch-info > div:not(.avatar) { min-width: 0; display: flex; flex-direction: column; }
.ch-info b { font-weight: 500; font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch-info small { color: var(--muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pinbar { display: flex; align-items: center; gap: 12px; padding: 8px 18px; background: var(--panel); border-bottom: 1px solid var(--border); cursor: pointer; flex-shrink: 0; z-index: 1; }
.pinbar .pin-ic svg { width: 18px; height: 18px; color: var(--muted); }
.pinbar div { display: flex; flex-direction: column; min-width: 0; border-left: 3px solid var(--warn); padding-left: 10px; }
.pinbar b { font-size: 12.5px; color: var(--warn); }
.pinbar span { font-size: 13.5px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msg-search { position: absolute; top: 64px; right: 0; width: min(400px, 100%); bottom: 0; background: var(--panel); z-index: 5; display: flex; flex-wrap: wrap; align-content: flex-start; gap: 8px; padding: 12px; box-shadow: var(--pop); }
.msg-search input { flex: 1; padding: 9px 12px; border-radius: 8px; border: 0; background: var(--field); outline: none; }
.search-results { width: 100%; overflow-y: auto; max-height: calc(100% - 50px); }
.search-results button { width: 100%; text-align: left; padding: 10px 6px; border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: 2px; }
.search-results button:hover { background: var(--hover); }
.search-results small { color: var(--muted); }

.messages { flex: 1; overflow-y: auto; padding: 14px 6% 10px; display: flex; flex-direction: column;
  background-color: var(--chat);
  background-image: radial-gradient(var(--doodle) 1.5px, transparent 1.6px), radial-gradient(var(--doodle) 1.5px, transparent 1.6px);
  background-size: 28px 28px; background-position: 0 0, 14px 14px; }
.load-more { text-align: center; color: var(--muted); font-size: 12px; padding: 8px; }
.day-sep { text-align: center; margin: 10px 0; position: sticky; top: 4px; z-index: 1; }
.day-sep span { background: var(--sys); color: var(--sys-text); font-size: 12.5px; padding: 5px 12px; border-radius: 8px; box-shadow: var(--shadow); text-transform: capitalize; }
.sys-pill { align-self: center; max-width: 80%; text-align: center; background: var(--sys); color: var(--sys-text); font-size: 12.5px; padding: 6px 12px; border-radius: 8px; box-shadow: var(--shadow); margin: 6px 0; }
.sys-pill.e2e { background: #fdf4c5; color: #54656f; }
:root[data-theme="dark"] .sys-pill.e2e { background: #182229; color: #ffd279; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .sys-pill.e2e { background: #182229; color: #ffd279; } }

.msg-row { display: flex; flex-direction: column; margin-top: 10px; position: relative; }
.msg-row.cont { margin-top: 2px; }
.msg-row.out { align-items: flex-end; }
.msg-row.in { align-items: flex-start; }
.msg-row.flash .bubble { animation: flash 1.6s; }
@keyframes flash { 0%, 60% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 55%, transparent); } }
.bubble { position: relative; max-width: min(65%, 560px); padding: 6px 7px 8px 9px; border-radius: 8px; box-shadow: var(--shadow); background: var(--in); word-wrap: break-word; overflow-wrap: anywhere; }
.out .bubble { background: var(--out); }
.msg-row:not(.cont).in .bubble { border-top-left-radius: 0; }
.msg-row:not(.cont).out .bubble { border-top-right-radius: 0; }
.msg-row:not(.cont).in .bubble::before, .msg-row:not(.cont).out .bubble::before { content: ''; position: absolute; top: 0; width: 8px; height: 13px; }
.msg-row:not(.cont).in .bubble::before { left: -8px; background: linear-gradient(to bottom left, var(--in) 50%, transparent 50%); }
.msg-row:not(.cont).out .bubble::before { right: -8px; background: linear-gradient(to bottom right, var(--out) 50%, transparent 50%); }
.bubble.edu { width: min(400px, 85vw); max-width: 85%; padding: 0; overflow: hidden; }
.bubble.flagged { outline: 1px dashed color-mix(in srgb, var(--warn) 60%, transparent); }
.sender { font-size: 13px; font-weight: 600; margin-bottom: 2px; padding-right: 22px; }
.bubble.edu .sender { padding: 8px 12px 0; }
.role-tag { font-weight: 400; color: var(--muted); font-size: 11.5px; }
.text { font-size: 14.5px; line-height: 1.38; white-space: normal; padding-right: 4px; }
.text::after { content: ''; display: inline-block; width: 64px; }
.out .text::after { width: 84px; }
.meta { float: right; display: flex; align-items: center; gap: 3px; font-size: 11px; color: var(--muted); margin: -10px 0 -5px 6px; position: relative; top: 6px; }
.bubble.edu .meta, .type-image .meta, .type-file .meta, .type-audio .meta { float: none; justify-content: flex-end; margin: 4px 8px 4px 0; top: 0; }
.type-image .meta:last-child { position: absolute; right: 8px; bottom: 8px; margin: 0; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.6); }
.type-image:has(.text) .meta:last-child { position: static; color: var(--muted); text-shadow: none; }
.meta svg { width: 16px; height: 16px; }
.meta .pin-ic svg { width: 12px; height: 12px; }
.ticks { display: inline-flex; color: var(--muted); }
.ticks .read { color: var(--blue); display: inline-flex; }
.msg-menu { position: absolute; top: 2px; right: 2px; width: 26px; height: 22px; border-radius: 0 6px 0 12px; display: grid; place-items: center; color: var(--muted); opacity: 0; background: radial-gradient(at top right, var(--in) 60%, transparent 80%); z-index: 2; transition: opacity .12s; }
.out .msg-menu { background: radial-gradient(at top right, var(--out) 60%, transparent 80%); }
.bubble.edu .msg-menu { background: transparent; color: #fff; }
.msg-menu svg { width: 20px; height: 20px; }
.bubble:hover .msg-menu { opacity: 1; }
.quote { display: flex; flex-direction: column; background: rgba(0,0,0,.05); border-left: 4px solid var(--accent); border-radius: 6px; padding: 5px 10px; margin-bottom: 4px; cursor: pointer; min-width: 0; }
.quote b { font-size: 12.5px; color: var(--accent); }
.quote span { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 360px; }
:root[data-theme="dark"] .quote { background: rgba(0,0,0,.2); }
.bubble.edu .quote { margin: 6px 8px 0; }
.deleted { color: var(--muted); font-style: italic; font-size: 14px; padding-right: 60px; }
.msg-img { display: block; max-width: 100%; width: 330px; max-height: 360px; object-fit: cover; border-radius: 6px; cursor: zoom-in; margin: -2px -3px 0 -5px; }
.type-image .text { margin-top: 4px; }
.file-card { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 6px; background: rgba(0,0,0,.05); color: var(--text); text-decoration: none; min-width: 240px; margin: -1px -3px 0 -5px; }
:root[data-theme="dark"] .file-card { background: rgba(0,0,0,.2); }
.file-card > svg { color: var(--muted); }
.fi { position: relative; color: #5f66cd; display: grid; place-items: center; }
.fi svg { width: 36px; height: 36px; }
.fi b { position: absolute; bottom: 6px; font-size: 8px; color: #5f66cd; }
.fn { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.fn b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fn small { color: var(--muted); }
.voice { display: flex; align-items: center; gap: 10px; min-width: 260px; padding: 4px 2px 0; }
.voice .play { width: 34px; height: 34px; display: grid; place-items: center; color: var(--muted); }
.voice .play svg { width: 28px; height: 28px; }
.wave { flex: 1; display: flex; align-items: center; gap: 2px; height: 30px; }
.wave i { flex: 1; background: color-mix(in srgb, var(--muted) 55%, transparent); border-radius: 2px; min-width: 2px; transition: background .1s; }
.wave i.done { background: var(--accent); }
.voice .dur { font-size: 11px; color: var(--muted); position: absolute; left: 52px; bottom: 6px; }
.voice-av { order: -1; }
.reactions { display: flex; gap: 2px; margin-top: -6px; padding: 0 8px; z-index: 1; }
.reactions span { background: var(--panel); border-radius: 12px; padding: 1px 6px; font-size: 13px; box-shadow: var(--shadow); cursor: pointer; border: 1px solid var(--border); }
.reactions span.mine { border-color: var(--accent); }
.to-bottom { position: absolute; right: 22px; bottom: 80px; width: 42px; height: 42px; border-radius: 50%; background: var(--panel); color: var(--muted); box-shadow: var(--pop); display: grid; place-items: center; z-index: 3; }

/* ---------- tarjetas educativas ---------- */
.edu-tag { background: var(--k); color: #fff; font-size: 11.5px; font-weight: 700; letter-spacing: .6px; padding: 7px 12px; }
.edu-body { padding: 10px 12px 2px; display: flex; flex-direction: column; gap: 8px; }
.edu-body h4 { font-size: 15.5px; line-height: 1.3; }
.edu-body p { margin: 0; color: var(--text-2); font-size: 14px; }
.edu-body.announce { font-size: 15px; line-height: 1.45; padding-bottom: 8px; background: color-mix(in srgb, #e67e22 7%, transparent); }
.edu-facts { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; color: var(--muted); }
.edu-facts .late { color: var(--danger); }
.edu-facts .live { color: var(--accent); font-weight: 600; }
.edu-status { font-size: 13.5px; padding: 8px 10px; border-radius: 8px; background: var(--field); }
.edu-status.ok { background: color-mix(in srgb, #25d366 16%, transparent); }
.edu-status.late { background: color-mix(in srgb, var(--danger) 12%, transparent); }
.edu-status.sent { background: color-mix(in srgb, #2980b9 13%, transparent); }
.edu-status.pending { background: color-mix(in srgb, #f1c40f 18%, transparent); }
.feedback { font-style: italic; color: var(--text-2); margin-top: 4px; font-size: 13.5px; }
.edu-btn { height: 38px; border-radius: 8px; font-weight: 600; color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); background: var(--panel); transition: background .12s; }
.edu-btn:hover { background: var(--hover); }
.edu-btn.big { height: 46px; background: var(--accent); color: #fff; border: 0; font-size: 15px; }
.edu-btn.big:hover { background: var(--accent-2); }
.edu-progress { display: flex; flex-direction: column; gap: 4px; }
.edu-progress small { color: var(--muted); font-size: 12.5px; }
.bar { height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--muted) 22%, transparent); overflow: hidden; }
.bar span { display: block; height: 100%; background: var(--accent); border-radius: 3px; transition: width .3s; }
.opts { display: flex; flex-direction: column; gap: 6px; }
.opt { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 8px; border: 1px solid var(--border); background: var(--panel); text-align: left; transition: background .12s, border-color .12s; }
.opt:not(:disabled):hover { border-color: #8e44ad; background: color-mix(in srgb, #8e44ad 7%, var(--panel)); }
.opt:disabled { cursor: default; }
.opt .letter, .opt-row .letter { width: 24px; height: 24px; border-radius: 50%; background: var(--field); display: grid; place-items: center; font-size: 12px; font-weight: 700; color: var(--muted); flex-shrink: 0; }
.opt .txt { flex: 1; }
.opt small { color: var(--muted); font-weight: 600; }
.opt.correct { border-color: #25d366; background: color-mix(in srgb, #25d366 14%, var(--panel)); }
.opt.correct .letter { background: #25d366; color: #fff; }
.opt.wrong { border-color: var(--danger); background: color-mix(in srgb, var(--danger) 10%, var(--panel)); }
.opt.wrong .letter { background: var(--danger); color: #fff; }
.explain { font-size: 13.5px; background: var(--field); padding: 8px 10px; border-radius: 8px; color: var(--text-2); }
.poll-opt { display: grid; grid-template-columns: 22px 1fr auto; grid-template-rows: auto auto; gap: 4px 10px; align-items: center; padding: 6px 2px; text-align: left; }
.poll-opt .chk { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--muted); display: grid; place-items: center; font-size: 12px; color: #fff; font-weight: 700; }
.poll-opt.on .chk { background: var(--accent); border-color: var(--accent); }
.poll-opt b { font-size: 13px; color: var(--muted); }
.poll-opt .bar { grid-column: 2 / 4; }

/* ---------- compositor ---------- */
.composer-wrap { background: var(--head); flex-shrink: 0; position: relative; z-index: 2; }
.composer { display: flex; align-items: flex-end; gap: 6px; padding: 8px 14px; min-height: 62px; }
.composer textarea { flex: 1; resize: none; border: 0; outline: none; background: var(--input); border-radius: 10px; padding: 11px 14px; font-size: 15px; max-height: 140px; line-height: 1.35; margin-bottom: 1px; }
.send-btn { width: 46px; height: 46px; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; flex-shrink: 0; transition: transform .12s, background .12s; }
.send-btn:hover { background: var(--accent-2); }
.send-btn:active { transform: scale(.93); }
.composer > .icon-btn { margin-bottom: 3px; }
.composer.recording { align-items: center; }
.rec-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--danger); animation: pulse 1s infinite; margin-left: 8px; }
@keyframes pulse { 50% { opacity: .3; } }
.rec-time { font-variant-numeric: tabular-nums; font-size: 16px; min-width: 40px; }
.rec-hint { flex: 1; color: var(--muted); }
.readonly { padding: 20px; text-align: center; color: var(--muted); display: flex; align-items: center; justify-content: center; gap: 8px; }
.readonly svg { width: 18px; height: 18px; }
.reply-bar { display: flex; align-items: center; gap: 10px; padding: 8px 14px 0 70px; }
.reply-bar .quote { flex: 1; margin: 0; background: var(--panel); }
.emoji-panel { position: absolute; bottom: 100%; left: 12px; width: 340px; max-width: calc(100vw - 24px); display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; padding: 10px; background: var(--panel); border-radius: 12px; box-shadow: var(--pop); margin-bottom: 6px; }
.emoji-panel button { font-size: 24px; height: 38px; border-radius: 8px; }
.emoji-panel button:hover { background: var(--hover); }
.attach-menu { position: absolute; bottom: 100%; left: 56px; background: var(--panel); border-radius: 14px; box-shadow: var(--pop); padding: 8px; display: flex; flex-direction: column; min-width: 230px; margin-bottom: 6px; animation: pop .14s ease-out; }
.attach-menu button { display: flex; align-items: center; gap: 14px; padding: 8px 12px; border-radius: 8px; font-size: 15px; text-align: left; }
.attach-menu button:hover { background: var(--hover); }
.attach-menu button span { width: 36px; height: 36px; border-radius: 50%; background: var(--k); color: #fff; display: grid; place-items: center; font-size: 18px; }
.attach-menu button span svg { width: 20px; height: 20px; }
.am-sep { font-size: 11.5px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); padding: 10px 12px 4px; border-top: 1px solid var(--border); margin-top: 4px; font-weight: 600; }
@keyframes pop { from { opacity: 0; transform: translateY(8px) scale(.97); } }

/* ---------- menú contextual ---------- */
.ctx { position: fixed; z-index: 100; background: var(--panel); border-radius: 12px; box-shadow: var(--pop); padding: 6px; min-width: 210px; animation: pop .12s ease-out; }
.ctx > button { display: flex; align-items: center; gap: 12px; width: 100%; padding: 9px 12px; border-radius: 8px; text-align: left; font-size: 14.5px; }
.ctx > button svg { width: 18px; height: 18px; color: var(--muted); }
.ctx > button:hover { background: var(--hover); }
.ctx-react { display: flex; gap: 2px; padding: 2px 4px 8px; border-bottom: 1px solid var(--border); margin-bottom: 4px; }
.ctx-react button { font-size: 22px; width: 36px; height: 36px; border-radius: 50%; transition: transform .1s; }
.ctx-react button:hover { background: var(--hover); transform: scale(1.18); }

/* ---------- cajón derecho ---------- */
.drawer { grid-column: 4; background: var(--panel); border-left: 1px solid var(--border); display: flex; flex-direction: column; overflow: hidden; min-width: 0; }
.drawer:empty { display: none; }
.drawer-head { height: 64px; display: flex; align-items: center; gap: 16px; padding: 0 16px; background: var(--head); flex-shrink: 0; }
.drawer-head b { font-weight: 500; font-size: 16px; }
.drawer-body { overflow-y: auto; flex: 1; background: var(--app); display: flex; flex-direction: column; gap: 10px; }
.drawer-body section { background: var(--panel); padding: 16px 22px; box-shadow: var(--shadow); }
.drawer-body section p { margin: 4px 0 0; }
.profile-card { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; padding-top: 24px !important; }
.profile-card h3 { font-size: 22px; font-weight: 400; margin-top: 8px; }
.code-box .code-row { margin-top: 6px; }
.code-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 6px 0; }
.code-row > span { min-width: 82px; color: var(--muted); font-size: 13px; }
.code-row code { font: 600 15px/1 ui-monospace, Consolas, monospace; background: var(--field); padding: 7px 10px; border-radius: 6px; letter-spacing: 1px; flex: 1; min-width: 120px; }
.settings .switch-row svg { width: 20px; height: 20px; }
.media-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin-top: 8px; }
.media-grid a { aspect-ratio: 1; border-radius: 6px; overflow: hidden; background: var(--field); display: flex; flex-direction: column; align-items: center; justify-content: center; text-decoration: none; color: var(--muted); font-size: 24px; }
.media-grid img { width: 100%; height: 100%; object-fit: cover; }
.media-grid small { font-size: 10px; }
.media-grid p { grid-column: 1 / -1; margin: 0; }
.members { display: flex; flex-direction: column; margin-top: 6px; }
.member { display: flex; align-items: center; gap: 12px; padding: 8px 0; }
.member > div:not(.avatar) { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.member small { color: var(--muted); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- modales ---------- */
.modal-back { position: fixed; inset: 0; background: rgba(11,20,26,.55); z-index: 50; display: grid; place-items: center; padding: 16px; animation: fade .15s; }
.modal-back.out { opacity: 0; transition: opacity .15s; }
@keyframes fade { from { opacity: 0; } }
.modal { background: var(--panel); border-radius: 16px; width: min(480px, 100%); max-height: calc(100dvh - 32px); display: flex; flex-direction: column; box-shadow: var(--pop); animation: pop .16s ease-out; overflow: hidden; }
.modal.wide { width: min(720px, 100%); }
.modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 18px 18px 8px 22px; }
.modal-head h3 { font-size: 19px; }
.modal-head p { margin: 2px 0 0; color: var(--muted); font-size: 13px; }
.modal-body { padding: 10px 22px 16px; overflow-y: auto; }
.modal-foot { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 12px 22px 18px; border-top: 1px solid var(--border); }
.modal.profile-settings-modal { width: min(760px, 100%); }
.modal.profile-settings-modal > .modal-head, .modal.profile-settings-modal > .modal-foot { flex: 0 0 auto; }
.modal.profile-settings-modal > .modal-body { flex: 1 1 auto; min-height: 0; }
.modal.profile-settings-modal > .modal-foot { flex-wrap: wrap; }
@media (max-width: 620px) {
  .modal-back:has(.profile-settings-modal) { padding: 8px; }
  .modal.profile-settings-modal { max-height: calc(100dvh - 16px); border-radius: 14px; }
  .modal.profile-settings-modal .modal-head { padding: 14px 16px 8px; }
  .modal.profile-settings-modal .modal-body { padding: 10px 16px 16px; }
  .modal.profile-settings-modal .modal-foot { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); }
  .modal.profile-settings-modal .modal-foot .grow { display: none; }
  .modal.profile-settings-modal .modal-foot > button { min-width: 0; max-width: 100%; padding-inline: 8px; white-space: normal; line-height: 1.2; }
}
.modal-foot .muted { margin-right: auto; font-size: 13px; }
.confirm-text { font-size: 15.5px; margin: 14px 0 4px; }
.menu-list { display: flex; flex-direction: column; padding: 8px !important; }
.menu-list button { display: flex; gap: 12px; align-items: center; padding: 12px; border-radius: 8px; text-align: left; }
.menu-list button:hover { background: var(--hover); }
.menu-list button svg { color: var(--muted); }
.menu-list .danger { color: var(--danger); }
.menu-list .danger svg { color: var(--danger); }
.quick-actions { display: flex; flex-direction: column; margin: 10px -8px 4px; }
.quick-actions button { display: flex; align-items: center; gap: 14px; padding: 9px 8px; border-radius: 8px; font-size: 15.5px; }
.quick-actions button:hover { background: var(--hover); }
.quick-actions span { width: 44px; height: 44px; border-radius: 50%; background: var(--k); color: #fff; display: grid; place-items: center; font-size: 20px; }
.people { display: flex; flex-direction: column; }
.person { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: 8px; text-align: left; }
.person:hover { background: var(--hover); }
.person > div:not(.avatar) { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.person small { color: var(--muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dot-inline { width: 10px; height: 10px; border-radius: 50%; background: #25d366; }
.people .list-sep { padding-left: 8px; }
.pick-list { max-height: 300px; overflow-y: auto; border: 1px solid var(--border); border-radius: 10px; }
.pick { display: flex !important; flex-direction: row !important; align-items: center; gap: 12px !important; padding: 8px 12px; cursor: pointer; color: var(--text) !important; font-weight: 400 !important; font-size: 14.5px !important; border-bottom: 1px solid var(--border); }
.pick:last-child { border-bottom: 0; }
.pick:hover { background: var(--hover); }
.pick input { accent-color: var(--accent); width: 18px; height: 18px; }
.pick div:not(.avatar) { display: flex; flex-direction: column; }
.pick small { color: var(--muted); font-size: 12.5px; }
.opt-list { display: flex; flex-direction: column; gap: 8px; }
.opt-row { display: flex; align-items: center; gap: 10px; }
.opt-row input[type=radio] { accent-color: #25d366; width: 20px; height: 20px; flex-shrink: 0; }
.status-preview { height: 220px; border-radius: 12px; display: grid; place-items: center; padding: 20px; transition: background .2s; }
.status-preview textarea { width: 100%; background: transparent; border: 0; outline: none; resize: none; color: #fff; text-align: center; font-size: 22px; font-weight: 500; text-shadow: 0 1px 3px rgba(0,0,0,.3); }
.status-preview textarea::placeholder { color: rgba(255,255,255,.75); }
.resp-list { display: flex; flex-direction: column; }
.resp { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.resp .who { flex: 1; }
.resp .ans { color: var(--text-2); font-size: 14px; }
.resp.col .who { flex: 1; }
.sub-body { width: 100%; padding: 10px 12px; background: var(--field); border-radius: 8px; font-size: 14px; display: flex; flex-direction: column; gap: 6px; }
.file-chip { display: inline-flex; align-items: center; gap: 6px; color: var(--accent); font-weight: 600; text-decoration: none; }
.file-chip svg { width: 18px; height: 18px; }
.grade-form { width: 100%; display: grid; grid-template-columns: 90px 1fr auto; gap: 8px; }
.grade-form .input { padding: 7px 10px; font-size: 14px; }
.who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.who > div:not(.avatar) { display: flex; flex-direction: column; min-width: 0; }
.who small { color: var(--muted); font-size: 12.5px; }
.who.big h1 { font-size: 24px; }
.lightbox { position: relative; background: #000; display: grid; place-items: center; }
.modal.lb { background: #000; width: auto; max-width: 95vw; }
.lightbox img { max-width: 92vw; max-height: 86vh; display: block; }
.lb-actions { position: absolute; top: 8px; right: 8px; display: flex; gap: 6px; }
.lb-actions .icon-btn { background: rgba(0,0,0,.5); color: #fff; }

/* ---------- estados ---------- */
.status-viewer { position: fixed; inset: 0; z-index: 60; background: #111; display: flex; flex-direction: column; animation: fade .15s; }
.sv-bars { display: flex; gap: 4px; padding: 10px 14px 0; max-width: 640px; width: 100%; margin: 0 auto; }
.sv-bars span { flex: 1; height: 3px; background: rgba(255,255,255,.3); border-radius: 2px; overflow: hidden; }
.sv-bars span i { display: block; height: 100%; width: 0; background: #fff; }
.sv-bars span.done i { width: 100%; }
.sv-bars span.run i { animation: grow 5s linear forwards; }
@keyframes grow { to { width: 100%; } }
.sv-head { display: flex; align-items: center; gap: 12px; padding: 10px 14px; color: #fff; max-width: 640px; width: 100%; margin: 0 auto; z-index: 2; }
.sv-head div:not(.avatar) { flex: 1; display: flex; flex-direction: column; }
.sv-head small { opacity: .7; }
.sv-head .icon-btn { color: #fff; }
.sv-body { flex: 1; display: grid; place-items: center; max-width: 640px; width: 100%; margin: 0 auto 16px; border-radius: 12px; overflow: hidden; position: relative; }
.sv-body p { color: #fff; font-size: clamp(22px, 4vw, 34px); text-align: center; padding: 30px; margin: 0; font-weight: 500; text-shadow: 0 1px 4px rgba(0,0,0,.3); }
.sv-body p.caption { position: absolute; bottom: 0; left: 0; right: 0; font-size: 18px; background: linear-gradient(transparent, rgba(0,0,0,.7)); }
.sv-body img { max-width: 100%; max-height: 100%; object-fit: contain; }
.sv-nav { position: absolute; top: 80px; bottom: 0; width: 35%; z-index: 1; }
.sv-nav.l { left: 0; } .sv-nav.r { right: 0; }

/* ---------- páginas (panel, admin, padres) ---------- */
.page { flex: 1; overflow-y: auto; padding: 28px clamp(16px, 4vw, 44px) 40px; background: var(--app); display: flex; flex-direction: column; gap: 18px; }
.page-head h1 { font-size: 26px; }
.page-head p { margin: 4px 0 0; color: var(--muted); }
.course-tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.course-tabs .chip.on { background: var(--k); color: #fff; }
[data-stats] { display: flex; flex-direction: column; gap: 18px; }
.kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.kpi { background: var(--panel); border-radius: 14px; padding: 16px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 2px; border-top: 4px solid var(--accent); }
.kpi small { color: var(--muted); font-weight: 600; font-size: 12.5px; text-transform: uppercase; letter-spacing: .3px; }
.kpi b { font-size: 30px; font-weight: 600; font-variant-numeric: tabular-nums; }
.kpi span { color: var(--muted); font-size: 12.5px; }
.kpi.good { border-top-color: #25d366; } .kpi.mid { border-top-color: #f39c12; } .kpi.low { border-top-color: var(--danger); }
.kpis.sm .kpi { padding: 10px 12px; border-top-width: 3px; box-shadow: none; background: var(--field); }
.kpis.sm .kpi b { font-size: 22px; }
.card { background: var(--panel); border-radius: 14px; padding: 18px 20px; box-shadow: var(--shadow); }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.card-head h3 { font-size: 17px; }
.course-card { border-left: 5px solid var(--k); display: flex; flex-direction: column; gap: 12px; }
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 18px; }
.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .3px; color: var(--muted); font-weight: 600; padding: 8px 10px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.table td { padding: 10px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.table tr:last-child td { border-bottom: 0; }
.table tr:hover td { background: var(--hover); }
.table tr.inactive td { opacity: .5; }
.mini-bar { height: 6px; width: 90px; border-radius: 3px; background: var(--field); overflow: hidden; margin-bottom: 2px; }
.mini-bar span { display: block; height: 100%; background: var(--accent); }
.assign-list { display: flex; flex-direction: column; gap: 10px; }
.assign { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border-radius: 10px; background: var(--field); }
.assign.row { flex-direction: row; align-items: center; justify-content: space-between; gap: 10px; }
.assign.row > div:not(.avatar) { display: flex; flex-direction: column; }
.assign small { color: var(--muted); }
.assign .mini-bar { width: 100%; background: var(--panel); }
.flag-list { display: flex; flex-direction: column; gap: 10px; }
.flag { padding: 10px 12px; background: var(--field); border-radius: 10px; }
.flag p { margin: 6px 0 0; }

/* ---------- toasts ---------- */
#toasts { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 200; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
.toast { background: #323739; color: #fff; padding: 11px 18px; border-radius: 10px; font-size: 14px; box-shadow: var(--pop); max-width: min(420px, 92vw); animation: pop .18s ease-out; transition: opacity .3s, transform .3s; }
.toast.ok { background: #0a7a5a; }
.toast.err { background: #c0002c; }
.toast.out { opacity: 0; transform: translateY(8px); }

/* ---------- móvil ---------- */
@media (max-width: 820px) {
  body { font-size: 15px; }
  .layout, .layout.full, .layout.drawer-open { grid-template-columns: minmax(0, 1fr); grid-template-rows: 1fr 60px; }
  .rail { grid-row: 2; grid-column: 1; flex-direction: row; border-right: 0; border-top: 1px solid var(--border); padding: 0 8px; }
  .rail-top { flex-direction: row; flex: 1; justify-content: space-around; }
  .rail-bottom { flex-direction: row; }
  .rail .theme-btn { display: none; }
  .side, .main, .drawer { grid-row: 1; grid-column: 1; }
  .layout:not(.full) .main { display: none; }
  .layout.has-chat .side, .layout.has-chat .rail { display: none; }
  .layout.has-chat { grid-template-rows: 1fr; }
  .layout.has-chat .main { display: flex; }
  .layout.full .main { display: flex; }
  .layout.drawer-open .drawer { z-index: 10; }
  .chat-head .back { display: grid; }
  .chat-head { padding-left: 4px; }
  .messages { padding: 10px 10px; }
  .bubble { max-width: 85%; }
  .reply-bar { padding-left: 14px; }
  .row2 { grid-template-columns: 1fr; }
  .grade-form { grid-template-columns: 80px 1fr; }
  .grade-form button { grid-column: span 2; }
}

/* =====================================================================
   Piel Team2Talk (t3)
   ===================================================================== */
body { background:
  radial-gradient(900px 500px at 0% 0%, rgba(43,179,163,.10), transparent 60%),
  radial-gradient(700px 500px at 100% 100%, rgba(33,194,126,.06), transparent 60%), var(--app); }
h1, h2, h3, .side-title h2, .page-head h1, .brand-big h1 { font-family: var(--display); letter-spacing: .2px; }
:root:not([data-theme="light"]) .chip.on, :root:not([data-theme="light"]) .sys-pill.e2e { color: var(--text); }
.sys-pill.e2e { background: var(--sys); color: var(--sys-text); border: 1px solid var(--border); }

/* marca */
.brand { display: flex; align-items: center; gap: 12px; }
.brand img { width: 52px; height: 52px; object-fit: contain; filter: drop-shadow(0 0 14px rgba(3,160,70,.3)); }
.brand b { display: block; font: 800 26px/1 var(--display); letter-spacing: 1.5px; color: var(--text); }
.brand.xl img { width: 76px; height: 76px; }
.brand.xl b { font-size: clamp(24px, 3.6vw, 46px); white-space: nowrap; }
.brand.xl .auth-brand-copy { display: grid; grid-template-columns: max-content max-content; grid-template-rows: auto auto; align-items: baseline; column-gap: 5px; row-gap: 5px; line-height: 1; }
.brand.xl .auth-brand-name { grid-column: 1; grid-row: 1; }
.brand.xl .auth-brand-version { grid-column: 2; grid-row: 1; font: 800 clamp(24px, 3.6vw, 46px)/1 var(--display); letter-spacing: 1.5px; color: var(--text); white-space: nowrap; }
.brand.xl .auth-brand-byline { grid-column: 1; grid-row: 2; justify-self: end; color: var(--text-2); font-size: clamp(10px, 1.25vw, 13px); font-weight: 700; letter-spacing: .08em; line-height: 1.1; white-space: nowrap; }
.empty-main .brand { justify-content: center; margin-bottom: 18px; }

/* botones */
.btn { border-radius: 12px; }
.btn.primary { background: linear-gradient(180deg, #3ddc97, var(--accent-2)); color: #04261a; box-shadow: 0 6px 20px rgba(33,194,126,.28), inset 0 1px 0 rgba(255,255,255,.35); }
.btn.primary:hover { filter: brightness(1.07); background: linear-gradient(180deg, #5fe3a8, #1fb978); }
.btn.primary.loading::after { border-color: #04261a; border-right-color: transparent; }
.btn.ghost { background: var(--panel-2); color: var(--text); border: 1px solid var(--border-2); }
.btn.ghost:hover { border-color: var(--violet); box-shadow: 0 0 0 3px rgba(43,179,163,.15); }
.btn.danger-ghost { background: var(--panel-2); }
.icon-btn:hover { background: var(--active); color: var(--text); }
.link-btn { color: var(--violet-2); font-weight: 600; font-size: 13px; }
.link-btn:hover { text-decoration: underline; }
.chip { border: 1px solid var(--border); background: var(--panel-2); border-radius: 12px; font-weight: 600; font-size: 13px; }
.chip.on { background: linear-gradient(180deg, rgba(43,179,163,.35), rgba(43,179,163,.18)); border-color: var(--violet-2); color: #fff; box-shadow: 0 0 0 3px rgba(43,179,163,.18), 0 0 18px rgba(43,179,163,.25); }
:root[data-theme="light"] .chip.on { color: #0b5e4a; }
.chip-btn { height: 30px; padding: 0 10px; border-radius: 10px; border: 1px solid var(--border-2); background: var(--panel-2); font-size: 12.5px; font-weight: 600; color: var(--text-2); }
.chip-btn:hover { border-color: var(--violet); color: var(--text); }
.input { background: var(--input); border-color: var(--border-2); border-radius: 10px; }
.input:focus { border-color: var(--violet); box-shadow: 0 0 0 3px rgba(43,179,163,.22); }
.sw-ui { background: #2a3942; }
.switch-row input:checked + .sw-ui { background: linear-gradient(90deg, var(--accent), #5fe3a8); }
.pill.green, .pill.good { background: rgba(46,230,166,.15); color: var(--ok); }
.pill.blue { background: rgba(90,209,255,.15); color: var(--blue); }
.pill.red, .pill.low { background: rgba(255,77,109,.15); color: var(--danger); }
.pill.mid { background: rgba(33,194,126,.16); color: var(--accent); }
:root[data-theme="light"] .pill.green, :root[data-theme="light"] .pill.good { color: #08835c; }
:root[data-theme="light"] .pill.blue { color: #0369a1; }
.hint, .explain { background: var(--field); border: 1px solid var(--border); }
.lbl, .form label { letter-spacing: .3px; }

/* riel lateral */
.layout { grid-template-columns: 84px minmax(320px, 400px) 1fr 0; }
.layout.drawer-open { grid-template-columns: 84px minmax(320px, 400px) 1fr 380px; }
.layout.full { grid-template-columns: 84px 0 1fr 0; }
.rail { background: linear-gradient(180deg, #111b21, #0b141a); border-right: 1px solid var(--border); padding: 12px 0; }
:root[data-theme="light"] .rail { background: linear-gradient(180deg, #ffffff, #f0f2f5); }
.rail-logo { width: 46px; height: 46px; object-fit: contain; margin-bottom: 10px; filter: drop-shadow(0 0 10px rgba(255,80,0,.28)); }
.rail-top { gap: 8px; }
.rail-btn { width: 66px; height: 58px; border-radius: 16px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border: 1px solid transparent; }
.rail-btn svg { width: 22px; height: 22px; }
.rail-lbl { display: block; font: 700 9px/1 var(--font); letter-spacing: 1px; text-transform: uppercase; }
.rail-btn:hover { background: var(--active); border-color: var(--border); }
.rail-btn.on { background: linear-gradient(180deg, #2fd08a, #179e66); color: #04261a; border-color: rgba(255,200,140,.4); box-shadow: 0 6px 22px rgba(33,194,126,.35); }
.rail .theme-btn { height: 52px; }
.rail-badge { background: var(--ok); color: #04261a; top: 4px; right: 6px; box-shadow: 0 0 10px rgba(46,230,166,.6); }

/* lista lateral */
.side { background: var(--panel); }
.side-head { height: 70px; }
.side-title h2 { font-size: 24px; font-weight: 800; }
.searchbar { background: var(--field); border: 1px solid var(--border); border-radius: 12px; }
.chat-item { margin: 2px 8px; width: calc(100% - 16px); border-radius: 14px; padding: 0 10px; position: relative; }
.chat-item.on { background: linear-gradient(90deg, rgba(43,179,163,.22), rgba(43,179,163,.06)); box-shadow: inset 0 0 0 1px rgba(43,179,163,.35); }
.chat-item.on::before { content: ''; position: absolute; left: -8px; top: 14px; bottom: 14px; width: 4px; border-radius: 0 4px 4px 0; background: var(--accent); box-shadow: 0 0 10px var(--accent); }
.ci-main { border-bottom: 0; }
.badge { background: var(--accent); color: #04261a; }
.ci-top small.hot, .typing-txt, .list-sep, .on-txt { color: var(--accent); }
.av-wrap .dot { background: var(--ok); border-color: var(--panel); box-shadow: 0 0 8px var(--ok); }
.avatar.sq { border-radius: 14px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.15), 0 4px 14px rgba(0,0,0,.3); }

/* chat */
.main { background: var(--chat); }
.chat-head, .course-head { background: var(--head); border-bottom: 1px solid var(--border); border-left: 0; }
.messages { background-image: radial-gradient(var(--doodle) 1.2px, transparent 1.3px); background-size: 22px 22px; padding-left: 5%; padding-right: 5%; }
.bubble { border-radius: 14px; background: var(--in); border: 1px solid var(--border); box-shadow: 0 2px 8px rgba(0,0,0,.18); }
.out .bubble { background: linear-gradient(160deg, var(--out), var(--out-2)); border-color: rgba(120,230,190,.16); }
:root:not([data-theme="light"]) .out .bubble { color: #e9edef; }
.msg-row:not(.cont).in .bubble::before, .msg-row:not(.cont).out .bubble::before { display: none; }
.msg-row:not(.cont).in .bubble { border-top-left-radius: 4px; }
.msg-row:not(.cont).out .bubble { border-top-right-radius: 4px; }
.out .msg-menu { background: transparent; }
.msg-menu { background: transparent; }
.ticks .read { color: var(--ok); }
.day-sep span { background: var(--sys); border: 1px solid var(--border); color: var(--sys-text); font-weight: 600; font-size: 12px; }
.sys-pill { background: var(--sys); border: 1px solid var(--border); }
.quote { background: rgba(0,0,0,.18); border-left-color: var(--accent); }
.quote b { color: var(--accent); }
.composer-wrap { background: var(--head); border-top: 1px solid var(--border); }
.composer textarea { background: var(--input); border: 1px solid var(--border-2); border-radius: 14px; }
.composer textarea:focus { border-color: var(--violet); }
.send-btn { background: linear-gradient(180deg, #3ddc97, var(--accent-2)); color: #04261a; box-shadow: 0 6px 18px rgba(33,194,126,.35); }
.send-btn:hover { background: linear-gradient(180deg, #5fe3a8, #1fb978); }
.pinbar { background: var(--panel-2); }
.pinbar div { border-left-color: var(--accent); }
.reactions span { background: var(--panel-2); }
.wave i.done { background: var(--accent); }
.attach-menu, .emoji-panel, .ctx, .modal { background: var(--panel); border: 1px solid var(--border-2); }
.modal { border-radius: 20px; box-shadow: var(--pop), 0 0 0 1px rgba(43,179,163,.12), 0 0 60px rgba(43,179,163,.12); }
.modal-back { background: rgba(4,8,10,.7); backdrop-filter: blur(3px); }
.toast { background: #1f2c33; border: 1px solid var(--border-2); }
.toast.ok { background: #0d3b2e; border-color: #1c6b52; }
.toast.err { background: #4a1020; border-color: #7a2036; }

/* tarjetas educativas */
.bubble.edu { border: 1px solid var(--border-2); background: var(--panel-2); }
.out .bubble.edu { background: var(--panel-2); }
.edu-tag { background: linear-gradient(90deg, var(--k), color-mix(in srgb, var(--k) 55%, #000)); letter-spacing: 1.4px; font-size: 11px; padding: 8px 14px; }
.edu-btn { border-radius: 12px; border: 1px solid var(--border-2); background: var(--panel); color: var(--text); }
.edu-btn:hover { border-color: var(--violet); box-shadow: 0 0 0 3px rgba(43,179,163,.15); background: var(--panel); }
.edu-btn.big { background: linear-gradient(180deg, #3ddc97, var(--accent-2)); color: #04261a; }
.edu-btn:disabled { opacity: .55; cursor: default; box-shadow: none; }
.opt, .poll-opt { border-color: var(--border-2); background: var(--panel); }
.bar span, .mini-bar span { background: linear-gradient(90deg, var(--violet), var(--accent)); }
.poll-opt.on .chk { background: var(--accent); border-color: var(--accent); }
.btn-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-row .edu-btn { flex: 1; }

/* páginas y KPIs */
.page { background: transparent; }
.kpi { border-top: 0; border: 1px solid var(--border); background: linear-gradient(180deg, var(--panel-2), var(--panel)); position: relative; overflow: hidden; padding-left: 20px; border-radius: 16px; }
.kpi::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: linear-gradient(180deg, var(--ok), var(--violet)); }
.kpi.good::before { background: var(--ok); } .kpi.mid::before { background: var(--accent); } .kpi.low::before { background: var(--danger); }
.kpi small, .lbl, .sec { text-transform: uppercase; letter-spacing: 1.4px; }
.kpi b { font-family: var(--display); font-weight: 800; }
.card { background: linear-gradient(180deg, var(--panel-2), var(--panel)); border: 1px solid var(--border); border-radius: 18px; }
.kpis.sm .kpi { background: var(--field); }
.table tr:hover td { background: rgba(43,179,163,.06); }
.course-tabs .chip.on { background: linear-gradient(180deg, #2fd08a, #179e66); color: #04261a; border-color: transparent; box-shadow: 0 6px 18px rgba(33,194,126,.3); }

/* autenticación */
.auth-page { background:
  url('/concept-background.svg') center / cover no-repeat,
  radial-gradient(900px 600px at 10% 10%, rgba(43,179,163,.18), transparent 60%),
  radial-gradient(800px 600px at 90% 90%, rgba(33,194,126,.14), transparent 60%), var(--app); }
@media (max-width: 600px) {
  .auth-page { background:
    url('/concept-background-mobile.svg') center top / 100% auto no-repeat,
    radial-gradient(900px 600px at 10% 10%, rgba(43,179,163,.18), transparent 60%),
    radial-gradient(800px 600px at 90% 90%, rgba(33,194,126,.14), transparent 60%), var(--app); }
}
.auth-card { background: linear-gradient(180deg, var(--panel-2), var(--panel)); border: 1px solid var(--border-2); border-radius: 22px; box-shadow: var(--pop), 0 0 80px rgba(43,179,163,.15); }
.seg { background: var(--field); border: 1px solid var(--border); border-radius: 14px; }
.seg button.on { background: linear-gradient(180deg, rgba(43,179,163,.4), rgba(43,179,163,.2)); color: #fff; box-shadow: 0 0 0 1px var(--violet-2), 0 0 16px rgba(43,179,163,.3); }
:root[data-theme="light"] .seg button.on { color: #0b5e4a; }
.seg.two { grid-template-columns: 1fr 1fr; margin: 0; }
.seg.four { grid-template-columns: repeat(4, 1fr); margin: 0; }
.seg.four button { font-size: 12.5px; }
.seg.five { grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 0; }
.seg.five button { min-width: 0; padding-inline: 7px; font-size: 11px; line-height: 1.2; }
@media (max-width: 600px) {
  .seg.five { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .seg.five button:last-child { grid-column: 1 / -1; }
}
.feature-list li { background: linear-gradient(180deg, var(--panel-2), var(--panel)); border: 1px solid var(--border); border-radius: 14px; }
.tagline { color: var(--text-2); }

/* ajustes del tema claro */
:root[data-theme="light"] .messages { background-color: #efeae2; }
:root[data-theme="light"] .out .bubble { color: var(--text); }
:root[data-theme="light"] .quote { background: rgba(20,168,107,.08); }
:root[data-theme="light"] .tile.big { color: #fff; }
:root[data-theme="light"] .rail-btn.on { color: #04261a; }
:root[data-theme="light"] .live-now { color: #c0103f; }
:root[data-theme="light"] .live-chip.on { color: #c0103f; }
:root[data-theme="light"] .live-chip.soon { color: #6d28d9; }
:root[data-theme="light"] .toast { background: #1f2c33; color: #fff; }
:root[data-theme="light"] .mod-head { background: linear-gradient(90deg, rgba(43,179,163,.10), transparent); }
:root[data-theme="light"] .g.good { color: #08835c; } :root[data-theme="light"] .g.sent { color: #0369a1; }
:root[data-theme="light"] .seen.on, :root[data-theme="light"] .mini-kpis .k-graded b { color: #08835c; }
:root[data-theme="light"] .course-tabs .chip.on, :root[data-theme="light"] .ctab.on { color: #04261a; }
:root[data-theme="light"] .side-card.warn b { color: #d36b00; }
:root[data-theme="light"] .edu-status.ok { background: rgba(46,230,166,.16); }
:root[data-theme="light"] .avatar.sq { box-shadow: 0 4px 14px rgba(40,20,90,.15); }
:root[data-theme="light"] .modal-back { background: rgba(11,20,26,.45); }
:root[data-theme="light"] .tile.big { background: linear-gradient(160deg, #8b5cf6, #5b21b6); border-color: #7c3aed; box-shadow: 0 10px 30px rgba(124,58,237,.3); }
:root[data-theme="light"] .tile.big small { color: #ede4ff; }


/* ================= Team2Talk (t3): extras ================= */
.main { min-width: 0; }
.rail-logo-btn { display: block; border-radius: 14px; transition: transform .15s; } .rail-logo-btn:hover { transform: scale(1.06); }
.rail-logo { filter: drop-shadow(0 0 10px rgba(3,160,70,.3)); }
.brand b { letter-spacing: .5px; }
.brand.xl b { font-size: clamp(24px, 3.6vw, 46px); white-space: nowrap; }
.avatar.photo { background-color: var(--c); background-size: cover; background-position: center; color: transparent; }
.seg.two { display: grid; }
.dot-inline { width: 9px; height: 9px; border-radius: 50%; background: var(--ok); margin-left: auto; }
/* lista de chats */
.chat-item { display: flex; cursor: pointer; }
.ci-menu { opacity: 0; width: 22px; height: 22px; display: grid; place-items: center; color: var(--muted); border-radius: 6px; margin-left: 2px; }
.ci-menu svg { width: 18px; height: 18px; }
.chat-item:hover .ci-menu, .chat-item:focus-within .ci-menu { opacity: 1; }
@media (pointer: coarse) { .ci-menu { opacity: .7; } }
.pin-chat svg { width: 14px; height: 14px; color: var(--muted); transform: rotate(45deg); }
.badge.mute { background: var(--muted); color: var(--panel); }
.pv-tick svg { width: 15px; height: 15px; vertical-align: -3px; margin-right: 2px; color: var(--blue); }
.arch-row { display: flex; align-items: center; gap: 14px; width: calc(100% - 16px); margin: 0 8px 4px; padding: 10px 14px; border-radius: 12px; color: var(--text-2); }
.arch-row:hover { background: var(--hover); } .arch-row svg { width: 20px; height: 20px; color: var(--accent); } .arch-row b { flex: 1; text-align: left; font-weight: 600; } .arch-row span { color: var(--accent); font-size: 12.5px; font-weight: 700; }
.side-title h2 { display: flex; align-items: center; gap: 6px; }
.empty-list .btn { margin-top: 12px; }
/* mensajes */
.fwd { display: flex; align-items: center; gap: 4px; font-size: 12px; font-style: italic; color: var(--muted); margin-bottom: 2px; }
.fwd svg { width: 14px; height: 14px; }
.meta i { font-style: italic; margin-right: 4px; opacity: .8; }
.star-ic svg { width: 12px; height: 12px; color: var(--muted); margin-right: 2px; }
video.msg-img { max-width: 320px; width: 100%; border-radius: 10px; display: block; background: #000; }
.loc-card { display: flex; gap: 12px; align-items: center; text-decoration: none; color: inherit; padding: 4px 2px; min-width: 230px; }
.loc-map { width: 64px; height: 64px; border-radius: 10px; display: grid; place-items: center; font-size: 30px; background: repeating-linear-gradient(45deg, rgba(33,194,126,.18) 0 8px, rgba(43,179,163,.10) 8px 16px); }
.loc-card b { display: block; } .loc-card small { color: var(--muted); font-size: 12px; }
.contact-card { display: flex; gap: 10px; align-items: center; padding: 4px 2px 8px; min-width: 210px; border-bottom: 1px solid var(--border); }
.contact-card div:not(.avatar) { display: flex; flex-direction: column; } .contact-card small { color: var(--muted); font-size: 12px; }
.link-btn.block { display: block; width: 100%; text-align: center; padding: 8px 0 2px; }
.poll { min-width: 240px; } .poll h4 { margin: 2px 0; font-size: 15px; } .poll .opts { display: flex; flex-direction: column; gap: 6px; margin: 8px 0; }
.poll-opt { display: grid; grid-template-columns: 22px 1fr auto; grid-template-areas: "c t n" "b b b"; gap: 4px 8px; align-items: center; padding: 8px 10px; border: 1px solid var(--border-2); border-radius: 10px; text-align: left; }
.poll-opt .chk { grid-area: c; width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--muted); display: grid; place-items: center; font-size: 12px; color: #04261a; }
.poll-opt.on .chk { background: var(--accent); border-color: var(--accent); }
.poll-opt .txt { grid-area: t; } .poll-opt b { grid-area: n; font-size: 13px; } .poll-opt .bar { grid-area: b; height: 4px; border-radius: 2px; background: var(--field); overflow: hidden; }
.poll-opt .bar span { display: block; height: 100%; }
/* composer */
.opt-row { margin-bottom: 6px; } .opt-list { display: flex; flex-direction: column; }
.danger-zone { display: flex; flex-direction: column; gap: 8px; }
.code-row code.invite { font-size: 12.5px; letter-spacing: 0; word-break: break-all; }
.ctx button.danger { color: var(--danger); }
/* perfil */
.av-edit { position: relative; border-radius: 50%; } .av-edit span { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 50%; background: rgba(0,0,0,.45); color: #fff; opacity: 0; transition: opacity .15s; }
.av-edit:hover span { opacity: 1; } .av-edit span svg { width: 26px; height: 26px; }
.profile-card { display: flex; flex-direction: column; align-items: center; gap: 6px; }
/* estados */
.av-wrap.ring.seen { box-shadow: 0 0 0 2px var(--panel), 0 0 0 4px var(--muted); }
.sv-views { position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); background: rgba(0,0,0,.5); color: #fff; padding: 8px 16px; border-radius: 20px; z-index: 3; }
.center { text-align: center; } .modal-body.center { display: flex; flex-direction: column; align-items: center; gap: 6px; }

/* ---------- estructura del chat y móvil ---------- */
.chat-body { overflow: hidden; display: flex; flex-direction: column; flex: 1; min-height: 0; position: relative; }
@media (max-width: 820px) {
  .layout, .layout.full, .layout.drawer-open { grid-template-columns: minmax(0, 1fr); grid-template-rows: 1fr 66px; }
  .layout.has-chat { grid-template-rows: 1fr; }
  .rail-btn { width: 64px; height: 52px; }
  .rail-logo, .rail-logo-btn { display: none; }
  .head-actions [data-search] { display: none; }
}
@supports (padding: env(safe-area-inset-bottom)) { @media (max-width: 820px) { .rail { padding-bottom: env(safe-area-inset-bottom); } .composer { padding-bottom: calc(8px + env(safe-area-inset-bottom)); } } }

/* =====================================================================
   Formación de equipos en círculos
   ===================================================================== */
.teams-btn { color: #f5b301; }
.attach-menu [data-pick="teams"] span svg { width: 22px; height: 22px; }

/* configuración */
.ts-body { display: flex; flex-direction: column; gap: 12px; }
.ts-count { display: grid; grid-template-columns: repeat(auto-fill, minmax(46px, 1fr)); gap: 8px; }
.ts-n { height: 46px; border-radius: 12px; background: var(--field); border: 1px solid var(--border); font: 700 18px 'Exo 2', Inter, sans-serif; color: var(--text); transition: transform .12s, background .12s; }
.ts-n:hover { transform: translateY(-2px); }
.ts-n.on { background: var(--accent); color: #04261a; border-color: transparent; box-shadow: 0 6px 18px rgba(33,194,126,.35); }
.ts-preview { display: flex; flex-wrap: wrap; gap: 8px; min-height: 34px; padding: 12px; border-radius: 14px; background: radial-gradient(circle at 30% 20%, #17345a, #0a1626 70%); }
.ts-preview span { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 4px; border-radius: 99px; background: color-mix(in srgb, var(--c) 22%, transparent); border: 1px solid var(--c); color: #fff; font-size: 12.5px; font-weight: 600; animation: tsPop .3s cubic-bezier(.2,.9,.3,1.4); }
.ts-preview i { width: 18px; height: 18px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 3px rgba(0,0,0,.25); }
@keyframes tsPop { from { transform: scale(.5); opacity: 0; } }
.ts-cap { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--muted); }
.ts-note { margin: 0; font-size: 13px; color: var(--muted); }
.ts-note.warn { color: #f59e0b; }
.tn-list { display: flex; flex-direction: column; gap: 8px; }
.tn-list label { display: flex; align-items: center; gap: 10px; }
.tn-list i { width: 22px; height: 22px; border-radius: 50%; background: var(--c); flex-shrink: 0; }

/* tarjeta en el chat */
.team-card { display: flex; gap: 12px; align-items: center; min-width: 250px; padding: 10px; border-radius: 12px; background: radial-gradient(circle at 20% 0%, #1b3d66, #0b1a2c 75%); color: #fff; cursor: pointer; }
.tc-art { position: relative; width: 52px; height: 52px; flex-shrink: 0; border-radius: 50%; background: #0b1a2c; box-shadow: inset 0 0 0 2px rgba(255,255,255,.12); }
.tc-art::after { content: '👑'; position: absolute; inset: 0; display: grid; place-items: center; font-size: 18px; }
.tc-art i { position: absolute; left: 50%; top: 50%; width: 12px; height: 12px; margin: -6px; border-radius: 50%; background: hsl(calc(var(--i) * 60 + 150) 75% 55%); transform: rotate(calc(var(--i) * 60deg)) translateY(-21px); }
.tc-txt { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.tc-txt small { color: #b9c8da; font-size: 12px; }
.tc-bar { height: 5px; border-radius: 4px; background: rgba(255,255,255,.12); overflow: hidden; margin-top: 3px; }
.tc-bar i { display: block; height: 100%; background: linear-gradient(90deg, #21c27e, #5ff0b0); transition: width .4s; }

/* tablero */
.tb { position: fixed; inset: 0; z-index: 45; display: flex; flex-direction: column; color: #e9f0f7; user-select: none; -webkit-user-select: none;
  background:
    radial-gradient(ellipse at 70% 10%, rgba(59,130,246,.22), transparent 55%),
    radial-gradient(ellipse at 10% 90%, rgba(33,194,126,.14), transparent 50%),
    repeating-radial-gradient(circle at 50% 50%, rgba(255,255,255,.018) 0 2px, transparent 2px 6px),
    linear-gradient(160deg, #0f2440, #08131f 70%);
  animation: tbIn .22s ease-out; }
.tb.out { opacity: 0; transition: opacity .18s; }
@keyframes tbIn { from { opacity: 0; transform: scale(.985); } }
.tb-head { display: flex; align-items: center; gap: 12px; padding: 10px 16px; min-height: 64px; background: rgba(6,14,24,.6); backdrop-filter: blur(8px); border-bottom: 1px solid rgba(255,255,255,.07); flex-shrink: 0; }
.tb-head .icon-btn { color: #e9f0f7; }
.tb-title { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.tb-title b { display: flex; align-items: center; gap: 8px; font: 700 18px 'Exo 2', Inter, sans-serif; }
.tb-title b svg { color: #f5b301; }
.tb-title small { color: #9fb2c8; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb-closed { color: #f59e0b; font-weight: 700; }
.tb-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.tb-actions .btn { display: inline-flex; align-items: center; gap: 6px; }
.tb-actions .btn svg { width: 16px; height: 16px; }
.tb-actions .btn.ghost { color: #e9f0f7; border-color: rgba(255,255,255,.18); background: rgba(255,255,255,.05); }
.tb-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 132px minmax(0, 1fr); }

/* columna de la izquierda: todos alineados */
.tb-queue { display: flex; flex-direction: column; min-height: 0; padding: 12px 8px; background: linear-gradient(90deg, rgba(4,10,18,.75), rgba(4,10,18,.35)); border-right: 1px solid rgba(255,255,255,.07); transition: background .15s, box-shadow .15s; }
.tb-queue.hot { background: rgba(33,194,126,.14); box-shadow: inset 0 0 0 2px #21c27e; }
.tb-queue h4 { margin: 0 0 10px; display: flex; justify-content: space-between; align-items: center; font-size: 12px; letter-spacing: .6px; text-transform: uppercase; color: #9fb2c8; padding: 0 4px; }
.tb-queue h4 span { background: rgba(255,255,255,.1); border-radius: 99px; padding: 1px 8px; color: #fff; }
.tb-col { flex: 1; overflow-y: auto; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 4px 0 8px; }
.tb-qi { display: flex; flex-direction: column; align-items: center; gap: 3px; width: 100%; }
.tb-qi > span { font-size: 11.5px; color: #c9d6e3; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb-empty { color: #9fb2c8; font-size: 12.5px; text-align: center; margin: 12px 4px; }
.tb-hint { margin: 8px 0 0; font-size: 11.5px; line-height: 1.35; color: #f5d27a; text-align: center; }

/* caras */
.tb-face { position: relative; border-radius: 50%; touch-action: none; }
.tb-face .avatar { box-shadow: 0 0 0 3px #0a1626, 0 0 0 5px rgba(255,255,255,.14), 0 6px 14px rgba(0,0,0,.45); }
.tb-face.drag { cursor: grab; }
.tb-face.drag:hover .avatar { box-shadow: 0 0 0 3px #0a1626, 0 0 0 5px #5ff0b0, 0 8px 18px rgba(0,0,0,.5); }
.tb-face.me .avatar { box-shadow: 0 0 0 3px #0a1626, 0 0 0 5px #5ff0b0, 0 0 18px rgba(95,240,176,.55); }
.tb-face.me.drag { animation: tbWiggle 2.4s ease-in-out infinite; }
.tb-face.lifted { opacity: .25; animation: none; }
.tb-you { position: absolute; bottom: -6px; left: 50%; transform: translateX(-50%); font: 700 9.5px Inter, sans-serif; font-style: normal; background: #21c27e; color: #04261a; padding: 1px 6px; border-radius: 99px; letter-spacing: .3px; }
@keyframes tbWiggle { 0%, 80%, 100% { transform: none; } 85% { transform: rotate(-8deg); } 90% { transform: rotate(8deg); } 95% { transform: rotate(-4deg); } }
.tb-ghost { position: fixed; left: 0; top: 0; z-index: 80; pointer-events: none; filter: drop-shadow(0 12px 18px rgba(0,0,0,.55)); transition: none; }
.tb-ghost .tb-crown { display: none; }

/* escenario con los círculos */
.tb-stage { overflow: auto; padding: 22px; display: flex; flex-wrap: wrap; gap: 26px 30px; align-content: flex-start; justify-content: center; }
.tb-team { --S: 300px; --R: 116px; width: var(--S); display: flex; flex-direction: column; align-items: center; gap: 10px; cursor: pointer; }
.tb-label { display: flex; align-items: center; gap: 8px; padding: 5px 14px; border-radius: 99px; background: var(--c); color: #fff; font: 700 14px 'Exo 2', Inter, sans-serif; text-shadow: 0 1px 2px rgba(0,0,0,.35); box-shadow: 0 4px 14px color-mix(in srgb, var(--c) 45%, transparent); }
.tb-label small { font: 600 11px Inter, sans-serif; background: rgba(0,0,0,.25); border-radius: 99px; padding: 1px 7px; }
.tb-ring { position: relative; width: var(--S); height: var(--S); border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--c) 26%, transparent) 0 30%, color-mix(in srgb, var(--c) 9%, transparent) 31% 68%, transparent 69%);
  transition: transform .18s, filter .18s; }
.tb-orbit { position: absolute; inset: calc(50% - var(--R)); border-radius: 50%; border: 2px dashed color-mix(in srgb, var(--c) 55%, transparent); }
.tb-team.hot .tb-ring { transform: scale(1.05); filter: drop-shadow(0 0 22px var(--c)); }
.tb-team.hot .tb-orbit { border-style: solid; border-color: var(--c); }
.tb-team.mine .tb-label { outline: 2px solid #fff; outline-offset: 2px; }
.tb-team.full .tb-empty-hub, .tb-team.full .tb-slot { opacity: .35; }
.tb-slot, .tb-m { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(var(--a)) translateY(calc(var(--R) * -1)) rotate(calc(var(--a) * -1)); }
.tb-slot { width: 46px; height: 46px; border-radius: 50%; background: rgba(5,12,20,.55); box-shadow: inset 0 0 0 2px rgba(255,255,255,.08); }
.tb-m { display: flex; flex-direction: column; align-items: center; z-index: 2; }
.tb-mn { position: absolute; top: 100%; margin-top: 4px; font-size: 10.5px; font-weight: 600; color: #dbe6f1; background: rgba(5,12,20,.7); padding: 0 5px; border-radius: 6px; white-space: nowrap; pointer-events: none; }
.tb-hub { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 3; display: grid; place-items: center; }
.tb-leader { position: relative; display: flex; flex-direction: column; align-items: center; }
.tb-face.lead .avatar { box-shadow: 0 0 0 4px #0a1626, 0 0 0 8px #f5b301, 0 0 28px rgba(245,179,1,.6), 0 10px 22px rgba(0,0,0,.5); font-size: 30px; }
.tb-crown { position: absolute; top: -30px; left: 50%; width: 46px; transform: translateX(-50%) rotate(-8deg); z-index: 4; filter: drop-shadow(0 3px 4px rgba(0,0,0,.5)); animation: tbCrown 3s ease-in-out infinite; pointer-events: none; }
@keyframes tbCrown { 50% { transform: translateX(-50%) rotate(6deg) translateY(-2px); } }
.tb-badge { margin-top: 10px; font: 800 10.5px Inter, sans-serif; letter-spacing: .6px; color: #3d2600; background: linear-gradient(#ffe58a, #f5b301); padding: 2px 9px; border-radius: 99px; white-space: nowrap; box-shadow: 0 3px 8px rgba(0,0,0,.4); }
.tb-empty-hub { width: 104px; height: 104px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 4px; border: 2px dashed color-mix(in srgb, var(--c) 80%, #fff); background: rgba(5,12,20,.45); padding: 8px; animation: tbPulse 2.2s ease-in-out infinite; }
.tb-empty-hub b { font-size: 12px; line-height: 1.2; }
.tb-empty-hub small { font-size: 9.5px; color: #c9d6e3; }
@keyframes tbPulse { 50% { box-shadow: 0 0 0 8px color-mix(in srgb, var(--c) 18%, transparent); } }
.tb.dragging .tb-empty-hub { animation-duration: 1s; }
.tb-menu .tb-mi { width: 22px; text-align: center; font-size: 16px; }

:root[data-theme="light"] .tb-head { background: rgba(6,14,24,.55); }

@media (max-width: 820px) {
  .tb-head { padding: 8px 10px; flex-wrap: wrap; }
  .tb-actions { width: 100%; justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; }
  .tb-actions .btn span { white-space: nowrap; }
  .tb-body { grid-template-columns: 84px minmax(0, 1fr); }
  .tb-queue { padding: 10px 4px; }
  .tb-queue h4 { flex-direction: column; gap: 4px; font-size: 10px; }
  .tb-hint { font-size: 10px; }
  .tb-stage { padding: 16px 8px; gap: 18px; }
  .tb-team { --S: 250px; --R: 96px; }
  .tb-slot, .tb-m .avatar { --s: 40px !important; }
  .tb-slot { width: 40px; height: 40px; }
  .tb-face.lead .avatar { --s: 78px !important; }
  .tb-empty-hub { width: 88px; height: 88px; }
}
#toasts .toast:has(button) { pointer-events: auto; }
.toast .link-btn { color: #5ff0b0; margin-left: 8px; }

/* grupos vs. personas: los grupos son cuadrados redondeados con ícono de personas */
.avatar.group { border-radius: 30%; background: linear-gradient(145deg, color-mix(in srgb, var(--c) 82%, #fff), var(--c) 60%, color-mix(in srgb, var(--c) 70%, #000)); color: #fff; }
.avatar.group svg { width: 58%; height: 58%; filter: drop-shadow(0 1px 1px rgba(0,0,0,.25)); }
.avatar.group.photo { background-size: cover; background-position: center; }

/* tablero: ajustes */
.tb-ghost, .tb-ghost * { animation: none !important; }
.tb-team { --S: 320px; --R: 126px; }
@media (max-width: 820px) { .tb-team { --S: 256px; --R: 100px; } .tb-mn { display: none; } .tb-crown { width: 38px; top: -26px; } }

/* inicio de sesión: marca y texto corto centrados, tarjeta debajo (escritorio y móvil) */
.auth-page { grid-template-columns: minmax(0, 1fr) !important; justify-items: center; align-content: start; gap: clamp(12px, 3vh, 26px); min-height: 100vh; min-height: 100dvh; height: auto; overflow: visible; padding: clamp(12px, 3vh, 32px) 16px 24px; }
.auth-hero { display: flex; flex-direction: column; align-items: center; text-align: center; max-width: 560px; }
.auth-hero .brand.xl { justify-content: center; }
.auth-hero .brand.xl > div { text-align: left; }
.auth-hero .tagline { margin: 14px 0 0; text-align: center; }
.auth-page .feature-list { display: none; }
@media (max-width: 860px) { .auth-page { padding-top: 16px; } .auth-hero .tagline { font-size: 15px; } }
@media (max-height: 740px) { .auth-page { gap: 12px; padding-top: 10px; } .auth-hero .tagline { margin-top: 8px; } .auth-card { padding: 20px; } }
.auth-page .auth-theme { position: fixed; top: 14px; right: 14px; z-index: 5; }
.teams-pill { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px 0 10px; margin-right: 6px; border-radius: 99px; font: 700 13px Inter, sans-serif; color: #3d2600; background: linear-gradient(#ffd96a, #f5b301); box-shadow: 0 4px 14px rgba(245,179,1,.35); white-space: nowrap; transition: transform .12s; }
.teams-pill:hover { transform: translateY(-1px); }
.teams-pill svg { width: 18px; height: 18px; }
@media (max-width: 820px) { .teams-pill { padding: 0 9px; } .teams-pill span { display: none; } }

/* grupos creados desde una formación de equipos: mismo color dorado y forma propia */
.avatar.group.team { border-radius: 50%; position: relative; overflow: visible; color: #3d2600;
  background: radial-gradient(circle at 35% 30%, #ffe58a, #f5b301 60%, #c98a00); box-shadow: 0 0 0 2px #0b141a, 0 0 0 4px #f5b301; }
.avatar.group.team svg { width: 62%; height: 62%; filter: none; }
.avatar.group.team .team-no { position: absolute; right: -4px; bottom: -4px; min-width: calc(var(--s) * .42); height: calc(var(--s) * .42); padding: 0 3px; border-radius: 99px;
  display: grid; place-items: center; font: 800 calc(var(--s) * .24) Inter, sans-serif; color: #fff; background: #0b141a; border: 2px solid #f5b301; }
:root[data-theme="light"] .avatar.group.team { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #f5b301; }
:root[data-theme="light"] .avatar.group.team .team-no { background: #3d2600; }
.team-tag { display: inline-block; vertical-align: 2px; margin-right: 6px; padding: 1px 6px; border-radius: 5px; font: 800 9.5px Inter, sans-serif; letter-spacing: .6px; color: #3d2600; background: linear-gradient(#ffe58a, #f5b301); }
.chat-item.is-team { background: linear-gradient(90deg, rgba(245,179,1,.08), transparent 60%); }
.chat-item.is-team.on { background: linear-gradient(90deg, rgba(245,179,1,.18), rgba(245,179,1,.04)); border-color: rgba(245,179,1,.4); }
.team-ends { display: inline-block; vertical-align: 1px; margin-left: 8px; padding: 1px 8px; border-radius: 99px; font: 600 11px Inter, sans-serif; color: #f5b301; background: rgba(245,179,1,.12); border: 1px solid rgba(245,179,1,.35); }
.tf-ends { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 12px; background: var(--field); border: 1px solid var(--border); margin-top: 6px; }
.tf-ends[hidden] { display: none; }
.tf-ends .lbl small { display: block; text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--muted); margin-top: 2px; }
.tf-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.tb-actions .btn.danger-ghost { color: #ff8a8a; border: 1px solid rgba(255,107,107,.4); background: rgba(255,107,107,.08); }
.chip.chip-now { color: #ff8a8a; border-color: rgba(255,107,107,.45); }
.chip.chip-now.on { background: #e5484d; color: #fff; border-color: transparent; }
.modal-body.tf-ends { background: none; border: 0; margin: 0; padding: 20px 24px; }
.tf-ends input[hidden] { display: none; }

/* =====================================================================
   Actividades para los equipos
   ===================================================================== */
.ac-pill { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 99px; font: 700 11.5px Inter, sans-serif; white-space: nowrap; }
.ac-pill.gray { background: rgba(134,150,160,.16); color: var(--muted); }
.ac-pill.blue { background: rgba(59,130,246,.16); color: #60a5fa; }
.ac-pill.green { background: rgba(33,194,126,.16); color: #21c27e; }

/* =====================================================================
   Portada pública Team2Talk — editorial cálida, enfocada en el aula
   ===================================================================== */
.landing-page {
  --land-ink: #173b36;
  --land-muted: #526c65;
  --land-paper: #f5f3e9;
  --land-paper-deep: #ebe9dc;
  --land-green: #1c5146;
  --land-green-dark: #143d36;
  --land-coral: #d77b61;
  --land-line: rgba(23,59,54,.17);
  position: relative;
  isolation: isolate;
  height: 100vh;
  height: 100dvh;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  scroll-behavior: smooth;
  color: var(--land-ink);
  background: var(--land-paper);
  font-family: "Avenir Next", "Gill Sans", sans-serif;
}
.landing-page * { box-sizing: border-box; }
.landing-page a { color: inherit; text-decoration: none; }
.landing-page main, .landing-nav, .landing-footer { position: relative; z-index: 1; }
.landing-wordfield { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; color: #42756a; }
.landing-wordfield .word { position: absolute; white-space: nowrap; line-height: 1; opacity: .042; font-size: clamp(25px, 3.2vw, 54px); font-weight: 700; letter-spacing: -.06em; }
.landing-wordfield .w1 { top: 5%; left: -1%; font-size: clamp(56px, 8vw, 124px); opacity: .035; }
.landing-wordfield .w2 { top: 17%; right: 4%; font-style: italic; font-weight: 500; transform: rotate(-8deg); }
.landing-wordfield .w3 { top: 38%; left: 3%; font-size: 27px; font-weight: 500; }
.landing-wordfield .w4 { top: 48%; right: -2%; font-style: italic; font-size: 62px; }
.landing-wordfield .w5 { top: 64%; left: 2%; font-size: 74px; }
.landing-wordfield .w6 { top: 82%; right: 3%; font-size: 30px; font-style: italic; }
.landing-wordfield .w7 { top: 31%; left: 47%; font-size: 20px; font-style: italic; }
.landing-wordfield .w8 { top: 71%; right: 30%; font-size: 24px; font-weight: 400; }
.landing-wordfield .w9 { top: 92%; left: 14%; font-size: 28px; font-style: italic; }
.landing-wordfield .w10 { top: 54%; left: 63%; font-size: 18px; font-weight: 500; }
.landing-wordfield .w11 { top: 11%; left: 41%; font-size: 17px; font-weight: 400; font-style: italic; }
.landing-wordfield .w12 { top: 77%; left: 52%; font-size: 38px; font-weight: 600; opacity: .025; }
.landing-nav { height: 82px; max-width: 1320px; margin: 0 auto; padding: 0 6.2%; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--land-line); }
.landing-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--land-ink); font-size: 17px; font-weight: 750; letter-spacing: -.04em; }
.landing-brand img { width: 34px; height: 34px; object-fit: contain; }
.landing-brand i { color: var(--land-muted); font-size: .78em; font-style: normal; font-weight: 500; }
.landing-brand-copy { display: grid; grid-template-columns: max-content max-content; grid-template-rows: auto auto; align-items: baseline; column-gap: 4px; row-gap: 3px; line-height: 1; }
.landing-brand-name { grid-column: 1; grid-row: 1; white-space: nowrap; }
.landing-brand-version { grid-column: 2; grid-row: 1; white-space: nowrap; }
.landing-brand-byline { grid-column: 1; grid-row: 2; align-self: start; justify-self: end; color: var(--land-muted); font-size: 7px; font-weight: 600; letter-spacing: .08em; line-height: 1.15; text-align: right; text-transform: none; white-space: nowrap; }
.landing-nav nav { display: flex; gap: clamp(22px, 4vw, 54px); margin-left: auto; margin-right: 50px; }
.landing-nav nav a, .landing-nav-login { font-size: 12px; font-weight: 600; color: var(--land-muted); transition: color .18s ease; }
.landing-nav nav a:hover, .landing-nav-login:hover { color: var(--land-green); }
.landing-nav-login { color: var(--land-green); }
.landing-nav-login span { margin-left: 8px; font-size: 15px; }
.landing-hero { min-height: 650px; max-width: 1320px; margin: 0 auto; padding: 82px 8.2% 63px; display: grid; grid-template-columns: 1.03fr .97fr; align-items: center; gap: 24px; position: relative; }
.hero-copy { position: relative; z-index: 2; padding-bottom: 34px; }
.landing-kicker, .section-index { margin: 0; color: var(--land-green); font-size: 10px; letter-spacing: .16em; font-weight: 750; }
.landing-kicker { display: flex; align-items: center; gap: 10px; }
.landing-kicker span { width: 23px; height: 1px; background: var(--land-coral); }
.landing-hero h1, .landing-intro h2, .tools-heading h2, .activity-layout h2, .landing-final h2 {
  margin: 23px 0 21px; font-family: Georgia, "Times New Roman", serif; font-weight: 400; letter-spacing: -.058em; line-height: .99;
}
.landing-hero h1 { font-size: clamp(52px, 6.6vw, 88px); }
.landing-hero h1 em, .landing-intro h2 em, .tools-heading h2 em, .activity-layout h2 em, .landing-final h2 em { color: var(--land-green); font-weight: 400; }
.hero-description { max-width: 440px; margin: 0; color: var(--land-muted); font-size: 15px; line-height: 1.8; }
.hero-actions { display: flex; align-items: center; gap: 27px; margin-top: 30px; }
.landing-button { display: inline-flex; align-items: center; justify-content: center; gap: 22px; min-height: 48px; padding: 0 21px; font-size: 12px; font-weight: 650; transition: transform .18s ease, background-color .18s ease; }
.landing-button:hover { transform: translateY(-2px); }
.landing-button.primary { color: #f7f4e9; background: var(--land-green); }
.landing-button.primary:hover { background: var(--land-green-dark); }
.landing-button.primary span, .landing-button.light span { font-size: 16px; }
.landing-button.quiet { padding: 0; color: var(--land-ink); gap: 12px; }
.landing-button.quiet span { color: var(--land-coral); font-size: 17px; }
.hero-note { margin: 17px 0 0; color: #77857b; font-size: 10px; letter-spacing: .025em; }
.hero-art { min-height: 485px; position: relative; display: grid; place-items: center; }
.orbit { position: absolute; border: 1px solid rgba(63,111,98,.17); border-radius: 50%; transform: rotate(-24deg); }
.orbit-one { width: 430px; height: 280px; }
.orbit-two { width: 350px; height: 430px; transform: rotate(37deg); border-color: rgba(215,123,97,.22); }
.chat-window { position: relative; z-index: 1; width: min(340px, 78vw); padding: 20px; background: #fffdf6; border: 1px solid rgba(23,59,54,.12); box-shadow: 0 22px 65px rgba(39,75,63,.12); transform: rotate(2deg); }
.chat-top { display: flex; align-items: center; gap: 10px; padding-bottom: 15px; border-bottom: 1px solid #e9e9de; }
.chat-mark { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 11px; background: #dce9db; color: var(--land-green); font-size: 12px; font-weight: 800; }
.chat-top b { display: block; font-size: 11px; }
.chat-top small, .message small { display: block; margin-top: 3px; color: #849088; font-size: 9px; }
.chat-dots { margin-left: auto; color: #71837a; letter-spacing: 2px; }
.chat-date { padding: 17px 0 12px; text-align: center; color: #9aa39b; font-size: 8px; letter-spacing: .13em; }
.message { display: flex; gap: 8px; margin: 0 0 11px; }
.message-avatar { flex: 0 0 25px; width: 25px; height: 25px; display: grid; place-items: center; border-radius: 50%; background: #efddd3; color: #805344; font-size: 8px; font-weight: 700; }
.message.student .message-avatar { background: #dce7d8; color: #42644c; }
.message p { max-width: 220px; margin: 4px 0 0; padding: 9px 11px; background: #f0f1e9; color: #38574f; font-size: 10px; line-height: 1.55; }
.message.student p { background: #e6eee2; }
.class-prompt { display: flex; align-items: center; gap: 9px; margin: 17px 0 13px 31px; padding: 10px; background: #f9e9df; color: #6b4e43; }
.prompt-symbol { width: 23px; height: 23px; display: grid; place-items: center; border-radius: 50%; background: var(--land-coral); color: #fff8ef; font-family: Georgia, serif; font-size: 13px; }
.class-prompt b { display: block; font-size: 9px; }
.class-prompt small { display: block; margin-top: 3px; color: #9b7667; font-size: 8px; }
.prompt-arrow { margin-left: auto; font-size: 13px; }
.chat-compose { display: flex; align-items: center; justify-content: space-between; padding: 9px 10px; border: 1px solid #e4e5da; color: #a0a69e; font-size: 9px; }
.compose-send { width: 21px; height: 21px; display: grid; place-items: center; border-radius: 50%; background: var(--land-green); color: white; font-size: 12px; }
.art-label { position: absolute; z-index: 2; background: #fffdf6; box-shadow: 0 8px 24px rgba(39,75,63,.1); color: var(--land-muted); font-size: 9px; }
.label-chat { top: 69px; left: 1%; padding: 10px 13px; transform: rotate(-4deg); }
.label-live { right: 0; bottom: 92px; padding: 12px 14px; }
.label-live span { display: inline-block; width: 6px; height: 6px; margin-right: 7px; border-radius: 50%; background: var(--land-coral); vertical-align: 1px; }
.art-note { position: absolute; z-index: 2; left: 0; bottom: 58px; color: var(--land-ink); font: 19px/1.2 Georgia, serif; }
.art-note em { color: var(--land-green); }
.hero-bottomline { position: absolute; bottom: 20px; left: 8.2%; right: 8.2%; display: flex; justify-content: space-between; padding-top: 13px; border-top: 1px solid var(--land-line); color: #78857c; font-size: 9px; letter-spacing: .04em; }
.landing-intro { padding: 100px max(8.2%, calc((100% - 1100px)/2)) 108px; background: #ebece1; }
.intro-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 10%; align-items: end; margin-top: 24px; }
.landing-intro h2, .tools-heading h2, .activity-layout h2 { margin: 0; font-size: clamp(42px, 5vw, 64px); }
.intro-copy p, .activity-layout > div:first-child > p { color: var(--land-muted); font-size: 13px; line-height: 1.85; }
.intro-copy p:first-child { margin-top: 0; }
.text-link { display: inline-flex; align-items: center; gap: 19px; margin-top: 10px; padding-bottom: 7px; border-bottom: 1px solid var(--land-coral); color: var(--land-green); font-size: 11px; font-weight: 700; }
.text-link span { color: var(--land-coral); font-size: 16px; }
.pathway { display: grid; grid-template-columns: 1fr 34px 1fr 34px 1fr; align-items: start; margin-top: 75px; }
.path-step { position: relative; padding-top: 26px; border-top: 1px solid rgba(23,59,54,.25); }
.step-no { position: absolute; top: -7px; right: 0; color: #869189; font-size: 9px; }
.step-icon { width: 34px; height: 34px; display: grid; place-items: center; margin: 0 0 21px; border: 1px solid rgba(23,59,54,.25); border-radius: 50%; color: var(--land-green); font: 18px Georgia, serif; }
.path-step h3 { margin: 0 0 9px; font: 22px Georgia, serif; letter-spacing: -.03em; }
.path-step p { max-width: 245px; margin: 0; color: var(--land-muted); font-size: 11px; line-height: 1.75; }
.path-connector { height: 1px; margin-top: 42px; background: rgba(23,59,54,.2); }
.landing-tools { padding: 105px max(7%, calc((100% - 1160px)/2)) 85px; background: #f8f6ee; }
.tools-heading { display: flex; align-items: end; justify-content: space-between; gap: 32px; margin-top: 26px; }
.tools-heading h2 { max-width: 850px; }
.tool-columns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 34px; row-gap: 34px; margin-top: 55px; }
.tool-block { min-width: 0; padding-top: 14px; border-top: 1px solid var(--land-line); }
.tool-number { color: #71827a; font-size: 9px; letter-spacing: .11em; }
.tool-icon { display: block; width: 154px; height: 143px; max-width: 100%; margin: 17px 0 19px; border-radius: 30px; background: #fff; object-fit: cover; }
.tool-block h3 { margin: 0 0 10px; font: 22px Georgia, serif; letter-spacing: -.035em; }
.tool-block > p { max-width: 340px; margin: 0; color: var(--land-muted); font-size: 12px; line-height: 1.8; }
.integration-strip { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; margin-top: 75px; padding: 23px 15px; border-top: 1px solid var(--land-line); border-bottom: 1px solid var(--land-line); color: #536a61; font-size: 11px; font-weight: 600; }
.integration-label { margin-right: 15px; color: #869087; font-size: 8px; letter-spacing: .14em; }
.integration-strip i { width: 3px; height: 3px; border-radius: 50%; background: var(--land-coral); }
.integration-strip p { flex-basis: 100%; margin: -7px 0 0; text-align: center; color: #879087; font-size: 9px; font-weight: 400; }
.landing-quote { position: relative; min-height: 390px; padding: 85px 15% 70px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; background: #dfe8da; }
.quote-mark { height: 45px; color: var(--land-coral); font: 78px/.8 Georgia, serif; }
.landing-quote blockquote { max-width: 810px; margin: 16px auto 24px; color: var(--land-ink); font: clamp(30px, 4.2vw, 53px)/1.15 Georgia, serif; letter-spacing: -.05em; }
.landing-quote blockquote em { color: var(--land-green); }
.quote-caption { display: flex; align-items: center; gap: 10px; color: #718077; font-size: 8px; letter-spacing: .14em; }
.quote-rule { width: 24px; height: 1px; background: var(--land-coral); }
.landing-activities { padding: 104px max(8.2%, calc((100% - 1100px)/2)) 110px; background: #f5f3e9; }
.activity-layout { display: grid; grid-template-columns: .82fr 1.18fr; gap: 10%; margin-top: 25px; }
.activity-layout h2 { font-size: clamp(41px, 4.7vw, 60px); }
.activity-layout > div:first-child > p { max-width: 300px; margin-top: 20px; }
.activity-list { border-top: 1px solid var(--land-line); }
.activity-list > div { display: grid; grid-template-columns: 32px 1fr auto 20px; align-items: center; gap: 14px; min-height: 61px; border-bottom: 1px solid var(--land-line); }
.activity-count { color: var(--land-coral); font: italic 14px Georgia, serif; }
.activity-name { font: 17px Georgia, serif; }
.activity-detail { color: #849087; font-size: 9px; }
.activity-arrow { color: var(--land-green); font-size: 14px; text-align: right; }
.landing-final { min-height: 440px; position: relative; overflow: hidden; padding: 83px 20px 78px; text-align: center; color: #f3f0e3; background: var(--land-green-dark); }
.final-orbit { position: absolute; top: -270px; left: 50%; width: 680px; height: 570px; border: 1px solid rgba(217,231,205,.13); border-radius: 50%; transform: translateX(-50%) rotate(-12deg); }
.final-orbit::after { content: ""; position: absolute; inset: 35px -100px; border: 1px solid rgba(217,231,205,.1); border-radius: 50%; }
.final-eyebrow { position: relative; color: #c8d6be; font-size: 9px; letter-spacing: .19em; }
.landing-final h2 { position: relative; margin: 18px 0 13px; font-size: clamp(47px, 6vw, 73px); }
.landing-final h2 em { color: #d5a18b; }
.landing-final > p { position: relative; margin: 0; color: #c0d0c4; font-size: 12px; }
.final-actions { position: relative; display: flex; justify-content: center; align-items: center; gap: 24px; margin-top: 26px; }
.landing-button.light { color: var(--land-green-dark); background: #f2eee0; }
.landing-button.light:hover { background: #fffaf0; }
.final-login { color: #e2e8d9; font-size: 11px; }
.final-login:hover { text-decoration: underline; text-underline-offset: 4px; }
.landing-footer { min-height: 86px; max-width: 1320px; margin: 0 auto; padding: 20px 6.2%; display: flex; align-items: center; gap: 30px; color: var(--land-muted); background: var(--land-paper); }
.landing-footer .landing-brand { gap: 4px; font-size: 14px; }
.landing-footer .landing-brand-copy { margin-left: 0; }
.landing-footer .landing-brand img { width: 28px; height: 28px; transform: translateY(-6px); }
.landing-footer p { margin: 0 auto 0 0; font-size: 9px; }
.landing-footer > a:not(.landing-brand) { font-size: 10px; font-weight: 650; }
.landing-footer > a:not(.landing-brand) span { color: var(--land-coral); margin-left: 5px; }
.landing-footer small { color: #89938a; font-size: 9px; }
@media (min-width: 1500px) {
  .landing-hero { min-height: 730px; }
}
@media (max-width: 850px) {
  .landing-nav { height: 70px; padding: 0 5%; }
  .landing-nav nav { margin-right: 24px; gap: 20px; }
  .landing-hero { padding: 62px 6% 60px; grid-template-columns: 1fr .9fr; min-height: 590px; }
  .landing-hero h1 { font-size: clamp(48px, 7vw, 66px); }
  .hero-art { min-height: 410px; }
  .orbit-one { width: 330px; height: 250px; }
  .orbit-two { width: 290px; height: 350px; }
  .landing-intro, .landing-activities { padding-left: 6%; padding-right: 6%; }
  .landing-tools { padding-left: 5%; padding-right: 5%; }
  .tool-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 22px; row-gap: 30px; }
  .tool-icon { width: 142px; height: 132px; }
}
@media (max-width: 620px) {
  .landing-nav { height: 64px; padding: 0 19px; }
  .landing-brand { font-size: 15px; gap: 7px; }
  .landing-brand img { width: 30px; height: 30px; }
  .landing-nav nav { display: none; }
  .landing-nav-login { font-size: 11px; }
  .landing-hero { display: flex; flex-direction: column; align-items: stretch; gap: 0; padding: 55px 24px 56px; }
  .hero-copy { padding-bottom: 0; }
  .landing-hero h1 { margin: 20px 0 17px; font-size: clamp(48px, 13vw, 68px); }
  .hero-description { max-width: 390px; font-size: 13px; }
  .hero-actions { gap: 18px; margin-top: 23px; }
  .landing-button { min-height: 45px; padding: 0 15px; gap: 13px; font-size: 10px; }
  .landing-button.quiet { gap: 8px; }
  .hero-note { font-size: 9px; }
  .hero-art { min-height: 365px; margin: 17px -7px 0; }
  .chat-window { width: min(325px, 83vw); }
  .orbit-one { width: min(390px, 96vw); height: 245px; }
  .orbit-two { width: min(310px, 80vw); height: 340px; }
  .label-chat { top: 35px; left: 1%; }
  .label-live { right: -1%; bottom: 55px; font-size: 8px; }
  .art-note { left: 1%; bottom: 30px; font-size: 16px; }
  .hero-bottomline { bottom: 15px; left: 24px; right: 24px; }
  .hero-bottomline span:nth-child(2) { display: none; }
  .landing-intro, .landing-activities { padding: 70px 24px; }
  .intro-grid, .activity-layout { grid-template-columns: 1fr; gap: 24px; }
  .landing-intro h2, .tools-heading h2 { font-size: 46px; }
  .intro-copy p { font-size: 12px; }
  .pathway { grid-template-columns: 1fr; gap: 22px; margin-top: 47px; }
  .path-step { padding-top: 20px; }
  .path-step p { max-width: 400px; }
  .step-icon { margin-bottom: 13px; }
  .path-connector { display: none; }
  .landing-tools { padding: 72px 24px 60px; }
  .tools-heading { display: block; }
  .tool-columns { grid-template-columns: 1fr; gap: 28px; margin-top: 37px; }
  .tool-icon { width: 132px; height: 122px; }
  .tool-block h3 { font-size: 20px; }
  .tool-block > p { max-width: 470px; }
  .integration-strip { gap: 12px; margin-top: 49px; font-size: 10px; }
  .integration-label { flex-basis: 100%; margin: 0; text-align: center; }
  .integration-strip p { line-height: 1.5; }
  .landing-quote { min-height: 315px; padding: 65px 25px; }
  .landing-quote blockquote { font-size: 36px; }
  .landing-activities { padding-top: 73px; }
  .activity-layout { gap: 35px; }
  .activity-layout h2 { font-size: 45px; }
  .activity-list > div { grid-template-columns: 23px 1fr 15px; gap: 8px; min-height: 59px; }
  .activity-name { font-size: 15px; }
  .activity-detail { display: none; }
  .landing-final { min-height: 400px; padding: 73px 18px; }
  .landing-final h2 { font-size: 55px; }
  .final-actions { gap: 17px; }
  .landing-footer { min-height: 0; padding: 24px; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 14px 16px; }
  .landing-footer .landing-brand { grid-column: 1 / -1; flex-direction: column; justify-self: center; gap: 8px; text-align: center; }
  .landing-footer .landing-brand img { width: 34px; height: 34px; }
  .landing-footer .landing-brand span { margin-left: 0; }
  .landing-footer p { grid-column: 1 / -1; width: 100%; margin: 0; font-size: 9px; text-align: center; }
  .landing-footer > a:not(.landing-brand) { grid-column: 1; justify-self: start; margin: 0; }
  .landing-footer small { grid-column: 2; justify-self: end; margin: 0; text-align: right; }
  .landing-wordfield .w1 { top: 3%; }
  .landing-wordfield .w2 { top: 14%; right: -15%; }
  .landing-wordfield .w4 { top: 37%; right: -20%; }
  .landing-wordfield .w5 { top: 58%; left: -8%; }
  .landing-wordfield .w10, .landing-wordfield .w12 { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .landing-page *, .landing-page *::before, .landing-page *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}
.ac-pill.amber { background: rgba(245,179,1,.16); color: #f5b301; }
.ac-pill.violet { background: rgba(168,85,247,.18); color: #c084fc; }
:root[data-theme="light"] .ac-pill.green { color: #08835c; }
:root[data-theme="light"] .ac-pill.amber { color: #a16207; }

/* tarjeta */
.act-card { display: flex; gap: 12px; align-items: center; min-width: 260px; padding: 12px; border-radius: 12px; cursor: pointer; color: #fff;
  background: linear-gradient(135deg, #3b2a6b, #1b2a4a 70%); }
.ac-ic { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; font-size: 24px; background: rgba(255,255,255,.12); flex-shrink: 0; }
.ac-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.ac-txt small { font: 800 10px Inter, sans-serif; letter-spacing: .6px; color: #c4b5fd; }

/* Public landing hero — centered forest-green banner */
.landing-nav {
  --hero-forest: #123f36;
  --hero-cream: #f4f0e3;
  position: sticky;
  top: 0;
  z-index: 20;
  width: 100%;
  max-width: none;
  height: 82px;
  margin: 0;
  padding: 0 6.2%;
  border-bottom: 1px solid rgba(221, 230, 215, .12);
  background: var(--hero-forest);
}
.landing-page .landing-brand {
  color: var(--hero-cream);
}
.landing-page .landing-brand-byline {
  color: rgba(244, 240, 227, .66);
}
.landing-footer .landing-brand-byline {
  grid-column: 1;
  grid-row: 2;
  align-self: start;
  color: #68786d;
  font-size: 6px;
  letter-spacing: .06em;
  justify-self: end;
  text-align: right;
  text-transform: none;
}
.landing-brand img {
  padding: 3px;
  border-radius: 9px;
  background: var(--hero-cream);
}
.landing-brand i {
  color: rgba(244, 240, 227, .75);
}
.landing-nav nav a,
.landing-nav-login {
  color: rgba(244, 240, 227, .82);
}
.landing-nav nav a:hover,
.landing-nav-login:hover {
  color: #fff;
}
.landing-page .landing-nav-login {
  color: var(--hero-cream);
}
.landing-brand:focus-visible,
.landing-nav nav a:focus-visible,
.landing-nav-login:focus-visible {
  outline: 2px solid #d8a08b;
  outline-offset: 5px;
}
@media (max-width: 900px) {
  .landing-nav {
    padding: 0 5%;
  }
}
@media (max-width: 620px) {
  .landing-nav {
    height: 64px;
    padding: 0 19px;
  }
}

.landing-hero {
  --hero-forest: #123f36;
  --hero-cream: #f4f0e3;
  --hero-muted: #d0d9cf;
  --hero-warm: #d8a08b;
  display: grid;
  grid-template-columns: minmax(118px, 195px) minmax(0, 780px);
  column-gap: clamp(0px, .4vw, 6px);
  place-content: center;
  place-items: center;
  width: 100%;
  max-width: none;
  min-height: 430px;
  margin: 0;
  padding: 70px 24px;
  overflow: hidden;
  isolation: isolate;
  color: var(--hero-cream);
  background: var(--hero-forest);
  text-align: center;
}
.hero-emblem {
  display: block;
  width: min(100%, 195px);
  height: auto;
  aspect-ratio: 1;
  object-fit: contain;
  opacity: .55;
  mix-blend-mode: screen;
  transform: translate(90px, -16px);
}
.landing-hero::before,
.landing-hero::after {
  position: absolute;
  z-index: -1;
  left: 50%;
  border: 1px solid rgba(221, 230, 215, .085);
  border-radius: 50%;
  content: "";
  pointer-events: none;
  transform: translateX(-50%);
}
.landing-hero::before {
  top: -705px;
  width: 1100px;
  height: 1100px;
  box-shadow: 0 0 0 74px rgba(221, 230, 215, .018), 0 0 0 150px rgba(221, 230, 215, .012);
}
.landing-hero::after {
  top: -570px;
  width: 830px;
  height: 830px;
  border-color: rgba(221, 230, 215, .055);
}
.landing-hero .hero-copy {
  width: min(100%, 850px);
  padding: 0;
}
.landing-hero .landing-kicker {
  display: block;
  margin: 0 0 25px;
  color: #c0d0c3;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .2em;
}
.landing-hero h1 {
  margin: 0;
  color: var(--hero-cream);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(58px, 6.3vw, 88px);
  font-weight: 400;
  letter-spacing: -.065em;
  line-height: .98;
}
.landing-hero h1 em {
  color: var(--hero-warm);
  font-weight: 400;
}
.landing-hero .hero-description {
  max-width: none;
  margin: 19px 0 0;
  color: var(--hero-muted);
  font-size: 13px;
  line-height: 1.65;
}
.landing-hero .hero-actions {
  justify-content: center;
  gap: 25px;
  margin-top: 26px;
}
.landing-hero .landing-button {
  min-height: 48px;
  padding: 0 22px;
  font-size: 12px;
}
.landing-hero .landing-button.primary {
  color: #193d35;
  background: var(--hero-cream);
}
.landing-hero .landing-button.primary:hover {
  background: #fff9eb;
}
.landing-hero .landing-button.quiet {
  min-height: 44px;
  padding: 0;
  color: var(--hero-cream);
  font-weight: 600;
}
.landing-hero .landing-button.quiet:hover {
  color: #fff;
}
.landing-hero a:focus-visible {
  outline: 2px solid var(--hero-warm);
  outline-offset: 5px;
}
@media (max-width: 620px) {
  .landing-hero {
    min-height: 388px;
    grid-template-columns: minmax(0, 1fr);
    padding: 63px 22px 66px;
  }
  .landing-hero::before {
    top: -625px;
    width: 860px;
    height: 860px;
    box-shadow: 0 0 0 58px rgba(221, 230, 215, .018), 0 0 0 118px rgba(221, 230, 215, .012);
  }
  .landing-hero::after {
    top: -500px;
    width: 660px;
    height: 660px;
  }
  .landing-hero .hero-copy {
    width: 100%;
  }
  .landing-hero .landing-kicker {
    margin-bottom: 22px;
    font-size: 9px;
  }
  .landing-hero h1 {
    font-size: clamp(38px, 10vw, 44px);
    line-height: 1.02;
    letter-spacing: -.06em;
  }
  .landing-hero .hero-description {
    max-width: 330px;
    margin: 17px auto 0;
    font-size: 12px;
  }
  .landing-hero .hero-actions {
    flex-direction: column;
    gap: 9px;
    margin-top: 22px;
  }
  .landing-hero .landing-button.primary {
    min-width: 190px;
  }
  .landing-hero .landing-button.quiet {
    min-height: 38px;
  }
}
.ac-txt span { font-size: 12px; color: #cbd5e1; }
.ac-txt .ac-pill { align-self: flex-start; margin-top: 3px; }
.link-btn[disabled] { opacity: .55; cursor: default; text-decoration: none; }

/* constructor */
.ab-body { display: flex; flex-direction: column; gap: 14px; }
.ab-l { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--muted); font-weight: 600; }
.ab-l .seg { margin: 0; }
.ab-l input[hidden] { display: none; }
.ab-att { display: flex; align-items: center; gap: 10px; }
.ab-note { margin: 0; font-size: 13px; color: var(--muted); padding: 12px; border-radius: 10px; background: var(--field); }
.ab-qhead { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; }
.ab-q { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 12px; border: 1px solid var(--border); background: var(--field); margin-top: 10px; }
.ab-qtop { display: flex; align-items: center; gap: 8px; }
.ab-qtop select { width: auto; flex: 1; max-width: 200px; }
.ab-n { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: #04261a; font: 800 12px Inter, sans-serif; flex-shrink: 0; }
.ab-pts { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--muted); margin-left: auto; }
.ab-pts input { width: 62px; }
.ab-opts { display: flex; flex-direction: column; gap: 6px; }
.ab-opt { display: flex; align-items: center; gap: 8px; }
.ab-ok { width: 26px; height: 26px; flex-shrink: 0; border: 2px solid var(--border-2, #3b4a54); border-radius: 50%; color: #fff; font-weight: 800; display: grid; place-items: center; }
.ab-ok.multi { border-radius: 7px; }
.ab-ok.on { background: #21c27e; border-color: #21c27e; }
.ab-add { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.input.sm { height: 34px; padding: 0 10px; font-size: 13.5px; }
.al-list { display: flex; flex-direction: column; gap: 8px; }
.al-item { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 12px; background: var(--field); text-align: left; color: var(--text); }
.al-item > span:nth-child(2) { flex: 1; display: flex; flex-direction: column; }
.al-item small { color: var(--muted); }
.al-item > svg { transform: rotate(-90deg); color: var(--muted); }
.al-item .ac-ic { background: linear-gradient(135deg, #3b2a6b, #1b2a4a); width: 40px; height: 40px; font-size: 20px; }

/* vista de la actividad */
.act { position: fixed; inset: 0; z-index: 46; display: flex; flex-direction: column; background: var(--app); animation: tbIn .2s ease-out; }
.act.out { opacity: 0; transition: opacity .16s; }
.act-head { display: flex; align-items: center; gap: 12px; padding: 10px 16px; min-height: 64px; background: linear-gradient(90deg, #2c1f55, #16243d); color: #fff; flex-shrink: 0; }
.act-head .icon-btn { color: #fff; }
.act-title { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.act-title small { color: #c4b5fd; font-size: 12px; }
.act-title b { font: 700 19px 'Exo 2', Inter, sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.act-actions { display: flex; align-items: center; gap: 10px; }
.act-count { font-size: 13px; color: #c4b5fd; font-weight: 600; }
.act-head .btn.danger-ghost { color: #ff9b9b; border: 1px solid rgba(255,107,107,.4); }
.act-body { flex: 1; overflow-y: auto; padding: 18px 16px 110px; display: flex; flex-direction: column; gap: 14px; align-items: center; }
.act-body > * { width: 100%; max-width: 860px; }
.act-body > .act-grid { max-width: 1180px; }
.act-sec { background: var(--panel); border: 1px solid var(--border); border-radius: 16px; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.act-intro p { margin: 0; line-height: 1.55; }
.act-intro .file-card { margin: 0; background: var(--field); border-radius: 10px; }
.act-sh { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.act-teamline { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.act-team { padding: 5px 14px; border-radius: 99px; background: var(--c); color: #fff; font: 700 14px 'Exo 2', Inter, sans-serif; }
.act-members { display: flex; flex-wrap: wrap; gap: 10px; }
.am { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; width: 74px; text-align: center; }
.am span { font-size: 12px; font-weight: 600; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.am small { font-size: 10.5px; color: var(--muted); }
.am-crown { position: absolute; top: -10px; left: 50%; transform: translateX(-50%) rotate(-10deg); font-style: normal; font-size: 15px; }
.aq { display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: 12px; background: var(--field); border: 1px solid var(--border); }
.aq.ok { border-color: rgba(33,194,126,.5); }
.aq.bad { border-color: rgba(239,68,68,.5); }
.aq-top { display: flex; align-items: flex-start; gap: 10px; }
.aq-top b { flex: 1; font-weight: 600; line-height: 1.4; }
.aq-top small { color: var(--muted); white-space: nowrap; }
.aq-mark { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; color: #fff; flex-shrink: 0; }
.aq-mark.ok { background: #21c27e; } .aq-mark.bad { background: #ef4444; }
.aq-opts { display: flex; flex-direction: column; gap: 6px; }
.aq-opt { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; background: var(--panel); border: 1px solid var(--border); text-align: left; color: var(--text); transition: border-color .12s, background .12s; }
.aq-opt:not([disabled]):hover { border-color: var(--accent); }
.aq-opt.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, var(--panel)); }
.aq-opt.corr { box-shadow: inset 3px 0 0 #21c27e; }
.aq-opt em { margin-left: auto; font-style: normal; font-size: 11px; font-weight: 700; color: #21c27e; }
.aq-box { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--muted); display: grid; place-items: center; font: 800 12px Inter, sans-serif; flex-shrink: 0; }
.aq-opt.multi .aq-box { border-radius: 6px; }
.aq-opt.on .aq-box { background: var(--accent); border-color: var(--accent); color: #04261a; }
.aq-open { padding: 10px 12px; border-radius: 10px; background: var(--panel); line-height: 1.5; }
.aq-who { color: var(--accent); font-size: 12px; }
.aq-who.none { color: var(--muted); }
.aq-save { font-size: 11.5px; color: var(--muted); min-height: 14px; }
.act-files { display: flex; flex-direction: column; gap: 6px; }
.af { display: flex; align-items: center; gap: 8px; }
.af a { flex: 1; display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 10px; background: var(--field); color: var(--text); text-decoration: none; min-width: 0; }
.af a span { display: flex; flex-direction: column; min-width: 0; }
.af a b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.af a small { color: var(--muted); font-size: 12px; }
.act-drop { display: flex; align-items: center; gap: 12px; padding: 16px; border-radius: 12px; border: 2px dashed var(--border-2, #3b4a54); cursor: pointer; color: var(--muted); }
.act-drop span { display: flex; flex-direction: column; }
.act-drop b { color: var(--text); }
.act-drop.hot, .act-drop:hover { border-color: var(--accent); color: var(--accent); }
.act-foot { position: fixed; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; padding: 14px 16px calc(14px + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--panel) 92%, transparent); backdrop-filter: blur(8px); border-top: 1px solid var(--border); font-size: 14px; color: var(--muted); max-width: none !important; }
.act-grade { flex-direction: row; align-items: center; gap: 18px; border-color: rgba(168,85,247,.45); background: linear-gradient(135deg, rgba(168,85,247,.14), var(--panel)); }
.ag-num { font: 800 44px 'Exo 2', Inter, sans-serif; color: #c084fc; line-height: 1; }
.ag-num small { font-size: 16px; color: var(--muted); }
.act-grade > div:last-child { display: flex; flex-direction: column; gap: 4px; }
.act-grade p { margin: 4px 0 0; }
/* docente */
.act-grid { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 16px; align-items: start; }
.act-teams { display: flex; flex-direction: column; gap: 8px; position: sticky; top: 0; }
.at { display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 14px; background: var(--panel); border: 1px solid var(--border); text-align: left; color: var(--text); }
.at.on { border-color: var(--c); box-shadow: 0 0 0 1px var(--c), 0 6px 18px color-mix(in srgb, var(--c) 25%, transparent); }
.at-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--c); flex-shrink: 0; }
.at-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.at-main small { color: var(--muted); font-size: 12px; }
.at-side { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.at-grade { font: 800 16px 'Exo 2', Inter, sans-serif; color: #c084fc; }
.act-detail { background: var(--panel); border: 1px solid var(--border); border-top: 4px solid var(--c); border-radius: 16px; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.act-detail .act-sec { padding: 0; border: 0; background: none; }
.act-gradebox { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; padding: 14px; border-radius: 12px; background: var(--field); }
.act-gradebox label { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.act-gradebox label:first-child input { width: 120px; font: 700 18px Inter, sans-serif; }
.act-gradebox .grow { flex: 1; min-width: 220px; }
.ag-btns { display: flex; gap: 8px; }
.pres-builder-note { border: 1px solid rgba(192,132,252,.28); background: color-mix(in srgb, #a855f7 9%, var(--panel)); }
.pres-builder-note b, .pres-builder-note span { display: block; }
.pres-builder-note span { color: var(--muted); line-height: 1.5; margin-top: 4px; }
.wordcloud-builder-note { border: 1px solid rgba(45,212,191,.28); background: color-mix(in srgb, #2dd4bf 8%, var(--panel)); }
.wordcloud-builder-note b, .wordcloud-builder-note span { display: block; }
.wordcloud-builder-note span { color: var(--muted); line-height: 1.5; margin-top: 4px; }
.pres-parts { border-color: color-mix(in srgb, #a855f7 32%, var(--border)); }
.pres-part, .pres-review { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--field); }
.pres-part > div, .pres-review > div { min-width: 0; display: flex; flex-direction: column; gap: 3px; flex: 1; }
.pres-part small, .pres-review header small { color: var(--muted); font-size: 12px; }
.pres-part.mine { border-color: color-mix(in srgb, #a855f7 60%, var(--border)); }
.pres-score { min-width: 72px; text-align: right; font: 800 24px 'Exo 2', Inter, sans-serif; color: #c084fc; }
.pres-score small { display: block; font: 600 10px Inter, sans-serif; color: var(--muted); white-space: nowrap; }
.pres-feedback { padding: 12px; border-radius: 12px; background: color-mix(in srgb, #a855f7 7%, var(--field)); line-height: 1.5; }
.pres-feedback p, .pres-review p { margin: 5px 0; }
.pres-feedback small, .pres-review > small { display: block; margin-top: 6px; line-height: 1.45; color: var(--muted); }
.pres-feedback details, .pres-review details { margin-top: 8px; }
.pres-feedback summary, .pres-review summary { cursor: pointer; font-weight: 600; }
.pres-transcript { white-space: pre-wrap; max-height: 260px; overflow: auto; padding: 10px; border-radius: 8px; background: var(--field); color: var(--muted); line-height: 1.5; }
.pres-error { margin: 0; color: #fca5a5; }
.pres-review { align-items: flex-start; flex-direction: column; }
.pres-review header { width: 100%; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pres-review header > div { min-width: 120px; display: flex; flex-direction: column; gap: 3px; flex: 1; }
.pres-review header .pres-score { margin-left: auto; }
.pres-total { display: flex; flex-direction: column; gap: 3px; padding: 13px; border-radius: 12px; background: color-mix(in srgb, #a855f7 12%, var(--field)); }
.pres-total b { font: 800 22px 'Exo 2', Inter, sans-serif; color: #c084fc; }
.pres-total small { color: var(--muted); line-height: 1.45; }
.pres-grade-note { grid-column: 1 / -1; color: var(--muted); line-height: 1.45; }
.mesh-library { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.mesh-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--field); }
.mesh-item > div { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.mesh-item small { color: var(--muted); }
.ar-activity { border-color: color-mix(in srgb, #38bdf8 35%, var(--border)); }
.ar-viewer-wrap { width: 100%; overflow: hidden; border-radius: 14px; border: 1px solid var(--border); background: radial-gradient(circle at 50% 35%, #253848, #0b141a); }
.ar-viewer-wrap model-viewer { display: block; width: 100%; height: min(62vh, 620px); min-height: 320px; --poster-color: transparent; }
.ar-place { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); white-space: nowrap; }
.ar-controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ar-controls small { color: var(--muted); }
.spoken-recorder { border-color: color-mix(in srgb, #f472b6 32%, var(--border)); }
.spoken-consent { display: flex; align-items: flex-start; gap: 10px; padding: 13px; border: 1px solid var(--border); border-radius: 12px; background: var(--field); line-height: 1.5; }
.spoken-consent input { margin-top: 4px; accent-color: var(--accent); flex: 0 0 auto; }
.spoken-status { min-height: 24px; color: var(--text); line-height: 1.5; overflow-wrap: anywhere; }
.spoken-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.spoken-image { display: block; width: 100%; max-height: min(62vh, 700px); object-fit: contain; border-radius: 12px; background: var(--field); }
.spoken-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.spoken-card { min-width: 0; display: flex; flex-direction: column; gap: 10px; padding: 12px; border: 1px solid var(--border); border-radius: 13px; background: var(--field); }
.spoken-card header { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.spoken-card header small, .spoken-result .act-sh small { color: var(--muted); }
.spoken-card details, .spoken-result details { color: var(--muted); }
.spoken-card details p, .spoken-result details p { white-space: pre-wrap; line-height: 1.5; }
.pres-recorder { display: flex; flex-direction: column; gap: 14px; }
.pres-consent { padding: 14px; border-radius: 12px; border: 1px solid var(--border); background: var(--field); line-height: 1.5; }
.pres-consent p { margin: 5px 0 12px; color: var(--muted); }
.pres-consent label { display: flex; align-items: flex-start; gap: 9px; }
.pres-consent input { margin-top: 4px; }
.pres-live, .pres-preview, .pres-playback video { width: 100%; max-height: min(56vh, 620px); aspect-ratio: 16 / 9; border-radius: 12px; background: #071015; object-fit: contain; }
.pres-clock { text-align: center; font: 700 24px 'Exo 2', Inter, sans-serif; color: #fca5a5; }
.pres-upload-state { min-height: 22px; margin: 0; color: var(--muted); overflow-wrap: anywhere; }
.pres-recorder-foot { flex-wrap: wrap; }
.pres-recorder-foot button:disabled { opacity: .5; cursor: not-allowed; }
.pres-playback { min-height: 140px; display: flex; flex-direction: column; justify-content: center; }
@media (max-width: 860px) {
  .act-grid { grid-template-columns: minmax(0, 1fr); }
  .act-teams { position: static; }
  .act-head .btn span, .act-count { display: none; }
  .act-body { padding: 12px 10px 120px; }
  .act-grade { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 600px) {
  .pres-part, .pres-review header { align-items: flex-start; }
  .pres-recorder-foot { display: grid; grid-template-columns: 1fr 1fr; }
  .pres-recorder-foot button { min-width: 0; }
}
.act-pill { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px 0 10px; margin-right: 6px; border-radius: 99px; font: 700 13px Inter, sans-serif; color: #fff; background: linear-gradient(135deg, #7c5cff, #4f46e5); box-shadow: 0 4px 14px rgba(124,92,255,.35); white-space: nowrap; transition: transform .12s; }
.act-pill:hover { transform: translateY(-1px); }
@media (max-width: 820px) { .act-pill { padding: 0 10px; } .act-pill span { display: none; } }
/* cada grupo de equipo con su propio color */
.avatar.group.team { --tc: #f5b301; color: #fff; background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--tc) 55%, #fff), var(--tc) 60%, color-mix(in srgb, var(--tc) 70%, #000)); box-shadow: 0 0 0 2px #0b141a, 0 0 0 4px var(--tc); }
:root[data-theme="light"] .avatar.group.team { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--tc); }
.avatar.group.team svg { filter: drop-shadow(0 1px 1px rgba(0,0,0,.3)); }
.avatar.group.team .team-no { border-color: var(--tc); }
.team-tag { --tc: #f5b301; color: #fff; background: var(--tc); text-shadow: 0 1px 1px rgba(0,0,0,.25); }
.chat-item.is-team { background: linear-gradient(90deg, color-mix(in srgb, var(--tc) 10%, transparent), transparent 60%); }
.chat-item.is-team.on { background: linear-gradient(90deg, color-mix(in srgb, var(--tc) 22%, transparent), color-mix(in srgb, var(--tc) 5%, transparent)); border-color: color-mix(in srgb, var(--tc) 50%, transparent); }

/* tipos de actividad bien diferenciados */
.ac-ic { color: #fff; }
.ac-ic.k-quiz { background: linear-gradient(135deg, #6366f1, #3b82f6); box-shadow: 0 4px 12px rgba(59,130,246,.4); }
.ac-ic.k-file { background: linear-gradient(135deg, #f97316, #f59e0b); box-shadow: 0 4px 12px rgba(249,115,22,.4); }
.ac-ic.k-both { background: linear-gradient(135deg, #10b981, #06b6d4); box-shadow: 0 4px 12px rgba(16,185,129,.4); }
.ac-ic.k-presentation { background: linear-gradient(135deg, #9333ea, #c084fc); box-shadow: 0 4px 12px rgba(168,85,247,.38); }
.act-card.k-quiz { background: linear-gradient(135deg, #1e2a6b, #172042 70%); }
.act-card.k-file { background: linear-gradient(135deg, #5a2a0c, #2d1a10 70%); }
.act-card.k-both { background: linear-gradient(135deg, #0b4a43, #0f2a33 70%); }
.act-card.k-presentation { background: linear-gradient(135deg, #4c1d70, #211a38 70%); }
.act-card.k-quiz .ac-txt small { color: #a5b4fc; }
.act-card.k-file .ac-txt small { color: #fdba74; }
.act-card.k-both .ac-txt small { color: #6ee7d8; }
.act-card.k-presentation .ac-txt small { color: #e9d5ff; }
.al-item .ac-ic.k-quiz, .al-item .ac-ic.k-file, .al-item .ac-ic.k-both, .al-item .ac-ic.k-presentation, .al-item .ac-ic.k-wordcloud { width: 40px; height: 40px; }
.al-item .ac-ic svg { width: 22px; height: 22px; }
.act-head.k-quiz { background: linear-gradient(90deg, #2b3a8f, #172042); }
.act-head.k-file { background: linear-gradient(90deg, #8a3a0d, #2d1a10); }
.act-head.k-both { background: linear-gradient(90deg, #0d6157, #0f2a33); }
.act-head.k-presentation { background: linear-gradient(90deg, #6b21a8, #241b3a); }
.ac-ic.k-wordcloud { background: linear-gradient(135deg, #0f766e, #2dd4bf); box-shadow: 0 4px 12px rgba(45,212,191,.28); }
.act-card.k-wordcloud { background: linear-gradient(135deg, #164e4b, #17262a 70%); }
.act-card.k-wordcloud .ac-txt small { color: #99f6e4; }
.act-head.k-wordcloud { background: linear-gradient(90deg, #115e59, #18272a); }
.act-head.k-quiz .act-title small { color: #c7d2fe; }
.act-head.k-file .act-title small { color: #fed7aa; }
.act-head.k-both .act-title small { color: #a7f3eb; }
.act-head.k-presentation .act-title small { color: #e9d5ff; }

/* círculo identificador del color de equipos en el grupo principal */
.avatar.group { position: relative; overflow: visible; }
.teams-dot { position: absolute; top: -2px; right: -2px; width: 32%; height: 32%; min-width: 10px; min-height: 10px; border-radius: 50%; background: var(--tc); box-shadow: 0 0 0 2px var(--panel, #111b21); }
.tcolor-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.tcolor { width: 30px; height: 30px; border-radius: 50%; background: var(--tc); box-shadow: 0 0 0 2px var(--panel), 0 0 0 3px transparent; transition: transform .12s, box-shadow .12s; }
button.tcolor:hover { transform: scale(1.12); }
.tcolor.on { box-shadow: 0 0 0 2px var(--panel), 0 0 0 4px var(--tc); }
.tcolor.custom { display: grid; place-items: center; background: conic-gradient(#f5b301, #ef4444, #a855f7, #3b82f6, #06b6d4, #84cc16, #f5b301); color: #fff; font-weight: 800; cursor: pointer; position: relative; text-shadow: 0 1px 2px rgba(0,0,0,.5); }
.tcolor.custom input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.sm-note { font-size: 12.5px; margin: 2px 0 10px; }
.team-of { font-weight: 400; color: var(--muted); margin-right: 5px; font-size: .92em; }
/* foto de grupo: el punto de color y el número de equipo se mantienen sobre la foto */
.avatar.group.photo { color: transparent; }
.avatar.group.photo .teams-dot, .avatar.group.photo .team-no { color: #fff; }
.avatar.group.team.photo { background-size: cover; background-position: center; }
.av-edit.group { border-radius: 30%; }
.av-edit.group span { border-radius: 30%; }
.teams-dots { position: absolute; top: -3px; right: -3px; display: flex; flex-direction: row-reverse; }
.teams-dots .teams-dot { position: static; width: calc(var(--s) * .3); height: calc(var(--s) * .3); min-width: 10px; min-height: 10px; margin-left: calc(var(--s) * -.12); }
.teams-dots .teams-dot:last-child { margin-left: 0; }
.teams-dot.static { position: static; display: inline-block; width: 14px; height: 14px; box-shadow: none; flex-shrink: 0; }
.form-list { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 8px; }
.form-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; background: var(--field); }
.form-item small { margin-left: auto; color: var(--muted); }
.act-card.ended { filter: grayscale(.85); opacity: .8; }
.act-card.ended .ac-txt small { color: #cbd5e1 !important; }
.al-item.ended { opacity: .65; }
.al-old { margin-top: 6px; }
.al-old summary { cursor: pointer; color: var(--muted); font-size: 13px; padding: 6px 2px; }
.al-old .al-item { margin-top: 6px; width: 100%; }

/* =====================================================================
   Herramientas de clase
   ===================================================================== */
.class-pill { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px 0 10px; margin-right: 6px; border-radius: 99px; font: 700 13px Inter, sans-serif; color: #fff; background: linear-gradient(135deg, #0ea5e9, #2563eb); box-shadow: 0 4px 14px rgba(37,99,235,.35); white-space: nowrap; }
.live-pill { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px 0 12px; margin-right: 6px; border-radius: 99px; font: 800 12px Inter, sans-serif; letter-spacing: .4px; color: #fff; background: #e5484d; box-shadow: 0 0 0 0 rgba(229,72,77,.6); animation: livePulse 1.8s infinite; white-space: nowrap; }
.live-pill i { width: 9px; height: 9px; border-radius: 50%; background: #fff; }
@keyframes livePulse { 70% { box-shadow: 0 0 0 10px rgba(229,72,77,0); } 100% { box-shadow: 0 0 0 0 rgba(229,72,77,0); } }
@media (max-width: 820px) { .class-pill span, .live-pill span { display: none; } .class-pill, .live-pill { padding: 0 10px; } }
.tool-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.tool { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 14px; border-radius: 14px; background: var(--field); border: 1px solid var(--border); text-align: left; color: var(--text); transition: transform .12s, border-color .12s; }
.tool:hover { transform: translateY(-2px); border-color: var(--accent); }
.tool-ic { font-size: 26px; }
.tool small { color: var(--muted); font-size: 12px; line-height: 1.3; }
.tool-wide { grid-column: 1 / -1; }
/* tarjetas comunes */
.lv-card, .rl-card, .pu-card, .pe-card { min-width: 270px; padding: 12px; border-radius: 12px; background: var(--panel-2, rgba(0,0,0,.18)); display: flex; flex-direction: column; gap: 10px; }
.lv-top { display: flex; gap: 12px; align-items: center; }
.lv-top > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.lv-top small { font: 800 10.5px Inter, sans-serif; letter-spacing: .5px; color: var(--muted); }
.lv-top span { font-size: 12.5px; color: var(--muted); }
.lv-ic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: #2d8cff; color: #fff; font-size: 22px; flex-shrink: 0; }
.lv-ic svg { width: 26px; height: 26px; }
.lv-ic.rl { background: linear-gradient(135deg, #21c27e, #0d9488); } .lv-ic.pu { background: linear-gradient(135deg, #a855f7, #6366f1); } .lv-ic.pe { background: linear-gradient(135deg, #f59e0b, #ef4444); }
.lv-btns { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.lv-badge { font: 800 10.5px Inter, sans-serif; padding: 3px 8px; border-radius: 99px; background: var(--field); color: var(--muted); white-space: nowrap; align-self: flex-start; }
.lv-badge.live { background: #e5484d; color: #fff; animation: livePulse 1.8s infinite; }
.lv-card.live { box-shadow: inset 0 0 0 2px rgba(229,72,77,.6); }
.lv-card.ended { opacity: .75; }
.lv-join { gap: 8px; }
.lv-join svg { width: 18px; height: 18px; }
/* conectar */
.lv-prov { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.lv-p { display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 12px; background: var(--field); border: 2px solid transparent; text-align: left; color: var(--text); }
.lv-p svg { width: 28px; height: 28px; color: #2d8cff; flex-shrink: 0; }
.lv-p span { display: flex; flex-direction: column; }
.lv-p.on { border-color: var(--accent); }
.lv-p[data-off] { opacity: .7; }
em.ok { color: #21c27e; font-style: normal; font-size: 12px; } em.off { color: #ef4444; font-style: normal; font-size: 12px; } .lv-p em { font-style: normal; font-size: 12px; color: var(--muted); }
.lv-later { display: flex; gap: 8px; margin-top: 6px; } .lv-later select { width: 110px; }
.lv-body { display: flex; flex-direction: column; gap: 12px; }
.cn-body { display: flex; flex-direction: column; gap: 12px; }
.cn-body .seg { margin: 0; } .cn-body .seg button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.cn-sec { padding: 14px; border-radius: 12px; background: var(--field); border: 1px solid var(--border); display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.cn-sec h4 { margin: 0; font-size: 14px; display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; } .cn-sec h4 small { color: var(--muted); font-weight: 400; }
.cn-sec p { margin: 0; font-size: 13px; }
.cn-steps { margin: 0; padding-left: 18px; font-size: 13px; display: flex; flex-direction: column; gap: 4px; }
.cn-steps code, .cn-copy { background: var(--panel); padding: 1px 6px; border-radius: 6px; font-size: 12px; word-break: break-all; }
.cn-copy { cursor: pointer; border: 1px dashed var(--border-2, #3b4a54); }
.cn-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .cn-row .input { flex: 1; min-width: 220px; }
.cn-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .cn-grid.two { grid-template-columns: 1fr 1fr; }
@media (max-width: 700px) { .cn-grid, .cn-grid.two, .lv-prov { grid-template-columns: 1fr; } }
.cn-res { font-size: 13px; }
.cn-def { display: flex; gap: 8px; align-items: center; font-size: 13px; color: var(--muted); }
/* lista */
.rl-card.open { box-shadow: inset 0 0 0 2px rgba(33,194,126,.55); }
.rl-warn { margin: 0; font-size: 12.5px; color: #f59e0b; }
.rl-btn { height: 42px; font-size: 15px; width: 100%; }
.rl-counts { display: flex; gap: 14px; font-size: 13px; font-weight: 600; }
.rl-mine { font-weight: 700; font-size: 13px; padding: 4px 10px; border-radius: 99px; background: var(--field); }
.rl-mine.presente { color: #21c27e; } .rl-mine.ausente { color: #ef4444; } .rl-mine.tarde { color: #f59e0b; }
.rl-list { display: flex; flex-direction: column; gap: 6px; max-height: 60vh; overflow: auto; }
.rl-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; background: var(--field); }
.rl-row > b { flex: 1; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rl-st { display: flex; gap: 4px; }
.rl-st button { width: 32px; height: 32px; border-radius: 8px; background: var(--panel); opacity: .45; font-size: 15px; }
.rl-st button.on { opacity: 1; box-shadow: 0 0 0 2px var(--accent); }
.rs-marks { letter-spacing: 2px; } .rs-num { min-width: 34px; text-align: right; }
.rs-tag { font: 700 11px Inter, sans-serif; padding: 2px 8px; border-radius: 99px; }
.rs-tag.ok { background: rgba(33,194,126,.16); color: #21c27e; } .rs-tag.mid { background: rgba(245,158,11,.16); color: #f59e0b; } .rs-tag.no { background: rgba(239,68,68,.16); color: #ef4444; }
/* aviso */
.nt-card { min-width: 260px; padding: 12px 14px; border-radius: 12px; border-left: 5px solid #3b82f6; background: rgba(59,130,246,.14); display: flex; flex-direction: column; gap: 4px; }
.nt-card small { font: 800 11px Inter, sans-serif; letter-spacing: .5px; color: #60a5fa; }
.nt-card b { font-size: 15.5px; } .nt-card p { margin: 0; line-height: 1.5; }
.nt-card.ok { border-color: #21c27e; background: rgba(33,194,126,.13); } .nt-card.ok small { color: #21c27e; }
.nt-card.warn { border-color: #f59e0b; background: rgba(245,158,11,.14); } .nt-card.warn small { color: #f59e0b; }
.nt-card.urgent { border-color: #ef4444; background: rgba(239,68,68,.15); } .nt-card.urgent small { color: #f87171; }
/* pregunta rápida */
.pu-opts { display: flex; flex-direction: column; gap: 6px; }
.pu-opt { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 10px; background: var(--field); border: 1px solid var(--border); color: var(--text); text-align: left; }
.pu-opt:not([disabled]):hover { border-color: var(--accent); }
.pu-bar { position: absolute; left: 0; top: 0; bottom: 0; background: color-mix(in srgb, #a855f7 30%, transparent); transition: width .5s; }
.pu-txt, .pu-opt b { position: relative; } .pu-opt b { font-size: 12.5px; }
.pu-opt.mine { border-color: var(--accent); } .pu-opt.ok { border-color: #21c27e; } .pu-opt.ok .pu-bar { background: rgba(33,194,126,.35); }
.pu-left { font-weight: 700; color: #a855f7; }
/* ruleta, temporizador, turnos */
.pk-card, .tm-card, .tu-card { min-width: 240px; padding: 12px 14px; border-radius: 12px; display: flex; flex-direction: column; gap: 8px; }
.pk-card { background: linear-gradient(135deg, rgba(236,72,153,.18), rgba(168,85,247,.16)); }
.pk-card small, .tm-card small, .tu-card small { font: 800 11px Inter, sans-serif; letter-spacing: .4px; color: var(--muted); }
.pk-win { display: flex; align-items: center; gap: 12px; min-height: 48px; } .pk-win b { font: 800 20px 'Exo 2', Inter, sans-serif; }
.pk-win.spinning b { color: #f472b6; }
.tm-card { align-items: center; background: linear-gradient(135deg, rgba(14,165,233,.16), rgba(37,99,235,.12)); }
.tm-big { font: 800 44px 'Exo 2', Inter, sans-serif; font-variant-numeric: tabular-nums; letter-spacing: 1px; }
.tm-big.low { color: #f59e0b; animation: tmBlink 1s infinite; } .tm-big.done { color: #ef4444; }
@keyframes tmBlink { 50% { opacity: .55; } }
.tm-card.stopped .tm-big { color: var(--muted); font-size: 26px; }
.tu-card { background: linear-gradient(135deg, rgba(245,158,11,.14), rgba(249,115,22,.1)); }
.tu-card ol { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 3px; }
.tu-card li.done { color: var(--muted); text-decoration: line-through; } .tu-card li.now { font-weight: 800; color: #f59e0b; }
/* coevaluación */
.pe-form { display: flex; flex-direction: column; gap: 12px; }
.pe-mate { display: flex; gap: 12px; align-items: flex-start; padding: 10px; border-radius: 12px; background: var(--field); }
.pe-mate > div:not(.avatar) { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.pe-stars button { font-size: 26px; color: var(--muted); padding: 0 2px; line-height: 1; }
.pe-stars button.on { color: #f5b301; }
.pe-res section { margin-bottom: 14px; } .pe-res h4 { margin: 0 0 6px; }
.pe-row { display: grid; grid-template-columns: auto 1fr auto; gap: 4px 10px; align-items: center; padding: 8px 10px; border-radius: 10px; background: var(--field); margin-bottom: 6px; }
.pe-avg { color: #f5b301; white-space: nowrap; } .pe-avg b { color: var(--text); margin-left: 4px; }
.pe-com { grid-column: 2 / -1; } .pe-com p { margin: 2px 0; font-size: 13px; } .pe-com small { color: var(--muted); }
/* libro de calificaciones */
.gb-head { background: linear-gradient(90deg, #0e4f6e, #13273d); }
.gb .act-body > * { max-width: 1400px; }
.gb-wrap { overflow: auto; border-radius: 14px; border: 1px solid var(--border); background: var(--panel); }
.gb-table { border-collapse: collapse; width: 100%; font-size: 13.5px; }
.gb-table th, .gb-table td { padding: 9px 10px; border-bottom: 1px solid var(--border); text-align: center; white-space: nowrap; }
.gb-table th { position: sticky; top: 0; background: var(--head); font-size: 12px; color: var(--muted); z-index: 1; }
.gb-name { text-align: left !important; position: sticky; left: 0; background: var(--panel); z-index: 2; }
th.gb-name { background: var(--head); z-index: 3; }
td.gb-name { display: flex; align-items: center; gap: 8px; }
.gb-ok { color: #21c27e; font-weight: 700; } .gb-mid { color: #f59e0b; font-weight: 700; } .gb-low { color: #ef4444; font-weight: 700; } .gb-e { color: #60a5fa; font-weight: 700; } .gb-na { color: var(--muted); }
.gb-avg { font-weight: 800; background: color-mix(in srgb, var(--accent) 8%, transparent); }
.gb-note { font-size: 12.5px; }
@media print { body > *:not(.gb) { display: none !important; } .gb { position: static; } .gb-head .act-actions, .gb-head .icon-btn { display: none; } }

/* video con preguntas */
.vq-build { display: flex; flex-direction: column; gap: 12px; }
.vq-prev { position: relative; aspect-ratio: 16 / 9; max-height: 320px; border-radius: 12px; overflow: hidden; background: #000; display: grid; place-items: center; }
.vq-prev p { padding: 16px; text-align: center; } .vq-prev iframe, #vqPlayer { width: 100%; height: 100%; }
.vq-tools { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .vq-tools[hidden] { display: none; }
.vq-t { display: flex; align-items: center; gap: 4px; font-size: 13px; } .vq-t input { width: 76px; text-align: center; font-variant-numeric: tabular-nums; }
.vq-card { display: flex; gap: 12px; min-width: 300px; padding: 10px; border-radius: 12px; background: linear-gradient(135deg, rgba(239,68,68,.16), rgba(17,24,39,.2)); }
.vq-thumb { width: 120px; aspect-ratio: 16 / 9; border-radius: 10px; background: #000 center/cover; display: grid; place-items: center; cursor: pointer; flex-shrink: 0; }
.vq-thumb span { width: 36px; height: 36px; border-radius: 50%; background: rgba(239,68,68,.95); color: #fff; display: grid; place-items: center; font-size: 15px; }
.vq-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.vq-info small { font: 800 10.5px Inter, sans-serif; color: #f87171; letter-spacing: .4px; } .vq-info span { font-size: 12.5px; color: var(--muted); }
.vq-view { position: fixed; inset: 0; z-index: 47; background: #05080c; display: flex; flex-direction: column; animation: tbIn .2s ease-out; }
.vq-head { background: linear-gradient(90deg, #7f1d1d, #111827); }
.vq-score { color: #fff; font-weight: 800; font-size: 14px; background: rgba(255,255,255,.12); padding: 4px 12px; border-radius: 99px; }
.vq-score:empty { display: none; }
.vq-stage { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 14px; }
.vq-frame { position: relative; width: min(100%, calc((100vh - 170px) * 16 / 9)); aspect-ratio: 16 / 9; background: #000; border-radius: 12px; overflow: hidden; }
.vq-frame iframe, #vqP { position: absolute; inset: 0; width: 100%; height: 100%; }
.vq-ask { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; background: rgba(3,6,10,.72); backdrop-filter: blur(3px); padding: 16px; }
.vq-ask[hidden] { display: none; }
.vq-qcard { width: min(560px, 100%); background: var(--panel); color: var(--text); border-radius: 16px; padding: 20px; display: flex; flex-direction: column; gap: 12px; box-shadow: 0 20px 60px rgba(0,0,0,.6); animation: tsPop .25s cubic-bezier(.2,.9,.3,1.3); }
.vq-qcard small { font: 800 11px Inter, sans-serif; color: #f87171; letter-spacing: .5px; } .vq-qcard > b { font-size: 18px; line-height: 1.35; }
.vq-opts { display: flex; flex-direction: column; gap: 8px; }
.vq-opts button { padding: 12px 14px; border-radius: 12px; background: var(--field); border: 2px solid var(--border); text-align: left; color: var(--text); font-size: 15px; }
.vq-opts button:not([disabled]):hover { border-color: var(--accent); }
.vq-opts button.ok { border-color: #21c27e; background: rgba(33,194,126,.15); } .vq-opts button.bad { border-color: #ef4444; background: rgba(239,68,68,.15); }
.vq-fb { display: flex; flex-direction: column; gap: 8px; } .vq-fb[hidden] { display: none; } .vq-fb b.ok { color: #21c27e; } .vq-fb b.bad { color: #ef4444; } .vq-fb p { margin: 0; }
.vq-bar { position: relative; width: min(100%, calc((100vh - 170px) * 16 / 9)); height: 8px; border-radius: 4px; background: rgba(255,255,255,.12); }
.vq-bar #vqFill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; background: #ef4444; transition: width .25s linear; }
.vq-mk { position: absolute; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: #f5b301; box-shadow: 0 0 0 2px #05080c; }
.vq-mk.ok { background: #21c27e; } .vq-mk.bad { background: #ef4444; }
.vq-help { margin: 0; font-size: 12.5px; }
.vq-err { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; color: #fff; gap: 10px; align-content: center; }
.vq-qsum { margin-top: 12px; display: flex; flex-direction: column; gap: 4px; font-size: 13px; }

/* Mis notas (alumno) */
.grades-pill { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px 0 10px; margin-right: 6px; border-radius: 99px; font: 700 13px Inter, sans-serif; color: #fff; background: linear-gradient(135deg, #10b981, #0d9488); box-shadow: 0 4px 14px rgba(16,185,129,.35); white-space: nowrap; }
@media (max-width: 820px) { .grades-pill span { display: none; } .grades-pill { padding: 0 10px; } }
.gb.my .act-body > * { max-width: 760px; }
.mg-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.mg-k { background: var(--panel); border: 1px solid var(--border); border-radius: 16px; padding: 14px; display: flex; flex-direction: column; gap: 2px; }
.mg-k small { color: var(--muted); font-size: 12px; font-weight: 600; } .mg-k b { font: 800 30px 'Exo 2', Inter, sans-serif; } .mg-k span { color: var(--muted); font-size: 12px; }
.mg-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; background: var(--field); cursor: pointer; }
.mg-row:hover { outline: 1px solid var(--accent); }
.mg-ic { font-size: 22px; } .mg-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mg-main small { color: var(--muted); font-size: 12px; } .mg-main p { margin: 2px 0 0; font-size: 13px; }
.mg-grade { font: 800 22px 'Exo 2', Inter, sans-serif; min-width: 44px; text-align: right; }
.mg-rolls { display: flex; flex-wrap: wrap; gap: 6px; }
.mg-roll { display: flex; flex-direction: column; align-items: center; padding: 6px 8px; border-radius: 10px; background: var(--field); font-size: 16px; }
.mg-roll small { font-size: 10px; color: var(--muted); }
@media (max-width: 600px) { .mg-kpis { grid-template-columns: 1fr 1fr; } .mg-k b { font-size: 24px; } }
/* actividad individual: elegir alumnos */
#abMode button[disabled] { opacity: .45; cursor: not-allowed; }
.ab-pick { border: 1px solid var(--border); border-radius: 12px; background: var(--field); padding: 8px; margin-top: 6px; }
.ab-pick[hidden] { display: none; }
.ab-pick-top { display: flex; gap: 10px; align-items: center; margin-bottom: 6px; } .ab-pick-top .input { flex: 1; }
.ab-plist { max-height: 220px; overflow: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 4px; }
.ab-p { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 8px; cursor: pointer; color: var(--text); font-weight: 500; }
.ab-p:hover { background: var(--panel); } .ab-p[hidden] { display: none; }
.ab-p input { accent-color: var(--accent); width: 16px; height: 16px; }
/* ---------- invitación QR ---------- */
.invite-qr-body { padding: 20px 24px 24px; }
.invite-qr-layout { display: grid; grid-template-columns: minmax(180px, 220px) minmax(0, 1fr); gap: 26px; align-items: center; }
.invite-qr-art { min-height: 220px; padding: 16px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; border-radius: 14px; background: #fff; color: #18242a; box-shadow: 0 8px 24px rgba(0,0,0,.15); }
.invite-qr-image { display: block; width: 100%; max-width: 188px; aspect-ratio: 1; object-fit: contain; image-rendering: pixelated; }
.invite-qr-caption, .invite-qr-kicker { font-size: 10px; line-height: 1.2; font-weight: 700; letter-spacing: .13em; }
.invite-qr-caption { color: #667781; text-align: center; }
.invite-qr-copy { min-width: 0; }
.invite-qr-kicker { display: inline-block; margin-bottom: 9px; color: var(--accent); }
.invite-qr-copy h4 { margin: 0 0 8px; font-size: 20px; line-height: 1.25; overflow-wrap: anywhere; }
.invite-qr-copy p { margin: 0 0 18px; color: var(--text-2); line-height: 1.55; }
.invite-qr-link-label { display: block; margin-bottom: 6px; color: var(--muted); font-size: 12px; font-weight: 600; }
.invite-qr-link { min-width: 0; text-overflow: ellipsis; font-size: 13px; }
.invite-qr-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.invite-qr-actions .btn { font-size: 13px; padding-inline: 14px; }
.invite-qr-download { text-decoration: none; }
.invite-qr-foot { justify-content: flex-end; }
.invite-qr-skeleton { width: min(100%, 188px); aspect-ratio: 1; border-radius: 4px; background: repeating-linear-gradient(135deg, #f0f2f2 0 9px, #e6e9e8 9px 18px); animation: invite-qr-shimmer 1.2s ease-in-out infinite alternate; }
.invite-qr-line-skeleton { width: min(80%, 250px); height: 20px; margin: 3px 0 14px; border-radius: 5px; background: var(--field); animation: invite-qr-shimmer 1.2s ease-in-out infinite alternate; }
.invite-qr-error { padding: 20px 8px 10px; text-align: center; }
.invite-qr-error-mark { width: 38px; height: 38px; margin: 0 auto 12px; display: grid; place-items: center; border: 1px solid color-mix(in srgb, var(--danger) 45%, transparent); border-radius: 50%; color: var(--danger); font-size: 20px; font-weight: 600; }
.invite-qr-error h4 { margin-bottom: 7px; font-size: 17px; }
.invite-qr-error p { margin: 0 auto 16px; max-width: 360px; color: var(--muted); }
@keyframes invite-qr-shimmer { to { opacity: .55; } }
@media (max-width: 560px) {
  .invite-qr-body { padding: 16px; }
  .invite-qr-layout { grid-template-columns: 1fr; gap: 18px; }
  .invite-qr-art { width: min(100%, 250px); min-height: 0; margin: 0 auto; padding: 13px; }
  .invite-qr-image { max-width: 210px; }
  .invite-qr-copy h4 { font-size: 18px; }
  .invite-qr-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .invite-qr-actions .btn { width: 100%; padding-inline: 8px; }
  .invite-qr-actions [data-copy] { grid-column: 1 / -1; }
}

/* Primary classroom entry action */
.class-entry-btn,
.chat-head .head-actions :is(.class-pill.hp, .teams-pill.hp, .act-pill.hp) {
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: none;
  appearance: none;
}
.class-entry-btn {
  position: relative;
  flex: 0 0 auto;
  min-width: 0;
  min-height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 4px 6px;
  border: 0;
  border-radius: 10px;
  color: var(--text, #e9edef);
  background: transparent;
  box-shadow: none;
  font-family: inherit;
  font-size: 13px;
  font-weight: 650;
  line-height: 1;
  letter-spacing: .01em;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 160ms ease;
}
.class-entry-btn::before,
.chat-head .head-actions :is(.class-pill.hp, .teams-pill.hp, .act-pill.hp)::before {
  content: "";
  position: absolute;
  z-index: 2;
  top: 4px;
  left: 6px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0deg 278deg, rgba(101, 255, 208, .18) 305deg, #55dbae 334deg, #a5e9c5 348deg, transparent 360deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1px));
  opacity: 0;
  pointer-events: none;
}
.class-entry-btn:hover::before,
.chat-head .head-actions :is(.class-pill.hp, .teams-pill.hp, .act-pill.hp):hover::before {
  opacity: 1;
  animation: class-icon-orbit 1.2s linear infinite;
}
.class-entry-btn:active::before,
.chat-head .head-actions :is(.class-pill.hp, .teams-pill.hp, .act-pill.hp):active::before {
  opacity: 0;
  animation: none;
}
.class-entry-btn svg {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  padding: 10px;
  border: 1px solid rgba(225, 255, 239, .38);
  border-radius: 50%;
  color: #e3fff0;
  background: linear-gradient(145deg, #219a6d, #126448);
  animation: class-entry-pulse 2.8s ease-in-out infinite;
}
.class-entry-btn span { overflow: hidden; text-overflow: ellipsis; }
.class-entry-btn:hover { transform: translateY(-1px); }
.class-entry-btn:active { transform: translateY(0); }
.class-entry-btn:active,
.chat-head .head-actions :is(.class-pill.hp, .teams-pill.hp, .act-pill.hp):active {
  background-color: transparent;
  -webkit-tap-highlight-color: transparent;
}
.class-entry-btn:focus-visible {
  outline: 3px solid #a5e9c5;
  outline-offset: 3px;
}
.class-entry-btn:focus:not(:focus-visible),
.chat-head .head-actions :is(.class-pill.hp, .teams-pill.hp, .act-pill.hp):focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
  filter: none;
  transition: none;
}
.class-entry-btn:focus:not(:focus-visible),
.class-entry-btn:focus:not(:focus-visible):hover,
.chat-head .head-actions :is(.class-pill.hp, .teams-pill.hp, .act-pill.hp):focus:not(:focus-visible),
.chat-head .head-actions :is(.class-pill.hp, .teams-pill.hp, .act-pill.hp):focus:not(:focus-visible):hover {
  color: var(--text);
  background: transparent;
}
.class-entry-btn:active,
.chat-head .head-actions :is(.class-pill.hp, .teams-pill.hp, .act-pill.hp):active,
.class-entry-btn:focus:not(:focus-visible),
.chat-head .head-actions :is(.class-pill.hp, .teams-pill.hp, .act-pill.hp):focus:not(:focus-visible) {
  color: var(--text) !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  filter: none !important;
  transition: none !important;
  -webkit-tap-highlight-color: transparent;
}
.class-entry-btn.click-flash,
.chat-head .head-actions :is(.class-pill.hp, .teams-pill.hp, .act-pill.hp, .grades-pill.hp, .perf-head-pill.hp, .live-pill).click-flash {
  color: #10231c !important;
  background: #fff !important;
  background-image: none !important;
  border: 1px solid rgba(255, 255, 255, .9) !important;
  border-radius: 14px !important;
  box-shadow: none !important;
  filter: none !important;
  transition: none !important;
  -webkit-tap-highlight-color: transparent;
}
.class-entry-btn.click-flash svg,
.chat-head .head-actions :is(.class-pill.hp, .teams-pill.hp, .act-pill.hp, .grades-pill.hp, .perf-head-pill.hp, .live-pill).click-flash svg {
  color: #176f52 !important;
  background: #fff !important;
  border-color: #fff !important;
  filter: none !important;
  animation: none !important;
}
.class-entry-btn.click-flash::before,
.chat-head .head-actions :is(.class-pill.hp, .teams-pill.hp, .act-pill.hp, .grades-pill.hp, .perf-head-pill.hp, .live-pill).click-flash::before {
  opacity: 0 !important;
  animation: none !important;
}
@keyframes class-entry-pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(38, 196, 132, .12); }
  50% { opacity: .72; box-shadow: 0 0 0 5px rgba(38, 196, 132, .04); }
}
@media (prefers-reduced-motion: reduce) {
  .class-entry-btn svg { animation: none; }
  .class-entry-btn { transition: none; }
}
@media (max-width: 820px) {
  .class-entry-btn { min-height: 48px; gap: 7px; padding: 4px 6px; font-size: 12px; }
  .class-entry-btn svg { width: 40px; height: 40px; padding: 9px; }
}

/* Class tools: large circular icons, separate stationary labels. */
.chat-head .head-actions :is(.class-pill.hp, .teams-pill.hp, .act-pill.hp) {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: auto;
  min-height: 52px;
  margin: 0;
  padding: 4px 6px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  box-shadow: none;
  color: var(--text);
  font: 650 13px/1.2 var(--font);
  transition: transform 160ms ease;
}
.chat-head .head-actions :is(.class-pill.hp, .teams-pill.hp, .act-pill.hp):hover {
  background: transparent;
  transform: translateY(-1px);
}
.chat-head .head-actions :is(.class-pill.hp, .teams-pill.hp, .act-pill.hp):active {
  background: transparent;
  box-shadow: none;
  transform: translateY(0);
}
.chat-head .head-actions :is(.class-pill.hp, .teams-pill.hp, .act-pill.hp) svg {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--c) 65%, white);
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(145deg, var(--c), color-mix(in srgb, var(--c) 55%, #142333));
  filter: none;
  animation: class-tool-pulse 3s ease-in-out infinite;
}
.chat-head .head-actions .teams-pill.hp svg { color: #392900; }
.chat-head .head-actions :is(.class-pill.hp, .teams-pill.hp, .act-pill.hp) span {
  display: inline;
}
.chat-head .head-actions :is(.class-pill.hp, .teams-pill.hp, .act-pill.hp):focus-visible {
  outline: 2px solid var(--c);
  outline-offset: 2px;
}
@keyframes class-tool-pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 color-mix(in srgb, var(--c) 15%, transparent); }
  50% { opacity: .75; box-shadow: 0 0 0 5px color-mix(in srgb, var(--c) 4%, transparent); }
}
@keyframes class-icon-orbit {
  to { transform: rotate(360deg); }
}
.chat-head:has(.class-pill, .teams-pill, .act-pill) {
  height: auto;
  min-height: 72px;
  flex-wrap: wrap;
  padding-top: 8px;
  padding-bottom: 8px;
}
.chat-head:has(.class-pill, .teams-pill, .act-pill) .ch-info { flex: 1 1 160px; }
.chat-head:has(.class-pill, .teams-pill, .act-pill) .head-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
  max-width: 100%;
}
@media (max-width: 820px) {
  .chat-head:has(.class-pill, .teams-pill, .act-pill) .head-actions { flex-basis: 100%; justify-content: flex-start; }
  .chat-head .head-actions :is(.class-pill.hp, .teams-pill.hp, .act-pill.hp) { gap: 7px; min-height: 48px; font-size: 12px; }
  .chat-head .head-actions :is(.class-pill.hp, .teams-pill.hp, .act-pill.hp) svg { width: 40px; height: 40px; padding: 9px; }
  .class-entry-btn::before,
  .chat-head .head-actions :is(.class-pill.hp, .teams-pill.hp, .act-pill.hp)::before { width: 40px; height: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .chat-head .head-actions :is(.class-pill.hp, .teams-pill.hp, .act-pill.hp) svg { animation: none; }
  .chat-head .head-actions :is(.class-pill.hp, .teams-pill.hp, .act-pill.hp) { transition: none; }
  .class-entry-btn::before,
  .chat-head .head-actions :is(.class-pill.hp, .teams-pill.hp, .act-pill.hp)::before { animation: none; }
}

@media (max-width: 760px) {
  .landing-hero {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 14px;
    min-height: 465px;
    padding: 42px 22px 56px;
  }
  .hero-emblem {
    width: 92px;
    transform: none;
  }
  .landing-hero .landing-kicker {
    margin-bottom: 14px;
  }
}

/* Gestión de autorizaciones familiares */
.guardian-entry > p { margin: 8px 0 12px; }
.guardian-manager { display: grid; gap: 16px; }
.guardian-manager > p, .guardian-share > p { margin: 0; color: var(--text-2); line-height: 1.55; }
.guardian-manager form { display: grid; gap: 12px; padding: 16px; border: 1px solid var(--border); border-radius: 14px; background: var(--panel-2); }
.guardian-manager form label { display: grid; gap: 7px; color: var(--text-2); font-size: 13px; font-weight: 650; }
.guardian-manager form > small, .guardian-share > small { color: var(--muted); line-height: 1.5; }
.guardian-records { display: grid; gap: 10px; }
.guardian-records h4 { margin: 2px 0; }
.guardian-record { display: grid; gap: 8px; padding: 13px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--panel); }
.guardian-record-head, .guardian-record-head > div { display: flex; align-items: center; gap: 10px; }
.guardian-record-head { justify-content: space-between; }
.guardian-record p { margin: 0; color: var(--text-2); line-height: 1.55; overflow-wrap: anywhere; }
.guardian-record small { color: var(--muted); }
.guardian-status { padding: 4px 8px; border-radius: 999px; color: var(--text-2); background: var(--head); font-size: 11px; }
.guardian-status.approved { color: var(--ok); background: rgba(33,194,126,.12); }
.guardian-status.pending { color: var(--warn); background: rgba(245,166,35,.12); }
.guardian-status.revoked, .guardian-status.expired { color: var(--muted); }
.guardian-empty { margin: 0; padding: 15px; border-radius: 12px; color: var(--muted); background: var(--panel); text-align: center; }
.guardian-share { display: grid; gap: 14px; }
.guardian-share-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.guardian-share input { width: 100%; }
@media (max-width: 520px) {
  .guardian-record-head { align-items: flex-start; }
  .guardian-record-head > div { flex-wrap: wrap; }
  .guardian-share-actions > button { flex: 1 1 135px; }
}