/* =============================================================
   Grapa · taller de agentes
   Identidad: papel de imprenta, tinta negra, un rojo de sello.
   Nada de gradientes azules, vidrio, ni tarjetas flotantes.
   ============================================================= */

:root{
  --papel:#eee4d1;        /* fondo del taller   */
  --papel-honda:#e5d9c2;
  --hoja:#fbf7ee;         /* las columnas       */
  --ficha:#fdfbf5;        /* las tarjetas       */
  --tinta:#241f19;        /* texto principal    */
  --tinta2:#6d6353;       /* texto secundario   */
  --regla:#dbcfb7;        /* lineas y bordes    */
  --sello:#b23a2b;        /* el rojo de sello   */
  --verde:#41683f;
  --ambar:#bd851b;
  --azul:#3f6675;
  --sombra:0 1px 0 rgba(255,255,255,.85) inset, 0 1px 2px rgba(70,55,30,.13), 0 10px 20px -14px rgba(70,55,30,.5);
  --fuente-titulo:'Bookman Old Style','Palatino Linotype',Georgia,serif;
  --fuente-texto:'Segoe UI',system-ui,-apple-system,sans-serif;
  --fuente-mono:'Cascadia Mono',Consolas,'Courier New',monospace;
}

*{box-sizing:border-box}

html,body{margin:0;min-height:100%}

body{
  color:var(--tinta);
  font:14.5px/1.55 var(--fuente-texto);
  background-color:var(--papel);
  background-image:
    radial-gradient(1100px 520px at 8% -12%, rgba(255,255,252,.85), rgba(255,255,252,0) 62%),
    radial-gradient(900px 500px at 108% 8%, rgba(180,150,105,.13), rgba(180,150,105,0) 60%),
    repeating-linear-gradient(0deg, rgba(120,100,70,0) 0 26px, rgba(120,100,70,.05) 26px 27px);
  background-attachment:fixed;
}

