/* The teacher panel (panel-profesor.html): a calm, professional tool page
   in the site's sky blues. A side menu (icons only on tablets, a bottom
   bar on phones), a white top bar, cards on a pale sky ground. Loads after
   shared/shell.css, whose full-screen game rules it undoes for a page that
   scrolls. */
.pd {
  --side: #15495a; --side-text: #d4ecf1; --side-dim: #9cc6d0;
  --sky: #8fc8d1; --bg: #eef6f8; --surface: #fff; --soft: #f5fafb; --line: #d8e8ec;
  --ink: #2a3540; --muted: #5d707a; --primary: #1f8a9c; --primary-hover: #17707f; --primary-soft: #e2f2f5;
  --cream: #fbf2e2; --good: #4f9a3a; --good-soft: #e6f2e1; --bad: #cf4038; --bad-soft: #f6dcda; --wait: #8a5a00; --wait-soft: #fdf1d8;
}
html:has(body.pd), body.pd { height: auto; min-height: 100%; overflow: visible; }
/* shell.css also locks #game to one viewport (for games); the panel scrolls. */
body.pd #game { height: auto; min-height: 100vh; overflow: visible; }
body.pd { background: var(--bg); color: var(--ink); font: 15px/1.45 var(--am-readable-font); -webkit-user-select: text; user-select: text; touch-action: auto; }
.pd a { color: inherit; }
.pd button { font: inherit; color: inherit; }
.pd :focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }
.pd h1, .pd h2, .pd h3 { font-family: var(--am-readable-font); text-wrap: balance; }
.pd [role="tabpanel"][hidden] { display: none; }
.pd-loading [role="tabpanel"], .pd-locked [role="tabpanel"], .pd-loading .pd-nav, .pd-locked .pd-nav, .pd-locked #pd-sub { display: none; }

.pd-app { display: grid; grid-template-columns: 248px minmax(0, 1fr); min-height: 100vh; }

