/* Firma documental · mismos tokens que la demo y el CAU (Brand Kit BiG) */
:root{
  --navy:#002B4A; --blue:#017BC4; --bluegray:#96BAD0;
  --bg:#F5F8FB; --surface:#FFFFFF; --ink:#1A2535; --muted:#56677a; --line:#dbe4ec;
  --soft:#e8f1f8; --ok:#1f8a4c; --okbg:#e3f4ea; --warn:#a86400; --warnbg:#fdf0dc; --bad:#b3261e; --badbg:#fbe5e3;
  --firma:#6b3fa0; --firmabg:rgba(107,63,160,.14);
  --fh:'Barlow Condensed','Arial Narrow',Arial,sans-serif; --fb:'Nunito','Segoe UI',Arial,sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0c1824; --surface:#132433; --ink:#e6eef5; --muted:#9db1c3; --line:#24394c; --soft:#16324a;
    --ok:#5fd18f; --okbg:#143826; --warn:#f3b45a; --warnbg:#3a2a12; --bad:#ff8a80; --badbg:#3d1a18;
    --blue:#3fa3e6; --firma:#c9a3f5; --firmabg:rgba(201,163,245,.18); color-scheme:dark;
  }
}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;min-height:100vh;background:var(--bg);color:var(--ink);font-family:var(--fb);font-size:15px;line-height:1.5}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
h1,h2,h3{font-family:var(--fh);font-weight:800;line-height:1.05;margin:0}
a{color:var(--blue)}
[hidden]{display:none!important}