/* ------------------------------ cabecera ------------------------------ */
.banda{
  display:flex;align-items:center;gap:16px;
  padding:11px 18px;
  background:linear-gradient(180deg,#fdfaf2,#f0e7d5);
  border-bottom:2px solid var(--tinta);
  box-shadow:0 3px 0 -1px rgba(178,58,43,.28), 0 8px 16px -12px rgba(70,55,30,.6);
  position:sticky;top:0;z-index:30;
}
.marca{
  font:700 25px/1 var(--fuente-titulo);
  letter-spacing:.01em;
}
.marca b{color:var(--sello)}
.lema{display:flex;flex-direction:column;gap:3px;min-width:0}
.taller{font:600 12.5px/1.2 var(--fuente-texto);letter-spacing:.06em;text-transform:uppercase;color:var(--tinta)}
.sello-local{
  align-self:flex-start;
  font:700 9.5px/1 var(--fuente-texto);letter-spacing:.16em;text-transform:uppercase;
  color:var(--azul);border:1px solid currentColor;border-radius:2px;padding:3px 5px;
  transform:rotate(-1.4deg);opacity:.8;
}
.spacer{flex:1}

.lampara{display:flex;align-items:center;gap:9px;padding-right:6px}
.foco{
  width:12px;height:12px;border-radius:50%;
  background:#c3b79f;
  border:1px solid #9c8f78;
  box-shadow:0 0 0 3px rgba(255,255,255,.5) inset;
}
.foco.on{
  background:radial-gradient(circle at 35% 35%,#ffe1a0,#d69a1e 70%);
  border-color:#a97d15;
  animation:respirar 2.6s ease-in-out infinite;
}
@keyframes respirar{
  0%,100%{box-shadow:0 0 0 0 rgba(214,154,30,.55)}
  50%{box-shadow:0 0 0 7px rgba(214,154,30,0)}
}
.latido-txt{font:12px/1.3 var(--fuente-texto);color:var(--tinta2);max-width:280px}
.reloj{
  font:13px/1 var(--fuente-mono);color:var(--tinta2);
  border-left:1px solid var(--regla);padding-left:12px;font-variant-numeric:tabular-nums;
}

/* ------------------------------ botones ------------------------------ */
button{
  font:inherit;color:var(--tinta);cursor:pointer;
  background:linear-gradient(#fdfbf4,#f1e9d9);
  border:1px solid #cbbca1;border-radius:3px;padding:6px 11px;
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset, 0 1px 1px rgba(70,55,30,.14);
  transition:transform .08s ease, background .12s ease;
}
button:hover{background:linear-gradient(#fffefa,#f5eee0);transform:translateY(-1px)}
button:active{transform:translateY(0);box-shadow:0 1px 3px rgba(70,55,30,.25) inset}
button.primario{
  background:linear-gradient(#c14a38,#a93223);border-color:#8f291c;color:#fdf6ee;
  font-weight:600;letter-spacing:.02em;
  box-shadow:0 1px 0 rgba(255,255,255,.22) inset, 0 2px 4px -1px rgba(143,41,28,.5);
}
button.primario:hover{background:linear-gradient(#cc523f,#b23624)}
button.chico{padding:4px 8px;font-size:12px}
button.plano{background:transparent;box-shadow:none;border-color:transparent;color:var(--tinta2)}
button.plano:hover{background:rgba(70,55,30,.06);color:var(--tinta)}

/* ------------------------------ estructura ------------------------------ */
main{
  display:grid;grid-template-columns:minmax(280px,1fr) minmax(320px,1.25fr) minmax(300px,1fr);
  gap:16px;padding:16px;align-items:start;max-width:1900px;margin:0 auto;
}
.col{
  background:linear-gradient(180deg,var(--hoja),#f8f2e4);
  border:1px solid var(--regla);border-radius:3px;
  box-shadow:var(--sombra);
  padding:14px 14px 16px;
  background-image:
    repeating-linear-gradient(0deg, rgba(120,100,70,0) 0 26px, rgba(120,100,70,.05) 26px 27px),
    linear-gradient(180deg,var(--hoja),#f8f2e4);
}
.col > h2{
  font:700 11px/1 var(--fuente-texto);letter-spacing:.17em;text-transform:uppercase;
  color:var(--tinta2);margin:0 0 13px;padding-bottom:8px;
  border-bottom:1px solid var(--regla);
}
.col > h2:not(:first-child){margin-top:26px;padding-top:16px;border-top:1px dashed var(--regla)}

/* ------------------------------ fichas ------------------------------ */
.ficha{
  position:relative;background:var(--ficha);
  border:1px solid #e3d8c2;border-radius:2px;
  box-shadow:var(--sombra);
  padding:12px 13px 11px;margin-bottom:12px;
  animation:aparecer .28s ease-out;
}
.ficha::before{content:'';position:absolute;left:0;right:0;top:0;height:3px;background:var(--regla)}
.ficha.trabajando::before{background:repeating-linear-gradient(90deg,var(--ambar) 0 10px,rgba(189,133,27,.25) 10px 20px)}
.ficha.trabajando{box-shadow:0 0 0 1px rgba(189,133,27,.35), var(--sombra)}
/* El estado ("abierto") va pegado al nombre en la misma linea: sin este aire se lee
   "Tienda onlineabierto". */
.ficha .quien .pista{margin-left:8px}

/* Estado de una conexion declarada (prendida / apagada): se lee de un vistazo. */
.sello-estado{display:inline-block;padding:2px 9px;border-radius:11px;font-size:10.5px;font-weight:700;letter-spacing:.4px;text-transform:uppercase}
.sello-estado.si{background:#d8f5e0;color:#12683a}
.sello-estado.no{background:#ececec;color:#767676}
.tarjeta-config.prendida{border-left:3px solid #2f9e5e}
.fila-config.prendida{border-left:3px solid #2f9e5e;padding-left:8px}
/* Lo que se pliega: una linea con el estado a la vista, y los campos cuando los abris. */
.tarjeta-config>summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.tarjeta-config>summary::-webkit-details-marker{display:none}
.tarjeta-config>summary::before{content:'▸';color:var(--tinta2);font-size:12px}
.tarjeta-config[open]>summary::before{content:'▾'}
.tarjeta-config>summary .nom-tool{font-weight:600}
.tarjeta-config>summary .desc{color:var(--tinta2);font-size:11.5px}
/* El popup de datos: ancho de formulario, no de pantalla. */
#dlg-form{width:min(560px,92vw)}
/* La foto de un documento de la biblioteca: chica, como una estampita. */
.bib-foto{display:block;margin-top:9px;max-width:150px;max-height:110px;border:1px solid var(--regla);background:#fff;padding:3px}
/* --- La empresa, de un vistazo: números grandes y un tema por tarjeta. --- */
.medidor{display:flex;flex-wrap:wrap;gap:26px;margin:16px 0 4px}
.medidor .cifra{font:700 30px/1 var(--fuente-titulo);color:var(--tinta)}
.medidor .pie{display:block;font-size:11px;color:var(--tinta2);margin-top:4px;line-height:1.35}
.rejilla-ficha{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:12px;margin-top:12px}
/* Respaldo y conexiones: los campos de configuracion, en rejilla; y un subtitulo de seccion. */
.rejilla-config{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:10px;margin-top:12px}
.titulo-sub{margin:18px 0 8px;font:700 12px/1 var(--fuente-texto);letter-spacing:.1em;text-transform:uppercase;color:var(--tinta2)}
.campo small{color:var(--tinta2);font-weight:400}
.tarjeta-ficha{border:1px solid var(--regla);border-radius:8px;padding:11px 13px;background:rgba(255,255,255,.4)}
.tarjeta-ficha h5{margin:0 0 8px;font:700 11px/1 var(--fuente-texto);letter-spacing:.13em;text-transform:uppercase;color:var(--tinta2)}
.tarjeta-ficha .dato{display:flex;flex-wrap:wrap;align-items:baseline;gap:7px;padding:7px 0;border-bottom:1px dotted var(--regla)}
.tarjeta-ficha .dato:last-child{border-bottom:none;padding-bottom:0}
.dato-nombre{flex:0 0 100%;font:600 11px/1 var(--fuente-texto);letter-spacing:.05em;text-transform:uppercase;color:var(--tinta2)}
.dato-valor{font-size:13.5px;line-height:1.45;word-break:break-word}
.sello-dato{font:700 9px/1 var(--fuente-texto);letter-spacing:.09em;text-transform:uppercase;padding:3px 6px;border-radius:2px;border:1px solid currentColor;opacity:.85}
.sello-dato.taller{color:var(--tinta2)}
.sello-dato.humano{color:#8f291c}
.bandeja.conexion{border-left:3px solid #2f9e5e}
.ficha::after{
  content:'';position:absolute;left:-1px;top:0;bottom:0;width:5px;
  background-image:radial-gradient(circle at 2.5px 6px, var(--papel-honda) 2.4px, rgba(0,0,0,0) 2.6px);
  background-size:5px 13px;background-repeat:repeat-y;
}
@keyframes aparecer{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}

.fila{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.nom{font:700 16.5px/1.25 var(--fuente-titulo);letter-spacing:.005em}
.rol{color:var(--tinta2);font-size:12.5px}
.numero{font:700 12px/1 var(--fuente-mono);color:var(--tinta2);letter-spacing:.04em}
.meta{color:var(--tinta2);font-size:12.5px;margin-top:4px}
.mono{font-family:var(--fuente-mono);font-size:11.5px;color:var(--tinta2)}
.cifras{font-variant-numeric:tabular-nums}

/* sellos de estado */
.sello-estado{
  font:700 9.5px/1 var(--fuente-texto);letter-spacing:.14em;text-transform:uppercase;
  padding:4px 6px;border:1.5px solid currentColor;border-radius:2px;
  transform:rotate(-2.5deg);opacity:.9;white-space:nowrap;
}
.s-idle{color:var(--verde)}
.s-working,.s-running,.s-doing{color:var(--azul)}
.s-paused,.s-waiting_approval{color:var(--ambar)}
.s-error,.s-failed,.s-blocked{color:var(--sello)}
.s-done,.s-todo{color:var(--tinta2)}

/* Cuando una orden no cerro: en su lugar se explica POR QUE, con el motivo guardado. */
.motivo-fallo{
  margin-top:8px;padding:8px 10px;border-left:3px solid var(--sello);
  background:rgba(146,13,13,.055);font-size:12.5px;
}
.ficha.fallada::before{background:var(--sello)}

.acciones{display:flex;gap:7px;margin-top:11px;flex-wrap:wrap;padding-top:10px;border-top:1px dotted var(--regla)}

/* nota de resultado: renglon con margen rojo, como anotado a mano */
.nota{
  margin-top:9px;padding:8px 10px 8px 12px;background:#fffdf7;
  border-left:3px solid var(--sello);
  font-size:12.5px;white-space:pre-wrap;max-height:210px;overflow:auto;
}
.receta{
  margin-top:8px;padding:9px 10px;background:#f2ece0;border:1px dashed var(--regla);border-radius:2px;
  font:12px/1.5 var(--fuente-mono);color:#3a3229;white-space:pre-wrap;word-break:break-word;
}

/* ------------------------------ bandeja de sellos ------------------------------ */
.bandeja{background:#fdf8ec;border:1px solid #e6c9a2;box-shadow:var(--sombra);padding:12px 13px;margin-bottom:12px;border-radius:2px}
.bandeja .rotulo{font:700 10px/1 var(--fuente-texto);letter-spacing:.16em;text-transform:uppercase;color:var(--sello);margin-bottom:8px}
.sellos{display:flex;gap:10px;margin-top:12px;align-items:center}
.sello-btn{
  font:800 12px/1 var(--fuente-titulo);letter-spacing:.09em;text-transform:uppercase;
  background:transparent;border:2px solid currentColor;border-radius:3px;padding:9px 13px;
  transform:rotate(-1.4deg);
}
.sello-btn:hover{transform:rotate(-1.4deg) translateY(-2px)}
.sello-btn.ok{color:var(--verde)}
.sello-btn.ok:hover{background:rgba(65,104,63,.09)}
.sello-btn.siempre{color:var(--azul)}
.sello-btn.siempre:hover{background:rgba(46,86,140,.09)}
.sello-btn.no{color:var(--sello)}
.sello-btn.no:hover{background:rgba(178,58,43,.09)}
.pista{font-size:12px;color:var(--tinta2);margin-left:auto}

/* el golpe del sello, cuando se aprueba o rechaza */
.estampa{
  position:fixed;z-index:90;pointer-events:none;
  font:800 32px/1 var(--fuente-titulo);letter-spacing:.08em;
  padding:6px 13px;border:4px solid currentColor;border-radius:4px;
  mix-blend-mode:multiply;opacity:0;
  transform:rotate(-13deg) scale(2.3);
  animation:clac .9s cubic-bezier(.2,.85,.25,1) forwards;
}
@keyframes clac{
  0%{opacity:0;transform:rotate(-13deg) scale(2.3)}
  28%{opacity:.95;transform:rotate(-13deg) scale(1)}
  45%{transform:rotate(-13deg) scale(1.05)}
  78%{opacity:.95;transform:rotate(-13deg) scale(1)}
  100%{opacity:0;transform:rotate(-13deg) scale(1.01)}
}

/* ------------------------------ libro y bitacora ------------------------------ */
.libro .renglon{
  display:grid;grid-template-columns:1fr auto;gap:4px 10px;align-items:baseline;
  padding:7px 0;border-bottom:1px dotted var(--regla);
}
.libro .renglon:last-child{border-bottom:0}
.libro .cifras{color:var(--tinta2);font-family:var(--fuente-mono);font-size:11.5px}
.bitacora .renglon{
  display:grid;grid-template-columns:64px 1fr;gap:8px;
  font-family:var(--fuente-mono);font-size:11.5px;color:#4a4237;
  padding:4px 0;border-bottom:1px dotted rgba(219,207,183,.7);
}
.bitacora .hora{color:var(--tinta2)}
.bitacora .quien{color:var(--sello)}

.vacio{color:var(--tinta2);font-size:13px;padding:8px 2px;font-style:italic}

/* ------------------------------ cuaderno de chat ------------------------------ */
.cuaderno{
  position:fixed;right:0;top:0;height:100%;width:min(430px,100%);
  display:flex;flex-direction:column;z-index:40;
  background:#fdf9f0;
  background-image:repeating-linear-gradient(0deg, rgba(120,100,70,0) 0 25px, rgba(120,100,70,.07) 25px 26px);
  border-left:2px solid var(--tinta);
  box-shadow:-14px 0 34px -18px rgba(70,55,30,.6);
  animation:entrar .22s ease-out;
}
@keyframes entrar{from{transform:translateX(24px);opacity:.4}to{transform:none;opacity:1}}
.cuaderno header{display:flex;align-items:center;gap:10px;padding:13px 15px;background:linear-gradient(#fdfaf2,#f3ecdd);border-bottom:1px solid var(--regla)}
.cuaderno .hilo{flex:1;overflow:auto;padding:14px 15px 6px;position:relative}
.cuaderno .hilo::before{content:'';position:absolute;left:44px;top:0;bottom:0;width:1px;background:rgba(178,58,43,.35)}
.msg{margin-bottom:12px;padding:9px 11px;background:#fffdf7;border:1px solid var(--regla);border-radius:2px;box-shadow:var(--sombra);white-space:pre-wrap;font-size:13.5px}
.msg .quien{font:700 10px/1 var(--fuente-texto);letter-spacing:.14em;text-transform:uppercase;color:var(--tinta2);margin-bottom:5px}
.msg.vos{border-left:3px solid var(--azul);margin-left:26px}
.msg.agente{border-left:3px solid var(--verde);margin-right:26px}
.cuaderno .pie{display:flex;gap:8px;padding:12px 15px;border-top:1px solid var(--regla);background:#faf5e9}
.cuaderno input{flex:1}

/* ------------------------------ formularios ------------------------------ */
input,textarea,select{
  font:inherit;color:var(--tinta);background:#fffdf7;
  border:1px solid #cbbca1;border-radius:2px;padding:8px 10px;width:100%;
  box-shadow:0 1px 2px rgba(70,55,30,.08) inset;
}
input:focus,textarea:focus,select:focus{outline:2px solid rgba(63,102,117,.35);outline-offset:0;border-color:var(--azul)}
textarea{resize:vertical;min-height:72px}
label{display:block;font:600 11px/1 var(--fuente-texto);letter-spacing:.12em;text-transform:uppercase;color:var(--tinta2);margin-bottom:5px}
.campo{margin-bottom:12px}

dialog{
  background:var(--ficha);color:var(--tinta);
  border:1px solid var(--regla);border-radius:3px;
  box-shadow:0 24px 60px -24px rgba(50,38,20,.8);
  width:min(480px,94vw);padding:0;
}
dialog::backdrop{background:rgba(40,32,20,.5)}
dialog .cabeza{padding:14px 18px;background:linear-gradient(#fdfaf2,#f2ead9);border-bottom:1px solid var(--regla)}
dialog .cabeza h3{margin:0;font:700 18px/1.2 var(--fuente-titulo)}
dialog .cuerpo{padding:16px 18px 4px}
dialog .pie{padding:4px 18px 16px;display:flex;gap:9px;justify-content:flex-end}

/* ------------------------------ pop-ups del taller ------------------------------ */
/* Los avisos salen como nota del taller, no como ventana del navegador. */
dialog.dlg-aviso{width:min(560px,94vw)}
dialog.dlg-aviso[open]{animation:notaEntra .16s ease-out}
@keyframes notaEntra{from{opacity:.35;transform:translateY(-6px)}to{opacity:1;transform:none}}
dialog.dlg-aviso .cuerpo{padding:16px 18px 2px}
dialog.dlg-aviso .nota-panel{
  border:1px solid var(--regla);border-left:4px solid var(--sello);border-radius:2px;
  background:#fffdf7;padding:12px 14px;box-shadow:0 1px 2px rgba(70,55,30,.08) inset;
}
dialog.dlg-aviso.tipo-ok .nota-panel{border-left-color:var(--verde)}
dialog.dlg-aviso.tipo-nota .nota-panel{border-left-color:var(--azul)}
dialog.dlg-aviso .rotulo-nota{
  font:700 10px/1 var(--fuente-texto);letter-spacing:.16em;text-transform:uppercase;
  color:var(--sello);margin-bottom:8px;
}
dialog.dlg-aviso.tipo-ok .rotulo-nota{color:var(--verde)}
dialog.dlg-aviso.tipo-nota .rotulo-nota{color:var(--azul)}
dialog.dlg-aviso .nota-texto{
  margin:0;font:12.5px/1.55 var(--fuente-mono);color:var(--tinta);
  white-space:pre-wrap;word-break:break-word;
}

.oculto{display:none!important}

/* ------------------------------ pop-up del legajo (CV) ------------------------------ */
/* El CV se abre aca adentro, en su propia ventana del panel. */
dialog#dlg-cv{width:min(920px,95vw)}
dialog#dlg-cv .cuerpo{padding:0;overflow:hidden;background:#fdfbf4}
dialog#dlg-cv iframe{display:block;width:100%;height:min(74vh,880px);border:0;background:#fdfbf4}
dialog#dlg-cv .pie{align-items:center;justify-content:space-between}
dialog#dlg-cv .pie a{font-size:12.5px;color:var(--azul)}
dialog#dlg-cv .pie .aviso{margin:0}

/* ------------------------------ pie ------------------------------ */
.pie-taller{
  max-width:1900px;margin:0 auto;padding:2px 18px 22px;
  font-family:var(--fuente-mono);font-size:11px;color:var(--tinta2);
  display:flex;gap:16px;flex-wrap:wrap;
}
.pie-taller span::before{content:'· ';color:var(--sello)}

@media (max-width:1180px){
  main{grid-template-columns:1fr 1fr}
  main .col:last-child{grid-column:1 / -1}
}
@media (max-width:780px){
  main{grid-template-columns:1fr;padding:12px}
  .reloj{display:none}
  .latido-txt{max-width:160px}
}

.bloque-interno{margin:12px 0 6px;padding:10px 12px;border:1px solid #e3e0d8;border-radius:8px}
.pasos{margin:6px 0 0 20px;font-size:12.5px;line-height:1.75}

.tarjeta-config.baja{opacity:.62}

/* Personal (item 21): gravedad de un hallazgo del organigrama y el boton rojo de la baja. */
.gr{display:inline-block;font:700 9.5px/1 var(--fuente-texto);letter-spacing:.1em;text-transform:uppercase;padding:2px 6px;border:1px solid currentColor;border-radius:2px}
.gr-alta{color:var(--sello)}
.gr-media{color:#b7791f}
.gr-baja{color:var(--tinta2)}
button.primario.peligro{background:linear-gradient(#cc4b39,#a83222);border-color:#7d2418}
button.primario.peligro:hover{background:linear-gradient(#b7402f,#932c1e)}

/* --- La puerta del taller: varios humanos con permisos (fila 11) ------------------------------ */
#pantalla-entrada{position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(#efe6d3,#e2d4b9);padding:24px}
#pantalla-entrada.oculto{display:none}
.nota-entrada{width:min(380px,92vw);background:var(--ficha);border:1px solid var(--regla);border-radius:3px;
  box-shadow:0 14px 40px rgba(60,45,20,.28);padding:26px 26px 20px;display:flex;flex-direction:column;gap:12px}
.nota-entrada .marca-entrada{font:700 30px/1 var(--fuente-titulo);color:var(--tinta)}
.nota-entrada .marca-entrada b{color:var(--sello)}
.nota-entrada .lema-entrada{font:11px/1.3 var(--fuente-texto);letter-spacing:.14em;text-transform:uppercase;
  color:var(--tinta2);margin-bottom:6px}
.nota-entrada label{display:flex;flex-direction:column;gap:4px;font:700 10px/1 var(--fuente-texto);
  letter-spacing:.12em;text-transform:uppercase;color:var(--tinta2);margin:0}
.nota-entrada input{padding:9px 10px;border:1px solid var(--regla);border-radius:2px;background:#fffdf7;
  font:400 14px/1 var(--fuente-texto);color:var(--tinta)}
.nota-entrada button.primario{margin-top:4px}
.nota-entrada .aviso-error{font:12px/1.3 var(--fuente-texto);color:var(--sello);min-height:15px}
.nota-entrada .aviso-error:empty{display:none}
.nota-entrada .pie-entrada{font:11px/1.4 var(--fuente-texto);color:var(--tinta2);border-top:1px dotted var(--regla);padding-top:10px}
.quien-soy{display:flex;align-items:center;gap:7px;font:600 12px/1 var(--fuente-texto);color:var(--tinta2)}
.quien-soy.oculto{display:none}
.quien-soy .sello-estado{font:700 9.5px/1 var(--fuente-texto);letter-spacing:.1em;text-transform:uppercase;
  color:var(--sello);border:1px solid var(--sello);border-radius:2px;padding:2px 5px;white-space:nowrap}
.ficha-usuario{border:1px solid var(--regla);border-radius:2px;padding:9px 11px;margin-bottom:8px;background:var(--hoja)}
.ficha-usuario .quien{font:700 14px/1.2 var(--fuente-titulo);color:var(--tinta)}
.ficha-usuario .entra{font:11.5px/1.4 var(--fuente-mono);color:var(--tinta2)}
.ficha-usuario .permisos{font:11.5px/1.5 var(--fuente-texto);color:var(--tinta2);margin-top:3px}
.tabla-permisos .fila-config{gap:6px}
.tabla-permisos .col-rol{min-width:58px;text-align:center;font:700 9.5px/1 var(--fuente-texto);
  letter-spacing:.05em;text-transform:uppercase;color:var(--tinta2)}
.chip-rol{font:700 9.5px/1 var(--fuente-texto);letter-spacing:.1em;text-transform:uppercase;color:var(--sello);
  border:1px solid var(--sello);border-radius:2px;padding:2px 5px;margin-left:6px;white-space:nowrap}

/* Recetario · biblioteca: la lista de candidatos dentro del popup. Cada uno se puede tildar; las de
   licencia no clara van marcadas como "solo link" (se trae el link, no el texto) y se dice por que. */
.bib-cand{gap:4px}
.bib-cand .bib-tilde{display:flex;align-items:center;gap:8px;font:600 13px/1.3 var(--fuente-texto);color:var(--tinta)}
.bib-cand .desc{color:var(--tinta2);font-size:11.5px}
.bib-cand .sello-estado{align-self:flex-start}

/* Relevar solo · popup del resultado: mismo aspecto de ficha que en el panel, adentro del <dialog>. */
#form-cuerpo .dato{display:flex;flex-wrap:wrap;align-items:baseline;gap:7px;padding:7px 0;border-bottom:1px dotted var(--regla)}
#form-cuerpo .dato:last-child{border-bottom:none;padding-bottom:0}
#form-cuerpo .dato .sello-estado{font-size:9.5px}
/* La fila que dejo el relevamiento automatico para revisar (no piso un dato humano): se DESTACA,
   no se esconde entre el resto, para que un humano la compare a mano. */
.dato.dato-revisar{border-left:3px solid var(--ambar);background:rgba(189,133,27,.10);padding-left:9px;border-radius:3px}
.dato.dato-revisar .dato-nombre{color:var(--ambar)}
.dato.dato-revisar .sello-estado.no{background:#fdead0;color:#8a5a00}

/* ------------------------------ ¿dónde vas a trabajar? ------------------------------ */
/* La pantalla que aparece al entrar cuando la persona tiene más de un taller. Papel y tinta,
   como el resto: no es un modal flotante de vidrio, es una hoja puesta sobre el escritorio. */
#empresa{cursor:pointer}
#empresa:hover{color:var(--sello)}
.pantalla-taller{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;
  background:rgba(40,32,20,.55);padding:20px;overflow:auto}
.pt-caja{width:min(720px,96vw);background:var(--ficha);border:1px solid var(--regla);border-radius:3px;
  box-shadow:0 20px 60px rgba(40,30,15,.45);padding:26px 26px 18px}
.pt-lema{font:11px/1.3 var(--fuente-texto);letter-spacing:.16em;text-transform:uppercase;color:var(--tinta2);margin-bottom:6px}
.pt-caja h2{font:700 26px/1.15 var(--fuente-titulo);color:var(--tinta);margin:0 0 6px}
.pt-sub{font:13px/1.5 var(--fuente-texto);color:var(--tinta2);margin-bottom:16px;max-width:62ch}
.pt-lista{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px}
.pt-tarjeta{display:flex;flex-direction:column;gap:5px;text-align:left;cursor:pointer;
  background:var(--hoja);border:1px solid var(--regla);border-radius:3px;padding:13px 14px;
  box-shadow:var(--sombra);transition:border-color .12s,transform .12s}
.pt-tarjeta:hover{border-color:var(--sello);transform:translateY(-1px)}
.pt-tarjeta.actual{border-color:var(--sello);background:#fbf1ec}
.pt-tarjeta:disabled{opacity:.55;cursor:default}
.pt-nom{font:700 16px/1.2 var(--fuente-titulo);color:var(--tinta)}
.pt-datos{font:11.5px/1.4 var(--fuente-mono);color:var(--tinta2)}
.pt-ir{font:700 10px/1 var(--fuente-texto);letter-spacing:.1em;text-transform:uppercase;color:var(--sello);margin-top:4px}
.pt-pie{font:11.5px/1.5 var(--fuente-texto);color:var(--tinta2);border-top:1px dotted var(--regla);margin-top:16px;padding-top:10px}
/* chips de taller en la ficha de cada usuario */
.chip-taller{font:700 9.5px/1 var(--fuente-texto);letter-spacing:.08em;text-transform:uppercase;
  color:var(--tinta2);background:transparent;border:1px dashed var(--regla);border-radius:2px;
  padding:3px 6px;margin:2px 4px 0 0;cursor:pointer}
.chip-taller:hover{border-color:var(--sello);color:var(--sello)}
.chip-taller.on{background:#fbf1ec;border:1px solid var(--sello);color:var(--sello)}
.chip-taller:disabled{opacity:.5;cursor:default}

/* ---------- a qué se dedica: el catálogo de actividades del taller ---------- */
.oblig{font-weight:400;text-transform:none;letter-spacing:0;color:var(--tinta2);font-size:10.5px;margin-left:6px}
.act-barra{display:flex;gap:8px;align-items:center;margin-bottom:7px}
.act-barra input{flex:1}
.act-cuenta{font-size:11px;color:var(--tinta2);white-space:nowrap;font-family:var(--fuente-mono)}
.act-lista{max-height:250px;overflow:auto;border:1px solid var(--regla);background:var(--hoja);border-radius:3px;padding:8px 10px}
.act-lista .desc{font-size:11.5px;color:var(--tinta2)}
.act-area{font-family:var(--fuente-mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--tinta2);margin:8px 0 5px}
.act-area:first-child{margin-top:0}
.act-chips{display:flex;flex-wrap:wrap;gap:5px}
.act-chip{font-family:var(--fuente-texto);font-size:11.5px;line-height:1.25;padding:4px 8px;border:1px solid var(--regla);
  background:var(--ficha);color:var(--tinta);border-radius:3px;cursor:pointer;text-align:left}
.act-chip:hover{border-color:var(--sello);color:var(--sello)}
.act-chip.on{background:#fbf1ec;border-color:var(--sello);color:var(--sello);font-weight:600}
.act-propias{display:flex;flex-wrap:wrap;gap:5px;margin-top:7px}
.act-chip.prop{background:#eef3ec;border-color:var(--verde);color:var(--verde);cursor:default}
.act-chip.prop b{margin-left:6px;cursor:pointer;font-weight:700}
.act-agregar{display:flex;gap:8px;margin-top:7px}
.act-agregar input{flex:1}
.aviso.alerta{border-left:2px solid var(--sello);background:#fbf1ec;color:#8d2d21}

/* ---------- la marca del taller en la franja de arriba ---------- */
#empresa{display:flex;align-items:center;gap:9px}
.logo-taller{width:26px;height:26px;border-radius:3px;object-fit:cover;flex:none;display:block}
.logo-letra{display:flex;align-items:center;justify-content:center;background:var(--sello);color:#fbf7ee;
  font-family:var(--fuente-titulo);font-size:15px;line-height:1;font-weight:700}
.nom-taller{font-family:var(--fuente-titulo);letter-spacing:0}
.cuenta-taller{font-family:var(--fuente-texto);font-size:11.5px;color:var(--tinta2);text-transform:none;letter-spacing:0}

/* ---------- el logo en las tarjetas de "¿dónde vas a trabajar?" ---------- */
.pt-logo{width:34px;height:34px;border-radius:4px;object-fit:cover;margin-bottom:6px}
.pt-logo-letra{display:flex;align-items:center;justify-content:center;color:#fbf7ee;font-family:var(--fuente-titulo);font-size:18px}
.pt-tarjeta{border-top:3px solid var(--color-taller,var(--sello));padding-top:12px}

/* ---------- la vista previa en Configuración → Identidad ---------- */
.marca-vista{display:flex;align-items:center;gap:12px;margin:10px 0 14px}
.mv-logo{width:44px;height:44px;border-radius:5px;object-fit:cover}
.mv-letra{display:flex;align-items:center;justify-content:center;color:#fbf7ee;font-family:var(--fuente-titulo);font-size:22px}
.mv-txt{display:flex;flex-direction:column;gap:2px}
.marca-color{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--tinta2);white-space:nowrap}
.marca-color input[type=color]{width:34px;height:26px;padding:1px;border:1px solid var(--regla);background:var(--hoja);cursor:pointer}

/* ---------- el popup de preguntas: opciones del agente + respuesta libre ----------
   El agente propone; el dueño decide. Las opciones son un atajo, nunca una jaula:
   abajo hay siempre un campo para escribir otra cosa. */
dialog.dlg-pregunta{width:min(620px,94vw)}
dialog.dlg-pregunta .cuerpo{padding-bottom:6px}
dialog.dlg-pregunta .nota-texto{font-size:15px;line-height:1.45;color:var(--tinta)}
.pq-bloque{margin:14px 0 0}
.pq-etiqueta{font:700 10px/1 var(--fuente-texto);letter-spacing:.16em;text-transform:uppercase;
  color:var(--tinta2);margin-bottom:7px;display:block}
.pq-opciones{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:12px}
.pq-op{font-family:var(--fuente-texto);font-size:13px;line-height:1.25;padding:7px 12px;cursor:pointer;
  background:var(--hoja);color:var(--tinta);border:1px solid var(--regla);border-radius:2px;text-align:left}
.pq-op:hover{border-color:var(--tinta2)}
.pq-op.on{background:var(--sello);border-color:var(--sello);color:#fbf7ee;font-weight:700}
dialog.dlg-pregunta textarea{width:100%;box-sizing:border-box;min-height:74px;resize:vertical;
  font-family:var(--fuente-texto);font-size:13.5px;line-height:1.4;padding:9px 11px;color:var(--tinta);
  background:var(--hoja);border:1px solid var(--regla);border-radius:2px}
dialog.dlg-pregunta textarea:focus{outline:none;border-color:var(--tinta2)}
.pq-pista{font-size:11.5px;color:var(--tinta2);margin:8px 0 0;min-height:14px}
.bandeja.pregunta{border-left:3px solid var(--azul)}
.bandeja.pregunta .pq-opciones{margin:9px 0 2px}