/* Arial Formación · estilos. Los colores de cada campus llegan como --primario y --secundario. */
:root {
  --primario: #0f766e;
  --secundario: #0b2545;
  --fondo: #f4f6f8;
  --tarjeta: #ffffff;
  --texto: #1d2733;
  --gris: #5f6b7a;
  --borde: #dfe4ea;
  --ok: #157347;
  --ok-fondo: #e6f4ec;
  --mal: #b42318;
  --mal-fondo: #fdecea;
  --aviso: #8a5a00;
  --aviso-fondo: #fff4d6;
  --radio: 12px;
  --sombra: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .08);
  --fuente: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--fuente); color: var(--texto); background: var(--fondo); line-height: 1.55; font-size: 16px; display: flex; flex-direction: column; min-height: 100vh; overflow-x: hidden; }
a { color: var(--primario); }
a:hover { text-decoration-thickness: 2px; }
img, video { max-width: 100%; }
h1 { font-size: 1.75rem; line-height: 1.2; margin: 0 0 .5rem; color: var(--secundario); }
h2 { font-size: 1.2rem; margin: 0 0 .75rem; color: var(--secundario); }
h3 { font-size: 1.02rem; margin: 1.1rem 0 .5rem; color: var(--secundario); }
code { background: #eef1f4; padding: 1px 5px; border-radius: 4px; font-size: .9em; }
:focus-visible { outline: 3px solid var(--primario); outline-offset: 2px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.salto { position: absolute; left: -9999px; top: 8px; z-index: 50; background: #fff; padding: 8px 14px; border-radius: 8px; }
.salto:focus { left: 8px; }
.gris { color: var(--gris); }
.centrado { text-align: center; }
.derecha { margin-left: auto; }
.opcional { color: var(--gris); font-weight: 400; font-size: .88em; }
.nota { color: var(--gris); font-size: .92rem; }
.ok-texto { color: var(--ok); }
.aviso-texto { color: var(--aviso); }
.relleno { padding: 0 20px 16px; }

/* Cabecera */
.cabecera { background: var(--secundario); color: #fff; position: sticky; top: 0; z-index: 20; }
.cabecera-in { max-width: 1280px; margin: 0 auto; padding: 0 20px; display: flex; align-items: center; gap: 16px; min-height: 60px; }
.marca { display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; font-weight: 700; min-width: 0; }
.marca-logo { height: 36px; width: auto; background: #fff; border-radius: 6px; padding: 2px; }
.marca-inicial { width: 36px; height: 36px; border-radius: 9px; background: var(--primario); color: #fff; display: inline-grid; place-items: center; font-weight: 800; flex: none; }
.marca-inicial.grande { width: 64px; height: 64px; font-size: 1.8rem; border-radius: 16px; }
.marca-nombre { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.menu { display: flex; align-items: center; gap: 4px; flex: 1; flex-wrap: wrap; }
.menu > a, .menu-usuario a, .menu .enlace-boton { color: #dce6f2; text-decoration: none; padding: 8px 11px; border-radius: 8px; font-size: .95rem; }
.menu > a:hover, .menu-usuario a:hover, .menu .enlace-boton:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.menu a[aria-current="page"] { background: rgba(255, 255, 255, .16); color: #fff; font-weight: 600; }
.menu-usuario { margin-left: auto; display: flex; align-items: center; gap: 2px; }
.boton-menu { display: none; margin-left: auto; background: transparent; border: 1px solid rgba(255, 255, 255, .4); color: #fff; border-radius: 8px; font-size: 1.3rem; padding: 4px 12px; cursor: pointer; }

/* Estructura */
.principal { width: 100%; max-width: 1280px; margin: 0 auto; padding: 24px 20px 48px; flex: 1; }
.principal-acceso { display: flex; flex-direction: column; justify-content: center; }
.pie { text-align: center; color: var(--gris); font-size: .85rem; padding: 18px; border-top: 1px solid var(--borde); background: #fff; }
.tarjeta { background: var(--tarjeta); border: 1px solid var(--borde); border-radius: var(--radio); padding: 20px; box-shadow: var(--sombra); margin-bottom: 18px; }
.tarjeta.sin-relleno { padding: 0; overflow: hidden; }
.estrecha { max-width: 640px; }
.tarjeta.centrada { margin-left: auto; margin-right: auto; text-align: center; }
.titulo-pagina { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.acciones { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.sub { color: var(--gris); margin: 0 0 1rem; }
.miga { color: var(--gris); font-size: .9rem; margin: 0 0 8px; }
.miga a { color: var(--gris); }
.rejilla-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
.rejilla-2.ancha-izq { grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); }
.rejilla-2.compacta { gap: 0 14px; }
.vacio { text-align: center; color: var(--gris); padding: 28px; }

/* Botones */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; background: var(--primario); color: #fff; border: 1px solid var(--primario); border-radius: 9px; padding: 10px 18px; font: 600 .95rem var(--fuente); text-decoration: none; cursor: pointer; line-height: 1.2; }
.btn:hover { filter: brightness(1.08); }
.btn-sec { background: #fff; color: var(--secundario); border-color: var(--borde); }
.btn-sec:hover { background: #f3f6f9; filter: none; }
.btn-peligro { background: #fff; color: var(--mal); border-color: #f1b5ae; }
.btn-peq { padding: 6px 11px; font-size: .86rem; }
.btn-ancho { width: 100%; }
.enlace-boton { background: none; border: 0; padding: 0; color: var(--primario); font: inherit; cursor: pointer; text-decoration: underline; }
.enlace-sec { display: block; text-align: center; margin-top: 8px; font-size: .92rem; }
.mini { background: #fff; border: 1px solid var(--borde); border-radius: 6px; padding: 2px 7px; font-size: .8rem; cursor: pointer; color: var(--secundario); }
.en-linea { display: inline; margin: 0; }
.acciones-fila { white-space: nowrap; text-align: right; }
.acciones-fila form, .acciones-fila a { margin-left: 4px; }

/* Formularios */
.formulario label, label.campo { display: block; font-weight: 600; margin: 14px 0 5px; font-size: .94rem; }
.formulario label:first-of-type { margin-top: 0; }
input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="url"], input[type="date"], input:not([type]), select, textarea {
  width: 100%; padding: 10px 12px; border: 1px solid #c9d1da; border-radius: 9px; font: inherit; background: #fff; color: var(--texto);
}
input[type="color"] { width: 64px; height: 40px; padding: 2px; border: 1px solid #c9d1da; border-radius: 8px; background: #fff; }
input[type="file"] { width: 100%; font: inherit; }
textarea { resize: vertical; }
textarea.mono { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .92rem; }
input:focus, select:focus, textarea:focus { border-color: var(--primario); outline: 2px solid color-mix(in srgb, var(--primario) 30%, transparent); }
.formulario .btn { margin-top: 16px; }
.ayuda { color: var(--gris); font-size: .86rem; margin: 5px 0 0; }
.casilla { display: flex !important; gap: 9px; align-items: flex-start; font-weight: 400 !important; margin: 10px 0 !important; }
.casilla input { margin-top: 4px; flex: none; }
fieldset { border: 1px solid var(--borde); border-radius: 10px; padding: 12px 16px 16px; margin: 16px 0; }
legend { font-weight: 700; padding: 0 6px; color: var(--secundario); }
.con-prefijo { display: flex; align-items: center; border: 1px solid #c9d1da; border-radius: 9px; overflow: hidden; }
.con-prefijo span { padding: 0 10px; color: var(--gris); background: #f3f6f9; align-self: stretch; display: grid; place-items: center; }
.con-prefijo input { border: 0; border-radius: 0; }
.fila-campo { display: flex; gap: 8px; align-items: center; }
.fila-campo input, .fila-campo select { flex: 1; min-width: 0; }
input.corto { width: auto; padding: 6px 8px; }
.filtros { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 14px; }
.filtros input, .filtros select { width: auto; flex: 1; min-width: 160px; }
.filtros label:not(.sr) { font-weight: 600; }
.copiable { width: min(100%, 560px); font-size: .88rem; padding: 6px 8px; }

/* Avisos y etiquetas */
.aviso { padding: 12px 16px; border-radius: 10px; margin: 0 0 16px; border: 1px solid; }
.aviso-ok { background: var(--ok-fondo); border-color: #b7dfc7; color: #0f5132; }
.aviso-error { background: var(--mal-fondo); border-color: #f5c2bd; color: #842029; }
.etiqueta { display: inline-block; font-size: .78rem; font-weight: 700; padding: 2px 9px; border-radius: 999px; background: #e8eef6; color: var(--secundario); vertical-align: middle; }
.etiqueta.ok { background: var(--ok-fondo); color: var(--ok); }
.etiqueta.mal { background: var(--mal-fondo); color: var(--mal); }
.etiqueta.aviso { background: var(--aviso-fondo); color: var(--aviso); }
.etiqueta.gris { background: #eef0f3; color: var(--gris); }

/* Tablas */
.tabla-envoltorio { overflow-x: auto; }
.tabla { width: 100%; border-collapse: collapse; font-size: .94rem; }
.tabla th { text-align: left; font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; color: var(--gris); background: #f8fafc; padding: 10px 14px; border-bottom: 1px solid var(--borde); white-space: nowrap; }
.tabla td { padding: 11px 14px; border-bottom: 1px solid #eef1f4; vertical-align: middle; }
.tabla tr:last-child td { border-bottom: 0; }
.tabla .num { text-align: right; white-space: nowrap; }
.tabla tr.apagada td { opacity: .55; }
.tabla tr.fila-error td { background: #fff6f5; }
.barra-tabla { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--borde); flex-wrap: wrap; }
.paginacion { display: flex; gap: 6px; flex-wrap: wrap; }
.paginacion a { padding: 6px 11px; border: 1px solid var(--borde); border-radius: 8px; background: #fff; text-decoration: none; }
.paginacion a[aria-current="page"] { background: var(--primario); color: #fff; border-color: var(--primario); }

/* Listas, datos, cifras */
.lista-simple { list-style: none; padding: 0; margin: 0; }
.lista-simple li { display: flex; gap: 8px; align-items: center; padding: 9px 0; border-bottom: 1px solid #eef1f4; flex-wrap: wrap; }
.lista-simple li:last-child { border-bottom: 0; }
.datos { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; margin: 0; }
.datos dt { color: var(--gris); }
.datos dd { margin: 0; font-weight: 600; }
.cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin-bottom: 18px; }
.cifra { background: #fff; border: 1px solid var(--borde); border-radius: var(--radio); padding: 16px 18px; text-decoration: none; color: var(--texto); box-shadow: var(--sombra); display: flex; flex-direction: column; gap: 2px; }
.cifra strong { font-size: 1.6rem; color: var(--secundario); }
.cifra span { color: var(--gris); font-size: .9rem; }
a.cifra:hover { border-color: var(--primario); }
.barra { height: 8px; background: #e7ebf0; border-radius: 999px; overflow: hidden; min-width: 90px; }
.barra span { display: block; height: 100%; background: var(--primario); border-radius: 999px; }
.barra.grande { height: 12px; margin: 10px 0 6px; max-width: 520px; }
.pestanas { display: flex; gap: 4px; border-bottom: 2px solid var(--borde); margin-bottom: 18px; overflow-x: auto; }
.pestanas a { padding: 10px 16px; text-decoration: none; color: var(--gris); font-weight: 600; border-bottom: 3px solid transparent; margin-bottom: -2px; white-space: nowrap; }
.pestanas a[aria-current="page"] { color: var(--primario); border-bottom-color: var(--primario); }

/* Acceso */
.acceso { width: 100%; max-width: 420px; margin: 0 auto; }
.acceso-marca { text-align: center; margin-bottom: 18px; }
.acceso-marca h1 { margin-top: 12px; }
.acceso-logo { max-height: 80px; width: auto; }
.acceso .formulario { background: #fff; border: 1px solid var(--borde); border-radius: var(--radio); padding: 24px; box-shadow: var(--sombra); }
.acceso .aviso { margin-bottom: 14px; }
.lista-campus { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.opcion-campus { width: 100%; text-align: left; display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 14px 16px; border: 1px solid var(--borde); border-radius: 10px; background: #fff; cursor: pointer; font: inherit; }
.opcion-campus:hover { border-color: var(--primario); }
.opcion-campus span { color: var(--gris); font-size: .9rem; }

/* Editor de curso */
.barra-editor { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; align-items: flex-start; margin-bottom: 14px; }
.editor { display: grid; grid-template-columns: 280px minmax(0, 1fr) 280px; gap: 18px; align-items: start; }
.editor-cuerpo { display: contents; }
.editor-arbol { padding: 14px; position: sticky; top: 76px; max-height: calc(100vh - 96px); overflow: auto; }
.editor-arbol ul { list-style: none; padding: 0 0 0 8px; margin: 4px 0; }
.arbol-ficha, .arbol-titulo, .arbol-leccion { display: block; text-decoration: none; color: var(--texto); padding: 6px 8px; border-radius: 7px; flex: 1; min-width: 0; }
.arbol-ficha { font-weight: 700; margin-bottom: 8px; }
.arbol-titulo { font-weight: 700; color: var(--secundario); }
.arbol-leccion { font-size: .92rem; }
.arbol-leccion.oculta { color: var(--gris); font-style: italic; }
.arbol-ficha.activo, .arbol-titulo.activo, .arbol-leccion.activo { background: color-mix(in srgb, var(--primario) 14%, white); color: var(--secundario); }
.arbol-fila { display: flex; align-items: center; gap: 4px; }
.arbol-mover { display: flex; gap: 2px; flex: none; }
.arbol-modulo { border-top: 1px solid #eef1f4; padding-top: 6px; margin-top: 6px; }
.arbol-nueva { padding-left: 16px; margin: 2px 0 8px; font-size: .9rem; }
.arbol-nuevo-modulo { margin-top: 12px; }
.icono-tipo { display: inline-block; width: 18px; color: var(--gris); font-size: .8rem; }
.editor-centro { min-width: 0; }
.editor-ajustes { position: sticky; top: 76px; }
.editor-ajustes-extra { grid-column: 3; }
.editor-ajustes-extra .tarjeta { padding: 14px; }
.video-previa { width: 100%; border-radius: 10px; background: #000; margin-bottom: 6px; }
.portada-previa, .logo-previa { max-height: 140px; border-radius: 8px; display: block; margin-bottom: 6px; }
.lista-adjuntos { list-style: none; padding: 0; margin: 0 0 8px; }
.lista-adjuntos li { padding: 7px 0; border-bottom: 1px solid #eef1f4; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* Tutor */
.tarjetas { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.tarjeta.grupo { display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: var(--texto); }
.tarjeta.grupo:hover { border-color: var(--primario); }
.grupo-titulo { font-size: 1.1rem; color: var(--secundario); }
.grupo-cifras { display: flex; gap: 14px; flex-wrap: wrap; color: var(--gris); font-size: .9rem; }
.grupo-cifras strong { color: var(--texto); }

/* Alumno: tarjetas de curso */
.tarjetas-cursos { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 18px; }
.curso { background: #fff; border: 1px solid var(--borde); border-radius: var(--radio); overflow: hidden; box-shadow: var(--sombra); display: flex; flex-direction: column; }
.curso-imagen { aspect-ratio: 16 / 8; background: linear-gradient(135deg, var(--primario), var(--secundario)); display: grid; place-items: center; overflow: hidden; }
.curso-imagen img { width: 100%; height: 100%; object-fit: cover; }
.curso-imagen span { font-size: 3rem; color: rgba(255, 255, 255, .85); font-weight: 800; }
.curso-cuerpo { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.curso-cuerpo h2 { margin: 4px 0 0; font-size: 1.15rem; }
.curso-cuerpo .gris { margin: 0 0 6px; font-size: .92rem; }
.curso-datos { display: flex; justify-content: space-between; font-size: .86rem; color: var(--gris); margin: 4px 0 10px; }
.curso-cuerpo .btn { margin-top: auto; }

/* Aula y lección */
.aula-cabecera { display: flex; justify-content: space-between; gap: 18px; align-items: center; flex-wrap: wrap; }
.aula-cabecera h1 { margin-bottom: 4px; }
.modulo-titulo { border-top: 1px solid #eef1f4; padding-top: 12px; }
.temario { list-style: none; padding: 0; margin: 0; }
.temario li { display: flex; gap: 10px; align-items: center; padding: 8px 0; flex-wrap: wrap; }
.temario li a { text-decoration: none; color: var(--texto); }
.temario li a:hover { color: var(--primario); text-decoration: underline; }
.temario.compacto li { padding: 5px 0; font-size: .92rem; }
.temario.compacto a[aria-current="page"] { font-weight: 700; color: var(--primario); }
.marca-estado { width: 16px; height: 16px; border-radius: 50%; border: 2px solid #c3ccd6; flex: none; display: inline-block; }
.marca-estado.vista { border-color: var(--primario); }
.marca-estado.hecha { background: var(--primario); border-color: var(--primario); box-shadow: inset 0 0 0 3px #fff; }
.leccion-marco { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 18px; align-items: start; }
.temario-lateral { position: sticky; top: 76px; max-height: calc(100vh - 96px); overflow: auto; padding: 14px 16px; }
.temario-modulo { font-weight: 700; color: var(--secundario); margin: 10px 0 4px; font-size: .9rem; }
.temario-modulo:first-child { margin-top: 0; }
.boton-temario { display: none; margin-bottom: 12px; }
.leccion { min-width: 0; padding: 24px 28px; }
.video { width: 100%; border-radius: 10px; background: #000; max-height: 70vh; }
.video-externo { position: relative; width: 100%; aspect-ratio: 16 / 9; margin-bottom: 8px; }
.video-externo iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: 10px; }
.texto-leccion { margin-top: 18px; font-size: 1.04rem; line-height: 1.7; }
.texto-leccion img { border-radius: 8px; }
.texto-leccion blockquote { margin: 1rem 0; padding: 8px 16px; border-left: 4px solid var(--primario); background: #f6f9fb; }
.subtitulo { margin-top: 26px; }
.navegacion-leccion { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--borde); flex-wrap: wrap; }

/* Responsive */
@media (max-width: 1100px) {
  .editor { grid-template-columns: 240px minmax(0, 1fr); }
  .editor-ajustes, .editor-ajustes-extra { grid-column: 2; position: static; }
}
@media (max-width: 860px) {
  .rejilla-2, .rejilla-2.ancha-izq { grid-template-columns: 1fr; }
  .editor { grid-template-columns: 1fr; }
  .editor-arbol, .editor-ajustes, .editor-ajustes-extra { position: static; grid-column: auto; max-height: none; }
  .leccion-marco { grid-template-columns: 1fr; }
  .boton-temario { display: inline-flex; }
  .temario-lateral { display: none; position: static; max-height: none; }
  .temario-lateral.abierto { display: block; }
  .boton-menu { display: block; }
  .menu { display: none; position: absolute; top: 60px; left: 0; right: 0; background: var(--secundario); flex-direction: column; align-items: stretch; padding: 8px 12px 14px; box-shadow: 0 8px 20px rgba(0, 0, 0, .25); }
  .menu.abierto { display: flex; }
  .menu-usuario { margin-left: 0; flex-direction: column; align-items: stretch; border-top: 1px solid rgba(255, 255, 255, .15); padding-top: 6px; margin-top: 6px; }
  .menu .enlace-boton { text-align: left; width: 100%; }
}
@media (max-width: 560px) {
  .principal { padding: 16px 16px 40px; }
  h1 { font-size: 1.45rem; }
  .tarjeta { padding: 16px; }
  .leccion { padding: 18px 16px; }
  .navegacion-leccion { flex-direction: column; align-items: stretch; }
  .navegacion-leccion .btn, .navegacion-leccion form, .navegacion-leccion form .btn { width: 100%; }
  .datos { grid-template-columns: 1fr; gap: 2px; }
  .datos dd { margin-bottom: 8px; }
  .acceso .formulario { padding: 18px; }
}

/* Ajustes: las columnas no se ensanchan por una tabla (la tabla hace scroll dentro de su tarjeta). */
.rejilla-2 > *, .editor > *, .leccion-marco > * { min-width: 0; }
.curso-cuerpo .etiqueta { align-self: flex-start; }
/* Editor: el árbol y el contenido ocupan dos filas para que «Mover / Borrar» quede bajo los ajustes. */
@media (min-width: 1101px) {
  .editor-arbol, .editor-centro { grid-row: span 2; }
  .editor-ajustes { grid-column: 3; grid-row: 1; }
  .editor-ajustes-extra { grid-column: 3; grid-row: 2; align-self: start; }
  .editor { grid-template-rows: auto 1fr; }
}
/* Los textos solo para lectores de pantalla no deben ensanchar la página. */
.tabla-envoltorio, .pestanas { position: relative; }

/* ===== Fase 2: actividades, cuestionarios, correcciones y bandeja ===== */
.derecha-texto { text-align: right; margin: -6px 0 10px; font-size: .9rem; }
.tarjeta-interior { border: 1px solid var(--borde); border-radius: 10px; padding: 16px 18px; margin-top: 22px; background: #fbfcfd; }
.tarjeta-interior .subtitulo { margin-top: 0; }
.respuesta { white-space: pre-wrap; background: #f6f8fa; border: 1px solid #e6eaef; border-radius: 8px; padding: 12px 14px; margin: 6px 0 10px; overflow-wrap: anywhere; }
.entrega { border-top: 1px solid #eef1f4; padding-top: 12px; margin-top: 12px; }
.correccion { border-left: 4px solid var(--primario); padding-left: 12px; margin: 8px 0; }
.acciones.apiladas { flex-direction: column; align-items: stretch; margin-top: 14px; }
.formulario .acciones.apiladas .btn { margin-top: 0; }
.cronometro { background: var(--secundario); color: #fff; border-radius: 10px; padding: 10px 16px; font-size: 1.05rem; position: sticky; top: 72px; z-index: 5; }
.cronometro.acaba { background: var(--mal); }
.pendientes { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; position: sticky; top: 64px; z-index: 4; padding: 12px 14px; }
.num-pregunta { display: inline-grid; place-items: center; min-width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--borde); text-decoration: none; color: var(--texto); font-weight: 600; }
.num-pregunta.respondida { background: var(--primario); color: #fff; border-color: var(--primario); }
.pregunta legend { padding: 0; }
.pregunta .enunciado { font-size: 1.05rem; margin: 6px 0 10px; }
.pregunta .enunciado p { margin: 0 0 6px; }
.opcion { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--borde); border-radius: 9px; margin: 8px 0; cursor: pointer; background: #fff; }
.opcion:hover { border-color: var(--primario); }
.opcion input { margin-top: 4px; flex: none; }
.barra-envio { position: sticky; bottom: 0; background: var(--fondo); padding: 12px 0; border-top: 1px solid var(--borde); }
.revision { border-top: 1px solid #eef1f4; padding: 12px 0; }
.opciones-revision { margin: 6px 0; padding-left: 20px; }
.opciones-revision li { padding: 3px 0; }
.opciones-revision li.correcta { color: var(--ok); font-weight: 600; }
.opciones-revision li.marcada:not(.correcta) { color: var(--mal); }
.lista-preguntas { list-style: none; padding: 0; margin: 10px 0 0; max-height: 640px; overflow: auto; }
.lista-preguntas li { border-bottom: 1px solid #eef1f4; }
.opcion-editor { margin-bottom: 6px; }
.opcion-editor input[type="checkbox"] { width: 20px; height: 20px; flex: none; }
.vista-previa-aviso { border: 1px dashed var(--primario); border-radius: 10px; padding: 12px 14px; margin-top: 14px; background: #f7fbfa; }
.hilo { display: flex; flex-direction: column; gap: 12px; }
.mensaje { max-width: 85%; }
.mensaje.propio { align-self: flex-end; }
.mensaje.propio .respuesta { background: color-mix(in srgb, var(--primario) 10%, white); border-color: color-mix(in srgb, var(--primario) 25%, white); }
.mensaje-autor { margin: 0 0 2px; font-size: .9rem; }
.bandeja { list-style: none; margin: 0; padding: 0; }
.bandeja li { display: flex; gap: 12px; align-items: center; padding: 14px 18px; border-bottom: 1px solid #eef1f4; }
.bandeja li:last-child { border-bottom: 0; }
.bandeja li a { display: flex; flex-direction: column; gap: 2px; text-decoration: none; color: var(--texto); flex: 1; min-width: 0; }
.bandeja li.no-leido { background: #f4faf9; }
.bandeja li.no-leido strong { color: var(--secundario); }
.bandeja-tipo { font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; color: var(--primario); font-weight: 700; }
.bandeja-fecha { font-size: .85rem; white-space: nowrap; }
.derecha-enlace { font-weight: 600; }
@media (max-width: 560px) {
  .mensaje { max-width: 100%; }
  .bandeja li { flex-direction: column; align-items: flex-start; }
  .pendientes { top: 60px; }
}

/* ===== Fase 3: certificados y verificación ===== */
.certificado h2 { margin: 10px 0; }
.certificado.revocado { opacity: .75; }
.verificacion { max-width: 520px; }
.resultado-verificacion { border-width: 2px; }
.resultado-verificacion.valido { border-color: var(--ok); }
.resultado-verificacion.revocado { border-color: var(--mal); }
.estado-verificacion { font-size: 1.3rem; font-weight: 800; margin: 0 0 12px; }
.valido .estado-verificacion { color: var(--ok); }
.revocado .estado-verificacion { color: var(--mal); }
form.revocar input.corto { width: 120px; }
.certificado { position: relative; }
/* Menú del administrador (muchas secciones): más compacto en pantallas medianas. */
@media (min-width: 861px) and (max-width: 1500px) {
  .cabecera-in { gap: 10px; padding: 0 14px; }
  .menu { gap: 0; }
  .menu > a, .menu-usuario a, .menu .enlace-boton { padding: 7px 7px; font-size: .88rem; }
  .marca-nombre { max-width: 170px; }
}
.tabla code { white-space: nowrap; }