:root{
    color-scheme:light;
    /* v1.38.0 — Sistema de la interfaz (Antigravity, DISENO-MOVIL.md): un solo lugar para la marca */
    --color-marca:#00948E;          /* marca: logo e íconos de la app */
    --color-accion:#007974;         /* acciones y texto de acento: 5,3:1 con blanco (AA); el #00948E daba 3,7:1 */
    --color-marca-suave:#E4F3F2;
    --color-fondo:#F6F7F6;
    --color-superficie:#FFFFFF;
    --color-texto:#1B2A2A;
    --color-texto-suave:#5C6B6B;
    --color-borde:#DDE3E2;
    --color-aviso:#B45309;
    --color-error:#B3261E;
    --radio:16px;
    --sombra:0 1px 2px rgba(0,0,0,.06), 0 4px 12px rgba(0,0,0,.05);
    --espacio:8px;
    /* Las variables de siempre apuntan al sistema nuevo: el resto de la hoja no cambia de nombres */
    --bg:var(--color-fondo); --card:var(--color-superficie); --ink:var(--color-texto); --muted:var(--color-texto-suave);
    --primary:var(--color-accion); --primary-dark:#006560; --ok:#116b34; --bad:var(--color-error);
    --warn:var(--color-aviso); --line:var(--color-borde); --radius:var(--radio);
    --primary-soft:var(--color-marca-suave); --surface-soft:#f4f5f5;
    --teal:var(--color-accion); --crema:#F0EFEA;
    /* usada por el popup de edición de respuestas en el script */
    --primary-light:#dfe3fd;
    /* borde de controles interactivos: cumple 3:1 (WCAG 1.4.11), a diferencia de --line que es decorativo */
    --field:#8b93a1;
    --shadow-sm:var(--sombra);
    --shadow-md:var(--sombra);
    --ring:0 0 0 3px rgba(0,148,142,.25);
    --focus:2px solid var(--primary);
    --tap:48px;
    --sat:env(safe-area-inset-top,0px);
    --sab:env(safe-area-inset-bottom,0px);
    --sal:env(safe-area-inset-left,0px);
    --sar:env(safe-area-inset-right,0px);
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{-webkit-text-size-adjust:100%;}
  body{
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Inter",Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji",sans-serif;
    background:var(--bg); color:var(--ink);
    padding-bottom:calc(70px + var(--sab));
    font-size:15px; line-height:1.5; letter-spacing:-.005em;
    -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
    font-variant-numeric:tabular-nums;
    -webkit-tap-highlight-color:rgba(0,148,142,.12);
    overscroll-behavior-y:none;
  }
  h1,h2,h3{letter-spacing:-.018em; line-height:1.3;}
  /* Franja de seguridad superior (notch) — mismo color que el header */
  body::before{
    content:""; position:fixed; top:0; left:0; right:0; height:var(--sat);
    background:var(--card); z-index:60; pointer-events:none;
  }
  header{
    background:var(--card); color:var(--ink); border-bottom:1px solid var(--line);
    padding:calc(16px + var(--sat)) calc(24px + var(--sar)) 16px calc(24px + var(--sal));
    display:flex; justify-content:center; align-items:center; gap:10px;
  }
  header .logo{width:28px; height:28px; flex:0 0 auto;}
  header h1{
    font-size:1.6rem; font-weight:400; letter-spacing:-.05em; margin:0;
    background:linear-gradient(135deg, var(--teal) 0%, #006560 100%);
    -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  }
  main{max-width:1040px; margin:0 auto; padding:22px calc(16px + var(--sar)) 22px calc(16px + var(--sal));}
  footer{
    max-width:1040px; margin:0 auto;
    padding:10px calc(16px + var(--sar)) calc(14px + var(--sab)) calc(16px + var(--sal));
    color:var(--muted); font-size:.78rem; text-align:center; line-height:1.5;
  }
  .card{background:var(--card); border:none; border-radius:var(--radius); padding:24px; margin-bottom:24px; box-shadow:var(--shadow-sm);}
  .card h2{font-size:1.02rem; font-weight:600; margin-bottom:14px;}
  .card h3{font-size:.9rem; font-weight:600; margin:18px 0 8px; color:var(--ink);}
  label{display:block; font-size:.82rem; font-weight:600; color:var(--muted); margin:14px 0 6px; letter-spacing:0;}
  /* 16px mínimo: evita el zoom automático de iOS al enfocar un campo.
     El diseño de escritorio usa una escala menor; en táctil manda el 16px. */
  input[type=text],input[type=password],input[type=number],input[type=file],select,textarea{
    width:100%; padding:10px 12px; border:1px solid var(--field); border-radius:9px;
    font-size:16px; background:#fff; color:var(--ink); min-height:var(--tap); font-family:inherit;
    line-height:1.45; transition:border-color .15s ease, box-shadow .15s ease; outline:none;
  }
  input[type=text]:hover,input[type=password]:hover,input[type=number]:hover,select:hover,textarea:hover{border-color:#6f7787;}
  input[type=text]:focus,input[type=password]:focus,input[type=number]:focus,select:focus,textarea:focus{border-color:var(--primary); box-shadow:var(--ring);}
  ::placeholder{color:#6e7688; opacity:1;}
  input[type=file]{border-style:dashed; background:var(--surface-soft); cursor:pointer; color:var(--muted); font-size:.9rem;}
  input[type=file]:focus-visible{outline:var(--focus); outline-offset:2px;}
  input[type=file]::file-selector-button{border:none; background:#e4e7ed; color:var(--ink); font-family:inherit; font-size:.85rem; font-weight:600; padding:8px 12px; min-height:32px; border-radius:7px; margin-right:10px; cursor:pointer;}
  input[type=checkbox]{accent-color:var(--primary); width:18px; height:18px; vertical-align:-4px; margin-right:6px;}
  input[type=checkbox]:focus-visible{outline:var(--focus); outline-offset:2px;}
  code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:.85em; background:#f1f2f5; padding:2px 6px; border-radius:5px; color:#3f4654;}
  textarea{min-height:120px; resize:vertical;}
  .btn{
    display:inline-flex; align-items:center; justify-content:center; gap:8px; border:none; border-radius:12px;
    padding:10px 16px; font-size:16px; font-weight:600; cursor:pointer; background:var(--primary); color:#fff;
    min-height:var(--tap); min-width:var(--tap); font-family:inherit; touch-action:manipulation;
    letter-spacing:-.005em; line-height:1.2; box-shadow:var(--shadow-sm);
    transition:background .15s ease, box-shadow .15s ease, opacity .15s ease, transform .1s ease;
  }
  .btn:hover{background:var(--primary-dark);}
  .btn:active{transform:scale(.97);}
  .btn:focus-visible{outline:var(--focus); outline-offset:2px;}
  .btn.sec{background:#fff; color:var(--ink); box-shadow:inset 0 0 0 1px var(--field), var(--shadow-sm);}
  .btn.sec:hover{background:#f6f7f9; color:var(--ink);}
  .btn.danger{background:#fff; color:var(--bad); box-shadow:inset 0 0 0 1px #e3a7a0;}
  .btn.danger:hover{background:#fef3f2;}
  .btn.ok{background:var(--ok);}
  .btn.small{padding:8px 12px; font-size:.82rem; border-radius:7px; min-height:var(--tap);}
  .btn:disabled{opacity:.5; cursor:not-allowed; transform:none;}
  .btn.block{width:100%;}
  .row{display:flex; gap:10px; flex-wrap:wrap; align-items:center;}
  .pill{display:inline-flex; align-items:center; padding:3px 9px; border-radius:99px; font-size:.76rem; font-weight:600; line-height:1.5;}
  .pill.ok{background:#e8f6ec; color:var(--ok);}
  .pill.bad{background:#fdeceb; color:var(--bad);}
  .pill.warn{background:#fdf4d9; color:var(--warn);}
  .pill.neutral{background:#eef0f3; color:var(--muted);}
  table{width:100%; border-collapse:collapse; font-size:.86rem;}
  th,td{padding:10px 12px; border-bottom:1px solid var(--line); text-align:left; vertical-align:middle;}
  th{font-size:.73rem; text-transform:uppercase; letter-spacing:.05em; font-weight:700; color:var(--muted); border-bottom:1px solid #d7dbe3; background:var(--surface-soft);}
  tbody tr{transition:background .12s ease;}
  tbody tr:hover{background:var(--surface-soft);}
  tbody tr:last-child td{border-bottom:none;}
  .tabla-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch;}
  .key-row{display:flex; align-items:center; gap:4px; padding:0; border-bottom:1px solid var(--line); flex-wrap:wrap;}

  .alt-btns{display:flex; gap:2px; flex-shrink:0;}
  .alt-btns button{
    width:var(--tap); height:var(--tap); border-radius:50%; border:2px solid var(--line);
    background:#fff; font-weight:700; cursor:pointer; color:var(--muted); font-size:.95rem;
    touch-action:manipulation; flex-shrink:0;
  }
  .alt-btns button.sel{background:var(--primary); border-color:var(--primary); color:#fff;}
  /* El número de la pregunta ES el botón que despliega sus campos. Antes eran dos
     cosas —un número de 20 px y un botón de 44— y juntas no cabían en una pantalla
     de 320 px: la fila se partía en dos y el clavijero volvía a diez pantallas.
     Fundidos ocupan lo que ocupaba el botón solo. 44x44 como todo lo pulsable. */
  .key-toggle{
    width:var(--tap); height:var(--tap); border-radius:8px; border:1px solid var(--line);
    background:var(--surface-soft); cursor:pointer; color:var(--muted);
    display:inline-flex; flex-direction:column; align-items:center; justify-content:center;
    gap:1px; padding:0; line-height:1; font-family:inherit;
    touch-action:manipulation; transition:background .15s, border-color .15s; flex-shrink:0;
  }
  .key-toggle .kt-n{font-size:.84rem; font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums;}
  .key-toggle .kt-p{font-size:.72rem; letter-spacing:.06em; color:var(--muted);}
  .key-toggle.active .kt-n, .key-toggle.active .kt-p{color:var(--primary-dark);}
  .key-toggle:hover{background:#e2e8f0; color:var(--ink);}
  .key-toggle.active{background:var(--primary-soft); border-color:var(--primary); color:var(--primary-dark);}
  .key-fields{
    flex:1 1 100%; width:100%; display:flex; align-items:center; gap:8px; flex-wrap:wrap;
    padding:8px 0 6px; border-top:1px dashed var(--line); margin-top:2px;
  }
  .key-fields.hidden{display:none !important;}
  .skill-input{flex:1; min-width:140px;}
  .skill-input input{padding:8px 10px; font-size:16px;}
  .muted{color:var(--muted); font-size:.85rem;}
  .result-card{border-left:5px solid var(--ok);}
  .result-card.has-errors{border-left-color:var(--bad);}
  .wrong-item{display:flex; gap:8px; align-items:baseline; padding:5px 0; border-bottom:1px dashed var(--line); font-size:.88rem; flex-wrap:wrap;}
  .wrong-item b{color:var(--bad);}
  .bar-wrap{background:#eef2f8; border-radius:6px; height:14px; flex:1; min-width:80px; overflow:hidden;}
  .bar{height:100%; border-radius:6px; transition:width .25s ease;}
  .qstat{display:flex; align-items:center; gap:10px; padding:4px 0; font-size:.85rem;}
  .qstat .qn{width:36px; font-weight:700;}
  .qstat .pct{width:48px; text-align:right; font-weight:600;}
  .spinner{display:inline-block; width:16px; height:16px; border:2px solid rgba(255,255,255,.4); border-top-color:#fff; border-radius:50%; animation:spin .7s linear infinite; vertical-align:middle;}
  .spinner.dark{border-color:#cbd5e1; border-top-color:var(--primary);}
  @keyframes spin{to{transform:rotate(360deg);}}
  .ai-report{white-space:pre-wrap; line-height:1.55; font-size:.92rem; background:#f8fafc; border:1px solid var(--line); border-radius:10px; padding:16px; margin-top:10px;}
  .paes-setup{background:#f0f4ff; border:1.5px solid #c7d2fe; border-radius:12px; padding:14px; margin-top:14px;}
  .modulo-chip{display:inline-block; padding:2px 8px; border-radius:20px; font-size:.75rem; font-weight:700;}
  .m-bio{background:#dcfce7; color:#166534;}
  .m-quim{background:#fef9c3; color:#854d0e;}
  .m-fis{background:#dbeafe; color:#1e3a8a;}
  .m-elec{background:#fce7f3; color:#9d174d;}
  .paes-section{border-top:2px solid #c7d2fe; margin-top:18px; padding-top:14px;}
  .paes-module-bar{display:flex; align-items:center; gap:10px; padding:5px 0; font-size:.88rem;}
  .paes-module-bar .mod-name{width:180px; font-weight:600;}
  .paes-module-bar .pct{width:48px; text-align:right; font-weight:700;}
  /* Eje y habilidad comparten línea en vez de ocupar una entera cada uno:
     con 45 preguntas eso ahorra unos 4.000 px de scroll. */
  .f-eje, .f-hpae{font-size:16px; padding:6px; min-width:0; flex:1 1 calc(50% - 5px); width:auto;}
  @media(max-width:360px){ .f-eje, .f-hpae{flex:1 1 100%;} }
  .thumb{width:64px; height:64px; object-fit:cover; border-radius:8px; border:1px solid var(--line);}
  .hidden{display:none !important;}
  .grid2{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
  .notice{background:#eff6ff; border:1px solid #bfdbfe; color:#1e40af; border-radius:10px; padding:12px 14px; font-size:.86rem; line-height:1.45; margin-bottom:14px;}
  /* En móvil se aprieta el ESPACIADO del editor, nunca el tamaño de la letra:
     encogerla dejaba las etiquetas y las ayudas bajo 0,8 rem, que es justo el
     umbral que la app se fija para el texto que el docente tiene que leer. */
  @media(max-width:620px){
    .grid2{grid-template-columns:1fr;}
    .paes-module-bar .mod-name{width:120px;}
    #testEditor{padding:12px 10px;}
    /* Por debajo de 360 px la fila (276 px) no entra en el ancho que deja la
       tarjeta. El editor se sale unos píxeles del margen de `main` —solo él, solo
       aquí— y entonces sí cabe en una línea. */
    @media(max-width:360px){
      #testEditor{padding-left:6px; padding-right:6px; margin-left:-8px; margin-right:-8px;}
    }
    #testEditor h2{margin-bottom:8px;}
    #testEditor label{margin:8px 0 3px;}
    #testEditor p.muted{margin:2px 0;}
    #testEditor .grid2{gap:6px;}
    #testEditor .row{margin-top:8px;}
    #testEditor .paes-setup{padding:10px 12px; margin-top:8px;}
    #testEditor #keyRows{margin-top:8px;}
  }
  .notice.warn{background:#fffbeb; border-color:#fde68a; color:#92400e;}
  .notice.bad{background:#fef2f2; border-color:#fecaca; color:#991b1b;}
  .notice.ok{background:#f0fdf4; border-color:#bbf7d0; color:#166534;}
  .answers-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(58px,1fr)); gap:5px; margin-top:8px;}
  .ans-chip{
    font-size:.8rem; text-align:center; border-radius:8px; padding:4px 2px; font-weight:700;
    min-height:var(--tap); display:flex; align-items:center; justify-content:center;
  }
  .ans-chip.c{background:#dcfce7; color:var(--ok);}
  .ans-chip.w{background:#fee2e2; color:var(--bad);}
  .ans-chip.b{background:#fef3c7; color:var(--warn);}
  .ans-chip.x{background:#ffedd5; color:#c2410c;}
  .chip-edit{cursor:pointer; border:1.5px solid transparent; user-select:none; -webkit-user-select:none; touch-action:manipulation;}
  .chip-edit:active{transform:scale(.93);}

  /* ============ TOASTS ============ */
  #toastRoot{
    position:fixed; left:0; right:0; bottom:calc(78px + var(--sab));
    display:flex; flex-direction:column; align-items:center; gap:8px;
    z-index:9600; pointer-events:none; padding:0 14px;
  }
  .toast{
    background:#111827; color:#fff; border-radius:12px; padding:12px 16px; font-size:.9rem;
    box-shadow:0 8px 30px rgba(0,0,0,.28); max-width:min(520px,94vw); line-height:1.4;
    animation:toastIn .18s ease-out; pointer-events:auto;
  }
  .toast.ok{background:#166534;} .toast.bad{background:#991b1b;} .toast.warn{background:#92400e;}
  @keyframes toastIn{from{opacity:0; transform:translateY(12px);} to{opacity:1; transform:none;}}

  /* ============ HOJAS MODALES ============ */
  .sheet-back{
    position:fixed; inset:0; background:rgba(15,23,42,.55); z-index:9500;
    display:flex; align-items:flex-end; justify-content:center;
    animation:fadeIn .15s ease-out; padding:0;
  }
  @keyframes fadeIn{from{opacity:0;} to{opacity:1;}}
  .sheet{
    background:#fff; width:100%; max-width:560px; border-radius:18px 18px 0 0;
    padding:20px 20px calc(20px + var(--sab));
    max-height:88vh; overflow:auto; animation:sheetUp .22s cubic-bezier(.2,.8,.3,1);
    box-shadow:0 -8px 40px rgba(0,0,0,.28);
  }
  @media(min-width:600px){
    .sheet-back{align-items:center;}
    .sheet{border-radius:18px; max-height:84vh;}
  }
  @keyframes sheetUp{from{transform:translateY(30px); opacity:.6;} to{transform:none; opacity:1;}}
  .sheet h3{font-size:1.06rem; margin-bottom:8px;}
  .sheet p{font-size:.94rem; line-height:1.5; color:#374151;}
  .sheet .acciones{display:flex; flex-direction:column; gap:8px; margin-top:18px;}
  .sheet .acciones .btn{width:100%;}

  /* ============ BARRAS DE ESTADO (offline / actualización) ============ */
  .barra-aviso{
    position:fixed; left:0; right:0; z-index:9400;
    padding:10px calc(14px + var(--sar)) 10px calc(14px + var(--sal));
    font-size:.85rem; font-weight:600; display:flex; align-items:center; justify-content:center; gap:10px;
    flex-wrap:wrap; text-align:center;
  }
  #offlineBar{bottom:calc(64px + var(--sab)); background:#92400e; color:#fff;}
  #updateBar{bottom:calc(64px + var(--sab)); background:#1e3a8a; color:#fff;}
  .barra-aviso .btn{padding:6px 12px; min-height:36px; font-size:.82rem;}

  /* ============ CÁMARA ============ */
  #camWrap{position:fixed; inset:0; background:#000; z-index:9700; display:flex; flex-direction:column;}
  #camVideo{flex:1; width:100%; height:100%; object-fit:cover; background:#000;}
  #camStage{position:relative; flex:1; overflow:hidden; background:#000;}
  #camGuia{position:absolute; inset:0; pointer-events:none;}
  #camGuia .marco{
    position:absolute; border:2.5px dashed rgba(255,255,255,.9); border-radius:8px;
    box-shadow:0 0 0 4000px rgba(0,0,0,.32);
  }
  #camAyuda{
    position:absolute; left:0; right:0; top:calc(10px + var(--sat)); text-align:center; color:#fff;
    font-size:.85rem; padding:0 16px; text-shadow:0 1px 4px rgba(0,0,0,.8); pointer-events:none;
  }
  #camBarra{
    background:#0b0f19; color:#fff; padding:12px calc(14px + var(--sar)) calc(12px + var(--sab)) calc(14px + var(--sal));
    display:flex; align-items:center; justify-content:space-between; gap:12px;
  }
  #camTop{
    position:absolute; top:calc(6px + var(--sat)); right:calc(8px + var(--sar)); display:flex; gap:8px; z-index:3;
  }
  .cam-btn{
    background:rgba(17,24,39,.72); color:#fff; border:none; border-radius:12px;
    min-width:var(--tap); min-height:var(--tap); padding:8px 12px; font-size:.9rem; font-weight:600; cursor:pointer;
  }
  /* Etiqueta, NO botón: el formato lo define la prueba. Si aquí se pudiera
     cambiar, la guía diría una cosa y la corrección leería otra. */
  .cam-tag{
    display:inline-flex; align-items:center; min-height:var(--tap); padding:8px 12px;
    background:rgba(17,24,39,.72); color:#fff; border-radius:12px;
    font-size:.9rem; font-weight:600;
  }
  #camShot{
    width:74px; height:74px; border-radius:50%; border:5px solid #fff; background:#2563eb;
    cursor:pointer; flex-shrink:0; font-size:1.5rem; color:#fff;
  }
  #camShot:active{transform:scale(.94);}
  #camTira{display:flex; gap:6px; overflow-x:auto; max-width:40vw; -webkit-overflow-scrolling:touch;}
  #camTira img{width:46px; height:46px; object-fit:cover; border-radius:8px; border:2px solid #334155;}
  #camContador{font-size:.85rem; font-weight:700;}

  /* ============ EDITOR DE RECORTE / PLANTILLAS ============ */
  .editor-wrap{position:fixed; inset:0; background:#0b0f19; z-index:9750; display:flex; flex-direction:column;}
  .editor-top{
    background:#111827; color:#fff; display:flex; align-items:center; gap:8px; flex-wrap:wrap;
    padding:calc(10px + var(--sat)) calc(12px + var(--sar)) 10px calc(12px + var(--sal));
  }
  .editor-top .titulo{font-weight:700; font-size:.95rem; flex:1; min-width:100px;}
  .editor-top input[type=text]{background:#1f2937; color:#fff; border-color:#374151; flex:1; min-width:90px; width:auto;}
  .editor-top .btn{padding:10px 12px;}
  .editor-canvas{flex:1; position:relative; overflow:hidden; background:#0b0f19; touch-action:none;}
  .editor-canvas canvas{position:absolute; left:0; top:0;}
  .editor-bottom{
    background:#111827; color:#fff; display:flex; flex-direction:column; gap:8px;
    padding:10px calc(12px + var(--sar)) calc(12px + var(--sab)) calc(12px + var(--sal));
  }
  .editor-bottom .fila{display:flex; gap:8px; align-items:center; flex-wrap:wrap;}
  .editor-bottom .ayuda{font-size:.79rem; color:#cbd5e1; line-height:1.4;}
  .seg{display:flex; gap:6px; overflow-x:auto; -webkit-overflow-scrolling:touch; padding-bottom:2px;}
  .seg button{
    background:#1f2937; color:#cbd5e1; border:1px solid #374151; border-radius:10px;
    padding:8px 12px; font-size:.84rem; font-weight:600; min-height:var(--tap); white-space:nowrap; cursor:pointer;
  }
  .seg button.on{background:var(--primary); color:#fff; border-color:var(--primary);}

  /* ============ BIENVENIDA ============ */
  #welcome{position:fixed; inset:0; background:linear-gradient(160deg,#1e3a8a,#2563eb); z-index:9800; overflow:auto;}
  #welcome .caja{
    max-width:520px; margin:0 auto; color:#fff;
    padding:calc(28px + var(--sat)) calc(22px + var(--sar)) calc(28px + var(--sab)) calc(22px + var(--sal));
  }
  #welcome h2{font-size:1.5rem; margin-bottom:10px;}
  #welcome p{font-size:.94rem; line-height:1.55; opacity:.95; margin-bottom:12px;}
  #welcome .cajita{background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.28); border-radius:14px; padding:16px; margin:16px 0;}
  #welcome input{background:rgba(255,255,255,.95); border:none;}

  /* Lista genérica de ítems (plantillas, pruebas, cursos) */
  /* Nómina numerada: el número a la izquierda, en columna, para poder recorrerla de un
     vistazo y comprobar que el 17 es quien uno cree. */
  .nomina-num{max-height:320px; overflow:auto; border:1px solid var(--line); border-radius:11px;
    margin-top:8px; background:var(--surface-soft); font-size:.86rem;}
  .nomina-num div{display:flex; gap:10px; align-items:center; padding:6px 12px;
    border-bottom:1px solid var(--line);}
  .nomina-num div:last-child{border-bottom:none;}
  .nomina-num span{min-width:2.2em; text-align:right; font-weight:700; color:var(--muted);
    font-variant-numeric:tabular-nums;}
  .nomina-num div.dup{background:#fef3c7;}
  .lista-item{display:flex; justify-content:space-between; gap:10px; align-items:center; flex-wrap:wrap; padding:12px 0; border-bottom:1px solid var(--line);}
  .lista-item .acciones{display:flex; gap:6px; flex-wrap:wrap;}

  @media print{
    nav, footer, .barra-aviso, #toastRoot, .btn{display:none !important;}
    body{padding:0; background:#fff;}
    .card{box-shadow:none; border:none;}
  }

  /* ===================== TRAYECTORIA (análisis longitudinal) ===================== */
  /* Paleta de datos segura para daltonismo (naranja ↔ neutro ↔ azul). No se usa rojo/verde
     para codificar logro: esas variables del tema se reservan para la interfaz (chips, botones).
     Los neutros son los mismos grises fríos del resto de la app (--line / --surface-soft) y el
     azul se acerca a la familia del índigo del tema, para que los gráficos no parezcan de otro
     producto. El eje naranja↔azul (protan/deutan-seguro) se mantiene intacto. */
  :root{
    --tr-low:#c1571b; --tr-mid:#e7e9ee; --tr-high:#24559b; --tr-none:#f2f4f7;
    --tr-lowsoft:#fbeade; --tr-highsoft:#e6edf8;
  }
  .tr-toolbar{display:flex; gap:12px; flex-wrap:wrap; align-items:flex-end;}
  .tr-field{min-width:168px; flex:1 1 168px;}
  .tr-field label{margin:0 0 5px;}
  .tr-field select{font-size:.84rem; padding:7px 10px; min-height:34px;}
  /* Disclosure de opciones secundarias: reduce de 6 a 3 los selectores visibles por defecto */
  /* `.plegable` comparte estas reglas: el mismo gesto en Trayectoria y en el
     editor de pruebas, sin duplicar estilos. */
  .tr-adv, .plegable{border:1px solid var(--line); border-radius:11px; background:var(--surface-soft);
    padding:9px 13px; margin-top:12px;}
  .tr-adv > summary, .plegable > summary{cursor:pointer; font-size:.82rem; font-weight:600; color:var(--muted);
    list-style:none; display:flex; align-items:center; gap:7px; padding:2px 0; min-height:var(--tap);}
  .tr-adv > summary::-webkit-details-marker, .plegable > summary::-webkit-details-marker{display:none;}
  .tr-adv > summary::before, .plegable > summary::before{content:"▸"; font-size:.8em; color:var(--muted); transition:transform .15s ease;}
  .tr-adv[open] > summary::before, .plegable[open] > summary::before{content:"▾";}
  .tr-adv > summary:hover, .plegable > summary:hover{color:var(--ink);}
  .tr-adv > summary:focus-visible, .plegable > summary:focus-visible{outline:var(--focus); outline-offset:3px; border-radius:6px;}
  .caja-ia{border-style:dashed; border-color:#b6c3d8; background:#f8fafc;}
  .caja-ia > summary{font-size:.9rem; color:var(--ink);}
  .tr-adv .tr-msg:last-child{margin-bottom:0;}
  .tr-svgbox{overflow-x:auto; margin-top:6px; border:1px solid var(--line); border-radius:12px; background:var(--card);}
  .tr-svgbox > p{padding:16px 18px; margin:0;}
  .tr-svg{width:100%; min-width:760px; height:auto; display:block;}
  .tr-legend{display:flex; gap:8px 18px; flex-wrap:wrap; font-size:.78rem; color:var(--muted); margin-top:9px; line-height:1.5;}
  .tr-legend span{display:inline-flex; align-items:center; gap:6px;}
  .tr-legend i{display:inline-block; position:relative; width:14px; height:14px; flex:0 0 auto;
    border-radius:4px; border:1px solid rgba(23,26,31,.18);}
  .tr-scale{display:inline-flex; align-items:center; gap:6px; font-size:.78rem; color:var(--muted);}
  .tr-scale b{display:inline-block; width:88px; height:11px; border-radius:99px; border:1px solid rgba(23,26,31,.12);
    background:linear-gradient(90deg, var(--tr-low), var(--tr-mid), var(--tr-high));}
  /* Línea de tiempo (tarjetas) */
  .tr-tl{display:flex; gap:10px; overflow-x:auto; padding:4px 2px 10px;}
  .tr-tl-item{min-width:184px; flex:0 0 auto; border:1px solid var(--line); border-radius:12px;
    padding:11px 13px; background:var(--surface-soft); position:relative;}
  .tr-tl-item .tr-tl-n{font-size:.72rem; font-weight:700; color:var(--muted); letter-spacing:.05em; text-transform:uppercase;}
  .tr-tl-item .tr-tl-name{font-size:.85rem; font-weight:600; margin:3px 0 2px; line-height:1.35;}
  .tr-tl-item .tr-tl-date{font-size:.76rem; color:var(--muted);}
  /* La cifra va SIEMPRE en color de texto legible; el nivel se codifica en el punto de color
     (redundante con la cifra), nunca coloreando el número sobre fondo claro. */
  .tr-tl-item .tr-tl-pct{font-size:1.18rem; font-weight:700; margin-top:6px; color:var(--ink);
    font-variant-numeric:tabular-nums; display:flex; align-items:center; gap:7px;}
  .tr-tl-item .tr-tl-dot{display:inline-block; width:11px; height:11px; border-radius:50%;
    border:1px solid rgba(23,26,31,.22); flex:0 0 auto;}
  .tr-tl-arrow{align-self:center; color:var(--muted); font-size:1.1rem; flex:0 0 auto;}
  /* Mapa de calor */
  .tr-heatwrap{overflow-x:auto; padding-bottom:4px;}
  .tr-heat{display:grid; gap:3px; min-width:560px; font-size:.79rem;}
  .tr-hh{font-size:.74rem; letter-spacing:.02em; color:var(--muted);
    font-weight:700; padding:4px 3px; text-align:center; line-height:1.3;}
  .tr-hr{font-weight:600; padding:7px 10px 7px 0; white-space:nowrap; overflow:hidden;
    text-overflow:ellipsis; font-size:.81rem;}
  .tr-cell{border-radius:7px; padding:9px 4px 11px; text-align:center; font-weight:700;
    font-variant-numeric:tabular-nums; position:relative; line-height:1.25;}
  .tr-cell small{display:block; font-weight:600; font-size:.72rem; opacity:.85;}
  /* Señalización de baja evidencia (§2.6). Antes se usaba opacity sobre toda la celda, lo que
     rebajaba también el contraste del texto por debajo de AA; ahora es una franja de trama en
     el borde inferior (::after), que no puede ser pisada por el background inline ni afecta al
     texto. La cifra "M=" y el signo "!" siguen siendo la señal no cromática principal. */
  .tr-cell::after, .tr-ev1::after, .tr-ev2::after, .tr-na::after{
    content:""; position:absolute; left:0; right:0; bottom:0; height:0; pointer-events:none;
    border-bottom-left-radius:inherit; border-bottom-right-radius:inherit;}
  .tr-ev2::after{height:5px; background:repeating-linear-gradient(45deg,
    rgba(23,26,31,.55) 0 2px, rgba(255,255,255,.8) 2px 5px);}
  .tr-ev1::after{height:6px; background:repeating-linear-gradient(45deg,
    rgba(23,26,31,.8) 0 3px, rgba(255,255,255,.92) 3px 6px);}
  /* Celda sin evaluación: además del gris, una trama tenue para no depender solo del color */
  .tr-na::after{height:100%; border-radius:inherit; background:repeating-linear-gradient(45deg,
    rgba(23,26,31,.09) 0 4px, transparent 4px 9px);}
  .tr-bang{position:absolute; top:2px; right:4px; font-size:11px; line-height:1; font-weight:800; color:currentColor;}
  .tr-disc{outline:2px dashed var(--warn); outline-offset:-2px;}
  /* Mensajes del motor de reglas — mismos tokens que .notice del resto de la app */
  .tr-msg{border-radius:11px; padding:12px 15px; font-size:.85rem; line-height:1.6;
    margin-bottom:9px; border:1px solid var(--line); background:var(--surface-soft); color:#2b3040;}
  .tr-msg.crit{background:#fdf1e8; border-color:#f0d3bd; color:#7a3d0c;}
  .tr-msg.aten{background:#fdf8e9; border-color:#f2e3ba; color:#7c5806;}
  .tr-msg.pos{background:var(--tr-highsoft); border-color:#cfdcf0; color:#173f6d;}
  .tr-msg.meto{background:var(--primary-soft); border-color:#dcdffa; color:#3b3f7a;}
  .tr-msg .tr-tag{display:inline-block; font-size:.7rem; font-weight:800; letter-spacing:.05em;
    text-transform:uppercase; opacity:.8; margin-right:6px;}
  /* Ficha de eje a reforzar */
  .tr-ref{border:1px solid var(--line); border-radius:12px; padding:12px 14px; margin-bottom:9px; background:var(--card);}
  .tr-ref .tr-ref-h{display:flex; gap:10px; align-items:baseline; flex-wrap:wrap; justify-content:space-between;}
  .tr-ref .tr-ref-n{font-weight:650; font-size:.92rem;}
  .tr-ref .tr-ref-m{font-size:.78rem; color:var(--muted);}
  .tr-ref ul{margin:8px 0 0 18px; font-size:.82rem; color:var(--muted); line-height:1.55;}
  .tr-badge{display:inline-flex; align-items:center; padding:3px 9px; border-radius:99px;
    font-size:.74rem; font-weight:700; letter-spacing:0;}
  .tr-b-crit{background:#f7ded0; color:#8a3d06;}
  .tr-b-ref{background:#fbeade; color:#9a4d13;}
  .tr-b-cons{background:#eef0f3; color:var(--muted);}
  .tr-b-log{background:var(--tr-highsoft); color:#173f6d;}
  /* Pie metodológico permanente */
  .tr-foot{margin-top:24px; border-top:1px solid var(--line); padding-top:12px;
    font-size:.79rem; color:var(--muted); line-height:1.6; max-width:82ch;}
  /* Separación entre los bloques del análisis: la sección es larga y hay que poder escanearla */
  #trAnalysis > h3{margin-top:30px; padding-top:20px; border-top:1px solid var(--line); font-size:.95rem;}
  #trAnalysis > h3:first-of-type{margin-top:20px; padding-top:0; border-top:none;}
  #trAnalysis > h3 + p.muted{margin-top:-2px; max-width:88ch;}
  .tr-pick{max-height:290px; overflow:auto; border:1px solid var(--line); border-radius:11px; padding:6px 10px;}
  .tr-pick-row{display:flex; align-items:center; gap:10px; padding:7px 2px; border-bottom:1px solid var(--line); flex-wrap:wrap;}
  .tr-pick-row:last-child{border-bottom:none;}
  .tr-pick-row .tr-pick-n{flex:1; min-width:150px; font-size:.85rem;}
  .tr-tbl td, .tr-tbl th{padding:7px 9px; font-size:.81rem;}
  .tr-date{padding:9px 12px; min-height:36px; border:1px solid var(--field); border-radius:9px;
    font-size:.9rem; background:#fff; color:var(--ink); font-family:inherit; line-height:1.45; outline:none;}
  .tr-date:focus{border-color:var(--primary); box-shadow:var(--ring);}
  .tr-date:focus-visible{outline:var(--focus); outline-offset:1px;}
  .tr-empty{border:1px dashed var(--field); border-radius:12px; padding:20px 22px;
    background:var(--surface-soft); text-align:left;}
  .tr-empty p{font-size:.86rem; color:var(--muted); line-height:1.6; margin-bottom:12px; max-width:74ch;}
  .tr-empty b{color:var(--ink);}
  @media(max-width:560px){ .tr-field{flex:1 1 100%;} .tr-svg{min-width:640px;} }
  @media print{ .tr-svgbox, .tr-heatwrap, .tr-tl{overflow:visible;} .tr-adv{border:none; background:none;} }


/* Ícono «i»: abre una explicación breve al tocarlo */
.info-i{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;margin-left:6px;
  padding:0;border-radius:50%;border:1.5px solid var(--primary);background:transparent;color:var(--primary);
  font:700 14px/1 Georgia,serif;cursor:pointer;vertical-align:middle}
.info-texto{background:var(--surface-soft);border-radius:10px;padding:10px 12px}


/* ============================================================================
   v1.38.0 — COMPONENTES DEL SISTEMA (interfaz de Antigravity)
   ============================================================================ */
/* Íconos de trazo dentro de botones y títulos */
.btn-icon{width:18px; height:18px; vertical-align:middle; flex-shrink:0;}

/* Efecto tornasol: SÓLO en las acciones de IA (pocos botones) */
.btn-tornasol{
  background:linear-gradient(135deg, #007974 0%, #006560 40%, #007974 80%, #148079 100%);
  background-size:200% 200%; color:#fff !important; border:none;
  animation:tornasol-shift 8s ease-in-out infinite; box-shadow:0 4px 14px rgba(0,121,116,.25);
}
.btn-tornasol:hover{opacity:.95; box-shadow:0 6px 20px rgba(0,148,142,.35);}
.icon-tornasol{
  background:linear-gradient(135deg, #007974 0%, #006560 40%, #007974 80%, #148079 100%);
  background-size:200% 200%; -webkit-mask-size:contain; -webkit-mask-repeat:no-repeat; mask-size:contain; mask-repeat:no-repeat;
  width:24px; height:24px; display:inline-block; vertical-align:middle; margin-top:-2px;
  animation:tornasol-shift 8s ease-in-out infinite;
}
@keyframes tornasol-shift{ 0%{background-position:0% 50%;} 50%{background-position:100% 50%;} 100%{background-position:0% 50%;} }
/* Sin animaciones para quien las desactivó en el teléfono (también el ícono, que Antigravity no cubría) */
@media (prefers-reduced-motion: reduce){
  .btn-tornasol, .icon-tornasol{animation:none; background-size:auto;}
}

/* Tarjeta de flujo con pasos numerados (Escanear, Resultados, Cursos) */
.card-flujo{background:var(--card); border:1px solid var(--line); border-radius:var(--radio); padding:20px; margin-bottom:20px; box-shadow:0 4px 12px rgba(0,0,0,.03);}
/* Estas clases las usaba la maqueta de Antigravity sin definirlas: se definen aquí con el mismo sistema */
.flujo-step{display:flex; gap:12px; align-items:flex-start; padding:12px 0;}
.flujo-step + .flujo-step{border-top:1px solid var(--line);}
.step-num{flex:0 0 28px; width:28px; height:28px; border-radius:50%; background:var(--color-marca-suave); color:var(--color-accion);
  display:inline-flex; align-items:center; justify-content:center; font-size:14px; font-weight:700; margin-top:2px;}
.step-content{flex:1 1 auto; min-width:0;}
.step-content > h3:first-child, .step-content > label:first-child{margin-top:2px;}
.step-content h3{font-size:1rem; font-weight:600; margin:0 0 8px;}
details.opciones-hoja{border:1px solid var(--line); border-radius:12px; margin:8px 0; background:var(--surface-soft);}
details.opciones-hoja > summary{padding:12px 16px; min-height:var(--tap); display:flex; align-items:center; cursor:pointer; font-weight:600; color:var(--ink); list-style:none;}
details.opciones-hoja > summary::-webkit-details-marker{display:none;}
details.opciones-hoja > summary::after{content:"▾"; margin-left:auto; padding-left:8px; color:var(--muted); transition:transform .15s ease;}
details.opciones-hoja[open] > summary::after{transform:rotate(180deg);}
.details-content{padding:0 16px 16px;}

/* Campos con el estilo nuevo */
.input-moderno, .select-moderno{
  width:100%; padding:12px 14px; border:1px solid var(--field); border-radius:10px; font-size:1rem;
  background:#fdfdfc; color:var(--ink); transition:border-color .2s, box-shadow .2s; margin-bottom:12px; min-height:var(--tap);
}
.input-moderno:focus, .select-moderno:focus{outline:none; border-color:var(--teal); box-shadow:0 0 0 3px rgba(0,148,142,.15);}

/* ============================================================================
   v1.38.0 — BARRA INFERIOR DE NAVEGACIÓN (sólo estilo, sobre las pestañas de siempre)
   Bloque aparte a propósito: en la v1.39.0 se reemplaza por la barra de 5 pestañas con
   «Inicio». Para volver a la barra de arriba basta con borrar este bloque y restaurar el
   de la v1.37.5.
   ============================================================================ */
nav{
  display:flex; justify-content:space-around; gap:2px;
  background:rgba(255,255,255,.95);
  backdrop-filter:saturate(180%) blur(10px); -webkit-backdrop-filter:saturate(180%) blur(10px);
  border-top:1px solid var(--line);
  padding:6px calc(6px + var(--sar)) calc(6px + var(--sab)) calc(6px + var(--sal));
  position:fixed; bottom:0; left:0; right:0; z-index:100;
}
nav button{
  border:none; background:transparent; padding:4px 2px; border-radius:10px;
  font-size:.68rem; font-weight:500; color:var(--muted); cursor:pointer; white-space:nowrap; letter-spacing:-.015em;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  min-height:48px; min-width:48px; flex:1 1 auto; transition:color .15s ease, background .15s ease; font-family:inherit;
}
nav button svg{width:24px; height:24px; stroke:currentColor; fill:none; flex:0 0 auto;}
nav button:hover{background:#f2f3f6; color:var(--ink);}
nav button.active{background:var(--color-marca-suave); color:var(--teal); font-weight:600;}
nav button:focus-visible{outline:var(--focus); outline-offset:-2px;}
@media print{ nav{display:none;} }

/* ============================================================================
   v1.38.0 — NUEVA PRUEBA (paso 1 datos · paso 2 formato y pauta)
   ============================================================================ */
.nf-editor{background:transparent; box-shadow:none; padding:16px 0;}
.nf-h2{text-align:center; margin-bottom:20px; font-size:22px;}
.nf-paso{padding:16px; background:var(--color-superficie); border:1px solid var(--color-borde); border-radius:var(--radio); margin-bottom:16px;}
.nf-titulo{font-size:18px; font-weight:600; margin-bottom:8px; display:flex; align-items:center; gap:12px;}
.nf-paso input[type=text], .nf-paso input[type=number], .nf-paso select{min-height:48px; border-radius:12px;}
.nf-ayuda{margin-top:4px; font-size:14px;}
.nf-check{display:flex !important; align-items:center; gap:8px; cursor:pointer; min-height:48px; margin-top:8px;}
.nf-check input{width:24px; height:24px; flex:0 0 auto; margin:0;}
.nf-check span{font-weight:600; color:var(--ink);}
.nf-caja{border:1px dashed var(--field); border-radius:10px; padding:14px; margin-top:10px; background:var(--surface-soft);}
.nf-sec{border:1px solid var(--color-borde);}
.nf-acciones{display:flex; flex-direction:column; gap:8px; margin-top:16px;}
.nf-cancelar{background:transparent; border:none; box-shadow:none;}
.caja-ia > summary{color:var(--color-accion);}

/* ============================================================================
   v1.38.0 — ESCANEAR (pasos 1 a 4)
   ============================================================================ */
.linea-corrigiendo{margin:-4px 0 0; font-size:.95rem; padding:8px 12px; border-radius:10px; background:var(--color-marca-suave); color:var(--ink);}
.btn-grande{min-height:56px; font-size:16px;}
.captura-botones{display:flex; flex-direction:column; gap:12px;}
.cola-botones{display:flex; flex-wrap:wrap; gap:8px; margin-top:16px;}
.cola-botones > .btn{flex:1 1 calc(50% - 4px);}
.cola-botones > #btnScan, .cola-botones > #btnCancelScan{flex:1 1 100%;}

/* ============================================================================
   v1.38.0 — RESULTADOS (secciones plegables; abiertas al imprimir)
   ============================================================================ */
details.resultados-seccion{background:#fff; border:1px solid var(--line); border-radius:12px; margin-top:16px; overflow:hidden;}
details.resultados-seccion > summary{padding:12px 16px; min-height:var(--tap); font-weight:600; cursor:pointer; list-style:none;
  display:flex; align-items:center; gap:8px; background:#f8fafc;}
details.resultados-seccion > summary::-webkit-details-marker{display:none;}
details.resultados-seccion > summary h3{margin:0; font-size:1rem;}
details.resultados-seccion > summary::after{content:"▾"; margin-left:auto; color:var(--muted); transition:transform .2s;}
details.resultados-seccion[open] > summary::after{transform:rotate(180deg);}
details.resultados-seccion > div{padding:16px; border-top:1px solid var(--line);}
.res-fila-acciones{display:flex; gap:4px;}
/* Acciones de cada fila (secundarias): 40 px para que las tres quepan a 360 px sin desplazar la tabla */
.res-fila-acciones .btn{min-width:40px; min-height:40px; padding:6px;}
.res-acciones{display:flex; flex-direction:column; gap:8px; margin-top:24px;}
@media print{
  details.resultados-seccion{border:none; margin-top:0;}
  details.resultados-seccion > summary{background:none; padding:0; min-height:0;}
  details.resultados-seccion > summary::after{content:none;}
  details.resultados-seccion > div{padding:0; border:none;}
  .res-acciones{display:none;}
}

/* Impresión: la cabecera de la 1.37.5 y ningún ícono de la interfaz */
.cabecera-impresion{display:none;}
@media print{
  header{display:block; padding:20px 24px 18px; border-bottom:1px solid var(--line);}
  header .logo, header > h1{display:none !important;}
  .cabecera-impresion{display:block;}
  .cabecera-impresion .ci-titulo{font-size:1.32rem; font-weight:650; letter-spacing:-.025em; color:var(--ink); line-height:1.3;}
  .cabecera-impresion p{font-size:.85rem; color:var(--muted); margin-top:4px; max-width:70ch;}
  svg.btn-icon{display:none !important;}
}

.titulo-con-icono{display:flex; align-items:center; gap:12px; margin-bottom:12px;}
.titulo-con-icono h2{margin:0;}
.titulo-con-icono .btn-icon{width:28px; height:28px; color:var(--teal);}
@media print{ .step-num{display:none;} .flujo-step{padding:0; border:none;} .card-flujo{border:none; padding:0;} }
/* Barras de logro en pantallas angostas: la píldora «evidencia insuficiente» y la lista de preguntas
   bajan a la línea siguiente en vez de empujar la página hacia el lado (desbordaba ya en la 1.37.5) */
@media (max-width:560px){
  .qstat{flex-wrap:wrap; row-gap:4px;}
  .qstat > span[style*="min-width:150px"]{flex:1 1 100%; min-width:0 !important;}
  .qstat .muted{white-space:normal; overflow-wrap:anywhere;}
}
/* Tabla de estudiantes en pantallas angostas: celdas más justas para que las acciones se vean sin
   desplazar la tabla hacia el lado (en la 1.37.5 ya se desplazaba: 432 px de contenido en 286 visibles) */
@media (max-width:560px){
  #tab-report .card-flujo{padding:14px;}
  #reportBody .tabla-scroll th, #reportBody .tabla-scroll td{padding-left:4px; padding-right:4px;}
  #reportBody .tabla-scroll th{font-size:.66rem; letter-spacing:.02em;}
  #reportBody .tabla-scroll td:first-child{overflow-wrap:anywhere;}
  #reportBody .res-fila-acciones{gap:2px;}
  #reportBody .res-fila-acciones .btn{min-width:42px; min-height:44px; padding:4px;}
}

/* Respaldo para imprimir: si el navegador no dispara «beforeprint», el contenido de los plegables igual sale */
@media print{ details.resultados-seccion::details-content{content-visibility:visible;} }

/* El título de la tabla de estudiantes en papel conserva el texto de siempre; en pantalla ya no existe el botón 🔍 */
.solo-papel{display:none;}
@media print{ .solo-pantalla{display:none;} .solo-papel{display:inline;} }

/* v1.38.0 (parte 2) — íconos de la familia: tamaño en la barra de navegación (el .btn-icon general es de 18 px) */
nav button svg.btn-icon{width:24px; height:24px;}
/* Íconos dentro de textos y avisos: alineados con la línea de texto */
.notice .btn-icon, .muted .btn-icon, summary .btn-icon, h3 .btn-icon{margin-right:2px;}

/* v1.38.0 (parte 2) — Cursos */
.cursos-cab{display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:8px;}
.cursos-cab .titulo-con-icono{margin-bottom:0;}
#courseList .lista-item{border:1px solid var(--line); border-radius:12px; padding:12px 14px; margin-top:10px; background:var(--card);}
#tab-courses .btn.small{min-height:44px;}