/* Layout: editor de vistas a la izquierda, lámina de dibujo a la derecha,
   todo sobre una hoja de papel cuadriculado (cuadro de 5 mm, línea gruesa cada 5). */
:root {
  --paper: #fdfdf8;
  --grid-minor: #dfe9f3;
  --grid-major: #b9cfe6;
  --ink: #1d2836;
  --ink-soft: #4f5d6e;
  --line: #c9d6e3;
  --accent: #2a62c9;
  --accent-ink: #ffffff;
  --card: rgba(253, 253, 248, 0.86);
  --altura: #d99a00;
  --longitud: #cf3a2f;
  --amplada: #2f8a3e;
  --alzado: #efa300;
  --perfil: #2c9f57;
  --planta: #97488f;
  --warn: #b0451d;
  --ok: #2f7a3a;
  --font-display: 'Barlow Condensed', 'Arial Narrow', 'Roboto Condensed', sans-serif;
  --font-body: 'Barlow', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --cell: 18px;
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
  margin: 0;
  color: var(--ink);
  font: 15px/1.45 var(--font-body);
  background-color: var(--paper);
  background-image:
    linear-gradient(var(--grid-major) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-major) 1px, transparent 1px),
    linear-gradient(var(--grid-minor) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-minor) 1px, transparent 1px);
  background-size: calc(var(--cell) * 5) calc(var(--cell) * 5), calc(var(--cell) * 5) calc(var(--cell) * 5), var(--cell) var(--cell), var(--cell) var(--cell);
  background-position: -1px -1px;
  background-attachment: local;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  padding-block: 12px 24px;
}

button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- Cabecera ---------- */
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 6px 14px; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 12px; }
.brand-mark { width: 40px; height: 40px; color: var(--accent); flex: none; }
.brand h1 { font: 700 30px/1 var(--font-display); letter-spacing: 0.01em; margin: 0; text-transform: uppercase; }
.brand p { margin: 2px 0 0; color: var(--ink-soft); font-size: 14px; }
.lang { display: inline-flex; border: 1.5px solid var(--ink); border-radius: 6px; overflow: hidden; background: var(--paper); }
.lang button { border: 0; background: transparent; padding: 5px 12px; font: 600 14px var(--font-display); letter-spacing: 0.08em; }
.lang button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }

/* ---------- Disposición ---------- */
.layout { display: grid; grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); gap: 18px; align-items: start; }
@media (max-width: 960px) { .layout { grid-template-columns: minmax(0, 1fr); } }