/* ── cabecera ─────────────────────────────────────────────── */
.top{position:sticky;top:0;z-index:30;background:var(--navy);color:#fff;display:flex;align-items:center;gap:16px;padding:8px 20px}
.top img{height:36px;width:auto;display:block}
.top .tt{font-family:var(--fh);font-weight:700;font-size:1.25rem;letter-spacing:.4px;margin-right:auto}
.top .tt small{display:block;font-family:var(--fb);font-weight:400;font-size:.76rem;color:var(--bluegray);letter-spacing:0}
.quien{font-size:.85rem;color:#cfe0ec;text-align:right}
.quien b{color:#fff;display:block}

main{padding:24px clamp(16px,3vw,40px) 60px;max-width:1200px;margin:0 auto}
main:focus{outline:none}
main.ancho{max-width:none}
.cargando{color:var(--muted)}

.cab{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:18px;flex-wrap:wrap}
.cab h2{font-size:clamp(1.8rem,3vw,2.4rem)}
.cab p{margin:6px 0 0;color:var(--muted);max-width:64ch}
.acciones{display:flex;gap:8px;flex-wrap:wrap;align-items:center}

/* ── botones y formularios ────────────────────────────────── */
.btn{border:1px solid var(--line);background:var(--surface);padding:8px 15px;border-radius:8px;cursor:pointer;font-weight:700;font-size:.9rem;text-decoration:none;color:var(--ink);display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.btn:hover{border-color:var(--blue)}
.btn.pri{background:var(--blue);border-color:var(--blue);color:#fff}
.btn.pri:hover{filter:brightness(1.08)}
.btn.peligro{color:var(--bad)}
.btn.peligro:hover{border-color:var(--bad)}
.btn.sm{padding:4px 10px;font-size:.82rem}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn.fantasma{background:transparent;border-color:transparent}
.btn.fantasma:hover{border-color:var(--line)}

label.f{display:block;font-weight:700;font-size:.84rem;margin:14px 0 5px}
label.f small{font-weight:400;color:var(--muted)}
.in{width:100%;border:1px solid var(--line);background:var(--surface);border-radius:8px;padding:8px 10px}
.in:focus{border-color:var(--blue)}
textarea.in{min-height:70px;resize:vertical}
.check{display:flex;gap:9px;align-items:flex-start;margin:7px 0;font-size:.9rem;cursor:pointer}
.check input{margin-top:4px;flex:none}
.check small{display:block;color:var(--muted);font-size:.8rem}
.meta{color:var(--muted);font-size:.82rem}

.panel{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:18px}

/* ── chips de estado ──────────────────────────────────────── */
.st{display:inline-block;border-radius:999px;padding:2px 10px;font-size:.76rem;font-weight:800;white-space:nowrap}
.st-publicada{background:var(--okbg);color:var(--ok)}
.st-borrador{background:var(--warnbg);color:var(--warn)}
.st-retirada{background:var(--soft);color:var(--muted)}

/* ── lista de plantillas ─────────────────────────────────── */
.filtros{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px;align-items:center}
.filtros .in{width:auto;min-width:220px}
.pestanas{display:flex;background:var(--soft);border-radius:999px;padding:3px}
.pestanas button{border:0;background:transparent;padding:6px 14px;border-radius:999px;cursor:pointer;font-weight:700;font-size:.86rem;color:var(--muted)}
.pestanas button[aria-pressed="true"]{background:var(--surface);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.08)}
table.lista{width:100%;border-collapse:collapse;background:var(--surface);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.lista th{text-align:left;font-size:.78rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);padding:10px 14px;border-bottom:1px solid var(--line);background:var(--soft)}
.lista td{padding:11px 14px;border-bottom:1px solid var(--line);vertical-align:middle}
.lista tr:last-child td{border-bottom:0}
.lista td.nom b{display:block}
.lista td.acc{text-align:right}
.lista td.acc .acciones{justify-content:flex-end}
.vacio{padding:40px;text-align:center;color:var(--muted)}

/* ── subida ───────────────────────────────────────────────── */
.zona{border:2px dashed var(--line);border-radius:12px;padding:28px;text-align:center;cursor:pointer;background:var(--bg);transition:border-color .15s,background .15s}
.zona:hover,.zona.encima{border-color:var(--blue);background:var(--soft)}
.zona b{display:block;font-size:1.05rem}
.zona .elegido{margin-top:8px;color:var(--ok);font-weight:700}
.progreso{display:flex;gap:10px;align-items:center;margin-top:14px;color:var(--muted)}
.girando{width:18px;height:18px;border:3px solid var(--line);border-top-color:var(--blue);border-radius:50%;animation:gira .8s linear infinite;flex:none}
@keyframes gira{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){.girando{animation-duration:3s}}

.error{background:var(--badbg);color:var(--bad);border-radius:8px;padding:10px 12px;margin-top:12px;font-size:.9rem}
.error ul,.pendiente ul{margin:4px 0 0;padding-left:18px}
.nota{background:var(--warnbg);color:var(--warn);border-radius:8px;padding:10px 12px;margin:12px 0;font-size:.88rem}
.nota.info{background:var(--soft);color:var(--ink)}

/* ── editor ───────────────────────────────────────────────── */
.editor{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:18px;align-items:start}
.lienzo{min-width:0}
.paleta{position:sticky;top:52px;z-index:20;display:flex;gap:6px;flex-wrap:wrap;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:8px;margin-bottom:12px}
.paleta .grupo{display:flex;gap:4px;flex-wrap:wrap}
.paleta button[aria-pressed]{border:1px solid var(--line);background:var(--surface);border-radius:7px;padding:5px 10px;cursor:pointer;font-weight:700;font-size:.84rem}
.paleta button[aria-pressed="true"]{background:var(--blue);border-color:var(--blue);color:#fff}
.paleta .zoom{margin-left:auto;display:flex;gap:4px;align-items:center}
.paleta .ayuda{flex-basis:100%;font-size:.8rem;color:var(--muted);margin:2px 2px 0}
.hojas{overflow:auto;max-height:calc(100vh - 150px);padding:4px;border-radius:10px}
.hojas-int{margin:0 auto;display:flex;flex-direction:column;gap:18px}
.hoja{position:relative;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.18);user-select:none;touch-action:none}
.hoja img{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
.hoja .num{position:absolute;right:6px;bottom:-16px;font-size:.72rem;color:var(--muted)}
.hoja.colocando{cursor:crosshair}
.campo{position:absolute;border:2px solid var(--blue);background:rgba(1,123,196,.12);color:#00365a;font-size:11px;line-height:1.1;padding:1px 3px;cursor:move;border-radius:2px}
/* El recorte va en el rotulo y no en .campo: las esquinas sobresalen del
   recuadro y, recortadas, el clic lo recibia el campo (movia en vez de
   redimensionar). */
.campo .rotulo{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;pointer-events:none}
.campo.firma{border-color:var(--firma);background:var(--firmabg);color:#3d2063}
.campo.adjunto{border-style:dashed}
.campo.precarga{background:rgba(31,138,76,.13);border-color:var(--ok);color:#0e4a28}
.campo.sel{outline:3px solid #f5c842;outline-offset:1px;z-index:5}
.campo.fuera{border-color:var(--bad);background:var(--badbg)}
.campo .asa{position:absolute;width:12px;height:12px;background:#fff;border:2px solid var(--ink);border-radius:2px}
/* Zona de toque mayor que el cuadrito visible, para el dedo. */
.campo .asa::after{content:"";position:absolute;inset:-8px}
.campo .asa.nw{left:-8px;top:-8px;cursor:nwse-resize}
.campo .asa.ne{right:-8px;top:-8px;cursor:nesw-resize}
.campo .asa.sw{left:-8px;bottom:-8px;cursor:nesw-resize}
.campo .asa.se{right:-8px;bottom:-8px;cursor:nwse-resize}
.dibujo{position:absolute;border:2px dashed var(--blue);background:rgba(1,123,196,.08);pointer-events:none}

.lateral{position:sticky;top:52px;max-height:calc(100vh - 70px);overflow:auto;display:flex;flex-direction:column;gap:12px}
.lateral h3{font-size:1.15rem;margin-bottom:4px}
.lateral .panel{padding:14px}
.lista-campos{list-style:none;margin:6px 0 0;padding:0;font-size:.86rem}
.lista-campos button{width:100%;text-align:left;border:0;background:none;padding:5px 6px;border-radius:6px;cursor:pointer;display:flex;gap:6px;align-items:baseline}
.lista-campos button:hover{background:var(--soft)}
.lista-campos button[aria-current="true"]{background:var(--soft);box-shadow:inset 3px 0 0 var(--blue)}
.lista-campos .t{color:var(--muted);font-size:.76rem;margin-left:auto;white-space:nowrap}
.marcadores{display:flex;flex-wrap:wrap;gap:4px;margin-top:5px}
.marcadores button{border:1px solid var(--line);background:var(--bg);border-radius:999px;padding:1px 8px;font-size:.76rem;cursor:pointer}
.pendiente{background:var(--warnbg);color:var(--warn);border-radius:8px;padding:9px 11px;font-size:.84rem}
.listo{background:var(--okbg);color:var(--ok);border-radius:8px;padding:9px 11px;font-size:.84rem;font-weight:700}
.sucio{color:var(--warn);font-size:.8rem;font-weight:700}
.botonera{display:flex;flex-direction:column;gap:8px}
.botonera .btn{justify-content:center}

/* ── diálogo y avisos ─────────────────────────────────────── */
dialog{border:0;border-radius:14px;padding:22px;max-width:min(520px,calc(100vw - 32px));width:100%;background:var(--surface);color:var(--ink);box-shadow:0 20px 50px rgba(0,0,0,.3)}
dialog::backdrop{background:rgba(0,20,40,.45)}
dialog h3{font-size:1.5rem;margin-bottom:8px}
dialog .pie{display:flex;justify-content:flex-end;gap:8px;margin-top:18px}
.historial{list-style:none;padding:0;margin:8px 0 0;max-height:50vh;overflow:auto}
.historial li{border-top:1px solid var(--line);padding:9px 0}
.historial code{font-size:.72rem;color:var(--muted);word-break:break-all}
.aviso-flotante{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:50;pointer-events:none}
.aviso-flotante div{background:var(--navy);color:#fff;padding:10px 18px;border-radius:999px;font-weight:700;box-shadow:0 6px 20px rgba(0,0,0,.25)}
.aviso-flotante div.mal{background:var(--bad)}

@media (max-width: 900px){
  .editor{grid-template-columns:1fr}
  .lateral,.paleta{position:static;max-height:none}
  .hojas{max-height:none}
  .lista thead{display:none}
  .lista tr{display:grid;grid-template-columns:1fr auto;padding:6px 0;border-bottom:1px solid var(--line)}
  .lista td{border:0;padding:4px 14px}
  .lista td.acc{grid-column:1/-1;text-align:left}
  .lista td.acc .acciones{justify-content:flex-start}
}
.separado{margin-top:16px}

/* ── menú ─────────────────────────────────────────────────── */
.menu{display:flex;gap:2px}
.menu a{color:#cfe0ec;text-decoration:none;font-weight:700;font-size:.9rem;padding:6px 12px;border-radius:999px}
.menu a:hover{background:rgba(255,255,255,.1);color:#fff}
.menu a[aria-current]{background:rgba(255,255,255,.16);color:#fff}

/* ── alumnado ─────────────────────────────────────────────── */
.st-error{background:var(--badbg);color:var(--bad)}
.ficha{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;align-items:start}
.ficha h3,.panel > h3{font-size:1.25rem;margin-bottom:6px}
.ficha .ancho-completo{grid-column:1/-1}
dl.datos{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:8px 0 0}
dl.datos dt{color:var(--muted);font-size:.84rem}
dl.datos dd{margin:0}
.dos{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}
.panel.curso{margin-bottom:14px}
.cab-curso{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.cab-curso h3{font-size:1.35rem}
table.lista.interior{border-radius:8px}
.lista tr.apagada td{opacity:.6}
.fila-csv{display:flex;gap:10px;flex-wrap:wrap;margin:10px 0 4px}
.fila-csv .in{width:auto;flex:1;min-width:220px}
.resumen-csv{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:14px 0 8px}
.tabla-desliza{max-height:55vh;overflow:auto;border-radius:8px}
.lista tr.con-error td{background:var(--badbg)}
.errores-fila{margin:4px 0 0;padding-left:18px;color:var(--bad);font-size:.84rem}
.err-dialogo:empty{display:none}
.resultados{list-style:none;margin:10px 0 0;padding:0;max-height:45vh;overflow:auto}
.resultados li{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 2px;border-top:1px solid var(--line)}
.resultados li:first-child{border-top:0}
@media (max-width: 900px){
  .ficha{grid-template-columns:1fr}
  .menu a{padding:6px 8px}
  .top{flex-wrap:wrap}
}
@media (max-width: 560px){
  .top .tt small{display:none}
  .dos{grid-template-columns:1fr}
  .quien{display:none}
}
/* Guardar y Publicar siempre a la vista, aunque se baje por el lateral. */
.lateral #estado{position:sticky;top:0;z-index:2;box-shadow:0 4px 10px rgba(0,0,0,.06)}
@media (max-width: 900px){.lateral #estado{position:static}}