/* =========================================================
   Kimün Aukantün · Aula Virtual
   Reutiliza los tokens y componentes de estilos.css.
   ========================================================= */

/* Mientras se verifica la sesión no se muestra nada privado */
html.aula-cargando main, html.aula-cargando .subnav { visibility: hidden; }

/* ---------- Cabecera del aula ---------- */
.aula-cab .cabecera__in { gap: 14px; }
.aula-cab__tag {
  font-size: var(--t-xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--cobre-claro); border-left: 1px solid var(--linea-oscura); padding-left: 14px;
}
.aula-cab__usuario { margin-left: auto; display: flex; align-items: center; gap: 8px; min-width: 0; }
.aula-cab__nombre { color: var(--texto-inv-2); font-size: var(--t-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 18ch; margin-right: 4px; }
.aula-cab .btn--borde { color: var(--blanco); border-color: rgba(255,255,255,.28); white-space: nowrap; }
@media (max-width: 720px) {
  .aula-cab .marca span, .aula-cab__nombre { display: none; }
  .aula-cab__tag { border-left: 0; padding-left: 0; }
  .aula-cab .btn--sm { padding: 6px 11px; min-height: 36px; font-size: .8125rem; }
  .aula-cab__usuario { gap: 6px; }
}
@media (max-width: 440px) {
  .aula-cab__tag { display: none; }
}

.aula-demo {
  background: var(--cobre-boton); color: var(--blanco); font-size: var(--t-sm); text-align: center;
  padding: 8px var(--gutter-r) 8px var(--gutter-l);
}

/* ---------- Portada del aula ---------- */
.aula-portada { padding-block: clamp(48px, 7vw, 88px) clamp(40px, 6vw, 72px); }
.aula-portada h1 { font-size: var(--t-h1); }
.aula-vistas { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 28px; font-size: var(--t-sm); color: var(--texto-inv-2); }
.aula-vistas .btn { color: var(--blanco); border-color: rgba(255,255,255,.28); }
.aula-vistas .btn[aria-pressed="true"] { --bg: var(--cobre-boton); border-color: var(--cobre-boton); }

/* ---------- Pestañas de apartados ---------- */
.aula-tabs .subnav__lista { margin-left: 0; }
.aula-tabs .subnav__lista button {
  display: block; white-space: nowrap; padding: 8px 14px; border-radius: 999px; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: .9375rem; font-weight: 500; color: var(--texto-2); transition: color .2s ease, background-color .2s ease;
}
.aula-tabs .subnav__lista button:hover { color: var(--texto); }
.aula-tabs .subnav__lista button[aria-selected="true"] { color: var(--blanco); background: var(--negro); }

/* ---------- Contenido de un apartado ---------- */
.aula-sec { padding-block: clamp(40px, 6vw, 72px) var(--seccion); }
.aula-sec__cab { display: grid; gap: 10px; margin-bottom: clamp(28px, 4vw, 48px); max-width: 44rem; }
.aula-sec__cab h2 { font-size: clamp(1.75rem, 3.6vw, 2.5rem); }
.aula-tema { display: grid; gap: 18px; padding-top: 28px; margin-top: 28px; border-top: 1px solid var(--linea); }
.aula-tema:first-of-type { margin-top: 0; }
.aula-tema__t { font-size: var(--t-h3); display: flex; align-items: baseline; gap: 10px; }
.aula-tema__n { font-size: var(--t-sm); font-weight: 500; color: var(--texto-2); }

.pubs { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); align-items: start; }
.pub {
  display: grid; gap: 12px; align-content: start; min-width: 0; padding: clamp(18px, 2.4vw, 24px);
  background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio);
}
.pub__cab { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: var(--t-sm); color: var(--texto-2); }
.pub__tipo { color: var(--cobre); font-weight: 700; font-size: var(--t-xs); letter-spacing: .08em; text-transform: uppercase; }
.pub__cab time::before { content: "·"; margin-right: 8px; color: var(--linea); }
.pub__t { font-size: 1.1875rem; line-height: 1.3; }
.pub__d { color: var(--texto-2); }
.pub__cuerpo { display: grid; gap: 10px; font-size: .9875rem; border-top: 1px solid var(--linea); padding-top: 12px; }
.pub__media { border-radius: var(--radio-sm); overflow: hidden; background: var(--grafito); aspect-ratio: 16 / 9; }
.pub__media iframe, .pub__media video, .pub__media img { width: 100%; height: 100%; border: 0; display: block; object-fit: cover; }
.pub__media--img { aspect-ratio: auto; background: var(--hueso); }
.pub__media--img img { height: auto; object-fit: contain; }
.pub__acciones { display: flex; flex-wrap: wrap; gap: 10px; }
.cat { font-size: var(--t-xs); font-weight: 700; padding: 3px 8px; border-radius: 999px; background: var(--hueso); color: var(--texto); }

.aula-vacio { display: grid; gap: 12px; justify-items: start; padding: clamp(28px, 4vw, 44px); border-radius: var(--radio); border: 1.5px dashed var(--linea); }

