/* Paleta del panel — violeta.
   Los nombres --gold* se conservan porque los usan todas las vistas; lo que
   cambia es su valor. Sin animaciones de fondo ni halos grandes: los brillos
   permanentes obligaban a la tarjeta gráfica a repintar la página entera. */
:root{
  --bg:#0c0a14; --surface:#171227; --surface2:#1f1833; --border:#362b57;
  --gold-deep:#6d3fd4; --gold:#a78bfa; --gold-bright:#d9caff;
  --ink:#ece9f7; --muted:#a094c4;
  --rosa:#e879b8; --sea:#3f3480; --ok:#3fae7a; --danger:#d4566b; --info:#5b8fe0;
  --radius:14px;
  --glow: 0 0 0 1px rgba(167,139,250,.30);
  --glow-lg: 0 0 0 1px rgba(167,139,250,.45), 0 6px 18px rgba(109,63,212,.22);
  --sidebar-w:246px;
}
*{box-sizing:border-box}

/* Las barras de scroll, invisibles en toda la casa. Se sigue pudiendo arrastrar
   con la rueda y con el dedo; lo que desaparece es la barra gris. */
*{scrollbar-width:none;-ms-overflow-style:none}
*::-webkit-scrollbar{width:0;height:0;display:none}
body{
  margin:0;font:15px/1.6 -apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  background:
    radial-gradient(70vw 55vh at 12% -12%, rgba(109,63,212,.20), transparent 62%),
    radial-gradient(55vw 45vh at 108% 4%, rgba(232,121,184,.10), transparent 60%),
    var(--bg);
  background-attachment:fixed;
  color:var(--ink);
}
h1,h2,h3{font-family:Georgia,'Iowan Old Style','Palatino Linotype',serif;font-weight:normal}