.panel { background: var(--card); border: 1.5px solid var(--ink); border-radius: 4px; padding: 16px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.panel h2 { font: 700 20px/1.1 var(--font-display); text-transform: uppercase; letter-spacing: 0.04em; margin: 0; }

.row { display: flex; gap: 10px; }
.grow { flex: 1; }
.field { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--ink-soft); min-width: 0; }
.field > span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.field select, .field input { border: 1.5px solid var(--line); border-radius: 4px; background: #fff; padding: 6px 8px; color: var(--ink); width: 100%; }
.dims { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.chip { display: inline-block; width: 12px; height: 12px; border-radius: 2px; }
.c-altura { background: var(--altura); } .c-longitud { background: var(--longitud); } .c-amplada { background: var(--amplada); }
.help { margin: 0; font-size: 13px; color: var(--ink-soft); }

.views-edit { display: grid; grid-template-columns: auto auto; justify-content: start; gap: 10px 14px; overflow-x: auto; }
.ved { margin: 0; min-width: 0; }
.ved[data-key="planta"] { grid-column: 1; }
.ved figcaption { display: flex; align-items: center; justify-content: space-between; gap: 6px; font: 600 15px var(--font-display); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 2px; }
.ved[data-key="alzado"] figcaption { color: #9a6a00; }
.ved[data-key="perfil"] figcaption { color: #1f7a42; }
.ved[data-key="planta"] figcaption { color: var(--planta); }
.ved-tools { display: inline-flex; gap: 4px; }
.mini { border: 1px solid var(--line); background: #fff; border-radius: 3px; padding: 1px 6px; font: 500 11px var(--font-body); text-transform: none; letter-spacing: 0; color: var(--ink-soft); }
.mini:hover { border-color: var(--ink-soft); color: var(--ink); }
.editor-svg { display: block; touch-action: none; cursor: crosshair; max-width: 100%; height: auto; }
.ed-bg { fill: #fff; }
.ed-grid { stroke: #cfdbe8; stroke-width: 1; }
.ed-node { fill: #9fb3c8; }
.ed-seg { stroke: var(--ink); stroke-width: 3.2; stroke-linecap: round; }
.ed-hover { stroke: var(--accent); stroke-width: 4; stroke-linecap: round; opacity: 0.55; }

.primary { background: var(--accent); color: var(--accent-ink); border: 0; border-radius: 4px; padding: 11px 14px; font: 700 17px var(--font-display); text-transform: uppercase; letter-spacing: 0.06em; }
.primary:hover { filter: brightness(1.08); }
.primary:disabled { opacity: 0.6; cursor: progress; }
.status { font-size: 13px; min-height: 1.2em; }
.status.ok { color: var(--ok); }
.status.warn { color: var(--warn); }
.status button { margin-top: 6px; }

/* ---------- Escenario ---------- */
.stage { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.tabs { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.tabs [role="tab"] { border: 1.5px solid var(--ink); background: var(--paper); border-radius: 4px; padding: 6px 14px; font: 600 16px var(--font-display); text-transform: uppercase; letter-spacing: 0.05em; }
.tabs [role="tab"][aria-selected="true"] { background: var(--ink); color: var(--paper); }
.tabs-spacer { flex: 1; }
.seg { display: inline-flex; border: 1.5px solid var(--ink-soft); border-radius: 4px; overflow: hidden; background: var(--paper); flex-wrap: wrap; }
.seg button { border: 0; background: transparent; padding: 5px 10px; font-size: 13px; }
.seg button + button { border-left: 1px solid var(--line); }
.seg button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }

.pane { display: flex; flex-direction: column; gap: 0; border: 1.5px solid var(--ink); border-radius: 4px; overflow: hidden; background: transparent; }
.sheet { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; padding: 14px; min-height: 420px; }
@media (max-width: 720px) { .sheet { grid-template-columns: minmax(0, 1fr); } }
.sheet-views { display: flex; flex-direction: column; gap: 14px; }
.sv-grid { display: grid; grid-template-columns: auto auto; gap: 8px 12px; justify-content: start; align-content: start; }
.sv { margin: 0; padding: 4px; border: 2px solid transparent; border-radius: 8px; transition: border-color .2s, box-shadow .2s; background: rgba(253,253,248,.7); }
.sv[data-key="planta"] { grid-column: 1; }
.sv figcaption { font: 600 13px var(--font-display); text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-soft); }
.sv svg { display: block; max-width: 100%; height: auto; }
.sv.current[data-key="alzado"] { border-color: var(--alzado); box-shadow: 0 0 0 3px rgba(239,163,0,.18); }
.sv.current[data-key="perfil"] { border-color: var(--perfil); box-shadow: 0 0 0 3px rgba(44,159,87,.18); }
.sv.current[data-key="planta"] { border-color: var(--planta); box-shadow: 0 0 0 3px rgba(151,72,143,.18); }
.vgrid { stroke: #cfdbe8; stroke-width: 0.8; }
.vvis { stroke: var(--ink); stroke-width: 2.2; stroke-linecap: square; }
.vhid { stroke: var(--ink-soft); stroke-width: 1.3; stroke-dasharray: 3 2.5; }
.legend { display: grid; grid-template-columns: auto auto auto; justify-content: start; gap: 4px 10px; align-items: center; margin: 0; font-size: 14px; }
.legend dt { font-weight: 500; }
.legend dd { margin: 0; font-variant-numeric: tabular-nums; }
.legend .chip { width: 30px; height: 12px; }
.sheet-iso { min-width: 0; display: flex; align-items: center; justify-content: center; }
#iso { width: 100%; height: auto; max-height: 68vh; display: block; }
.iso-label { font-family: var(--font-body); font-weight: 600; paint-order: stroke; stroke: var(--paper); stroke-width: 4px; stroke-linejoin: round; }

.caption { background: var(--accent); color: var(--accent-ink); padding: 10px 16px 12px; }
.cap-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cap-step { font: 700 15px var(--font-display); text-transform: uppercase; letter-spacing: 0.08em; font-variant-numeric: tabular-nums; }
.cap-phase { font: 600 12px var(--font-display); text-transform: uppercase; letter-spacing: 0.1em; padding: 1px 8px; border-radius: 99px; background: rgba(255,255,255,.2); }
.cap-text { margin: 4px 0 0; font-size: 16px; max-width: 75ch; min-height: 2.9em; text-wrap: pretty; }

.controls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 12px; background: var(--card); border-top: 1.5px solid var(--ink); }
.icon { width: 38px; height: 38px; border: 1.5px solid var(--ink); border-radius: 50%; background: var(--paper); display: inline-grid; place-items: center; padding: 0; }
.icon svg { width: 18px; height: 18px; fill: var(--ink); stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; }
.icon.play { background: var(--ink); }
.icon.play svg { fill: var(--paper); stroke: var(--paper); }
.icon:hover { border-color: var(--accent); }
#slider { flex: 1 1 160px; min-width: 120px; accent-color: var(--accent); }
.check { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; white-space: nowrap; }
.check input { accent-color: var(--accent); width: 16px; height: 16px; }
.ghost { border: 1.5px solid var(--ink-soft); background: var(--paper); border-radius: 4px; padding: 6px 10px; font-size: 13px; }
.ghost:hover { border-color: var(--ink); }

.v3-wrap { position: relative; }
.v3 { height: min(66vh, 620px); min-height: 360px; touch-action: none; }
.v3 canvas { display: block; }
.v3-hint { position: absolute; left: 12px; bottom: 8px; margin: 0; font-size: 12px; color: var(--ink-soft); background: rgba(253,253,248,.8); padding: 2px 6px; border-radius: 3px; pointer-events: none; }
.v3-error { padding: 24px; color: var(--warn); }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }
.pane[hidden] { display: none; }

.gen { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border: 1.5px dashed var(--accent); border-radius: 4px; background: rgba(42, 98, 201, 0.05); }
.gen-title { font: 700 15px var(--font-display); text-transform: uppercase; letter-spacing: 0.06em; color: var(--accent); }
.gen-row { align-items: flex-end; }
.secondary { border: 1.5px solid var(--accent); background: var(--paper); color: var(--accent); border-radius: 4px; padding: 6px 12px; font: 700 15px var(--font-display); text-transform: uppercase; letter-spacing: 0.05em; white-space: nowrap; }
.secondary:hover { background: var(--accent); color: var(--accent-ink); }
.secondary:disabled { opacity: 0.6; cursor: progress; }
.v3.editing { outline: 2px solid var(--accent); outline-offset: -2px; }

/* ---------- Modo pizarra ---------- */
.board-toggle { display: inline-flex; align-items: center; gap: 6px; border: 1.5px solid #2c4a3b; background: #2c4a3b; color: #f4f1e6; border-radius: 4px; padding: 5px 12px; font: 600 15px var(--font-display); text-transform: uppercase; letter-spacing: 0.05em; }
.board-toggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.board-toggle:hover { filter: brightness(1.15); }
.board-toggle[aria-pressed="true"] { background: #f4f1e6; color: #2c4a3b; }
.pane.board { border: 12px solid #7a5232; border-radius: 6px; box-shadow: inset 0 0 0 2px #5a3b22, 0 2px 0 #4a2f1a; }
.pane.board .sheet {
  background-color: #23402f;
  background-image:
    radial-gradient(ellipse at 30% 20%, rgba(255,255,255,.06), transparent 60%),
    linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size: 100% 100%, 90px 90px, 90px 90px, 18px 18px, 18px 18px;
}
.pane.board .sv { background: transparent; }
.pane.board .sv figcaption, .pane.board .legend { color: #e9e5d6; font-family: 'Caveat', var(--font-body); }
.pane.board .sv figcaption { font-size: 19px; text-transform: none; letter-spacing: 0; }
.pane.board .legend { font-size: 20px; }
.pane.board .vgrid { stroke: rgba(255,255,255,.14); }
.pane.board .vvis { stroke: #f6f3e8; }
.pane.board .vhid { stroke: #b9c4bc; }
.pane.board .caption { background: #5a3b22; color: #f4f1e6; }
.pane.board .cap-text { font-family: 'Caveat', var(--font-body); font-size: 23px; line-height: 1.25; }
.pane.board .controls { background: #3a281a; border-top-color: #2a1c11; color: #f4f1e6; }
.pane.board .controls select { color: var(--ink); }
.pane.board .ghost { color: var(--ink); }
.chalk-label { font-family: 'Caveat', 'Comic Sans MS', cursive; font-weight: 700; }

/* ---------- Plantilla isométrica del paso a paso ---------- */
.pane:not(.board) .sheet { background: #e8e8e8; overflow: hidden; position: relative; }
.pane:not(.board) #iso { overflow: visible; }
.pane:not(.board) .sheet-views { position: relative; z-index: 1; }
.pane:not(.board) .sv { background: #f7f7f5; box-shadow: 0 0 0 1px #cfcfcf; }
.pane:not(.board) .legend { background: #f7f7f5; padding: 6px 10px; border-radius: 4px; box-shadow: 0 0 0 1px #cfcfcf; justify-self: start; }
.pane:not(.board) .iso-label { stroke: #e8e8e8; }

/* Modo pizarra con la misma plantilla isométrica (en tiza) */
.pane.board .sheet { background: #23402f; overflow: hidden; position: relative; }
.pane.board #iso { overflow: visible; }
.pane.board .sheet-views { position: relative; z-index: 1; }
.pane.board .sv, .pane.board .legend { background: rgba(35, 64, 47, 0.92); box-shadow: 0 0 0 1px rgba(240,236,220,.25); }
.pane.board .legend { padding: 6px 10px; border-radius: 4px; justify-self: start; }

.ghost.gif { border-color: var(--accent); color: var(--accent); font-weight: 600; font-variant-numeric: tabular-nums; min-width: 9.5em; }
.ghost:disabled { opacity: .75; cursor: progress; }

/* ---------- Escritorio: todo cabe en la pantalla, sin scroll de página ---------- */
@media (min-width: 961px) {
  html, body { height: 100%; }
  body { display: flex; flex-direction: column; overflow: hidden; padding-block: 8px 10px; }
  .topbar { flex: none; padding-block: 0 8px; }
  .layout { flex: 1; min-height: 0; grid-template-rows: minmax(0, 1fr); align-items: stretch; }
  .panel.editor { min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
  .stage { min-height: 0; }
  .tabs { flex: none; }
  .pane:not([hidden]) { flex: 1; min-height: 0; }
  .sheet { flex: 1; min-height: 0; grid-template-rows: minmax(0, 1fr); }
  .sheet-views { min-height: 0; overflow-y: auto; scrollbar-width: thin; }
  .sheet-iso { min-height: 0; height: 100%; }
  #iso { height: 100%; max-height: none; }
  .caption, .controls { flex: none; }
  .cap-text { min-height: 0; }
  .v3-wrap { flex: 1; min-height: 0; }
  .v3 { height: 100%; min-height: 0; }
}
/* Pantallas bajas (portátiles): versión compacta */
@media (min-width: 961px) and (max-height: 820px) {
  body { padding-block: 6px 8px; }
  .topbar { padding-block: 0 6px; }
  .brand-mark { width: 30px; height: 30px; }
  .brand h1 { font-size: 22px; }
  .brand p { font-size: 12px; margin-top: 0; }
  .lang button { padding: 3px 10px; }
  .panel { padding: 12px; gap: 9px; }
  .gen { padding: 8px 10px; gap: 6px; }
  .help { font-size: 12px; }
  .tabs [role="tab"] { padding: 4px 12px; font-size: 15px; }
  .board-toggle { padding: 4px 10px; font-size: 14px; }
  .seg button { padding: 4px 9px; }
  .sheet { padding: 8px; gap: 8px; }
  .sheet-views { gap: 8px; }
  .legend { font-size: 13px; gap: 2px 8px; }
  .caption { padding: 6px 14px 8px; }
  .cap-step { font-size: 13px; }
  .cap-text { font-size: 14.5px; margin-top: 2px; }
  .pane.board .cap-text { font-size: 19px; }
  .controls { padding: 6px 10px; gap: 6px; }
  .icon { width: 32px; height: 32px; }
  .icon svg { width: 15px; height: 15px; }
  .ghost, .check { font-size: 12.5px; }
  .ghost { padding: 4px 8px; }
  .primary { padding: 9px 12px; font-size: 16px; }
  .pane.board { border-width: 8px; }
}
@media (min-width: 961px) and (max-height: 620px) {
  .brand p { display: none; }
  .cap-top { display: none; }
}

/* ---------- Pizarra gris claro (sustituye al verde) ---------- */
.board-toggle { border-color: #3a404a; background: #3a404a; color: #f4f4f2; }
.board-toggle[aria-pressed="true"] { background: #f4f4f2; color: #3a404a; }
.pane.board { border: 12px solid #8a9099; box-shadow: inset 0 0 0 2px #6b717a, 0 2px 0 #5d636b; }
.pane.board .sheet { background: #e6e6e4; }
.pane.board .sv, .pane.board .legend { background: rgba(244, 244, 242, 0.95); box-shadow: 0 0 0 1px #c4c4c4; }
.pane.board .sv figcaption, .pane.board .legend { color: #2a2f37; }
.pane.board .vgrid { stroke: rgba(0, 0, 0, .12); }
.pane.board .vvis { stroke: #1d2430; }
.pane.board .vhid { stroke: #6f7b88; }
.pane.board .caption { background: #3a404a; color: #f4f4f2; }
.pane.board .controls { background: #2c3139; border-top-color: #22262c; color: #f4f4f2; }

/* ---------- Ejercicios: modo alumno ---------- */
#btn-exercise { width: 100%; }
.stu-kicker { margin: 0; font: 700 13px var(--font-display); text-transform: uppercase; letter-spacing: .12em; color: var(--accent); }
.stu-panel h2 { text-wrap: balance; }
.stu-who { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.stu-when { margin: 0; font-size: 13px; color: var(--ink-soft); }
.stu-when:empty { display: none; }
.stu-tools { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.tool { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 4px; border: 1.5px solid var(--line); border-radius: 6px; background: #fff; font-size: 13px; }
.tool[aria-pressed="true"] { border-color: var(--accent); background: rgba(42,98,201,.08); color: var(--accent); font-weight: 600; }
.tool-ico { display: block; width: 34px; height: 14px; }
.tool-ico.edge { background: linear-gradient(currentColor, currentColor) center / 100% 3px no-repeat; color: var(--ink); }
.tool-ico.aux { background: repeating-linear-gradient(90deg, #e0584c 0 6px, transparent 6px 10px) center / 100% 2px no-repeat; }
.tool-ico.erase { width: 22px; border-radius: 3px; background: linear-gradient(90deg, #f4a3a3 50%, #8fb3e0 50%); }
.review-mode .stu-tools, .review-mode #stu-undo, .review-mode #stu-clear, .review-mode #stu-submit, .review-mode .stu-instr, .review-mode #stu-count, .review-mode [data-i18n="stuAuxHelp"] { display: none; }
.review-mode .stu-panel .row { display: none; }
.stu-svg { cursor: crosshair; touch-action: none; }
.stu-svg.erasing { cursor: cell; }
.review-mode .stu-svg { cursor: default; }
.stu-edge { stroke: #1d2836; stroke-width: 3.2; stroke-linecap: round; }
.stu-aux { stroke: #e0584c; stroke-width: 1.4; stroke-dasharray: 5 4; stroke-linecap: round; }
.stu-preview { stroke: #2a62c9; stroke-width: 2.6; stroke-dasharray: 2 4; stroke-linecap: round; }
.stu-hover { fill: none; stroke: #2a62c9; stroke-width: 2; }
.stu-start { fill: #2a62c9; fill-opacity: .25; stroke: #2a62c9; stroke-width: 2; }
.cor-ok { stroke: #1f9a50; stroke-width: 4; stroke-linecap: round; }
.cor-extra { stroke: #e08a00; stroke-width: 4; stroke-linecap: round; }
.cor-missing { stroke: #d0342c; stroke-width: 3; stroke-dasharray: 6 5; stroke-linecap: round; }
.stu-result { display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1.5px solid var(--line); border-radius: 6px; background: #fff; }
.stu-nota { display: flex; align-items: baseline; gap: 8px; font: 600 15px var(--font-display); text-transform: uppercase; letter-spacing: .06em; }
.stu-nota strong { font-size: 40px; line-height: 1; color: var(--accent); font-variant-numeric: tabular-nums; }
.stu-result p { margin: 0; font-size: 14px; }
.stu-key { display: flex; gap: 14px; margin: 0; padding: 0; list-style: none; font-size: 13px; }
.stu-key li { display: flex; align-items: center; gap: 5px; }
.k { display: inline-block; width: 22px; height: 0; border-top: 4px solid; }
.k.ok { border-color: #1f9a50; } .k.extra { border-color: #e08a00; } .k.miss { border-top: 3px dashed #d0342c; }
#student .sv { cursor: default; }
@media (min-width: 961px) { #stu-svg { overflow: visible; height: 100%; max-height: none; width: 100%; } #student .stage .pane { flex: 1; min-height: 0; } }
@media (max-width: 960px) { #stu-svg { width: 100%; height: auto; } }

/* ---------- Diálogo del profesor ---------- */
dialog#ex-dialog { width: min(640px, calc(100vw - 32px)); max-height: calc(100vh - 32px); border: 1.5px solid var(--ink); border-radius: 6px; padding: 0; background: var(--paper); color: var(--ink); }
dialog#ex-dialog::backdrop { background: rgba(20, 28, 38, .45); }
.ex-form { display: flex; flex-direction: column; gap: 12px; padding: 18px; }
.ex-form h2 { margin: 0; font: 700 22px var(--font-display); text-transform: uppercase; letter-spacing: .03em; }
.ex-form input[type="text"], .ex-form input[type="url"] { border: 1.5px solid var(--line); border-radius: 4px; padding: 7px 9px; background: #fff; width: 100%; }
.ex-help { border: 1px dashed var(--line); border-radius: 4px; padding: 8px 10px; font-size: 14px; }
.ex-help summary { cursor: pointer; font-weight: 600; color: var(--accent); }
.ex-help ol { padding-left: 20px; margin: 8px 0; display: flex; flex-direction: column; gap: 4px; }
.ex-help textarea { width: 100%; font: 12px/1.4 ui-monospace, Menlo, Consolas, monospace; border: 1px solid var(--line); border-radius: 4px; padding: 8px; background: #fff; margin-bottom: 6px; }
.ex-link .row { gap: 8px; align-items: center; margin-top: 6px; }
a.ghost { text-decoration: none; color: var(--ink); display: inline-block; }
.ex-actions { justify-content: flex-end; gap: 8px; }
.ex-actions .primary { padding: 9px 16px; }

/* Lo oculto se oculta siempre, aunque otra regla le dé display */
[hidden] { display: none !important; }

/* Botón de ejercicios en la cabecera (siempre visible) */
.top-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ex-top { display: inline-flex; align-items: center; gap: 7px; border: 1.5px solid var(--accent); background: var(--accent); color: var(--accent-ink); border-radius: 6px; padding: 6px 12px; font: 700 15px var(--font-display); text-transform: uppercase; letter-spacing: .05em; }
.ex-top svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.ex-top:hover { filter: brightness(1.1); }
.exercise-mode .ex-top { display: none; }
@media (min-width: 961px) and (max-height: 820px) { .ex-top { padding: 4px 10px; font-size: 14px; } }

/* ---------- Panel del profesor ---------- */
.t-top { display: inline-flex; align-items: center; gap: 6px; font: 600 14px var(--font-display); text-transform: uppercase; letter-spacing: .04em; padding: 6px 10px; }
.t-top svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.exercise-mode .t-top, .teacher-mode .t-top, .teacher-mode .ex-top { display: none; }
.teacher-layout { grid-template-columns: minmax(260px, 320px) minmax(0, 1fr); }
@media (max-width: 960px) { .teacher-layout { grid-template-columns: minmax(0, 1fr); } }
.t-side-head { align-items: center; justify-content: space-between; }
.t-list { display: flex; flex-direction: column; gap: 6px; overflow-y: auto; min-height: 0; flex: 1; }
.t-ex { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; text-align: left; padding: 9px 10px; border: 1.5px solid var(--line); border-radius: 6px; background: #fff; }
.t-ex.sel { border-color: var(--accent); background: rgba(42, 98, 201, .07); }
.t-ex-title { font-weight: 600; grid-column: 1; }
/* Portada del ejercicio en el panel del profesor: sus tres vistas */
.t-cover { grid-column: 1 / -1; display: grid; grid-template-columns: auto auto; gap: 4px 8px; justify-content: center; align-content: center;
  padding: 8px; margin-bottom: 6px; background: #f4f7fb; border-radius: 4px; min-height: 96px; }
.t-cover > div:nth-child(3) { grid-column: 1; }
.t-cover svg { display: block; max-width: 100%; height: auto; }
.t-ex.sel .t-cover { background: #fff; }
.t-cover ~ .t-ex-title, .t-cover ~ .t-ex-meta { grid-column: 1; }
.t-cover ~ .t-ex-count { grid-row: 2 / span 2; }
.t-ex-meta { grid-column: 1; font-size: 12px; color: var(--ink-soft); }
.t-ex-count { grid-column: 2; grid-row: span 2; align-self: center; min-width: 30px; text-align: center; padding: 2px 8px; border-radius: 99px; background: var(--accent); color: #fff; font: 700 14px var(--font-display); font-variant-numeric: tabular-nums; }
.t-main { min-width: 0; }
.t-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.t-head h2 { text-wrap: balance; }
.t-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.t-danger { color: #b3261e; border-color: #e3a19b; }
.t-danger-btn { background: #b3261e; }
.t-tools { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.t-tools .field select, .t-tools .field input { min-width: 120px; }
.t-xls { padding: 8px 14px; font-size: 15px; }
.t-stats { display: flex; gap: 18px; font-size: 14px; color: var(--ink-soft); flex-wrap: wrap; }
.t-stats b { color: var(--ink); font-variant-numeric: tabular-nums; }
.t-table-wrap { overflow: auto; min-height: 0; flex: 1; border: 1px solid var(--line); border-radius: 4px; background: #fff; }
.t-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.t-table th { position: sticky; top: 0; background: #eef3fa; text-align: left; font: 600 13px var(--font-display); text-transform: uppercase; letter-spacing: .05em; padding: 8px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.t-table td { padding: 7px 10px; border-bottom: 1px solid #edf1f5; vertical-align: middle; }
.t-table tr:hover td { background: #f7f9fc; }
.t-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.t-empty { padding: 24px !important; text-align: center; }
.t-nota { display: inline-block; min-width: 38px; text-align: center; padding: 1px 8px; border-radius: 99px; font-weight: 700; }
.t-nota.hi { background: #dff3e6; color: #17703a; } .t-nota.mid { background: #fdf0d5; color: #8a5a00; } .t-nota.lo { background: #fbe0de; color: #a32a22; }
.t-row-actions { white-space: nowrap; text-align: right; }
.t-row-actions .ghost { padding: 3px 9px; font-size: 13px; }
.t-del { margin-left: 4px; }
.small-dialog { width: min(440px, calc(100vw - 32px)); border: 1.5px solid var(--ink); border-radius: 6px; padding: 0; background: var(--paper); color: var(--ink); }
.small-dialog::backdrop { background: rgba(20, 28, 38, .45); }
.small-dialog input[type="password"] { border: 1.5px solid var(--line); border-radius: 4px; padding: 7px 9px; background: #fff; width: 100%; }
.msg-text { word-break: break-all; margin: 0; }
.ex-dest { border: 1px solid var(--line); border-radius: 4px; padding: 8px 12px; display: flex; flex-direction: column; gap: 6px; margin: 0; }
.ex-dest legend { font-size: 13px; color: var(--ink-soft); padding: 0 4px; }
.ex-dest .check { white-space: normal; }
@media (min-width: 961px) {
  .teacher-layout .panel { min-height: 0; overflow: hidden; }
  .t-main { display: flex; flex-direction: column; }
}

a.t-top { text-decoration: none; color: var(--ink); }
.exercise-mode #btn-guide { display: none; }

/* ---------- Espacio del alumno ---------- */
.hub { display: flex; flex-direction: column; gap: 16px; max-width: 1180px; margin: 0 auto; }
.hub .panel h2 { font-size: 24px; }
.hub-intro { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 18px; align-items: end; }
@media (max-width: 760px) { .hub-intro { grid-template-columns: minmax(0, 1fr); } }
.hub-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.hub-card { display: flex; flex-direction: column; gap: 4px; padding: 12px; border: 1.5px solid var(--line); border-radius: 8px; background: #fff; text-decoration: none; color: var(--ink); transition: border-color .15s, transform .15s; }
.hub-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.hub-card-title { font-weight: 600; line-height: 1.25; }
.hub-card-meta { font-size: 13px; color: var(--ink-soft); }
.hub-thumb { display: grid; grid-template-columns: auto auto; gap: 4px 6px; justify-content: start; padding: 6px; background: #f4f7fb; border-radius: 6px; margin-bottom: 6px; }
.hub-thumb > div:nth-child(3) { grid-column: 1; }
.hub-thumb svg { display: block; }
.hub-badge { align-self: flex-start; margin-top: 4px; font: 700 12px var(--font-display); text-transform: uppercase; letter-spacing: .06em; padding: 2px 9px; border-radius: 99px; }
.hub-badge.ok { background: #dff3e6; color: #17703a; }
.hub-badge.todo { background: #fdf0d5; color: #8a5a00; }
.hub-levels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.hub-level { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; border-radius: 8px; border: 1.5px solid var(--accent); background: rgba(42, 98, 201, .06); color: var(--accent); text-decoration: none; }
.hub-level b { font: 700 22px var(--font-display); text-transform: uppercase; letter-spacing: .04em; }
.hub-level span { font-size: 13px; color: var(--ink-soft); }
.hub-level:hover { background: var(--accent); color: #fff; }
.hub-level:hover span { color: #e6eefc; }
.hub-sub { font: 700 17px var(--font-display); text-transform: uppercase; letter-spacing: .05em; margin: 6px 0 0; }
.hub-mode .t-top, .hub-mode .ex-top { display: none; }
@media (min-width: 961px) { body.hub-mode { overflow: auto; } }
.stu-top { justify-content: space-between; align-items: center; }
.stu-hub-link { font-size: 13px; text-decoration: none; }
.prac-next { display: none; align-items: flex-end; gap: 8px; }
.practice-mode .prac-next { display: flex; }
.practice-mode [data-i18n="stuAuxHelp"] { display: none; }

/* Ejercicio entregado: solo lectura */
.locked .stu-tools, .locked #stu-undo, .locked #stu-clear, .locked .stu-instr { display: none; }
.locked .stu-svg { cursor: default; }
#stu-submit:disabled { opacity: .75; cursor: default; }

/* Solución vista por un alumno: solo el paso a paso y el dibujo a mano */
.student-solution #main-layout { grid-template-columns: minmax(0, 1fr); }
.student-solution #main-layout > .editor, .student-solution #tab-3d, .student-solution #btn-svg, .student-solution #btn-gif,
.student-solution #btn-pdf, .student-solution .t-top, .student-solution .ex-top { display: none !important; }
#btn-student-back { display: none; }
.student-solution #btn-student-back { display: inline-flex; }

/* Cargando un ejercicio o una revisión: no se enseña la app de fondo */
.loading #main-layout, .loading .t-top, .loading .ex-top { display: none !important; }
.loading::after { content: ''; position: fixed; top: 45vh; left: 50%; width: 34px; height: 34px; margin-left: -17px;
  border: 3px solid var(--line, #d0d4da); border-top-color: var(--accent, #2a62c9); border-radius: 50%; animation: pi-spin .8s linear infinite; }
@keyframes pi-spin { to { transform: rotate(360deg); } }

/* Puerta de entrada: profesor o alumno */
.gating #main-layout, .gating .t-top, .gating .ex-top { display: none !important; }
.gate { max-width: 760px; margin: 6vh auto 0; display: flex; flex-direction: column; gap: 16px; }
.gate h2 { font: 700 30px var(--font-display); text-transform: uppercase; margin: 0; text-wrap: balance; }
.gate-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 640px) { .gate-cards { grid-template-columns: minmax(0, 1fr); } }
.gate-card { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; padding: 18px; border: 1.5px solid var(--ink); border-radius: 8px; background: var(--card); text-decoration: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.gate-card b { font: 700 22px var(--font-display); text-transform: uppercase; letter-spacing: .03em; color: var(--accent); }
.gate-card span { font-size: 15px; color: var(--ink-soft); }
.gate-card:hover { border-color: var(--accent); }

.t-practice label[for="t-last"] { display: none; }

/* ---------- Panel: grupos, alumnos y cuenta ---------- */
.t-views { width: 100%; }
.t-views button { flex: 1; }
.t-side-part { display: flex; flex-direction: column; gap: 10px; min-height: 0; flex: 1; }
.t-side-part[hidden] { display: none; }
.t-side-part h2 { margin: 0; }
.g-new-row { gap: 6px; }
.g-new-row input { flex: 1; min-width: 0; border: 1.5px solid var(--line); border-radius: 4px; padding: 6px 8px; background: #fff; }
.g-detail { display: flex; flex-direction: column; gap: 12px; min-height: 0; flex: 1; }
.g-title-row { gap: 8px; align-items: center; }
.g-name { font: 700 24px var(--font-display); text-transform: uppercase; border: 1.5px solid transparent; border-radius: 4px; padding: 2px 6px; background: transparent; width: 9em; }
.g-name:hover, .g-name:focus { border-color: var(--line); background: #fff; }
.g-add { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border: 1px dashed var(--line); border-radius: 6px; background: #fff; }
.g-add textarea { width: 100%; border: 1.5px solid var(--line); border-radius: 4px; padding: 7px 9px; font: 14px/1.4 var(--font-body); resize: vertical; }
.g-add .row { align-items: center; gap: 10px; }
.g-pw { background: #fff7d6; padding: 1px 6px; border-radius: 3px; font-size: 14px; }
.t-table code { font-size: 13.5px; }
.p-box { display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px solid var(--line); border-radius: 6px; background: #fff; }
.p-box h3 { margin: 0; font: 700 17px var(--font-display); text-transform: uppercase; letter-spacing: .04em; }
.p-row { gap: 8px; align-items: flex-end; flex-wrap: wrap; }
.p-row .field input { border: 1.5px solid var(--line); border-radius: 4px; padding: 6px 8px; background: #fff; }
.p-reset { display: inline-flex; gap: 4px; }
.p-reset input { width: 9em; border: 1px solid var(--line); border-radius: 4px; padding: 3px 6px; font-size: 13px; }
#p-main { overflow-y: auto; }
.ex-groups { display: flex; flex-wrap: wrap; gap: 6px 16px; }
/* ---------- Alumno con sesión ---------- */
.stu-auth { margin: 0; padding: 7px 10px; background: rgba(42, 98, 201, .07); border-radius: 6px; font-size: 14px; }
.stu-auth b { font-weight: 600; }
.auth-mode .stu-who { display: none; }
.hub-who { display: flex; align-items: center; gap: 12px; justify-content: flex-end; flex-wrap: wrap; }
.hub-hello { margin: 0; font-size: 16px; }
.hub-login { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 8px; align-items: end; }
.hub-login .status { grid-column: 1 / -1; margin: 0; }
.hub-login input { border: 1.5px solid var(--line); border-radius: 4px; padding: 7px 9px; background: #fff; }
@media (max-width: 560px) { .hub-login { grid-template-columns: minmax(0, 1fr); } }
.needs-login .hub-class, .needs-login .hub-prac { display: none; }

.ex-form .check { white-space: normal; }

/* ---------- Unirse a un grupo ---------- */
.join-mode .hub-intro, .join-mode .hub-class, .join-mode .hub-prac { display: none !important; }
.hub-join { max-width: 560px; width: 100%; margin: 4vh auto 0; }
.hub-join h2 { text-wrap: balance; }
.j-form { display: flex; flex-direction: column; gap: 10px; }
.j-form input { border: 1.5px solid var(--line); border-radius: 4px; padding: 8px 10px; background: #fff; }
.g-join { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border: 1.5px solid var(--accent); border-radius: 6px; background: rgba(42, 98, 201, .05); }
.g-join-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.g-join-row { gap: 6px; }
.g-join-row input { flex: 1; min-width: 0; border: 1px solid var(--line); border-radius: 4px; padding: 6px 8px; background: #fff; font-size: 13px; }
.g-join-row input.closed { text-decoration: line-through; color: var(--ink-soft); }

/* ---------- Centro educativo ---------- */
.school { display: flex; align-items: center; gap: 10px; margin-right: auto; padding-left: 14px; margin-left: 4px; border-left: 1.5px solid var(--line); min-width: 0; }
.school img { height: 40px; width: auto; max-width: 120px; object-fit: contain; }
.school span { font: 600 16px/1.15 var(--font-display); text-transform: uppercase; letter-spacing: .03em; color: var(--ink-soft); max-width: 22ch; }
@media (max-width: 640px) { .school { border-left: 0; padding-left: 0; margin-left: 0; } .school span { font-size: 14px; } }
@media (min-width: 961px) and (max-height: 820px) { .school img { height: 30px; } .school span { font-size: 14px; } }
.c-row { display: flex; gap: 14px; align-items: flex-start; flex-wrap: wrap; }
.c-logo-box { width: 120px; height: 90px; border: 1.5px dashed var(--line); border-radius: 6px; display: grid; place-items: center; background: #fff; overflow: hidden; }
.c-logo-box img { max-width: 110px; max-height: 80px; object-fit: contain; }
.c-fields { flex: 1; min-width: 240px; display: flex; flex-direction: column; gap: 8px; }
.c-fields input[type="text"] { border: 1.5px solid var(--line); border-radius: 4px; padding: 6px 8px; background: #fff; width: 100%; }
.c-btns { gap: 8px; flex-wrap: wrap; align-items: center; }
.c-file { cursor: pointer; display: inline-flex; align-items: center; }
.c-file input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.c-file:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- Historial de comprobaciones ---------- */
.t-evo { white-space: nowrap; }
.t-chip { display: inline-block; min-width: 30px; text-align: center; padding: 0 6px; border-radius: 99px; font: 700 12.5px var(--font-body); font-variant-numeric: tabular-nums; border: 0; }
.t-chip.hi { background: #dff3e6; color: #17703a; } .t-chip.mid { background: #fdf0d5; color: #8a5a00; } .t-chip.lo { background: #fbe0de; color: #a32a22; }
.t-arrow { color: var(--ink-soft); margin: 0 3px; font-size: 12px; }
.stu-attempts { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border: 1.5px solid var(--accent); border-radius: 6px; background: rgba(42, 98, 201, .05); }
.stu-att-head { align-items: center; justify-content: space-between; gap: 8px; }
.stu-att-head span { font: 600 15px var(--font-display); text-transform: uppercase; letter-spacing: .04em; }
.icon.small { width: 30px; height: 30px; }
.icon.small svg { width: 14px; height: 14px; }
.icon:disabled { opacity: .35; cursor: default; }
.att-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.att-chips .t-chip { cursor: pointer; padding: 2px 8px; }
.att-chips .t-chip[aria-pressed="true"] { outline: 2px solid var(--accent); outline-offset: 1px; }
.review-mode #stu-attempts:not([hidden]) { display: flex; }
.review-mode .stu-panel .stu-att-head { display: flex; }

.hub-badges { display: flex; gap: 6px; flex-wrap: wrap; }
.hub-badge.sol { background: #e3ecfb; color: var(--accent); }
.t-sol input:checked + span { color: var(--accent); font-weight: 600; }

/* Retícula del paso a paso en su propia capa (se pinta una vez) y el dibujo encima */
#pane-steps .sheet-iso { position: relative; }
.iso-bg-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; will-change: transform; z-index: 0; }
#iso { position: relative; z-index: 1; }

/* ---------- Dibujo del alumno: retícula en capa propia, color de auxiliares ---------- */
#student .sheet-iso { position: relative; }
#stu-svg { position: relative; z-index: 1; }
.aux-colors { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; font-size: 13px; color: var(--ink-soft); }
.aux-swatches { display: flex; gap: 6px; }
.swatch { width: 24px; height: 24px; border-radius: 50%; border: 2px solid #fff; background: var(--c); box-shadow: 0 0 0 1.5px var(--line); padding: 0; cursor: pointer; }
.swatch[aria-pressed="true"] { box-shadow: 0 0 0 2.5px var(--ink); }
.tool-ico.aux { background: repeating-linear-gradient(90deg, var(--aux, #e0584c) 0 6px, transparent 6px 10px) center / 100% 2px no-repeat; }
.stu-preview.aux { stroke-dasharray: 5 4; }
.review-mode .aux-colors, .locked .aux-colors { display: none; }

/* Plazo, intentos, comentario y nota del profesor */
.ex-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px 14px; }
.t-opt { min-width: 150px; }
.field textarea { border: 1.5px solid var(--line); border-radius: 4px; background: #fff; padding: 6px 8px; color: var(--ink); width: 100%; font: inherit; font-size: 14px; resize: vertical; }
.stu-feedback, .stu-review { display: flex; flex-direction: column; gap: 6px; padding: 12px; border: 1.5px solid var(--line); border-radius: 6px; background: #fff; }
.stu-feedback { border-left: 4px solid var(--accent); }
.stu-feedback b, .stu-review b { font: 700 13px var(--font-display); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-soft); }
.stu-feedback p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.stu-review .field input { max-width: 110px; }
.t-flag { display: inline-block; margin-left: 5px; font-size: 12px; font-weight: 700; color: var(--accent); cursor: help; }
.hub-badge.due { background: #eef1f5; color: var(--ink-soft); }
.hub-badge.late { background: #fbe0de; color: #a32a22; }
.hub-badge.com { background: #e3ecfb; color: var(--accent); }