/* ejercicioTrón3000 · lenguaje visual ControlaTrón 3000 / Material 3 premium */
:root {
  color-scheme: light;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --bg-top: #F7FAFF;
  --bg-mid: #F2F3FF;
  --bg-bottom: #E5F4FB;
  --surface: #FFFFFF;
  --surface-raised: #FDFDFF;
  --text: #152541;
  --soft: #63708A;
  --accent: #087CFF;
  --accent-dark: #0957AB;
  --sport: #E32287;
  --sport-soft: #FFF1F9;
  --cyan: #00AFAE;
  --line: #E3EAF5;
  --field: #F8FAFF;
  --field-hover: #FFFFFF;
  --button: #F1F5FD;
  --button-hover: #E7F0FF;
  --shadow: 0 12px 34px rgba(26, 52, 100, .075), 0 3px 10px rgba(26, 52, 100, .035);
  --shadow-hover: 0 18px 40px rgba(26, 52, 100, .13);
  --status: #567899;
  --error: #C4375C;
  --success: #168769;
  --file-bg: #F4F7FE;
  --radius: 24px;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg-top: #0D1630;
  --bg-mid: #0F233C;
  --bg-bottom: #102F40;
  --surface: #182B46;
  --surface-raised: #223955;
  --text: #EFF5FF;
  --soft: #B4C2D7;
  --accent: #67B4FF;
  --accent-dark: #087CFF;
  --sport-soft: #382646;
  --line: #354A67;
  --field: #10213B;
  --field-hover: #183455;
  --button: #284361;
  --button-hover: #355475;
  --shadow: 0 12px 34px rgba(0, 0, 0, .16), 0 3px 10px rgba(0, 0, 0, .07);
  --shadow-hover: 0 18px 40px rgba(0, 0, 0, .23);
  --status: #B4C2D7;
  --error: #FF97B0;
  --success: #8CEBD0;
  --file-bg: #162B48;
}
* { box-sizing: border-box; }
html { min-width: 320px; }
body {
  margin: 0;
  min-height: 100vh;
  background: linear-gradient(137deg, var(--bg-top) 0%, var(--bg-mid) 54%, var(--bg-bottom) 100%);
  color: var(--text);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
body::before, body::after { content: ""; position: fixed; pointer-events: none; z-index: 0; }
body::before {
  width: 75vw; height: 72vh; right: -32vw; top: -35vh;
  border-radius: 0 0 36% 68%;
  background: linear-gradient(140deg, rgba(115, 211, 252, .29), rgba(194, 169, 255, .22) 63%, rgba(0, 181, 191, .1));
  transform: rotate(-18deg);
}
body::after {
  width: 100vw; height: 42vh; left: -26vw; bottom: -31vh;
  border-radius: 50% 62% 0 0;
  background: linear-gradient(90deg, rgba(128, 211, 255, .30), rgba(139, 224, 191, .21), rgba(255, 215, 143, .12));
  transform: rotate(-8deg);
}
:root[data-theme="dark"] body::before {
  background: linear-gradient(145deg, rgba(41, 107, 207, .27), rgba(89, 60, 168, .2), rgba(0, 153, 174, .11));
}
:root[data-theme="dark"] body::after {
  background: linear-gradient(90deg, rgba(30, 90, 171, .24), rgba(15, 122, 145, .17), rgba(96, 90, 174, .09));
}
button, input, textarea, select { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}
button:disabled { opacity: .53; cursor: wait; transform: none !important; }
::selection { background: rgba(8, 124, 255, .24); }
.site-shell { position: relative; z-index: 1; max-width: 1580px; min-height: 100vh; margin: 0 auto; }
.top {
  padding: 30px clamp(20px, 4vw, 58px) 26px;
  display: flex; justify-content: space-between; align-items: center; gap: 28px;
}
.brand, .header-actions, .panel-title-row, .login-head { display: flex; align-items: center; }
.brand { min-width: 0; gap: 17px; }
.brand-logo { width: 70px; height: 70px; flex: none; object-fit: contain; filter: drop-shadow(0 6px 7px rgba(38, 70, 130, .14)); }
.brand-text { min-width: 0; }
.brand-kicker, .section-overline, .feature-index {
  margin: 0;
  font-weight: 800; letter-spacing: .105em; font-size: 11px;
}
.brand-kicker { color: var(--accent-dark); }
:root[data-theme="dark"] .brand-kicker { color: #A1CCFF; }
.kicker-dot { padding: 0 6px; color: var(--sport); }
h1, h2, h3, h4, p { overflow-wrap: break-word; }
h1 { margin: 2px 0 0; font-size: clamp(30px, 3.5vw, 47px); letter-spacing: -.055em; line-height: 1.17; font-weight: 840; }
h1 span { color: var(--sport); }
.subtitle { margin: 5px 0 0; font-size: 14px; color: var(--soft); }
.header-actions { flex-shrink: 0; gap: 12px; }
.account {
  display: inline-flex; align-items: center; gap: 9px;
  border-radius: 999px; padding: 10px 15px;
  background: var(--surface); border: 1px solid var(--line); box-shadow: 0 3px 14px rgba(0, 0, 0, .03);
  color: var(--soft); font-size: 12px; font-weight: 650;
  max-width: 310px; overflow-wrap: anywhere;
}
.account-dot { display: inline-block; flex: none; width: 8px; height: 8px; border-radius: 50%; background: #A6ADBE; box-shadow: 0 0 0 4px rgba(166, 173, 190, .12); }
.account.is-signed-in .account-dot { background: #12B99B; box-shadow: 0 0 0 4px rgba(18, 185, 155, .13); }
.theme-toggle {
  display: flex; align-items: center; gap: 9px; border: 1px solid var(--line);
  background: var(--surface); color: var(--text); border-radius: 999px;
  padding: 10px 14px; font-size: 12px; font-weight: 750;
  cursor: pointer; transition: background .18s, transform .18s;
}
.theme-toggle:hover { background: var(--button-hover); transform: translateY(-1px); }
.theme-icon { height: 18px; width: 18px; flex: none; }
.sun-icon { display: none; }
:root[data-theme="dark"] .sun-icon { display: block; }
:root[data-theme="dark"] .moon-icon { display: none; }
.spectrum {
  height: 4px; margin: 0 clamp(20px, 4vw, 58px);
  background: linear-gradient(90deg, #A855F7, #E957AA 20%, #FF9500 41%, #FFC928 60%, #7EC83F 78%, #00B5BF);
  border-radius: 999px; box-shadow: 0 2px 8px rgba(180, 103, 231, .14);
}
.layout {
  display: grid; grid-template-columns: minmax(286px, 334px) minmax(0, 1fr);
  align-items: start; gap: 24px;
  margin: 28px auto 64px; padding: 0 clamp(20px, 4vw, 58px);
}
.sidebar, .maincol { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.pane {
  background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 27px;
}
.pane h2 { margin: 2px 0 0; font-size: clamp(21px, 2.2vw, 28px); line-height: 1.22; letter-spacing: -.035em; }
.pane h3 { margin: 0; font-size: 18px; letter-spacing: -.027em; line-height: 1.3; }
.pane p { line-height: 1.63; }
.hidden { display: none !important; }
.section-icon { flex: none; width: 74px; height: 74px; object-fit: contain; }
.login-head, .panel-title-row { gap: 10px; min-width: 0; }
.section-overline { color: var(--sport); }
.compact { margin: 5px 0 0 !important; font-size: 12px; }
.separator { height: 1px; background: var(--line); margin: 22px 0 18px; }
.muted { color: var(--soft); }
label { display: block; margin: 17px 0 7px; font-size: 12px; font-weight: 750; color: var(--text); }
input:not([type="file"]), textarea, select {
  display: block; width: 100%; min-width: 0;
  background: var(--field); color: var(--text);
  border: 1px solid var(--line); border-radius: 12px;
  padding: 12px 13px; min-height: 46px; transition: border .18s, background .18s, box-shadow .18s;
}
input::placeholder, textarea::placeholder { color: var(--soft); opacity: .78; }
input:hover, textarea:hover, select:hover { background: var(--field-hover); }
input:focus, textarea:focus, select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(8, 124, 255, .10); }
textarea { min-height: 90px; resize: vertical; }
input[type="file"] { width: 100%; max-width: 100%; font-size: 12px; color: var(--soft); padding: 7px 0; }
input[type="file"]::file-selector-button {
  font: inherit; margin-right: 8px; padding: 8px 10px; border-radius: 9px;
  border: 1px solid var(--line); background: var(--button); color: var(--text); cursor: pointer;
}
button:not(.entry):not(.theme-toggle) {
  border: 1px solid var(--line); border-radius: 11px; padding: 11px 14px;
  min-height: 45px; color: var(--text); background: var(--button);
  font-size: 13px; font-weight: 760; cursor: pointer;
  transition: transform .15s, box-shadow .15s, background .15s, border-color .15s;
}
button:not(.entry):not(.theme-toggle):hover:not(:disabled) { background: var(--button-hover); transform: translateY(-1px); }
button:not(.entry):not(.theme-toggle):active:not(:disabled) { transform: scale(.99); }
button.primary:not(.entry) {
  background: linear-gradient(105deg, #087CFF, #3169E7);
  color: #FFF; border-color: rgba(2, 88, 191, .16);
  box-shadow: 0 7px 15px rgba(8, 124, 255, .17);
}
button.primary:not(.entry):hover:not(:disabled) { background: linear-gradient(105deg, #096EDF, #235AD5); box-shadow: 0 9px 17px rgba(8, 124, 255, .23); }
.full-width { width: 100%; }
.login-pane #login { display: flex; justify-content: space-between; align-items: center; margin-top: 23px; padding: 12px 17px; }
.connection-status {
  position: relative; padding-left: 17px; margin: 19px 0 0; color: var(--status);
  font-size: 11px; font-weight: 650; overflow-wrap: anywhere;
}
.connection-status::before { content: ""; position: absolute; left: 0; top: .63em; width: 7px; height: 7px; background: var(--accent); border-radius: 50%; }
.connection-status.is-error { color: var(--error); }
.connection-status.is-error::before { background: var(--error); }
.login-note { border-radius: 12px; background: var(--field); margin: 17px 0 0; padding: 13px 14px; color: var(--soft); font-size: 11px; }
.sidebar-footnote { padding: 0 6px; font-size: 11px; color: var(--soft); line-height: 1.6; text-align: center; }
.sidebar-footnote span, .footer span { color: var(--sport); padding: 0 3px; }
/* Welcome panel */
.welcome { display: flex; flex-direction: column; gap: 19px; }
.welcome-hero {
  position: relative; overflow: hidden; min-height: 310px;
  display: flex; align-items: center; gap: 26px;
  padding: clamp(28px, 4vw, 43px);
  background: linear-gradient(115deg, var(--surface) 52%, var(--sport-soft) 100%);
}
.welcome-hero::after { content: ""; position: absolute; width: 240px; height: 240px; border: 1px solid rgba(227, 34, 135, .11); border-radius: 50%; right: -78px; top: -105px; }
.welcome-copy { position: relative; z-index: 1; flex: 1; min-width: 0; }
.overline-sep { margin: 0 5px; color: var(--soft); }
.welcome-hero h2 { max-width: 620px; font-size: clamp(29px, 3.5vw, 44px); line-height: 1.12; margin: 14px 0 13px; letter-spacing: -.046em; }
.welcome-hero h2 span { color: var(--sport); }
.welcome-hero p:not(.section-overline) { max-width: 625px; margin: 0 0 10px; font-size: 14px; }
.welcome-hero p.muted { font-size: 12px; }
.hero-icon { width: clamp(145px, 19vw, 225px); height: auto; object-fit: contain; flex: none; filter: drop-shadow(0 10px 13px rgba(33, 64, 119, .11)); }
.hero-tag { display: inline-flex; align-items: center; gap: 9px; margin-top: 17px; padding: 8px 11px; background: var(--surface-raised); border: 1px solid var(--line); border-radius: 999px; font-size: 11px; font-weight: 750; color: var(--soft); }
.hero-tag-dot { width: 8px; height: 8px; background: var(--cyan); border-radius: 50%; }
.feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 17px; }
.feature-card { position: relative; overflow: hidden; padding: 22px 20px 21px; min-height: 250px; transition: transform .18s, box-shadow .18s; }
.feature-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); }
.feature-card::before { content: ""; position: absolute; width: 130px; height: 130px; right: -61px; bottom: -61px; border-radius: 50%; opacity: .09; }
.feature-pink::before { background: #E32287; }
.feature-blue::before { background: #088AEB; }
.feature-teal::before { background: #00AFAE; }
.feature-card img { display: block; width: 76px; height: 76px; object-fit: contain; margin-bottom: 14px; }
.feature-index { color: var(--soft); font-size: 10px; }
.feature-card h3 { margin: 7px 0 8px; font-size: 17px; line-height: 1.25; }
.feature-card p { margin: 0; font-size: 12px; line-height: 1.6; color: var(--soft); }
.variant-info { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 26px 28px; }
.variant-copy { max-width: 360px; }
.variant-copy h3 { font-size: 19px; margin: 8px 0; }
.variant-copy .muted { margin: 0; font-size: 12px; }
.variant-files { display: flex; gap: 10px; flex-wrap: wrap; }
.file-chip { display: flex; align-items: center; gap: 10px; background: var(--file-bg); border: 1px solid var(--line); border-radius: 13px; padding: 11px; min-width: 170px; }
.file-chip strong, .file-chip small { display: block; }
.file-chip strong { font-size: 11px; white-space: nowrap; }
.file-chip small { color: var(--soft); font-size: 10px; margin-top: 2px; }
.file-icon { display: grid; place-items: center; width: 32px; height: 36px; flex: none; background: linear-gradient(135deg, #E32287, #A75BEA); border-radius: 8px; color: white; font-size: 12px; font-weight: 900; }
.file-icon.file-2x { background: linear-gradient(135deg, #088AEB, #2CBBC8); }
/* Signed in tools */
.tools-pane { padding: 22px; }
.tools-pane .section-icon { height: 63px; width: 63px; }
.tools-pane h2 { font-size: 21px; }
.field-caption { margin: 2px 0 6px; font-size: 12px; font-weight: 750; }
.toolbar { display: flex; flex-wrap: wrap; gap: 9px; margin: 12px 0; align-items: center; }
.action-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.action-grid button { padding: 9px !important; font-size: 11px !important; }
button.subtle-button:not(.entry) { background: transparent; }
button.mutedButton:not(.entry) { padding: 12px !important; font-size: 11px !important; }
.new-button { margin-top: 11px; }
.list-counter { font-size: 11px; margin: 10px 0; }
.exerciseList {
  max-height: 65vh; overflow: auto; display: flex; flex-direction: column; gap: 6px;
  padding: 3px 3px 5px 0; scrollbar-color: var(--line) transparent;
}
.entry {
  background: var(--field); border: 1px solid transparent; border-radius: 10px;
  width: 100%; text-align: left; cursor: pointer; font-size: 12px; font-weight: 670;
  padding: 10px 11px; color: var(--text); transition: background .16s, border-color .16s;
}
.entry:hover { background: var(--button-hover); border-color: var(--line); }
.entry.active { border-color: var(--accent); background: var(--button-hover); box-shadow: inset 3px 0 0 var(--accent); }
.entry small { display: block; font-size: 10px; font-weight: 450; margin-top: 3px; color: var(--soft); }
/* Editor */
.editor-pane, .publish-pane { padding: clamp(21px, 3.1vw, 34px); }
.paneHeading { display: flex; gap: 24px; justify-content: space-between; align-items: center; }
.save-button { max-width: 270px; flex: none; }
.field-group-title { display: flex; align-items: center; gap: 10px; margin: 29px 0 16px; }
.field-group-title:first-of-type { margin-top: 12px; }
.field-group-title h3 { font-size: 19px; }
.group-number { display: grid; place-items: center; width: 33px; height: 33px; border-radius: 9px; color: var(--sport); background: var(--sport-soft); font-size: 12px; font-weight: 800; }
.required { color: var(--sport); }
.formgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 17px; }
.formgrid label { margin-top: 13px; }
.editor-pane code, .publish-pane code { color: var(--accent-dark); font-size: .95em; font-weight: 700; }
:root[data-theme="dark"] .editor-pane code, :root[data-theme="dark"] .publish-pane code { color: var(--accent); }
.editor-pane > .muted { font-size: 12px; margin: 9px 0 12px; }
.folder-toolbar .muted { font-size: 12px; }
.previews { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; margin-top: 18px; }
.preview { padding: 16px; border: 1px solid var(--line); background: var(--field); border-radius: 17px; min-width: 0; }
.preview h4 { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 13px; }
.preview-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--sport); }
.preview-dot.blue { background: #088AEB; }
.preview-img-wrap { height: 185px; display: grid; place-items: center; border-radius: 12px; border: 1px dashed var(--line); background: var(--surface); overflow: hidden; }
.preview img { width: 100%; height: 100%; object-fit: contain; font-size: 11px; color: var(--soft); }
.preview img:not([src]) { display: none; }
.preview img[src] + .preview-empty { display: none; }
.preview-empty { color: var(--soft); font-size: 11px; text-align: center; padding: 12px; }
.preview-empty::before { content: "◇"; display: block; color: var(--accent); font-size: 29px; line-height: 1.5; }
.preview label { margin-top: 14px; }
.preview button { width: 100%; margin-top: 11px; }
.editor-hint { color: var(--soft); font-size: 12px; margin: 21px 0 0; border-left: 3px solid var(--accent); background: var(--field); padding: 14px 16px; border-radius: 0 10px 10px 0; }
/* Publisher */
.publish-pane .section-icon { width: 65px; height: 65px; }
.publish-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 24px 0; }
.publish-steps span { display: flex; gap: 8px; align-items: center; padding: 11px; border-radius: 12px; background: var(--field); font-size: 11px; }
.publish-steps b { display: grid; place-items: center; flex: none; width: 25px; height: 25px; border-radius: 50%; background: var(--accent); color: #FFF; font-size: 11px; }
.publish-actions { display: flex; align-items: stretch; gap: 10px; }
.publish-actions input { flex: 1; }
.publish-actions button { flex: none; }
#publishInfo { margin: 12px 0 0; font-size: 12px; }
.footer { padding: 15px 22px 26px; text-align: center; font-size: 11px; color: var(--soft); }
#toast {
  display: none; position: fixed; z-index: 10; bottom: 20px; right: 20px;
  padding: 14px 18px; max-width: min(480px, calc(100vw - 32px)); border-radius: 14px;
  box-shadow: 0 10px 40px rgba(8, 27, 57, .26); color: #FFFFFF; background: #145C88;
  font-weight: 650; font-size: 13px; overflow-wrap: anywhere;
}
#toast.error { background: #A22A52; }
@media (max-width: 1220px) {
  .hero-icon { width: clamp(120px, 16vw, 185px); }
  .welcome-hero { gap: 4px; }
  .feature-grid { gap: 11px; }
  .feature-card { padding: 18px; }
  .variant-info { flex-direction: column; align-items: stretch; }
}
@media (max-width: 950px) {
  .top { flex-wrap: wrap; }
  .layout { grid-template-columns: 280px minmax(0,1fr); gap: 15px; }
  .pane { padding: 20px; }
  .welcome-hero { flex-direction: column-reverse; align-items: start; }
  .welcome-hero .hero-icon { width: 112px; height: 112px; }
  .feature-grid { grid-template-columns: 1fr; }
  .feature-card { display: grid; grid-template-columns: 64px 1fr; column-gap: 12px; min-height: unset; }
  .feature-card img { grid-row: span 3; width: 64px; height: 64px; margin: 0; }
  .feature-card h3 { margin: 3px 0; }
  .paneHeading { align-items: start; flex-direction: column; }
  .publish-steps { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .publish-actions { flex-direction: column; }
}
@media (max-width: 730px) {
  .top { padding: 21px 18px; gap: 18px; }
  .brand-logo { width: 55px; height: 55px; }
  .brand { gap: 12px; }
  .brand-kicker { font-size: 9px; letter-spacing: .06em; }
  h1 { font-size: clamp(26px, 6.3vw, 37px); }
  .subtitle { font-size: 12px; }
  .header-actions { width: 100%; justify-content: space-between; }
  .spectrum { margin: 0 18px; }
  .layout { display: flex; flex-direction: column; margin: 19px auto 44px; padding: 0 15px; gap: 18px; }
  .sidebar, .maincol { width: 100%; gap: 16px; }
  .sidebar-footnote { display: none; }
  .welcome { gap: 14px; }
  .welcome-hero { padding: 25px; }
  .welcome-hero h2 { font-size: 33px; }
  .feature-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .feature-card { display: block; padding: 16px; }
  .feature-card img { width: 66px; height: 66px; margin-bottom: 8px; }
  .file-chip { min-width: min(45%, 210px); flex: 1; }
}
@media (max-width: 540px) {
  .pane { padding: 20px; border-radius: 21px; }
  .brand { align-items: center; }
  .brand-logo { width: 50px; height: 50px; }
  .brand-kicker { font-size: 8px; }
  h1 { font-size: clamp(24px, 6vw, 32px); }
  .subtitle { font-size: 11px; }
  .account { padding: 9px 11px; font-size: 11px; max-width: calc(100% - 146px); }
  .theme-toggle { padding: 9px 11px; font-size: 11px; }
  .welcome-hero { flex-direction: column-reverse; align-items: start; }
  .welcome-hero .hero-icon { width: 102px; height: 102px; }
  .welcome-hero h2 { font-size: 30px; }
  .feature-grid { grid-template-columns: 1fr; }
  .feature-card { display: grid; grid-template-columns: 72px 1fr; min-height: unset; column-gap: 12px; }
  .feature-card img { grid-row: span 3; width: 72px; height: 72px; margin-bottom: 0; }
  .variant-files { flex-direction: column; }
  .file-chip { width: 100%; }
  .formgrid, .previews { grid-template-columns: 1fr; }
  .publish-steps { grid-template-columns: 1fr; }
  .publish-actions button { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
/* Pantalla 404 */
.notfound-container { max-width: 610px; padding: 52px 18px; margin: 0 auto; }
.notfound { text-align: center; padding: 40px 24px; }
.notfound .section-icon { width: 100px; height: 100px; }
.notfound h2 { font-size: clamp(25px, 4vw, 34px); margin: 10px auto 12px; }
.notfound .muted { margin: 0 0 22px; }
.return-link { display: inline-flex; align-items: center; gap: 15px; text-decoration: none; border-radius: 12px; padding: 11px 19px; color: #fff; font-size: 13px; font-weight: 800; background: linear-gradient(110deg, #087CFF, #3169E7); box-shadow: 0 7px 15px rgba(8, 124, 255, .17); }
.return-link:hover { filter: brightness(1.08); }
.return-link:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }