/* Estilos de aulapp.cl. El ingreso copia el de la app móvil de Aulapp (repo
   Aulapp/app2026, apps/web: globals.css .auth-* + native-app.css): fondo blanco y
   solo el cuadro, centrado. Las pantallas con sesión copian el AppShell de la app
   (menú lateral, barra y menú de usuario), sus cuadros de curso (.course-world) y
   su Aula digital (.wall-*), con los colores de .app-shell-kinetic. */
:root {
  --kc-primary: #ff6115;
  --kc-primary-text: #a83900;
  --kc-charcoal: #1a2130;
  --kc-background: #faf8ff;
  --kc-surface-container-low: #f2f3ff;
  --kc-surface-container-high: #e2e7ff;
  --kc-border: #e4e7f6;
  --kc-text: #131b2e;
  --kc-text-muted: #5a4137;
  --kc-shadow-sm: 0 1px 2px rgba(19, 27, 46, 0.05), 0 0 0 1px rgba(19, 27, 46, 0.035);
  --kc-shadow-md: 0 4px 6px -1px rgba(19, 27, 46, 0.08), 0 2px 4px -2px rgba(19, 27, 46, 0.05);
  --color-tinta: #131b2e;
  --color-tinta-suave: #5f6974;
  --color-fondo: #f2f3ff;
  --color-linea: #e4e7f6;
  --color-critico: #ba1a1a;
  /* Color de los cursos en la app (azul tinta): -a es la punta clara del degradado. */
  --world-curso-a: #5b82ad;
  --world-curso-b: #1f3f66;
  --motion-fast: 300ms;
  --motion-ease: cubic-bezier(0.34, 1.56, 0.64, 1);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: #ffffff;
}

body {
  color: #1e252d;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

input, button { font: inherit; color: inherit; }

.auth-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  min-height: 100dvh;
  padding: 24px;
  background: #ffffff;
}

.auth-panel-inner {
  width: 100%;
  max-width: 400px;
}

.auth-form-card {
  animation: auth-card-in 900ms cubic-bezier(0.2, 0.8, 0.2, 1) 150ms backwards;
}

@keyframes auth-card-in {
  from { opacity: 0; transform: translateY(24px) scale(0.98); }
  to { opacity: 1; transform: none; }
}

.auth-form-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 18px;
  margin-bottom: 2rem;
}

.auth-form-title {
  margin: 0 0 0.4rem;
  line-height: 1.1;
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.035em;
  color: #1e252d;
}

.auth-form-sub {
  margin: 0;
  color: #5f6974;
  line-height: 1.5;
  font-size: 15px;
}

.auth-form-icon {
  order: -1;
  width: 76px;
  height: 76px;
  border-radius: 20px;
  flex-shrink: 0;
  box-shadow: 0 14px 30px -14px rgba(255, 97, 21, 0.75);
  animation:
    app-icon-pop 650ms var(--motion-ease) backwards,
    app-icon-float 4.5s ease-in-out 650ms infinite;
}

@keyframes app-icon-pop {
  from { opacity: 0; transform: translateY(10px) scale(0.82) rotate(8deg); }
  to { opacity: 1; transform: none; }
}

@keyframes app-icon-float {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
    box-shadow: 0 14px 30px -14px rgba(255, 97, 21, 0.75);
  }
  50% {
    transform: translateY(-9px) rotate(-6deg);
    box-shadow: 0 26px 38px -18px rgba(255, 97, 21, 0.5);
  }
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
}

.auth-field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-size: 15px;
  font-weight: 600;
}

.auth-field-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
}

.auth-field-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #1e252d;
}

.auth-link-small {
  font-size: 13px;
  font-weight: 600;
  color: var(--kc-primary);
  text-decoration: none;
}

.auth-link-small:hover { text-decoration: underline; }

.auth-input {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0 0.95rem;
  border: 1.5px solid #e2dccf;
  border-radius: 14px;
  background: #fcfbf8;
  transition: border-color var(--motion-fast) ease, box-shadow var(--motion-fast) ease, background-color var(--motion-fast) ease;
}

.auth-input:hover { border-color: #cfc6b4; }

.auth-input:focus-within {
  border-color: var(--kc-primary);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(255, 97, 21, 0.14);
}

.auth-input > .material-symbols-outlined {
  font-size: 20px;
  color: #9aa3ad;
  transition: color var(--motion-fast) ease, transform var(--motion-fast) var(--motion-ease);
}

.auth-input:focus-within > .material-symbols-outlined {
  color: var(--kc-primary);
  transform: scale(1.1);
}

.auth-input input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  padding: 0.95rem 0;
  font-size: 16px;
  font-weight: 400;
  box-shadow: none;
  outline: none;
}

.auth-eye {
  display: inline-flex;
  border: none;
  background: transparent;
  padding: 4px;
  border-radius: 8px;
  color: #9aa3ad;
  cursor: pointer;
  transition: color var(--motion-fast) ease, background-color var(--motion-fast) ease;
}

.auth-eye:hover { color: #1e252d; background: #f0eee6; }
.auth-eye .material-symbols-outlined { font-size: 20px; }

.auth-notice {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0.7rem 0.9rem;
  border-radius: 10px;
  background: #fff7ed;
  border: 1px solid #fed7aa;
  color: #9a3412;
  font-size: 14px;
  animation: motion-rise var(--motion-fast) var(--motion-ease) backwards;
}

.auth-notice[hidden] { display: none; }
.auth-notice .material-symbols-outlined { font-size: 19px; }

@keyframes motion-rise {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

.auth-submit {
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  min-height: 54px;
  margin-top: 0.4rem;
  padding: 1rem 1.2rem;
  border: none;
  border-radius: 14px;
  background: linear-gradient(135deg, #ff7a2f 0%, #ff6115 50%, #f04e05 100%);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 14px 30px -12px rgba(255, 97, 21, 0.75);
  transition: transform var(--motion-fast) var(--motion-ease), box-shadow var(--motion-fast) ease;
}

.auth-submit::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 25%, rgba(255, 255, 255, 0.35) 50%, transparent 75%);
  transform: translateX(-120%);
  transition: transform 700ms ease;
}

.auth-submit:hover { transform: translateY(-2px); box-shadow: 0 20px 36px -14px rgba(255, 97, 21, 0.85); }
.auth-submit:hover::after { transform: translateX(120%); }
.auth-submit:active { transform: scale(0.97); }

.auth-submit .material-symbols-outlined {
  font-size: 20px;
  transition: transform var(--motion-fast) var(--motion-ease);
}

.auth-submit:hover .material-symbols-outlined { transform: translateX(4px); }


/* ------------------------------------------------------------ Google */

.auth-google {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 54px;
  padding: 0.9rem 1.2rem;
  border: 1.5px solid #e2dccf;
  border-radius: 14px;
  background: #fff;
  color: #1e252d;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: border-color var(--motion-fast) ease, box-shadow var(--motion-fast) ease, transform var(--motion-fast) var(--motion-ease);
}

.auth-google:hover { border-color: #cfc6b4; box-shadow: 0 10px 24px -16px rgba(30, 37, 45, 0.45); transform: translateY(-1px); }
.auth-google:active { transform: scale(0.98); }
.auth-google:focus-visible { outline: none; border-color: var(--kc-primary); box-shadow: 0 0 0 4px rgba(255, 97, 21, 0.14); }
.auth-google svg { width: 20px; height: 20px; flex-shrink: 0; }

.auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 1.4rem 0;
  color: #9aa3ad;
  font-size: 13px;
}

.auth-divider::before,
.auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #ebe5da;
}

/* ------------------------------------------------------------ Errores */

.auth-error {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0.7rem 0.9rem;
  border-radius: 10px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #b91c1c;
  font-size: 14px;
  animation: motion-rise var(--motion-fast) var(--motion-ease) backwards;
}

.auth-error[hidden] { display: none; }
.auth-error .material-symbols-outlined { font-size: 19px; }

.auth-form-card.is-error { animation: auth-shake 420ms cubic-bezier(0.36, 0.07, 0.19, 0.97); }

@keyframes auth-shake {
  10%, 90% { transform: translateX(-2px); }
  20%, 80% { transform: translateX(4px); }
  30%, 50%, 70% { transform: translateX(-7px); }
  40%, 60% { transform: translateX(7px); }
}

.auth-submit:disabled { opacity: 0.75; cursor: progress; transform: none; }

/* Mientras se revisa si ya hay sesión, la pantalla no se muestra. */
.is-checking { visibility: hidden; }

/* -------------------------------- Menú lateral, barra y menú de usuario
   Copia del AppShell de la app (packages/ui + globals.css .app-shell-kinetic):
   barra superior con el logo, menú lateral oscuro contraído a íconos que se
   despliega al pasar el cursor (o queda fijo con las tres rayitas) y, en el
   teléfono, el mismo menú abajo. Lo arma A.iniciar (app.js). */

html.con-menu, html.con-menu body { background: var(--kc-background); }

.app-shell {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--kc-background);
  font-feature-settings: "cv11", "ss01";
  text-rendering: optimizeLegibility;
}

.app-topbar {
  position: relative;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-shrink: 0;
  height: 84px;
  padding: 0 1.25rem;
  background: rgba(250, 248, 255, 0.9);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.04);
}

.app-topbar-start { display: flex; align-items: center; gap: 6px; min-width: 0; }
.app-topbar-brand { display: inline-flex; align-items: center; border-radius: 6px; text-decoration: none; }
.app-topbar-brand:focus-visible { outline: 2px solid var(--kc-primary); outline-offset: 2px; }
.app-topbar-logo { display: block; width: auto; height: 66px; transition: transform var(--motion-fast) var(--motion-ease); }
.app-topbar-brand:hover .app-topbar-logo { transform: scale(1.04); }
.app-topbar-icon { display: none; }

.app-sidenav-toggle { display: none; align-items: center; justify-content: center; flex-shrink: 0; width: 40px; height: 40px; border: none; border-radius: 10px; background: transparent; color: var(--kc-text); cursor: pointer; transition: background-color var(--motion-fast) ease; }
.app-sidenav-toggle:hover, .app-sidenav-toggle[aria-pressed="true"] { background: var(--kc-surface-container-low); }
.app-sidenav-toggle:focus-visible { outline: 2px solid var(--kc-primary); outline-offset: 2px; }
.app-sidenav-toggle .material-symbols-outlined { font-size: 24px; }

.app-body { flex: 1; display: flex; min-height: 0; }
.app-sidenav { display: none; }
.app-bottomnav { display: none; }

.app-content {
  flex: 1;
  min-width: 0;
  padding: 1.5rem 2rem 2.5rem;
  background: var(--kc-background);
  color: var(--kc-text);
  font-size: 14px;
  line-height: 20px;
}

@media (min-width: 768px) {
  .app-topbar { padding-left: 14px; }
  .app-sidenav-toggle { display: inline-flex; }

  .app-sidenav {
    --sidenav-rail: 68px;
    --sidenav-open: 256px;
    position: relative;
    z-index: 15;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    width: var(--sidenav-rail);
    padding: 1rem 0.75rem;
    overflow: hidden auto;
    background: var(--kc-charcoal);
    transition: width 0.22s var(--motion-ease);
  }

  html[data-sidenav-hover="1"] .app-sidenav,
  .app-sidenav:has(:focus-visible) { width: var(--sidenav-open); transition-delay: 90ms; }
  html[data-sidenav="open"] .app-sidenav { width: var(--sidenav-open); }

  .app-sidenav a {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 40px;
    padding: 0.55rem 0.75rem;
    border-radius: 8px;
    color: rgba(234, 237, 255, 0.72);
    font-size: 13.5px;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    transition: background-color var(--motion-fast) ease, color var(--motion-fast) ease;
  }

  .app-sidenav a:hover { background: rgba(234, 237, 255, 0.08); color: #fff; }
  .app-sidenav a.is-active { background: var(--kc-primary); color: #fff; font-weight: 600; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); }
  .app-sidenav a:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }

  .app-sidenav-icon { flex-shrink: 0; font-size: 19px; transition: transform var(--motion-fast) var(--motion-ease); }
  .app-sidenav a:hover .app-sidenav-icon { transform: translateX(2px) scale(1.08); }
  .app-sidenav a.is-active .app-sidenav-icon { transform: scale(1.05); }
  html:not([data-sidenav="open"]):not([data-sidenav-hover="1"]) .app-sidenav:not(:has(:focus-visible)) a .app-sidenav-icon { transform: none; }

  .app-sidenav-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; opacity: 0; transform: translateX(-6px); transition: opacity 0.16s ease, transform 0.2s var(--motion-ease); }
  html[data-sidenav-hover="1"] .app-sidenav .app-sidenav-label,
  .app-sidenav:has(:focus-visible) .app-sidenav-label,
  html[data-sidenav="open"] .app-sidenav-label { opacity: 1; transform: none; transition-delay: 90ms; }
}

@media (max-width: 767px) {
  .app-body { flex-direction: column; }
  .app-content { padding: 1rem 1rem 1.5rem; }
  .app-topbar-logo { display: none; }
  .app-topbar-icon { display: block; width: 56px; height: 56px; margin: -4px -6px; }

  .app-bottomnav {
    position: sticky;
    bottom: 0;
    z-index: 20;
    display: flex;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: var(--kc-charcoal);
  }

  .app-bottomnav::-webkit-scrollbar { display: none; }

  .app-bottomnav a {
    flex: 1 0 auto;
    min-width: 76px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 0.6em 0.25em;
    color: rgba(255, 255, 255, 0.7);
    font-size: 11.5px;
    font-weight: 500;
    text-decoration: none;
    transition: color var(--motion-fast) ease;
  }

  .app-bottomnav a.is-active { color: var(--kc-primary); }
  .app-bottomnav-icon { font-size: 22px; }
}

@media (max-width: 640px) {
  .app-topbar { height: 68px; }
}

.app-user { position: relative; display: flex; align-items: center; gap: 4px; }
.app-user-btn { display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px 4px 4px; border: 1px solid transparent; border-radius: 999px; background: transparent; color: var(--kc-text); font: inherit; font-weight: 600; cursor: pointer; }
.app-user-btn:hover, .app-user-btn[aria-expanded="true"] { background: var(--kc-surface-container-low); border-color: var(--kc-border); }
.app-user-avatar { flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; object-fit: cover; transition: transform var(--motion-fast) var(--motion-ease); }
.app-user-btn:hover .app-user-avatar { transform: scale(1.06); }
.app-user-initials { display: inline-flex; align-items: center; justify-content: center; background: var(--kc-primary); color: #fff; font-size: 13px; font-weight: 700; }
.app-user-name { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 600; }
.app-user-caret { display: inline-block; font-size: 11px; color: #6b7a89; transition: transform var(--motion-fast) var(--motion-ease); }
.app-user-btn[aria-expanded="true"] .app-user-caret { transform: rotate(180deg); }
.app-user-menu { position: absolute; top: calc(100% + 6px); right: 0; z-index: 30; min-width: 220px; max-width: calc(100vw - 32px); padding: 6px; border: 1px solid var(--kc-border); border-radius: 10px; background: #fff; box-shadow: var(--kc-shadow-md); font-size: 14px; line-height: 20px; transform-origin: top right; animation: motion-pop var(--motion-fast) var(--motion-ease) backwards; }
.app-user-menu[hidden] { display: none; }
.app-user-menu-head { margin-bottom: 4px; padding: 8px 10px 10px; border-bottom: 1px solid var(--kc-border); font-size: 13px; }
.app-user-menu-head strong, .app-user-menu-head small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-user-menu-head small { color: var(--color-tinta-suave); font-size: 12.5px; }
.app-user-menu-role { display: inline-block; margin-top: 6px; padding: 2px 8px; border-radius: 999px; background: var(--kc-surface-container-high); color: var(--kc-text); font-size: 11.5px; font-weight: 700; }
.app-user-menu a, .app-user-menu button { display: block; width: 100%; padding: 9px 10px; border: none; border-radius: 8px; background: transparent; color: var(--kc-text); font: inherit; font-size: 14px; text-align: left; text-decoration: none; cursor: pointer; }
.app-user-menu a:hover, .app-user-menu button:hover { background: var(--kc-surface-container-low); }
.app-user-menu .is-danger { color: var(--color-critico); }
@media (max-width: 640px) { .app-user-name { display: none; } }

@keyframes motion-pop {
  from { opacity: 0; transform: translateY(-4px) scale(0.96); }
  to { opacity: 1; transform: none; }
}

/* Encabezado de página, como en la app: etiqueta con punto, título y bajada. */
.pagina { max-width: 1180px; min-width: 0; animation: motion-rise 420ms var(--motion-ease) backwards; }
.page-eyebrow { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 0.5rem; padding: 3px 10px; border-radius: 12px; background: var(--kc-surface-container-high); color: var(--kc-text-muted); font-size: 11px; font-weight: 500; line-height: 14px; letter-spacing: 0.05em; text-transform: uppercase; }
.page-eyebrow::before { content: ""; flex-shrink: 0; width: 6px; height: 6px; border-radius: 50%; background: var(--kc-primary); }
.app-content h1 { margin: 0 0 0.25rem; color: var(--kc-text); font-size: 36px; font-weight: 700; line-height: 44px; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.page-subtitle { max-width: 72ch; margin: 0.15rem 0 1.25rem; color: var(--kc-text-muted); font-size: 14px; line-height: 20px; }
.pagina-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 0 20px; }
.pagina-head > .btn { margin-bottom: 1.25rem; }
@media (max-width: 767px) { .app-content h1 { font-size: 28px; line-height: 36px; } }

/* ------------------------------------------------ Piezas compartidas */

/* Como .app-shell-kinetic .card en la app: blanca, sin borde a la vista, sombra suave. */
.card { background: #fff; border: 1px solid transparent; border-radius: 12px; box-shadow: var(--kc-shadow-sm); }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 0.5rem 1rem; border-radius: 12px; border: 1.5px solid transparent; font: inherit; font-size: 14px; font-weight: 700; text-decoration: none; cursor: pointer; transition: transform var(--motion-fast) var(--motion-ease), box-shadow var(--motion-fast) ease, background-color var(--motion-fast) ease, border-color var(--motion-fast) ease; }
.btn .material-symbols-outlined { font-size: 19px; }
.btn-primario { background: linear-gradient(135deg, #ff7a2f 0%, #ff6115 50%, #f04e05 100%); color: #fff; box-shadow: 0 10px 22px -12px rgba(255, 97, 21, 0.75); }
.btn-primario:hover { transform: translateY(-1px); box-shadow: 0 14px 26px -12px rgba(255, 97, 21, 0.85); }
.btn-secundario { background: #fff; color: var(--color-tinta); border-color: #e2dccf; }
.btn-secundario:hover { border-color: #cfc6b4; background: var(--color-fondo); }
.btn:disabled { opacity: 0.6; cursor: progress; transform: none; }
.btn-peligro { background: transparent; border: none; color: var(--color-critico); font-weight: 600; }
.btn-peligro:hover { background: color-mix(in srgb, var(--color-critico) 8%, transparent); }

.campos { display: grid; gap: 14px; }
.campos-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.campo { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.campo[hidden] { display: none; }
.campo > span { color: var(--kc-text); font-size: 13.5px; font-weight: 600; line-height: 18px; }
.campo > span small { margin-left: 4px; color: var(--color-tinta-suave); font-size: 12.5px; font-weight: 500; }
.campo input, .campo textarea, .campo select { width: 100%; min-width: 0; min-height: 46px; padding: 0.7rem 0.9rem; border: 1px solid transparent; border-radius: 12px; background: var(--kc-surface-container-low); color: var(--kc-text); font: inherit; font-size: 15px; line-height: 22px; transition: border-color var(--motion-fast) ease, box-shadow var(--motion-fast) ease, background-color var(--motion-fast) ease; }
.campo input::placeholder, .campo textarea::placeholder { color: #8a90a6; }
.campo input:hover, .campo textarea:hover, .campo select:hover { background: #eceefd; }
.campo textarea { min-height: 96px; resize: vertical; }
.campo input:focus, .campo textarea:focus, .campo select:focus { outline: none; border-color: var(--kc-primary); background: #fff; box-shadow: 0 0 0 4px rgba(255, 97, 21, 0.14); }
.check { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; cursor: pointer; }
.check input { width: 18px; height: 18px; accent-color: var(--kc-primary); }
.acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.acciones .espacio { flex: 1; }
.muted { color: var(--color-tinta-suave); }
.aviso-ok { margin: 0; padding: 0.7rem 0.9rem; border-radius: 10px; background: #e3f5ea; color: #1f7a44; font-size: 14px; }

.tag { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px; background: #f1f3f5; color: var(--color-tinta); font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.tag .material-symbols-outlined { font-size: 15px; }
.tag-warn { background: #fff1e1; color: #8a4b00; }
.tag-ok { background: #e3f5ea; color: #1f7a44; }
.tag-solid { background: var(--kc-primary); color: #fff; }

.vacio { text-align: center; padding: 2.5rem 1rem; color: var(--color-tinta-suave); }
.vacio > .material-symbols-outlined { display: block; font-size: 40px; margin-bottom: 8px; color: var(--kc-primary); }
.vacio p { margin: 16px 0 0; }

/* ------------------------------------------------- Inicio y Cursos
   Mosaico de cursos: copia de «Mis cursos» del docente en la app (.my-courses y
   la tarjeta compacta de mundo, .course-world.my-course, en el color de los
   cursos .w-curso). */

.seccion { margin-top: 1.75rem; }
.seccion:first-child { margin-top: 0.5rem; }
.seccion-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.seccion-head h2 { margin: 0; font-size: 24px; font-weight: 600; line-height: 32px; letter-spacing: -0.015em; }
.grupo-titulo { margin: 0 0 12px; font-size: 18px; font-weight: 600; line-height: 26px; }
.grupo-titulo small { margin-left: 6px; color: var(--kc-text-muted); font-size: 13px; font-weight: 500; }
.seccion-mas { margin: 16px 0 0; }
.seccion-mas a { display: inline-flex; align-items: center; gap: 4px; color: var(--kc-primary-text); font-weight: 700; text-decoration: none; }
.seccion-mas a:hover { text-decoration: underline; }
.seccion-mas .material-symbols-outlined { font-size: 18px; }
@media (max-width: 767px) { .seccion-head h2 { font-size: 20px; line-height: 28px; } }

.my-courses { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); gap: 22px; margin-top: 8px; }
.w-curso { --world-color: var(--world-curso-b); --world-grad: linear-gradient(135deg, var(--world-curso-a), var(--world-curso-b)); --world-shadow: color-mix(in srgb, var(--world-curso-b) 35%, transparent); }
.course-world { position: relative; display: flex; flex-direction: column; gap: 8px; min-width: 0; margin: 0; padding: 24px 22px 20px; overflow: hidden; border-radius: 20px; color: inherit; text-decoration: none; transition: border-color 0.15s, box-shadow 0.2s, transform 0.2s; }
.course-world::after { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--world-grad); opacity: 0; transition: opacity 0.2s; }
.course-world:hover { border-color: color-mix(in srgb, var(--world-color) 45%, transparent); box-shadow: 0 14px 34px -12px var(--world-shadow); transform: translateY(-3px); }
.course-world:hover::after { opacity: 1; }
.course-world:focus-visible { outline: 2px solid var(--world-color); outline-offset: 3px; }
.course-world-tile { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 52px; height: 52px; margin: 0 0 6px; border-radius: 15px; background: var(--world-grad); box-shadow: 0 8px 18px -8px var(--world-shadow); color: #fff; }
.course-world-tile .material-symbols-outlined { font-size: 28px; font-variation-settings: "FILL" 1, "wght" 500, "opsz" 40; }
.course-world-title { color: var(--kc-text); font-size: 22px; font-weight: 700; line-height: 1.2; overflow-wrap: anywhere; }
.course-world-desc { color: var(--kc-text-muted); font-size: 14px; line-height: 1.55; overflow-wrap: anywhere; }
.course-world-includes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.course-world-includes span { padding: 3px 10px; border-radius: 999px; background: color-mix(in srgb, var(--world-color) 9%, transparent); color: color-mix(in srgb, var(--world-color) 80%, var(--kc-text)); font-size: 12px; font-weight: 600; }
.course-world-foot { display: flex; align-items: center; gap: 12px; margin-top: auto; padding-top: 18px; border-top: 1px solid var(--kc-border); }
.course-world-fact { flex: 1; min-width: 0; color: var(--kc-text); font-size: 13px; font-weight: 600; overflow-wrap: anywhere; }
.course-world-enter { display: inline-flex; align-items: center; gap: 4px; color: var(--world-color); font-size: 14px; font-weight: 700; white-space: nowrap; }
.course-world-enter .material-symbols-outlined { font-size: 18px; transition: transform 0.15s; }
.course-world:hover .course-world-enter .material-symbols-outlined { transform: translateX(3px); }
@media (max-width: 640px) {
  .my-courses { gap: 14px; }
  .course-world { padding: 20px 18px 18px; }
  .course-world-title { font-size: 19px; }
}

.buscador { display: flex; align-items: center; gap: 8px; max-width: 420px; margin: 0 0 18px; padding: 0 12px; border: 1.5px solid var(--kc-border); border-radius: 12px; background: #fff; transition: border-color var(--motion-fast) ease, box-shadow var(--motion-fast) ease; }
.buscador:focus-within { border-color: var(--kc-primary); box-shadow: 0 0 0 4px rgba(255, 97, 21, 0.14); }
.buscador .material-symbols-outlined { color: #9aa3ad; font-size: 20px; }
.buscador input { flex: 1; min-width: 0; padding: 0.65rem 0; border: none; outline: none; background: transparent; font: inherit; font-size: 15px; }

.curso-form { padding: 20px; margin-bottom: 14px; }
.curso-form h3 { margin: 0 0 4px; font-size: 18px; }
.curso-form > p { margin: 0 0 16px; font-size: 14px; color: var(--color-tinta-suave); }

/* --------------------------------------------------------------- Curso */

/* «Volver»: copia de .back-link de la app (apps/web/src/app/globals.css). */
.back-link { display: flex; width: fit-content; max-width: 100%; align-items: center; gap: 10px; margin: 0 0 18px; padding: 5px 16px 5px 5px; border: 1px solid var(--kc-border); border-radius: 999px; background: #fff; color: var(--kc-text); font-family: inherit; font-size: 14px; font-weight: 600; line-height: 1.2; text-decoration: none; cursor: pointer; transition: border-color 0.15s, background 0.15s, box-shadow 0.15s; }
.back-link:hover { border-color: color-mix(in srgb, var(--kc-primary) 45%, transparent); box-shadow: 0 2px 8px rgba(20, 36, 51, 0.06); text-decoration: none; }
.back-link:focus-visible { outline: 2px solid var(--kc-primary); outline-offset: 2px; }
.back-link-icon { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 28px; height: 28px; border-radius: 50%; background: #f0eee6; color: var(--kc-text); transition: background 0.15s, color 0.15s, transform 0.15s; }
.back-link:hover .back-link-icon { background: var(--kc-primary); color: #fff; transform: translateX(-2px); }
.back-link-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wall-detail > .back-link { margin-bottom: 4px; }
.curso-head { margin: 14px 0 18px; }
.app-content .curso-head h1 { margin: 0 0 6px; }
.curso-head-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; color: var(--color-tinta-suave); font-size: 14px; }
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--color-linea); margin-bottom: 20px; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab { flex: none; border: none; background: none; font: inherit; font-size: 15px; font-weight: 700; color: var(--color-tinta-suave); padding: 10px 12px; border-bottom: 3px solid transparent; margin-bottom: -1px; cursor: pointer; }
.tab:hover { color: var(--color-tinta); }
.tab.is-active { color: var(--color-tinta); border-bottom-color: var(--kc-primary); }

.aula-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; align-items: start; }
@media (max-width: 900px) { .aula-grid { grid-template-columns: minmax(0, 1fr); } }
.aula-side { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.side-card { padding: 16px 18px; }
.side-card h2 { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 15px; font-weight: 800; }
.side-card h2 .material-symbols-outlined { font-size: 20px; color: var(--kc-primary); }
.side-card.is-hot { border-color: color-mix(in srgb, var(--kc-primary) 45%, transparent); }
.side-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.side-list a, .side-list div { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; margin: 0 -10px; border-radius: 10px; color: inherit; text-decoration: none; min-width: 0; }
.side-list a:hover { background: var(--color-fondo); }
.side-list strong { font-size: 14px; overflow-wrap: anywhere; }
.side-list small { font-size: 12.5px; color: var(--color-tinta-suave); }
.side-empty { margin: 0; font-size: 13.5px; color: var(--color-tinta-suave); }

/* ------------------------------------------------- Aula digital (muro)
   Copia de la app (globals.css .wall-*): mismos cuadros, íconos y detalle. */

.wall-composer { padding: 0.9rem 1rem 1rem; border-radius: 14px; margin-bottom: 18px; }
.wall-composer-head { display: flex; gap: 10px; align-items: center; }
.wall-composer-prompt { flex: 1; min-width: 0; text-align: left; border: 1px solid var(--color-linea); background: var(--color-fondo); border-radius: 999px; padding: 0.6rem 1rem; color: #6b7a89; font: inherit; cursor: text; }
.wall-composer-prompt:hover { border-color: var(--kc-primary); }
.wall-composer-title { flex: 1; min-width: 0; border: 1px solid var(--color-linea); border-radius: 10px; padding: 0.55rem 0.75rem; font: inherit; font-size: 17px; font-weight: 600; }
.wall-composer-title:focus { outline: none; border-color: var(--kc-primary); box-shadow: 0 0 0 3px rgba(255, 97, 21, 0.14); }
.wall-kinds { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.wall-kind { border: 1px solid var(--color-linea); background: #fff; border-radius: 999px; padding: 0.35rem 0.8rem; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; display: inline-flex; gap: 6px; align-items: center; color: var(--color-tinta); }
.wall-kind .material-symbols-outlined { font-size: 18px; color: var(--kc-primary); }
.wall-kind:hover { border-color: var(--kc-primary); }
.wall-kind.is-active { background: var(--kc-primary); color: #fff; border-color: var(--kc-primary); }
.wall-kind.is-active .material-symbols-outlined { color: #fff; }
.wall-kind:disabled { opacity: 0.45; cursor: not-allowed; }
.wall-composer-body { margin-top: 12px; display: grid; gap: 12px; }
.wall-avatar { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--kc-primary); color: #fff; font-size: 13px; font-weight: 700; }
img.wall-avatar { object-fit: cover; }

.wall-cards { display: flex; flex-direction: column; gap: 18px; }
.wall-card { display: flex; align-items: flex-start; gap: 20px; padding: 24px 26px; margin: 0; border-radius: 16px; text-decoration: none; color: inherit; min-width: 0; transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s; }
a.wall-card:hover { border-color: var(--kc-primary); box-shadow: 0 8px 22px rgba(20, 36, 51, 0.08); transform: translateY(-1px); }
.wall-card:focus-visible { outline: 2px solid var(--kc-primary); outline-offset: 2px; }
.wall-card.is-pinned { border-color: color-mix(in srgb, var(--kc-primary) 45%, transparent); }
.wall-card.is-dim { opacity: 0.7; }
.wall-card.is-locked { background: var(--kc-surface-container-low); border: 1px dashed #c9cfe6; box-shadow: none; }
.wall-card-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.wall-card-title { font-size: 18px; font-weight: 600; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.wall-card-kind { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 4px; font-size: 13px; font-weight: 600; color: #6b7a89; }
.wall-card-pin { display: inline-flex; align-items: center; gap: 2px; color: var(--kc-primary); }
.wall-card-pin .material-symbols-outlined { font-size: 16px; font-variation-settings: "FILL" 1; }
.wall-card-text { font-size: 14px; line-height: 1.6; color: #6b7a89; margin-top: 12px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.wall-card-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 16px; font-size: 12.5px; color: #6b7a89; }
.wall-card-due { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; color: var(--color-tinta); }
.wall-card-due .material-symbols-outlined { font-size: 16px; }
.wall-card-status { font-weight: 600; padding: 3px 10px; border-radius: 999px; background: #f1f3f5; color: var(--color-tinta); }
.wall-card-status.is-todo { background: #fff1e1; color: #8a4b00; }
.wall-card-status.is-done { background: #e3f5ea; color: #1f7a44; }
.wall-card-chevron { align-self: center; font-size: 26px; color: #9aa5b1; transition: transform 0.15s, color 0.15s; }
a.wall-card:hover .wall-card-chevron { color: var(--kc-primary); transform: translateX(3px); }
.wall-kind-tile { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 52px; height: 52px; border-radius: 14px; color: #fff; background: linear-gradient(135deg, #ff9a4d, #ff6115); box-shadow: 0 4px 12px -4px rgba(255, 97, 21, 0.45); }
.wall-kind-tile .material-symbols-outlined { font-size: 28px; font-variation-settings: "FILL" 1, "wght" 500, "opsz" 40; }
.wall-kind-tile.is-lg { width: 60px; height: 60px; border-radius: 16px; }
.wall-kind-tile.is-lg .material-symbols-outlined { font-size: 32px; }
.wall-card.is-locked .wall-kind-tile { background: #d9d4c8; box-shadow: none; }

.wall-detail { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.wall-detail-card { padding: 22px 24px; border-radius: 14px; margin: 0; min-width: 0; }
.wall-detail-head { display: flex; gap: 18px; align-items: center; }
.wall-detail-title { font-size: 22px; font-weight: 600; line-height: 1.25; margin: 0 0 4px; overflow-wrap: anywhere; }
.wall-detail-kind { margin: 0; font-size: 13px; color: #6b7a89; }
.wall-detail-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 0; }
.wall-detail-body { margin-top: 16px; display: flex; flex-direction: column; gap: 10px; }
.wall-post-text { margin: 0; line-height: 1.65; overflow-wrap: anywhere; }
.wall-post-text p { margin: 0 0 0.8em; }
.wall-post-text p:last-child { margin-bottom: 0; }
.wall-embed { position: relative; width: 100%; padding-top: 56.25%; border-radius: 12px; overflow: hidden; background: #000; }
.wall-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.wall-link { display: flex; gap: 10px; align-items: center; border: 1px solid var(--color-linea); border-radius: 10px; padding: 0.6rem 0.8rem; text-decoration: none; color: inherit; background: var(--color-fondo); min-width: 0; }
.wall-link:hover { border-color: var(--kc-primary); }
.wall-link > .material-symbols-outlined { font-size: 20px; color: var(--kc-primary); }
.wall-link span span { display: block; font-size: 13px; color: #6b7a89; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wall-link strong { display: block; font-size: 14px; }
.wall-detail-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 20px -24px -22px; padding: 14px 24px; border-top: 1px solid var(--color-linea); }
.wall-detail-actions .espacio { flex: 1; }

/* Entregas y revisión */
.entregas { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--color-linea); display: flex; flex-direction: column; gap: 12px; }
.entregas h3 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 16px; }
.entregas h3 .material-symbols-outlined { font-size: 20px; color: var(--kc-primary); }
.entrega { border: 1px solid var(--color-linea); border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.entrega-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.entrega-head strong { font-size: 15px; }
.entrega-head .espacio { flex: 1; }
.entrega-texto { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14.5px; line-height: 1.6; }
.revision { background: var(--color-fondo); border-radius: 10px; padding: 10px 12px; font-size: 14px; display: flex; flex-direction: column; gap: 4px; }
.revision strong { font-size: 13px; }
.nota { font-size: 20px; font-weight: 800; }
.asignar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14px; }
.asignar select { border: 1.5px solid #e2dccf; border-radius: 10px; padding: 0.45rem 0.6rem; font: inherit; font-size: 14px; background: #fff; max-width: 100%; }

/* Participantes */
.participantes { display: flex; flex-direction: column; gap: 18px; }
.grupo h3 { margin: 0 0 8px; font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-tinta-suave); }
.persona { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--color-linea); min-width: 0; }
.persona:first-of-type { border-top: none; }
.persona-id { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.persona-id strong { font-size: 15px; overflow-wrap: anywhere; }
.persona-id small { font-size: 13px; color: var(--color-tinta-suave); overflow-wrap: anywhere; }

@media (max-width: 640px) {
  .wall-cards { gap: 14px; }
  .wall-card { gap: 14px; padding: 18px 16px; }
  .wall-card-chevron { display: none; }
  .wall-kind-tile { width: 44px; height: 44px; border-radius: 12px; }
  .wall-kind-tile .material-symbols-outlined { font-size: 24px; }
  .wall-card-title { font-size: 16px; }
  .wall-detail-card { padding: 18px 16px; }
  .wall-detail-actions { margin: 18px -16px -18px; padding: 12px 16px; }
}

/* ------------------------------------------------- Ventana «Nuevo curso»
   Como las ventanas de la app (.app-portal-dialog, .profile-modal): fondo
   oscurecido, caja blanca de esquinas de 20 px y la X arriba a la derecha. A la
   derecha, el cuadro del curso tal como quedará en Cursos. En el teléfono ocupa
   toda la pantalla y la vista previa se omite. */

html.dlg-abierto { overflow: hidden; }

.dlg { width: min(960px, calc(100% - 32px)); max-width: none; max-height: calc(100dvh - 48px); margin: auto; padding: 0; overflow: hidden; border: none; border-radius: 20px; background: #fff; color: var(--kc-text); box-shadow: 0 24px 60px rgba(15, 23, 36, 0.3); animation: motion-rise var(--motion-fast) var(--motion-ease) backwards; }
.dlg::backdrop { background: rgba(15, 23, 36, 0.45); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); animation: motion-fade var(--motion-fast) ease-out backwards; }
@keyframes motion-fade { from { opacity: 0; } to { opacity: 1; } }
.dlg-caja { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 330px; grid-template-rows: minmax(0, 1fr) auto; max-height: calc(100dvh - 48px); }
.dlg-head { padding-right: 28px; }
.dlg-head h2 { margin: 0; font-size: 24px; font-weight: 700; line-height: 32px; letter-spacing: -0.015em; }
.dlg-head p { margin: 4px 0 0; color: var(--kc-text-muted); font-size: 14px; line-height: 20px; }
.dlg-cerrar { position: absolute; top: 14px; right: 14px; display: inline-flex; padding: 6px; border: none; border-radius: 999px; background: transparent; color: #6b7a89; cursor: pointer; transition: background-color var(--motion-fast) ease, color var(--motion-fast) ease; }
.dlg-cerrar:hover { background: rgba(19, 27, 46, 0.06); color: var(--kc-text); }
.dlg-cerrar:focus-visible { outline: 2px solid var(--kc-primary); outline-offset: 2px; }
.dlg-pie { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; padding: 14px 24px; border-top: 1px solid var(--kc-border); background: #fff; }
.dlg-pie-nota { flex: 1; margin: 0; color: var(--kc-text-muted); font-size: 13px; }
.dlg-pie .espacio { flex: 1; }
.dlg-pie .btn { min-height: 44px; padding: 0.55rem 1.15rem; }
.dlg-pie .btn-primario:disabled { opacity: 0.45; box-shadow: none; cursor: not-allowed; }

.nc-campos { display: flex; flex-direction: column; gap: 18px; min-height: 0; padding: 28px 28px 24px; overflow-y: auto; }
.nc .campo > span small { margin-left: 6px; padding: 1px 8px; border-radius: 999px; background: var(--kc-surface-container-high); color: var(--kc-text-muted); font-size: 11.5px; font-weight: 600; }
.nc-nombre input { min-height: 54px; padding: 0.8rem 1rem; font-size: 18px; font-weight: 600; }
.nc textarea { min-height: 84px; resize: none; }
.nc-cuenta { align-self: flex-end; margin-top: -2px; color: #8a90a6; font-size: 12px; }
.nc-fechas { display: flex; flex-direction: column; gap: 14px; min-width: 0; margin: 4px 0 0; padding: 18px 0 0; border: none; border-top: 1px solid var(--kc-border); }
.nc-fechas legend { float: left; width: 100%; margin: 0 0 14px; padding: 0; font-size: 15px; font-weight: 700; }
.nc-fechas legend + * { clear: both; }
.nc-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.nc-chip { min-height: 38px; padding: 0.4rem 0.9rem; border: 1px solid var(--kc-border); border-radius: 999px; background: #fff; color: var(--kc-text); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; transition: background-color var(--motion-fast) ease, border-color var(--motion-fast) ease, color var(--motion-fast) ease, transform var(--motion-fast) var(--motion-ease); }
.nc-chip:hover { border-color: #c9cfe6; background: var(--kc-surface-container-low); }
.nc-chip:active { transform: scale(0.96); }
.nc-chip[aria-checked="true"] { border-color: var(--kc-primary); background: var(--kc-primary); color: #fff; }
.nc-chip:focus-visible { outline: 2px solid var(--kc-primary); outline-offset: 2px; }
.nc-resumen { display: flex; align-items: center; gap: 8px; margin: 0; padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, var(--world-curso-b) 6%, #fff); color: var(--kc-text); font-size: 13.5px; font-weight: 500; }
.nc-resumen .material-symbols-outlined { flex: none; color: var(--world-curso-b); font-size: 19px; }

.nc-vista { display: flex; flex-direction: column; gap: 14px; min-height: 0; padding: 64px 24px 28px; overflow-y: auto; border-left: 1px solid var(--kc-border); background: linear-gradient(180deg, #f6f7ff 0%, #eef0fd 100%); }
.nc-vista-titulo { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 3px 10px; border-radius: 12px; background: #fff; color: var(--kc-text-muted); font-size: 11px; font-weight: 500; line-height: 14px; letter-spacing: 0.05em; text-transform: uppercase; }
.nc-vista-titulo::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--kc-primary); }
.nc-vista-nota { margin: 0; color: var(--kc-text-muted); font-size: 13px; line-height: 19px; }
.course-world.is-vista { box-shadow: 0 14px 34px -16px rgba(31, 63, 102, 0.35), var(--kc-shadow-sm); }
.course-world-title.is-vacio { color: #a3a9bd; }

@media (max-width: 860px) {
  .dlg-caja { grid-template-columns: minmax(0, 1fr); }
  .nc-vista { display: none; }
}

@media (max-width: 640px) {
  .dlg { width: 100%; height: 100dvh; max-height: 100dvh; border-radius: 0; }
  .dlg-caja { height: 100dvh; max-height: 100dvh; }
  .nc-campos { padding: 20px 16px; }
  .dlg-pie { padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); }
  .dlg-pie-nota { display: none; }
  .dlg-pie .btn { flex: 1; }
}

/* ------------------------------------------------------- Evaluaciones
   Pestaña del curso (public/evaluaciones.js): lista con la ponderación,
   resumen de notas, tabla de especificaciones, registro por estudiante y
   escala. Colores de evaluación: uno por posición, solo para distinguirlas. */

.ev-color-0 { --ev: #ff6115; --ev-a: #ff9a4d; }
.ev-color-1 { --ev: #1f6fe0; --ev-a: #5cb3ff; }
.ev-color-2 { --ev: #12955a; --ev-a: #3fcf8e; }
.ev-color-3 { --ev: #7b4bd6; --ev-a: #a98bf0; }
.ev-color-4 { --ev: #0e8a8a; --ev-a: #3cc6c0; }
.ev-color-5 { --ev: #c2410c; --ev-a: #f59e0b; }

.ev-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 20px; margin-bottom: 16px; }
.ev-head p { margin: 4px 0 0; }
.ev-h2 { margin: 0; font-size: 24px; font-weight: 600; line-height: 32px; letter-spacing: -0.015em; }

.ev-pond { padding: 16px 18px; margin-bottom: 18px; }
.ev-pond-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 16px; margin-bottom: 10px; font-size: 14px; }
.ev-pond-lista { display: inline-flex; align-items: center; gap: 4px; color: var(--kc-success, #0f7a55); font-weight: 600; }
.ev-pond-lista .material-symbols-outlined { font-size: 18px; }
.ev-pond-barra { display: flex; gap: 3px; height: 10px; overflow: hidden; border-radius: 999px; background: var(--kc-surface-container-low); }
.ev-pond-barra span { min-width: 4px; background: linear-gradient(90deg, var(--ev-a), var(--ev)); }
.ev-pond-leyenda { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 12px 0 0; padding: 0; list-style: none; font-size: 13px; color: var(--kc-text-muted); }
.ev-pond-leyenda li { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.ev-pond-leyenda strong { color: var(--kc-text); }
.ev-punto { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--ev); }

.ev-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(360px, 100%), 1fr)); gap: 14px; }
.ev-card { display: flex; align-items: center; gap: 16px; min-width: 0; padding: 18px 20px; border-radius: 16px; color: inherit; text-decoration: none; transition: border-color 0.15s, box-shadow 0.2s, transform 0.2s; }
a.ev-card:hover { border-color: color-mix(in srgb, var(--kc-primary) 40%, transparent); box-shadow: 0 12px 28px -14px rgba(19, 27, 46, 0.3); transform: translateY(-2px); }
a.ev-card:focus-visible { outline: 2px solid var(--kc-primary); outline-offset: 2px; }
.ev-card-tile { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 14px; background: linear-gradient(135deg, var(--ev-a), var(--ev)); color: #fff; box-shadow: 0 8px 18px -10px var(--ev); }
.ev-card-tile .material-symbols-outlined { font-size: 26px; font-variation-settings: "FILL" 1; }
.ev-card-body { display: flex; flex: 1; flex-direction: column; gap: 3px; min-width: 0; }
.ev-card-title { font-size: 16.5px; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.ev-card-meta { color: var(--kc-text-muted); font-size: 13px; }
.ev-card-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; }
.ev-card-prom { display: flex; flex: none; flex-direction: column; align-items: center; min-width: 58px; }
.ev-card-prom small { color: var(--kc-text-muted); font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.ev-card-prom strong { font-size: 26px; font-weight: 700; line-height: 1.1; }
.ev-card-prom.is-ok strong, .ev-n.is-ok, .ev-mi-nota.is-ok, .rg-nota.is-ok strong, strong.is-ok { color: #0f7a55; }
.ev-card-prom.is-mal strong, .ev-n.is-mal, .ev-mi-nota.is-mal, .rg-nota.is-mal strong, strong.is-mal { color: #ba1a1a; }
.ev-pdf { display: inline-flex; align-items: center; gap: 4px; color: var(--kc-primary-text); font-size: 13px; font-weight: 700; text-decoration: none; }
.ev-pdf:hover { text-decoration: underline; }
.ev-pdf .material-symbols-outlined { font-size: 18px; }
.ev-sin-est { display: flex; align-items: center; gap: 6px; margin: 18px 0 0; }

.ev-resumen { margin-top: 18px; padding: 18px 20px; }
.ev-resumen-head h3 { margin: 0; font-size: 17px; }
.ev-resumen-head p { margin: 2px 0 12px; font-size: 13px; }
.ev-tabla-caja { overflow-x: auto; }
.ev-tabla { width: 100%; border-collapse: collapse; font-size: 14px; }
.ev-tabla th, .ev-tabla td { padding: 9px 10px; border-bottom: 1px solid var(--kc-border); text-align: center; white-space: nowrap; }
.ev-tabla thead th { color: var(--kc-text-muted); font-size: 12px; font-weight: 600; vertical-align: bottom; }
.ev-tabla thead th span { display: block; max-width: 140px; overflow: hidden; text-overflow: ellipsis; margin: 0 auto; }
.ev-tabla thead th small { display: block; font-weight: 500; }
.ev-tabla th[scope="row"], .ev-tabla thead th:first-child { text-align: left; font-weight: 600; color: var(--kc-text); }
.ev-tabla tbody tr:last-child th, .ev-tabla tbody tr:last-child td { border-bottom: none; }
.ev-tabla td:last-child, .ev-tabla thead th:last-child { background: var(--kc-surface-container-low); }
.ev-n { font-weight: 700; }
.ev-n-aus { color: var(--kc-text-muted); font-size: 12px; }
.ev-parcial { display: block; color: var(--kc-text-muted); font-size: 11px; }
.ev-resumen-lista { display: none; margin: 0; padding: 0; list-style: none; }
.ev-resumen-lista li { padding: 12px 0; border-bottom: 1px solid var(--kc-border); }
.ev-resumen-lista li:last-child { border-bottom: none; }
.ev-rl-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 15px; }
.ev-rl-top .ev-n { font-size: 18px; }
.ev-rl-notas { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 4px; color: var(--kc-text-muted); font-size: 13px; }
@media (max-width: 720px) {
  .ev-tabla-caja { display: none; }
  .ev-resumen-lista { display: block; }
}

.ev-mi-final { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; padding: 18px 20px; }
.ev-mi-final p { margin: 0; }
.ev-mi-final .ev-pdf { margin-top: 8px; }
.ev-mi-nota { font-size: 40px; font-weight: 700; line-height: 1; }

/* Detalle */
.ev-det-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px 20px; margin: 12px 0 16px; }
.ev-det-id { min-width: 0; }
.ev-det-titulo { margin: 0; font-size: 26px; font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.ev-det-meta { margin: 6px 0 0; color: var(--kc-text-muted); font-size: 13.5px; line-height: 20px; }
.ev-det-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ev-seg { display: inline-flex; max-width: 100%; margin-bottom: 16px; padding: 4px; overflow-x: auto; scrollbar-width: none; border-radius: 12px; background: var(--kc-surface-container-high); }
.ev-seg::-webkit-scrollbar { display: none; }
.ev-seg button { flex: none; padding: 8px 14px; border: none; border-radius: 9px; background: transparent; color: var(--kc-text-muted); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; transition: background-color var(--motion-fast) ease, color var(--motion-fast) ease; }
.ev-seg button:hover { color: var(--kc-text); }
.ev-seg button[aria-selected="true"] { background: #fff; color: var(--kc-text); box-shadow: var(--kc-shadow-sm); }
.ev-seg button:focus-visible { outline: 2px solid var(--kc-primary); outline-offset: 1px; }
.ev-seg-corto { display: none; }
@media (max-width: 560px) {
  .ev-seg { display: flex; }
  .ev-seg button { flex: 1; }
  .ev-seg-largo { display: none; }
  .ev-seg-corto { display: inline; }
}

/* Ventanas de evaluación y registro (una columna) */
.dlg-angosto { width: min(660px, calc(100% - 32px)); }
.dlg-angosto .dlg-caja { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 640px) { .dlg-angosto { width: 100%; } }
.ef-campos { display: flex; flex-direction: column; gap: 16px; min-height: 0; padding: 28px 28px 22px; overflow-y: auto; }
.ef-sufijo { position: relative; display: block; }
.ef-sufijo input { padding-right: 2.2rem; }
.ef-sufijo b { position: absolute; top: 50%; right: 0.9rem; transform: translateY(-50%); color: var(--kc-text-muted); font-weight: 600; pointer-events: none; }
.ef-rapidas { margin-top: -6px; }
.ef-ayuda { margin: -8px 0 0; color: var(--kc-text-muted); font-size: 13px; }
.ef-ayuda:empty { display: none; }
.ef-escala { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 560px) { .ef-escala { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.nc-chip[aria-pressed="true"] { border-color: var(--kc-primary); background: var(--kc-primary); color: #fff; }

/* Tabla de especificaciones */
.te { padding: 18px 20px; }
.te-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; margin-bottom: 14px; }
.te-resumen { display: flex; flex-wrap: wrap; gap: 6px; }
.te-resumen span { padding: 4px 10px; border-radius: 999px; background: var(--kc-surface-container-low); font-size: 13px; }
.te-cols { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.te-cols > span { margin-right: 4px; color: var(--kc-text-muted); font-size: 13px; font-weight: 600; }
.te-cols .nc-chip { min-height: 32px; padding: 0.25rem 0.75rem; font-size: 13px; }
.te-aviso { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; padding: 0.6rem 0.8rem; border-radius: 10px; background: #fff7ed; color: #9a3412; font-size: 13.5px; }
.te-aviso[hidden] { display: none; }
.te-aviso .material-symbols-outlined { font-size: 18px; }
.te-vacia { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 28px 16px; color: var(--kc-text-muted); text-align: center; }
.te-vacia > .material-symbols-outlined { font-size: 36px; color: var(--kc-primary); }
.te-vacia p { max-width: 52ch; margin: 0; }

.te-tabla { overflow-x: auto; margin: 0 -4px; padding: 0 4px 4px; }
.te-fila { display: grid; grid-template-columns: var(--te-cols); align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--kc-border); }
.te-fila > * { min-width: 0; }
.te-cab { padding: 0 0 8px; color: var(--kc-text-muted); font-size: 12px; font-weight: 600; }
.te-n { color: var(--kc-text-muted); font-weight: 700; text-align: center; }
.te-l { display: none; }
.te-c { display: flex; align-items: center; gap: 8px; }
.te-c input, .te-c select, .te-varias input, .te-varias select { width: 100%; min-width: 0; min-height: 40px; padding: 0.45rem 0.65rem; border: 1px solid transparent; border-radius: 10px; background: var(--kc-surface-container-low); color: var(--kc-text); font: inherit; font-size: 14.5px; transition: border-color var(--motion-fast) ease, box-shadow var(--motion-fast) ease, background-color var(--motion-fast) ease; }
.te-c input:hover, .te-c select:hover { background: #eceefd; }
.te-c input:focus, .te-c select:focus, .te-varias input:focus, .te-varias select:focus { outline: none; border-color: var(--kc-primary); background: #fff; box-shadow: 0 0 0 3px rgba(255, 97, 21, 0.14); }
.te-c input.is-mal { border-color: #ba1a1a; background: #fcebea; }
.te-clave { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.te-clave select { width: auto; min-height: 36px; padding: 0.3rem 0.5rem; font-size: 13px; }
.te-letras { display: inline-flex; gap: 4px; }
.te-letras button { width: 34px; height: 34px; border: 1px solid var(--kc-border); border-radius: 9px; background: #fff; color: var(--kc-text); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; transition: background-color var(--motion-fast) ease, border-color var(--motion-fast) ease, color var(--motion-fast) ease; }
.te-letras button:hover { border-color: #c9cfe6; background: var(--kc-surface-container-low); }
.te-letras button[aria-pressed="true"] { border-color: #0f7a55; background: #0f7a55; color: #fff; }
.te-letras button:focus-visible { outline: 2px solid var(--kc-primary); outline-offset: 1px; }
.te-nota { display: inline-flex; align-items: center; gap: 4px; color: var(--kc-text-muted); font-size: 13px; }
.te-nota .material-symbols-outlined { font-size: 17px; color: var(--kc-primary); }
.te-falta { color: #9a3412; font-size: 13px; font-weight: 600; }
.te-acciones { display: flex; justify-content: flex-end; gap: 2px; }
.te-acciones button { display: inline-flex; padding: 6px; border: none; border-radius: 8px; background: transparent; color: #8a90a6; cursor: pointer; }
.te-acciones button:hover { background: var(--kc-surface-container-low); color: var(--kc-text); }
.te-acciones button[data-accion="quitar"]:hover { background: #fcebea; color: #ba1a1a; }
.te-acciones .material-symbols-outlined { font-size: 19px; }
.te-fila.is-fija { min-height: 44px; font-size: 14px; }
/* Incisos: van corridos bajo su pregunta de desarrollo (3a, 3b…). */
.te-fila:has(+ .te-fila.is-inciso) { border-bottom-style: dashed; }
.te-fila.is-inciso { background: linear-gradient(90deg, var(--kc-surface-container-low), transparent 70%); }
.te-fila.is-inciso .te-n { color: var(--kc-text); }
.te-acciones button[data-accion="inciso"] { color: var(--kc-primary); }

/* Ítems de la tabla: cada uno, un bloque con su encabezado y sus preguntas. */
.te-ajustes { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.te-numeracion { display: inline-flex; align-items: center; gap: 8px; color: var(--kc-text-muted); font-size: 13px; font-weight: 600; }
.te-numeracion select { min-height: 34px; padding: 0.3rem 0.6rem; border: 1px solid var(--kc-border); border-radius: 10px; background: #fff; color: var(--kc-text); font: inherit; font-size: 13px; }
.te-sec { margin-top: 16px; padding: 14px 16px 12px; border: 1px solid var(--kc-border); border-radius: 14px; background: #fff; }
.te-sec-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin-bottom: 8px; }
.te-sec-id { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-width: 0; }
.te-sec-num { padding: 3px 10px; border-radius: 999px; background: var(--kc-charcoal); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: 0.03em; }
.te-sec-tipo { font-size: 16px; }
.te-sec-opc, .te-sec-id select { display: inline-flex; align-items: center; gap: 6px; color: var(--kc-text-muted); font-size: 13px; font-weight: 600; }
.te-sec-id select { min-height: 32px; padding: 0.2rem 0.5rem; border: 1px solid var(--kc-border); border-radius: 9px; background: #fff; color: var(--kc-text); font: inherit; font-size: 13px; }
.te-sec-sub { color: var(--kc-text-muted); font-size: 13px; }
.te-sec-inicio { display: inline-flex; align-items: center; gap: 6px; color: var(--kc-text-muted); font-size: 13px; font-weight: 600; }
.te-sec-inicio input { width: 56px; min-height: 32px; padding: 0.2rem 0.4rem; border: 1px solid var(--kc-border); border-radius: 9px; background: #fff; color: var(--kc-text); font: inherit; font-size: 13px; text-align: center; }
.te-sec-inicio input:focus { outline: none; border-color: var(--kc-primary); box-shadow: 0 0 0 3px rgba(255, 97, 21, 0.14); }
.te-sec-titulo { flex-basis: 100%; min-height: 38px; padding: 0.4rem 0.7rem; border: 1px solid transparent; border-radius: 10px; background: var(--kc-surface-container-low); color: var(--kc-text); font: inherit; font-size: 14px; }
.te-sec-titulo:focus { outline: none; border-color: var(--kc-primary); background: #fff; box-shadow: 0 0 0 3px rgba(255, 97, 21, 0.14); }
.te-sec-titulo-fijo { flex-basis: 100%; margin: 0; color: var(--kc-text-muted); font-size: 13.5px; }
.te-sec-vacia { margin: 6px 0; color: var(--kc-text-muted); font-size: 13.5px; }
.te-sec-pie { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin-top: 10px; }
.te-sec-pie .btn { min-height: 36px; padding: 0.35rem 0.8rem; font-size: 13px; }
.te-varias { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--kc-text-muted); font-size: 13.5px; }
.te-varias input { width: 58px; min-height: 36px; padding: 0.3rem 0.4rem; text-align: center; }
.te-clave-sel { width: auto !important; min-width: 84px; }
.te-sec .te-tabla { margin-top: 4px; }

.te-nuevo { margin-top: 18px; padding: 16px; border: 1.5px dashed #c9cfe6; border-radius: 14px; background: var(--kc-surface-container-low); }
.te-nuevo h4 { display: flex; align-items: center; gap: 6px; margin: 0 0 10px; font-size: 15px; }
.te-nuevo h4 .material-symbols-outlined { font-size: 20px; color: var(--kc-primary); }
.te-nuevo-ayuda { margin: 8px 0 0; color: var(--kc-text-muted); font-size: 13px; }
.te-nuevo-campos { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin-top: 12px; }
.te-nuevo-campos .campo { width: 150px; }
.te-nuevo-campos .campo input, .te-nuevo-campos .campo select { background: #fff; }

#te-dims:not(:empty) { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr)); gap: 14px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--kc-border); }
.te-dim h4 { margin: 0 0 8px; font-size: 14px; }
.te-dim table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.te-dim th, .te-dim td { padding: 6px 4px; border-bottom: 1px solid var(--kc-border); text-align: right; }
.te-dim th:first-child, .te-dim td:first-child { text-align: left; overflow-wrap: anywhere; }
.te-dim td:last-child { white-space: nowrap; }
.te-dim th { color: var(--kc-text-muted); font-size: 12px; font-weight: 600; }
.te-barrita { display: inline-block; width: 46px; height: 6px; margin-right: 8px; overflow: hidden; vertical-align: middle; border-radius: 999px; background: var(--kc-surface-container-high); }
.te-barrita i { display: block; height: 100%; background: var(--world-curso-b); }

.te-barra { position: sticky; bottom: 12px; z-index: 10; display: flex; align-items: center; gap: 10px; margin-top: 14px; padding: 10px 12px 10px 16px; border-radius: 14px; background: var(--kc-charcoal); color: #fff; box-shadow: 0 16px 36px -14px rgba(15, 23, 36, 0.55); animation: motion-rise var(--motion-fast) var(--motion-ease) backwards; }
.te-barra[hidden] { display: none; }
.te-barra > span:first-child { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; }
.te-barra .material-symbols-outlined { font-size: 18px; color: var(--kc-primary); }
.te-barra .espacio { flex: 1; }
.te-barra .btn-secundario { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.3); }
.te-barra .btn-secundario:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.5); }

@media (max-width: 760px) {
  .te { padding: 14px; }
  .te-cab { display: none; }
  .te-fila { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px 12px; margin-bottom: 10px; padding: 12px; border: 1px solid var(--kc-border); border-radius: 12px; }
  .te-n { grid-column: 1; text-align: left; }
  .te-n::before { content: "Pregunta "; }
  .te-acciones { grid-column: 2; grid-row: 1; }
  .te-c { grid-column: 1 / -1; flex-direction: column; align-items: stretch; gap: 4px; }
  .te-c.is-medio { grid-column: auto; }
  .te-l { display: block; color: var(--kc-text-muted); font-size: 12px; font-weight: 600; }
  .te-fila.is-fija .te-acciones { display: none; }
  .te-barra { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); flex-wrap: wrap; }
  .te-barra > span:first-child { flex-basis: 100%; }
  .te-barra .espacio { display: none; }
  .te-barra .btn { flex: 1; }
}

/* Escala */
.ev-escala { padding: 18px 20px; }
.ev-escala-top { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 10px 20px; margin-bottom: 14px; }
.ev-escala-top h3 { margin: 0; font-size: 17px; }
.ev-escala-top p { margin: 4px 0 0; max-width: 70ch; font-size: 13.5px; }
.ev-escala-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; }
.ev-escala-fila { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; padding: 6px 10px; border-radius: 9px; font-size: 13.5px; }
.ev-escala-fila span { color: var(--kc-text-muted); }
.ev-escala-fila.is-ok { background: #eef8f3; }
.ev-escala-fila.is-ok strong { color: #0f7a55; }
.ev-escala-fila.is-mal { background: #fdf2f1; }
.ev-escala-fila.is-mal strong { color: #ba1a1a; }
.ev-escala-fila.is-corte { outline: 2px solid #0f7a55; outline-offset: -2px; }
.ev-escala-nota { margin: 12px 0 0; font-size: 12.5px; }

/* Registro */
.ev-kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(170px, 100%), 1fr)); gap: 12px; margin-bottom: 14px; }
.ev-kpis > .card { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; }
.ev-kpis > .ev-kpi-pdf { flex-direction: row; }
.ev-kpis small { color: var(--kc-text-muted); font-size: 11px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; }
.ev-kpis strong { font-size: 24px; font-weight: 700; line-height: 1.2; }
.ev-kpis strong span { color: var(--kc-text-muted); font-size: 14px; font-weight: 500; }
.ev-kpi-pdf { flex-direction: row; align-items: center; gap: 12px; color: inherit; font: inherit; text-align: left; text-decoration: none; cursor: pointer; transition: border-color 0.15s, transform 0.15s; }
.ev-kpi-pdf:hover { border-color: color-mix(in srgb, var(--kc-primary) 40%, transparent); transform: translateY(-1px); }
.ev-kpi-pdf > .material-symbols-outlined { font-size: 30px; color: var(--kc-primary); }
.ev-kpi-pdf span { display: flex; flex-direction: column; }
.ev-kpi-pdf strong { font-size: 15px; }
.ev-kpi-pdf small { font-size: 12px; font-weight: 500; letter-spacing: 0; text-transform: none; }
.ev-kpi-pdf.is-excel > .material-symbols-outlined { color: #12955a; }
.campo-ayuda { margin: -6px 0 0; color: var(--kc-text-muted); font-size: 12.5px; }
.ev-kpi-pdf.is-correo > .material-symbols-outlined { color: #1f6fe0; }

/* Envío de la retroalimentación por correo */
.en-conectar { display: flex; align-items: flex-start; gap: 14px; padding: 16px; border-radius: 14px; background: var(--kc-surface-container-low); }
.en-conectar p { margin: 4px 0 0; color: var(--kc-text-muted); font-size: 14px; line-height: 20px; }
.en-icono { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; background: linear-gradient(135deg, #5cb3ff, #1f6fe0); color: #fff; }
.en-icono .material-symbols-outlined { font-size: 24px; font-variation-settings: "FILL" 1; }
.en-de { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--kc-surface-container-low); font-size: 14px; }
.en-de .material-symbols-outlined { font-size: 18px; color: #1f6fe0; }
.en-enlace { padding: 0; border: none; background: none; color: var(--kc-primary-text); font: inherit; font-weight: 600; cursor: pointer; }
.en-enlace:hover { text-decoration: underline; }
.en-ayuda { margin-top: 2px; }
.en-marcar { margin-left: 8px; font-size: 13px; font-weight: 500; color: var(--kc-text-muted); }
.en-bien { display: inline-flex; align-items: center; gap: 2px; color: #0f7a55 !important; font-weight: 600 !important; }
.en-bien .material-symbols-outlined { font-size: 15px; }
.en-mal { color: #ba1a1a !important; font-weight: 600; }
.en-sin { margin: 6px 0 0; font-size: 13px; }
.en-avance { display: flex; flex-direction: column; gap: 10px; padding: 8px 0; }
.en-avance p { margin: 0; }
.en-barra { height: 10px; overflow: hidden; border-radius: 999px; background: var(--kc-surface-container-high); }
.en-barra i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #ff9a4d, #ff6115); transition: width 0.4s ease; }
.en-resultado { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: 14px; }

/* Exportar a Excel: lista de evaluaciones para marcar */
.ex-lista { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; border: none; min-width: 0; }
.ex-legend { margin-bottom: 6px; padding: 0; font-size: 14px; font-weight: 700; }
.ex-item { align-items: flex-start; gap: 12px; padding: 10px 12px; border-radius: 12px; background: var(--kc-surface-container-low); font-weight: 500; }
.ex-item input { margin-top: 2px; flex: none; }
.ex-item span { display: flex; flex-direction: column; min-width: 0; }
.ex-item strong { overflow-wrap: anywhere; }
.ex-item small { color: var(--kc-text-muted); font-size: 12.5px; font-weight: 500; }
.ex-item.is-sin-correo { opacity: 0.6; cursor: default; }

.ev-nomina { padding: 6px 8px; }
.ev-nomina-cab, .ev-fila-btn { display: grid; grid-template-columns: 28px 36px minmax(0, 1fr) 96px 92px 28px; align-items: center; gap: 12px; }
.ev-nomina-cab { padding: 8px 12px 6px; color: var(--kc-text-muted); font-size: 12px; font-weight: 600; }
.ev-nomina-cab span:first-child { grid-column: 1 / 4; padding-left: 0; }
.ev-nomina-cab span:nth-child(2) { text-align: right; }
.ev-nomina-cab span:nth-child(3) { text-align: center; }
.ev-fila { display: flex; align-items: center; border-top: 1px solid var(--kc-border); }
.ev-fila-btn { flex: 1; min-width: 0; padding: 10px 12px; border: none; border-radius: 10px; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.ev-fila-btn:hover { background: var(--kc-surface-container-low); }
.ev-fila-btn:focus-visible { outline: 2px solid var(--kc-primary); outline-offset: -2px; }
.ev-fila-n { color: var(--kc-text-muted); font-size: 13px; text-align: center; }
.ev-fila-id { display: flex; flex-direction: column; min-width: 0; }
.ev-fila-id strong, .ev-fila-id small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ev-fila-id small { color: var(--kc-text-muted); font-size: 12.5px; }
.ev-fila-pts { font-weight: 600; text-align: right; }
.ev-fila-pts small { color: var(--kc-text-muted); font-weight: 500; }
.ev-fila-nota { text-align: center; }
.ev-fila-nota .ev-n { font-size: 18px; }
.ev-sin { color: var(--kc-text-muted); font-size: 12.5px; }
.ev-fila-ir { color: #9aa5b1; }
.ev-fila-ir .material-symbols-outlined { font-size: 20px; }
.ev-fila-pdf { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; color: var(--kc-primary); }
a.ev-fila-pdf:hover { background: #fff1e8; }
.ev-fila-pdf .material-symbols-outlined { font-size: 21px; }
@media (max-width: 640px) {
  .ev-nomina-cab { display: none; }
  .ev-fila-btn { grid-template-columns: 36px minmax(0, 1fr) auto 20px; gap: 10px; padding: 10px 6px; }
  .ev-fila-n, .ev-fila-pts { display: none; }
  .ev-fila-pdf { width: 36px; }
}

/* Ventana de registro */
.rg-cuerpo { display: flex; flex-direction: column; gap: 12px; min-height: 0; padding: 26px 28px 12px; overflow-y: auto; }
.rg-head { padding-right: 28px; }
.rg-eyebrow { margin: 0 0 2px !important; color: var(--kc-text-muted); font-size: 12px !important; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.rg-ausente { align-self: flex-start; padding: 8px 12px; border-radius: 10px; background: var(--kc-surface-container-low); }
.rg-ayuda { display: flex; align-items: center; gap: 6px; margin: 0; color: var(--kc-text-muted); font-size: 12.5px; }
.rg-ayuda .material-symbols-outlined { font-size: 18px; }
@media (hover: none) and (pointer: coarse) { .rg-ayuda { display: none; } }
.rg-lista { margin: 0; padding: 0; list-style: none; transition: opacity var(--motion-fast) ease; }
.rg-lista.is-ausente { opacity: 0.4; pointer-events: none; }
.rg-fila { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto 26px; align-items: center; gap: 12px; padding: 10px 4px; border-bottom: 1px solid var(--kc-border); }
.rg-fila:last-child { border-bottom: none; }
.rg-fila.is-inciso .rg-info { padding-left: 10px; border-left: 2px solid #ffd2bd; }
.rg-sec { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin-top: 14px; padding: 8px 10px; border-radius: 10px; background: var(--kc-surface-container-low); font-size: 14px; }
.rg-sec:first-child { margin-top: 0; }
.rg-sec small { color: var(--kc-text-muted); font-size: 12.5px; }
.rg-opciones.is-completacion button .material-symbols-outlined { font-size: 22px; }
.rg-opciones.is-completacion button[data-r="C"][aria-checked="true"] { border-color: #0f7a55; background: #0f7a55; }
.rg-opciones.is-completacion button[data-r="I"][aria-checked="true"] { border-color: #ba1a1a; background: #ba1a1a; }
.rg-fila:focus-within { background: linear-gradient(90deg, #fff6f0, transparent 70%); }
.rg-n { color: var(--kc-text-muted); font-weight: 700; text-align: center; }
.rg-info { display: flex; flex-direction: column; min-width: 0; }
.rg-info strong { font-size: 14px; }
.rg-info small { overflow: hidden; color: var(--kc-text-muted); font-size: 12.5px; text-overflow: ellipsis; white-space: nowrap; }
.rg-opciones { display: inline-flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.rg-opciones button { width: 42px; height: 42px; border: 1px solid var(--kc-border); border-radius: 11px; background: #fff; color: var(--kc-text); font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; transition: background-color var(--motion-fast) ease, border-color var(--motion-fast) ease, color var(--motion-fast) ease, transform var(--motion-fast) var(--motion-ease); }
.rg-opciones button:hover { border-color: #c9cfe6; background: var(--kc-surface-container-low); }
.rg-opciones button:active { transform: scale(0.94); }
.rg-opciones button[aria-checked="true"] { border-color: var(--kc-primary); background: var(--kc-primary); color: #fff; }
.rg-opciones button:focus-visible { outline: 2px solid var(--kc-primary); outline-offset: 2px; }
.rg-puntos { display: inline-flex; align-items: center; gap: 8px; }
.rg-puntos input { width: 76px; min-height: 42px; padding: 0.4rem 0.6rem; border: 1px solid transparent; border-radius: 11px; background: var(--kc-surface-container-low); color: var(--kc-text); font: inherit; font-size: 16px; font-weight: 700; text-align: center; }
.rg-puntos input:focus { outline: none; border-color: var(--kc-primary); background: #fff; box-shadow: 0 0 0 3px rgba(255, 97, 21, 0.14); }
.rg-puntos input.is-mal { border-color: #ba1a1a; background: #fcebea; }
.rg-puntos small { color: var(--kc-text-muted); font-size: 13px; white-space: nowrap; }
.rg-marca { display: inline-flex; justify-content: center; }
.rg-marca .material-symbols-outlined { font-size: 22px; font-weight: 700; }
.rg-bien { color: #0f7a55; }
.rg-mal { color: #ba1a1a; }
.rg-sin { color: #9a3412; font-weight: 700; }
.rg-comentario { margin-top: 6px; padding-top: 14px; border-top: 1px solid var(--kc-border); }
.rg-comentario textarea { min-height: 76px; }
.rg-pie { flex-wrap: wrap; }
.rg-total { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; width: 100%; font-size: 14px; color: var(--kc-text-muted); }
.rg-total strong { color: var(--kc-text); font-size: 17px; }
.rg-nota { margin-left: auto; font-size: 15px; font-weight: 600; color: var(--kc-text); }
.rg-nota strong { font-size: 22px; }
.rg-pie .auth-error { width: 100%; }
.rg-pie .espacio { flex: 1; }
@media (max-width: 520px) {
  .rg-cuerpo { padding: 20px 16px 10px; }
  .rg-fila { grid-template-columns: 30px minmax(0, 1fr) 24px; row-gap: 8px; }
  .rg-opciones, .rg-puntos { grid-column: 2 / 3; grid-row: 2; justify-content: flex-start; }
  .rg-marca { grid-column: 3; grid-row: 1 / 3; }
  .rg-pie .btn-peligro { order: 9; width: 100%; }
}

/* Aviso flotante */
.aviso-flotante { position: fixed; bottom: 24px; left: 50%; z-index: 300; display: inline-flex; align-items: center; gap: 8px; max-width: calc(100% - 32px); padding: 10px 16px; border-radius: 12px; background: var(--kc-charcoal); color: #fff; box-shadow: 0 16px 36px -14px rgba(15, 23, 36, 0.55); font-size: 14px; font-weight: 500; transform: translateX(-50%); animation: aviso-entra var(--motion-fast) var(--motion-ease) backwards; transition: opacity 0.4s ease, transform 0.4s ease; }
.aviso-flotante .material-symbols-outlined { font-size: 20px; color: #3fcf8e; }
.aviso-flotante.is-saliendo { opacity: 0; transform: translate(-50%, 8px); }
@keyframes aviso-entra { from { opacity: 0; transform: translate(-50%, 10px); } to { opacity: 1; transform: translateX(-50%); } }
@media (max-width: 767px) { .aviso-flotante { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); } }

/* En pantallas táctiles los campos van a 16 px: con menos, el iPhone hace zoom al tocarlos y deja la vista corrida. */
@media (hover: none) and (pointer: coarse) {
  .campo input, .campo textarea, .campo select, .buscador input, .te-c input, .te-c select, .te-varias input, .te-varias select, .te-sec-inicio input, .te-sec-titulo { font-size: 16px; }
}

/* ----------------------------------------------------------- Proyectos */

.pronto { display: flex; flex-direction: column; align-items: center; gap: 10px; max-width: 640px; padding: 48px 24px; text-align: center; }
.pronto h2 { margin: 6px 0 0; font-size: 20px; font-weight: 600; }
.pronto p { margin: 0; max-width: 44ch; color: var(--kc-text-muted); }

/* ----------------------------------------------------------- Membresía
   Página de planes clásica: tres columnas con nombre, precio, botón y lo que
   incluye; la del medio, destacada. */

.planes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: stretch; margin-top: 28px; }
.plan { position: relative; display: flex; flex-direction: column; gap: 18px; min-width: 0; padding: 28px 26px; border-radius: 20px; }
.plan.is-destacado { border: 2px solid var(--kc-primary); box-shadow: 0 18px 40px -22px rgba(255, 97, 21, 0.55); }
.plan-cinta { position: absolute; top: -12px; left: 24px; padding: 3px 12px; border-radius: 999px; background: var(--kc-primary); color: #fff; font-size: 12px; font-weight: 700; line-height: 18px; }
.plan-head h2 { margin: 0; font-size: 22px; font-weight: 700; line-height: 28px; }
.plan-head p { margin: 4px 0 0; color: var(--kc-text-muted); }
.plan-precio { margin: 0; }
.plan-precio strong { font-size: 36px; font-weight: 700; line-height: 44px; letter-spacing: -0.02em; }
.plan-precio strong.is-pendiente { color: var(--kc-text-muted); font-size: 24px; font-weight: 600; line-height: 44px; letter-spacing: -0.01em; }
.plan-boton { width: 100%; min-height: 44px; }
.plan-boton:disabled { opacity: 1; cursor: default; transform: none; }
.btn-primario.plan-boton:disabled { opacity: 0.55; box-shadow: none; }
.btn-secundario.plan-boton:disabled { color: var(--kc-text-muted); background: var(--kc-surface-container-low); border-color: transparent; }
.plan-lista { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 18px 0 0; border-top: 1px solid var(--kc-border); list-style: none; }
.plan-lista li { display: flex; align-items: flex-start; gap: 10px; }
.plan-lista .material-symbols-outlined { flex: none; color: var(--kc-primary); font-size: 20px; }
.planes-nota { display: flex; align-items: center; gap: 8px; margin: 20px 0 0; color: var(--kc-text-muted); font-size: 13px; }
.planes-nota .material-symbols-outlined { font-size: 18px; }
@media (max-width: 1000px) {
  .planes { grid-template-columns: minmax(0, 1fr); max-width: 520px; gap: 26px; }
}

/* ------------------------------------------------- Matricular por nómina
   Participantes del curso (public/nomina.js): aviso con el botón, y la ventana
   en tres pasos: pegar o subir, decir qué es cada columna, revisar fila por fila. */

.nomina-cta { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; padding: 16px 20px; }
.nomina-cta-icono { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; background: linear-gradient(135deg, var(--world-curso-a), var(--world-curso-b)); color: #fff; }
.nomina-cta-icono .material-symbols-outlined { font-size: 24px; }
.nomina-cta-texto { display: flex; flex: 1; flex-direction: column; gap: 2px; min-width: 0; }
.nomina-cta-texto strong { font-size: 16px; }
.nomina-cta-texto small { color: var(--kc-text-muted); font-size: 13.5px; line-height: 19px; }
@media (max-width: 560px) {
  .nomina-cta { flex-wrap: wrap; }
  .nomina-cta .btn { width: 100%; }
}

.dlg-nomina { width: min(720px, calc(100% - 32px)); }

/* Aviso por correo al matricular */
.av { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; border: 1px solid var(--kc-border); border-radius: 12px; background: #fff; }
.av.is-on { border-color: #ffd2bd; background: #fffaf6; }
.av-check { align-items: flex-start; }
.av-check input { flex: none; margin-top: 1px; }
.av-check > span { display: flex; flex-direction: column; gap: 2px; }
.av-check small { color: var(--kc-text-muted); font-size: 12.5px; font-weight: 500; }
.av-cuerpo { display: flex; flex-direction: column; gap: 10px; }
.av-cuerpo[hidden] { display: none; }
.av-de { display: flex; align-items: flex-start; gap: 6px; margin: 0; font-size: 13.5px; line-height: 1.45; }
.av-de .material-symbols-outlined { flex: none; color: #1f6fe0; font-size: 18px; }
.av-conectar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.av-conectar p { flex: 1; min-width: 220px; margin: 0; color: var(--kc-text-muted); font-size: 13.5px; line-height: 1.45; }
.av-mensaje summary { color: var(--kc-primary-text); font-size: 13.5px; font-weight: 700; cursor: pointer; }
.av-mensaje[open] { display: flex; flex-direction: column; gap: 10px; }
.av-mensaje textarea { min-height: 170px; }
.av-avance { display: flex; flex-direction: column; gap: 8px; }
.av-barra { height: 10px; border-radius: 999px; background: var(--kc-surface-container-low); overflow: hidden; }
.av-barra span { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #ff9a4d, #ff6115); transition: width 0.4s ease; }
.av-avance p { margin: 0; font-weight: 600; }
@media (max-width: 640px) {
  .dlg-nomina { width: 100%; }
  .dlg-nomina .dlg-pie .btn-secundario { flex: none; }
  .dlg-nomina .dlg-pie .btn-primario { white-space: nowrap; }
}
.nm textarea { min-height: 150px; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 13.5px; white-space: pre; tab-size: 18; }
.nm-o { display: flex; align-items: center; gap: 12px; margin: -4px 0; color: var(--kc-text-muted); font-size: 13px; }
.nm-o::before, .nm-o::after { content: ""; flex: 1; height: 1px; background: var(--kc-border); }
.nm-archivo { position: relative; display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1.5px dashed #c9cfe6; border-radius: 14px; background: #fff; cursor: pointer; transition: border-color var(--motion-fast) ease, background-color var(--motion-fast) ease; }
.nm-archivo:hover, .nm-archivo:focus-within { border-color: var(--kc-primary); background: #fff8f4; }
.nm-archivo > .material-symbols-outlined { flex: none; color: #12955a; font-size: 30px; }
.nm-archivo-texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.nm-archivo small { color: var(--kc-text-muted); font-size: 13px; overflow-wrap: anywhere; }
.nm-archivo input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }

.nm-fuente { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--kc-surface-container-low); font-size: 14px; }
.nm-fuente > .material-symbols-outlined { color: var(--world-curso-b); font-size: 19px; }
.nm-fuente-texto { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.nm-ayuda { margin: 0 0 -8px; }
.nm-cols { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.nm-col { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border: 1px solid var(--kc-border); border-radius: 12px; }
.nm-col.is-ignorada { background: #fafbfc; }
.nm-col.is-ignorada .nm-col-ej { color: #a3a9bd; text-decoration: line-through; }
.nm-col-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; }
.nm-col-head > span { color: var(--kc-text-muted); font-size: 13px; font-weight: 600; overflow-wrap: anywhere; }
.nm-col-head select { min-height: 38px; padding: 0.35rem 0.7rem; border: 1px solid var(--kc-border); border-radius: 10px; background: #fff; color: var(--kc-text); font: inherit; font-size: 14px; font-weight: 600; }
.nm-col-head select:focus { outline: none; border-color: var(--kc-primary); box-shadow: 0 0 0 4px rgba(255, 97, 21, 0.14); }
.nm-col-ej { min-width: 0; font-size: 14px; overflow-wrap: anywhere; }

.nm-resumen { display: flex; flex-wrap: wrap; gap: 6px; }
.nm-filas { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; border: 1px solid var(--kc-border); border-radius: 12px; }
.nm-fila { display: grid; grid-template-columns: 28px minmax(0, 1fr) minmax(0, 0.9fr); align-items: start; gap: 10px; padding: 10px 12px; border-top: 1px solid var(--kc-border); }
.nm-fila:first-child { border-top: none; }
.nm-fila.is-error { background: #fffaf3; }
.nm-n { color: var(--kc-text-muted); font-size: 12.5px; font-variant-numeric: tabular-nums; line-height: 20px; }
.nm-quien, .nm-estado { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
.nm-quien strong { font-size: 14px; overflow-wrap: anywhere; }
.nm-quien small, .nm-estado small { color: var(--kc-text-muted); font-size: 12.5px; line-height: 17px; overflow-wrap: anywhere; }
@media (max-width: 560px) {
  .nm-fila { grid-template-columns: 24px minmax(0, 1fr); }
  .nm-estado { grid-column: 2; }
}
@media (hover: none) and (pointer: coarse) {
  .nm-col-head select, .nm textarea { font-size: 16px; }
}

/* ------------------------------------------------- Evaluaciones en línea
   Texto con formato (.tx), preguntas (.pq-*), editor de código (.cd), salida de
   una ejecución (.sl-*), la pantalla para rendir (.rd-*), el constructor (.cs-*)
   y el editor de un ítem (.ci-*). public/preguntas.js, rendir.js, constructor.js. */

.nc-fechas[hidden] { display: none; }

/* Texto con formato */
.tx { min-width: 0; line-height: 1.6; overflow-wrap: anywhere; }
.tx p { margin: 0 0 0.7em; }
.tx p:last-child, .tx ul:last-child, .tx ol:last-child { margin-bottom: 0; }
.tx ul, .tx ol { margin: 0 0 0.7em; padding-left: 1.4em; }
.tx li + li { margin-top: 0.2em; }
.tx-cod { padding: 1px 6px; border-radius: 6px; background: var(--kc-surface-container-low); font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 0.9em; }
.tx-codigo { margin: 0 0 0.7em; padding: 12px 14px; border-radius: 10px; background: #f6f7fb; border: 1px solid var(--kc-border); font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 13.5px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.tx-mate.is-bloque { display: block; margin: 0.5em 0; text-align: center; overflow-x: auto; }
.tx-mate:not(.is-lista) { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 0.92em; color: var(--color-tinta-suave); }
.tx-img { display: block; max-width: 100%; height: auto; margin: 0.4em 0; border-radius: 10px; }

/* Una pregunta */
.pq-enunciado { font-size: 17px; line-height: 1.6; }
.pq-sin { margin: 0; color: var(--kc-text-muted); font-style: italic; }
.pq-ayuda { margin: 14px 0 0; color: var(--kc-text-muted); font-size: 13.5px; }
.pq-ops { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
.pq-ops.is-vf { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pq-op { display: flex; align-items: flex-start; gap: 14px; width: 100%; padding: 14px 16px; border: 1.5px solid var(--kc-border); border-radius: 14px; background: #fff; color: var(--kc-text); font: inherit; font-size: 15.5px; text-align: left; cursor: pointer; transition: border-color var(--motion-fast) ease, background-color var(--motion-fast) ease, box-shadow var(--motion-fast) ease; }
.pq-op:hover { border-color: #c9cfe6; background: #fafbff; }
.pq-op:focus-visible { outline: 2px solid var(--kc-primary); outline-offset: 2px; }
.pq-op[aria-checked="true"] { border-color: var(--kc-primary); background: #fff6f0; box-shadow: 0 0 0 3px rgba(255, 97, 21, 0.12); }
.pq-letra { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--kc-surface-container-low); color: var(--kc-text); font-size: 14px; font-weight: 700; }
.pq-letra .material-symbols-outlined { font-size: 20px; }
.pq-op[aria-checked="true"] .pq-letra { background: var(--kc-primary); color: #fff; }
.pq-op-texto { flex: 1; min-width: 0; padding-top: 4px; }
.pq-ops.is-vf .pq-op { align-items: center; justify-content: center; padding: 18px 14px; font-weight: 600; }
.pq-ops.is-vf .pq-op-texto { flex: none; padding-top: 0; }
/* Alternativas: el enunciado reserva un espacio parejo (cabe un gráfico) y las 4 opciones
   van más abajo, en dos columnas. */
.pq-enunciado.is-alts { min-height: 200px; }
.pq-ops.is-alts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; margin-top: 40px; }
.pq-ops.is-alts .pq-op { align-items: center; min-height: 72px; }
.pq-borrar { margin-top: 10px; font-size: 13.5px; }
.pq-borrar[hidden] { display: none; }
.pq-completa, .pq-desarrollo { margin-top: 18px; }
.pq-desarrollo textarea { min-height: 180px; resize: vertical; line-height: 1.6; }
.pq-hueco-input { display: inline-block; width: min(260px, 100%); min-height: 38px; margin: 2px 4px; padding: 4px 10px; border: none; border-bottom: 2px solid var(--kc-primary); border-radius: 8px 8px 2px 2px; background: #fff6f0; color: var(--kc-text); font: inherit; font-weight: 600; vertical-align: baseline; }
.pq-hueco-input:focus { outline: none; box-shadow: 0 0 0 3px rgba(255, 97, 21, 0.16); }
.pq-codigo { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; min-width: 0; }
.pq-codigo-barra { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pq-codigo-barra .espacio { flex: 1; }
.pq-lenguaje { background: var(--kc-charcoal); color: #fff; }
.pq-btn { min-height: 36px; padding: 0.35rem 0.8rem; font-size: 13.5px; }
.pq-btn .material-symbols-outlined { font-size: 19px; }
.pq-atajo { display: flex; align-items: center; gap: 6px; margin: -4px 0 0; color: var(--kc-text-muted); font-size: 12.5px; }
.pq-atajo .material-symbols-outlined { font-size: 16px; }
.pq-salida:empty { display: none; }
.pq-entrega { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 12px 14px; border-radius: 12px; background: var(--kc-surface-container-low); }
.pq-estado { flex: 1; min-width: 200px; display: inline-flex; align-items: center; gap: 6px; color: var(--kc-text-muted); font-size: 13.5px; }
.pq-estado > span { display: inline-flex; align-items: center; gap: 6px; }
.pq-estado .material-symbols-outlined { font-size: 18px; }
.pq-ok { color: #1f7a44; font-weight: 600; }
.pq-pendiente { color: #8a4b00; font-weight: 600; }
.pq-mal { color: var(--color-critico); font-weight: 600; }
@media (max-width: 560px) {
  .pq-btn span:not(.material-symbols-outlined) { display: none; }
  .pq-entrega .btn { width: 100%; }
}

/* Editor de código */
.cd { position: relative; display: flex; min-width: 0; border: 1px solid #d9deee; border-radius: 12px; background: #f8f9fd; overflow: hidden; }
.cd:focus-within { border-color: var(--kc-primary); box-shadow: 0 0 0 4px rgba(255, 97, 21, 0.12); }
.cd-lineas, .cd-texto, .cd-color { margin: 0; padding: 12px 0; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 13.5px; line-height: 21px; }
.cd-lineas { flex: none; min-width: 42px; padding-right: 10px; padding-left: 8px; overflow: hidden; border-right: 1px solid #e3e7f3; background: #eff1f8; color: #9aa3b8; text-align: right; user-select: none; }
/* Los colores van en una capa (.cd-color) detrás del texto, que es transparente: los dos
   tienen la misma letra, tamaño y márgenes, así calzan letra a letra. */
.cd-area { position: relative; flex: 1; min-width: 0; }
.cd-color { position: absolute; inset: 0; padding-left: 12px; padding-right: 12px; overflow: hidden; color: #1a2130; white-space: pre; tab-size: 4; pointer-events: none; }
.cd-texto { position: relative; display: block; width: 100%; min-width: 0; padding-left: 12px; padding-right: 12px; border: none; background: transparent; color: transparent; caret-color: #1a2130; white-space: pre; overflow-x: auto; overflow-y: hidden; resize: none; tab-size: 4; }
.cd-texto::selection { background: rgba(255, 97, 21, 0.22); color: transparent; }
.cd-texto:focus { outline: none; }
.cd-area:has(.cd-texto[readonly]) .cd-color { opacity: 0.85; }
/* Colores, como en Matlab y Jupyter. */
.hl-k { color: #1d4ed8; }
.hl-c { color: #2f7d3b; }
.hl-s { color: #a12ca1; }
.hl-n { color: #b45309; }
.hl-b { color: #0f766e; }
.hl-f { color: #c2410c; }
@media (max-width: 640px) {
  /* En el teléfono, las líneas largas bajan (nada se desplaza hacia el lado). */
  .cd-lineas { display: none; }
  .cd-texto { white-space: pre-wrap; overflow-wrap: anywhere; overflow-x: hidden; }
}
@media (hover: none) and (pointer: coarse) { .cd-texto { font-size: 16px; line-height: 23px; } }

/* Casillas del código (como un live script): código a la izquierda, su salida a la
   derecha; en un espacio angosto, la salida va debajo de cada casilla. */
.pq-codigo { container-type: inline-size; }
.cl-cabeceras { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); margin: 2px 2px -4px; color: var(--kc-text-muted); font-size: 12px; font-weight: 600; }
.cl-cabeceras span + span { padding-left: 14px; }
.cl-lista { display: flex; flex-direction: column; gap: 8px; min-width: 0; container-type: inline-size; }
.cl { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); min-width: 0; border: 1px solid #d9deee; border-radius: 12px; background: #fff; overflow: hidden; }
.cl:focus-within { border-color: var(--kc-primary); box-shadow: 0 0 0 4px rgba(255, 97, 21, 0.12); }
.cl-cod { display: flex; flex-direction: column; min-width: 0; background: #f8f9fd; }
.cl-cabeza { display: flex; align-items: center; gap: 2px; min-height: 30px; padding: 2px 4px 0 10px; }
.cl-cabeza .espacio { flex: 1; }
.cl-n { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 12px; color: #9aa3b8; }
.cl-btn { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; border: none; border-radius: 8px; background: transparent; color: var(--kc-text-muted); cursor: pointer; }
.cl-btn .material-symbols-outlined { font-size: 20px; }
.cl-btn:hover:not(:disabled) { background: #eceff7; color: var(--kc-primary); }
.cl-btn:disabled { opacity: 0.4; cursor: default; }
.cl .cd { border: none; border-radius: 0; background: transparent; }
.cl .cd-lineas, .cl .cd-texto, .cl .cd-color { padding-top: 2px; padding-bottom: 10px; }
.cl .cd:focus-within { box-shadow: none; }
.cl-sal { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 10px 12px; border-left: 1px solid #e3e7f3; transition: opacity var(--motion-fast) ease; }
/* Al lado del código, la salida conserva sus columnas (matrices) y se desplaza dentro de su recuadro. */
.cl-sal .sl-texto { padding: 0; background: transparent; white-space: pre; overflow-wrap: normal; overflow-x: auto; }
.cl-sal .sl-error { padding: 8px 10px; }
.cl-sal.is-vieja { opacity: 0.5; }
.cl-nada { display: flex; align-items: center; gap: 4px; margin: 0; color: var(--kc-text-muted); font-size: 12.5px; }
.cl-nada .material-symbols-outlined { font-size: 16px; color: #1f7a44; }
.cl-pie { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 14px; }
.cl-pie .pq-atajo { margin: 0; }
.cl-agregar { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; }
.cl-agregar .material-symbols-outlined { font-size: 19px; }
.cl-lectura .cl-pre { margin: 0; padding: 4px 12px 10px; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 13px; line-height: 21px; color: #1a2130; white-space: pre-wrap; overflow-wrap: anywhere; }
.cl-lectura.is-solo-codigo .cl { grid-template-columns: minmax(0, 1fr); }
.cl-lectura .cl:focus-within { border-color: #d9deee; box-shadow: none; }
@container (max-width: 520px) {
  .cl, .cl-cabeceras { grid-template-columns: minmax(0, 1fr); }
  .cl-cabeceras { display: none; }
  .cl-sal { border-left: none; border-top: 1px solid #e3e7f3; }
  .cl-sal:empty { display: none; }
  /* Angosto (teléfono): nada se desplaza hacia el lado. */
  .cl-sal .sl-texto { white-space: pre-wrap; overflow-wrap: anywhere; overflow-x: hidden; }
}

/* Opciones del Tab (public/completar.js): una lista flotante bajo el cursor. */
.cp { position: fixed; z-index: 10000; min-width: 200px; max-height: 260px; overflow-y: auto; padding: 4px; border: 1px solid #d9deee; border-radius: 10px; background: #fff; box-shadow: 0 10px 30px rgba(20, 28, 48, 0.16); }
.cp-op { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 7px; cursor: pointer; }
.cp-op .material-symbols-outlined { flex: none; font-size: 17px; color: var(--kc-text-muted); }
.cp-op.is-actual { background: #fff1e8; }
.cp-op.is-actual .material-symbols-outlined { color: var(--kc-primary); }
.cp-nombre { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 13px; color: #1a2130; }
.cp-nombre b { color: var(--kc-primary); font-weight: 700; }
.cp-nombre small { margin-left: 2px; color: var(--kc-text-muted); font-size: 12px; }
.cp-tipo { flex: none; padding: 1px 7px; border-radius: 999px; background: #eef1f8; color: var(--kc-text-muted); font-size: 11px; font-weight: 600; }
.cp-aviso { padding: 6px 10px; min-width: 0; color: var(--kc-text-muted); font-size: 12.5px; pointer-events: none; }
@media (hover: none) and (pointer: coarse) { .cp-op { padding: 10px 10px; } .cp-nombre { font-size: 15px; } }

/* Espacio de trabajo: lo entregado en las preguntas anteriores. */
.cl-espacio { padding: 10px 12px; border: 1px dashed #cdd3e4; border-radius: 12px; background: #fbfcfe; }
.cl-espacio-tit { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin: 0 0 8px; font-size: 13px; font-weight: 700; }
.cl-espacio-tit .material-symbols-outlined { font-size: 18px; color: var(--kc-primary); }
.cl-espacio-tit small { color: var(--kc-text-muted); font-weight: 500; }
.cl-espacio-lista { display: flex; flex-wrap: wrap; gap: 6px; }
.cl-espacio-sub { margin: 8px 0 6px; color: var(--kc-text-muted); font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.cl-espacio-sub:first-of-type { margin-top: 0; }
.cl-espacio-vacio { margin: 0; color: var(--kc-text-muted); font-size: 13px; }
span.cl-ficha { cursor: default; }
span.cl-ficha:hover { border-color: #d9deee; }
.cl-espacio-vars { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.cl-espacio-vars th, .cl-espacio-vars td { padding: 4px 8px; border-top: 1px solid #e8ebf4; text-align: left; vertical-align: top; }
.cl-espacio-vars tr:first-child th, .cl-espacio-vars tr:first-child td { border-top: none; }
.cl-espacio-vars th { width: 1%; font-weight: 600; white-space: nowrap; }
.cl-espacio-vars code { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 12.5px; overflow-wrap: anywhere; }
.cl-ficha { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; padding: 4px 10px; border: 1px solid #d9deee; border-radius: 999px; background: #fff; color: var(--color-tinta); font: inherit; font-size: 12.5px; cursor: pointer; }
.cl-ficha:hover { border-color: var(--kc-primary); }
.cl-ficha .material-symbols-outlined { font-size: 16px; color: var(--kc-text-muted); }
.cl-ficha code { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cl-ficha small { color: var(--kc-text-muted); font-size: 11.5px; }
.cl-ficha.is-mal { border-color: #ffd5d0; background: #fff1f0; color: #b42318; cursor: default; }
.cl-ficha.is-mal .material-symbols-outlined { color: #b42318; }
.cl-espacio-ver { margin-top: 10px; }
.cl-espacio-de { margin: 0 0 6px; color: var(--kc-text-muted); font-size: 12.5px; font-weight: 600; }

/* Salida de una ejecución */
.sl { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.sl-titulo { display: flex; align-items: center; gap: 6px; margin: 0 0 6px; font-size: 13px; font-weight: 700; }
.sl-titulo .material-symbols-outlined { font-size: 18px; }
.sl-titulo small { color: var(--kc-text-muted); font-weight: 500; }
.sl-texto, .sl-error { margin: 0; padding: 10px 12px; border-radius: 10px; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 13px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 360px; overflow-y: auto; }
.sl-texto { background: #f1f3f9; color: #1a2130; }
.sl-error { background: #fff1f0; color: #b42318; }
.sl-latex { padding: 6px 12px; border-radius: 10px; background: #f1f3f9; overflow-x: auto; }
.sl-img { display: block; max-width: 100%; height: auto; border-radius: 10px; border: 1px solid var(--kc-border); background: #fff; }
.sl-aviso { display: flex; align-items: center; gap: 6px; margin: 0; color: var(--kc-text-muted); font-size: 13px; }
.sl-aviso .material-symbols-outlined { font-size: 17px; }
.sl-cargando { display: flex; align-items: center; gap: 10px; margin: 0; color: var(--kc-text-muted); font-size: 13.5px; }
.sl-girando { display: inline-block; width: 16px; height: 16px; border: 2px solid #ffd2bd; border-top-color: var(--kc-primary); border-radius: 50%; animation: sl-gira 0.8s linear infinite; }
@keyframes sl-gira { to { transform: rotate(360deg); } }

/* El cuadro de la evaluación en el muro */
.wall-card.k-evaluacion .wall-kind-tile { background: linear-gradient(135deg, var(--world-curso-a), var(--world-curso-b)); box-shadow: 0 4px 12px -4px rgba(31, 63, 102, 0.5); }
.wall-card-foot > span .material-symbols-outlined { font-size: 16px; vertical-align: -3px; margin-right: 3px; }
.wall-card-status.is-info { background: #e8efff; color: #2a4a8a; }
.ev-card-meta .material-symbols-outlined { font-size: 16px; vertical-align: -3px; margin-right: 2px; }
.ev-por-revisar { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px; }

/* ----- Rendir: pantalla completa */
html.rd-abierta { overflow: hidden; }
.rd { position: fixed; inset: 0; z-index: 200; overflow-y: auto; background: #f7f8fd; color: var(--kc-text); animation: motion-fade var(--motion-fast) ease-out backwards; }
.rd-cargando { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; min-height: 100%; padding: 24px; color: var(--kc-text-muted); text-align: center; }
.rd-x { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 40px; height: 40px; border: none; border-radius: 50%; background: transparent; color: #6b7a89; cursor: pointer; }
.rd-x:hover { background: rgba(19, 27, 46, 0.06); color: var(--kc-text); }
.rd-x:focus-visible { outline: 2px solid var(--kc-primary); }

.rd-portada { max-width: 780px; margin: 0 auto; padding: 16px 20px 48px; }
.rd-portada-top { display: flex; align-items: center; gap: 10px; margin: 0 -8px 8px; }
.rd-vp { margin-left: auto; }
.rd-portada-cuerpo { display: flex; flex-direction: column; gap: 18px; }
.rd-portada-cuerpo .page-eyebrow { align-self: flex-start; margin: 0; }
.rd-titulo { margin: -10px 0 0; font-size: 30px; font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.rd-horario { display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 12px 14px; border-radius: 12px; background: #fff; box-shadow: var(--kc-shadow-sm); font-size: 15px; line-height: 1.5; }
.rd-horario .material-symbols-outlined { flex: none; color: var(--world-curso-b); }
.rd-reglas, .rd-profe { padding: 20px 22px; }
.rd-reglas h2, .rd-profe h2 { margin: 0 0 12px; font-size: 16px; font-weight: 700; }
.rd-reglas ul { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; }
.rd-reglas li { display: flex; align-items: flex-start; gap: 12px; line-height: 1.55; }
.rd-reglas li .material-symbols-outlined { flex: none; margin-top: 1px; color: var(--kc-primary); font-size: 21px; }
.rd-accion { display: flex; flex-direction: column; align-items: center; gap: 12px; padding-top: 6px; text-align: center; }
.rd-comenzar { min-width: 240px; min-height: 52px; font-size: 16px; }
.rd-aviso, .rd-estado { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 10px 14px; border-radius: 12px; background: #fff1e1; color: #8a4b00; font-weight: 600; }
.rd-estado { background: #fff; color: var(--kc-text); box-shadow: var(--kc-shadow-sm); }
.rd-hecha { display: flex; align-items: flex-start; gap: 14px; width: 100%; padding: 18px 20px; border-radius: 16px; background: #e3f5ea; text-align: left; }
.rd-hecha-icono .material-symbols-outlined { color: #1f7a44; font-size: 32px; }
.rd-hecha strong { font-size: 16px; }
.rd-hecha p { margin: 4px 0 0; color: #2c4a39; line-height: 1.5; }

.rd-examen { display: flex; flex-direction: column; min-height: 100%; }
.rd-barra { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-bottom: 1px solid var(--kc-border); background: rgba(255, 255, 255, 0.96); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.rd-barra-id { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.rd-barra-id strong { overflow: hidden; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
.rd-guardado { display: inline-flex; align-items: center; gap: 4px; color: var(--kc-text-muted); font-size: 12.5px; }
.rd-guardado .material-symbols-outlined { font-size: 16px; }
.rd-guardado.is-ok .material-symbols-outlined { color: #1f7a44; }
.rd-guardado.is-error { color: var(--color-critico); font-weight: 600; }
.rd-reloj { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: var(--kc-surface-container-low); font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rd-reloj .material-symbols-outlined { font-size: 19px; }
.rd-reloj.is-poco { background: #fff1e1; color: #8a4b00; }
.rd-reloj.is-muy-poco { background: #ffe4e1; color: #b42318; animation: rd-late 1s ease-in-out infinite; }
@keyframes rd-late { 50% { opacity: 0.65; } }
.rd-mapa-btn { display: none; align-items: center; gap: 4px; min-height: 38px; padding: 0 10px; border: 1px solid var(--kc-border); border-radius: 999px; background: #fff; color: var(--kc-text); font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; }
.rd-mapa-btn .material-symbols-outlined { font-size: 19px; }
.rd-terminar { min-height: 40px; }
.rd-cuerpo { display: grid; flex: 1; grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; width: 100%; max-width: 1180px; margin: 0 auto; padding: 24px 20px 40px; }
.rd-pregunta:focus { outline: none; }
.rd-pq { display: flex; flex-direction: column; gap: 16px; max-width: 780px; margin: 0 auto; }
.rd-pq-eyebrow { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; color: var(--kc-text-muted); font-size: 13px; font-weight: 600; }
.rd-pq-eyebrow span:first-child { color: var(--kc-primary-text); font-weight: 700; }
.rd-item { display: flex; flex-direction: column; gap: 6px; }
.rd-item-nombre { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 13px; font-weight: 700; letter-spacing: 0.01em; }
.rd-item-nombre .material-symbols-outlined { color: var(--world-curso-b); font-size: 18px; }
.rd-item-instr { padding: 10px 14px; border-left: 3px solid #c9d4ec; border-radius: 4px 10px 10px 4px; background: #fff; color: var(--color-tinta-suave); font-size: 14.5px; }
.rd-item-instr summary { cursor: pointer; color: var(--color-tinta); font-weight: 600; }
.rd-item-instr[open] > .tx { margin-top: 10px; }
.rd-item-instr.is-corto { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rd-pq-cuerpo { padding: 22px 24px; border-radius: 16px; background: #fff; box-shadow: var(--kc-shadow-sm); min-width: 0; }
.rd-pasos { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.rd-marcar { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 12px; border: 1px dashed #c9cfe6; border-radius: 12px; background: transparent; color: var(--kc-text-muted); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.rd-marcar.is-on { border-style: solid; border-color: #ffb27d; background: #fff1e1; color: #8a4b00; }
.rd-marcar.is-on .material-symbols-outlined { font-variation-settings: "FILL" 1; }

.rd-mapa { position: sticky; top: 84px; align-self: start; display: flex; flex-direction: column; gap: 14px; max-height: calc(100dvh - 110px); overflow-y: auto; padding: 18px; border-radius: 16px; background: #fff; box-shadow: var(--kc-shadow-sm); }
.rd-mapa-top { display: flex; flex-direction: column; gap: 2px; }
.rd-mapa-top span { color: var(--kc-text-muted); font-size: 13px; }
.rd-mapa-item p { margin: 0 0 8px; color: var(--kc-text-muted); font-size: 12px; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; }
.rd-mapa-grilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 6px; }
.rd-n { position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: 0; height: 40px; padding: 0 4px; border: 1.5px solid var(--kc-border); border-radius: 10px; background: #fff; color: var(--kc-text); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.rd-n:hover { border-color: #c9cfe6; }
.rd-n.is-hecha { border-color: transparent; background: var(--world-curso-b); color: #fff; }
.rd-n.is-borrador { border-style: dashed; border-color: var(--world-curso-a); }
.rd-n.is-actual { box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--kc-primary); }
.rd-n.is-marcada::after { content: ""; position: absolute; top: -4px; right: -4px; width: 11px; height: 11px; border: 2px solid #fff; border-radius: 50%; background: var(--kc-primary); }
.rd-leyenda { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 4px 0 0; padding: 12px 0 0; border-top: 1px solid var(--kc-border); list-style: none; color: var(--kc-text-muted); font-size: 12px; }
.rd-leyenda li { display: inline-flex; align-items: center; gap: 6px; }
.rd-leyenda .rd-n { width: 18px; height: 18px; padding: 0; border-radius: 5px; cursor: default; }
.rd-leyenda .rd-n.is-marcada::after { width: 8px; height: 8px; top: -3px; right: -3px; }
.rd-falta { display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 12px 14px; border-radius: 12px; background: #fff1e1; color: #8a4b00; line-height: 1.5; }
.rd-falta.is-suave { background: var(--kc-surface-container-low); color: var(--kc-text); }
.rd-falta .material-symbols-outlined { flex: none; }
.rd-todo { display: flex; align-items: center; gap: 10px; margin: 0; padding: 12px 14px; border-radius: 12px; background: #e3f5ea; color: #1f7a44; font-weight: 600; }
@media (max-width: 640px) {
  /* La confirmación sube desde abajo, con los botones a lo ancho. */
  .dlg.rd-fin { height: auto; margin: auto 0 0; border-radius: 20px 20px 0 0; }
  .rd-fin .dlg-caja { height: auto; }
  .rd-fin .dlg-pie { flex-direction: column-reverse; align-items: stretch; }
  .rd-fin .dlg-pie .espacio { display: none; }
}

@media (max-width: 900px) {
  .rd-cuerpo { grid-template-columns: minmax(0, 1fr); padding: 16px 16px 32px; }
  .rd-mapa-btn { display: inline-flex; }
  /* El navegador baja como hoja desde arriba al tocar el botón. */
  .rd-mapa { position: fixed; top: 61px; right: 0; left: 0; z-index: 4; max-height: calc(100dvh - 61px); border-radius: 0 0 18px 18px; box-shadow: 0 24px 40px -20px rgba(15, 23, 36, 0.4); transform: translateY(-110%); visibility: hidden; transition: transform 0.25s ease, visibility 0.25s; }
  .rd-examen.is-mapa .rd-mapa { transform: none; visibility: visible; }
}
@media (max-width: 560px) {
  .rd-barra { gap: 6px; padding: 8px 10px; }
  .rd-barra-id strong { font-size: 14px; }
  .rd-terminar span:not(.material-symbols-outlined) { display: none; }
  .rd-terminar { padding: 0 10px; }
  .rd-reloj { padding: 6px 10px; font-size: 14px; }
  .rd-pq-cuerpo { padding: 18px 16px; }
  .rd-pasos .btn { flex: 1; }
  .rd-marcar { order: 3; width: 100%; justify-content: center; }
  .rd-titulo { font-size: 25px; }
  .rd-comenzar { width: 100%; }
  .pq-ops.is-vf, .pq-ops.is-alts { grid-template-columns: minmax(0, 1fr); }
  .pq-enunciado.is-alts { min-height: 0; }
  .pq-ops.is-alts { margin-top: 24px; }
}
@media (hover: none) and (pointer: coarse) { .pq-hueco-input { font-size: 16px; } }

/* ----- Constructor: la lista de ítems */
.cs { display: flex; flex-direction: column; gap: 14px; }
.cs-top { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; padding: 16px 20px; }
.cs-resumen { display: flex; flex: 1; flex-direction: column; gap: 2px; min-width: 200px; }
.cs-resumen strong { font-size: 16px; }
.cs-resumen > span { color: var(--kc-text-muted); font-size: 13.5px; }
.cs-falta { display: inline-flex; align-items: center; gap: 3px; color: #8a4b00; font-weight: 600; }
.cs-falta .material-symbols-outlined { font-size: 16px; }
.cs-top .acciones { margin: 0; }
.cs-ajustes-acciones { display: flex; flex-wrap: wrap; gap: 8px; }
.cs-ajustes-acciones[hidden] { display: none; }
.cs-items { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; }
.cs-item { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: start; gap: 16px; padding: 18px 20px; }
.cs-tile { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 13px; color: #fff; background: linear-gradient(135deg, #ff9a4d, #ff6115); }
.cs-tile .material-symbols-outlined { font-size: 26px; font-variation-settings: "FILL" 1; }
.cs-tile.t-vf { background: linear-gradient(135deg, #3ccf8e, #12865a); }
.cs-tile.t-alternativas { background: linear-gradient(135deg, #6f9bff, #2f5fd0); }
.cs-tile.t-pareados { background: linear-gradient(135deg, #b18cff, #6b46d6); }
.cs-tile.t-completacion { background: linear-gradient(135deg, #3cc4cf, #0e8794); }
.cs-tile.t-desarrollo { background: linear-gradient(135deg, #ff9a4d, #ff6115); }
.cs-tile.t-codigo { background: linear-gradient(135deg, #4a5570, #1a2130); }
.cs-item-cuerpo { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cs-item-kind { margin: 0; font-size: 15px; font-weight: 700; }
.cs-item-instr { margin: 0; color: var(--color-tinta-suave); font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
.cs-item-pqs { display: flex; flex-direction: column; gap: 4px; margin: 4px 0 0; padding: 0; list-style: none; }
.cs-item-pqs li { display: flex; align-items: baseline; gap: 10px; min-width: 0; font-size: 14px; }
.cs-item-pqs li.is-inciso { padding-left: 18px; }
.cs-n { flex: none; min-width: 26px; color: var(--kc-text-muted); font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.cs-pq-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-pq-t em { color: #a3a9bd; }
.cs-dot .material-symbols-outlined { color: #e07a2e; font-size: 16px; vertical-align: -3px; }
.cs-mas { padding-left: 36px; color: var(--kc-text-muted); }
.cs-item-meta { margin: 4px 0 0; color: var(--kc-text-muted); font-size: 13px; }
.cs-item-acciones { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.cs-orden { display: inline-flex; gap: 2px; }
.cs-icono { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border: none; border-radius: 10px; background: transparent; color: #6b7a89; cursor: pointer; }
.cs-icono:hover:not(:disabled) { background: var(--kc-surface-container-low); color: var(--kc-text); }
.cs-icono:disabled { opacity: 0.35; cursor: default; }
.cs-icono.is-peligro:hover:not(:disabled) { background: #fff1f0; color: var(--color-critico); }
.cs-icono .material-symbols-outlined { font-size: 20px; }
.cs-vacia { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 32px 24px; text-align: center; }
.cs-vacia h3 { margin: 6px 0 0; font-size: 19px; }
.cs-vacia p { margin: 0 0 12px; color: var(--kc-text-muted); }
.cs-vacia-icono .material-symbols-outlined { color: var(--world-curso-b); font-size: 40px; }
.cs-tipos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; width: 100%; text-align: left; }
.cs-tipo { display: flex; align-items: flex-start; gap: 12px; padding: 14px; border: 1.5px solid var(--kc-border); border-radius: 14px; background: #fff; color: var(--kc-text); font: inherit; text-align: left; cursor: pointer; transition: border-color var(--motion-fast) ease, transform var(--motion-fast) var(--motion-ease); }
.cs-tipo:hover { border-color: var(--kc-primary); transform: translateY(-1px); }
.cs-tipo:focus-visible { outline: 2px solid var(--kc-primary); outline-offset: 2px; }
.cs-tipo .cs-tile { width: 40px; height: 40px; border-radius: 11px; }
.cs-tipo .cs-tile .material-symbols-outlined { font-size: 22px; }
.cs-tipo > span:last-child { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cs-tipo small { color: var(--kc-text-muted); font-size: 13px; line-height: 1.45; }
@media (max-width: 720px) {
  .cs-item { grid-template-columns: 40px minmax(0, 1fr); }
  .cs-item .cs-tile { width: 40px; height: 40px; }
  .cs-item-acciones { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; align-items: center; }
  .cs-tipos { grid-template-columns: minmax(0, 1fr); }
  .cs-top .acciones { width: 100%; }
  .cs-top .acciones .btn { flex: 1; }
  .cs-top { min-width: 0; padding: 14px; }
  .cs-resumen { min-width: 0; }
  .te-numeracion { max-width: 100%; }
  .te-numeracion select { min-width: 0; max-width: 100%; }
  .cs-ajustes-acciones { width: 100%; }
  .cs-ajustes-acciones .btn { flex: 1; min-width: 0; }
}

/* ----- Constructor: el editor de un ítem */
.dlg.ci { width: min(1360px, calc(100% - 32px)); height: calc(100dvh - 48px); }
.ci-caja { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; height: 100%; }
.ci-top { display: flex; align-items: center; gap: 14px; padding: 16px 20px; border-bottom: 1px solid var(--kc-border); }
.ci-top .cs-tile { width: 42px; height: 42px; border-radius: 12px; }
.ci-top-id { flex: 1; min-width: 0; }
.ci-eyebrow { margin: 0; overflow: hidden; color: var(--kc-text-muted); font-size: 12.5px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.ci-top h2 { margin: 0; font-size: 20px; font-weight: 700; }
.ci-x { position: static; }
.ci-vp { display: none; }
.ci-vp[aria-pressed="true"] { border-color: var(--kc-primary); color: var(--kc-primary-text); }
.ci-cuerpo { display: grid; grid-template-columns: 250px minmax(0, 1fr) minmax(340px, 420px); min-height: 0; }
.ci-rail { display: flex; flex-direction: column; gap: 4px; min-height: 0; padding: 14px 10px; overflow-y: auto; border-right: 1px solid var(--kc-border); background: #fafbff; }
.ci-r { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 6px 10px; border: 1px solid transparent; border-radius: 10px; background: transparent; color: var(--kc-text); font: inherit; font-size: 13.5px; text-align: left; cursor: pointer; }
.ci-r:hover { background: #fff; border-color: var(--kc-border); }
.ci-r.is-sel { border-color: var(--kc-primary); background: #fff; box-shadow: 0 0 0 3px rgba(255, 97, 21, 0.1); }
.ci-r.is-item { margin-bottom: 6px; font-weight: 600; }
.ci-r.is-item .material-symbols-outlined { color: var(--world-curso-b); font-size: 20px; }
.ci-r.is-inciso { padding-left: 24px; }
.ci-r.is-agregar { margin-top: 6px; border: 1.5px dashed #c9cfe6; color: var(--kc-primary-text); font-weight: 700; }
.ci-r.is-agregar .material-symbols-outlined { font-size: 20px; }
.ci-r-n { display: inline-flex; flex: none; align-items: center; justify-content: center; min-width: 30px; height: 26px; padding: 0 6px; border-radius: 8px; background: var(--kc-surface-container-low); font-size: 12.5px; font-weight: 700; }
.ci-r.is-sel .ci-r-n { background: var(--kc-primary); color: #fff; }
.ci-r-t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ci-r-t em { color: #a3a9bd; }
.ci-r-e .material-symbols-outlined { color: #1f9d5c; font-size: 17px; }
.ci-r-e.is-falta .material-symbols-outlined { color: #e07a2e; }
.ci-editor { display: flex; flex-direction: column; gap: 18px; min-height: 0; padding: 22px 26px 30px; overflow-y: auto; }
.ci-vista { display: flex; flex-direction: column; gap: 12px; min-height: 0; padding: 22px 20px; overflow-y: auto; border-left: 1px solid var(--kc-border); background: linear-gradient(180deg, #f6f7ff 0%, #eef0fd 100%); }
.ci-vista-caja { display: flex; flex-direction: column; gap: 12px; padding: 18px; }
.ci-vista-caja .pq-enunciado { font-size: 16px; }
.ci-sec { display: flex; flex-direction: column; gap: 4px; }
.ci-h3 { margin: 0; font-size: 18px; font-weight: 700; }
.ci-desc { margin: 0; color: var(--kc-text-muted); font-size: 14px; }
.ci-pq-top { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.ci-pq-top .espacio { flex: 1; }
.ci-btn-chico { min-height: 36px; padding: 0.3rem 0.7rem; font-size: 13px; }
.ci-btn-chico .material-symbols-outlined { font-size: 18px; }
.ci-fila-puntaje { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.ci-fila-puntaje .campo { width: 200px; }
.ci-fila-puntaje .btn { min-height: 46px; }
.ci-puntaje input.is-mal, #ci-base.is-mal { border-color: var(--color-critico); }
.ci-ayuda-leng { margin-top: 2px; }
.ci-letra { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: var(--kc-surface-container-low); font-size: 13px; font-weight: 700; }
.ci-mas { display: inline-flex; align-items: center; gap: 4px; align-self: flex-start; font-size: 14px; }
.ci-mas .material-symbols-outlined { font-size: 19px; }
.ci-vf { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ci-vf button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; border: 1.5px solid var(--kc-border); border-radius: 12px; background: #fff; color: var(--kc-text); font: inherit; font-weight: 700; cursor: pointer; }
.ci-vf button[aria-checked="true"] { border-color: #1f9d5c; background: #e3f5ea; color: #1f7a44; }
.ci-alts, .ci-colb { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ci-alt, .ci-colb li { display: grid; grid-template-columns: 38px minmax(0, 1fr) 36px; align-items: center; gap: 8px; }
.ci-alt input, .ci-colb input { width: 100%; min-width: 0; min-height: 44px; padding: 0.55rem 0.8rem; border: 1px solid transparent; border-radius: 12px; background: var(--kc-surface-container-low); color: var(--kc-text); font: inherit; font-size: 15px; }
.ci-alt input:focus, .ci-colb input:focus { outline: none; border-color: var(--kc-primary); background: #fff; box-shadow: 0 0 0 4px rgba(255, 97, 21, 0.14); }
.ci-alt.is-correcta input { border-color: #9ad8b5; background: #f1fbf5; }
.ci-alt-ok { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 1.5px solid var(--kc-border); border-radius: 50%; background: #fff; color: var(--kc-text); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.ci-alt-ok[aria-checked="true"] { border-color: #1f9d5c; background: #1f9d5c; color: #fff; }
.ci-colb li .ci-letra { justify-self: center; }
.ci-pareo { display: flex; flex-direction: column; gap: 6px; }
.ci-pareo button { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px 10px; border: 1.5px solid var(--kc-border); border-radius: 12px; background: #fff; color: var(--kc-text); font: inherit; font-size: 14px; text-align: left; cursor: pointer; }
.ci-pareo button[aria-checked="true"] { border-color: #1f9d5c; background: #f1fbf5; }
.ci-pareo button[aria-checked="true"] .ci-letra { background: #1f9d5c; color: #fff; }
.ci-pareo em { color: #a3a9bd; }
.ci-acept { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 46px; padding: 6px 8px; border: 1px solid transparent; border-radius: 12px; background: var(--kc-surface-container-low); }
.ci-acept:focus-within { border-color: var(--kc-primary); background: #fff; box-shadow: 0 0 0 4px rgba(255, 97, 21, 0.14); }
.ci-acept input { flex: 1; min-width: 160px; min-height: 32px; border: none; background: transparent; color: var(--kc-text); font: inherit; font-size: 15px; }
.ci-acept input:focus { outline: none; }
.ci-chip { display: inline-flex; align-items: center; gap: 2px; padding: 3px 4px 3px 10px; border-radius: 999px; background: #e3f5ea; color: #1f7a44; font-size: 14px; font-weight: 600; }
.ci-chip button { display: inline-flex; padding: 2px; border: none; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; }
.ci-chip button:hover { background: rgba(31, 122, 68, 0.14); }
.ci-chip .material-symbols-outlined { font-size: 16px; }
.ci-esp { border: 1px solid var(--kc-border); border-radius: 12px; }
.ci-esp summary { display: flex; align-items: center; gap: 8px; padding: 12px 14px; font-size: 14px; font-weight: 700; cursor: pointer; list-style: none; }
.ci-esp summary::-webkit-details-marker { display: none; }
.ci-esp summary .material-symbols-outlined { color: var(--world-curso-b); font-size: 19px; }
.ci-esp summary small { color: var(--kc-text-muted); font-weight: 500; }
.ci-esp-campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 0 14px 14px; }
.ci-probar { margin-top: 4px; }
.ci-pie .btn { white-space: nowrap; }
.ci-pie #ci-error { flex: 1; margin: 0; }
.ci-pie #ci-error[hidden] { display: none; }

/* Texto con herramientas */
.tr { display: flex; flex-direction: column; min-width: 0; border: 1px solid transparent; border-radius: 12px; background: var(--kc-surface-container-low); }
.tr:focus-within { border-color: var(--kc-primary); background: #fff; box-shadow: 0 0 0 4px rgba(255, 97, 21, 0.14); }
.tr-barra { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; padding: 4px 6px; border-bottom: 1px solid var(--kc-border); }
.tr-btn { display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-width: 32px; height: 32px; padding: 0 6px; border: none; border-radius: 8px; background: transparent; color: #4b5568; font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; }
.tr-btn:hover { background: rgba(19, 27, 46, 0.06); color: var(--kc-text); }
.tr-btn .material-symbols-outlined { font-size: 19px; }
.tr-btn.is-hueco { border: 1px dashed #ffb27d; color: #8a4b00; }
.tr-ayuda { margin-left: auto; padding: 0 6px; color: var(--kc-text-muted); font-size: 12px; }
.tr-texto { width: 100%; min-width: 0; padding: 0.7rem 0.9rem; border: none; border-radius: 0 0 12px 12px; background: transparent; color: var(--kc-text); font: inherit; font-size: 15px; line-height: 22px; resize: vertical; }
.tr-texto:focus { outline: none; }
@media (hover: none) and (pointer: coarse) { .tr-texto, .ci-alt input, .ci-colb input, .ci-acept input { font-size: 16px; } }

@media (max-width: 1179px) {
  .ci-cuerpo { grid-template-columns: 230px minmax(0, 1fr); }
  .ci-vista { display: none; }
  .ci-vp { display: inline-flex; }
  .ci-caja.is-vista .ci-editor { display: none; }
  .ci-caja.is-vista .ci-vista { display: flex; border-left: none; }
}
@media (max-width: 760px) {
  .ci-top { gap: 10px; padding: 12px 14px; }
  .ci-top .cs-tile { display: none; }
  .ci-top h2 { font-size: 17px; }
  .ci-vp span:not(.material-symbols-outlined) { display: none; }
  .ci-cuerpo { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  /* Las preguntas, en fichas que bajan de línea (sin desplazarse hacia el lado). */
  .ci-rail { flex-direction: row; flex-wrap: wrap; max-height: 112px; padding: 8px 10px; border-right: none; border-bottom: 1px solid var(--kc-border); }
  .ci-r { width: auto; min-height: 38px; padding: 4px 8px; }
  .ci-r .ci-r-t, .ci-r-e { display: none; }
  .ci-r.is-item .ci-r-t, .ci-r.is-agregar .ci-r-t { display: inline; }
  .ci-r.is-item, .ci-r.is-agregar { margin: 0; }
  .ci-r.is-inciso { padding-left: 8px; }
  .ci-editor { padding: 16px 16px 24px; }
  .ci-esp-campos { grid-template-columns: minmax(0, 1fr); }
  .ci-fila-puntaje .campo { width: 100%; }
  .ci-fila-puntaje .btn { width: 100%; }
}
@media (max-width: 640px) {
  .dlg.ci { width: 100%; height: 100dvh; }
  .ci-pie .dlg-pie-nota { display: none; }
}

/* Modalidad y horario al crear la evaluación */
.ef-modos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ef-modo { display: flex; align-items: flex-start; gap: 12px; padding: 14px; border: 1.5px solid var(--kc-border); border-radius: 14px; background: #fff; color: var(--kc-text); font: inherit; text-align: left; cursor: pointer; }
.ef-modo > .material-symbols-outlined { flex: none; color: var(--world-curso-b); font-size: 26px; }
.ef-modo > span { display: flex; flex-direction: column; gap: 3px; }
.ef-modo small { color: var(--kc-text-muted); font-size: 13px; line-height: 1.45; }
.ef-modo[aria-checked="true"] { border-color: var(--kc-primary); background: #fff6f0; box-shadow: 0 0 0 3px rgba(255, 97, 21, 0.12); }
.ef-modo[aria-checked="true"] > .material-symbols-outlined { color: var(--kc-primary); }
.ef-modo:focus-visible { outline: 2px solid var(--kc-primary); outline-offset: 2px; }
.ef-horario .nc-chip .material-symbols-outlined { font-size: 18px; vertical-align: -4px; margin-right: 4px; }
.ci-editor .nc-chip .material-symbols-outlined { font-size: 18px; vertical-align: -4px; margin-right: 4px; }
.ef-ayuda-horario { margin: 0; }
.ef-visible { align-items: flex-start; margin-top: 4px; font-weight: 600; line-height: 1.4; }
.ef-visible input { margin-top: 1px; flex: none; }
.ef-duracion { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.ef-duracion .ef-sufijo { width: 130px; }
.ef-duracion .ef-sufijo input { width: 100%; min-height: 46px; padding: 0.7rem 2.6rem 0.7rem 0.9rem; border: 1px solid transparent; border-radius: 12px; background: var(--kc-surface-container-low); font: inherit; font-size: 15px; }
.ef-duracion .ef-sufijo input:focus { outline: none; border-color: var(--kc-primary); background: #fff; box-shadow: 0 0 0 4px rgba(255, 97, 21, 0.14); }
@media (max-width: 560px) { .ef-modos { grid-template-columns: minmax(0, 1fr); } }
@media (hover: none) and (pointer: coarse) { .ef-duracion .ef-sufijo input { font-size: 16px; } }

/* Lo que contestó el estudiante, en el registro */
.rg-contesto { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 8px; margin: 0 0 4px 44px; padding: 10px 12px; border-radius: 10px; background: #f7f8fc; font-size: 14px; min-width: 0; }
.rg-contesto.is-corto { display: block; padding: 6px 10px; color: var(--color-tinta-suave); }
.rg-contesto.is-corto small { color: var(--kc-text-muted); }
.rg-c-tit { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: 13px; font-weight: 700; color: var(--kc-text); }
.rg-c-tit .material-symbols-outlined { font-size: 17px; color: var(--world-curso-b); }
.rg-c-texto { padding: 10px 12px; border-radius: 8px; background: #fff; border: 1px solid var(--kc-border); line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
.rg-c-cod { margin: 0; padding: 10px 12px; border-radius: 8px; background: #fff; border: 1px solid var(--kc-border); font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 13px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.rg-c-nota { margin: 0; font-size: 13px; }
.rg-c-acciones { margin: 0; }
.rg-c-acciones .btn { min-height: 34px; padding: 0.3rem 0.75rem; font-size: 13px; }
.rg-pauta summary { color: var(--kc-primary-text); font-size: 13px; font-weight: 700; cursor: pointer; }
.rg-pauta p { margin: 6px 0 0; white-space: pre-wrap; }
@media (max-width: 560px) { .rg-contesto { margin-left: 0; } }

/* ------------------------------------------------- Tipos de actividad
   Elegir el tipo de actividad, el nivel de logro (las actividades no van a la
   nota), las entregas con archivos y los cuestionarios (public/cuestionario.js). */

.wall-composer-pregunta { flex: 1; margin: 0; font-size: 16px; font-weight: 700; }
/* Cuatro tipos (actividad, tarea, cuestionario, presentación): de a dos por fila. */
.ac-tipos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ac-tipo { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px; border: 1.5px solid var(--kc-border); border-radius: 14px; background: #fff; color: var(--kc-text); font: inherit; text-align: left; cursor: pointer; transition: border-color var(--motion-fast) ease, transform var(--motion-fast) var(--motion-ease); }
.ac-tipo:hover { border-color: var(--kc-primary); transform: translateY(-1px); }
.ac-tipo:focus-visible { outline: 2px solid var(--kc-primary); outline-offset: 2px; }
.ac-tipo .wall-kind-tile { width: 40px; height: 40px; border-radius: 11px; }
.ac-tipo .wall-kind-tile .material-symbols-outlined { font-size: 22px; }
.ac-tipo > span:last-child { display: flex; flex-direction: column; gap: 3px; }
.ac-tipo small { color: var(--kc-text-muted); font-size: 13px; line-height: 1.45; }
.ac-nota, .cq-nota { display: flex; align-items: center; gap: 6px; margin: 0; color: var(--kc-text-muted); font-size: 13px; }
.ac-nota .material-symbols-outlined, .cq-nota .material-symbols-outlined { font-size: 17px; }
.ac-modos { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.ac-modo { display: flex; align-items: flex-start; gap: 10px; padding: 12px; border: 1.5px solid var(--kc-border); border-radius: 12px; background: #fff; color: var(--kc-text); font: inherit; text-align: left; cursor: pointer; }
.ac-modo > .material-symbols-outlined { flex: none; color: var(--world-curso-b); font-size: 22px; }
.ac-modo > span { display: flex; flex-direction: column; gap: 2px; }
.ac-modo small { color: var(--kc-text-muted); font-size: 12.5px; line-height: 1.4; }
.ac-modo[aria-checked="true"] { border-color: var(--kc-primary); background: #fff6f0; box-shadow: 0 0 0 3px rgba(255, 97, 21, 0.12); }
.ac-modo[aria-checked="true"] > .material-symbols-outlined { color: var(--kc-primary); }
@media (max-width: 720px) { .ac-tipos { grid-template-columns: minmax(0, 1fr); } }
.ac-tipo[data-subtipo="tarea"] .wall-kind-tile { background: linear-gradient(135deg, #6f9bff, #2f5fd0); }
.ac-tipo[data-subtipo="cuestionario"] .wall-kind-tile { background: linear-gradient(135deg, #3ccf8e, #12865a); }
.ac-tipo[data-subtipo="presentacion"] .wall-kind-tile { background: linear-gradient(135deg, #9b8cff, #5b45d6); }
.wall-card.k-presentacion .wall-kind-tile, .wall-detail-head .wall-kind-tile.k-presentacion { background: linear-gradient(135deg, #9b8cff, #5b45d6); box-shadow: 0 4px 12px -4px rgba(91, 69, 214, 0.45); }

.wall-card.k-tarea .wall-kind-tile, .wall-detail-head .wall-kind-tile.k-tarea { background: linear-gradient(135deg, #6f9bff, #2f5fd0); box-shadow: 0 4px 12px -4px rgba(47, 95, 208, 0.45); }
.wall-card.k-cuestionario .wall-kind-tile, .wall-detail-head .wall-kind-tile.k-cuestionario { background: linear-gradient(135deg, #3ccf8e, #12865a); box-shadow: 0 4px 12px -4px rgba(18, 134, 90, 0.45); }

/* Nivel de logro */
.logro { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; background: #f1f3f5; color: var(--color-tinta); font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.logro.is-logrado { background: #e3f5ea; color: #1f7a44; }
.logro.is-medio { background: #fff1e1; color: #8a4b00; }
.logro.is-no { background: #ffe4e1; color: #b42318; }
.tag-mal { background: #ffe4e1; color: #b42318; }
.logro-chip[aria-checked="true"].is-logrado { border-color: #1f9d5c; background: #1f9d5c; color: #fff; }
.logro-chip[aria-checked="true"].is-medianamente { border-color: #e07a2e; background: #e07a2e; color: #fff; }
.logro-chip[aria-checked="true"].is-no_logrado { border-color: #c4321f; background: #c4321f; color: #fff; }
.ent-archivos { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: 14px; }
.ent-archivos li { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.ent-subir { font: inherit; font-size: 14px; }

/* Cuestionario: en el detalle del cuadro */
.cq-caja { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--color-linea); }
.cq-bloque { display: flex; flex-direction: column; gap: 14px; }
.cq-acciones { display: flex; flex-wrap: wrap; gap: 8px; }
.cq-bloque > .btn { align-self: flex-start; min-height: 46px; }
.cq-modo { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border-radius: 12px; background: var(--kc-surface-container-low); }
.cq-modo > .material-symbols-outlined { flex: none; color: var(--world-curso-b); font-size: 24px; }
.cq-modo p { margin: 4px 0 0; color: var(--kc-text-muted); font-size: 13.5px; line-height: 1.5; }
.cq-intentos { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.cq-intentos li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 10px 12px; border: 1px solid var(--kc-border); border-radius: 12px; font-size: 14px; }
.cq-intentos li > span:first-child { font-weight: 700; }
.cq-intentos small { color: var(--kc-text-muted); }
.cq-intentos .en-enlace { margin-left: auto; font-size: 13.5px; }
.cq-tabla { padding: 6px 18px; }
.cq-fila { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--kc-border); min-width: 0; }
.cq-fila:first-child { border-top: none; }
.cq-fila-id { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.cq-fila-id small { color: var(--kc-text-muted); font-size: 12.5px; }
.cq-fila-logro { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
/* En qué está cada estudiante (Resultados del cuestionario): los totales filtran la lista. */
.cq-kpi { border: 1.5px solid transparent; font: inherit; text-align: left; cursor: pointer; transition: border-color var(--motion-fast) ease; }
.cq-kpi:hover { border-color: #d9deee; }
.cq-kpi[aria-pressed="true"] { border-color: currentColor; }
.cq-kpi.is-entregado { color: #1f7a3d; }
.cq-kpi.is-respondiendo { color: #b0450d; }
.cq-kpi.is-visto { color: #1d4ed8; }
.cq-kpi.is-novisto { color: #5b6476; }
.cq-kpi strong { color: var(--kc-text); }
.ev-kpis .cq-kpi small { color: inherit; }
.cq-estado { display: inline-flex; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.cq-estado.is-entregado { background: #e7f6ec; color: #1f7a3d; }
.cq-estado.is-respondiendo { background: #fff1e8; color: #b0450d; }
.cq-estado.is-visto { background: #e8f0fe; color: #1d4ed8; }
.cq-estado.is-novisto { background: #f1f3f5; color: #5b6476; }
.cq-dar { display: inline-flex; align-items: center; gap: 2px; font-size: 12.5px; }
.cq-dar .material-symbols-outlined { font-size: 16px; }
.cq-logros { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: -4px 0 12px; color: var(--kc-text-muted); font-size: 13px; }
.cq-fila-logro small { color: var(--kc-text-muted); font-size: 12px; }

/* Cuestionario: respondiendo y la retroalimentación */
.rd-pq-cuerpo.is-bloqueada { pointer-events: none; }
.rd-pq-cuerpo.is-bloqueada .pq-borrar { display: none; }
.rd-pq-cuerpo.is-bloqueada .pq-op[aria-checked="true"] { border-color: #1f9d5c; background: #f1fbf5; box-shadow: none; }
.rd-pq-cuerpo.is-bloqueada .pq-op[aria-checked="true"] .pq-letra { background: #1f9d5c; }
.cq-comprobar { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.cq-comprobar:empty { display: none; }
.cq-fb { display: flex; align-items: flex-start; gap: 10px; width: 100%; padding: 12px 14px; border-radius: 12px; background: var(--kc-surface-container-low); line-height: 1.5; }
.cq-fb > .material-symbols-outlined { flex: none; font-size: 22px; }
.cq-fb p { margin: 4px 0 0; }
.cq-fb small { display: block; margin-top: 2px; color: var(--kc-text-muted); }
.cq-fb.is-bien { background: #e3f5ea; color: #155c34; }
.cq-fb.is-mal { background: #fff1f0; color: #9f2a1b; }
.cq-explica { display: flex; align-items: flex-start; gap: 8px; margin-top: 8px; padding: 10px 12px; border-radius: 10px; background: #fff; border: 1px solid var(--kc-border); color: var(--kc-text); }
.cq-explica > .material-symbols-outlined { flex: none; color: var(--world-curso-b); font-size: 19px; }
.cq-logro { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 20px 22px; }
.cq-logro .logro { padding: 6px 14px; font-size: 16px; }
.cq-logro p { margin: 0; line-height: 1.55; }
.cq-logro small { color: var(--kc-text-muted); }
.cq-h2 { margin: 6px 0 0; font-size: 18px; }
.cq-revision { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; }
.cq-revision > li { display: flex; flex-direction: column; gap: 10px; padding: 16px 18px; }
.cq-rev-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.cq-rev-enunciado { font-size: 15.5px; }
.cq-hueco { display: inline-block; min-width: 60px; border-bottom: 2px solid var(--kc-border); }
.cq-ops { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.cq-ops li { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 8px 12px; border: 1.5px solid var(--kc-border); border-radius: 12px; }
.cq-ops li .tx { flex: 1; min-width: 0; }
.cq-ops li.is-buena { border-color: #9ad8b5; background: #f1fbf5; }
.cq-ops li.is-mala { border-color: #f3b4ab; background: #fff5f4; }
.cq-letra { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--kc-surface-container-low); font-size: 13px; font-weight: 700; }
.cq-letra .material-symbols-outlined { font-size: 18px; }
.cq-ops li.is-buena .cq-letra { background: #1f9d5c; color: #fff; }
.cq-ops li.is-mala .cq-letra { background: #c4321f; color: #fff; }
.cq-tuya, .cq-ok { font-size: 12px; font-weight: 700; }
.cq-tuya { color: var(--kc-text-muted); }
.cq-ok { color: #1f7a44; }
.cq-linea { margin: 0; font-size: 14.5px; }
.cq-linea span { color: var(--kc-text-muted); }
.cq-sub { margin: 0; font-size: 13px; font-weight: 700; }

@media (prefers-reduced-motion: reduce) {
  .auth-form-card, .auth-form-icon, .auth-notice, .auth-error, .pagina, .app-user-menu, .dlg, .dlg::backdrop, .rd, .rd-reloj.is-muy-poco { animation: none; }
  .app-sidenav, .app-sidenav-label { transition: none !important; }
}

/* Corregir con la cámara (public/escaner.js): el video a pantalla completa, el marco
   de las esquinas encontradas y, abajo, el estado y las hojas ya corregidas. */
html.esc-abierto { overflow: hidden; }
.esc { position: fixed; inset: 0; z-index: 9000; background: #000; color: #fff; }
.esc-video, .esc-marco { position: absolute; inset: 0; width: 100%; height: 100%; }
.esc-video { object-fit: cover; }
.esc.is-flash::after { content: ""; position: absolute; inset: 0; background: rgba(255, 255, 255, 0.55); pointer-events: none; }
.esc-arriba { position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 10px; padding: max(12px, env(safe-area-inset-top)) 14px 12px; background: linear-gradient(rgba(0, 0, 0, 0.6), transparent); }
.esc-x { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: none; border-radius: 50%; background: rgba(255, 255, 255, 0.16); color: #fff; cursor: pointer; }
.esc-titulo { display: flex; flex-direction: column; }
.esc-titulo small { color: rgba(255, 255, 255, 0.75); }
.esc-abajo { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; gap: 8px; max-height: 55%; padding: 12px 14px max(14px, env(safe-area-inset-bottom)); background: rgba(16, 20, 30, 0.88); }
.esc-estado { margin: 0; padding: 8px 12px; border-radius: 10px; background: rgba(255, 255, 255, 0.1); font-size: 15px; }
.esc-estado.is-ok { background: #1f7a44; }
.esc-estado.is-mal { background: #b42318; }
.esc-elegir { display: flex; flex-direction: column; gap: 8px; overflow-y: auto; }
.esc-elegir p { margin: 0; }
.esc-nombres { display: flex; flex-wrap: wrap; gap: 6px; }
.esc-elegir .en-enlace { align-self: flex-start; color: #ffb48f; }
.esc-lista { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; overflow-y: auto; list-style: none; }
.esc-lista li { display: flex; align-items: center; gap: 8px; }
.esc-lista li .material-symbols-outlined { color: #4ade80; }
.esc-lista li span { display: flex; flex-direction: column; }
.esc-lista small { color: rgba(255, 255, 255, 0.75); }
.esc-lista .esc-duda { color: #fbbf24; }
.esc-fin { align-self: stretch; }

/* Diseño de laboratorio para las preguntas de código (como el Onramp de Matlab, con
   nuestra letra y colores): la tarea a la izquierda y las casillas a la derecha, a todo
   el ancho; el navegador de preguntas baja desde el botón de la barra. */
.rd-examen.is-lab .rd-cuerpo { grid-template-columns: minmax(0, 1fr); max-width: none; padding: 0; gap: 0; }
.rd-examen.is-lab .rd-mapa-btn { display: inline-flex; }
.rd-examen.is-lab .rd-mapa { position: fixed; top: 61px; right: 16px; z-index: 4; width: min(320px, calc(100vw - 32px)); max-height: calc(100dvh - 80px); box-shadow: 0 24px 40px -20px rgba(15, 23, 36, 0.4); transform: translateY(-120%); visibility: hidden; transition: transform 0.25s ease, visibility 0.25s; }
.rd-examen.is-lab.is-mapa .rd-mapa { transform: none; visibility: visible; }
.rd-lab { display: grid; grid-template-columns: minmax(320px, 0.32fr) minmax(0, 1fr); min-height: calc(100dvh - 61px); }
.rd-lab-tarea { display: flex; flex-direction: column; gap: 16px; min-width: 0; padding: 22px 22px 26px; border-right: 1px solid var(--kc-border); background: #fff; }
.rd-lab-tarea .rd-pasos { margin-top: auto; padding-top: 8px; }
.rd-lab-editor { min-width: 0; padding: 18px 24px 40px; }
.rd-lab-editor .rd-pq-cuerpo { padding: 0; border: none; background: transparent; box-shadow: none; }
.rd-lab-panel { display: flex; flex-direction: column; gap: 12px; }
.rd-lab-panel .pq-entrega { flex-direction: column; align-items: stretch; }
.rd-lab-panel .pq-estado { min-width: 0; }
/* El contexto de la pregunta («Pregunta N»), sobre la tarea: neutro, para que la tarea resalte. */
.lab-tema { margin: -4px 0 0; color: var(--kc-text); font-size: 18px; font-weight: 700; line-height: 1.35; }
.lab-tema > p { margin: 0; }
.lab-contexto { padding: 14px 16px; border: 1px solid var(--kc-border); border-radius: 12px; background: #f7f8fd; font-size: 15px; }
.lab-contexto-tit { margin: 0 0 6px; color: var(--kc-text); font-size: 11.5px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }
.lab-contexto .tx > :last-child { margin-bottom: 0; }
/* La pista que pide el estudiante («Ver una pista», cuestionarios): breve, con funciones útiles. */
.lab-pista { align-self: stretch; padding: 12px 14px; border: 1px dashed #e7c3ad; border-radius: 12px; background: #fffbf7; font-size: 14.5px; }
.lab-pista-tit { display: flex; align-items: center; gap: 6px; margin: 0 0 6px; color: var(--kc-primary-text); font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.lab-pista-tit .material-symbols-outlined { font-size: 18px; }
.lab-pista .tx > :last-child { margin-bottom: 0; }
.lab-pista code { font-size: 13px; }
/* En el laboratorio el código lleva más ancho que la salida (angosto: una columna, como siempre). */
@container (min-width: 521px) {
  .rd-lab-editor .cl, .rd-lab-editor .cl-cabeceras { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
}
.lab-tarea { padding: 14px 16px; border: 1px solid #ffd2bd; border-left: 4px solid var(--kc-primary); border-radius: 12px; background: #fff7f2; font-size: 15px; }
.lab-tarea-tit { margin: 0 0 6px; color: var(--kc-primary); font-size: 11.5px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }
.lab-tarea .pq-enunciado { margin: 0; font-size: 15px; }
.cl-titulo { margin-left: 8px; color: var(--kc-text); font-size: 13.5px; font-weight: 700; }
/* En pantallas angostas, una sola columna en el orden de trabajo: la tarea, el código,
   la entrega y recién después Anterior / Siguiente. */
@media (max-width: 900px) {
  .rd-lab { display: flex; flex-direction: column; gap: 14px; min-height: 0; padding: 16px 16px 32px; }
  .rd-lab-tarea, .rd-lab-panel { display: contents; }
  .rd-lab-editor { order: 2; padding: 0; }
  .rd-lab .pq-entrega, .rd-lab .cq-comprobar { order: 3; }
  .rd-lab .rd-pasos { order: 4; margin-top: 4px; padding-top: 0; }
  .rd-examen.is-lab .rd-mapa { right: 0; left: 0; width: auto; border-radius: 0 0 18px 18px; }
}

/* -------------------------------------------- términos y privacidad (19 oct 2026)
   Páginas de texto corto que pide Google para el ingreso; el enlace va al pie del
   ingreso (.auth-legal). */
.legal { max-width: 680px; margin: 0 auto; padding: 32px 16px 56px; color: #1e252d; }
.legal-marca { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 28px; color: var(--kc-text); font-size: 17px; font-weight: 700; text-decoration: none; }
.legal-marca img { width: 36px; height: 36px; }
.legal h1 { margin: 0; font-size: 30px; line-height: 1.2; letter-spacing: -0.01em; }
.legal-fecha { margin: 6px 0 24px; color: var(--color-tinta-suave); font-size: 14px; }
.legal h2 { margin: 28px 0 8px; font-size: 18px; }
.legal p, .legal ul { margin: 0 0 12px; }
.legal ul { padding-left: 1.2em; }
.legal li { margin-bottom: 6px; }
.legal li::marker { color: var(--kc-primary); }
.legal a { color: var(--kc-primary-text); text-underline-offset: 2px; }
.legal-pie { margin-top: 40px !important; padding-top: 16px; border-top: 1px solid var(--kc-border); color: var(--color-tinta-suave); font-size: 14px; }
.auth-legal { margin: 20px 0 0; color: #9aa3ad; font-size: 13px; text-align: center; animation: auth-card-in 900ms cubic-bezier(0.2, 0.8, 0.2, 1) 150ms backwards; }
.auth-legal a { color: inherit; text-underline-offset: 2px; }

/* ------------------------------------------------- dentro de la app del teléfono
   (public/en-app.js): la página llega bajo la hora y la barra de inicio, así que las
   barras fijas se apartan con las áreas seguras. */
html.en-app .app-topbar { height: calc(84px + env(safe-area-inset-top, 0px)); padding-top: env(safe-area-inset-top, 0px); }
html.en-app .rd-barra { padding-top: max(10px, env(safe-area-inset-top, 0px)); }
@media (max-width: 767px) {
  html.en-app .app-topbar { height: calc(68px + env(safe-area-inset-top, 0px)); }
  html.en-app .dlg { padding-top: env(safe-area-inset-top, 0px); }
}

/* ---------------------------------------------- cuestionario en vivo (19 oct 2026)
   El profesor ve lo que lleva cada estudiante y lo proyecta (public/cuestionario.js →
   abrirVivo): letra más grande, para que se lea desde lejos. */
.cq-vivo-ayuda { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 12px; color: var(--kc-text-muted); font-size: 13.5px; }
.cq-vivo-ayuda .material-symbols-outlined { font-size: 18px; color: var(--kc-primary); }
.cq-mostrar { min-height: 34px; padding: 4px 12px; font-size: 13px; }
.cq-vivo .rd-barra { flex-wrap: wrap; }
.vv-est { min-height: 38px; max-width: 260px; padding: 0 10px; border: 1px solid #d9deee; border-radius: 10px; background: #fff; font: inherit; font-size: 14px; }
.vv-check { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; cursor: pointer; }
.vv-check input { width: 16px; height: 16px; accent-color: var(--kc-primary); }
.vv-punto { display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: #16a34a; animation: vv-late 1.6s ease-in-out infinite; }
@keyframes vv-late { 50% { opacity: 0.35; } }
.vv-nav { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 16px; border-bottom: 1px solid var(--kc-border); background: #fff; }
.vv-n { position: relative; min-width: 36px; height: 36px; padding: 0 8px; border: 1px solid #d9deee; border-radius: 10px; background: #fff; color: var(--kc-text); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.vv-n.is-con { background: #f2f3ff; }
.vv-n.is-actual { border-color: var(--kc-primary); background: var(--kc-primary); color: #fff; }
/* La pregunta en que está trabajando el estudiante: un punto verde. */
.vv-n.is-aqui::after { content: ""; position: absolute; top: -3px; right: -3px; width: 10px; height: 10px; border: 2px solid #fff; border-radius: 50%; background: #16a34a; }
.vv-aqui { color: #15803d; font-weight: 700; }
.vv-sub { margin: 0 0 8px; color: var(--kc-text-muted); font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.cq-vivo .lab-tarea, .cq-vivo .lab-contexto, .cq-vivo .lab-tarea .pq-enunciado { font-size: 17px; }
.cq-vivo .lab-tema { font-size: 21px; }
.cq-vivo .cl-lectura .cl-pre { font-size: 15.5px; line-height: 24px; }
.cq-vivo .cl-sal { font-size: 15px; }
.vv-ops { display: flex; flex-direction: column; gap: 8px; }
.vv-op { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border: 1.5px solid #e1e5f0; border-radius: 12px; background: #fff; font-size: 17px; }
.vv-op.is-elegida { border-color: var(--kc-primary); background: #fff7f2; }
.vv-op .tx > :last-child { margin-bottom: 0; }

/* ═══════════ QuizLap (20 oct 2026) ═══════════
   La competencia en vivo del Aula digital, copiada de Aulapp
   (apps/web/src/components/quizlap/quizlap.css): mismas clases ql-*, el naranjo
   del Aula digital, fondo blanco e Inter. El verde y el rojo solo dicen correcta
   o incorrecta. Todo cabe a 375 px. */
.ql-stage, .ql-banner, .ql-setup, .ql-results { --world-aula-a: #ff9a4d; --world-aula-b: #ff6115; }
/* ───────────── escenario a pantalla completa ───────────── */
.ql-stage {
  position: fixed;
  inset: 0;
  z-index: 900;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  overflow-y: auto;
  background: var(--kc-surface, #fff);
  color: var(--kc-text, #131b2e);
  font-family: inherit;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
.ql-stage *, .ql-stage *::before, .ql-stage *::after { box-sizing: border-box; }

.ql-timebar { position: relative; flex: none; height: 10px; background: var(--kc-surface-container, #eaedff); overflow: hidden; }
.ql-timebar-fill {
  position: absolute;
  inset: 0;
  transform-origin: right center; /* se consume de izquierda a derecha */
  background: var(--world-aula-b);
  animation: ql-drain var(--ql-ms, 10000ms) linear forwards, ql-hurry var(--ql-ms, 10000ms) linear forwards;
}
.ql-timebar.is-idle .ql-timebar-fill { animation: none; transform: scaleX(0); }
@keyframes ql-drain { from { transform: scaleX(var(--ql-from, 1)); } to { transform: scaleX(0); } }
@keyframes ql-hurry { 0%, 60% { background: var(--world-aula-a); } 80% { background: var(--world-aula-b); } 100% { background: var(--kc-error, #ba1a1a); } }

.ql-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 20px; flex-wrap: wrap; }
.ql-brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.ql-brand-text { min-width: 0; }
.ql-brand-title { margin: 0; font-size: 17px; font-weight: 800; line-height: 1.2; overflow-wrap: anywhere; }
.ql-brand-sub { margin: 0; font-size: 13px; color: var(--kc-text-muted, #5a6170); overflow-wrap: anywhere; }
.ql-head-right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-left: auto; }

.ql-bolt { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 44px; height: 44px; border-radius: 14px; color: #fff; background: linear-gradient(135deg, var(--world-aula-a), var(--world-aula-b)); box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--world-aula-b) 60%, transparent); }
.ql-bolt .material-symbols-outlined { font-size: 28px; font-variation-settings: "FILL" 1; }
.ql-bolt.is-xl { width: 112px; height: 112px; border-radius: 32px; }
.ql-bolt.is-xl .material-symbols-outlined { font-size: 76px; }
.ql-bolt.is-sm { width: 36px; height: 36px; border-radius: 11px; }
.ql-bolt.is-sm .material-symbols-outlined { font-size: 22px; }
.ql-bolt.is-pulse { animation: ql-pulse 1.6s ease-in-out infinite; }
@keyframes ql-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.07); } }

.ql-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; font-size: 13px; font-weight: 700; background: var(--kc-surface-container-low, #f2f3ff); color: var(--kc-text, #131b2e); white-space: nowrap; }
.ql-chip .material-symbols-outlined { font-size: 17px; }
.ql-chip.is-hot { background: color-mix(in srgb, var(--world-aula-b) 14%, transparent); color: var(--world-aula-b); }
.ql-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--kc-border, #e4e7f6); background: var(--kc-surface, #fff); color: var(--kc-text, #131b2e); cursor: pointer; }
.ql-sound-picker { display: flex; flex-direction: column; gap: 9px; width: 100%; padding: 13px; border: 1px solid var(--kc-border, #e4e7f6); border-radius: 16px; background: var(--kc-surface-container-low, #f7f7ff); }
.ql-sound-picker.is-compact { width: min(760px, 100%); }
.ql-sound-title { display: flex; align-items: center; gap: 9px; text-align: left; }
.ql-sound-glyph { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 32px; height: 32px; border-radius: 10px; background: color-mix(in srgb, var(--world-aula-b) 12%, transparent); color: var(--world-aula-b); font: 800 22px/1 system-ui, sans-serif; }
.ql-sound-title > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.ql-sound-title small, .ql-sound-option small { color: var(--kc-text-muted, #5a6170); font-size: 12px; font-weight: 500; }
.ql-sound-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ql-sound-option { display: grid; grid-template-columns: 34px minmax(0, 1fr) 22px; align-items: center; gap: 8px; min-width: 0; min-height: 70px; overflow: hidden; padding: 9px 10px; border: 2px solid var(--kc-border, #e4e7f6); border-radius: 13px; background: var(--kc-surface, #fff); color: inherit; font: inherit; text-align: left; cursor: pointer; }
.ql-sound-option:hover { border-color: color-mix(in srgb, var(--world-aula-b) 55%, var(--kc-border, #e4e7f6)); }
.ql-sound-option.is-active { border-color: var(--world-aula-b); background: color-mix(in srgb, var(--world-aula-b) 7%, var(--kc-surface, #fff)); }
.ql-sound-copy { display: flex; flex-direction: column; min-width: 0; overflow-wrap: anywhere; }
.ql-sound-option strong { font-size: 14px; line-height: 1.2; }
.ql-sound-play { display: inline-flex; align-items: center; justify-content: center; gap: 2px; width: 34px; height: 34px; border-radius: 50%; background: color-mix(in srgb, var(--world-aula-b) 12%, transparent); color: var(--world-aula-b); font: 800 15px/1 system-ui, sans-serif; }
.ql-sound-play.is-playing i { display: block; width: 3px; border-radius: 3px; background: currentColor; animation: ql-sound-bar 0.62s ease-in-out infinite alternate; }
.ql-sound-play.is-playing i:nth-child(1) { height: 9px; }
.ql-sound-play.is-playing i:nth-child(2) { height: 17px; animation-delay: -0.26s; }
.ql-sound-play.is-playing i:nth-child(3) { height: 12px; animation-delay: -0.43s; }
@keyframes ql-sound-bar { to { height: 5px; opacity: 0.55; } }
.ql-sound-check { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--kc-success, #006c49); color: #fff; font: 800 14px/1 system-ui, sans-serif; }
.ql-sound-note { margin: 0; font-size: 12px; color: var(--kc-text-muted, #5a6170); }
@media (max-width: 760px) { .ql-sound-options { grid-template-columns: minmax(0, 1fr); } }
.ql-icon-btn:hover { border-color: var(--world-aula-b); color: var(--world-aula-b); }
.ql-icon-btn .material-symbols-outlined { font-size: 21px; }

.ql-main { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; width: min(1180px, 100%); margin: 0 auto; padding: 12px 20px 20px; min-width: 0; }
.ql-foot { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; padding: 0 20px 20px; }
.ql-foot .btn { min-height: 46px; }
.ql-big-btn { min-height: 56px !important; padding: 0.6em 1.6em !important; font-size: 18px !important; border-radius: 16px !important; }
.ql-note { margin: 0; font-size: 14px; color: var(--kc-text-muted, #5a6170); text-align: center; }
.ql-error { margin: 0; font-size: 14px; color: var(--kc-error-text, #93000a); text-align: center; }
.ql-reconnect { position: fixed; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 2; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: var(--kc-charcoal, #1e252d); color: #fff; font-size: 13px; font-weight: 600; }

/* ───────────── sala de espera ───────────── */
.ql-lobby { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; max-width: 900px; }
.ql-lobby h1 { margin: 0; font-size: clamp(28px, 4.6vw, 54px); font-weight: 800; line-height: 1.1; overflow-wrap: anywhere; }
.ql-lobby-how { margin: 0; font-size: clamp(15px, 1.7vw, 20px); color: var(--kc-text-muted, #5a6170); }
.ql-chip-survey { display: inline-flex; align-items: center; gap: 6px; margin-left: 8px; }
.ql-opt-votes { flex: none; margin-left: auto; display: inline-flex; align-items: baseline; gap: 4px; position: relative; font-variant-numeric: tabular-nums; }
.ql-opt-votes b { font-size: 1.35em; font-weight: 800; }
.ql-opt-votes small { font-size: 0.7em; opacity: 0.7; }
.ql-options.is-survey { width: 100%; margin-top: 14px; text-align: left; }
.ql-qr { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 24px; padding: 16px 24px; border-radius: 20px; background: #fff; color: #131b2e; box-shadow: 0 10px 30px -18px rgba(15, 23, 36, 0.45); }
.ql-qr svg { width: min(220px, 60vw); height: auto; }
.ql-qr > div { display: flex; flex-direction: column; gap: 2px; font-size: 18px; text-align: left; }
.ql-codigo { font-size: 30px; font-variant-numeric: tabular-nums; letter-spacing: 0.08em; color: #c2410c; }
.ql-invitar { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 24px; text-align: center; }
.ql-invitar .ql-qr { box-shadow: none; padding: 0; }
.ql-invitar .ql-qr svg { width: min(300px, 70vw); }
.ql-players { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 100%; }
.ql-player { padding: 7px 14px; border-radius: 999px; background: var(--kc-surface-container-low, #f2f3ff); font-weight: 700; font-size: clamp(14px, 1.5vw, 18px); animation: ql-chip-in 0.4s var(--motion-ease, ease) both; overflow-wrap: anywhere; }
.ql-player.is-me { background: color-mix(in srgb, var(--world-aula-b) 16%, transparent); color: var(--world-aula-b); }
@keyframes ql-chip-in { from { opacity: 0; transform: scale(0.6) translateY(8px); } to { opacity: 1; transform: none; } }
.ql-count-players { font-size: clamp(15px, 1.6vw, 19px); font-weight: 700; }

/* ───────────── cuenta regresiva y bonus ───────────── */
.ql-countdown { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.ql-countdown-label { margin: 0; font-size: clamp(18px, 2.4vw, 30px); font-weight: 800; color: var(--kc-text-muted, #5a6170); }
.ql-countdown-num { font-size: clamp(120px, 30vw, 300px); font-weight: 900; line-height: 1; color: var(--world-aula-b); font-variant-numeric: tabular-nums; animation: ql-num 1s ease-out both; }
@keyframes ql-num { 0% { transform: scale(1.6); opacity: 0; } 25% { transform: scale(1); opacity: 1; } 85% { opacity: 1; } 100% { transform: scale(0.85); opacity: 0.2; } }
.ql-bonus { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; animation: ql-bonus-in 0.6s var(--motion-ease, ease) both; }
.ql-bonus h1 { margin: 0; font-size: clamp(40px, 9vw, 110px); font-weight: 900; line-height: 1; background: linear-gradient(135deg, var(--world-aula-a), var(--world-aula-b)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ql-bonus p { margin: 0; font-size: clamp(18px, 3vw, 32px); font-weight: 800; }
@keyframes ql-bonus-in { from { transform: scale(0.5) rotate(-6deg); opacity: 0; } to { transform: none; opacity: 1; } }

/* ───────────── pregunta ───────────── */
.ql-qhead { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; }
.ql-bonus-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; font-size: 13px; font-weight: 800; color: #fff; background: linear-gradient(135deg, var(--world-aula-a), var(--world-aula-b)); }
.ql-bonus-chip .material-symbols-outlined { font-size: 17px; font-variation-settings: "FILL" 1; }
.ql-prompt { margin: 0; max-width: 980px; text-align: center; font-size: clamp(24px, 3.4vw, 46px); font-weight: 800; line-height: 1.2; overflow-wrap: anywhere; animation: ql-rise 0.35s ease-out both; }
@keyframes ql-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.ql-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; width: 100%; }
.ql-opt { position: relative; display: flex; align-items: center; gap: 14px; min-height: 72px; padding: 14px 18px; border: 2px solid var(--kc-border, #e4e7f6); border-radius: 18px; background: var(--kc-surface, #fff); color: inherit; font: inherit; font-size: clamp(18px, 2.2vw, 30px); font-weight: 700; text-align: left; overflow: hidden; min-width: 0; animation: ql-rise 0.35s ease-out both; transition: border-color 0.15s ease, opacity 0.25s ease, transform 0.1s ease; }
.ql-opt:nth-child(2) { animation-delay: 60ms; }
.ql-opt:nth-child(3) { animation-delay: 120ms; }
.ql-opt:nth-child(4) { animation-delay: 180ms; }
button.ql-opt { cursor: pointer; }
button.ql-opt:active:not(:disabled) { transform: scale(0.98); }
.ql-opt > * { position: relative; z-index: 1; }
.ql-opt-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.ql-opt-letter { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 40px; height: 40px; border-radius: 12px; font-size: 18px; font-weight: 900; background: color-mix(in srgb, var(--world-aula-b) 14%, transparent); color: var(--world-aula-b); }
.ql-opt-bar { position: absolute !important; inset: 0 auto 0 0; z-index: 0 !important; width: var(--pct, 0%); background: color-mix(in srgb, var(--world-aula-b) 10%, transparent); transition: width 0.7s ease-out; }
.ql-opt-count { flex: none; font-weight: 900; font-variant-numeric: tabular-nums; }
.ql-opt.is-picked { border-color: var(--world-aula-b); box-shadow: 0 0 0 3px color-mix(in srgb, var(--world-aula-b) 22%, transparent); }
.ql-opt.is-picked .ql-opt-letter { background: var(--world-aula-b); color: #fff; }
.ql-opt.is-correct { border-color: var(--kc-success, #006c49); background: var(--kc-success-bg, #e3f9ef); }
.ql-opt.is-correct .ql-opt-letter { background: var(--kc-success, #006c49); color: #fff; }
.ql-opt.is-correct .ql-opt-bar { background: color-mix(in srgb, var(--kc-success, #006c49) 16%, transparent); }
.ql-opt.is-wrong { border-color: var(--kc-error, #ba1a1a); background: var(--kc-error-bg, #ffdad6); }
.ql-opt.is-wrong .ql-opt-letter { background: var(--kc-error, #ba1a1a); color: #fff; }
.ql-opt.is-dim { opacity: 0.42; }
.ql-opt-mark { flex: none; font-size: 28px !important; color: var(--kc-success, #006c49); font-variation-settings: "FILL" 1; }

.ql-qfoot { display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap; width: 100%; }
.ql-secs { display: inline-flex; align-items: center; justify-content: center; width: 76px; height: 76px; border-radius: 50%; font-size: 34px; font-weight: 900; font-variant-numeric: tabular-nums; color: var(--world-aula-b); border: 4px solid color-mix(in srgb, var(--world-aula-b) 30%, transparent); }
.ql-secs.is-hurry { color: var(--kc-error, #ba1a1a); border-color: color-mix(in srgb, var(--kc-error, #ba1a1a) 40%, transparent); animation: ql-pulse 0.5s ease-in-out infinite; }
.ql-answered { display: flex; flex-direction: column; gap: 6px; min-width: min(320px, 100%); }
.ql-answered-text { font-size: 17px; font-weight: 700; }
.ql-meter { height: 10px; border-radius: 999px; background: var(--kc-surface-container, #eaedff); overflow: hidden; }
.ql-meter > span { display: block; height: 100%; width: var(--pct, 0%); background: linear-gradient(90deg, var(--world-aula-a), var(--world-aula-b)); transition: width 0.3s ease-out; }
.ql-pause-note { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; color: var(--kc-warn-text, #653e00); }

/* ───────────── resultado del estudiante ───────────── */
.ql-result { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; animation: ql-rise 0.3s ease-out both; }
.ql-result-icon { display: inline-flex; align-items: center; justify-content: center; width: 88px; height: 88px; border-radius: 50%; }
.ql-result-icon .material-symbols-outlined { font-size: 56px; font-variation-settings: "FILL" 1, "wght" 600; }
.ql-result-icon.is-ok { background: var(--kc-success-bg, #e3f9ef); color: var(--kc-success, #006c49); animation: ql-pop 0.5s var(--motion-ease, ease) both; }
.ql-result-icon.is-bad { background: var(--kc-error-bg, #ffdad6); color: var(--kc-error, #ba1a1a); animation: ql-shake 0.45s ease both; }
.ql-result-icon.is-none { background: var(--kc-surface-container, #eaedff); color: var(--kc-text-muted, #5a6170); }
@keyframes ql-pop { 0% { transform: scale(0.3); } 70% { transform: scale(1.12); } 100% { transform: scale(1); } }
@keyframes ql-shake { 0%, 100% { transform: translateX(0); } 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }
.ql-result h2 { margin: 0; font-size: 26px; font-weight: 900; }
.ql-points { font-size: clamp(48px, 16vw, 84px); font-weight: 900; line-height: 1; color: var(--world-aula-b); font-variant-numeric: tabular-nums; animation: ql-points 0.6s var(--motion-ease, ease) both; }
.ql-points.is-zero { color: var(--kc-text-muted, #5a6170); }
@keyframes ql-points { 0% { transform: translateY(18px) scale(0.6); opacity: 0; } 100% { transform: none; opacity: 1; } }
.ql-result-sub { margin: 0; font-size: 15px; color: var(--kc-text-muted, #5a6170); overflow-wrap: anywhere; }
.ql-place { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; padding: 12px 18px; border-radius: 16px; background: var(--kc-surface-container-low, #f2f3ff); font-size: 18px; }
.ql-place strong { font-size: 22px; font-weight: 900; }
.ql-streak { display: inline-flex; align-items: center; gap: 4px; font-weight: 800; color: var(--world-aula-b); }
.ql-streak .material-symbols-outlined { font-variation-settings: "FILL" 1; }
.ql-total { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; font-variant-numeric: tabular-nums; }

/* ───────────── ranking ───────────── */
.ql-rank { display: flex; flex-direction: column; gap: 8px; width: min(760px, 100%); margin: 0; padding: 0; list-style: none; }
.ql-rank-title { margin: 0; font-size: clamp(20px, 2.6vw, 32px); font-weight: 900; text-align: center; }
.ql-rank-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto 34px; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 16px; border: 1px solid var(--kc-border, #e4e7f6); background: var(--kc-surface, #fff); font-size: clamp(16px, 1.9vw, 24px); animation: ql-row-in 0.45s var(--motion-ease, ease) both; animation-delay: calc(var(--i, 0) * 70ms); }
.ql-rank-row.is-me { border-color: var(--world-aula-b); box-shadow: 0 0 0 2px color-mix(in srgb, var(--world-aula-b) 25%, transparent); }
@keyframes ql-row-in { from { opacity: 0; transform: translateX(-24px); } to { opacity: 1; transform: none; } }
.ql-rank-pos { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; font-weight: 900; background: var(--kc-surface-container-low, #f2f3ff); font-variant-numeric: tabular-nums; }
.ql-rank-row.is-top .ql-rank-pos { color: #fff; background: linear-gradient(135deg, var(--world-aula-a), var(--world-aula-b)); }
.ql-rank-name { font-weight: 800; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ql-rank-pts { font-weight: 900; font-variant-numeric: tabular-nums; }
.ql-rank-pts small { font-size: 0.6em; font-weight: 700; color: var(--kc-text-muted, #5a6170); margin-left: 2px; }
.ql-delta { display: inline-flex; align-items: center; justify-content: flex-end; font-size: 14px; font-weight: 800; }
.ql-delta .material-symbols-outlined { font-size: 18px; }
.ql-delta.is-up { color: var(--kc-success, #006c49); }
.ql-delta.is-down { color: var(--kc-error, #ba1a1a); }
.ql-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; width: 100%; align-items: start; }
.ql-two > div { display: flex; flex-direction: column; align-items: center; gap: 12px; min-width: 0; }

/* ───────────── podio ───────────── */
.ql-podium { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: 12px; width: min(720px, 100%); }
.ql-podium-col { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; }
.ql-podium-name { font-size: clamp(15px, 2vw, 24px); font-weight: 900; text-align: center; overflow-wrap: anywhere; animation: ql-rise 0.4s ease-out both; animation-delay: var(--d, 0s); }
.ql-podium-pts { font-size: clamp(13px, 1.6vw, 18px); font-weight: 800; color: var(--kc-text-muted, #5a6170); }
.ql-podium-block { display: flex; align-items: flex-start; justify-content: center; width: 100%; padding-top: 10px; border-radius: 18px 18px 6px 6px; color: #fff; font-size: clamp(28px, 4vw, 52px); font-weight: 900; background: linear-gradient(180deg, var(--world-aula-a), var(--world-aula-b)); transform-origin: bottom; animation: ql-grow 0.8s var(--motion-ease, ease) both; animation-delay: var(--d, 0s); }
.ql-podium-col:nth-child(1) .ql-podium-block { height: clamp(90px, 16vw, 170px); opacity: 0.85; }
.ql-podium-col:nth-child(2) .ql-podium-block { height: clamp(130px, 23vw, 240px); }
.ql-podium-col:nth-child(3) .ql-podium-block { height: clamp(70px, 12vw, 130px); opacity: 0.72; }
.ql-podium-trophy { font-size: clamp(34px, 5vw, 56px) !important; color: var(--world-aula-b); font-variation-settings: "FILL" 1; animation: ql-pop 0.6s var(--motion-ease, ease) both; animation-delay: 1s; }
@keyframes ql-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }

/* ───────────── cajón del ranking (docente) ───────────── */
.ql-drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 3; width: min(420px, 100%); display: flex; flex-direction: column; gap: 12px; padding: calc(16px + env(safe-area-inset-top)) 16px 16px; background: var(--kc-surface, #fff); border-left: 1px solid var(--kc-border, #e4e7f6); box-shadow: -20px 0 50px rgba(19, 27, 46, 0.18); overflow-y: auto; animation: ql-drawer-in 0.25s ease-out both; }
.ql-drawer .ql-rank-row { font-size: 16px; grid-template-columns: 40px minmax(0, 1fr) auto 30px; animation: none; }
.ql-drawer-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ql-drawer-head h2 { margin: 0; font-size: 20px; font-weight: 900; }
@keyframes ql-drawer-in { from { transform: translateX(40px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ───────────── franja «en vivo» y armado (dentro del Aula digital) ───────────── */
.ql-banner { display: flex; align-items: center; gap: 14px; padding: 14px 16px; margin-bottom: 14px; border-radius: 16px; border: 1px solid color-mix(in srgb, var(--world-aula-b) 35%, var(--kc-border, #e4e7f6)); background: color-mix(in srgb, var(--world-aula-b) 7%, var(--kc-surface, #fff)); flex-wrap: wrap; }
.ql-banner-body { flex: 1; min-width: min(200px, 100%); }
.ql-banner-title { display: flex; align-items: center; gap: 8px; margin: 0; font-weight: 900; font-size: 16px; overflow-wrap: anywhere; }
.ql-banner-sub { margin: 2px 0 0; font-size: 13px; color: var(--kc-text-muted, #5a6170); overflow-wrap: anywhere; }
.ql-live-dot { width: 10px; height: 10px; flex: none; border-radius: 50%; background: var(--world-aula-b); box-shadow: 0 0 0 0 color-mix(in srgb, var(--world-aula-b) 60%, transparent); animation: ql-live 1.4s ease-out infinite; }
@keyframes ql-live { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--world-aula-b) 60%, transparent); } 100% { box-shadow: 0 0 0 10px transparent; } }
.ql-banner .btn { flex: none; }

.ql-setup { display: flex; flex-direction: column; gap: 14px; }
.ql-setup-head { display: flex; align-items: center; gap: 12px; }
.ql-setup-head h2 { margin: 0; font-size: 19px; font-weight: 900; }
.ql-setup-head p { margin: 2px 0 0; font-size: 13px; color: var(--kc-text-muted, #5a6170); }
.ql-topics { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); gap: 10px; }
.ql-topic { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 12px 14px; border-radius: 14px; border: 2px solid var(--kc-border, #e4e7f6); background: var(--kc-surface, #fff); color: inherit; font: inherit; text-align: left; cursor: pointer; min-width: 0; }
.ql-topic:hover { border-color: color-mix(in srgb, var(--world-aula-b) 50%, var(--kc-border, #e4e7f6)); }
.ql-topic.is-active { border-color: var(--world-aula-b); box-shadow: 0 0 0 3px color-mix(in srgb, var(--world-aula-b) 18%, transparent); }
.ql-topic:disabled { cursor: not-allowed; opacity: 0.55; }
.ql-topic-name { font-weight: 800; overflow-wrap: anywhere; }
.ql-topic-meta { font-size: 13px; color: var(--kc-text-muted, #5a6170); overflow-wrap: anywhere; }
.ql-topic.is-new { border-style: dashed; justify-content: center; align-items: center; color: var(--world-aula-b); font-weight: 800; flex-direction: row; gap: 6px; }
.ql-rounds { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ql-rounds-label { font-weight: 700; }
.ql-stepper { display: inline-flex; align-items: center; border: 1px solid var(--kc-border, #e4e7f6); border-radius: 12px; overflow: hidden; }
.ql-stepper button { width: 44px; height: 44px; border: 0; background: var(--kc-surface, #fff); color: inherit; font-size: 22px; font-weight: 800; cursor: pointer; }
.ql-stepper button:disabled { opacity: 0.35; cursor: default; }
.ql-stepper output { min-width: 44px; text-align: center; font-weight: 900; font-size: 18px; font-variant-numeric: tabular-nums; }
.ql-oa-list { display: flex; flex-direction: column; gap: 6px; max-height: 340px; overflow-y: auto; padding: 2px; }
.ql-oa { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--kc-border, #e4e7f6); cursor: pointer; }
.ql-oa input { margin-top: 4px; flex: none; }
.ql-oa span { min-width: 0; overflow-wrap: anywhere; font-size: 14px; }
.ql-oa strong { display: block; font-size: 14px; }
.ql-setup input[type="text"] { width: 100%; font-size: 16px; }

/* resultado guardado (detalle de la tarjeta) */
.ql-results { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.ql-results .ql-podium { width: min(520px, 100%); }
.ql-results .ql-podium-block { font-size: 26px; }
.ql-results .ql-podium-col:nth-child(1) .ql-podium-block { height: 80px; }
.ql-results .ql-podium-col:nth-child(2) .ql-podium-block { height: 110px; }
.ql-results .ql-podium-col:nth-child(3) .ql-podium-block { height: 62px; }
.ql-results .ql-rank-row { font-size: 15px; animation: none; grid-template-columns: 40px minmax(0, 1fr) auto; }
.ql-results .ql-rank-name small { display: block; font-size: 12px; font-weight: 600; color: var(--kc-text-muted, #5a6170); white-space: normal; }

/* ───────────── teléfono ───────────── */
@media (max-width: 760px) {
  .ql-options { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .ql-opt { min-height: 60px; padding: 12px 14px; font-size: 18px; border-radius: 16px; }
  .ql-opt-letter { width: 34px; height: 34px; font-size: 16px; }
  .ql-prompt { font-size: clamp(21px, 6vw, 28px); }
  .ql-two { grid-template-columns: minmax(0, 1fr); }
  .ql-head { padding: 10px 14px; }
  .ql-main { padding: 8px 14px 16px; gap: 14px; justify-content: flex-start; }
  .ql-foot { padding: 0 14px 16px; }
  .ql-rank-row { grid-template-columns: 36px minmax(0, 1fr) auto 28px; gap: 8px; padding: 8px 10px; }
  .ql-rank-pos { width: 34px; height: 34px; border-radius: 10px; }
  .ql-secs { width: 60px; height: 60px; font-size: 26px; }
}
@media (max-width: 760px) and (min-height: 640px) {
  .ql-main.is-center { justify-content: center; }
}

/* ═══════════════════════ Presentación interactiva (presentacion.js) ═══════════════════════
   Mismo lenguaje que el Aula digital y QuizLap: fondo blanco, Inter, el naranjo del Aula
   digital y tarjetas suaves. El verde y el rojo solo dicen correcta o incorrecta. La vista
   de proyección pone la diapositiva sobre fondo oscuro (como en un proyector). Todo cabe a
   375 px: en el teléfono las columnas se apilan. */
.pi-stage { --pi-a: #ff9a4d; --pi-b: #ff6115; position: fixed; inset: 0; z-index: 900; display: flex; flex-direction: column; overflow-x: hidden; overflow-y: auto; background: #fff; color: var(--kc-text); padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
.pi-stage *, .pi-stage *::before, .pi-stage *::after { box-sizing: border-box; }
.pi-stage.is-ocupado { cursor: progress; }
.pi-centro { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 24px 16px; text-align: center; min-width: 0; }
.pi-centro h2 { margin: 0; font-size: 22px; }
.pi-centro .muted { max-width: 560px; margin: 0; }

.pi-head { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; gap: 10px 12px; padding: 10px 16px; border-bottom: 1px solid var(--kc-border); background: #fff; flex-wrap: wrap; }
.pi-head-text { flex: 1; min-width: min(180px, 100%); }
.pi-head-title { margin: 0; font-size: 16px; font-weight: 800; line-height: 1.25; overflow-wrap: anywhere; }
.pi-head-sub { margin: 0; font-size: 13px; color: var(--color-tinta-suave); overflow-wrap: anywhere; }
.pi-head-acciones { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-left: auto; }
.pi-head-acciones .btn { min-height: 40px; }
.pi-titulo { width: 100%; min-width: 0; padding: 4px 8px; margin-left: -8px; border: 1px solid transparent; border-radius: 10px; background: transparent; color: inherit; font: inherit; font-size: 17px; font-weight: 800; }
.pi-titulo:hover { background: var(--kc-surface-container-low); }
.pi-titulo:focus { outline: none; border-color: var(--kc-primary); background: #fff; box-shadow: 0 0 0 3px rgba(255, 97, 21, 0.14); }
.pi-tile { width: 40px; height: 40px; border-radius: 12px; }
.pi-tile .material-symbols-outlined { font-size: 22px; }
.pi-icon-btn { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--kc-border); background: #fff; color: var(--kc-text); cursor: pointer; }
.pi-icon-btn:hover:not(:disabled) { border-color: var(--pi-b); color: var(--pi-b); }
.pi-icon-btn:disabled { opacity: 0.4; cursor: default; }
.pi-icon-btn.is-chico { width: 32px; height: 32px; border-radius: 9px; }
.pi-icon-btn .material-symbols-outlined { font-size: 21px; }
.pi-chico { min-height: 34px !important; padding: 0.35rem 0.75rem !important; font-size: 13px !important; border-radius: 10px !important; }
.pi-chico .material-symbols-outlined { font-size: 17px !important; }
.btn.is-on { border-color: var(--pi-b, #ff6115); color: var(--kc-primary-text); background: #fff4ed; }
.pi-ancho { width: 100%; }
.pi-estado, .pi-estado-q { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 700; white-space: nowrap; background: #f1f3f5; color: var(--color-tinta); }
.pi-estado.is-lista { background: #e3f5ea; color: #1f7a44; }
.pi-estado.is-vivo, .pi-estado-q.is-abierta { background: #fff1e6; color: var(--kc-primary-text); }
.pi-estado-q.is-cerrada { background: #eef0f6; color: #4a5468; }
.pi-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; background: var(--kc-surface-container-low); font-size: 13px; font-weight: 700; white-space: nowrap; }
.pi-chip .material-symbols-outlined { font-size: 17px; }
.pi-vivo-chip { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px; border-radius: 999px; background: #fff1e6; color: var(--kc-primary-text); font-size: 13px; font-weight: 800; }
.pi-dot { width: 10px; height: 10px; flex: none; border-radius: 50%; background: #ff6115; animation: ql-live 1.4s ease-out infinite; }
.pi-aviso { display: flex; align-items: center; gap: 8px; margin: 10px 16px 0; padding: 10px 14px; border-radius: 12px; background: #fff7ef; color: #8a4b00; font-size: 13.5px; }
.pi-aviso .material-symbols-outlined { font-size: 19px; flex: none; }
.pi-nota { margin: 6px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--color-tinta-suave); }
.pi-nota .material-symbols-outlined { font-size: 15px; vertical-align: -3px; }
.pi-sub { margin: 14px 0 8px; font-size: 13px; font-weight: 800; color: var(--color-tinta); display: flex; align-items: center; gap: 6px; }
.pi-sub .material-symbols-outlined { font-size: 18px; }
.pi-normal { display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 12px 14px; border-radius: 12px; background: var(--kc-surface-container-low); color: var(--color-tinta-suave); font-size: 14px; line-height: 1.45; }
.pi-normal .material-symbols-outlined { color: var(--pi-b, #ff6115); flex: none; }
.pi-solo-ancho { display: inline; }
.pi-reconectando { position: fixed; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 5; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: var(--kc-charcoal); color: #fff; font-size: 13px; font-weight: 600; }
.pi-reconectando .material-symbols-outlined { font-size: 17px; animation: sl-gira 1.2s linear infinite; }

/* diapositiva: la imagen nueva aparece cuando terminó de cargar (sin parpadeo) */
.pi-slide { position: relative; width: 100%; flex: none; margin: 0 auto; border-radius: 12px; overflow: hidden; background: #f4f5fa; box-shadow: var(--kc-shadow-md); }
.pi-slide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity 0.18s ease; }
.pi-slide img.is-visible { opacity: 1; }
.pi-slide.is-cargando::after { content: ""; position: absolute; right: 10px; bottom: 10px; width: 16px; height: 16px; border: 2px solid #ffd2bd; border-top-color: var(--kc-primary); border-radius: 50%; animation: sl-gira 0.8s linear infinite; }
.pi-sin-imagen { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0; color: var(--color-tinta-suave); font-size: 14px; }
.pi-nav { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; font-size: 14px; color: var(--color-tinta-suave); }
.pi-nav b { color: var(--kc-text); }
.pi-nav small { font-size: 12.5px; }

/* compositor y zona para soltar el PDF */
.pi-drop { display: flex; align-items: center; gap: 14px; padding: 16px; border: 2px dashed #f0c7ad; border-radius: 16px; background: #fffaf6; cursor: pointer; min-width: 0; transition: border-color var(--motion-fast) ease, background-color var(--motion-fast) ease; }
.pi-drop:hover, .pi-drop.is-sobre { border-color: var(--kc-primary); background: #fff3ea; }
.pi-drop.is-lista { border-style: solid; border-color: #9fd9b5; background: #f2fbf5; }
.pi-drop > span:last-child { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pi-drop strong { font-size: 15px; overflow-wrap: anywhere; }
.pi-drop small { font-size: 13px; color: var(--color-tinta-suave); overflow-wrap: anywhere; }
.pi-drop.is-grande { flex-direction: column; text-align: center; width: min(560px, 100%); padding: 36px 20px; }
.pi-o { margin: 4px 0 0; font-size: 13px; color: var(--color-tinta-suave); text-align: center; }
.pi-mias { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); gap: 8px; }
.pi-mia { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: 12px; border: 2px solid var(--kc-border); background: #fff; color: inherit; font: inherit; text-align: left; cursor: pointer; min-width: 0; }
.pi-mia > .material-symbols-outlined { color: var(--kc-primary); flex: none; }
.pi-mia span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pi-mia strong { font-size: 14px; overflow-wrap: anywhere; }
.pi-mia small { font-size: 12.5px; color: var(--color-tinta-suave); overflow-wrap: anywhere; }
.pi-mia.is-active { border-color: var(--kc-primary); background: #fff6f0; }

/* editor: miniaturas | diapositiva | preguntas */
/* flex: 1 0 auto: la grilla no se encoge (si no, la fila de las miniaturas, que se desplazan, queda en cero). */
.pi-ed { flex: 1 0 auto; display: grid; grid-template-columns: 196px minmax(0, 1fr) 380px; gap: 16px; padding: 14px 16px 20px; }
.pi-thumbs { display: flex; flex-direction: column; gap: 10px; overflow-y: auto; max-height: calc(100dvh - 110px); padding-right: 4px; position: sticky; top: 74px; align-self: start; }
.pi-frame { display: flex; flex-direction: column; gap: 6px; }
.pi-frame.is-overlays { padding: 6px; border-radius: 12px; background: var(--kc-surface-container-low); }
.pi-frame-t { margin: 0; font-size: 11.5px; font-weight: 800; color: var(--color-tinta-suave); text-transform: uppercase; letter-spacing: 0.03em; }
.pi-thumb { position: relative; display: block; flex: none; width: 100%; padding: 0; border: 2px solid transparent; border-radius: 10px; background: #fff; cursor: pointer; overflow: hidden; box-shadow: var(--kc-shadow-sm); }
.pi-thumb img { display: block; width: 100%; height: auto; background: #f4f5fa; }
.pi-thumb.is-active { border-color: var(--kc-primary); box-shadow: 0 0 0 3px rgba(255, 97, 21, 0.18); }
.pi-thumb-n { position: absolute; left: 6px; top: 6px; min-width: 22px; padding: 1px 6px; border-radius: 999px; background: rgba(19, 27, 46, 0.72); color: #fff; font-size: 11.5px; font-weight: 700; }
.pi-thumb-q { position: absolute; right: 6px; bottom: 6px; display: inline-flex; align-items: center; gap: 2px; padding: 1px 7px 1px 4px; border-radius: 999px; background: var(--kc-primary); color: #fff; font-size: 11.5px; font-weight: 800; }
.pi-thumb-q .material-symbols-outlined { font-size: 14px; }
.pi-ed-main { display: flex; flex-direction: column; gap: 12px; min-width: 0; position: sticky; top: 74px; align-self: start; }
.pi-panel { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.pi-panel-head h3 { margin: 0; font-size: 18px; }
.pi-panel-head .muted { margin: 2px 0 8px; font-size: 13px; }
.pi-frame-acc { margin-bottom: 10px; }
.pi-qs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.pi-q-item { padding: 12px; border-radius: 14px; border: 1px solid var(--kc-border); background: #fff; }
.pi-q-item-head, .pi-qc-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pi-q-tipo { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 800; color: var(--kc-primary-text); }
.pi-q-tipo .material-symbols-outlined { font-size: 17px; }
.pi-q-n { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--kc-surface-container-low); font-size: 12px; font-weight: 800; }
.pi-q-enun { margin: 6px 0 0; font-size: 14px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.pi-q-acc { display: flex; align-items: center; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.pi-q-acc .espacio { flex: 1; }
.pi-tipos { display: grid; grid-template-columns: 1fr; gap: 6px; }
.pi-tipo { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--kc-border); background: #fff; color: inherit; font: inherit; text-align: left; cursor: pointer; min-width: 0; }
.pi-tipo:hover { border-color: var(--kc-primary); background: #fffaf6; }
.pi-tipo > .material-symbols-outlined { color: var(--kc-primary); flex: none; }
.pi-tipo span { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.pi-tipo strong { font-size: 14px; }
.pi-tipo small { font-size: 12.5px; color: var(--color-tinta-suave); }
.pi-form { display: flex; flex-direction: column; gap: 12px; padding: 14px; border-radius: 14px; border: 1px solid var(--kc-border); background: #fff; }
.pi-form-t { display: flex; align-items: center; gap: 8px; margin: 0; font-weight: 800; color: var(--kc-primary-text); }
.pi-alts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.pi-alt { display: flex; align-items: center; gap: 8px; }
.pi-alt-marca { display: inline-flex; align-items: center; gap: 4px; flex: none; font-weight: 800; font-size: 13px; cursor: pointer; }
.pi-alt-marca input { width: 18px; height: 18px; accent-color: #1f9d55; }
.pi-alt-texto { flex: 1; min-width: 0; min-height: 40px; padding: 0.5rem 0.75rem; border: 1px solid transparent; border-radius: 10px; background: var(--kc-surface-container-low); font: inherit; font-size: 14px; color: inherit; }
.pi-alt-texto:focus { outline: none; border-color: var(--kc-primary); background: #fff; }
.pi-vf-elegir { display: flex; gap: 14px; flex-wrap: wrap; }
.pi-proc-t { margin: 0; font-size: 20px; }
.pi-progreso { width: min(460px, 100%); height: 10px; border-radius: 999px; background: var(--kc-surface-container-low); overflow: hidden; }
.pi-progreso span { display: block; height: 100%; background: linear-gradient(90deg, var(--pi-a), var(--pi-b)); transition: width 0.25s ease; }
.pi-proc-minis { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 720px; }
.pi-proc-minis img { width: 96px; height: auto; border-radius: 6px; box-shadow: var(--kc-shadow-sm); animation: ql-chip-in 0.3s ease both; }

/* gráficos (revisar, mostrar y proyectar) */
.pi-vacio { margin: 8px 0; color: var(--color-tinta-suave); font-size: 14px; }
.pi-g-total { margin: 4px 0 10px; font-size: 13.5px; color: var(--color-tinta-suave); }
.pi-g-total b.is-ok, .pi-registrada b.is-ok { color: #1f7a44; }
.pi-g-total b.is-no, .pi-registrada b.is-no { color: #b42318; }
.pi-bars { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.pi-bar { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pi-bar-letra { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 30px; height: 30px; border-radius: 9px; background: var(--kc-surface-container-low); font-weight: 900; font-size: 14px; }
.pi-bar-cuerpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.pi-bar-texto { font-size: 14px; font-weight: 600; overflow-wrap: anywhere; display: flex; align-items: center; gap: 4px; }
.pi-bar-texto .material-symbols-outlined { font-size: 17px; color: #1f9d55; font-variation-settings: "FILL" 1; }
.pi-bar-pista { height: 12px; border-radius: 999px; background: var(--kc-surface-container-low); overflow: hidden; }
.pi-bar-relleno { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--pi-a, #ff9a4d), var(--pi-b, #ff6115)); transition: width 0.45s var(--motion-ease); }
.pi-bar.is-correcta .pi-bar-letra { background: #1f9d55; color: #fff; }
.pi-bar.is-correcta .pi-bar-relleno { background: linear-gradient(90deg, #48c07a, #1f9d55); }
.pi-bar.is-mal .pi-bar-relleno { background: #d7dbe6; }
.pi-bar-n { flex: none; display: flex; flex-direction: column; align-items: flex-end; min-width: 48px; line-height: 1.15; }
.pi-bar-n b { font-size: 16px; }
.pi-bar-n small { font-size: 12px; color: var(--color-tinta-suave); }
.pi-marcar { display: inline-flex; flex: none; padding: 4px; border: none; border-radius: 8px; background: transparent; color: #8a90a6; cursor: pointer; }
.pi-marcar:hover { background: var(--kc-surface-container-low); color: #1f9d55; }
.pi-marcar.is-on { color: #1f9d55; }
.pi-marcar.is-on .material-symbols-outlined { font-variation-settings: "FILL" 1; }
.pi-bars.is-grande { gap: 14px; }
.pi-bars.is-grande .pi-bar-letra { width: 44px; height: 44px; font-size: 22px; border-radius: 12px; }
.pi-bars.is-grande .pi-bar-texto { font-size: clamp(16px, 1.6vw, 24px); }
.pi-bars.is-grande .pi-bar-pista { height: 20px; }
.pi-bars.is-grande .pi-bar-n b { font-size: clamp(18px, 1.8vw, 28px); }
.pi-ind { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.pi-ind th { text-align: left; font-size: 12px; color: var(--color-tinta-suave); font-weight: 700; padding: 6px 6px; border-bottom: 1px solid var(--kc-border); }
.pi-ind td { padding: 7px 6px; border-bottom: 1px solid #f0f1f6; vertical-align: middle; overflow-wrap: anywhere; }
.pi-ind-r { font-weight: 600; }
.pi-ok .material-symbols-outlined { color: #1f9d55; font-size: 19px; font-variation-settings: "FILL" 1; }
.pi-no .material-symbols-outlined { color: #b42318; font-size: 19px; }
.pi-rev { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.pi-rev small { font-size: 11px; color: var(--color-tinta-suave); }
.pi-rev-b { display: inline-flex; padding: 3px; border-radius: 8px; border: 1px solid var(--kc-border); background: #fff; color: #8a90a6; cursor: pointer; }
.pi-rev-b .material-symbols-outlined { font-size: 17px; }
.pi-rev-b.is-ok { background: #e3f5ea; border-color: #9fd9b5; color: #1f7a44; }
.pi-rev-b.is-no { background: #fdecea; border-color: #f4b4ac; color: #b42318; }
.pi-seg { display: inline-flex; padding: 3px; border-radius: 10px; background: var(--kc-surface-container-low); }
.pi-seg button { display: inline-flex; align-items: center; gap: 4px; padding: 5px 10px; border: none; border-radius: 8px; background: transparent; color: var(--color-tinta-suave); font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.pi-seg button .material-symbols-outlined { font-size: 16px; }
.pi-seg button.is-on { background: #fff; color: var(--kc-text); box-shadow: var(--kc-shadow-sm); }

/* cuadro del Aula digital, franja «en vivo» e historial */
.pi-caja { display: flex; flex-direction: column; gap: 12px; margin-top: 4px; }
.pi-resumen { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 14px; }
.pi-banner { display: flex; align-items: center; gap: 14px; padding: 14px 16px; margin-bottom: 14px; border-radius: 16px; border: 1px solid #ffc9a8; background: #fff6f0; flex-wrap: wrap; }
.pi-caja .pi-banner { margin-bottom: 0; }
.pi-banner-body { flex: 1; min-width: min(200px, 100%); }
.pi-banner-t { display: flex; align-items: center; gap: 8px; margin: 0; font-weight: 900; font-size: 16px; overflow-wrap: anywhere; }
.pi-banner-s { margin: 2px 0 0; font-size: 13px; color: var(--color-tinta-suave); overflow-wrap: anywhere; }
.pi-banner .btn { flex: none; }
.pi-historial h3 { display: flex; align-items: center; gap: 8px; margin: 6px 0 8px; font-size: 16px; }
.pi-historial h3 .material-symbols-outlined { color: var(--kc-primary); }
.pi-hist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.pi-hist-b { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--kc-border); background: #fff; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.pi-hist-b:hover { border-color: var(--kc-primary); }
.pi-hist-fila { display: flex; align-items: center; gap: 6px; }
.pi-hist-fila .pi-hist-b { flex: 1; min-width: 0; }
.pi-hist-borrar { flex: none; width: 44px; height: 44px; }
.pi-hist-b > span { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pi-hist-b small { font-size: 12.5px; color: var(--color-tinta-suave); overflow-wrap: anywhere; }
.pi-res-dlg { max-height: calc(100dvh - 48px); overflow-y: auto; padding: 24px; }
.pi-res { display: flex; flex-direction: column; gap: 14px; margin-top: 12px; }
.pi-res-meta { margin: 0; font-size: 14px; line-height: 1.5; color: var(--color-tinta-suave); }
.pi-res-meta strong { color: var(--kc-text); }
.pi-res-gente { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 8px; }
.pi-res-gente details { padding: 10px 12px; border-radius: 12px; background: var(--kc-surface-container-low); }
.pi-res-gente summary { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px; cursor: pointer; }
.pi-res-gente p { margin: 8px 0 0; font-size: 13.5px; line-height: 1.5; }
.pi-res-q { padding: 14px; border-radius: 14px; border: 1px solid var(--kc-border); }
.pi-res-q-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; }
.pi-res-q-head .espacio { flex: 1; }
.pi-res-enun { margin: 8px 0; font-weight: 700; font-size: 15px; white-space: pre-wrap; overflow-wrap: anywhere; }

/* panel del profesor en vivo */
.pi-terminar { color: #b42318 !important; }
.pi-ctl { flex: 1 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) 390px; gap: 16px; padding: 14px 16px 20px; }
.pi-ctl-main { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
/* La diapositiva usa el ancho disponible sin pasarse del alto de la pantalla (--ar = ancho / alto). */
.pi-ctl-main .pi-slide { width: min(100%, calc((100dvh - 290px) * var(--ar, 1.3333))); }
.pi-ed-main .pi-slide { width: min(100%, calc((100dvh - 150px) * var(--ar, 1.3333))); }
.pi-ctl-main .pi-nav .btn { min-height: 46px; }
.pi-strip { display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 8px; }
.pi-strip .pi-thumb { width: 112px; }
.pi-ctl-side { display: flex; flex-direction: column; gap: 10px; min-width: 0; overflow-y: auto; max-height: calc(100dvh - 80px); padding-right: 2px; }
.pi-side-t { margin: 0; font-size: 15px; }
.pi-otra { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 12px; background: #fff7ef; color: #8a4b00; font-size: 13px; }
.pi-otra span { flex: 1; }
.pi-qc { padding: 12px; border-radius: 14px; border: 1px solid var(--kc-border); background: #fff; }
.pi-qc.is-pantalla { border-color: #ffb58a; box-shadow: 0 0 0 3px rgba(255, 97, 21, 0.1); }
.pi-qc-cuenta { display: flex; align-items: center; gap: 6px; margin: 8px 0 0; font-size: 13.5px; color: var(--color-tinta-suave); flex-wrap: wrap; }
.pi-qc-cuenta b { color: var(--kc-text); font-size: 16px; }
.pi-qc-cuenta .material-symbols-outlined { font-size: 18px; color: var(--kc-primary); }
.pi-pub { color: var(--kc-primary-text); font-weight: 700; }
.pi-qc-acc { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.pi-proy-op { font-size: 13px; }
.pi-rev-caja { padding: 14px; border-radius: 14px; background: #fafbff; border: 1px solid var(--kc-border); }
.pi-rev-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.pi-rev-head h3 { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 14px; }
.pi-rev-head h3 .material-symbols-outlined { color: var(--kc-primary); font-size: 19px; }

/* estudiante */
.pi-al { flex: 1 0 auto; display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 14px 16px 24px; width: min(1100px, 100%); margin: 0 auto; min-width: 0; }
.pi-al .pi-slide { width: min(100%, calc((100dvh - 120px) * var(--ar, 1.3333))); }
.pi-al-q { width: min(640px, 100%); min-width: 0; }
.pi-al-card { display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: 18px; border: 1px solid #ffd3b8; background: #fff; box-shadow: 0 10px 30px -18px rgba(255, 97, 21, 0.45); }
.pi-al-q-t { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 12.5px; font-weight: 800; color: var(--kc-primary-text); }
.pi-al-q-t .material-symbols-outlined { font-size: 17px; }
.pi-al-enun { margin: 0; font-size: 19px; line-height: 1.35; white-space: pre-wrap; overflow-wrap: anywhere; }
.pi-al-enlace { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 12px; }
.pi-al-enlace .muted { flex: 1 1 200px; margin: 0; font-size: 13px; }
.pi-form-enlace { display: grid; grid-template-columns: 2fr 1fr; gap: 10px; }
@media (max-width: 560px) { .pi-form-enlace { grid-template-columns: 1fr; } }
.pi-opts { display: flex; flex-direction: column; gap: 8px; }
.pi-opts.is-vf { flex-direction: row; }
.pi-opts.is-vf .pi-opt { flex: 1; justify-content: center; }
.pi-opt { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 10px 12px; border-radius: 14px; border: 2px solid var(--kc-border); background: #fff; color: inherit; font: inherit; text-align: left; cursor: pointer; min-width: 0; }
.pi-opt:hover:not(:disabled) { border-color: #ffb58a; }
.pi-opt:disabled { cursor: default; }
.pi-opt.is-elegida { border-color: var(--kc-primary); background: #fff4ed; }
.pi-opt.is-correcta { border-color: #1f9d55; background: #ecf9f1; }
.pi-opt > .material-symbols-outlined { color: #1f9d55; font-variation-settings: "FILL" 1; }
.pi-opt-l { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 32px; height: 32px; border-radius: 10px; background: var(--kc-surface-container-low); font-weight: 900; }
.pi-opt.is-elegida .pi-opt-l { background: var(--kc-primary); color: #fff; }
.pi-opt-t { flex: 1; font-size: 15.5px; font-weight: 600; overflow-wrap: anywhere; }
.pi-num-caja { display: flex; align-items: center; gap: 8px; }
.pi-num-caja b { font-size: 15px; }
.pi-num-caja input { flex: 1; }
.pi-enviar { min-height: 50px; font-size: 16px; }
/* Test en simulador: el marco cubre la pantalla; la tarjeta dice qué se logró. */
.pi-sim-marco { position: fixed; inset: 0; z-index: 8; display: block; width: 100%; height: 100%; border: 0; background: #fff; }
.pi-sim-marco[hidden] { display: none; }
.pi-sim-instr { margin: 0; font-size: 15px; line-height: 1.45; }
.pi-sim-res { display: flex; align-items: center; gap: 6px; margin: 0; font-weight: 700; font-size: 15px; }
.pi-sim-res.is-ok { color: #1f7a44; }
.pi-sim-res.is-falta { color: #a24a12; }
.pi-sim-checks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.pi-sim-checks li { display: flex; align-items: flex-start; gap: 8px; font-size: 14.5px; line-height: 1.35; color: var(--color-tinta-suave); }
.pi-sim-checks li.is-ok { color: #1f5e3a; }
.pi-sim-checks li.is-ok .material-symbols-outlined { color: #1f9d55; font-variation-settings: "FILL" 1; }
.pi-sim-logro { margin: 4px 0 12px; font-size: 16px; }
.pi-sim-logro b { font-size: 26px; color: #1f7a44; }
.pi-sim-logro.is-grande { font-size: clamp(18px, 1.8vw, 28px); }
.pi-sim-logro.is-grande b { font-size: clamp(30px, 3.2vw, 52px); }
.pi-registrada { display: flex; align-items: flex-start; gap: 8px; margin: 0; padding: 10px 12px; border-radius: 12px; background: #ecf9f1; color: #1f5e3a; font-size: 14px; line-height: 1.4; }
.pi-registrada > span { flex: 1; min-width: 0; }
.pi-registrada > .material-symbols-outlined { flex: none; }
/* Los íconos no se estiran en las filas donde el texto ocupa el espacio. */
.pi-hist-b > .material-symbols-outlined, .pi-otra > .material-symbols-outlined { flex: none; }
.pi-registrada .material-symbols-outlined { color: #1f9d55; font-variation-settings: "FILL" 1; }
.pi-sol { margin: 0; padding: 10px 12px; border-radius: 12px; background: #ecf9f1; font-size: 14.5px; }
.pi-al-res { padding-top: 10px; border-top: 1px solid var(--kc-border); }

/* proyección: la diapositiva sobre fondo oscuro; la pregunta al lado */
.pi-proy { background: #0f141c; color: #fff; overflow: hidden; }
.pi-proy-grid { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr); gap: 2vw; padding: 2vh 2vw; min-height: 0; }
.pi-proy.con-pregunta .pi-proy-grid { grid-template-columns: minmax(0, 1.6fr) minmax(320px, 1fr); }
.pi-proy-slide { position: relative; min-height: 0; }
.pi-proy-slide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity 0.2s ease; }
.pi-proy-slide img.is-visible { opacity: 1; }
.pi-proy-q { display: none; flex-direction: column; justify-content: center; gap: 1.6vh; min-width: 0; padding: 2.4vh 1.6vw; border-radius: 20px; background: #fff; color: var(--kc-text); overflow: hidden; }
.pi-proy.con-pregunta .pi-proy-q { display: flex; }
.pi-proy-estado { display: inline-flex; align-self: flex-start; align-items: center; gap: 8px; margin: 0; padding: 6px 14px; border-radius: 999px; background: #eef0f6; font-weight: 800; font-size: clamp(14px, 1.3vw, 20px); }
.pi-proy-estado.is-abierta { background: #fff1e6; color: var(--kc-primary-text); }
.pi-proy-enun { margin: 0; font-size: clamp(20px, 2.2vw, 40px); line-height: 1.25; white-space: pre-wrap; overflow-wrap: anywhere; }
.pi-proy-alts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1.2vh; }
.pi-proy-alts li { display: flex; align-items: center; gap: 14px; padding: 1.2vh 1vw; border-radius: 14px; background: var(--kc-surface-container-low); font-size: clamp(16px, 1.7vw, 30px); font-weight: 600; overflow-wrap: anywhere; }
.pi-proy-alts li b { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 1.9em; height: 1.9em; border-radius: 10px; background: #fff; }
.pi-proy-alts li.is-correcta { background: #ecf9f1; outline: 3px solid #1f9d55; }
.pi-proy-alts li.is-correcta b { background: #1f9d55; color: #fff; }
.pi-proy-sol { margin: 0; font-size: clamp(16px, 1.6vw, 28px); }
.pi-proy-cuenta { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--color-tinta-suave); font-weight: 700; font-size: clamp(14px, 1.3vw, 22px); }
.pi-proy-g .pi-g-total { font-size: clamp(14px, 1.2vw, 20px); }
.pi-proy-full { position: fixed; right: 16px; bottom: 16px; z-index: 4; display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border: none; border-radius: 999px; background: rgba(255, 255, 255, 0.92); color: var(--kc-text); font: inherit; font-weight: 700; cursor: pointer; opacity: 0; transition: opacity 0.3s ease; }
.pi-proy.is-mouse .pi-proy-full, .pi-proy-full:focus-visible { opacity: 1; }
.pi-proy-fin { color: #fff; }
.pi-proy-fin h1 { margin: 0; font-size: clamp(28px, 4vw, 56px); }
.pi-proy-fin p { margin: 0; font-size: clamp(18px, 2vw, 28px); opacity: 0.8; }

@media (min-width: 900px) {
  .pi-al.con-pregunta { flex-direction: row; align-items: flex-start; width: min(1400px, 100%); }
  .pi-al.con-pregunta .pi-slide { flex: 1; }
  .pi-al.con-pregunta .pi-al-q { width: 400px; flex: none; position: sticky; top: 76px; }
}
@media (max-width: 1180px) {
  .pi-ed { grid-template-columns: 170px minmax(0, 1fr); }
  .pi-panel { grid-column: 2; }
}
@media (max-width: 1000px) {
  .pi-ctl { grid-template-columns: minmax(0, 1fr); }
  .pi-ctl-main .pi-slide { width: 100%; }
  .pi-ctl-side { max-height: none; overflow: visible; }
}
@media (max-width: 760px) {
  .pi-head { padding: 8px 12px; }
  .pi-solo-ancho { display: none; }
  .pi-ed { grid-template-columns: minmax(0, 1fr); padding: 10px 12px 18px; }
  .pi-panel { grid-column: auto; }
  .pi-thumbs { position: static; flex-direction: row; max-height: none; overflow-x: auto; overflow-y: hidden; padding: 0 0 6px; }
  .pi-frame { flex-direction: row; flex: none; align-items: flex-start; }
  .pi-frame-t { display: none; }
  .pi-thumb { width: 104px; }
  .pi-ed-main { position: static; }
  .pi-ctl { padding: 10px 12px 18px; }
  .pi-ctl-main .pi-nav { gap: 8px; }
  .pi-ctl-main .pi-nav .btn { flex: 1; }
  .pi-ctl-main .pi-nav span { order: -1; width: 100%; text-align: center; }
  .pi-al { padding: 10px 12px 20px; }
  .pi-al .pi-slide { width: 100%; }
  .pi-al-enun { font-size: 17px; }
  .pi-proy.con-pregunta .pi-proy-grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; }
  .pi-res-dlg { padding: 18px 16px; }
}

/* Aviso «Tu profesor inició…» (app.js → vigilarEnVivo): arriba de todo, también de las pantallas completas. */
.en-vivo-aviso { position: fixed; z-index: 2000; left: 50%; top: calc(12px + env(safe-area-inset-top)); transform: translateX(-50%); width: min(560px, calc(100% - 24px)); display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; border: 1px solid #ffc9a8; background: #fff; color: var(--kc-text); box-shadow: 0 18px 40px -18px rgba(19, 27, 46, 0.45); animation: motion-rise var(--motion-fast) var(--motion-ease) backwards; }
.en-vivo-aviso-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: 13px; color: var(--color-tinta-suave); overflow-wrap: anywhere; }
.en-vivo-aviso-t strong { font-size: 15px; color: var(--kc-text); }
.en-vivo-aviso .btn { flex: none; }
.en-vivo-aviso-x { display: inline-flex; flex: none; padding: 4px; border: none; border-radius: 999px; background: transparent; color: #6b7a89; cursor: pointer; }

/* Banco de preguntas (constructor de evaluaciones) */
.bq-abrir { margin-top: 12px; width: 100%; justify-content: center; }
.bq-dlg .dlg-caja { max-width: 720px; }
.bq-subir { align-self: flex-start; cursor: pointer; }
.bq-error { color: var(--color-peligro, #b42318); background: #fef3f2; border-radius: 10px; padding: 10px 14px; font-size: 14px; margin: 0; }
.bq-error ul { margin: 6px 0 0; padding-left: 18px; }
.bq-ok { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 14px; margin: 0; }
.bq-ok p { margin: 0; }
#bq-lista { max-height: 50vh; overflow: auto; display: grid; gap: 10px; }
.bq-tema { border: 1px solid var(--color-borde, #e5e7eb); border-radius: 12px; padding: 6px 12px 10px; margin: 0; min-width: 0; }
.bq-tema legend { font-weight: 600; font-size: 14px; padding: 0 6px; }
.bq-fila { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-top: 1px solid var(--color-borde, #f0f0f0); }
.bq-fila:first-of-type { border-top: 0; }
.bq-fila label { flex: 1; min-width: 0; display: flex; gap: 10px; align-items: flex-start; font-size: 14px; cursor: pointer; }
.bq-fila label span { min-width: 0; overflow-wrap: anywhere; }
.bq-fila small { display: block; color: var(--color-tinta-suave); font-size: 12px; }
.bq-fila.is-no label { opacity: .55; cursor: default; }

/* Pantalla de texto de los cuestionarios */
.cq-lectura { max-width: 760px; }
.cq-lectura-texto { font-size: 16px; line-height: 1.6; margin: 8px 0 18px; }

/* Presentación: tipos de participación (nube, escala, ranking, abierta) */
.pi-nube { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 16px; padding: 14px 8px; line-height: 1.1; font-weight: 700; }
.pi-nube.is-grande { font-size: 1.5em; gap: 10px 26px; }
.pi-nube span { overflow-wrap: anywhere; }
.pi-nube-in { display: grid; gap: 8px; margin: 6px 0 10px; }
.pi-nube-in input { min-height: 44px; border: 1px solid var(--color-linea, #e5e7eb); border-radius: 12px; padding: 0 12px; font: inherit; }
.pi-escala-in { margin: 8px 0 12px; }
.pi-escala-ops { display: flex; flex-wrap: wrap; gap: 6px; justify-content: space-between; }
.pi-escala-op { flex: 1 1 36px; min-width: 36px; min-height: 46px; border: 1px solid var(--color-linea, #e5e7eb); border-radius: 12px; background: #fff; font: inherit; font-weight: 700; font-size: 17px; cursor: pointer; }
.pi-escala-op.is-elegida { background: var(--kc-primary, #ff6115); border-color: var(--kc-primary, #ff6115); color: #fff; }
.pi-escala-et { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; color: var(--color-tinta-suave, #6b7280); margin-top: 6px; }
.pi-escala { padding: 6px 4px; }
.pi-escala-prom { margin: 0 0 10px; font-size: 15px; }
.pi-escala-prom b { font-size: 1.6em; color: var(--kc-primary, #ff6115); }
.pi-escala-barras { display: flex; align-items: flex-end; gap: 6px; height: 160px; }
.pi-escala.is-grande .pi-escala-barras { height: 260px; }
.pi-escala-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 4px; min-width: 0; }
.pi-escala-barra { width: 100%; min-height: 3px; border-radius: 8px 8px 3px 3px; background: linear-gradient(180deg, #ff8a4c, #ff6115); }
.pi-escala-n { font-size: 13px; font-weight: 700; }
.pi-escala-v { font-size: 13px; color: var(--color-tinta-suave, #6b7280); }
.pi-rank-in { list-style: none; padding: 0; margin: 6px 0 8px; display: grid; gap: 6px; }
.pi-rank-in li { display: flex; align-items: center; gap: 8px; border: 1px solid var(--color-linea, #e5e7eb); border-radius: 12px; padding: 6px 8px; background: #fff; }
.pi-rank-n { flex: none; width: 26px; height: 26px; border-radius: 50%; background: #fff1e8; color: var(--kc-primary, #ff6115); font-weight: 700; display: grid; place-items: center; font-size: 13px; }
.pi-rank-t { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.pi-alt-n { flex: none; width: 26px; text-align: center; font-weight: 700; color: var(--color-tinta-suave, #6b7280); }
.pi-muro { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.pi-muro.is-grande { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); font-size: 1.15em; }
.pi-muro-t { margin: 0; padding: 12px 14px; border-radius: 14px; background: #fff8e6; border: 1px solid #f5e1a8; overflow-wrap: anywhere; }
.pi-muro-t:nth-child(3n+2) { background: #eef6ff; border-color: #cfe3fb; }
.pi-muro-t:nth-child(3n) { background: #f1fbf3; border-color: #cdeed5; }
#pi-al-abierta { min-height: 90px; }

/* Resultados del curso encima de la diapositiva del estudiante, y confirmación de terminar. */
.pi-al-sobre { position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 2; max-height: calc(100% - 24px); overflow: auto; padding: 10px 14px 14px; border-radius: 14px; background: rgba(255, 255, 255, 0.97); box-shadow: 0 12px 34px -12px rgba(15, 23, 36, 0.45); }
.pi-al-sobre[hidden] { display: none; }
.pi-al-sobre-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pi-al-sobre-head .pi-sub { margin: 0; }
.dlg.pi-dlg-chico { width: min(480px, calc(100% - 32px)); height: fit-content; max-height: calc(100dvh - 48px); border-radius: 20px; }
.pi-confirma { padding: 24px 24px 8px; }

/* Evaluación: aviso al salir de la pantalla completa. */
.cq-fs { position: fixed; inset: 0; z-index: 2000; display: grid; place-items: center; padding: 16px; background: rgba(15, 23, 36, 0.72); }
.cq-fs-caja { display: flex; flex-direction: column; align-items: center; gap: 10px; width: min(460px, 100%); padding: 24px; border-radius: 20px; background: #fff; text-align: center; box-shadow: 0 24px 60px rgba(15, 23, 36, 0.35); }
.cq-fs-caja > .material-symbols-outlined { font-size: 40px; color: #d93a1f; }
.cq-fs-caja h2 { margin: 0; font-size: 21px; }
.cq-fs-caja p { margin: 0; color: var(--kc-text-muted); line-height: 1.45; }
.ci-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; }

/* Corrección de código (profesor, «En vivo» con «Corregir»). */
.vv-corr { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; padding: 14px; border: 1px solid var(--kc-border); border-radius: 14px; background: #fbfcfe; }
.vv-req { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.vv-req li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 14px; }
.vv-req li.is-ok > .material-symbols-outlined { color: #1f9d55; }
.vv-req li.is-no > .material-symbols-outlined { color: #d93a1f; }
.vv-pru { flex-basis: 100%; max-height: 160px; overflow: auto; margin: 4px 0 0; padding: 8px 10px; border-radius: 8px; background: #f2f4f8; font-size: 12.5px; white-space: pre-wrap; }
.vv-puntos { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.vv-puntos input { width: 70px; margin: 0 4px; padding: 6px 8px; border: 1px solid var(--kc-border); border-radius: 8px; }
.vv-pauta summary { display: flex; align-items: center; gap: 6px; cursor: pointer; font-weight: 600; }
.cq-auto { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }


/* Solución guiada: el botón en la revisión y el editor de etapas (el reproductor está en guiada.css). */
.cq-guiada { align-self: flex-start; margin-top: 10px; }
.ci-guiada { display: flex; flex-direction: column; gap: 10px; }
.ci-etapa { display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px solid var(--kc-border); border-radius: 12px; background: #fbfcfe; }
.ci-etapa-top { display: flex; align-items: center; gap: 4px; }
.ci-etapa-top .espacio { flex: 1; }
.ci-etapa textarea { width: 100%; }

/* Barra flotante de navegación de preguntas (A.barraNav: cuestionarios y evaluaciones). */
.rd-examen.con-nb { padding-bottom: 92px; }
.nb { --nb-op: 0.3; position: fixed; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); z-index: 40; display: flex; align-items: center; gap: 4px; max-width: calc(100% - 24px); padding: 6px; border: 1px solid rgba(19, 27, 46, 0.08); border-radius: 999px; background: rgba(255, 255, 255, 0.72); -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4); box-shadow: 0 10px 30px -12px rgba(15, 23, 36, 0.35); opacity: var(--nb-op); transform: translateX(-50%); will-change: opacity; }
.nb:focus-within { opacity: 1; }
.nb-nums { display: flex; gap: 4px; padding: 0 2px; }
.nb-nums.hay-antes { -webkit-mask-image: linear-gradient(90deg, transparent, #000 18px); mask-image: linear-gradient(90deg, transparent, #000 18px); }
.nb-nums.hay-despues { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 18px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 18px), transparent); }
.nb-nums.hay-antes.hay-despues { -webkit-mask-image: linear-gradient(90deg, transparent, #000 18px, #000 calc(100% - 18px), transparent); mask-image: linear-gradient(90deg, transparent, #000 18px, #000 calc(100% - 18px), transparent); }
.nb-n, .nb-flecha { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 38px; height: 38px; padding: 0; border: none; border-radius: 999px; background: transparent; color: var(--kc-text); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease; }
.nb-n { position: relative; color: #6b7487; }
.nb-n.is-hecha { background: rgba(31, 157, 85, 0.12); color: #17804a; }
.nb-n.is-actual { background: var(--kc-primary); color: #fff; box-shadow: 0 4px 12px -4px rgba(255, 97, 21, 0.7); }
.nb-n.is-marcada::after { content: ""; position: absolute; top: 5px; right: 6px; width: 6px; height: 6px; border-radius: 50%; background: #e5a100; }
.nb-n:hover:not(.is-actual), .nb-flecha:hover:not(:disabled) { background: rgba(19, 27, 46, 0.07); }
.nb-flecha:disabled { opacity: 0.3; cursor: default; }
.nb button:focus-visible { outline: 2px solid var(--kc-primary); outline-offset: 2px; }
@media (max-width: 520px) { .nb-n, .nb-flecha { width: 34px; height: 34px; font-size: 13px; } .nb { bottom: calc(12px + env(safe-area-inset-bottom, 0px)); } }
@media (prefers-reduced-motion: reduce) { .nb-n, .nb-flecha { transition: none; } }
.nb-n.is-lectura { color: #9aa3b8; }
.nb-n .material-symbols-outlined { font-size: 19px; }
/* Con la barra flotante, Anterior/Siguiente de cada pregunta sobran (queda «Terminar» en la última). */
.con-nb #cq-antes, .con-nb #cq-despues, .con-nb #rd-antes, .con-nb #rd-despues { display: none; }
.con-nb .rd-pasos { justify-content: flex-end; }
.con-nb .rd-pasos:not(:has(#cq-fin, #rd-fin, #rd-marcar)) { display: none; }
.nb-flecha { width: auto; gap: 2px; padding: 0 14px 0 8px; }
.nb-flecha[data-nb="despues"] { padding: 0 8px 0 14px; }
.nb-flecha span:not(.material-symbols-outlined) { font-size: 14px; }
@media (max-width: 520px) { .nb-flecha { padding: 0 6px; } .nb-flecha span:not(.material-symbols-outlined) { display: none; } }
.nb-hueco { flex: none; width: 38px; height: 38px; }

/* Ajustes de rendición: jerarquía sobria, objetivos táctiles y ancho seguro. */
.rd { --rd-space: 16px; --rd-radius: 14px; --rd-shadow: 0 8px 28px rgba(25, 35, 60, 0.07); overflow-x: hidden; background: #fff; }
.rd-barra { min-height: 64px; }
.rd-progreso { display: flex; flex-direction: column; gap: 5px; width: min(170px, 18vw); color: var(--kc-text-muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.rd-progreso-pista { height: 4px; overflow: hidden; border-radius: 999px; background: #edf0f5; }
.rd-progreso-pista > span { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--kc-primary); transition: width 120ms ease; }
.pq-op { min-height: 52px; border-radius: var(--rd-radius); }
.rd-n { min-height: 44px; }
.rd-mapa-btn, .rd-x, .rd-marcar, .rd-pasos .btn { min-height: 44px; }
.rd-mapa { box-shadow: var(--rd-shadow); }
.rd-item-instr { max-width: 70ch; line-height: 1.6; }
.rd-item-instr[open] > .tx { max-height: min(62vh, 680px); overflow: auto; overscroll-behavior: contain; }
.rd-pq, .rd-pq-cuerpo, .rd-item { min-width: 0; }
.rd-pq:has(.rd-item-instr) { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-content: start; gap: 14px 22px; max-width: 1120px; }
.rd-pq:has(.rd-item-instr) > .rd-pq-eyebrow, .rd-pq:has(.rd-item-instr) > .rd-item, .rd-pq:has(.rd-item-instr) > .rd-pasos { grid-column: 1 / -1; }
.rd-pq:has(.rd-item-instr) > .rd-item { display: contents; }
.rd-pq:has(.rd-item-instr) .rd-item-nombre { grid-column: 1 / -1; }
.rd-pq:has(.rd-item-instr) .rd-item-instr { grid-column: 1; grid-row: span 2; align-self: start; }
.rd-pq:has(.rd-item-instr) #rd-pq-cuerpo { grid-column: 2; grid-row: 3 / span 2; }
.rd-pq:has(.rd-item-instr) > .rd-pasos { grid-row: 5; }
.rd-pq-cuerpo .tx table, .rd-item-instr .tx table { display: block; width: 100%; max-width: 100%; overflow-x: auto; }
.rd-pq-cuerpo img, .rd-item-instr img, .rd-pq-cuerpo .tx-mate, .rd-item-instr .tx-mate { max-width: 100%; }
.rd-pasos { position: sticky; bottom: 0; z-index: 3; padding: 10px 0 max(10px, env(safe-area-inset-bottom, 0px)); background: linear-gradient(transparent, #fff 18%); }
.rd-examen.con-nb .rd-pasos { position: sticky; bottom: 0; padding-bottom: 10px; }
.rd-examen.con-nb .rd-pasos #rd-antes, .rd-examen.con-nb .rd-pasos #rd-despues { display: inline-flex; }
.rd-examen.con-nb .rd-pasos { justify-content: space-between; }
.rd-examen.con-nb .rd-pasos:not(:has(#rd-fin, #rd-marcar)) { display: flex; }
.rd-examen.con-nb .rd-pasos #rd-fin { margin-left: auto; }
@media (max-width: 640px) {
  .rd-barra { gap: 6px; }
  .rd-progreso { width: auto; flex: 1; font-size: 11px; }
  .rd-terminar { min-height: 44px; padding-inline: 10px; }
  .rd-cuerpo { display: block; padding: 16px 12px 96px; }
  .rd-pq-cuerpo { padding: 18px 14px; }
  .rd-pq:has(.rd-item-instr) { display: flex; }
  .rd-pq:has(.rd-item-instr) > .rd-item { display: flex; }
  .rd-pasos { position: fixed; right: 0; bottom: 0; left: 0; padding: 12px 12px max(12px, env(safe-area-inset-bottom, 0px)); background: rgba(255,255,255,.97); border-top: 1px solid var(--kc-border); }
  .rd-examen.con-nb { padding-bottom: 0; }
  .rd-examen.con-nb .rd-pasos { position: fixed; bottom: 62px; border: 0; background: transparent; pointer-events: none; }
  .rd-examen.con-nb .rd-pasos > * { pointer-events: auto; }
  .rd-examen.con-nb .rd-pasos #rd-marcar { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .rd *, .rd *::before, .rd *::after { scroll-behavior: auto !important; animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}
@media (max-width: 520px) { .nb-hueco { width: 34px; height: 34px; } }
.cs-ver { display: inline-flex; flex: none; margin-left: auto; padding: 4px; border: none; border-radius: 8px; background: transparent; color: #8a93a6; cursor: pointer; opacity: 0.55; transition: opacity 0.15s ease, background-color 0.15s ease, color 0.15s ease; }
.cs-ver .material-symbols-outlined { font-size: 18px; }
.cs-item-pqs li:hover .cs-ver, .cs-ver:focus-visible { opacity: 1; }
.cs-ver:hover { background: rgba(255, 97, 21, 0.1); color: var(--kc-primary-text); }

/* Pausa entre las dos partes de una evaluación (cuestionario.js → vigilarPausa). */
.cq-pausa { position: fixed; left: 50%; top: 84px; z-index: 1500; width: min(640px, calc(100% - 24px)); transform: translateX(-50%); }
.cq-pausa.is-forzado { inset: 0; top: 0; left: 0; width: auto; transform: none; display: grid; place-items: center; padding: 16px; background: rgba(15, 23, 36, 0.72); }
.cq-pausa-caja { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 16px 18px; border: 1px solid #ffd3b8; border-left: 4px solid var(--kc-primary); border-radius: 14px; background: #fff8f3; box-shadow: 0 18px 40px -18px rgba(15, 23, 36, 0.45); }
.cq-pausa.is-forzado .cq-pausa-caja { width: min(520px, 100%); background: #fff; }
.cq-pausa-caja > .material-symbols-outlined { font-size: 30px; color: var(--kc-primary); }
.cq-pausa-caja > div { flex: 1; min-width: 220px; }
.cq-pausa-caja p { margin: 4px 0 0; color: var(--kc-text-muted); font-size: 14px; line-height: 1.45; }

/* Presentación: entrar por QR (invitados) y explicación tras revelar la correcta. */
.pi-codigo { font-variant-numeric: tabular-nums; letter-spacing: 0.08em; }
.pi-invitar { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 24px; text-align: center; }
.pi-invitar-qr svg { width: min(300px, 70vw); height: auto; border-radius: 12px; box-shadow: 0 8px 24px -14px rgba(15, 23, 36, 0.4); }
.pi-invitar-link { margin: 0; font-size: 18px; }
.pi-invitar-link .pi-codigo { font-size: 26px; color: var(--kc-primary-text); }
.pi-proy-unirse { position: fixed; right: 14px; bottom: 14px; z-index: 5; display: flex; align-items: center; gap: 10px; padding: 8px 12px 8px 8px; border-radius: 14px; background: rgba(255, 255, 255, 0.95); color: #131b2e; box-shadow: 0 8px 24px -12px rgba(0, 0, 0, 0.5); }
.pi-proy-unirse svg { display: block; border-radius: 6px; }
.pi-proy-unirse div { display: flex; flex-direction: column; line-height: 1.15; font-size: 13px; }
.pi-proy-unirse b { font-size: 16px; }
.pi-proy-unirse .pi-codigo { font-size: 24px; color: #c2410c; }
.pi-explica { margin-top: 10px; padding: 10px 12px; border: 1px solid #ffd3b8; border-left: 4px solid var(--kc-primary); border-radius: 12px; background: #fff8f3; animation: motion-rise var(--motion-fast) var(--motion-ease) backwards; }
.pi-explica-tit { display: flex; align-items: center; gap: 6px; margin: 0 0 4px; font-weight: 700; font-size: 13.5px; color: var(--kc-primary-text); cursor: default; }
details.pi-explica > summary { cursor: pointer; list-style: none; }
.pi-explica .tx { font-size: 14.5px; line-height: 1.5; }
.pi-explica-proy .tx { font-size: 20px; }
@media (max-width: 860px) { .pi-proy-unirse { display: none; } }
/* Página para entrar con el teléfono (p.html). */
.p-entrar { min-height: 100dvh; display: grid; place-items: center; padding: 20px 16px; background: #f7f8fd; }
.p-caja { width: min(420px, 100%); display: flex; flex-direction: column; gap: 14px; padding: 24px 20px; border-radius: 20px; background: #fff; box-shadow: 0 18px 40px -22px rgba(15, 23, 36, 0.45); }
.p-caja h1 { margin: 0; font-size: 24px; }
.p-caja p { margin: 0; color: var(--kc-text-muted); }
.p-caja input { width: 100%; padding: 12px 14px; border: 1px solid var(--kc-border); border-radius: 12px; font: inherit; font-size: 17px; }
.p-caja .p-codigo { font-size: 26px; letter-spacing: 0.25em; text-align: center; font-variant-numeric: tabular-nums; }
.p-caja .btn { min-height: 48px; justify-content: center; font-size: 16px; }
/* Presentación: QR grande al inicio, solución paso a paso, puntaje acumulado y PDF al terminar. */
.pi-proy-qr { position: fixed; inset: 0; z-index: 6; display: grid; place-items: center; padding: 24px; background: rgba(15, 23, 36, 0.55); animation: motion-fade 0.25s ease-out backwards; }
.pi-proy-qr-caja { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 32px; padding: 32px 40px; border-radius: 28px; background: #fff; color: #131b2e; box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.6); }
.pi-proy-qr-caja svg { width: min(440px, 60vh); height: auto; }
.pi-proy-qr-caja > div { display: flex; flex-direction: column; gap: 4px; font-size: 22px; }
.pi-proy-qr-caja p { margin: 0 0 6px; font-size: 30px; font-weight: 800; }
.pi-proy-qr-caja b { font-size: 34px; }
.pi-proy-qr-caja .pi-codigo { font-size: 64px; color: #c2410c; line-height: 1; }
.pi-proy-qr-caja small { margin-top: 10px; color: #5b6476; font-size: 18px; }
.pi-sol { position: fixed; inset: 0; z-index: 7; display: grid; place-items: center; padding: 20px; background: rgba(15, 23, 36, 0.78); animation: motion-fade 0.2s ease-out backwards; }
.pi-sol-caja { width: min(1100px, 100%); max-height: calc(100dvh - 40px); overflow: auto; padding: 28px 34px; border-radius: 24px; background: #fff; color: #131b2e; }
.pi-sol-t { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-weight: 800; color: #c2410c; font-size: 20px; }
.pi-sol-enun { color: #5b6476; font-size: 18px; margin-bottom: 14px; }
.pi-sol-pasos { display: flex; flex-direction: column; gap: 12px; margin: 0; padding-left: 1.4em; font-size: clamp(18px, 2.6vw, 30px); line-height: 1.45; }
.pi-sol-pasos li.is-nuevo { animation: motion-rise 0.35s ease-out backwards; }
.pi-sol-resp { margin: 18px 0 0; padding: 12px 16px; border-radius: 14px; background: #f1fbf5; font-size: clamp(18px, 2.4vw, 28px); }
.pi-sol-n { margin: 14px 0 0; color: #8a93a6; font-size: 14px; text-align: right; }
.pi-vivo .pi-sol-pasos { font-size: 18px; }
.pi-sol-ctl { align-items: center; }
.pi-sol-n { font-variant-numeric: tabular-nums; }
.pi-rank { display: flex; flex-direction: column; gap: 4px; margin: 6px 0 0; padding: 0; list-style: none; }
.pi-rank li { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 10px; background: #f7f8fd; }
.pi-rank li:first-child { background: #fff1e8; }
.pi-rank-l { width: 24px; font-weight: 800; color: #c2410c; text-align: center; }
.pi-rank-n { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pi-rank b { font-variant-numeric: tabular-nums; }
.pi-proy-rank { margin-top: 12px; }
.pi-proy .pi-rank li { font-size: 20px; }
.pi-rank-caja { margin-top: 12px; }
.pi-rank-caja summary { display: flex; align-items: center; gap: 6px; cursor: pointer; font-weight: 700; }
.pi-pts b { margin-right: 2px; }
.pi-mis-pts { display: flex; align-items: center; gap: 6px; font-size: 18px; }
.pi-proy-pdf { display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 18px 0; }
.pi-proy-pdf svg { border-radius: 14px; }
.pi-proy-pdf p { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 20px; }
.pi-proy-fin .pi-proy-rank { width: min(520px, 90vw); }

/* Categorías de cursos en el inicio (inicio.js). */
.cat-acciones { display: flex; flex-wrap: wrap; gap: 10px; }
.cat-grilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.cat-baldosa { position: relative; display: flex; border-radius: 20px; background: var(--cat); color: #fff; box-shadow: 0 16px 36px -22px var(--cat); transition: transform var(--motion-fast) var(--motion-ease), box-shadow var(--motion-fast) ease; overflow: hidden; }
.cat-baldosa::after { content: ""; position: absolute; right: -40px; bottom: -40px; width: 140px; height: 140px; border-radius: 50%; background: rgba(255, 255, 255, 0.14); pointer-events: none; }
.cat-baldosa:hover { transform: translateY(-2px); box-shadow: 0 20px 40px -20px var(--cat); }
.cat-abrir { flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-height: 132px; padding: 22px 22px 20px; border: none; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.cat-nombre { font-size: 21px; font-weight: 800; line-height: 1.2; }
.cat-meta { margin-top: auto; font-size: 14px; opacity: 0.9; }
.cat-editar { position: absolute; top: 10px; right: 10px; z-index: 1; display: inline-flex; padding: 6px; border: none; border-radius: 999px; background: rgba(255, 255, 255, 0.18); color: #fff; cursor: pointer; }
.cat-editar:hover { background: rgba(255, 255, 255, 0.32); }
.cat-baldosa.is-sin { color: #fff; }
.cat-punto { width: 14px; height: 14px; border-radius: 50%; background: var(--cat); }
.cat-colores { display: flex; flex-wrap: wrap; gap: 10px; }
.cat-color { width: 34px; height: 34px; border: 3px solid #fff; border-radius: 50%; box-shadow: 0 0 0 1px var(--kc-border); cursor: pointer; }
.cat-color.is-on { box-shadow: 0 0 0 3px var(--kc-text); }
.cat-dlg { display: flex; flex-direction: column; gap: 14px; padding: 22px 22px 8px; }
.cat-ruta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.cat-ruta-volver { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: 1px solid var(--kc-border); border-radius: 999px; background: #fff; color: var(--kc-text); cursor: pointer; transition: border-color var(--motion-fast) ease, color var(--motion-fast) ease, transform var(--motion-fast) var(--motion-ease); }
.cat-ruta-volver:hover { border-color: var(--kc-primary); color: var(--kc-primary-text); transform: translateX(-2px); }
.cat-ruta-link { padding: 6px 8px; border: none; border-radius: 8px; background: transparent; color: var(--kc-text-muted); font: inherit; font-size: 17px; font-weight: 600; cursor: pointer; }
.cat-ruta-link:hover { color: var(--kc-primary-text); background: rgba(255, 97, 21, 0.08); }
.cat-ruta-sep { display: inline-flex; color: #a3abbb; }
.cat-ruta-actual { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 24px; }
/* Pestaña PAES (paes.js). */
.paes-form, .paes-res { display: flex; flex-direction: column; gap: 14px; }
.paes-form, .p-caja { min-width: 0; }
.paes-form :is(input, select, button), .p-caja :is(input, button) { min-height: 44px; }
.paes-form :is(input, select, button):focus-visible, .p-caja :is(input, button):focus-visible { outline: 3px solid rgba(255, 97, 21, .3); outline-offset: 2px; border-color: var(--kc-primary); }
.paes-pasos { display:flex; gap:6px; padding:0; margin:0 0 8px; list-style:none; }
.paes-pasos li { flex:1; min-width:0; padding:8px 4px; border-bottom:3px solid var(--kc-border); color:var(--kc-text-muted); font-size:12px; text-align:center; }
.paes-pasos li[aria-current="step"] { border-color:var(--kc-primary); color:var(--kc-text); font-weight:700; }
.paes-step-actions { display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.paes-step-actions .btn { min-height:44px; }
.paes-errores { padding:12px; border-left:4px solid var(--color-critico); background:#fff5f5; color:var(--color-critico); }
.paes-errores ul { margin:6px 0 0; padding-left:20px; }
.paes-errores a { color:inherit; text-decoration:underline; }
.paes-error-campo { margin:4px 0 0; color:var(--color-critico); font-size:14px; font-weight:600; }
.paes-form .is-error :is(input,select) { border-color:var(--color-critico); }
.paes-resumen { padding:14px; border:1px solid var(--kc-border); border-radius:14px; }
.p-caja { width:min(100%, 440px); padding:28px; border:1px solid var(--kc-border); border-radius:20px; box-shadow:var(--kc-shadow-md); }
.p-entrar { min-height:100dvh; padding:24px 16px; }
.paes-form h3, .paes-doc h3 { display: flex; align-items: center; gap: 8px; margin: 0; }
.paes-pond { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 14px; border: 1px solid var(--kc-border); border-radius: 14px; }
.paes-pond legend { padding: 0 6px; font-weight: 700; }
.paes-pond-grilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.paes-suma { margin: 0; font-weight: 700; color: #c2410c; }
.paes-suma.is-ok { color: #17804a; }
.paes-nota { font-size: 13px; }
.paes-grande { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; }
.paes-grande b { font-size: 56px; line-height: 1; color: var(--kc-primary-text); font-variant-numeric: tabular-nums; }
.paes-grande span { color: var(--kc-text-muted); }
.paes-minimo { display: flex; align-items: center; gap: 6px; margin: 0; padding: 10px 12px; border-radius: 12px; }
.paes-minimo.is-ok { background: #f1fbf5; color: #17804a; }
.paes-minimo.is-no { background: #fff8f3; color: #c2410c; }
.paes-tabla { width: 100%; border-collapse: collapse; font-size: 14px; }
.paes-tabla th, .paes-tabla td { padding: 8px 10px; border-bottom: 1px solid var(--kc-border); text-align: left; white-space: nowrap; }
.paes-tabla .num { text-align: right; font-variant-numeric: tabular-nums; }
.paes-scroll { overflow-x: auto; }
.paes-doc { display: flex; flex-direction: column; gap: 16px; }
.paes-codigo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; }
.paes-codigo > div:first-child { flex: 1; min-width: 260px; display: flex; flex-direction: column; gap: 8px; }
.paes-cod { margin: 4px 0 0; font-size: 40px; font-weight: 800; letter-spacing: 0.18em; color: var(--kc-primary-text); }
.paes-link { margin: 0; color: var(--kc-text-muted); font-size: 13px; word-break: break-all; }
.paes-qr svg { border-radius: 10px; box-shadow: 0 8px 20px -14px rgba(15, 23, 36, 0.4); }
.paes-ens { display: flex; flex-direction: column; gap: 8px; margin: 10px 0 0; padding: 0; list-style: none; }
.paes-ens li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border-radius: 10px; background: #f7f8fd; }
.paes-ens select { padding: 6px 8px; border: 1px solid var(--kc-border); border-radius: 10px; font: inherit; }
.nc-tipos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.nc-tipo { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 12px 14px; border: 1.5px solid var(--kc-border); border-radius: 14px; background: #fff; color: var(--kc-text); font: inherit; text-align: left; cursor: pointer; }
.nc-tipo .material-symbols-outlined { color: var(--kc-primary-text); margin-bottom: 4px; }
.nc-tipo small { color: var(--kc-text-muted); font-size: 12.5px; line-height: 1.35; }
.nc-tipo[aria-checked="true"] { border-color: var(--kc-primary); background: #fff8f3; box-shadow: 0 0 0 3px rgba(255, 97, 21, 0.12); }
@media (max-width: 520px) { .nc-tipos { grid-template-columns: 1fr; } }

/* Resultados del cuestionario: puntos del mejor intento junto al estado. */
.cq-puntos { font-size: 13.5px; color: var(--kc-text-2, #555); white-space: nowrap; }
.cq-puntos strong { color: var(--kc-text); font-size: 15px; }
.cq-nota-final { display: inline-flex; align-items: center; justify-content: center; min-width: 42px; padding: 3px 9px; border-radius: 999px; background: #e8f0fe; color: #1a4fb4; font-weight: 700; font-size: 15px; }
.cq-nota-final.is-roja { background: #fdecea; color: #c5221f; }

/* Miniatura del curso (igual que Aulapp, components/hub/course-thumbnail.css): portada del
   cuadro con el nombre y los datos en HTML sobre la zona clara, campo de «Datos del curso»
   y selector (public/miniaturas.js). */
.course-cover { position: relative; display: block; flex: none; aspect-ratio: 16 / 7; margin: -24px -22px 6px; overflow: hidden; background: #f3f4f7; }
.course-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.course-cover.is-custom::after { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 95% at 0% 100%, rgba(255, 255, 255, 0.94) 0%, rgba(255, 255, 255, 0.8) 32%, rgba(255, 255, 255, 0) 64%); }
.course-cover-meta { position: absolute; left: 18px; bottom: 12px; z-index: 1; display: flex; flex-direction: column; gap: 2px; width: 58%; color: #1d2433; }
.course-cover-title { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 19px; font-weight: 800; line-height: 1.15; overflow-wrap: anywhere; }
.course-cover-title.is-vacio { color: #9aa3b2; }
.course-cover-desc { overflow: hidden; color: #4a5263; font-size: 12.5px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
@media (max-width: 640px) { .course-cover { margin: -20px -18px 4px; } }

.mn-campo { display: flex; flex-direction: column; gap: 6px; }
.mn-fila { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.mn-mini { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 128px; aspect-ratio: 16 / 7; overflow: hidden; border: 1px solid var(--kc-border); border-radius: 10px; background: var(--kc-surface-container-low); color: #9aa3b2; }
.mn-mini img { width: 100%; height: 100%; object-fit: cover; }
.mn-estado { flex: 1; min-width: 140px; font-size: 14px; }
.mn-estado small { color: #b45309; font-weight: 600; }
.mn-botones { display: flex; flex-wrap: wrap; gap: 8px; }

.dlg.mn-dlg { width: min(980px, calc(100% - 32px)); }
.mn-caja { display: flex; flex-direction: column; max-height: calc(100dvh - 48px); }
.mn-head { padding: 18px 56px 8px 22px; }
.mn-head h2 { margin: 0; font-size: 22px; }
.mn-tabs { display: flex; gap: 4px; padding: 0 22px; border-bottom: 1px solid var(--kc-border); }
.mn-tabs button { min-height: 44px; padding: 0 16px; border: 0; border-bottom: 3px solid transparent; background: none; color: inherit; font: inherit; font-weight: 600; cursor: pointer; }
.mn-tabs button[aria-selected="true"] { border-bottom-color: var(--kc-primary); color: var(--kc-primary-text, var(--kc-primary)); }
.mn-cuerpo { flex: 1; min-height: 0; padding: 14px 22px; overflow-y: auto; }
.mn-filtros { position: sticky; top: -14px; z-index: 1; display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; padding: 6px 0; background: #fff; }
.mn-filtros input, .mn-filtros select { min-height: 44px; padding: 0 12px; border: 1px solid var(--kc-border); border-radius: 10px; background: #fff; color: inherit; font: inherit; }
.mn-filtros input { flex: 1 1 240px; min-width: 0; }
.mn-tema h3 { margin: 12px 0 6px; font-size: 14px; }
.mn-grilla { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.mn-op { position: relative; min-height: 44px; aspect-ratio: 16 / 7; padding: 0; overflow: hidden; border: 2px solid var(--kc-border); border-radius: 12px; background: #f3f4f7; cursor: pointer; }
.mn-op img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mn-op:hover { border-color: #f5b680; }
.mn-op:focus-visible, .mn-tabs button:focus-visible, .mn-archivo:focus-within { outline: 3px solid var(--kc-primary); outline-offset: 2px; }
.mn-op[aria-pressed="true"] { border-color: var(--kc-primary); box-shadow: 0 0 0 2px var(--kc-primary); }
.mn-marca { position: absolute; top: 6px; right: 6px; display: inline-flex; align-items: center; gap: 2px; padding: 2px 8px 2px 4px; border-radius: 999px; background: var(--kc-primary); color: #fff; font-size: 12px; font-weight: 700; }
.mn-marca .material-symbols-outlined { font-size: 16px; }
.mn-subir { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.mn-archivo { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border: 1px dashed var(--kc-border); border-radius: 12px; font-weight: 600; cursor: pointer; }
.mn-archivo input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.mn-nota { margin: 0; color: var(--kc-text-muted); font-size: 13px; }
.mn-pie { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px; padding: 14px 22px 18px; border-top: 1px solid var(--kc-border); }
.mn-vista { display: flex; flex-direction: column; gap: 6px; width: min(300px, 100%); }
.mn-vista-caja { display: block; overflow: hidden; border: 1px solid var(--kc-border); border-radius: 14px; }
.mn-vista-caja .course-cover { margin: 0; }
.mn-vacia { display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 7; color: #9aa3b2; font-size: 13px; }
.mn-acciones { display: flex; flex-wrap: wrap; gap: 8px; }
.mn-acciones .btn, .mn-botones .btn { min-height: 44px; }
@media (max-width: 640px) {
  .mn-grilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mn-head, .mn-tabs, .mn-cuerpo, .mn-pie { padding-left: 16px; padding-right: 16px; }
  .mn-acciones { width: 100%; }
  .mn-acciones .btn { flex: 1 1 auto; }
}

/* Ordenar los cursos arrastrando (public/ordenar.js): al mantener presionado un cuadro,
   todos hacen un vaivén corto como los íconos del iPhone; el arrastrado sigue al dedo. */
.my-courses > [data-id] { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.my-courses.is-ordenando > [data-id] { animation: vaiven 0.26s ease-in-out infinite alternate; }
.my-courses.is-ordenando > [data-id]:nth-child(2n) { animation-delay: -0.13s; animation-direction: alternate-reverse; }
.my-courses.is-ordenando > .is-arrastrado { position: relative; z-index: 5; animation: none; scale: 1.04; box-shadow: 0 22px 44px -12px rgba(15, 23, 36, 0.35); cursor: grabbing; transition: none; }
@keyframes vaiven { from { rotate: -0.9deg; } to { rotate: 0.9deg; } }
@media (prefers-reduced-motion: reduce) { .my-courses.is-ordenando > [data-id] { animation: none; } }

/* ------------------------------------------------- bienvenida del visitante (bienvenida.js) */
.bv-perfiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; max-width: 760px; margin-top: 24px; }
.bv-perfil { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 24px 52px 24px 24px; border: 1px solid var(--kc-border); border-radius: 16px; font: inherit; color: inherit; text-align: left; cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .15s; }
.bv-perfil:hover, .bv-perfil:focus-visible { border-color: var(--kc-primary); box-shadow: 0 14px 30px -20px rgba(255, 97, 21, 0.6); transform: translateY(-1px); }
.bv-perfil strong { font-size: 18px; line-height: 24px; }
.bv-perfil span:not(.material-symbols-outlined) { color: var(--kc-text-muted); }
.bv-perfil-icono { margin-bottom: 6px; padding: 10px; border-radius: 12px; background: rgba(255, 97, 21, 0.1); color: var(--kc-primary); font-size: 28px; }
.bv-perfil-ir { position: absolute; right: 20px; top: 50%; translate: 0 -50%; color: var(--kc-text-muted); }
.bv-logros { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; margin-top: 20px; }
.bv-logro { padding: 20px; border-radius: 16px; }
.bv-logro h2 { margin: 10px 0 4px; font-size: 16px; line-height: 22px; }
.bv-logro p { margin: 0; color: var(--kc-text-muted); font-size: 14px; line-height: 20px; }
.bv-logro-icono { color: var(--kc-primary); font-size: 26px; }
.bv-codigo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; max-width: 760px; margin-top: 8px; padding: 18px 20px; border-radius: 16px; }
.bv-codigo label { display: flex; flex-direction: column; gap: 2px; }
.bv-codigo label span { color: var(--kc-text-muted); font-size: 13px; }
.bv-codigo-fila { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
.bv-codigo-fila input { width: 12rem; max-width: 100%; min-height: 40px; padding: 0 12px; border: 1px solid var(--kc-border); border-radius: 10px; font: inherit; text-transform: uppercase; }
.bv-cierre { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; margin-top: 24px; padding: 24px; border: 2px solid var(--kc-primary); border-radius: 16px; }
.bv-cierre h2 { margin: 0 0 4px; font-size: 18px; }
.bv-cierre p { margin: 0; max-width: 60ch; color: var(--kc-text-muted); }
.bv-cambiar { margin: 20px 0 0; }
.bv-cambiar-boton { padding: 0; border: 0; background: none; color: var(--kc-primary); font: inherit; font-weight: 600; cursor: pointer; }
.bv-cambiar-boton:hover { text-decoration: underline; }
@media (max-width: 640px) {
  .bv-perfiles { grid-template-columns: 1fr; }
  .bv-cierre .btn { width: 100%; justify-content: center; }
}
.legal-indice { margin: 8px 0 8px; padding: 16px 20px; border: 1px solid var(--kc-border); border-radius: 12px; background: var(--kc-surface-container-low); }
.legal-indice ol { margin: 0; padding-left: 1.4em; columns: 2; column-gap: 24px; font-size: 14px; }
.legal-indice li { margin-bottom: 4px; break-inside: avoid; }
.legal h2[id] { scroll-margin-top: 16px; }
@media (max-width: 560px) { .legal-indice ol { columns: 1; } }
.paes-preferencias { display: flex; flex-direction: column; gap: 14px; }
.paes-preferencia, .paes-buscar, .paes-resultados, .paes-detalle { min-width: 0; max-width: 100%; }
.paes-orden { display: flex; gap: 8px; }
.paes-orden button { width: 48px; min-height: 44px; border: 1px solid var(--kc-border); border-radius: 10px; background: #fff; font-size: 20px; cursor: pointer; }
.paes-orden button:disabled { opacity: .45; cursor: default; }
.paes-preferencia select { max-width: 100%; }
.paes-form [hidden] { display: none !important; }
.paes-pond-grilla .campo { justify-content: space-between; }
.paes-agregar { justify-content: flex-start; }
.paes-elegida { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: 12px; background: var(--kc-surface-container-low); }
.paes-elegida > div { min-width: 0; overflow-wrap: anywhere; }
.paes-buscar { display: flex; flex-direction: column; gap: 10px; }
.paes-buscar > .en-enlace, .paes-quitar { align-self: flex-start; display: inline-flex; align-items: center; gap: 4px; }
.paes-resultados { display: flex; flex-direction: column; max-height: 320px; overflow-y: auto; border-radius: 12px; }
.paes-resultados:has(.paes-oferta) { border: 1px solid var(--kc-border); }
.paes-oferta { display: flex; flex-direction: column; gap: 2px; width: 100%; padding: 9px 12px; text-align: left; border: 0; border-bottom: 1px solid var(--kc-border); background: #fff; font: inherit; cursor: pointer; overflow-wrap: anywhere; }
.paes-oferta:last-child { border-bottom: 0; }
.paes-oferta:hover, .paes-oferta:focus-visible { background: #fff8f3; }
.paes-oferta[aria-selected="true"] { background: #fff1e8; }
.paes-oferta span { font-size: 13px; }
.paes-detalle { display: flex; flex-direction: column; gap: 10px; }
.paes-prefs { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; counter-reset: pref; }
.paes-prefs li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 1px solid var(--kc-border); border-radius: 12px; counter-increment: pref; }
.paes-prefs li > div:first-child { display: flex; flex-direction: column; min-width: 0; overflow-wrap: anywhere; }
.paes-prefs li > div:first-child::before { content: counter(pref) ".ª preferencia"; font-size: 12px; color: var(--kc-text-muted); }
.paes-prefs-num { display: flex; flex-direction: column; align-items: flex-end; flex: none; text-align: right; }
.paes-prefs-num b { font-size: 20px; font-variant-numeric: tabular-nums; }
.paes-sobre, .paes-bajo { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 600; }
.paes-sobre { color: #17804a; }
.paes-bajo { color: #c2410c; }
.paes-chip { display: inline-flex; align-self: flex-start; max-width: 100%; padding: 6px 10px; border-radius: 999px; font-size: 13px; font-weight: 700; overflow-wrap: anywhere; }
.paes-chip.is-verde { color: #176b3a; background: #e8f6ec; }
.paes-chip.is-ambar { color: #8a5200; background: #fff2d6; }
.paes-chip.is-rojo { color: #a12d2d; background: #fdeaea; }
.paes-chip.is-gris { color: #535d68; background: #edf0f2; }
@media (max-width: 420px) { .paes-pond-grilla { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .paes-pasos li { font-size:10px; overflow-wrap:anywhere; } .p-caja { padding:22px 18px; } }
@media (prefers-reduced-motion: reduce) { .paes-form *, .p-caja * { scroll-behavior:auto !important; animation:none !important; transition:none !important; } }

/* Corrección de desarrollo */
.cd-card { margin: 14px 0; padding: 16px; border: 1px solid var(--kc-border); border-radius: 12px; background: #fff; }
.cd-card h2 { margin-top: 0; }
#correccion label, #admin-correccion label { display: grid; gap: 6px; margin: 12px 0; }
#correccion input, #correccion textarea, #correccion select, #admin-correccion input { box-sizing: border-box; width: 100%; max-width: 100%; min-height: 42px; padding: 9px 11px; border: 1px solid var(--kc-border); border-radius: 8px; background: #fff; color: var(--kc-text); font: inherit; }
#correccion textarea { min-height: 88px; resize: vertical; }
#correccion button, #admin-correccion button { margin: 5px 6px 5px 0; }
.cd-nota { color: var(--color-tinta-suave); font-size: 13px; }
#correccion a { overflow-wrap: anywhere; }
@media (max-width: 500px) { #correccion .cd-card { padding: 12px; } #correccion button { max-width: 100%; white-space: normal; } }

#admin-correccion input[type=checkbox] { width: 20px; min-height: 20px; }

.cd-imagen { display: block; max-width: 100%; max-height: 460px; object-fit: contain; border: 1px solid var(--kc-border); border-radius: 8px; }

#correccion fieldset { min-width: 0; }
/* ---------------------------------------------------------------- examen seguro (examen-seguro*.js) */
.es-caja .es-cuerpo { padding: 24px 24px 8px; overflow-y: auto; }
.es-pasos { display: grid; gap: 10px; margin: 18px 0 8px; padding: 0; list-style: none; }
.es-paso { display: flex; align-items: flex-start; gap: 10px; }
.es-paso > .material-symbols-outlined { flex: none; font-size: 22px; color: #9aa3ad; }
.es-paso.is-ok > .material-symbols-outlined { color: #1f7a44; }
.es-paso.is-aviso > .material-symbols-outlined { color: #ff6115; }
.es-paso.is-mal > .material-symbols-outlined { color: var(--color-critico, #c62828); }
.es-paso strong { display: block; font-size: 14.5px; }
.es-paso small { display: block; color: var(--kc-text-muted); font-size: 13.5px; line-height: 1.45; overflow-wrap: anywhere; }
.es-error { margin: 8px 0 0; padding: 0.6rem 0.8rem; border-radius: 10px; background: #fdeaea; color: #a12d2d; font-size: 14px; }
.es-error[hidden] { display: none; }
.es-conexion { position: fixed; left: 50%; bottom: 84px; z-index: 2100; display: flex; align-items: center; gap: 8px; max-width: calc(100% - 32px); padding: 0.55rem 0.9rem; border-radius: 999px; background: #3b2a1a; color: #fff; font-size: 13.5px; transform: translateX(-50%); box-shadow: 0 10px 26px rgba(15, 23, 36, 0.3); }
.es-conexion[hidden] { display: none; }
.es-registro { position: fixed; right: 12px; bottom: 84px; z-index: 2100; width: min(340px, calc(100% - 24px)); max-height: 45vh; display: flex; flex-direction: column; border-radius: 16px; background: #fff; box-shadow: 0 18px 44px rgba(15, 23, 36, 0.28); overflow: hidden; }
.es-registro-boton { display: flex; align-items: center; gap: 8px; padding: 0.7rem 0.9rem; border: none; background: #fff7ed; color: #9a3412; font: inherit; font-weight: 600; text-align: left; cursor: pointer; }
.es-registro-boton span { flex: 1; }
.es-registro-boton b { min-width: 22px; padding: 0 6px; border-radius: 999px; background: #ff6115; color: #fff; font-size: 12px; text-align: center; }
.es-registro-lista { margin: 0; padding: 8px 12px 12px; overflow-y: auto; list-style: none; display: grid; gap: 8px; }
.es-registro.is-plegado .es-registro-lista { display: none; }
.es-registro-lista li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 8px; font-size: 13px; }
.es-registro-lista time { color: var(--kc-text-muted); font-variant-numeric: tabular-nums; }
.es-registro-lista em { grid-column: 2; color: #9a3412; font-size: 12px; font-style: normal; }
.es-vacio { color: var(--kc-text-muted); font-size: 13.5px; list-style: none; }
.es-sec { padding: 20px; }
.es-sec-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.es-sec-head h3 { margin: 0; font-size: 19px; }
.es-sec-head p { margin: 4px 0 0; max-width: 60ch; color: var(--kc-text-muted); font-size: 14px; }
.es-modos { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 10px; }
.es-modo { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 14px; border: 1.5px solid var(--kc-border, #e6e1d6); border-radius: 14px; cursor: pointer; }
.es-modo input { position: absolute; opacity: 0; pointer-events: none; }
.es-modo.is-activa { border-color: #ff6115; background: #fff7ed; }
.es-modo:focus-within { outline: 2px solid #ff6115; outline-offset: 2px; }
.es-modo.is-apagada { opacity: 0.55; cursor: not-allowed; }
.es-modo .tag { align-self: flex-start; }
.es-modo small { color: var(--kc-text-muted); font-size: 13px; line-height: 1.4; }
.es-modo em { color: #8a4b00; font-size: 12.5px; font-style: normal; }
.es-detalle { margin: 14px 0 0; padding: 12px 14px; border-radius: 12px; background: var(--color-fondo, #faf8f3); font-size: 14px; }
.es-detalle p { margin: 0 0 4px; }
.es-reglas { display: grid; gap: 12px; margin-top: 16px; }
.es-check { display: flex; align-items: flex-start; gap: 8px; font-size: 14.5px; }
.es-grupo { display: grid; gap: 8px; margin: 0; padding: 12px 14px; border: 1px solid var(--kc-border, #e6e1d6); border-radius: 12px; font-size: 14.5px; min-width: 0; }
.es-grupo legend { padding: 0 6px; font-weight: 600; }
.es-grupo label { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.es-grupo[disabled] { opacity: 0.55; }
.es-num { width: 4.5em; padding: 0.3rem 0.4rem; border: 1px solid #d9d2c3; border-radius: 8px; font: inherit; }
.es-claves { width: 100%; padding: 0.5rem; border: 1px solid #d9d2c3; border-radius: 8px; font: 13px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; resize: vertical; overflow-wrap: anywhere; }
.es-ayuda { margin: 0; color: var(--kc-text-muted); font-size: 13px; }
.es-excepciones { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.es-excepciones li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.es-agregar select { max-width: 100%; padding: 0.45rem 0.6rem; border: 1px solid #d9d2c3; border-radius: 10px; font: inherit; background: #fff; }
.es-pie { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 16px; }
.es-pie .es-error { flex: 1 1 100%; margin: 0; }
.es-panel { display: flex; flex-direction: column; }
.es-panel-head { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--kc-border, #e6e1d6); background: #fff; }
.es-panel-head > div { flex: 1; min-width: 0; }
.es-panel-head h2 { margin: 0; font-size: 19px; }
.es-panel-head p { margin: 0; color: var(--kc-text-muted); font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.es-vivo { display: inline-flex; align-items: center; gap: 4px; color: #1f7a44; font-size: 13px; font-weight: 600; }
.es-vivo.is-caido { color: #8a4b00; }
.es-panel-cuerpo { display: grid; gap: 16px; width: min(1180px, 100%); margin: 0 auto; padding: 16px; }
.es-filtros { display: flex; flex-wrap: wrap; gap: 8px; }
.es-filtros button { padding: 0.4rem 0.8rem; border: 1px solid #e2dccf; border-radius: 999px; background: #fff; font: inherit; font-size: 13.5px; cursor: pointer; }
.es-filtros button[aria-pressed="true"] { border-color: #ff6115; background: #fff7ed; color: #9a3412; }
.es-sesiones { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr)); gap: 12px; }
.es-sesion { display: grid; gap: 10px; padding: 14px; }
.es-sesion header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; }
.es-sesion dl { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0; }
.es-sesion dt { color: var(--kc-text-muted); font-size: 12px; }
.es-sesion dd { margin: 0; font-size: 14px; font-variant-numeric: tabular-nums; }
.es-sesion footer { display: flex; flex-wrap: wrap; gap: 6px; }
.es-sesion footer .btn { min-height: 36px; padding: 0.35rem 0.75rem; font-size: 13.5px; }
.es-estado { padding: 0.15rem 0.6rem; border-radius: 999px; background: #edf0f2; color: #535d68; font-size: 12.5px; font-weight: 600; }
.es-estado.is-ok { background: #e3f5ea; color: #1f7a44; }
.es-estado.is-warn { background: #fff1e1; color: #8a4b00; }
.es-estado.is-mal { background: #fdeaea; color: #a12d2d; }
.es-estado.is-fin { background: #e8eefc; color: #2b4a8a; }
.es-n { color: #a12d2d; }
.es-eventos { padding: 16px; }
.es-eventos h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 17px; }
.es-eventos ol { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.es-eventos li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid #f0ece3; font-size: 14px; }
.es-eventos li.is-revisada { opacity: 0.6; }
.es-eventos li time { color: var(--kc-text-muted); font-variant-numeric: tabular-nums; }
.es-eventos li strong { margin-right: 6px; }
.es-eventos li em { display: inline-flex; align-items: center; gap: 4px; color: #1f7a44; font-size: 13px; font-style: normal; }
@media (max-width: 520px) {
  .es-eventos li { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .es-conexion, .es-registro { bottom: 96px; }
}
/* Cámara de presencia: una miniatura de uno mismo (espejo) con el estado; no se graba nada. */
.es-cam-previa { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 8px; }
.es-cam-previa video { width: 120px; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; background: #1b2230; transform: scaleX(-1); }
.es-cam-previa video[hidden] { display: none; }
.es-cam { position: fixed; left: 12px; bottom: 84px; z-index: 2100; display: grid; width: 104px; border: 2px solid #1f7a44; border-radius: 12px; overflow: hidden; background: #1b2230; box-shadow: 0 10px 26px rgba(15, 23, 36, 0.3); }
.es-cam video { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transform: scaleX(-1); }
.es-cam-estado { padding: 2px 6px; background: #1f7a44; color: #fff; font-size: 11.5px; font-weight: 600; text-align: center; }
.es-cam.is-nadie { border-color: #ff6115; }
.es-cam.is-nadie .es-cam-estado { background: #ff6115; }
.es-cam.is-cargando, .es-cam.is-sin { border-color: #9aa3ad; }
.es-cam.is-cargando .es-cam-estado, .es-cam.is-sin .es-cam-estado { background: #6b7a89; }
@media (max-width: 520px) { .es-cam { width: 80px; bottom: 96px; } }
.es-pantalla { position: fixed; left: 12px; bottom: 84px; z-index: 2100; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; width: min(351px, calc(100% - 24px)); padding: 10px 12px; border: 2px solid #ff6115; border-radius: 12px; background: #fff7ed; color: #66320d; box-shadow: 0 10px 26px rgba(15, 23, 36, 0.3); font-size: 13.5px; }
.es-pantalla .btn { max-width: 100%; white-space: normal; }
@media (max-width: 520px) { .es-pantalla { bottom: 96px; } }
/* Marco naranjo mientras se comparte la pantalla (encima de todo, sin tapar clics). */
.es-marco { position: fixed; inset: 0; z-index: 2200; pointer-events: none; border: 4px solid #ff6115; box-shadow: inset 0 0 18px rgba(255, 97, 21, 0.75), 0 0 14px rgba(255, 97, 21, 0.9); animation: es-brillo 2.4s ease-in-out infinite; }
.es-marco span { position: absolute; top: 0; left: 50%; display: inline-flex; align-items: center; gap: 4px; padding: 2px 12px 4px; border-radius: 0 0 10px 10px; background: #ff6115; color: #fff; font-size: 12.5px; font-weight: 600; transform: translateX(-50%); }
.es-marco span .material-symbols-outlined { font-size: 16px; }
@keyframes es-brillo { 50% { box-shadow: inset 0 0 28px rgba(255, 122, 47, 0.95), 0 0 22px rgba(255, 122, 47, 1); border-color: #ff7a2f; } }
@media (prefers-reduced-motion: reduce) { .es-marco { animation: none; } }
.es-oculto { position: fixed; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.es-acepto { margin-top: 8px; color: var(--kc-text); font-weight: 600; }
.es-capturas { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.es-captura-boton { padding: 0; border: 1px solid #e2dccf; border-radius: 8px; background: none; cursor: zoom-in; overflow: hidden; }
.es-captura { display: block; max-width: 120px; max-height: 80px; border-radius: 6px; }
.es-registro-lista .es-captura { grid-column: 2; max-width: 100%; }
.es-captura-grande { display: block; width: 100%; height: auto; border-radius: 10px; }

/* ───────────── QuizLap: pantalla propia (nueva partida, historial) ───────────── */
.ql-hub .ql-main { justify-content: flex-start; padding-top: 28px; }
.ql-hub-box { width: min(920px, 100%); display: flex; flex-direction: column; gap: 14px; }
.ql-hub .ql-banner { width: min(720px, 100%); text-align: left; }
.ql-hub-actions, .ql-modes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 14px; width: min(920px, 100%); }
.ql-mode { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 18px; border-radius: 18px; border: 2px solid var(--kc-border, #e4e7f6); background: var(--kc-surface, #fff); color: inherit; font: inherit; text-align: left; cursor: pointer; min-width: 0; transition: border-color 0.15s ease, transform 0.1s ease; }
.ql-mode:hover { border-color: var(--world-aula-b); }
.ql-mode:active { transform: scale(0.98); }
.ql-mode b { font-size: 19px; font-weight: 900; }
.ql-mode > span:last-child { font-size: 14px; color: var(--kc-text-muted, #5a6170); }
.ql-mode-icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 14px; background: color-mix(in srgb, var(--world-aula-b) 14%, transparent); color: var(--world-aula-b); }
.ql-mode.is-main { border-color: var(--world-aula-b); background: color-mix(in srgb, var(--world-aula-b) 6%, var(--kc-surface, #fff)); }
.ql-mode.is-main .ql-mode-icon { background: var(--world-aula-b); color: #fff; }
.ql-hist { display: flex; flex-direction: column; gap: 8px; width: min(920px, 100%); }
.ql-hist-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--kc-border, #e4e7f6); background: var(--kc-surface, #fff); color: inherit; font: inherit; text-align: left; cursor: pointer; min-width: 0; }
.ql-hist-row:hover { border-color: var(--world-aula-b); }
.ql-hist-fila { display: flex; align-items: center; gap: 8px; }
.ql-hist-fila .ql-hist-row { flex: 1; min-width: 0; }
.ql-hist-borrar { flex: none; width: 44px; min-height: 44px; padding: 0; }
.ql-hist-icon { flex: none; display: inline-flex; color: var(--world-aula-b); }
.ql-hist-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ql-hist-body b { overflow-wrap: anywhere; }
.ql-hist-body small, .ql-hist-win small { font-size: 12px; color: var(--kc-text-muted, #5a6170); }
.ql-hist-win { flex: none; display: inline-flex; align-items: center; gap: 4px; font-weight: 700; font-size: 14px; }
.ql-hist-win small { margin-left: 4px; }
@media (max-width: 560px) { .ql-hist-row { flex-wrap: wrap; } .ql-hist-win { width: 100%; padding-left: 36px; } }

/* ───────────── Escalera millonaria ───────────── */
.ql-mill { display: grid; grid-template-columns: minmax(0, 1fr) 230px; gap: 24px; width: 100%; align-items: start; }
.ql-mill-main { display: flex; flex-direction: column; align-items: center; gap: 16px; min-width: 0; }
.ql-ladder { list-style: none; margin: 0; padding: 8px; display: flex; flex-direction: column; gap: 2px; border-radius: 16px; background: var(--kc-surface-container-low, #f2f3ff); }
.ql-ladder li { display: flex; justify-content: space-between; gap: 8px; padding: 4px 10px; border-radius: 9px; font-size: 15px; font-variant-numeric: tabular-nums; color: var(--kc-text-muted, #5a6170); }
.ql-ladder li span { font-weight: 700; min-width: 22px; }
.ql-ladder li.is-safe { color: var(--kc-text, #131b2e); font-weight: 800; }
.ql-ladder li.is-done { color: var(--kc-success, #006c49); }
.ql-ladder li.is-now { background: var(--world-aula-b); color: #fff; font-weight: 900; }
.ql-lifelines { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.ql-life { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px; border: 2px solid color-mix(in srgb, var(--world-aula-b) 40%, transparent); background: var(--kc-surface, #fff); color: inherit; font: inherit; font-size: 14px; font-weight: 700; }
button.ql-life { cursor: pointer; }
button.ql-life:hover { border-color: var(--world-aula-b); }
.ql-life b { color: var(--world-aula-b); font-weight: 900; }
.ql-life.is-used { opacity: 0.4; text-decoration: line-through; }
.ql-help { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 8px 14px; border-radius: 12px; background: color-mix(in srgb, var(--world-aula-b) 10%, transparent); font-size: clamp(15px, 1.6vw, 20px); }
.ql-secs.is-mini { width: auto; height: auto; min-width: 34px; padding: 2px 8px; border-width: 2px; border-radius: 999px; font-size: 16px; }
.ql-verdict { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: clamp(20px, 2.6vw, 32px); font-weight: 900; color: var(--kc-success, #006c49); animation: ql-rise 0.3s ease-out both; }
.ql-verdict.is-bad { color: var(--kc-error, #ba1a1a); }
.ql-order-done { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; width: 100%; }
.ql-order-done li { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 14px; border: 2px solid var(--kc-success, #006c49); background: var(--kc-success-bg, #e3f9ef); font-weight: 700; font-size: clamp(16px, 1.9vw, 22px); text-align: left; animation: ql-row-in 0.45s ease both; animation-delay: calc(var(--i, 0) * 120ms); }
.ql-order-done li span { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 32px; height: 32px; border-radius: 10px; background: var(--kc-success, #006c49); color: #fff; font-weight: 900; }
.ql-order-pick .ql-opt[disabled].is-picked { opacity: 1; }
.ql-friends { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.ql-friends .ql-note { width: 100%; }
.ql-friends .ql-player { cursor: pointer; font: inherit; border: 0; }
@media (max-width: 900px) {
  .ql-mill { grid-template-columns: minmax(0, 1fr); }
  .ql-ladder { display: none; }
}


/* Temas del muro y archivos adjuntos del espacio. */
.aula-tema-acciones { display: flex; justify-content: flex-end; margin: 0 0 12px; }
.aula-tema-titulo { margin: 24px 0 10px; padding: 0 0 8px; border-bottom: 1px solid var(--kc-border, #e5e7eb); color: var(--kc-text, #202431); font-size: 17px; font-weight: 750; }
.aula-tema-titulo:first-child { margin-top: 0; }
.aula-tema-vacio { margin: 0 0 12px; }
.aula-temas-dialogo { min-width: min(680px, calc(100vw - 40px)); }
.aula-temas-lista, .espacio-lista { display: grid; gap: 8px; margin-top: 14px; }
.aula-tema-fila, .espacio-lista > div { display: flex; align-items: center; gap: 8px; }
.aula-tema-fila > input { flex: 1; min-width: 100px; }
.espacio-lista > div { justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--kc-border, #e5e7eb); }
.espacio-lista > div:last-child { border-bottom: 0; }
.espacio-lista > div > span:first-child { display: grid; gap: 4px; }
.espacio-lista small { color: var(--kc-text-muted, #697386); }
.espacio-lista.card { padding: 4px 20px; }
.espacio-lista > .espacio-curso { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; }
.espacio-curso-nombre { display: grid; gap: 4px; min-width: 0; color: inherit; text-decoration: none; }
.espacio-curso-nombre strong { overflow-wrap: anywhere; }
.espacio-curso-nombre:hover strong { color: var(--kc-primary); }
.espacio-curso-acciones { display: flex; align-items: center; gap: 4px; }
.espacio-curso-acciones .btn-peligro { min-width: 40px; padding: 0.5rem; }
@media (max-width: 560px) { .espacio-lista > .espacio-curso { grid-template-columns: 1fr; gap: 8px; } }
.codigo-creado { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin: 12px 0; padding: 16px; }
.codigo-creado code { padding: 8px 12px; border-radius: 8px; background: #f4f5f7; font-size: 20px; letter-spacing: .12em; }
.aula-archivos { margin-top: 22px; }
.aula-archivos h3 { margin: 0 0 10px; font-size: 16px; }
.aula-archivos ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.aula-archivos li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--kc-border, #e5e7eb); border-radius: 10px; }
.aula-archivos li > span:nth-child(2) { flex: 1; overflow-wrap: anywhere; }
.aula-archivos li a { color: var(--kc-primary, #ff6115); font-weight: 650; }
.wall-card-con-archivos { display: block; padding: 0; overflow: hidden; }
.wall-card-main { display: flex; align-items: center; gap: 20px; min-width: 0; padding: 24px 26px 18px; color: inherit; text-decoration: none; }
.wall-card-main:focus-visible { outline: 2px solid var(--kc-primary); outline-offset: -3px; }
.wall-card-main:hover .wall-card-chevron { color: var(--kc-primary); transform: translateX(3px); }
.aula-archivos-tarjeta { margin: 0 26px 20px 96px; }
.aula-subida-progreso { display: flex; align-items: center; gap: 10px; color: var(--kc-text-muted, #697386); font-size: 13px; }
.aula-subida-progreso progress { flex: 1; min-width: 80px; accent-color: var(--kc-primary); }
@media (max-width: 640px) {
  .aula-tema-fila { flex-wrap: wrap; }
  .aula-tema-fila > input { flex-basis: 100%; }
  .aula-archivos li { flex-wrap: wrap; }
  .wall-card-main { gap: 14px; padding: 18px 16px 14px; }
  .aula-archivos-tarjeta { margin: 0 16px 16px; }
}

/* Logo de un espacio en el ingreso (index.html): ancho, completo y sin recorte. */
.auth-form-icon.is-espacio { width: auto; max-width: 200px; height: 84px; object-fit: contain; border-radius: 0; box-shadow: none; background: none; }

/* [hidden] gana sobre display:flex de .auth-form (el código de invitado solo se ve en un espacio). */
.auth-form[hidden] { display: none; }

/* ------------------------------------------------- Subir archivos (A.elegirArchivos)
   La ventana estándar de toda la app: zona punteada para arrastrar que se enciende en
   naranjo al pasar un archivo encima, lista de lo elegido y el botón Subir. */
.dlg-subir { width: min(560px, calc(100% - 32px)); }
.sa { display: flex; flex-direction: column; max-height: calc(100dvh - 48px); }
.sa-head { padding: 26px 56px 0 28px; }
.sa-zona { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 20px 28px 0; padding: 30px 20px 26px; border: 2px dashed #d5daee; border-radius: 18px; background: linear-gradient(180deg, #fbfbff 0%, #f4f5ff 100%); color: var(--kc-text-muted); text-align: center; cursor: pointer; transition: border-color var(--motion-fast) ease, background-color var(--motion-fast) ease, transform var(--motion-fast) var(--motion-ease), box-shadow var(--motion-fast) ease; }
.sa-zona:hover, .sa-zona:focus-visible { border-color: color-mix(in srgb, var(--kc-primary) 55%, #d5daee); outline: none; }
.sa-zona.encima { border-color: var(--kc-primary); background: color-mix(in srgb, var(--kc-primary) 7%, #fff); box-shadow: 0 0 0 6px color-mix(in srgb, var(--kc-primary) 12%, transparent); transform: scale(1.015); }
.sa-zona-icono { display: grid; place-items: center; width: 62px; height: 62px; margin-bottom: 8px; border-radius: 50%; background: #fff; color: var(--kc-primary); box-shadow: 0 8px 20px -8px color-mix(in srgb, var(--kc-primary) 55%, transparent), var(--kc-shadow-sm); transition: transform var(--motion-fast) var(--motion-ease); }
.sa-zona-icono .material-symbols-outlined { font-size: 32px; }
.sa-zona.encima .sa-zona-icono { transform: translateY(-4px) scale(1.06); }
.sa-zona strong { color: var(--kc-text); font-size: 16px; font-weight: 700; }
.sa-zona > span { font-size: 14px; }
.sa-zona u { color: var(--kc-primary-text); font-weight: 600; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.sa-zona small { margin-top: 8px; padding: 2px 10px; border-radius: 999px; background: #fff; color: #7b8197; font-size: 12px; font-weight: 500; box-shadow: var(--kc-shadow-sm); }
.sa-zona.tiene { padding: 18px 20px 16px; }
.sa-zona.tiene .sa-zona-icono { width: 44px; height: 44px; margin-bottom: 4px; }
.sa-zona.tiene .sa-zona-icono .material-symbols-outlined { font-size: 24px; }
.sa-aviso { margin: 12px 28px 0; padding: 8px 12px; border-radius: 10px; background: #fdecea; color: var(--color-critico); font-size: 13px; }
.sa-lista { display: flex; flex-direction: column; gap: 8px; min-height: 0; margin: 0; padding: 14px 28px 20px; overflow-y: auto; list-style: none; }
.sa-lista:empty { padding-bottom: 8px; }
.sa-item { display: flex; align-items: center; gap: 12px; padding: 10px 8px 10px 12px; border: 1px solid var(--kc-border); border-radius: 14px; background: #fff; animation: motion-rise var(--motion-fast) var(--motion-ease) backwards; }
.sa-item-icono { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: color-mix(in srgb, var(--kc-primary) 10%, #fff); color: var(--kc-primary); font-size: 20px; }
.sa-item-nombre { flex: 1; min-width: 0; overflow: hidden; color: var(--kc-text); font-size: 14px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.sa-item-peso { flex: none; color: #7b8197; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.sa-quitar { flex: none; display: inline-flex; padding: 6px; border: none; border-radius: 999px; background: transparent; color: #8a90a6; cursor: pointer; transition: background-color var(--motion-fast) ease, color var(--motion-fast) ease; }
.sa-quitar:hover { background: #fdecea; color: var(--color-critico); }
.sa-quitar .material-symbols-outlined { font-size: 18px; }
.sa .dlg-pie .btn-primario { display: inline-flex; align-items: center; gap: 6px; }
.sa .dlg-pie .btn-primario .material-symbols-outlined { font-size: 20px; }
@media (max-width: 600px) {
  .sa-head { padding: 22px 52px 0 20px; }
  .sa-zona { margin: 16px 20px 0; }
  .sa-aviso { margin: 12px 20px 0; }
  .sa-lista { padding: 12px 20px 16px; }
  .sa .dlg-pie { padding: 12px 20px; }
  .sa .dlg-pie-nota { display: none; }
}
.cd-subidas { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0; }

/* ------------------------------------------------- Corrección de desarrollo (pantalla del trabajo)
   Paneles blancos numerados (Pauta → Rúbrica → Pruebas), pasos arriba, rúbrica en tarjetas con
   los niveles como columnas que se encienden en naranjo según su puntaje, y mientras Claude lee
   la pauta, el ícono flotante del inicio de sesión sobre la página difuminada. */
.cx { display: flex; flex-direction: column; gap: 18px; max-width: 980px; }
.cx .material-symbols-outlined { font-size: 20px; }
.cx-volver { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px 6px 8px; border: none; border-radius: 999px; background: transparent; color: var(--kc-text-muted); font-weight: 600; cursor: pointer; transition: background-color var(--motion-fast) ease, color var(--motion-fast) ease; }
.cx-volver:hover { background: rgba(19, 27, 46, 0.06); color: var(--kc-text); }
.cx-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.cx-head h1 { margin: 2px 0 0; font-size: clamp(26px, 4vw, 34px); letter-spacing: -0.03em; line-height: 1.15; }
.cx-head .page-subtitle { margin: 6px 0 0; max-width: 60ch; }
.cx-head .btn, .cx-acciones .btn, .cx-panel-head .btn { display: inline-flex; align-items: center; gap: 6px; }
.cx-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 11px; border-radius: 999px; background: var(--kc-surface-container-high); color: #3b4664; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.cx-chip .material-symbols-outlined { font-size: 16px; }
.cx-chip.is-en_proceso, .cx-chip.is-procesando, .cx-chip.is-en_cola { background: #fff1e8; color: var(--kc-primary-text); }
.cx-chip.is-revision, .cx-chip.is-propuesta { background: #fff7d6; color: #7a5a00; }
.cx-chip.is-aprobado, .cx-chip.is-aprobada { background: #e3f6ea; color: #17643a; }
.cx-chip.is-error { background: #fdecea; color: var(--color-critico); }
.cx-pasos { display: flex; gap: 6px; margin: 0; padding: 6px; border-radius: 999px; background: #fff; box-shadow: var(--kc-shadow-sm); list-style: none; overflow-x: auto; }
.cx-pasos li { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; min-width: max-content; padding: 7px 14px; border-radius: 999px; color: #8a90a6; font-size: 14px; font-weight: 600; }
.cx-pasos li > span { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--kc-surface-container-low); font-size: 12.5px; }
.cx-pasos li > span .material-symbols-outlined { font-size: 16px; }
.cx-pasos li.is-hecho { color: #17643a; }
.cx-pasos li.is-hecho > span { background: #e3f6ea; }
.cx-pasos li.is-actual { background: color-mix(in srgb, var(--kc-primary) 9%, #fff); color: var(--kc-primary-text); }
.cx-pasos li.is-actual > span { background: var(--kc-primary); color: #fff; box-shadow: 0 6px 14px -6px var(--kc-primary); }
.cx-aviso:empty { display: none; }
.cx-aviso { padding: 10px 14px; border-radius: 12px; background: #fff7d6; color: #5c4400; font-size: 14px; }
.cx-panel { display: flex; flex-direction: column; gap: 16px; padding: 22px; border-radius: 20px; background: #fff; box-shadow: var(--kc-shadow-sm), 0 10px 30px -22px rgba(19, 27, 46, 0.25); animation: motion-rise var(--motion-fast) var(--motion-ease) backwards; }
.cx-panel h1 { margin: 0; font-size: 26px; letter-spacing: -0.02em; }
.cx-panel-head { display: flex; align-items: flex-start; gap: 14px; }
.cx-panel-head > div { flex: 1; min-width: 0; }
.cx-panel-head h2 { margin: 0; font-size: 20px; letter-spacing: -0.015em; }
.cx-panel-head p { margin: 3px 0 0; color: var(--kc-text-muted); font-size: 14px; line-height: 20px; }
.cx-num { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; background: linear-gradient(135deg, #ff8a3d, var(--kc-primary)); color: #fff; font-weight: 800; box-shadow: 0 8px 18px -10px var(--kc-primary); }
.cx-fuentes { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.cx-fuente { display: flex; flex-direction: column; gap: 12px; padding: 16px; border: 1.5px dashed #d5daee; border-radius: 16px; background: linear-gradient(180deg, #fbfbff, #f5f6ff); transition: border-color var(--motion-fast) ease; }
.cx-fuente.tiene { border-style: solid; border-color: var(--kc-border); background: #fff; }
.cx-fuente-top { display: flex; gap: 12px; }
.cx-fuente-top h3 { margin: 0; font-size: 16px; }
.cx-fuente-top p { margin: 2px 0 0; color: var(--kc-text-muted); font-size: 13px; }
.cx-fuente-icono { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: #fff; color: var(--kc-primary); box-shadow: var(--kc-shadow-sm); }
.cx-archivos { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.cx-archivos li { display: flex; align-items: center; gap: 8px; padding: 7px 6px 7px 10px; border-radius: 10px; background: var(--kc-surface-container-low); font-size: 13.5px; }
.cx-archivos li > .material-symbols-outlined { color: var(--kc-primary); font-size: 18px; }
.cx-archivo-nombre { flex: 1; min-width: 0; overflow: hidden; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.cx-archivos small { color: #7b8197; }
.cx-quitar { display: inline-flex; padding: 4px; border: none; border-radius: 999px; background: transparent; color: #8a90a6; cursor: pointer; }
.cx-quitar:hover { background: #fdecea; color: var(--color-critico); }
.cx-quitar .material-symbols-outlined { font-size: 16px; }
.cx-agregar { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px 8px 10px; border: 1px solid var(--kc-border); border-radius: 999px; background: #fff; color: var(--kc-primary-text); font-weight: 600; font-size: 14px; cursor: pointer; transition: background-color var(--motion-fast) ease, border-color var(--motion-fast) ease, transform var(--motion-fast) var(--motion-ease); }
.cx-agregar:hover { border-color: color-mix(in srgb, var(--kc-primary) 45%, #fff); background: #fff7f2; }
.cx-agregar:active { transform: scale(0.97); }
.cx-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.cx-acciones .espacio { flex: 1; }
.cx-ia { background: linear-gradient(135deg, #ff8a3d, var(--kc-primary)); }
.cx-confirmar { padding: 14px 16px; border-radius: 14px; background: var(--kc-surface-container-low); }
.cx-confirmar p { flex: 1 1 280px; margin: 0; color: var(--kc-text-muted); font-size: 13.5px; }
.cx-peligro { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border: none; border-radius: 999px; background: transparent; color: var(--color-critico); font-weight: 600; cursor: pointer; }
.cx-peligro:hover { background: #fdecea; }
.cx-callout { display: flex; gap: 10px; margin: 0; padding: 12px 14px; border-radius: 14px; font-size: 14px; line-height: 21px; }
.cx-callout p { margin: 2px 0 0; }
.cx-callout > .material-symbols-outlined { flex: none; margin-top: 1px; }
.cx-callout.is-error { background: #fdecea; color: #7d1212; }
.cx-callout.is-ia { background: linear-gradient(135deg, #fff6ef, #f3f1ff); color: var(--kc-text); }
.cx-callout.is-ia > .material-symbols-outlined { color: var(--kc-primary); }
.cx-seg { flex: none; display: inline-flex; padding: 3px; border-radius: 999px; background: var(--kc-surface-container-low); }
.cx-seg button { padding: 6px 14px; border: none; border-radius: 999px; background: transparent; color: var(--kc-text-muted); font-weight: 600; font-size: 13.5px; cursor: pointer; }
.cx-seg button[aria-pressed="true"] { background: #fff; color: var(--kc-text); box-shadow: var(--kc-shadow-sm); }
.cx-vacio { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 28px 16px; border-radius: 16px; background: var(--kc-surface-container-low); color: var(--kc-text-muted); text-align: center; }
.cx-vacio .material-symbols-outlined { color: #b7bdd4; font-size: 34px; }
.cx-vacio p { margin: 0; max-width: 46ch; }
.tex { white-space: pre-line; overflow-wrap: anywhere; }
.tex .katex { font-size: 1.06em; }
.tex .katex-display { margin: 0.4em 0; overflow-x: auto; overflow-y: hidden; }
/* Rúbrica en modo Revisar */
#rubrica-vista { display: flex; flex-direction: column; gap: 14px; }
.cx-preg { padding: 16px; border: 1px solid var(--kc-border); border-radius: 16px; background: #fff; }
.cx-preg-head { display: flex; align-items: flex-start; gap: 12px; }
.cx-preg-num { flex: none; display: grid; place-items: center; min-width: 30px; height: 30px; padding: 0 6px; border-radius: 9px; background: var(--kc-charcoal); color: #fff; font-size: 13.5px; font-weight: 700; }
.cx-preg-num.is-chico { min-width: 24px; height: 24px; border-radius: 7px; font-size: 12px; }
.cx-preg-enun { flex: 1; min-width: 0; font-size: 15px; line-height: 23px; }
.cx-pts { flex: none; padding: 4px 10px; border-radius: 999px; background: color-mix(in srgb, var(--kc-primary) 12%, #fff); color: var(--kc-primary-text); font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cx-pts.is-chico { padding: 2px 8px; font-size: 12px; }
.cx-sol { margin: 12px 0 0; border-radius: 12px; background: #f7f8ff; }
.cx-sol summary { display: flex; align-items: center; gap: 6px; padding: 8px 12px; color: #3b4664; font-size: 13.5px; font-weight: 600; cursor: pointer; list-style: none; }
.cx-sol summary::-webkit-details-marker { display: none; }
.cx-sol summary .material-symbols-outlined { color: #d18b00; font-size: 18px; }
.cx-sol > div { padding: 0 12px 12px; font-size: 14px; line-height: 22px; }
.cx-crit { margin-top: 12px; padding-top: 12px; border-top: 1px solid #eef0f8; }
.cx-crit-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 8px; font-size: 14px; font-weight: 600; line-height: 20px; }
.cx-niveles { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; }
.cx-nivel { padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, var(--kc-primary) calc(4% + var(--k) * 14%), #fff); border: 1px solid color-mix(in srgb, var(--kc-primary) calc(8% + var(--k) * 26%), #fff); }
.cx-nivel-top { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; }
.cx-nivel-top span { font-weight: 800; font-variant-numeric: tabular-nums; color: var(--kc-primary-text); }
.cx-nivel p { margin: 4px 0 0; color: #4a5470; font-size: 13px; line-height: 19px; }
/* Rúbrica en modo Editar */
#rubrica { display: flex; flex-direction: column; gap: 14px; }
#rubrica[hidden] { display: none; }
#rubrica-preguntas { display: flex; flex-direction: column; gap: 14px; }
.cx-ed-preg, .cx-ed-crit { display: flex; flex-direction: column; gap: 10px; min-width: 0; margin: 0; padding: 14px; border: 1px solid var(--kc-border); border-radius: 16px; background: #fff; }
.cx-ed-crit { background: #fafbff; border-radius: 12px; }
.cx-ed-preg legend, .cx-ed-crit legend { padding: 0 6px; font-weight: 700; }
.cx-ed-preg label, .cx-ed-crit label, .cx-ed-nivel label { display: flex; flex-direction: column; gap: 4px; color: var(--kc-text-muted); font-size: 12.5px; font-weight: 600; }
.cx-ed-preg textarea { min-height: 70px; }
.cx-ed-preg textarea, .cx-ed-preg input { width: 100%; padding: 8px 10px; border: 1px solid var(--kc-border); border-radius: 10px; background: #fff; color: var(--kc-text); font-size: 14px; font-weight: 400; }
.cx-ed-preg textarea:focus, .cx-ed-preg input:focus { outline: 2px solid color-mix(in srgb, var(--kc-primary) 40%, transparent); border-color: var(--kc-primary); }
.cx-ed-nivel { display: grid; grid-template-columns: 70px minmax(110px, 1fr) minmax(160px, 2fr) 90px auto; align-items: end; gap: 8px; padding: 8px 10px; border-radius: 10px; background: #fff; border: 1px solid #eef0f8; }
.cx-ed-nivel strong { align-self: center; font-size: 12.5px; color: #7b8197; }
.cx-ed-preg .btn { align-self: flex-start; min-height: 34px; padding: 4px 12px; font-size: 13px; }
@media (max-width: 700px) { .cx-ed-nivel { grid-template-columns: 1fr 90px; } .cx-ed-nivel strong, .cx-ed-nivel label:nth-of-type(2) { grid-column: 1 / -1; } }
/* Pruebas */
#pruebas { display: flex; flex-direction: column; gap: 14px; }
.cx-prueba { display: flex; flex-direction: column; gap: 12px; padding: 16px; border: 1px solid var(--kc-border); border-radius: 16px; }
.cx-prueba-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cx-prueba-quien { display: flex; align-items: center; gap: 10px; min-width: 0; }
.cx-prueba-quien > .material-symbols-outlined { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--kc-surface-container-low); color: #5b6585; }
.cx-prueba-quien strong { display: block; margin-bottom: 3px; }
.cx-prueba-quien .cx-chip { margin-right: 4px; }
.cx-total { flex: none; font-size: 28px; font-weight: 800; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.cx-total small { margin-left: 3px; color: #8a90a6; font-size: 15px; font-weight: 600; }
.cx-campo { display: flex; flex-direction: column; gap: 4px; color: var(--kc-text-muted); font-size: 12.5px; font-weight: 600; }
.cx-campo select, .cx-campo input { width: 100%; min-height: 40px; padding: 8px 10px; border: 1px solid var(--kc-border); border-radius: 10px; background: #fff; color: var(--kc-text); font-size: 14px; font-weight: 400; }
.cx-campo.is-num { max-width: 130px; }
.cx-paginas { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
.cx-paginas:empty { display: none; }
.cx-pagina { flex: none; display: flex; align-items: center; gap: 6px; height: 120px; border-radius: 10px; overflow: hidden; border: 1px solid var(--kc-border); color: var(--kc-text); text-decoration: none; transition: transform var(--motion-fast) var(--motion-ease), box-shadow var(--motion-fast) ease; }
.cx-pagina:hover { transform: translateY(-2px); box-shadow: var(--kc-shadow-md); }
.cx-pagina img { height: 100%; width: auto; display: block; }
.cx-pagina.is-pdf { padding: 0 14px; height: 52px; font-size: 13px; font-weight: 600; }
.cx-pagina.is-pdf .material-symbols-outlined { color: var(--kc-primary); }
.cx-res-lista { display: flex; flex-direction: column; gap: 8px; }
.cx-res { padding: 12px; border-radius: 12px; background: #fafbff; border: 1px solid #eef0f8; }
.cx-res.is-ojo { background: #fffaf0; border-color: #f6e2b0; }
.cx-res-top { display: flex; align-items: flex-start; gap: 10px; }
.cx-res-crit { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; line-height: 20px; }
.cx-res-just { margin: 6px 0 0; color: #3b4664; font-size: 13.5px; line-height: 20px; }
.cx-banderas { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.cx-bandera { padding: 2px 9px; border-radius: 999px; background: #fff1cc; color: #7a5a00; font-size: 12px; font-weight: 600; }
.cx-res .cx-sol { background: #fff; }
.cx-res-edit { display: flex; gap: 10px; margin-top: 10px; }
.cx-res-edit .cx-campo:not(.is-num) { flex: 1; }
/* Lista de trabajos */
.cx-lista { display: flex; flex-direction: column; gap: 10px; }
.cx-trabajo { display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px 16px; border: none; border-radius: 16px; background: #fff; box-shadow: var(--kc-shadow-sm); color: var(--kc-text); text-align: left; cursor: pointer; transition: transform var(--motion-fast) var(--motion-ease), box-shadow var(--motion-fast) ease; }
.cx-trabajo:hover { transform: translateY(-2px); box-shadow: var(--kc-shadow-md), 0 0 0 1px color-mix(in srgb, var(--kc-primary) 25%, transparent); }
.cx-trabajo-icono { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: color-mix(in srgb, var(--kc-primary) 10%, #fff); color: var(--kc-primary); }
.cx-trabajo-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cx-trabajo-txt strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cx-trabajo-txt small, .cx-trabajo-avance small { color: #7b8197; font-size: 12.5px; }
.cx-trabajo-avance { flex: none; display: flex; flex-direction: column; gap: 4px; width: 130px; }
.cx-barra { height: 6px; border-radius: 999px; background: var(--kc-surface-container-high); overflow: hidden; }
.cx-barra > span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #ff8a3d, var(--kc-primary)); }
.cx-trabajo-ir { color: #b7bdd4; }
.cx-nuevo .cx-panel { max-width: 560px; }
@media (max-width: 640px) {
  .cx-panel { padding: 16px; border-radius: 16px; }
  .cx-panel-head { flex-wrap: wrap; }
  .cx-trabajo-avance, .cx-trabajo-ir { display: none; }
  .cx-res-edit { flex-direction: column; }
  .cx-campo.is-num { max-width: none; }
  .cx-pasos li { padding: 6px 10px; font-size: 13px; }
}
/* Mientras Claude lee la pauta */
.cx-ov { position: fixed; inset: 0; z-index: 2000; display: grid; place-items: center; padding: 24px; background: rgba(250, 248, 255, 0.55); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); animation: motion-fade 400ms ease-out backwards; }
.cx-ov.sale { animation: cx-ov-sale 380ms ease-in forwards; }
@keyframes cx-ov-sale { to { opacity: 0; -webkit-backdrop-filter: blur(0); backdrop-filter: blur(0); } }
.cx-ov-caja { display: flex; flex-direction: column; align-items: center; gap: 8px; max-width: 380px; text-align: center; animation: auth-card-in 900ms cubic-bezier(0.2, 0.8, 0.2, 1) 100ms backwards; }
.cx-ov-halo { position: relative; display: grid; place-items: center; width: 132px; height: 132px; margin-bottom: 10px; }
.cx-ov-halo::before, .cx-ov-halo::after { content: ""; position: absolute; inset: 14px; border-radius: 34px; background: radial-gradient(circle, rgba(255, 97, 21, 0.28), transparent 70%); animation: cx-ov-onda 2.6s ease-out infinite; }
.cx-ov-halo::after { animation-delay: 1.3s; }
@keyframes cx-ov-onda { from { transform: scale(0.7); opacity: 0.9; } to { transform: scale(1.6); opacity: 0; } }
.cx-ov-icono { position: relative; width: 88px; height: 88px; border-radius: 24px; box-shadow: 0 14px 30px -14px rgba(255, 97, 21, 0.75); animation: app-icon-pop 650ms var(--motion-ease) backwards, app-icon-float 4.5s ease-in-out 650ms infinite; }
.cx-ov h2 { margin: 0; font-size: 24px; font-weight: 800; letter-spacing: -0.03em; color: #1e252d; }
.cx-ov-msg { min-height: 24px; margin: 0; color: var(--kc-primary-text); font-weight: 600; }
.cx-ov-msg.entra { animation: cx-ov-msg 500ms var(--motion-ease); }
@keyframes cx-ov-msg { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.cx-ov-barra { position: relative; width: 220px; height: 6px; margin: 10px 0 2px; border-radius: 999px; background: rgba(255, 97, 21, 0.14); overflow: hidden; }
.cx-ov-barra span { position: absolute; inset: 0 auto 0 0; width: 40%; border-radius: inherit; background: linear-gradient(90deg, #ffb27d, var(--kc-primary)); animation: cx-ov-barra 1.6s ease-in-out infinite; }
@keyframes cx-ov-barra { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
.cx-ov-tiempo { margin: 0; color: #5f6974; font-size: 13px; font-variant-numeric: tabular-nums; }
.cx-ov small { margin-top: 6px; color: #7b8197; font-size: 12.5px; line-height: 18px; }
@media (prefers-reduced-motion: reduce) { .cx-ov-icono, .cx-ov-halo::before, .cx-ov-halo::after, .cx-ov-barra span { animation: none; } }

/* Resultados que conservan sus nodos entre respuestas. */
.pi-columnas { display:flex; gap:clamp(6px,1.2vw,20px); align-items:stretch; padding-top:44px; min-height:280px; }
.pi-columna { flex:1; min-width:0; text-align:center; }
.pi-col-pista { height:210px; display:flex; align-items:flex-end; border-bottom:2px solid #94a3b8; }
.pi-col-relleno { width:100%; position:relative; background:linear-gradient(180deg,#ff8a3d,#e8590c); border-radius:8px 8px 0 0; transition:height 650ms cubic-bezier(.2,.85,.35,1.12); }
.pi-columna.is-correcta .pi-col-relleno { background:#15803d; }
.pi-col-cuenta { position:absolute; bottom:100%; left:0; width:100%; display:flex; flex-direction:column; padding-bottom:5px; }
.pi-col-cuenta b { font-size:1.4em; }
.pi-col-cuenta small { white-space:nowrap; }
.pi-col-etiqueta { padding-top:12px; overflow-wrap:anywhere; line-height:1.3; }
.pi-proy .pi-columnas { font-size:clamp(16px,1.6vw,30px); }
.pi-proy.con-pregunta .pi-proy-grid { grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
.pi-nube-arte { position:relative; width:100%; height:clamp(260px,40vh,540px); overflow:hidden; border-radius:18px; isolation:isolate;
  background:
    radial-gradient(circle at 82% 12%, #39b6e0 0, transparent 44%),
    radial-gradient(circle at 12% 92%, #1a56a8 0, transparent 52%),
    repeating-radial-gradient(circle at 92% 100%, #ffffff0d 0 1px, transparent 1px 46px),
    linear-gradient(135deg, #061a3f, #0b3a78 58%, #12699c); }
.pi-nube-arte span { position:absolute; white-space:nowrap; font-family:Inter,"Helvetica Neue",Arial,sans-serif; font-weight:800; letter-spacing:-.02em; line-height:1.15; padding:0 .08em; color:#fff; background:var(--tinta); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; filter:drop-shadow(0 3px 10px #02102a99); transform:translate(-50%,-50%) rotate(var(--giro)); transition:font-size .7s cubic-bezier(.2,.85,.35,1.12), left .7s, top .7s; animation:pi-pal-entra .75s cubic-bezier(.2,.85,.35,1.25) backwards, pi-pal-respira 7s var(--demora,0s) ease-in-out infinite alternate; }
.pi-nube-arte .tono-0 { --tinta:linear-gradient(100deg,#fff,#a5e6ff); }
.pi-nube-arte .tono-1 { --tinta:linear-gradient(100deg,#ffd27a,#ff8a3d); font-family:Georgia,"Times New Roman",serif; font-style:italic; font-weight:700; letter-spacing:0; }
.pi-nube-arte .tono-2 { --tinta:linear-gradient(100deg,#7fe9ff,#4aa8ff); }
.pi-nube-arte .tono-3 { --tinta:linear-gradient(100deg,#b9f6d6,#4fd8c4); font-weight:600; }
.pi-nube-arte .tono-4 { --tinta:linear-gradient(100deg,#ffc2d6,#ff7fa8); font-family:Georgia,"Times New Roman",serif; font-style:italic; font-weight:700; letter-spacing:0; }
.pi-nube-arte .tono-5 { --tinta:linear-gradient(100deg,#fff4b8,#ffd84d); font-weight:600; }
@keyframes pi-pal-entra { from { opacity:0; transform:translate(-50%,-50%) rotate(calc(var(--giro) - 14deg)) scale(.4); filter:blur(6px); } }
@keyframes pi-pal-respira { to { translate:0 -5px; } }
/* En la proyección el dibujo ocupa lo que dejan el enunciado y el QR. */
.pi-proy-q { position:relative; }
.pi-proy-g { flex:1; min-height:0; display:flex; flex-direction:column; }
.pi-proy-g .pi-g-total { display:none; }
.pi-proy-g .pi-nube-arte { flex:1; height:auto; min-height:0; }
.pi-proy-g .pi-columnas { flex:1; min-height:0; padding-top:clamp(52px,8vh,84px); }
.pi-proy-g .pi-columna { display:flex; flex-direction:column; }
.pi-proy-g .pi-col-pista { flex:1; height:auto; min-height:0; }
.pi-proy-q:has(.pi-proy-g) { justify-content:flex-start; }
@media (min-width:861px) {
  .pi-proy-q:has(.pi-proy-g) { padding-bottom:116px; }
  .pi-proy-q:has(.pi-proy-g) .pi-proy-cuenta { position:absolute; left:1.6vw; bottom:42px; }
}
.pi-al-sobre .pi-columnas { min-height:0; padding-top:40px; }
.pi-al-sobre .pi-col-pista { height:64px; }
.pi-al-sobre .pi-nube-arte { height:170px; }
.pi-al-sobre .pi-g-total { margin:0 0 4px; }
/* En el teléfono la diapositiva es baja: mientras se ven los resultados, crece para que quepan. */
@media (max-width:860px) { #pi-al-slide:has(.pi-al-sobre:not([hidden])) { aspect-ratio:auto; height:330px; } #pi-al-slide:has(.pi-al-sobre:not([hidden])) img { object-fit:cover; filter:blur(7px); } }
.pi-proy-full { right:auto; left:16px; }
.pi-proy > .pi-telefono-b { opacity:0; transition:opacity .2s; }
.pi-proy.is-mouse > .pi-telefono-b, .pi-proy > .pi-telefono-b:focus-visible { opacity:1; }
.pi-telefono button { opacity:0; transition:opacity .2s; }
.pi-telefono:hover button, .pi-telefono button:focus-visible { opacity:1; }
@media (prefers-reduced-motion:reduce) { .pi-col-relleno,.pi-nube-arte span { transition:none; animation:none; } }
.pi-telefono { position:fixed; z-index:10050; border:7px solid #1b2028; border-radius:30px; background:#050608; box-shadow:0 16px 50px #0008; }
.pi-telefono[hidden] { display:none; }
.pi-telefono video { display:block; width:100%; height:100%; object-fit:contain; border-radius:22px; }
.pi-telefono button { position:absolute; bottom:8px; left:8px; right:8px; min-height:44px; border-radius:14px; background:#fff; color:#17212e; }
.pi-proy > .pi-telefono-b { position:absolute; top:12px; right:12px; z-index:50; }
.pi-telefono-conectar { position:fixed; z-index:10050; display:flex; align-items:flex-end; justify-content:center; padding:0 6% 14%; background:none; border:0; border-radius:24px; cursor:pointer; }
.pi-telefono-conectar span { padding:10px 14px; min-height:44px; display:flex; align-items:center; border-radius:999px; background:#fff; color:#17212e; font:inherit; font-weight:600; font-size:clamp(12px,1.1vw,16px); line-height:1.2; box-shadow:0 6px 20px #0006; }
.pi-telefono-conectar[hidden] { display:none; }
.pi-telefono-conectar:hover, .pi-telefono-conectar:focus-visible { outline:3px solid #fff; outline-offset:2px; }
.pi-dlg-telefono { width:min(560px, calc(100vw - 32px)); }
.pi-dlg-telefono [hidden] { display:none !important; }
.pi-dlg-telefono .dlg-head { padding:20px 20px 12px; }
.pi-dlg-telefono .dlg-pie { flex-wrap:wrap; }
.pi-tel-cuerpo { padding:0 20px 8px; }
.pi-tel-pasos { margin:0 0 12px; padding-left:22px; display:grid; gap:10px; line-height:1.4; }
.pi-tel-aviso, .pi-tel-error { margin:0 0 12px; padding:10px 12px; border-radius:10px; line-height:1.4; overflow-wrap:anywhere; }
.pi-tel-aviso { background:#fff4e5; color:#7a4300; }
.pi-tel-error { background:#fdecea; color:#8c1d18; }
.pi-tel-error[hidden], .pi-tel-vista[hidden] { display:none; }
.pi-tel-ayuda { font-size:.92em; }
.pi-tel-ayuda summary { min-height:44px; display:flex; align-items:center; cursor:pointer; }
.pi-tel-ayuda p { margin:0 0 8px; overflow-wrap:anywhere; }
.pi-tel-vista { display:flex; gap:16px; align-items:center; }
.pi-tel-vista video { flex:none; width:140px; height:280px; object-fit:contain; background:#050608; border-radius:16px; }
.pi-tel-vista p { margin:0 0 8px; }
@media (max-width:480px) { .pi-tel-vista { flex-direction:column; } }
.pi-pdf-correo { width:min(100%,400px); margin:12px auto; text-align:center; overflow-wrap:anywhere; }
.pi-pdf-correo form { text-align:left; }
.pi-pdf-correo input { width:100%; min-width:0; min-height:44px; }
.pi-pdf-correo form[hidden] { display:none; }

/* Proyección: la diapositiva es la protagonista y los resultados van encima de ella. */
.pi-proy .pi-proy-grid, .pi-proy.con-pregunta .pi-proy-grid { display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:minmax(0,1fr); place-items:center; gap:0; padding:0; }
.pi-proy-marco { position:relative; width:min(100vw, calc(100dvh * var(--proporcion, 1.7778))); aspect-ratio:var(--proporcion, 1.7778); container-type:size; }
.pi-proy-slide { position:absolute; inset:0; }
.pi-proy-marco .pi-proy-q, .pi-proy.con-pregunta .pi-proy-marco .pi-proy-q { position:absolute; inset:37cqh 4cqw 9cqh; display:flex; flex-direction:column; gap:1.6cqh; padding:0; border-radius:0; background:none; color:#fff; overflow:visible; justify-content:flex-end; }
.pi-proy-marco .pi-proy-q:has(.pi-proy-g) { padding:0; justify-content:flex-start; }
.pi-proy-marco .pi-proy-q.is-nube { inset:27cqh 3cqw 8cqh; }
.pi-proy-marco .pi-proy-q.is-vidrio, .pi-proy-marco .pi-proy-q.is-lleno { padding:2.4cqh 2.4cqw; border-radius:2.4cqh; background:rgba(6,20,48,.78); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); }
.pi-proy-marco .pi-proy-q.is-lleno { inset:4cqh 4cqw; overflow:auto; }
.pi-proy-marco .pi-proy-enun { margin:0; color:#fff; font-size:clamp(16px,2.6cqw,40px); }
.pi-proy-marco .pi-proy-sol, .pi-proy-marco .pi-proy-alts, .pi-proy-marco .pi-explica-proy, .pi-proy-marco .pi-proy-rank { color:#fff; }
.pi-proy-marco .pi-vacio { display:none; }
.pi-proy-marco .pi-columnas { font-size:clamp(13px,1.8cqw,30px); padding-top:9cqh; color:#fff; }
.pi-proy-marco .pi-col-pista { border-bottom-color:rgba(255,255,255,.55); }
.pi-proy-marco .pi-col-relleno { box-shadow:0 -6px 24px rgba(255,138,61,.35); }
.pi-proy-marco .pi-col-etiqueta { padding-top:1.2cqh; font-weight:600; text-shadow:0 1px 8px rgba(0,15,45,.7); }
.pi-proy-marco .pi-col-cuenta { text-shadow:0 1px 8px rgba(0,15,45,.7); }
.pi-proy-marco .pi-nube-arte { background:none; border-radius:0; overflow:visible; }
.pi-proy-marco .pi-nube-arte span { filter:drop-shadow(0 2px 7px rgba(0,15,45,.6)); }
.pi-proy-marco .pi-proy-cuenta, .pi-proy-q:has(.pi-proy-g) .pi-proy-cuenta { position:absolute; top:auto; right:auto; left:50%; bottom:2cqh; transform:translateX(-50%); z-index:3; white-space:nowrap; margin:0; padding:.7cqh 1.2cqw; border-radius:999px; background:rgba(6,20,48,.62); color:#fff; font-size:clamp(12px,1.4cqw,22px); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
.pi-proy-marco .pi-proy-cuenta[hidden] { display:none; }
.pi-proy-qr { cursor:pointer; }
.pi-espejo { position:fixed; z-index:10040; border:7px solid #1b2028; border-radius:30px; background:#050608; box-shadow:0 16px 50px #0008; box-sizing:content-box; }
.pi-espejo[hidden] { display:none; }
.pi-espejo.is-computador { border-width:3px; border-radius:10px; }
.pi-espejo.is-computador .pi-espejo-pantalla { border-radius:7px; }
.pi-espejo-pantalla { position:absolute; inset:0; overflow:hidden; border-radius:22px; }
.pi-espejo iframe { display:block; border:0; transform-origin:0 0; pointer-events:none; }
.pi-espejo-nombre { position:absolute; left:50%; bottom:-14px; z-index:2; transform:translateX(-50%); margin:0; padding:6px 14px; border-radius:999px; background:#e8590c; color:#fff; font-weight:700; white-space:nowrap; box-shadow:0 6px 18px #0006; }
.pi-foco { margin:12px 0; }
.pi-foco-lista { list-style:none; margin:0 0 8px; padding:0; display:flex; flex-direction:column; gap:6px; max-height:240px; overflow:auto; }
.pi-foco-lista .btn { justify-content:flex-start; min-height:44px; }
.pi-foco-lista .btn span:last-child { overflow-wrap:anywhere; text-align:left; }
.pi-foco-lista .btn.is-on { border-color:var(--kc-primary); color:var(--kc-primary); }
.pi-foco-nota { margin:4px 0 0; font-size:13px; }

/* Columnas alineadas: todas las etiquetas ocupan lo mismo, aunque una tenga dos líneas. */
.pi-columnas { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); grid-template-rows:minmax(0,1fr) auto; column-gap:clamp(6px,1.2vw,20px); }
.pi-columna { display:grid; grid-row:span 2; grid-template-rows:subgrid; }
.pi-col-cuenta { flex-direction:row; align-items:baseline; justify-content:center; gap:.35em; }
.pi-col-cuenta small { opacity:.82; }
.pi-columna[data-n="0"] .pi-col-cuenta small { display:none; }
.pi-col-relleno { transition:background .3s; }
/* En la proyección, sobre la diapositiva. */
.pi-proy-marco .pi-columnas { padding-top:7cqh; column-gap:1cqw; font-size:clamp(13px,1.75cqw,30px); }
.pi-proy-marco .pi-col-pista { width:64%; margin:0 auto; border-bottom:0; border-radius:1.2cqh 1.2cqh 0 0; background:rgba(255,255,255,.07); box-shadow:inset 0 -2px 0 rgba(255,255,255,.5); }
.pi-proy-marco .pi-col-relleno { border-radius:1.2cqh 1.2cqh 0 0; box-shadow:0 0 3cqh rgba(255,138,61,.28); }
.pi-proy-marco .pi-col-cuenta { padding-bottom:.8cqh; }
.pi-proy-marco .pi-col-cuenta b { font-size:1.5em; }
.pi-proy-marco .pi-col-etiqueta { padding-top:1.3cqh; font-weight:600; line-height:1.2; }
.pi-proy-marco .pi-col-etiqueta b { display:inline-grid; place-items:center; min-width:1.5em; height:1.5em; margin-right:.2em; border-radius:50%; background:rgba(255,255,255,.16); color:#a5e6ff; font-size:.8em; }
/* La nube, nítida: sin filtros ni animación permanente, que dibujan el texto rotado como una imagen. */
.pi-nube-arte span, .pi-proy-marco .pi-nube-arte span { filter:none; animation:pi-pal-entra .6s cubic-bezier(.2,.85,.35,1.25) backwards; }
.pi-proy-marco .pi-nube-arte .tono-2 { --tinta:linear-gradient(100deg,#d6f6ff,#7fd8ff); }
.pi-proy-marco .pi-proy-g .pi-columna { display:grid; grid-row:span 2; grid-template-rows:subgrid; }

/* Video de la presentación: ocupa la diapositiva, solo en la proyección. */
.pi-proy-video { position:absolute; inset:0; z-index:4; width:100%; height:100%; border:0; background:#000; }
.pi-proy-video[data-tipo="youtube"] { pointer-events:none; opacity:0; transition:opacity .35s; }
.pi-proy-video[data-tipo="youtube"][data-estado="1"], .pi-proy-video[data-tipo="youtube"][data-estado="3"] { opacity:1; }
.pi-proy-video[data-tipo="youtube"].pi-proy-video-libre { pointer-events:auto; opacity:1; }
.pi-proy-sonido { position:absolute; z-index:5; right:16px; bottom:16px; display:flex; align-items:center; gap:8px; padding:10px 16px; border:0; border-radius:999px; background:rgba(0,0,0,.72); color:#fff; font:inherit; font-weight:600; cursor:pointer; }
.pi-proy-empezar { position:fixed; z-index:50; left:50%; bottom:20px; white-space:nowrap; transform:translateX(-50%); display:flex; align-items:center; gap:10px; max-width:calc(100vw - 32px); padding:14px 22px; border:0; border-radius:999px; background:#111; color:#fff; font:inherit; font-size:18px; font-weight:600; cursor:pointer; }
.pi-video-acc { display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
.pi-proy-guia { display:flex; align-items:center; gap:12px; max-width:760px; margin:0 auto; font-size:clamp(18px,2vw,30px); text-align:left; }

/* El resumen tutorial al terminar: cabe en el teléfono y se lee sin apuro. */
.pi-guia { width:min(680px,100%); margin:0 auto; padding:24px 16px 48px; display:flex; flex-direction:column; gap:14px; overflow-wrap:anywhere; }
.pi-proy.pi-guia, .pi-guia h2 { margin:0; }
.pi-guia h3 { margin:0; }
.pi-guia-saludo { margin:0; font-size:17px; line-height:1.5; }
.pi-guia-t { margin-top:10px; font-size:20px; }
.pi-guia-logros { padding:14px 16px; border-radius:14px; background:#ecfdf3; color:#14532d; }
.pi-guia-logros h3 { display:flex; align-items:center; gap:8px; font-size:16px; }
.pi-guia-logros ul { margin:8px 0 0; padding-left:20px; display:grid; gap:4px; }
.pi-guia-b { padding:16px; border:1px solid var(--kc-border); border-radius:14px; background:#fff; display:flex; flex-direction:column; gap:8px; }
.pi-guia-b.is-destacado { border-color:var(--kc-primary); box-shadow:0 0 0 1px var(--kc-primary); }
.pi-guia-b ol { margin:0; padding-left:22px; display:grid; gap:6px; line-height:1.45; }
.pi-guia-b .btn { align-self:flex-start; }
.pi-guia-h { margin:0; color:var(--kc-primary); font-size:13px; font-weight:700; }
.pi-guia-m { margin:0; color:var(--color-tinta-suave); font-size:14.5px; }
.pi-guia-c { display:flex; gap:8px; margin:0; padding:10px 12px; border-radius:10px; background:#fff7ed; font-size:14.5px; line-height:1.4; }
.pi-guia-c .material-symbols-outlined { flex:none; color:var(--kc-primary); }
.pi-guia-acc { display:flex; flex-wrap:wrap; gap:8px; }
.pi-guia > .pi-pdf-correo { margin:0; text-align:left; width:100%; }
.pi-proy-marco .pi-muro { display:flex; flex-wrap:wrap; gap:1cqh 1cqw; align-content:flex-start; }
.pi-proy-marco .pi-muro-t { margin:0; padding:1cqh 1.4cqw; border-radius:1.2cqh; background:rgba(255,255,255,.94); color:#17212e; font-size:clamp(13px,1.6cqw,26px); }
.p-emparejar { display: grid; gap: 8px; }
.p-emparejar[hidden] { display: none; }
.p-emparejar p { margin: 0; font-weight: 600; }
.pi-fotos-sacar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.pi-fotos-sacar:has(> :only-child) { grid-template-columns: minmax(0, 160px); justify-content: center; }
.pi-foto { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pi-foto.is-vacia { align-items: center; justify-content: center; aspect-ratio: 1; border: 2px dashed var(--color-borde, #cfd5e3); border-radius: 12px; color: var(--color-tinta-suave); font-size: 13px; cursor: pointer; }
.pi-foto-b { position: relative; display: block; width: 100%; padding: 0; border: 3px solid transparent; border-radius: 12px; background: none; overflow: hidden; cursor: pointer; }
.pi-foto.is-mejor .pi-foto-b { border-color: #e8590c; }
.pi-foto-b img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.pi-foto-b span { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center; gap: 2px; padding: 4px; background: rgba(0,0,0,.62); color: #fff; font-size: 12px; font-weight: 600; }
.pi-foto-b .material-symbols-outlined { font-size: 15px; }
.pi-foto-otra { display: flex; align-items: center; justify-content: center; gap: 4px; min-height: 36px; font-size: 13px; color: var(--color-tinta-suave); cursor: pointer; }
.pi-foto-otra .material-symbols-outlined { font-size: 16px; }
.pi-foto-subida { margin: 0 0 10px; }
.pi-foto-subida img { display: block; max-width: 100%; max-height: 220px; border-radius: 12px; }
.pi-foto-subida figcaption { margin-top: 4px; font-size: 13px; color: var(--color-tinta-suave); }
.pi-fotos-panel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.pi-fotos-panel button { padding: 0; border: 0; background: none; text-align: left; font: inherit; font-size: 12.5px; cursor: pointer; overflow: hidden; }
.pi-fotos-panel img { display: block; width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 8px; }
.pi-fotos-panel span { display: block; margin-top: 3px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.pi-foto-grande { max-width: min(92vw, 900px); border: 0; border-radius: 14px; padding: 16px; }
.pi-foto-grande::backdrop { background: rgba(0,0,0,.7); }
.pi-foto-grande img { display: block; max-width: 100%; max-height: 70vh; margin: auto; border-radius: 8px; }
.pi-foto-grande p { margin: 10px 0; font-weight: 600; }
.pi-proy-foto { position: absolute; inset: 4% 8%; z-index: 6; display: flex; flex-direction: column; align-items: center; justify-content: center; margin: 0; }
.pi-proy-foto img { max-width: 100%; max-height: 90%; border-radius: 12px; box-shadow: 0 16px 50px #000a; }
.pi-proy-foto figcaption { margin-top: 10px; padding: 6px 14px; border-radius: 999px; background: #e8590c; color: #fff; font-weight: 700; }
.pi-guia-b h4 { margin: 12px 0 4px; font-size: 14px; }
.pi-guia-foto { display: block; max-width: 100%; max-height: 260px; margin: 8px 0; border-radius: 10px; }
.pi-entregables { width: min(520px, 100%); margin: 20px auto 0; text-align: left; }
.pi-entregables h3 { margin: 0 0 8px; font-size: 16px; }
.pi-entregables ul { list-style: none; margin: 0; padding: 0; }
.pi-entregables li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid var(--color-borde, #e3e7ef); }