/* ---------- Ingreso ---------- */
.ingreso { min-height: 100svh; display: grid; place-items: center; background: var(--negro); color: var(--texto-inv); padding: 32px var(--gutter-r) 32px var(--gutter-l); position: relative; overflow: hidden; }
.ingreso__marca { position: absolute; width: min(70vw, 620px); right: -12%; bottom: -14%; opacity: .06; pointer-events: none; }
.ingreso__caja { position: relative; width: 100%; max-width: 420px; display: grid; gap: 24px; }
.ingreso__logo { display: inline-flex; align-items: center; gap: 12px; color: var(--blanco); text-decoration: none; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; }
.ingreso__logo img { width: 40px; }
.ingreso h1 { font-size: clamp(2.5rem, 9vw, 3.5rem); }
.ingreso .apoyo { color: var(--texto-inv-2); }
.ingreso .panel { background: var(--blanco); color: var(--texto); gap: 18px; }
.ingreso .btn { width: 100%; }
.ingreso__volver { color: var(--texto-inv-2); font-size: var(--t-sm); text-decoration: none; }
.ingreso__volver:hover { color: var(--blanco); }
.boton-texto { background: none; border: 0; padding: 0; font: inherit; color: var(--cobre); font-weight: 600; cursor: pointer; justify-self: start; font-size: var(--t-sm); }
.mensaje { font-size: var(--t-sm); padding: 10px 12px; border-radius: var(--radio-sm); background: var(--hueso); }
.mensaje--error { background: #fdecea; color: #8a1c12; }
.mensaje--ok { background: #e8f3ea; color: #1f5a30; }
.demo-roles { display: grid; gap: 10px; }

/* ---------- Administración ---------- */
.adm-barra { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin-bottom: 24px; }
.adm-filtro { display: flex; flex-wrap: wrap; gap: 6px; }
.adm-filtro button {
  border: 1px solid var(--linea); background: var(--blanco); border-radius: 999px; padding: 7px 14px; font: inherit; font-size: var(--t-sm); cursor: pointer; color: var(--texto-2);
}
.adm-filtro button[aria-pressed="true"] { background: var(--negro); border-color: var(--negro); color: var(--blanco); }
.adm-grupo { margin-top: 28px; }
.adm-grupo__t { font-size: var(--t-sm); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--texto-2); margin-bottom: 10px; }
.adm-lista { list-style: none; border: 1px solid var(--linea); border-radius: var(--radio); overflow: hidden; background: var(--blanco); }
.adm-fila { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; padding: 12px 14px; border-top: 1px solid var(--linea); }
.adm-fila:first-child { border-top: 0; }
.adm-fila__t { font-weight: 600; line-height: 1.3; }
.adm-fila__m { font-size: var(--t-sm); color: var(--texto-2); display: flex; flex-wrap: wrap; gap: 4px 8px; }
.adm-fila__m span + span::before { content: "·"; margin-right: 8px; color: var(--linea); }
.adm-fila--oculta .adm-fila__t { color: var(--texto-2); }
.adm-orden { display: grid; gap: 2px; }
.icono-btn {
  width: 34px; height: 30px; display: grid; place-items: center; border: 1px solid var(--linea); background: var(--blanco); border-radius: 8px;
  cursor: pointer; font: inherit; font-family: system-ui, "Segoe UI", sans-serif; font-size: .875rem; color: var(--texto);
}
.icono-btn:hover:not(:disabled) { border-color: var(--texto-2); }
.icono-btn:disabled { opacity: .35; cursor: default; }
.adm-acciones { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.btn--peligro { --bg: transparent; --fg: #b3261e; border-color: #e7b7b3; }
.btn--peligro:hover { --bg: #fdecea; }
@media (max-width: 640px) {
  .adm-fila { grid-template-columns: auto 1fr; }
  .adm-acciones { grid-column: 1 / -1; justify-content: flex-start; }
}

.adm-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--linea); margin-bottom: 28px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.adm-tabs::-webkit-scrollbar { display: none; }
.adm-tabs button {
  border: 0; background: none; padding: 12px 16px; font: inherit; font-weight: 600; color: var(--texto-2); cursor: pointer;
  border-bottom: 3px solid transparent; margin-bottom: -1px; white-space: nowrap;
}
.adm-tabs button[aria-selected="true"] { color: var(--texto); border-bottom-color: var(--cobre-boton); }

/* Diálogo de edición */
.dialogo { width: min(680px, calc(100vw - 24px)); max-height: calc(100svh - 24px); border: 0; border-radius: var(--radio); padding: 0; color: var(--texto); }
.dialogo::backdrop { background: rgba(15,14,13,.6); }
.dialogo form { display: grid; gap: 18px; padding: clamp(20px, 4vw, 32px); }
.dialogo__cab { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.dialogo__cab h2 { font-size: 1.5rem; }
.dialogo__pie { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; border-top: 1px solid var(--linea); padding-top: 16px; }
.checks { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.checks label { display: inline-flex; gap: 8px; align-items: center; font-weight: 500; font-size: .9375rem; }
.checks input { width: 18px; height: 18px; }
.campo input[type="file"] { padding: 10px; }
.archivo-actual { font-size: var(--t-sm); color: var(--texto-2); }

/* Usuarios */
.usuarios { display: grid; gap: 12px; }
.usuario { border: 1px solid var(--linea); border-radius: var(--radio); background: var(--blanco); }
.usuario summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 1fr auto; gap: 4px 14px; align-items: center; padding: 14px 16px; }
.usuario summary::-webkit-details-marker { display: none; }
.usuario__n { font-weight: 600; }
.usuario__c { font-size: var(--t-sm); color: var(--texto-2); word-break: break-all; }
.usuario__rol { font-size: var(--t-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; background: var(--hueso); white-space: nowrap; }
.usuario__rol--sin { background: #fdecea; color: #8a1c12; }
.usuario__rol--inactivo { background: var(--linea); color: var(--texto-2); }
.usuario form { display: grid; gap: 18px; padding: 4px 16px 18px; border-top: 1px solid var(--linea); padding-top: 18px; }