/* ---- side menu ---- */
.pd-side { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; padding: 20px 14px 72px; background: var(--side); color: #fff; }
.pd-logo { display: block; padding: 9px 12px; background: #fff; border-radius: 10px; }
.pd-logo img { display: block; width: 100%; }
.pd-side-sub { margin: 12px 6px 18px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--side-dim); }
.pd-nav { display: flex; flex-direction: column; gap: 2px; }
.pd-nav button { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border: 0; border-radius: 8px; background: none; color: var(--side-text); font-weight: 500; text-align: left; cursor: pointer; }
.pd-nav button svg { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pd-nav button:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.pd-nav button[aria-selected="true"] { background: #fff; color: var(--side); font-weight: 650; }
.pd-nav button:focus-visible { outline-color: #fff; }
.pd-short { display: none; }
.pd-side-foot { margin-top: auto; display: flex; align-items: center; gap: 10px; padding: 12px 8px 0; border-top: 1px solid rgba(255, 255, 255, .14); min-width: 0; }
.pd-side-foot div { min-width: 0; }
.pd-side-foot b { display: block; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pd-side-foot span#pd-role { font-size: 12px; color: var(--side-dim); }
.pd-avatar { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--sky); color: var(--side); font-weight: 700; font-size: 14px; }
.pd-avatar:empty { display: none; }

/* ---- top bar ---- */
.pd-main { min-width: 0; }
.pd-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 32px; background: var(--surface); border-bottom: 1px solid var(--line); }
.pd-top-text { min-width: 0; }
.pd-top h1 { margin: 0; font-size: 22px; font-weight: 700; color: var(--side); }
.pd-top p { margin: 2px 0 0; font-size: 14px; color: var(--muted); max-width: 75ch; }
.pd-mlogo { display: none; }
.pd-top-end { display: flex; align-items: center; gap: 14px; flex: none; }
.pd .lang-switcher { position: relative; top: auto; right: auto; }
.pd .lang-current { width: 38px; height: 38px; border-width: 2px; box-shadow: 0 0 0 1px var(--line); }
.pd .lang-menu { top: 46px; z-index: 30; }
.pd-content { padding: 24px 32px 48px; max-width: 1220px; }

/* ---- shared pieces ---- */
.pd-card { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
.pd-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 0 16px; border: 1px solid transparent; border-radius: 8px; font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap; cursor: pointer; }
.pd .pd-btn-primary { background: var(--primary); color: #fff; }
.pd .pd-btn-primary:hover { background: var(--primary-hover); }
.pd .pd-btn-ghost { background: var(--surface); border-color: var(--line); color: var(--side); }
.pd .pd-btn-ghost:hover { border-color: var(--primary); }
.pd-btn-sm { min-height: 34px; padding: 0 12px; font-size: 13px; }
.pd-btn:disabled { opacity: .6; cursor: default; }
.pd-logout svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pd-tag { display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px; border: 1px solid var(--line); border-radius: 6px; background: var(--soft); font-size: 12px; font-weight: 600; color: var(--muted); }
.pd-tag-live { border-color: transparent; background: var(--primary-soft); color: var(--primary-hover); }
.pd-tag-live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.pd-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
.pd-sec { margin: 28px 0 10px; font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.pd-topic { display: inline-grid; place-items: center; width: 20px; height: 20px; flex: none; border-radius: 5px; color: #fff; font: 700 10px/1 system-ui, sans-serif; font-style: normal; }
.pd-state { max-width: 560px; padding: 24px; }
.pd-state p { margin: 0 0 14px; }
.pd-nl { margin-bottom: 18px; padding: 16px 20px; }
.nl-pref { display: block; font-size: 14px; line-height: 1.45; }
.nl-pref-ask .nl-pref-text { margin: 0 0 10px; }
.nl-pref-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.nl-pref-actions button { min-height: 36px; padding: 0 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); font-weight: 600; cursor: pointer; }
.nl-pref-actions button:first-child { background: var(--primary); border-color: var(--primary); color: #fff; }
.nl-pref-toggle { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.nl-pref-toggle input { width: 18px; height: 18px; margin: 2px 0 0; flex: none; accent-color: var(--primary); }
.nl-pref-note { color: var(--muted); }
.nl-pref-error { color: var(--bad); font-weight: 600; }

/* filter chips (pizarra, material) */
.pd-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-bottom: 14px; }
.pd-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.pd-chips-label { margin-right: 4px; font-size: 13px; font-weight: 700; color: var(--muted); }
.pd-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 4px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); font-size: 14px; font-weight: 600; cursor: pointer; }
.pd-chip:hover { border-color: var(--primary); }
.pd .pd-chip[aria-pressed="true"] { background: var(--side); border-color: var(--side); color: #fff; }
.pd-note { padding: 6px 10px; border-radius: 6px; background: var(--primary-soft); font-size: 13px; color: var(--primary-hover); }
.pd-count { margin-left: auto; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }

/* ---- multijugador ---- */
.pd-hero { display: grid; grid-template-columns: 220px minmax(0, 1fr); overflow: hidden; }
.pd-hero-art { display: grid; place-items: center; background: var(--cream); border-right: 1px solid var(--line); }
.pd-hero-art .mz { width: 130px; height: 146px; }
.pd-hero-art .ff { width: 150px; height: 132px; }
.pd-hero + .pd-hero { margin-top: 12px; }
.pd-hero-body { padding: 22px 24px; }
.pd-hero-body h2 { display: inline; margin: 0; font-size: 21px; color: var(--side); }
.pd-hero-body .pd-tag-live { display: flex; width: max-content; margin-bottom: 8px; }
.pd-hero-body p { margin: 6px 0 14px; max-width: 62ch; }
.pd-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; counter-reset: step; }
.pd-steps li { padding: 14px 16px; counter-increment: step; }
.pd-steps b { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; color: var(--side); }
.pd-steps b::before { content: counter(step); display: grid; place-items: center; width: 24px; height: 24px; flex: none; border-radius: 50%; background: var(--primary-soft); color: var(--primary); font-size: 13px; }
.pd-steps p { margin: 0; font-size: 14px; color: var(--muted); }
.pd-soon { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-style: dashed; background: transparent; }
.pd-soon p { margin: 2px 0 0; font-size: 14px; color: var(--muted); }
.pd-soon-ic { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 50%; background: var(--cream); font-weight: 700; }
p.pd-soon { margin: 0; justify-content: center; color: var(--muted); }

/* ---- creador de operaciones ---- */
.pd-cr { padding: 20px 24px; }
.pd-cr-intro { margin: 0 0 16px; max-width: 70ch; }
.pd-cr .pd-note { display: block; margin: 14px 0 0; }
.pd-cr-examples { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.pd-cr-examples a { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; text-decoration: none; }
.pd-cr-examples a:hover { border-color: var(--primary); }
.pd-cr-examples b { font-size: 20px; color: var(--side); }
.pd-cr-examples span { font-size: 13px; color: var(--muted); }

/* ---- pizarra digital ---- */
.pd-map-wrap { overflow-x: auto; }
.pd-map { width: 100%; min-width: 860px; border-collapse: separate; border-spacing: 0; }
.pd-map th, .pd-map td { padding: 12px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); vertical-align: top; text-align: left; }
.pd-map tr > :last-child { border-right: 0; }
.pd-map tbody tr:last-child > * { border-bottom: 0; }
.pd-map thead th { background: var(--soft); font-size: 13px; color: var(--muted); }
.pd-map tbody th { width: 170px; }
.pd-map tbody th span { display: flex; align-items: center; gap: 10px; font-size: 15px; }
.pd-map td.pd-dim { background: var(--soft); }
.pd-map td.pd-dim .pd-lv { opacity: .35; }
.pd-empty-cell { color: var(--muted); font-size: 13px; }
.pd-lv { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; padding: 5px 8px 5px 5px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); font-size: 13px; line-height: 1.2; text-decoration: none; }
.pd-lv:hover { border-color: var(--primary); background: var(--primary-soft); }
.pd-lv .op-mini { width: 30px; height: 30px; flex: none; }
.pd-lv small { display: block; font-size: 11px; color: var(--muted); }
.pd-board-list { display: none; }
.pd-board-h { display: flex; align-items: center; gap: 8px; margin: 18px 0 8px; font-size: 13px; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }

/* ---- material imprimible ---- */
.pd-covers { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.pd-cover { display: flex; flex-direction: column; overflow: hidden; }
.pd-page { padding: 14px 14px 0; background: var(--bg); }
.pd-page img { display: block; width: 100%; height: auto; aspect-ratio: 210 / 230; object-fit: cover; object-position: top; background: #fff; border-radius: 4px 4px 0 0; box-shadow: 0 1px 4px rgba(21, 73, 90, .18); }
.pd-cover-info { display: flex; flex: 1; flex-direction: column; gap: 4px; padding: 12px 14px 14px; }
.pd-cover-info b { font-size: 15px; }
.pd-cover-info > span:not(.pd-cover-meta) { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; font-size: 13px; color: var(--muted); }
.pd-cover-meta { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--side); }
.pd-cover-dl { display: flex; gap: 6px; margin-top: auto; padding-top: 10px; }
.pd-cover-dl .pd-btn { flex: 1; }

/* ---- historial (shared/teacher-history.js) ---- */
.th-md { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 20px; align-items: start; }
.th-list-pane, .th-detail-pane { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
.th-list-pane { overflow: hidden; }
.th-detail-pane { position: sticky; top: 16px; padding: 22px 24px; min-width: 0; }
.th-list { margin: 0; padding: 0; list-style: none; }
.th-session { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; width: 100%; padding: 12px 16px; border: 0; border-bottom: 1px solid var(--line); background: none; text-align: left; cursor: pointer; }
.th-list li:last-child .th-session { border-bottom: 0; }
.th-session:hover { background: var(--soft); }
.th-session[aria-current="true"] { background: var(--primary-soft); box-shadow: inset 3px 0 0 var(--primary); }
.th-day { display: grid; place-content: center; width: 46px; height: 46px; border-radius: 8px; background: var(--bg); color: var(--side); text-align: center; line-height: 1.05; }
.th-day b { font-size: 17px; }
.th-day span { font-size: 11px; font-weight: 700; text-transform: uppercase; }
.th-session-body b { display: block; font-size: 15px; }
.th-session-body small { font-size: 13px; color: var(--muted); }
.th-acc { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.th-note { margin: 0; padding: 10px 16px; border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); }
.th-status { margin: 0; padding: 16px; color: var(--muted); }
.th-status.is-error { color: var(--bad); }
.th-detail-pane > .th-status { padding: 0; }
.th-back { display: none; }
.th-kicker { margin: 0 0 4px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.th-title { margin: 0 0 4px; font-size: 22px; color: var(--side); }
.th-meta { margin: 0; color: var(--muted); }
.th-operations { display: grid; gap: 4px; margin: 12px 0 0; }
.th-operations span { color: var(--muted); }
.th-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 16px 0; border: 1px solid var(--line); border-radius: 8px; }
.th-stats div { padding: 12px 14px; border-right: 1px solid var(--line); }
.th-stats div:last-child { border-right: 0; }
.th-stats b { display: block; font-size: 20px; font-variant-numeric: tabular-nums; }
.th-stats span { font-size: 12px; color: var(--muted); }
.th-table-wrap { overflow-x: auto; }
.th-table { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
.th-table th { padding: 8px; border-bottom: 1px solid var(--line); font-size: 12px; font-weight: 700; color: var(--muted); text-align: left; }
.th-table td { padding: 6px 8px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.th-name { white-space: nowrap; }
.th-name .mz { width: 26px; height: 30px; margin-right: 6px; vertical-align: middle; }
.answer-bar { display: flex; min-width: 120px; max-width: 220px; height: 22px; overflow: hidden; border-radius: 5px; font-size: 11px; font-weight: 700; line-height: 22px; color: #fff; }
.answer-bar span { padding: 0 6px; white-space: nowrap; overflow: hidden; }
.answer-bar-correct { background: var(--good); }
.answer-bar-wrong { background: var(--bad); }
.answer-bar.is-empty { color: var(--muted); font-weight: 400; }
.th-delete { margin-top: 16px; padding: 8px 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--bad); font-weight: 600; cursor: pointer; }

/* ---- cuenta ---- */
.pd-settings { max-width: 760px; display: grid; gap: 16px; justify-items: start; }
.pd-set { width: 100%; }
.pd-set h2 { margin: 0; padding: 14px 20px; border-bottom: 1px solid var(--line); font-size: 15px; color: var(--side); }
.pd-set dl { margin: 0; }
.pd-row { display: grid; grid-template-columns: 200px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 14px 20px; border-bottom: 1px solid var(--line); }
.pd-row:last-child { border-bottom: 0; }
.pd-row dt { font-size: 14px; color: var(--muted); }
.pd-row dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.pd-set-body { padding: 16px 20px; }
.pd-pill { margin-left: 6px; padding: 2px 8px; border-radius: 6px; font-size: 12px; font-weight: 700; }
.pd-pill.is-ok { background: var(--good-soft); color: var(--good); }
.pd-pill.is-wait { background: var(--wait-soft); color: var(--wait); }

/* the feedback button sits under the side menu's footer, not on top of it */
.pd .am-fb-fab { left: 18px; bottom: 14px; }

/* ---- tablets: icon-only menu ---- */
@media (max-width: 1100px) {
  .pd-app { grid-template-columns: 76px minmax(0, 1fr); }
  .pd-side { padding: 16px 10px 72px; }
  .pd-logo { padding: 6px; }
  .pd-logo img { content: url(../shared/favicon.png); }
  .pd-side-sub, .pd-label, .pd-side-foot div { display: none; }
  .pd-nav button { justify-content: center; padding: 12px; }
  .pd-side-foot { justify-content: center; }
  .th-md { grid-template-columns: 300px minmax(0, 1fr); }
  .th-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .th-stats div:nth-child(2) { border-right: 0; }
  .th-stats div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .pd-hero { grid-template-columns: 170px minmax(0, 1fr); }
}

/* ---- phones: bottom tab bar, one pane at a time ---- */
@media (max-width: 720px) {
  .pd-app { display: block; padding-bottom: calc(68px + env(safe-area-inset-bottom, 0px)); }
  .pd-side { position: fixed; inset: auto 0 0 0; z-index: 25; height: auto; padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px)); }
  .pd-logo, .pd-side-sub, .pd-side-foot { display: none; }
  .pd-locked .pd-side { display: none; }
  .pd-nav { flex-direction: row; }
  .pd-nav button { flex: 1; flex-direction: column; gap: 3px; min-width: 0; padding: 7px 2px; font-size: 11px; }
  .pd-short { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .pd-nav button[aria-selected="true"] { background: rgba(255, 255, 255, .16); color: #fff; }
  .pd-top { align-items: flex-start; padding: 14px 16px; }
  .pd-mlogo { display: block; margin-bottom: 6px; }
  .pd-mlogo img { display: block; height: 22px; }
  .pd-top h1 { font-size: 19px; }
  .pd-action, #pd-action { display: none; }
  .pd-logout { padding: 0 11px; }
  .pd-logout-label { display: none; } /* icon only; the button keeps its aria-label */
  .pd-content { padding: 16px 16px 88px; } /* room to scroll the last row clear of the feedback button */
  .pd-hero { grid-template-columns: 1fr; }
  .pd-hero-art { padding: 12px; border-right: 0; border-bottom: 1px solid var(--line); }
  .pd-hero-art .mz { width: 86px; height: 96px; }
  .pd-steps { grid-template-columns: 1fr; }
  .pd-map-wrap { display: none; }
  .pd-board-list { display: block; }
  .pd-count { margin-left: 0; }
  .pd-covers { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .pd-cover-dl { flex-direction: column; }
  .th-md { grid-template-columns: 1fr; }
  .th-md:not(.is-open) .th-detail-pane { display: none; }
  .th-md.is-open .th-list-pane { display: none; }
  .th-detail-pane { position: static; padding: 18px; }
  .th-back { display: inline-flex; margin-bottom: 14px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); font-size: 13px; font-weight: 600; cursor: pointer; }
  .th-hide-s { display: none; }
  .pd-row { grid-template-columns: minmax(0, 1fr) auto; }
  .pd-row dt { grid-column: 1 / -1; }
  .pd .am-fb-fab { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); left: 12px; }
}
@media (prefers-reduced-motion: reduce) { .pd * { transition: none !important; } }