/* ---------- Logo ---------- */
.logo{
  font-weight:bold;letter-spacing:.14em;font-family:Georgia,serif;
  background:linear-gradient(100deg,var(--gold) 0%,var(--gold-bright) 50%,var(--rosa) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.logo em{font-style:normal;font-weight:normal;letter-spacing:.05em;opacity:.85}

/* ---------- Sidebar / nav ---------- */
nav{
  position:fixed;top:0;left:0;bottom:0;width:var(--sidebar-w);display:flex;flex-direction:column;gap:.15rem;
  background:linear-gradient(175deg,#0a0713,#150f28 70%,#1b1435);
  border-right:1px solid var(--gold-deep);
  box-shadow:inset -1px 0 0 rgba(167,139,250,.18);
  color:#fff;padding:1.2rem .9rem;overflow-y:auto;z-index:900;isolation:isolate;
  scrollbar-width:none;-ms-overflow-style:none
}
nav::-webkit-scrollbar{width:0;height:0;display:none}
nav .logo{position:relative;display:block;margin-bottom:1rem;padding:0 .3rem;font-size:1.15rem}
nav .nav-links{position:relative;display:flex;flex-direction:column;gap:.1rem;flex:1}
nav a{
  position:relative;color:#d8d0ee;text-decoration:none;font-size:.88rem;letter-spacing:.02em;font-family:inherit;
  display:flex;align-items:center;gap:.65rem;padding:.55rem .7rem;border-radius:9px;
  transition:background .15s,color .15s
}
nav a .ico{font-size:1rem;width:1.3em;text-align:center}
nav a:hover{background:rgba(167,139,250,.14);color:var(--gold-bright)}
nav a.active{
  background:linear-gradient(100deg,var(--gold-deep),var(--gold));color:#120b22;font-weight:600
}
nav a.logout{margin-top:.6rem;color:var(--rosa)}
nav .right{margin:.5rem 0 0}
nav form.inline button{width:100%}

/* ---------- Botón de menú (solo en móvil) ---------- */
.nav-fab{
  position:fixed;right:1.5rem;width:58px;height:58px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:1.5rem;text-decoration:none;
  background:linear-gradient(145deg,var(--gold-bright),var(--gold) 55%,var(--gold-deep));
  color:#160e2b;box-shadow:0 4px 14px rgba(109,63,212,.35);z-index:999;cursor:pointer;
  transition:transform .15s
}
.nav-fab{bottom:6.2rem;display:none}
.nav-fab:hover{transform:scale(1.07)}

.nav-toggle{display:none}
.nav-overlay{display:none}
@media(max-width:960px){
  :root{--sidebar-w:270px}
  nav{transform:translateX(-105%);transition:transform .25s ease}
  nav a{padding:.7rem .5rem;font-size:1rem}
  .nav-toggle:checked ~ nav{transform:translateX(0)}
  .nav-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:890}
  .nav-toggle:checked ~ .nav-overlay{display:block}
  .nav-fab{display:flex}
  /* El menu deja de ocupar sitio, pero el margen de lectura se queda: con 0 el
     texto salia pegado al borde izquierdo de la pantalla. */
  main.with-sidebar{margin-left:1.2rem !important}
}

/* ---------- Layout ---------- */
/* Ancho completo: el contenido ocupa la ventana. Sin max-width y sin márgenes
   automáticos, así el <main> nunca desborda el viewport y el scroll horizontal
   se queda dentro de quien lo necesita (.tabla-scroll), no en la página. */
main{max-width:100%;margin:1.8rem 1.2rem;padding:0}
main.with-sidebar{margin-left:calc(var(--sidebar-w) + 1.4rem)}
h1,h2{color:var(--gold-bright)}
h1{border-bottom:1px solid var(--gold-deep);padding-bottom:.4rem;letter-spacing:.01em;
   text-shadow:none}
.badge{background:var(--rosa);color:#fff;border-radius:10px;padding:0 .5em;font-size:.8em;margin-left:.2em}
.flash{background:linear-gradient(100deg,var(--gold-deep),var(--gold));color:#140c26;font-weight:600;
  padding:.65rem 1.1rem;border-radius:8px;margin-bottom:1rem;box-shadow:var(--glow)}

.card,.panel,.result,table,.login-box{position:relative}

/* ---------- Stat cards ---------- */
/* Las cifras van en fila y ocupando lo justo. Antes cada una era una tarjeta
   de 180 px de ancho y estirada: cuatro números llenaban la pantalla y había
   que bajar para llegar a lo que se venía a hacer. */
.cards{display:flex;flex-wrap:wrap;gap:.6rem;margin:.9rem 0 1.2rem}
.card{
  background:linear-gradient(160deg,var(--surface),var(--surface2));
  border:1px solid var(--border);border-top:3px solid var(--gold);
  border-radius:var(--radius);padding:1.1rem 1.2rem;transition:transform .15s
}
.card:hover{transform:translateY(-3px);border-color:var(--gold)}
.card .num{font-size:2.3rem;font-family:Georgia,serif;color:var(--gold-bright);line-height:1.1}

/* Las tarjetas de cifras: icono arriba, el número grande, y debajo qué es.
   Sin esto, los tres elementos salen en la misma línea y se lee "34Llaves". */
/* Icono, número y nombre en una línea: se lee igual de rápido y ocupa un
   tercio. Solo crecen si el texto lo pide, no por defecto. */
.cards .card{display:flex;flex-direction:row;align-items:baseline;gap:.45rem;
  padding:.5rem .9rem;border-top-width:2px;flex:0 0 auto}
.cards .card:hover{transform:none}
.cards .card .ico{font-size:1rem;line-height:1}
.cards .card strong{font-size:1.15rem;font-family:Georgia,serif;
  color:var(--gold-bright);line-height:1.2;font-weight:400}
.cards .card > span:not(.ico){font-size:.78rem;color:var(--muted);line-height:1.3}

/* ---------- Tables ---------- */
table{width:100%;border-collapse:collapse;background:var(--surface);border:1px solid var(--gold-deep);
  border-radius:var(--radius);box-shadow:var(--glow)}
th,td{padding:.6rem .9rem;text-align:left;border-bottom:1px solid var(--border);font-size:.9rem;vertical-align:top}
th{background:linear-gradient(100deg,var(--gold-deep),var(--gold));color:#140c26;font-weight:600;
  letter-spacing:.05em;font-size:.8rem;text-transform:uppercase}
tr:nth-child(even) td{background:rgba(167,139,250,.03)}
tr:hover td{background:rgba(167,139,250,.09)}
a{color:var(--gold-bright)}

/* ---------- Forms & buttons ---------- */
form.inline{display:inline}
input,select,textarea{
  font:inherit;padding:.5rem .65rem;border:1px solid var(--gold-deep);border-radius:8px;
  background:var(--surface2);color:var(--ink);width:100%
}
input:focus,select:focus,textarea:focus{outline:none;box-shadow:0 0 0 2px rgba(167,139,250,.4)}
textarea{min-height:110px}
label{display:block;margin:.6rem 0 .25rem;font-size:.85rem;color:var(--muted);letter-spacing:.02em}
button{
  position:relative;font:inherit;cursor:pointer;letter-spacing:.03em;
  background:linear-gradient(135deg,var(--gold-deep),var(--gold) 90%);
  color:#140c26;font-weight:600;border:1px solid rgba(255,255,255,.18);border-radius:9px;
  padding:.55rem 1.2rem;transition:transform .1s,filter .15s
}
button:hover{filter:brightness(1.12)}
button:active{transform:scale(.97)}
button:disabled{opacity:.55;cursor:default;filter:none}
button.gold{background:linear-gradient(135deg,var(--gold),var(--gold-bright))}
button.rosa{background:linear-gradient(135deg,#a83a72,var(--rosa));color:#fff}
button.small{padding:.28rem .75rem;font-size:.85rem}

/* ---------- Elegir un fichero ----------
   El control nativo es feo y distinto en cada navegador. No se puede sustituir,
   pero SÍ se le puede vestir el botón de dentro, que es lo único que se mira. */
input[type=file]{
  padding:.35rem;border-style:dashed;cursor:pointer;
  font-size:.85rem;color:var(--muted)
}
input[type=file]:hover{border-color:var(--gold)}
input[type=file]::file-selector-button{
  font:inherit;font-weight:600;cursor:pointer;margin-right:.7rem;
  background:linear-gradient(135deg,var(--gold-deep),var(--gold) 90%);
  color:#140c26;border:1px solid rgba(255,255,255,.18);border-radius:8px;
  padding:.35rem .9rem;transition:filter .15s
}
input[type=file]::file-selector-button:hover{filter:brightness(1.12)}

/* ---------- Panels & results ---------- */
.panel{
  background:linear-gradient(160deg,var(--surface),var(--surface2));border:1px solid var(--gold-deep);
  border-radius:var(--radius);padding:1.1rem 1.4rem;margin:1rem 0;box-shadow:var(--glow)
}
.result{
  white-space:pre-wrap;background:var(--surface);border-left:3px solid var(--gold);
  padding:1.1rem 1.4rem;margin-top:1rem;border-radius:0 var(--radius) var(--radius) 0;box-shadow:var(--glow)
}
.muted{color:var(--muted);font-size:.85rem}

/* ---------- Status pills ---------- */
.status{display:inline-flex;align-items:center;gap:.35em;padding:.15rem .65rem;border-radius:20px;font-size:.76rem;
  font-weight:600;letter-spacing:.02em;color:#fff;background:#4b4168;text-transform:capitalize;
  box-shadow:0 0 0 1px rgba(255,255,255,.08)}
.status.priorizada{background:linear-gradient(100deg,var(--gold-deep),var(--gold));color:#140c26}
.status.evaluada{background:var(--sea)}
.status.en_contacto{background:var(--ok)}
.status.descartada,.status.rechazada{background:var(--danger)}
.status.pendiente{background:var(--rosa);color:#140c26}
.status.aprobada{background:var(--ok)}
.status.enviada{background:var(--info)}
.status.calificado,.status.finalizada{background:linear-gradient(100deg,var(--gold-deep),var(--gold));color:#140c26}
.status.cliente_activo,.status.distribuidor_activo,.status.aprobado{background:var(--ok)}
.status.no_encaja,.status.rechazado,.status.bloqueada{background:var(--danger)}
.status.negociacion,.status.en_ejecucion,.status.en_investigacion{background:var(--sea)}
.status.pendiente_de_aprobacion_humana,.status.pendiente_de_aprobacion{background:var(--rosa);color:#140c26}
.status.alta{background:var(--danger)}
/* Estados de las ejecuciones de agentes (página Actividad) */
.status.en_curso{background:linear-gradient(100deg,var(--gold-deep),var(--gold));color:#140c26}
.status.ok{background:var(--ok)}
.status.error{background:var(--danger)}
.status.perdida{background:#4b4168}
/* Estados de lo aprendido (página Lo aprendido) */
.status.activa{background:var(--ok)}
.status.propuesta{background:var(--rosa);color:#140c26}
.status.en_conflicto{background:var(--danger)}
.status.sustituida,.status.descartada{background:#4b4168}
/* Procedencia de una dirección de correo (cola de aprobación).
   Que se vea la diferencia entre un contacto comprobado y una hipótesis: de
   eso depende que no se queme el dominio con un rebote. */
.contacto{margin:.5rem 0;padding:.5rem .8rem;border-radius:8px;font-size:.86rem;
  border-left:3px solid #4b4168;background:rgba(255,255,255,.04)}
.contacto.verificado{border-left-color:var(--ok)}
.contacto.hipotesis{border-left-color:var(--gold);background:rgba(212,175,55,.10)}
.contacto.descartado{border-left-color:var(--danger);background:rgba(220,80,80,.10)}
/* Permisos: el nivel que no es de nadie, y la lista de candados */
tr.nivel-prohibido{opacity:.75}
tr.nivel-prohibido td{border-left:3px solid var(--danger)}
ul.cortes{list-style:none;padding:0;margin:.5rem 0}
ul.cortes li{padding:.45rem 0;border-bottom:1px solid rgba(255,255,255,.07);line-height:1.5}
ul.cortes li:last-child{border-bottom:0}
label.check{display:block;margin:.6rem 0;line-height:1.5}
label.check input{margin-right:.5rem}
.badge.working{background:var(--gold);color:#140c26}
.run-live{border-color:var(--gold);box-shadow:var(--glow)}
/* Interruptor de modo automático */
.modo{border:1px solid var(--border);border-left:4px solid var(--muted);
  border-radius:10px;padding:.9rem 1.1rem;margin:.6rem 0 1.2rem}
.modo.modo-auto{border-left-color:var(--ok);background:rgba(63,174,122,.06)}
.modo .switch{display:flex;align-items:center;gap:.6rem;cursor:pointer;
  font-size:1rem;color:var(--ink);margin:0}
.modo .switch input{width:auto;margin:0}
.modo p{margin:.5rem 0 0}
.score{font-weight:bold;color:var(--gold-bright);text-shadow:none}

.grid2{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}
@media(max-width:760px){.grid2{grid-template-columns:1fr}}

/* ---------- Login ---------- */
.login-box{
  max-width:400px;margin:12vh auto;background:linear-gradient(165deg,var(--surface),var(--surface2));
  padding:2.6rem 2.2rem;border-radius:20px;border:1px solid var(--border);
  border-top:3px solid var(--gold);text-align:center;
  box-shadow:0 18px 50px rgba(0,0,0,.45)
}
.login-box .brand{font-family:Georgia,serif;font-size:2rem;letter-spacing:.12em;
  background:linear-gradient(100deg,var(--gold) 0%,var(--gold-bright) 45%,var(--rosa) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;margin:0}
.login-box .brand em{font-style:normal;letter-spacing:.06em;opacity:.9}
.login-box .claim{color:var(--muted);font-size:.86rem;margin:.2rem 0 1.6rem;
  font-family:Georgia,serif;font-style:italic}
.login-box .mark{width:56px;height:56px;margin:0 auto 1rem;border-radius:16px;
  display:flex;align-items:center;justify-content:center;font-size:1.7rem;
  background:linear-gradient(145deg,var(--gold-deep),var(--gold));color:#140c26}
.login-box button{width:100%;margin-top:.2rem;padding:.7rem}
.login-box .pie{color:var(--muted);font-size:.74rem;margin:1.4rem 0 0;letter-spacing:.04em}

.col-detalle-btn{display:none}
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.65);z-index:60;align-items:center;justify-content:center;padding:1rem}
.modal-box{background:var(--surface);border:1px solid var(--gold-deep);border-radius:var(--radius);padding:1.2rem;
  max-width:520px;width:100%;max-height:80vh;overflow-y:auto;position:relative;box-shadow:var(--glow-lg)}
.modal-close{float:right;color:var(--gold-bright)}
@media(max-width:760px){
  .col-detalle{display:none}
  .col-detalle-btn{display:table-cell}
}

/* ---------- Asistente (chat) ---------- */
.chat{display:flex;flex-direction:column;gap:.7rem;max-width:640px}
.chat-log{display:flex;flex-direction:column;gap:.6rem;min-height:200px}
.bubble{max-width:80%;padding:.6rem .9rem;border-radius:14px;font-size:.92rem;white-space:pre-wrap}
.bubble.ai{background:var(--surface);border:1px solid var(--gold-deep);align-self:flex-start;border-bottom-left-radius:2px;box-shadow:var(--glow)}
.bubble.user{background:linear-gradient(135deg,var(--gold-deep),var(--gold));color:#140c26;align-self:flex-end;border-bottom-right-radius:2px}

/* ---------- Artefactos ---------- */
.art-nuevo{display:flex;gap:.8rem;align-items:flex-end;flex-wrap:wrap}
.art-nuevo>div{flex:1;min-width:180px}
.art-nuevo>div:first-child{flex:3}
.art-nuevo label{margin-top:0}
.art-nuevo button{white-space:nowrap}
.art-buscar{display:flex;gap:.6rem;align-items:center;margin:.9rem 0}
.art-buscar input{flex:1}
.trabajando{color:var(--gold-bright)}

.cat-chips{display:flex;flex-wrap:wrap;gap:.4rem;margin:1.1rem 0 .3rem}
.chip{display:inline-flex;align-items:center;gap:.35em;padding:.28rem .8rem;border-radius:20px;
  border:1px solid var(--border);background:var(--surface);color:var(--ink);
  font-size:.82rem;text-decoration:none}
.chip:hover{border-color:var(--gold);color:var(--gold-bright)}
.chip.on{background:linear-gradient(100deg,var(--gold-deep),var(--gold));color:#140c26;border-color:transparent}
.chip .n{opacity:.7;font-size:.78em}

.art-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:1rem;margin:1.2rem 0}
.art-card{display:flex;flex-direction:column;gap:.5rem;padding:1rem 1.1rem;
  background:linear-gradient(165deg,var(--surface),var(--surface2));
  border:1px solid var(--border);border-top:3px solid var(--border);
  border-radius:var(--radius);text-decoration:none;color:var(--ink);
  transition:transform .12s,border-color .12s}
.art-card:hover{transform:translateY(-3px);border-color:var(--gold)}
.art-card.status-aprobado{border-top-color:var(--ok)}
.art-card.status-en_revision{border-top-color:var(--gold)}
.art-card.status-borrador{border-top-color:var(--muted)}
.art-card.status-obsoleto{opacity:.55}
.art-card h3{margin:0;font-size:1.02rem;color:var(--gold-bright);line-height:1.3}
.art-cab{display:flex;justify-content:space-between;align-items:center;gap:.5rem;flex-wrap:wrap}
.art-kind{font-size:.76rem;color:var(--muted);letter-spacing:.02em}
.art-res{margin:0;font-size:.86rem;color:var(--ink);opacity:.85;
  display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.art-pie{display:flex;gap:.4rem;align-items:center;flex-wrap:wrap;margin-top:auto;font-size:.8rem}
.art-thumb{margin:-1rem -1.1rem .2rem;border-radius:var(--radius) var(--radius) 0 0;overflow:hidden;
  aspect-ratio:16/10;background:var(--bg)}
.art-thumb img{width:100%;height:100%;object-fit:cover;display:block}

.art-meta{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap;margin:.2rem 0 1rem}
.art-explica h2{font-size:1rem;margin:.9rem 0 .2rem}
.art-explica h2:first-child{margin-top:0}
.art-explica p{margin:0}
.art-acciones{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap;margin:1rem 0}
.art-acciones .boton{display:inline-block;padding:.28rem .75rem;font-size:.85rem;border-radius:8px;
  border:1px solid var(--gold-deep);text-decoration:none;color:var(--gold-bright)}
.art-acciones .boton:hover{background:rgba(167,139,250,.14)}
.art-imagen{width:100%;max-width:760px;border-radius:var(--radius);display:block}

.revision{border-left:4px solid var(--muted)}
.revision.v-aprobado{border-left-color:var(--ok)}
.revision.v-cambios{border-left-color:var(--gold)}
.revision.v-rechazado{border-left-color:var(--danger)}
.revision-notas{white-space:pre-wrap;font-size:.88rem;margin-top:.5rem}

.documento{line-height:1.75}
.documento h2{font-size:1.35rem;margin:1.6rem 0 .5rem;border-bottom:1px solid var(--border);padding-bottom:.3rem}
.documento h3{font-size:1.1rem;margin:1.2rem 0 .35rem;color:var(--gold)}
.documento h4,.documento h5,.documento h6{font-size:1rem;margin:1rem 0 .3rem;color:var(--gold)}
.documento p{margin:.6rem 0}
.documento ul,.documento ol{margin:.5rem 0 .8rem;padding-left:1.4rem}
.documento li{margin:.25rem 0}
.documento blockquote{margin:.8rem 0;padding:.4rem 0 .4rem 1rem;border-left:3px solid var(--gold-deep);
  color:var(--muted);font-style:italic}
.documento code{background:var(--surface2);padding:.1em .4em;border-radius:5px;font-size:.9em}
.documento hr{border:none;border-top:1px solid var(--border);margin:1.4rem 0}
.documento table{margin:.8rem 0}
.tabla-scroll{overflow-x:auto}

/* ---------- Correo ---------- */
.correo.recibido{border-left:4px solid var(--ok)}
.correo.enviado{border-left:4px solid var(--gold-deep)}
.correo-cuerpo{white-space:pre-wrap;font-size:.88rem;margin-top:.6rem;
  border-top:1px solid var(--border);padding-top:.6rem}

/* ---------- Ficha legal, costes y márgenes ---------- */
textarea.mono{font-family:ui-monospace,'Cascadia Mono',Consolas,monospace;
  font-size:.84rem;line-height:1.65;min-height:auto}
.secreto{font-size:.7rem;font-weight:600;letter-spacing:.04em;color:var(--rosa);
  border:1px solid var(--rosa);border-radius:20px;padding:.1rem .6rem;
  vertical-align:middle;margin-left:.5rem}
.aviso-secreto{background:rgba(232,121,184,.09);border:1px solid var(--rosa);
  border-radius:var(--radius);padding:.9rem 1.1rem;margin:1.1rem 0;font-size:.88rem}
.costes-crudos{white-space:pre-wrap;font-family:ui-monospace,Consolas,monospace;
  font-size:.8rem;line-height:1.7;color:var(--muted);margin:0}
table.margenes input.pvp{width:100px;margin:0;padding:.3rem .5rem;font-size:.88rem}
table.margenes .coste,table.margenes .destino{font-variant-numeric:tabular-nums;color:var(--muted)}
table.margenes .m-eur,table.margenes .m-pct,table.margenes .m-x{
  font-variant-numeric:tabular-nums;font-weight:700}
table.margenes .m-pct.bueno{color:var(--ok)}
table.margenes .m-pct.regular{color:var(--gold)}
table.margenes .m-pct.malo{color:var(--danger)}

/* ---------- Adjuntar imágenes a un encargo ---------- */
.adjuntar{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;margin:.7rem 0;
  padding:.7rem .9rem;border:1px dashed var(--gold-deep);border-radius:var(--radius);
  cursor:pointer;font-size:.86rem;color:var(--gold-bright)}
.adjuntar:hover{background:rgba(167,139,250,.08)}
.adjuntar input[type=file]{width:auto;flex:none;font-size:.8rem;padding:.2rem;
  background:transparent;border:none;color:var(--muted)}
.adjuntar .muted{flex:1 1 100%}

/* ---------- Conversaciones ---------- */
.respondio{color:var(--ok);font-size:1.05rem}
.art-acciones .boton.destacado{border-color:var(--gold);background:rgba(167,139,250,.12)}

/* ---------- URLs de los trabajos automáticos ---------- */
table.cron-urls td{vertical-align:middle;font-size:.84rem}
table.cron-urls code{font-size:.8rem}
table.cron-urls code.url{word-break:break-all;color:var(--gold-bright)}

/* ---------- Tablas de datos y sellos de estado ----------
   Nacieron en Margenes para el tarifario y las usa tambien Errores y
   aprendizaje. Estan aqui porque son de la casa, no de una pagina: un sello
   verde tiene que significar lo mismo en todas partes. */
table.tarifa{width:100%;border-collapse:collapse;margin-top:.7rem;font-size:.86rem}
table.tarifa th{text-align:left;font-size:.72rem;text-transform:uppercase;
  letter-spacing:.04em;color:var(--muted);border-bottom:1px solid var(--linea);
  padding:.35rem .5rem}
table.tarifa td{padding:.45rem .5rem;border-bottom:1px solid var(--linea);
  vertical-align:top}
table.tarifa td.num{text-align:right;font-variant-numeric:tabular-nums;
  white-space:nowrap}
table.tarifa td.precio{color:var(--gold)}
table.tarifa .mini{font-size:.72rem;display:block;max-width:34ch}
table.tarifa tr.v-no_vender{opacity:.55}
.mult{font-weight:600}
.mult.bueno{color:#2e7d5b}.mult.regular{color:#a97a1e}.mult.malo{color:#a33}
.sello{font-size:.68rem;text-transform:uppercase;letter-spacing:.05em;
  padding:.12rem .45rem;border-radius:99px;white-space:nowrap}
.sello.bueno{background:rgba(46,125,91,.16);color:#2e7d5b}
.sello.regular{background:rgba(169,122,30,.16);color:#a97a1e}
.sello.malo{background:rgba(163,51,51,.16);color:#a33}
.recomendacion{margin-top:.8rem;padding:.6rem .8rem;border-radius:4px;
  background:var(--salt-2,rgba(0,0,0,.03));font-size:.88rem}
table.ranking td:first-child a{color:inherit;text-decoration:none;
  border-bottom:1px dotted var(--muted)}

/* --- El micrófono ---------------------------------------------------------
   Un solo botón flotante que se coloca sobre el campo que tiene el foco. Va
   con position:fixed porque el JS le pasa coordenadas de pantalla, no de
   documento: así vale igual dentro de un hilo con scroll propio. */
.mic{position:fixed;z-index:60;display:none;width:24px;height:24px;padding:0;
  line-height:22px;text-align:center;font-size:.82rem;cursor:pointer;
  border:1px solid var(--border);border-radius:50%;
  background:var(--surface2);color:var(--ink);opacity:.55;
  transition:opacity .15s,transform .15s}
.mic:hover{opacity:1;transform:scale(1.12)}
.mic-visible{display:block}
.mic-on{opacity:1;border-color:var(--rosa);color:var(--rosa);
  background:rgba(232,121,184,.16);animation:mic-late 1.1s ease-in-out infinite}
@keyframes mic-late{0%,100%{box-shadow:0 0 0 0 rgba(232,121,184,.55)}
                    50%{box-shadow:0 0 0 6px rgba(232,121,184,0)}}

/* Los mandos de un agente dentro de su ficha: apartar y retirar. */
.ag-mando{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;
  margin:.7rem 0 .2rem;padding-top:.7rem;border-top:1px solid var(--border)}
.ag-mando form{margin:0}
.ag-mando .muted{font-size:.74rem}

/* ---------- Grupos del menú ---------- */
/* Acordeón nativo: <details name="navg"> hace que al abrir uno se cierren los
   demás sin una línea de JavaScript. */
nav .nav-grupo{border-radius:9px}
nav .nav-grupo + .nav-grupo{margin-top:.1rem}
nav .nav-grupo summary{
  position:relative;list-style:none;cursor:pointer;user-select:none;
  display:flex;align-items:center;gap:.65rem;
  padding:.5rem .7rem;border-radius:9px;
  color:#b9aee0;font-size:.74rem;font-weight:600;
  letter-spacing:.09em;text-transform:uppercase;
  transition:background .15s,color .15s
}
nav .nav-grupo summary::-webkit-details-marker{display:none}
nav .nav-grupo summary:hover{background:rgba(167,139,250,.10);color:var(--gold-bright)}
nav .nav-grupo summary .ico{font-size:.95rem;width:1.3em;text-align:center}
/* La flechita, a la derecha y girando al abrir */
nav .nav-grupo summary::after{
  content:'›';margin-left:auto;font-size:1.1rem;line-height:1;opacity:.5;
  transition:transform .18s ease
}
nav .nav-grupo[open] summary::after{transform:rotate(90deg)}
nav .nav-grupo[open] summary{color:var(--gold-bright)}
/* Las pantallas de dentro, sangradas y con una guía a la izquierda */
nav .nav-grupo > a{
  margin-left:.85rem;padding-left:.85rem;font-size:.85rem;
  border-left:1px solid rgba(167,139,250,.20);border-radius:0 9px 9px 0
}
nav .nav-grupo > a:first-of-type{margin-top:.15rem}
nav .nav-grupo > a.active{border-left-color:transparent}
/* El globito del grupo solo cuando está cerrado: si está abierto ya se ven
   los de dentro y sería contarlo dos veces. */
nav .badge.grupo{background:rgba(167,139,250,.28);color:#efeaff}
nav .nav-grupo[open] summary .badge.grupo{display:none}
/* Lo que va suelto abajo, fuera de los grupos */
nav a.nav-suelto{margin-top:.5rem}

/* ---------- Barra de «cómo se trabaja aquí» ---------- */
/* Va arriba de cada pantalla, plegada si está todo a mano y abierta si hay
   algo automático: de un vistazo se sabe si aquí dentro trabaja alguien solo. */
.auto-barra{
  margin:0 0 1.1rem;border:1px solid rgba(167,139,250,.22);border-radius:12px;
  background:rgba(167,139,250,.05)
}
.auto-barra.encendida{
  border-color:var(--gold-deep);background:linear-gradient(100deg,rgba(198,160,74,.10),transparent)
}
.auto-barra summary{
  list-style:none;cursor:pointer;user-select:none;
  display:flex;align-items:center;gap:.6rem;padding:.7rem .95rem;
  font-size:.82rem;font-weight:600;letter-spacing:.04em;color:var(--gold-bright)
}
.auto-barra summary::-webkit-details-marker{display:none}
.auto-barra summary::after{
  content:'›';margin-left:.2rem;font-size:1.05rem;opacity:.5;transition:transform .18s ease
}
.auto-barra[open] summary::after{transform:rotate(90deg)}
.auto-estado{
  margin-left:auto;font-size:.7rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  padding:.15rem .55rem;border-radius:999px;
  background:rgba(255,255,255,.06);color:var(--muted)
}
.auto-barra.encendida .auto-estado{
  background:linear-gradient(100deg,var(--gold-deep),var(--gold));color:#120b22
}
.auto-form{padding:.2rem .95rem .95rem;display:flex;flex-direction:column;gap:.55rem}
.auto-casilla{
  display:flex;align-items:flex-start;gap:.65rem;padding:.55rem .7rem;border-radius:9px;
  cursor:pointer;transition:background .15s
}
.auto-casilla:hover{background:rgba(167,139,250,.08)}
.auto-casilla input{margin-top:.18rem;accent-color:var(--gold);width:1rem;height:1rem;flex:none}
.auto-casilla strong{display:block;font-size:.88rem;font-weight:600}
.auto-casilla em{display:block;margin-top:.12rem;font-size:.78rem;font-style:normal;color:var(--muted);line-height:1.45}
/* Las gordas: las que dejan salir algo al mundo sin que nadie lo mire */
.auto-casilla.gorda{border:1px solid rgba(217,140,154,.35);background:rgba(217,140,154,.06)}
.auto-casilla.gorda strong{color:var(--rosa)}
.auto-pie{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;margin-top:.2rem}
.auto-pie .muted{font-size:.76rem}

/* ---------- Lo preparado dentro de una tarea, plegable ---------- */
/* Un dosier entero desplegado tapaba la conversación. Se abre solo cuando hay
   algo esperando decisión. */
.t-preparado > summary{
  list-style:none;cursor:pointer;user-select:none;
  display:flex;align-items:center;gap:.6rem;padding:.15rem 0
}
.t-preparado > summary::-webkit-details-marker{display:none}
.t-preparado > summary::after{
  content:'›';margin-left:auto;font-size:1.2rem;opacity:.5;transition:transform .18s ease
}
.t-preparado[open] > summary::after{transform:rotate(90deg)}
.t-preparado > summary:hover{color:var(--gold-bright)}
.t-preparado > summary .muted{font-size:.76rem}

/* La ventana de empujar la casa: su respuesta, tal cual la manda el latido. */
.latir-salida{
  background:rgba(0,0,0,.3);padding:.8rem 1rem;border-radius:.5rem;
  white-space:pre-wrap;font-size:.82rem;margin-top:.8rem;
  max-height:40vh;overflow-y:auto;line-height:1.5
}