:root{--green:#065F44;--ink:#242424;--muted:#6E6E68;--line:#E2E2DC;--bg:#FFFFFF}
*{box-sizing:border-box}
body{margin:0;font:15px/1.5 Arial,Helvetica,sans-serif;color:var(--ink);background:#F7F7F4}
/* display:flex on .topbar would otherwise beat the [hidden] UA rule */
[hidden]{display:none!important}
/* EL ANCHO SIGUE A LA PANTALLA (2026-10-17). Era 640 fijo, y en un monitor
   de 1440 eso es el 44% de la pantalla: el video del modulo quedaba en
   608x342, ilegible para una grabacion de pantalla, que es lo que son casi
   todos los Looms. El padding de 16 es lo que mantiene el margen en un
   telefono, y por eso va adentro del max-width (box-sizing: border-box). */
.wrap{max-width:min(1280px,100%);margin:0 auto;padding:32px 16px}
/* El admin va mas ancho porque el reporte es una tabla con una columna por
   modulo: medido, con 8 modulos la tabla pide 1086 px y con el tope viejo de
   1100 ya scrolleaba de costado en una pantalla de 1920. */
.wrap.wide{max-width:min(1600px,100%)}
h1{color:var(--green);font-size:24px;margin:0 0 4px}
.muted{color:var(--muted);font-size:14px}
.row{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
form{background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:20px;margin-top:16px}
label{display:block;font-size:13px;color:var(--muted);margin-bottom:6px}
input{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:6px;font-size:16px;margin-bottom:14px}
button{background:var(--green);color:#fff;border:0;border-radius:6px;padding:11px 20px;font-size:15px;font-weight:600;cursor:pointer}
button[disabled]{opacity:.55;cursor:default}
button.link{background:none;color:var(--green);text-decoration:underline;padding:6px 0;font-weight:400}
.msg{min-height:20px;font-size:14px;margin-top:12px}
.msg.err{color:#A6301C}
.msg.ok{color:var(--green)}

/* ---- topbar / brand ---- */
.topbar{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:0 0 20px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;flex:0 0 auto;text-decoration:none;margin-right:auto}
.brand-logo{display:block;height:36px;width:auto;object-fit:contain}
.icon-btn{display:inline-flex;align-items:center;gap:6px;background:none;color:var(--green);border:0;border-radius:6px;padding:6px 8px;font-size:14px;font-weight:500;cursor:pointer;text-decoration:none}
.icon-btn:hover{background:#E3F0E9}
.icon-btn svg{flex:0 0 auto;display:block}
.icon-label{line-height:1}

/* ---- login (Hub-style card on green) ---- */
body.on-login{background:#065F44;min-height:100vh}
body.on-login .wrap{max-width:none;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px 16px}
.login{width:100%;max-width:420px}
.login-card{background:#fff;border-radius:12px;padding:36px 32px 28px;box-shadow:0 12px 40px rgba(0,0,0,.18);text-align:center}
.login-mark{display:block;width:72px;height:72px;margin:0 auto 14px;object-fit:contain;border-radius:8px}
.login-title{color:var(--green);font-size:28px;font-weight:700;margin:0 0 8px;letter-spacing:-.02em}
.login-sub{color:var(--muted);font-size:12px;line-height:1.45;margin:0 0 18px}
.login-rule{border:0;border-top:2px solid var(--green);margin:0 0 22px}
.login-card form{background:none;border:0;border-radius:0;padding:0;margin:0;text-align:left}
.login-card label{font-weight:600;color:#3a3a3a}
.login-card input{margin-bottom:14px}
.login-card button[type=submit]{width:100%;padding:12px 20px}
.login-hint{text-align:center;color:var(--muted);font-size:12px;margin:12px 0 0}
.login-card .msg{text-align:center}
.login-card .link{display:inline-block;margin-top:8px}

/* ---- modules ---- */
.who{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}
/* auto-fill con un minimo de 320: en un telefono da una sola columna, y en
   escritorio tantas como entren sin que una tarjeta baje de 320. */
.cards{list-style:none;padding:0;margin:16px 0 0;display:grid;gap:12px;
       grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}
.card{background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:16px}
.card h2{font-size:17px;margin:0;color:var(--ink)}
.card .row{align-items:flex-start}
.card button.open{margin-top:12px}
.small{font-size:13px}
.pill{font-size:12px;padding:3px 10px;border-radius:999px;background:#EFEFEA;color:var(--muted);white-space:nowrap}
.pill.done{background:#E3F0E9;color:var(--green)}
.pill.tried{background:#FBEFE6;color:#A6621C}

/* ---- video ---- */
/* EL LIMITE ES EL ALTO DE LA VENTANA, NO UN NUMERO FIJO.
   Hubo un tope de 960 y estaba mal elegido: en un monitor de 1900 dejaba 290
   px vacios a la derecha del reproductor mientras la tarjeta de preguntas de
   abajo llegaba hasta el final, y el motivo del tope -que las preguntas no
   quedaran abajo del pliegue- no es lo que uno hace con un video: se mira
   entero y DESPUES se baja a contestar.
   Lo que si tiene que pasar es que el video entre completo en la pantalla sin
   scrollear. Medido, lo que hay arriba del reproductor son 219 px en 1280,
   1366, 1440 y 1920 -no cambia con el ancho-: 244 es eso mas 25 de aire
   abajo, para que el borde no quede pegado al canto de la ventana.
   El 16:9 lo sigue dando el padding-bottom de #videoBox, no una medida fija;
   aca solo se limita el ancho.
   dvh y no vh en el telefono es la barra de direcciones que aparece y
   desaparece; la linea de vh queda primero como respaldo para el navegador
   que no entienda dvh. En un telefono gana igual el 100%.
   El piso de 480 es para una ventana muy baja: por debajo de unos 514 px de
   alto el video deja de achicarse y pasa a asomar abajo, que es preferible a
   un reproductor de 300 px donde no se lee nada. */
.video{margin:16px auto;
       max-width:min(100%, max(480px, calc((100vh  - 244px) * 16 / 9)));
       max-width:min(100%, max(480px, calc((100dvh - 244px) * 16 / 9)))}
#videoBox{position:relative;padding-bottom:56.25%;height:0;overflow:hidden;border-radius:8px;background:#000}
#videoBox iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* ---- quiz ---- */
/* EL ENUNCIADO NO PISA EL BORDE. Un <legend> se dibuja ENCIMA del trazo
   superior del fieldset: con una linea queda bien, y con dos -lo normal en un
   telefono- la segunda cae sobre el borde. Flotado deja de ocupar ese hueco y
   se comporta como un bloque normal, asi que el borde cierra por arriba de
   el; el ::after limpia el float para que el fieldset lo contenga.
   Sigue siendo <legend> dentro de <fieldset>: el grupo de radios conserva su
   nombre accesible, que es justamente lo que no hay que perder. */
.q{border:1px solid var(--line);border-radius:8px;padding:14px 16px;margin:0 0 12px;background:var(--bg)}
.q::after{content:"";display:block;clear:both}
.q legend{float:left;width:100%;font-weight:600;font-size:15px;padding:0;margin:0 0 8px}
.opt{display:flex;align-items:flex-start;gap:10px;padding:8px 4px;cursor:pointer;font-size:15px;color:var(--ink)}
.opt input{width:auto;margin:3px 0 0}
.opt:hover{background:#FAFAF7}

/* ---- result ---- */
.result{background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:24px;border-top:4px solid var(--muted)}
.result.ok{border-top-color:var(--green)}
.result.no{border-top-color:#A6621C}
.result h1{margin-bottom:2px}
.result.no h1{color:#A6621C}
.score{font-size:32px;font-weight:700;margin:0 0 4px;color:var(--ink)}
.results{list-style:none;padding:0;margin:16px 0 0}
.results li{padding:8px 0;border-top:1px solid var(--line);font-size:14px}
.results .mark{font-size:12px;padding:2px 8px;border-radius:999px;background:#EFEFEA;color:var(--muted);margin-left:6px;white-space:nowrap}
.results .right .mark{background:#E3F0E9;color:var(--green)}
.results .wrong .mark{background:#FBEFE6;color:#A6621C}

/* ---- admin ---- */
.pad{padding:16px}
.scroll > .pad{margin:0}
.plain{list-style:none;padding:0;margin:8px 0}
.plain li{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:9px 0;border-top:1px solid var(--line);font-size:14px}
.modrow.off span:first-child{color:var(--muted)}
/* QUE SE VEA QUE LA TABLA SIGUE. En un telefono la tabla mide 646 adentro de
   una caja de 358 y se cortaba sin ninguna senal: parecia que ahi terminaba.
   El truco es de Lea Verou y no lleva JS: dos degradados blancos pegados al
   contenido (background-attachment: local, se van con el scroll) tapan dos
   sombras pegadas al marco (scroll, se quedan). Cuando no hay nada mas que
   mostrar de ese lado, el blanco tapa la sombra y no se ve nada.
   El marco y el fondo se mudaron de la tabla a esta caja: si la tabla sigue
   siendo opaca, las sombras quedan debajo de ella. */
.scroll{overflow-x:auto;overflow-y:hidden;
  background-color:var(--bg);
  background-image:
    linear-gradient(to right, var(--bg) 40%, rgba(255,255,255,0)),
    linear-gradient(to left,  var(--bg) 40%, rgba(255,255,255,0)),
    radial-gradient(farthest-side at 0    50%, rgba(36,36,36,.26), rgba(36,36,36,0)),
    radial-gradient(farthest-side at 100% 50%, rgba(36,36,36,.26), rgba(36,36,36,0));
  background-position:left center, right center, left center, right center;
  background-repeat:no-repeat;
  background-size:44px 100%, 44px 100%, 22px 100%, 22px 100%;
  background-attachment:local, local, scroll, scroll;
  border:1px solid var(--line);border-radius:8px}

/* tabs */
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin:18px 0 0}
.tab{background:none;border:0;border-bottom:2px solid transparent;color:var(--muted);
     font-size:14px;font-weight:600;padding:10px 14px;border-radius:0;cursor:pointer}
.tab:hover{color:var(--ink)}
.tab.on{color:var(--green);border-bottom-color:var(--green)}
.tabpane{padding-top:18px}

/* summary */
.summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:10px;margin-bottom:16px}
.stat{background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:12px 14px;border-left:3px solid var(--line)}
.stat.ok{border-left-color:var(--green)}
.stat.warn{border-left-color:#C8862E}
.stat.muted{border-left-color:#C9C9C2}
.stat .num{display:block;font-size:24px;font-weight:700;line-height:1.1;color:var(--ink)}
.stat .lab{display:block;font-size:12px;color:var(--muted);margin-top:2px}

/* toolbar */
.toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:12px}
.filters{display:flex;gap:4px;background:#EFEFEA;border-radius:999px;padding:3px}
.chip{background:none;border:0;border-radius:999px;color:var(--muted);font-size:13px;
      font-weight:600;padding:6px 14px;cursor:pointer}
.chip.on{background:var(--bg);color:var(--green);box-shadow:0 1px 2px rgba(0,0,0,.08)}
/* 16px y no 14: Safari en iOS hace zoom sobre cualquier input por debajo de
   16, y el zoom deja la tabla del reporte fuera de la pantalla. */
.toolbar input[type=search]{flex:1;min-width:180px;margin:0;padding:8px 12px;font-size:16px}

/* table */
.report{border-collapse:collapse;width:100%;background:none;border:0;font-size:14px}
.report th,.report td{text-align:left;padding:9px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
/* translucido, no #FAFAF7 opaco: la sombra del borde pasa por detras de la
   fila de encabezado en vez de cortarse justo ahi. */
.report thead th{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);background:rgba(241,239,232,.65)}
.report tbody tr:hover{background:#FAFAF7}
.report tbody tr:last-child th,.report tbody tr:last-child td{border-bottom:0}
.report tbody th{font-weight:600;line-height:1.3}
.nm{display:block}
.em{display:block;font-size:12px;color:var(--muted);font-weight:400}
.cellnote{display:block;font-size:11px;color:var(--muted);margin-top:2px}
td.st-done{background:rgba(0,91,58,.045)}
td.st-tried{background:rgba(200,134,46,.07)}
.pill.none{background:#EFEFEA;color:var(--muted)}

/* folded asides */
.fold{background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:10px 14px;margin-top:14px}
.fold summary{cursor:pointer;font-size:14px;font-weight:600;color:var(--ink);list-style:revert}
.fold[open] summary{margin-bottom:6px}

/* ---- new module form ----
   Una fila es: el tilde de "esta es la correcta", el texto de la opcion y
   -si hay mas que el minimo- el boton de sacarla. El tilde va envuelto en
   un <label> de 44x44 porque un <input type=radio> suelto mide 13 y no se
   puede agrandar desde aca; el label le presta el area, y de paso le da
   nombre accesible. Queda pendiente del PR anterior, cerrado. */
.optrow{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.optrow .pick{display:inline-flex;align-items:center;justify-content:center;
              min-width:44px;min-height:44px;margin:0;cursor:pointer;flex:0 0 auto}
.optrow .pick input[type=radio]{width:18px;height:18px;margin:0;flex:0 0 auto}
.optrow input[type=text]{margin:0;flex:1 1 auto;min-width:0}
.optrow .rm{flex:0 0 auto;padding:10px 8px;min-height:44px;color:var(--muted)}
.optrow .rm:hover{color:#A6301C}
#newModule input[type=text]{margin-bottom:10px}
.nmq legend .rm{font-size:13px;font-weight:400;padding:4px 8px;margin-left:8px}
.addq{display:inline-block;margin-top:4px;font-weight:600}
.nm-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:18px}
/* Por que esta pantalla no deja tocar la estructura. Va ARRIBA de las
   preguntas y no abajo: la explicacion sirve antes de intentarlo. */
.locknote{background:#FBF4E8;border:1px solid #E8D9BC;border-left:3px solid #C8862E;
          border-radius:6px;padding:10px 14px;margin:16px 0 4px;font-size:14px;color:#6B4E1E}

/* El error va PEGADO al campo que falla. Un solo renglon arriba de todo
   obliga a buscar cual de catorce cajas es, que es la parte cara. */
.fielderr{color:#A6301C;font-size:13px;margin:-6px 0 10px;min-height:0}
.fielderr:empty{display:none}

/* La vista previa del video. Clase propia y no .video: el ancho de aquel lo
   decide el alto de la ventana, y aca lo que hace falta es algo chico al
   lado del campo donde se pego el link.
   ASPECT-RATIO Y NO padding-bottom:56.25%. El truco del padding salio mal
   aca y hay que decir por que: un padding en porcentaje se resuelve contra
   el ANCHO DEL CONTENEDOR, no contra el ancho del elemento. Con el
   contenedor en 1248 y el max-width en 520, daba una caja de 520 x 702 --
   un rectangulo negro vertical. El reproductor del alumno sigue con el
   padding porque ahi el elemento SI ocupa todo su contenedor. */
.nm-preview{position:relative;width:100%;max-width:520px;aspect-ratio:16 / 9;
            overflow:hidden;border-radius:8px;background:#000;margin:0 0 14px}
.nm-preview iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* ---- the admin's module list ---- */
.modules li.modrow{display:flex;justify-content:space-between;align-items:center;
                   gap:12px;flex-wrap:wrap;padding:12px 0;border-top:1px solid var(--line)}
/* Las flechas: cada una su propio objetivo, porque reordenar en el telefono
   son dos toques seguidos y 20 px ahi es una loteria. */
.modsort{display:flex;flex-direction:column;flex:0 0 auto}
.modsort .arrow{min-width:44px;min-height:30px;padding:2px 10px;line-height:1;
                text-decoration:none;font-size:12px;color:var(--muted)}
.modsort .arrow:hover:not([disabled]){color:var(--green)}
.modsort .arrow[disabled]{opacity:.25;cursor:default}
.modacts .danger{color:#A6301C}
.modacts .danger[disabled]{color:var(--muted)}
.modmain{min-width:0;flex:1 1 320px}
.modtitle{font-weight:600}
.modnote{display:block;margin-top:2px}
.modacts{display:flex;gap:4px;flex:0 0 auto;flex-wrap:wrap}
.modacts .act{padding:10px 10px;min-height:44px}
.modacts .act[disabled]{opacity:.45;text-decoration:none;cursor:not-allowed}
/* El recien creado, para no perderlo de vista al volver del formulario. */
.modrow.fresh{background:#F3F8F5;box-shadow:inset 3px 0 0 var(--green);padding-left:10px}

/* pager */
.pager{display:flex;align-items:center;justify-content:center;gap:16px;padding:14px 0 2px}
.pager button{padding:6px 10px}
.pager button[disabled]{opacity:.35;text-decoration:none;cursor:default}

/* =====================================================================
   TELEFONO. Dos condiciones, no una: el ancho agarra el telefono en
   vertical, y (pointer:coarse) agarra la tablet y la notebook tactil, que
   tienen pantalla grande y el mismo dedo.
   44 px es el minimo de un objetivo tactil; todo lo de aca abajo medía
   entre 21 y 39.
   ===================================================================== */
@media (max-width:640px), (pointer:coarse) {
  /* todos los botones, no solo los enumerados: Submit answers y Create
     module median 39 y Send Login Link 41. */
  button{min-height:44px}
  .brand{min-height:44px}
  .icon-btn{min-height:44px;padding:10px 12px}
  button.link{min-height:44px;padding:10px 0}
  .chip{min-height:44px;padding:10px 16px}
  .tab{min-height:44px;padding:12px 14px}
  .pager button{min-height:44px;padding:10px 12px}
  .card button.open{min-height:44px}
  /* flex-start se queda: una opcion de dos lineas tiene que alinear el radio
     con la primera, no centrarlo contra el bloque entero. */
  .opt{min-height:44px;padding:11px 4px}
  .fold summary{min-height:44px;display:flex;align-items:center}
  /* Cada flecha completa en el telefono: dos de 30 apiladas alcanzan para
     el mouse y no para un dedo. */
  .modsort .arrow{min-height:44px}
  /* El radio suelto del formulario de alta no tiene un <label> alrededor que
     le preste area, asi que no se puede llevar a 44 sin reescribir la fila.
     24 es lo que se puede hacer desde la hoja de estilos; envolverlo en un
     label es parte del rediseno del alta de modulos, no de este cambio. */
  .optrow{min-height:44px}
  .optrow input[type=radio]{width:24px;height:24px}
}

/* El topbar se partia en dos lineas con el nombre colgando solo arriba.
   Abajo de 480 el nombre se va -el boton Admin ya dice quien puede que
   cosa- y los dos botones quedan en icono, 44x44, que entra de sobra:
   145 del logo + 44 + 44 + aire, contra 328 utiles a 360 px. */
@media (max-width:480px) {
  .topbar{flex-wrap:nowrap}
  #who{display:none}
  .icon-label{display:none}
  .icon-btn{min-width:44px;justify-content:center;padding:10px}
}