/* Contenido del taller. La barra lateral es shell.css, copiado tal cual de
   Agrap para que se vea como la app madre. Sin tiras de color a la izquierda,
   sin degradados: el color solo aparece cuando significa algo (método,
   estado, rol). */
@font-face{font-family:Outfit;font-weight:400;src:url(/static/fuentes/outfit-400.woff2) format("woff2")}
@font-face{font-family:Outfit;font-weight:500;src:url(/static/fuentes/outfit-500.woff2) format("woff2")}
@font-face{font-family:Outfit;font-weight:600;src:url(/static/fuentes/outfit-600.woff2) format("woff2")}
@font-face{font-family:Outfit;font-weight:700;src:url(/static/fuentes/outfit-700.woff2) format("woff2")}

:root{
  --azul:#003b5c;--azul-s:#e6eef3;--amarillo:#fdb913;--crema:#f9f9f7;
  --tinta:#1d2733;--tinta2:#3e4c59;--mut:#6b7885;--linea:#e3e7ea;--linea2:#d3d9de;
  --blanco:#fff;--verde:#007a33;--verde-s:#e5f3ea;--ambar:#a66b00;--ambar-s:#fdf3dd;
  --rojo:#c62f26;--rojo-s:#fbe9e7;
  --m-formulario:#007a33;--m-excel:#0b6aa2;--m-drive:#6b7885;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;font-family:Outfit,-apple-system,system-ui,sans-serif;background:var(--crema);color:var(--tinta);font-size:14px}
a{color:var(--azul)}
.wrap{max-width:1320px;margin:0 auto;padding:0 28px}
main.wrap{padding-top:22px;padding-bottom:60px}

.topbar{position:sticky;top:0;z-index:20;background:rgba(249,249,247,.9);backdrop-filter:blur(16px);border-bottom:1px solid var(--linea2)}
.topbar .wrap{display:flex;align-items:center;gap:18px;min-height:64px}
.topbar h1{font-size:19px;font-weight:700;margin:0;letter-spacing:-.02em}
.topbar .sub{font-size:12px;color:var(--mut);margin-top:2px}
.topbar-der{margin-left:auto;display:flex;gap:8px;align-items:center}

.como{background:var(--amarillo);color:#2b2100;padding:9px 28px;font-size:13px;font-weight:500}
.como a{margin-left:12px;font-weight:700;color:#2b2100}
.aviso{background:var(--rojo-s);color:var(--rojo);padding:9px 28px;font-weight:500}

h2{font-size:15px;font-weight:700;margin:26px 0 10px;letter-spacing:-.01em}
h2:first-child{margin-top:0}
.mut{color:var(--mut)}.chico{font-size:12px}
.caja{background:var(--blanco);border:1px solid var(--linea);border-radius:12px;padding:16px 18px}
.rejilla{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px}
.dos{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;align-items:start}
@media (max-width:1100px){.dos{grid-template-columns:1fr}}

/* tarjeta de módulo en el taller */
.mod{display:block;text-decoration:none;color:inherit;background:var(--blanco);border:1px solid var(--linea);border-radius:12px;padding:14px 16px;transition:border-color .12s}
.mod:hover{border-color:var(--azul)}
.mod-t{display:flex;gap:8px;align-items:center;font-weight:600;font-size:14px}
.mod-t .ic{font-size:16px}
.mod-d{font-size:12px;color:var(--mut);margin:4px 0 10px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.fila-lbl{font-size:10.5px;font-weight:600;color:var(--mut);text-transform:uppercase;letter-spacing:.05em;margin:8px 0 4px}
.chips{display:flex;flex-wrap:wrap;gap:4px}
.chip{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;padding:2px 8px;border-radius:999px;background:#eef1f3;color:var(--tinta2);white-space:nowrap}
.chip.vacio{background:none;border:1px dashed var(--linea2);color:var(--mut)}
.chip.m-formulario{background:var(--verde-s);color:var(--verde)}
.chip.m-excel{background:#e3f0f8;color:var(--m-excel)}
.chip.m-drive{background:#eef1f3;color:var(--m-drive)}
.chip.alerta{background:var(--ambar-s);color:var(--ambar)}

.area-t{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:700;margin:26px 0 10px}
.area-t:first-of-type{margin-top:4px}

/* controles */
.seg{display:inline-flex;background:rgba(120,120,128,.12);border-radius:10px;padding:3px;gap:2px;flex-wrap:wrap}
.seg button{border:none;background:none;font:inherit;font-size:12.5px;font-weight:500;color:var(--tinta2);padding:6px 12px;border-radius:8px;cursor:pointer;white-space:nowrap}
.seg button:hover{color:var(--tinta)}
.seg button.on{background:var(--blanco);color:var(--tinta);box-shadow:0 1px 3px rgba(0,0,0,.14)}
.seg button[disabled]{opacity:.35;cursor:not-allowed}
select,input[type=text],input[type=password],input[type=number],input[type=date],textarea{
  font:inherit;font-size:13px;padding:7px 10px;border:1px solid var(--linea2);border-radius:8px;background:var(--blanco);color:var(--tinta)}
select:focus,input:focus,textarea:focus{outline:2px solid rgba(0,59,92,.25);border-color:var(--azul)}
.btn{font:inherit;font-size:13px;font-weight:600;padding:8px 16px;border-radius:9px;border:none;background:var(--azul);color:#fff;cursor:pointer;text-decoration:none;display:inline-flex;gap:6px;align-items:center}
.btn:hover{background:#00283f}
.btn.sec{background:var(--blanco);color:var(--azul);border:1px solid var(--linea2)}
.btn.sec:hover{border-color:var(--azul)}
.btn.peligro{background:none;color:var(--rojo);border:1px solid #f0c4c0}
.btn.chico{padding:5px 10px;font-size:12px}
label.campo{display:flex;flex-direction:column;gap:4px;font-size:11.5px;font-weight:600;color:var(--tinta2)}
.controles{display:flex;gap:10px;align-items:end;flex-wrap:wrap;margin-bottom:14px}

/* tablas densas */
table{width:100%;border-collapse:collapse;font-size:13px;background:var(--blanco)}
th{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--mut);text-align:left;padding:8px 10px;border-bottom:1px solid var(--linea2);white-space:nowrap}
td{padding:8px 10px;border-bottom:1px solid var(--linea);vertical-align:middle}
tr:last-child td{border-bottom:none}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
.tabla{border:1px solid var(--linea);border-radius:12px;overflow:auto}
td input[type=text],td input[type=number]{width:100%;min-width:62px;text-align:right;padding:6px 8px}
td.en-agrap{color:var(--mut);font-size:12px;text-align:right}

/* matriz roles × módulos */
.matriz th.rol{text-align:center;font-size:11px;text-transform:none;letter-spacing:0;min-width:84px}
.matriz td.celda{text-align:center}
.matriz td.area{background:#f4f6f7;font-weight:700;font-size:12px}
.matriz input[type=checkbox]{width:17px;height:17px;accent-color:var(--azul);cursor:pointer}
/* la fila de roles y la columna de módulos quedan INMÓVILES (2026-09-24,
   «mantén esto inmóvil»): la tabla se desplaza dentro de su caja y los
   encabezados se quedan pegados arriba y a la izquierda */
.tabla:has(> .matriz){max-height:calc(100vh - 150px)}
.matriz{border-collapse:separate;border-spacing:0}
.matriz thead th{position:sticky;top:0;z-index:3;background:var(--blanco);box-shadow:0 1px 0 var(--linea2)}
.matriz tbody td:first-child{position:sticky;left:0;z-index:1;background:var(--blanco);box-shadow:1px 0 0 var(--linea)}
.matriz thead th:first-child{left:0;z-index:4}
.matriz tbody td.area{position:static;box-shadow:none;background:#f4f6f7}
.matriz td.area .lbl{position:sticky;left:10px}

/* ficha de módulo */
.fuente{border:1px solid var(--linea);border-radius:12px;padding:14px 16px;background:var(--blanco);margin-bottom:10px}
.fuente-t{display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.fuente-t b{font-size:14px}
.fuente .hoy{font-size:12px;color:var(--mut);margin:3px 0 10px}
.fuente .fila{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:8px}
.fuente textarea{width:100%;min-height:40px;margin-top:8px;resize:vertical}
.previa{border:1px solid var(--linea2);border-radius:12px;overflow:hidden;background:var(--blanco);position:sticky;top:80px}
.previa-t{display:flex;gap:8px;align-items:center;padding:10px 12px;border-bottom:1px solid var(--linea);background:#f4f6f7;font-size:12.5px}
.previa iframe{width:100%;height:640px;border:0;display:block}

/* carga */
.soltar{border:2px dashed var(--linea2);border-radius:14px;padding:40px 20px;text-align:center;background:var(--blanco);cursor:pointer;transition:.12s}
.soltar.encima{border-color:var(--azul);background:var(--azul-s)}
.soltar .grande{font-size:15px;font-weight:600;margin-bottom:4px}
.muestra{font-size:11.5px}
.muestra td{padding:4px 8px;white-space:nowrap;max-width:180px;overflow:hidden;text-overflow:ellipsis}
.estado{font-size:12px;font-weight:600;padding:2px 8px;border-radius:999px}
.estado.pend{background:var(--ambar-s);color:var(--ambar)}
.estado.ok{background:var(--verde-s);color:var(--verde)}

.tarea{display:flex;gap:14px;align-items:center;text-decoration:none;color:inherit;background:var(--blanco);border:1px solid var(--linea);border-radius:12px;padding:14px 16px}
.tarea:hover{border-color:var(--azul)}
.tarea .ic{font-size:22px}
.tarea b{display:block;font-size:14px}
.tarea span{font-size:12px;color:var(--mut)}

#tostada{position:fixed;bottom:22px;left:50%;transform:translate(-50%,20px);background:var(--tinta);color:#fff;padding:9px 16px;border-radius:10px;font-size:13px;opacity:0;transition:.2s;pointer-events:none;z-index:99}
#tostada.visible{opacity:1;transform:translate(-50%,0)}
#tostada.malo{background:var(--rojo)}

/* vista previa dentro del iframe: sin barra lateral */
body.en-previa{padding-left:0}
body.en-previa .side{display:none}

@media (max-width:760px){
  .wrap{padding:0 16px}
  .topbar .wrap{flex-wrap:wrap;padding-top:10px;padding-bottom:10px}
}