/* 07/08/2026 JVN: misma paleta que la web nueva, para que esto no parezca otra empresa. */
:root{
/* 28/08/2026 JVN: SIN ESTO LOS CONTROLES NATIVOS SE PINTAN PARA UN TEMA CLARO.
El icono del calendario de un `datetime-local` sale gris oscuro sobre fondo oscuro, o sea
invisible: el campo parece una caja de texto y hay que escribir la fecha a mano. Con esto el
navegador pinta el icono, el desplegable del calendario y las flechitas de los números en
oscuro. Vale para toda la consola, no solo para las fechas. */
color-scheme:dark;
--bg:#13100b; --sup:#1a160f; --sup2:#221c14; --linea:#2b241a;
--txt:#f4eee3; --apagado:#a99d8a; --ambar:#f8ae4f; --ambar2:#a6640a;
--ok:#5fb37a; --mal:#c0603b;
--mono:ui-monospace,"SF Mono",Menlo,monospace;
--sans:"Helvetica Neue",Helvetica,Arial,system-ui,sans-serif;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--txt);font-family:var(--sans);line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit;color:inherit}
/* 11/08/2026 JVN: dos filas. Con una sola, las métricas empujaban el menú y el perfil
abajo y la cabecera quedaba descuadrada. */
.cabecera{display:flex;flex-direction:column;gap:10px;
padding:12px 24px 0;border-bottom:1px solid var(--linea);background:rgba(19,16,11,.9);
position:sticky;top:0;z-index:10;backdrop-filter:blur(8px)}
.cabecera .fila{display:flex;align-items:center;justify-content:space-between;gap:20px}
.cabecera .fila.abajo{border-top:1px solid var(--linea);padding-top:2px;margin-top:2px}
.cabecera .derecha{display:flex;align-items:center;gap:12px}
.marca{font-weight:800;letter-spacing:-.02em;font-size:19px}
.marca b{color:var(--ambar)}
.marca span{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
color:var(--apagado);font-weight:400;margin-left:8px}
.metricas{display:flex;gap:20px;font-family:var(--mono);font-size:11.5px;color:var(--apagado);flex-wrap:wrap}
.metricas b{color:var(--txt);font-weight:600}
main{padding:28px 24px 80px;max-width:1240px;margin:0 auto}
.cargando{color:var(--apagado);font-family:var(--mono);font-size:13px;padding:40px 0}
h1{font-size:clamp(24px,3vw,32px);letter-spacing:-.025em;margin:0 0 6px}
h2{font-size:16px;letter-spacing:-.01em;margin:0 0 14px}
.sub{color:var(--apagado);font-size:14px;margin:0 0 26px}
.volver{font-family:var(--mono);font-size:12px;color:var(--apagado);display:inline-block;margin-bottom:16px}
.volver:hover{color:var(--ambar)}
/* rejilla de clientes */
.buscador{width:100%;max-width:420px;background:var(--sup);border:1px solid var(--linea);
border-radius:10px;padding:10px 14px;margin-bottom:22px}
.buscador:focus{outline:none;border-color:var(--ambar)}
.rejilla{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.tarjeta{display:block;background:var(--sup);border:1px solid var(--linea);border-radius:14px;
padding:18px 20px;transition:border-color .15s,transform .15s}
.tarjeta:hover{border-color:var(--ambar);transform:translateY(-2px)}
.tarjeta h3{margin:0 0 4px;font-size:16px;letter-spacing:-.01em}
.tarjeta .sector{font-size:12.5px;color:var(--apagado);margin-bottom:12px;min-height:32px}
.tarjeta .pie{display:flex;justify-content:space-between;font-family:var(--mono);font-size:11px;color:var(--apagado)}
.chip{display:inline-block;font-family:var(--mono);font-size:10px;letter-spacing:.06em;
text-transform:uppercase;padding:2px 7px;border-radius:5px;border:1px solid var(--linea);color:var(--apagado)}
.chip.activo{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 40%,var(--linea))}
/* 12/08/2026 JVN: la finalidad de una conexión es una categoría, no un estado. Va en ámbar
apagado para que no compita con «producción» ni con «sin acceso», que son los chips que
piden acción. En la ficha del cliente conviven cuatro en una columna de 340px. */
.chip.fin{color:var(--ambar);border-color:color-mix(in srgb,var(--ambar) 32%,var(--linea))}
/* ficha de cliente */
.dos{display:grid;grid-template-columns:340px 1fr;gap:26px;align-items:start}
.panel{background:var(--sup);border:1px solid var(--linea);border-radius:14px;padding:18px 20px;margin-bottom:16px}
.fuente{display:flex;justify-content:space-between;align-items:center;padding:9px 0;border-bottom:1px solid var(--linea);font-size:13.5px}
.fuente:last-child{border-bottom:0}
.fuente .n{font-family:var(--mono);font-size:11.5px;color:var(--apagado)}
.docs{list-style:none;margin:0;padding:0}
.docs li{padding:7px 0;border-bottom:1px solid var(--linea)}
.docs li:last-child{border-bottom:0}
.docs a{font-size:13px;display:flex;justify-content:space-between;gap:12px}
.docs a:hover{color:var(--ambar)}
.docs .meta{font-family:var(--mono);font-size:10.5px;color:var(--apagado);white-space:nowrap}
/* chat */
.chat{display:flex;flex-direction:column;height:calc(100vh - 210px);min-height:460px;
background:var(--sup);border:1px solid var(--linea);border-radius:14px;overflow:hidden}
.hilo{flex:1;overflow-y:auto;padding:20px;display:flex;flex-direction:column;gap:16px}
.msg{max-width:88%;padding:12px 16px;border-radius:12px;font-size:14.5px;white-space:pre-wrap;word-wrap:break-word}
.msg.usuario{align-self:flex-end;background:var(--sup2);border:1px solid var(--linea)}
.msg.cerebro{align-self:flex-start;background:transparent;border:1px solid var(--linea);border-left:2px solid var(--ambar)}
.msg.error{border-color:var(--mal);color:#ffb397}
.leidos{margin-top:10px;padding-top:9px;border-top:1px solid var(--linea);
font-family:var(--mono);font-size:10.5px;color:var(--apagado);white-space:normal}
.pensando{align-self:flex-start;font-family:var(--mono);font-size:12px;color:var(--ambar)}
.pensando::after{content:'';animation:puntos 1.2s steps(4,end) infinite}
@keyframes puntos{0%{content:''}25%{content:'.'}50%{content:'..'}75%{content:'...'}}
.escribir{display:flex;gap:10px;padding:14px;border-top:1px solid var(--linea);background:var(--sup2)}
.escribir textarea{flex:1;resize:none;background:var(--bg);border:1px solid var(--linea);
border-radius:10px;padding:11px 14px;font-size:14.5px;min-height:46px;max-height:160px}
.escribir textarea:focus{outline:none;border-color:var(--ambar)}
.btn{background:var(--ambar);color:#1a1206;border:0;border-radius:10px;padding:0 20px;
font-weight:700;cursor:pointer;white-space:nowrap}
.btn:disabled{opacity:.45;cursor:default}
.aviso{background:color-mix(in srgb,var(--mal) 12%,transparent);border:1px solid var(--mal);
border-radius:10px;padding:12px 16px;font-size:13.5px;margin-bottom:18px}
.aviso code{font-family:var(--mono);font-size:12px;background:var(--sup2);padding:1px 6px;border-radius:4px}
/* lector de documento */
.lector{background:var(--sup);border:1px solid var(--linea);border-radius:14px;padding:22px 24px}
.lector pre{white-space:pre-wrap;word-wrap:break-word;font-family:var(--mono);font-size:12.5px;
line-height:1.65;margin:0;color:var(--txt)}
@media(max-width:900px){
.dos{grid-template-columns:1fr}
.chat{height:auto;min-height:520px}
main{padding:20px 16px 60px}
}
/* --- 07/08/2026 JVN: setup: pestañas, formularios, conexiones, modal --- */
.titulo-fila{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;flex-wrap:wrap}
.panel-cab{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px}
.panel-cab h2{margin:0}
.panel-cab .n{font-family:var(--mono);font-size:11px;color:var(--apagado);font-weight:400}
.mini{background:transparent;border:1px solid var(--linea);color:var(--apagado);border-radius:7px;
padding:4px 10px;font-size:11.5px;font-family:var(--mono);cursor:pointer}
.mini:hover{border-color:var(--ambar);color:var(--ambar)}
.mini.peligro:hover{border-color:var(--mal);color:#ffb397}
.mini:disabled{opacity:.5;cursor:default}
.btn.fantasma{background:transparent;border:1px solid var(--linea);color:var(--txt);padding:8px 16px}
.btn.fantasma:hover{border-color:var(--ambar);color:var(--ambar)}
.btn{padding:9px 18px}
/* 31/08/2026 JVN: LAS PESTAÑAS ENVUELVEN. Con quince análisis, una fila de pestañas se salía del
modal y las últimas quedaban fuera del rango visual: existían y no se podía llegar a ellas. Un
`flex-wrap` lo arregla en toda la consola de una vez, no solo aquí. */
.pestanas{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px;
border-bottom:1px solid var(--linea)}
.pestanas button{background:none;border:0;border-bottom:2px solid transparent;color:var(--apagado);
padding:8px 12px;font-size:13px;cursor:pointer;margin-bottom:-1px}
.pestanas button.activa{color:var(--ambar);border-bottom-color:var(--ambar)}
.oculta{display:none!important}
label{display:block;font-size:12px;color:var(--apagado);margin-bottom:12px}
label input,label select,label textarea{display:block;width:100%;margin-top:5px;background:var(--bg);
border:1px solid var(--linea);border-radius:8px;padding:9px 12px;font-size:14px}
label input:focus,label select:focus,label textarea:focus{outline:none;border-color:var(--ambar)}
label textarea{resize:vertical;font-family:var(--mono);font-size:12.5px;line-height:1.6}
.soltar{border:1.5px dashed var(--linea);border-radius:12px;padding:26px 18px;text-align:center;
cursor:pointer;transition:border-color .15s,background .15s}
.soltar:hover,.soltar.encima{border-color:var(--ambar);background:color-mix(in srgb,var(--ambar) 7%,transparent)}
.soltar.trabajando{opacity:.5;pointer-events:none}
.soltar p{margin:0 0 6px;font-size:14px}
.soltar small{color:var(--apagado);font-family:var(--mono);font-size:10.5px}
.conexion{display:flex;justify-content:space-between;gap:14px;padding:12px 0;border-bottom:1px solid var(--linea)}
.conexion:last-child{border-bottom:0}
.conexion .ruta{font-family:var(--mono);font-size:11px;color:var(--apagado);word-break:break-all;margin:3px 0}
.conexion .n{font-family:var(--mono);font-size:10.5px;color:var(--apagado)}
.conexion .botones{display:flex;flex-direction:column;gap:6px;flex:none}
.error-linea{color:#ffb397;font-size:11px;font-family:var(--mono);margin-top:5px}
.docs li{display:flex;justify-content:space-between;gap:12px;align-items:center;font-size:13px}
.docs li a{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.docs .meta{display:flex;align-items:center;gap:8px}
.borrar{background:none;border:0;color:var(--apagado);cursor:pointer;font-size:16px;line-height:1;padding:0 2px}
.borrar:hover{color:var(--mal)}
/* 08/09/2026 JVN: esta clase ya no la usa nadie —se unificó en `.borrar-fila`, al final del
fichero— y se deja porque un `.borrar` que aparezca mañana en otra pantalla tiene que seguir
pareciéndose a algo. Lo que se pinta de nuevo va con `.borrar-fila`. */
.fondo{position:fixed;inset:0;background:rgba(0,0,0,.65);display:flex;align-items:center;
justify-content:center;z-index:50;padding:20px}
.modal{background:var(--sup);border:1px solid var(--linea);border-radius:16px;padding:24px;
width:100%;max-width:460px;max-height:88vh;overflow-y:auto}
.modal h2{margin:0 0 18px;font-size:18px}
.acciones{display:flex;justify-content:flex-end;gap:10px;margin-top:8px}
.flotante{position:fixed;bottom:22px;right:22px;z-index:60;background:var(--sup2);
border:1px solid var(--ok);border-left:3px solid var(--ok);border-radius:10px;padding:12px 18px;
font-size:13.5px;max-width:420px;animation:entra .2s}
.flotante.mal{border-color:var(--mal);border-left-color:var(--mal);color:#ffb397}
@keyframes entra{from{opacity:0;transform:translateY(8px)}}
.metricas .si{color:var(--ok)}
.metricas .no{color:var(--mal)}
/* --- 07/08/2026 JVN: acceso, usuario y barra de trabajos --- */
.yo{font-family:var(--mono);font-size:11.5px;color:var(--apagado);display:flex;align-items:center;gap:8px}
body.sin-sesion .cabecera .metricas,body.sin-sesion .cabecera .yo,body.sin-sesion .trabajos{display:none}
.acceso{max-width:380px;margin:8vh auto 0;background:var(--sup);border:1px solid var(--linea);
border-radius:16px;padding:30px}
.acceso h1{font-size:24px;margin-bottom:4px}
.acceso .sub{margin-bottom:22px;font-size:13.5px}
.acceso .btn{width:100%;margin-top:4px}
.trabajos{display:flex;flex-wrap:wrap;gap:10px;padding:9px 24px;background:var(--sup2);
border-bottom:1px solid var(--linea);font-family:var(--mono);font-size:11.5px}
.trabajos .tr{color:var(--ambar)}
.trabajos .tr.pendiente{color:var(--apagado)}
.trabajos .tr.error{color:#ffb397}
/* --- 07/08/2026 JVN: ajustes --- */
.ajustes{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:16px;align-items:start}
.ayuda{display:block;margin-top:5px;font-size:11px;line-height:1.5;color:var(--apagado);opacity:.85}
.candado{font-size:10px;opacity:.7}
.yo .eng{color:var(--ambar);font-family:var(--mono);font-size:11.5px}
.yo .eng:hover{text-decoration:underline}
/* el error del acceso se queda escrito, no se desvanece */
.acceso .fallo{margin:14px 0 0;padding:11px 14px;border-radius:9px;font-size:13px;
background:color-mix(in srgb,var(--mal) 14%,transparent);border:1px solid var(--mal);color:#ffb397}
.acceso .cambiar{margin:16px 0 0;font-size:12.5px;color:var(--apagado);text-align:center}
.acceso .cambiar a{color:var(--ambar);text-decoration:underline}
/* --- 08/08/2026 JVN: menú de secciones y vistas nuevas --- */
.menu{display:flex;gap:4px;flex-wrap:wrap}
.menu a{font-size:13.5px;color:var(--apagado);padding:6px 12px;border-radius:8px}
.menu a:hover{color:var(--txt);background:var(--sup)}
.menu a.activo{color:var(--ambar);background:var(--sup)}
body.sin-sesion .menu{display:none}
.tarjeta.estatico{cursor:default}
.tarjeta.estatico:hover{border-color:var(--linea);transform:none}
.tarjeta .docs{margin-top:10px}
.tarjeta .docs li{padding:4px 0;border:0;font-size:12.5px}
.apagado{color:var(--apagado)}
.tabla{width:100%;border-collapse:collapse;font-size:13.5px}
.tabla th{text-align:left;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;
text-transform:uppercase;color:var(--apagado);font-weight:400;padding:0 12px 10px 0;border-bottom:1px solid var(--linea)}
.tabla td{padding:10px 12px 10px 0;border-bottom:1px solid var(--linea)}
.tabla tr:last-child td{border-bottom:0}
.tabla .der{text-align:right}
.tabla a:hover{color:var(--ambar)}
/* --- 08/08/2026 JVN: guías de configuración y panel de Salesforce --- */
.guia{margin:0 0 16px;border:1px solid var(--linea);border-radius:10px;background:var(--bg)}
.guia summary{cursor:pointer;padding:10px 14px;font-size:13px;color:var(--ambar);list-style:none}
.guia summary::before{content:'▸ ';font-size:11px}
.guia[open] summary::before{content:'▾ '}
.guia ol{margin:0;padding:0 18px 12px 34px;font-size:12.5px;line-height:1.7;color:var(--apagado)}
.guia li{margin-bottom:5px}
.guia .permisos{padding:0 16px 10px;font-size:12px;color:var(--apagado)}
.guia .permisos ul{margin:6px 0 0;padding-left:18px}
.guia code{font-family:var(--mono);font-size:11px;color:var(--txt);word-break:break-all}
.guia .nota{margin:0;padding:10px 16px 14px;font-size:12px;color:var(--apagado);
border-top:1px solid var(--linea)}
.guia p{padding:0 16px 12px;margin:0;font-size:12.5px}
.panel-sf{margin-bottom:18px}
.conectado{display:flex;justify-content:space-between;gap:14px;align-items:flex-start;
background:color-mix(in srgb,var(--ok) 9%,transparent);border:1px solid color-mix(in srgb,var(--ok) 40%,var(--linea));
border-radius:10px;padding:12px 14px;font-size:13px}
.conectado .ruta{font-family:var(--mono);font-size:11px;color:var(--apagado);margin-top:3px;word-break:break-all}
.conectado .n{font-family:var(--mono);font-size:10.5px;color:var(--apagado);margin-top:2px}
.fallo{background:color-mix(in srgb,var(--mal) 12%,transparent);border:1px solid var(--mal);
border-radius:9px;padding:10px 13px;font-size:12.5px;color:#ffb397;margin:0 0 12px}
.copiable{display:inline-block;margin-top:5px;background:var(--sup2);border:1px solid var(--linea);
border-radius:6px;padding:5px 9px;font-family:var(--mono);font-size:11px;user-select:all;word-break:break-all}
.sub-t{font-size:13.5px;margin:18px 0 10px;display:flex;gap:8px;align-items:baseline}
.sub-t .n{font-family:var(--mono);font-size:10.5px;color:var(--apagado);font-weight:400}
.buscador.chico{max-width:100%;padding:7px 11px;font-size:13px;margin-bottom:10px}
.objetos{max-height:280px;overflow-y:auto;border:1px solid var(--linea);border-radius:9px;padding:6px}
.obj{display:flex;gap:9px;align-items:baseline;padding:5px 7px;border-radius:6px;margin:0;font-size:13px;color:var(--txt)}
.obj:hover{background:var(--sup2)}
.obj input{width:auto;margin:0;flex:none}
.obj .n{margin-left:auto;font-family:var(--mono);font-size:10.5px;color:var(--apagado)}
.acciones-obj{display:flex;gap:10px;justify-content:flex-end;margin-top:12px}
/* campos bloqueados mientras la integración está viva */
label.bloqueado{opacity:.55}
label.bloqueado input{background:var(--sup2);cursor:not-allowed}
.panel-sf{margin-top:6px}
/* --- 08/08/2026 JVN: objetos en dos bloques, marcados arriba --- */
.sf-cab{margin-top:14px}
.bloque{border:1px solid var(--linea);border-radius:10px;margin-bottom:12px;overflow:hidden}
.bloque.marcado{border-color:color-mix(in srgb,var(--ambar) 45%,var(--linea));
background:color-mix(in srgb,var(--ambar) 5%,transparent)}
.bloque.vacio{padding:14px;font-size:12.5px;color:var(--apagado);text-align:center;background:transparent}
.bloque-cab{display:flex;align-items:center;gap:9px;padding:8px 12px;border-bottom:1px solid var(--linea);
font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--apagado)}
.bloque.marcado .bloque-cab{color:var(--ambar)}
.bloque-cab .n{background:var(--sup2);border-radius:20px;padding:1px 8px;letter-spacing:0}
.bloque-cab .mini{margin-left:auto;text-transform:none;letter-spacing:0}
.bloque .objetos{max-height:230px;border:0;border-radius:0;padding:5px}
.pendiente{color:var(--ambar)}
/* --- 08/08/2026 JVN: página de tareas --- */
.resumen-tareas{display:flex;gap:8px;flex-wrap:wrap}
.pill{display:inline-block;font-family:var(--mono);font-size:10.5px;letter-spacing:.05em;
padding:3px 9px;border-radius:20px;border:1px solid var(--linea);color:var(--apagado)}
.pill.corriendo{color:var(--ambar);border-color:color-mix(in srgb,var(--ambar) 45%,var(--linea));
background:color-mix(in srgb,var(--ambar) 10%,transparent)}
.pill.pendiente{color:var(--apagado)}
.pill.hecho{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 35%,var(--linea))}
.pill.error{color:#ffb397;border-color:var(--mal);background:color-mix(in srgb,var(--mal) 10%,transparent)}
.tabla .detalle{color:var(--apagado);font-size:12.5px;max-width:340px}
.tabla .n{font-family:var(--mono);font-size:10.5px;color:var(--apagado)}
.malo{color:#ffb397}
.tabla td .n{margin-top:2px}
/* --- 08/08/2026 JVN: ajustes por pestañas y mapa de cuentas --- */
.pestanas.grandes{margin:22px 0 20px;gap:2px}
.pestanas.grandes button{font-size:13.5px;padding:9px 15px}
.panel.ancho{max-width:none}
.resumen-mapa{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.resumen-mapa .filtro{cursor:pointer;background:transparent;font-family:var(--mono)}
.resumen-mapa .filtro:hover{border-color:var(--ambar);color:var(--ambar)}
.resumen-mapa .filtro.activo{color:var(--ambar);border-color:var(--ambar);
background:color-mix(in srgb,var(--ambar) 12%,transparent)}
.acciones-mapa{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:14px}
.acciones-mapa .buscador{margin-bottom:0;max-width:280px;flex:1}
.tabla tr.ignorada{opacity:.42}
.tabla select{background:var(--bg);border:1px solid var(--linea);border-radius:7px;
padding:5px 8px;font-size:12.5px;max-width:220px}
.tabla select:focus{outline:none;border-color:var(--ambar)}
/* 08/08/2026 JVN: los select no heredaban el color y salía texto negro sobre fondo
oscuro. El desplegable nativo lo pinta el sistema, así que option lleva su propio color. */
select{color:var(--txt);background-color:var(--bg)}
select option{color:var(--txt);background-color:var(--sup)}
.tabla select,label select{color:var(--txt)}
/* relación de cada espacio */
.chip.oportunidad{color:#8ab4d8;border-color:color-mix(in srgb,#8ab4d8 40%,var(--linea))}
.chip.red{color:#c9a5e0;border-color:color-mix(in srgb,#c9a5e0 40%,var(--linea))}
.chip.cliente{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 40%,var(--linea))}
.resumen-mapa .filtro b{color:var(--txt);font-weight:600}
/* el número de registros es pulsable */
.enlace{background:none;border:0;padding:0;color:var(--ambar);cursor:pointer;
font:inherit;text-decoration:underline;text-underline-offset:2px}
.enlace:hover{color:var(--txt)}
.grupo-t{font-size:12.5px;margin:16px 0 6px;display:flex;gap:8px;align-items:baseline}
.grupo-t:first-child{margin-top:0}
.grupo-t .n{font-family:var(--mono);font-size:10.5px;color:var(--apagado);font-weight:400}
.modal .docs a{color:var(--ambar)}
.modal{max-width:560px}
/* el desplegable de relación se tiñe según el tipo, para leerlo de un vistazo */
select.rel{font-size:12px;padding:4px 7px;max-width:150px;border-radius:20px}
select.rel.cliente{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 40%,var(--linea))}
select.rel.oportunidad{color:#8ab4d8;border-color:color-mix(in srgb,#8ab4d8 40%,var(--linea))}
select.rel.red{color:#c9a5e0;border-color:color-mix(in srgb,#c9a5e0 40%,var(--linea))}
/* estado de la relación */
select.est-activo{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 40%,var(--linea))}
select.est-pausado{color:#d8c07a;border-color:color-mix(in srgb,#d8c07a 40%,var(--linea))}
select.est-cerrado{color:var(--apagado)}
select.est-perdido{color:#ffb397;border-color:var(--mal)}
.ingesta{margin-top:22px;padding-top:18px;border-top:1px solid var(--linea)}
/* un worker que ha dejado de responder se apaga antes de desaparecer */
.tabla tr.muriendo{opacity:.5}
.tabla tr.muriendo .pill{animation:latir 1.4s ease-in-out infinite}
@keyframes latir{50%{opacity:.4}}
/* --- 08/08/2026 JVN: bandeja de propuestas --- */
.propuestas{display:flex;flex-direction:column;gap:12px;margin-bottom:8px}
.propuesta{background:var(--sup);border:1px solid var(--linea);border-left:3px solid var(--ambar);
border-radius:12px;padding:16px 18px}
.pr-cab{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;flex-wrap:wrap}
.pr-cambio{display:block;margin-top:4px;font-family:var(--mono);font-size:11.5px;color:var(--apagado)}
.pr-cambio .de{color:var(--apagado);text-decoration:line-through}
.pr-cambio .a{color:var(--ambar);font-weight:600}
.pr-botones{display:flex;gap:8px;flex:none}
.pr-motivo{margin:12px 0 0;font-size:13.5px;line-height:1.6;color:var(--txt)}
.pr-pie{margin-top:10px;font-family:var(--mono);font-size:10.5px;color:var(--apagado)}
.pr-pie code{color:var(--apagado)}
/* --- 08/08/2026 JVN: panel de inicio --- */
.cifras{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:12px;margin-bottom:20px}
.cifra{background:var(--sup);border:1px solid var(--linea);border-radius:12px;padding:16px 18px;display:block}
a.cifra:hover{border-color:var(--ambar)}
.cifra b{display:block;font-size:26px;letter-spacing:-.03em;line-height:1.1}
.cifra span{display:block;margin-top:4px;font-family:var(--mono);font-size:10.5px;
letter-spacing:.08em;text-transform:uppercase;color:var(--apagado)}
.avisos{display:flex;flex-direction:column;gap:8px;margin-bottom:22px}
.aviso-fila{display:flex;justify-content:space-between;gap:12px;padding:11px 16px;border-radius:10px;
border:1px solid var(--linea);background:var(--sup);font-size:13.5px}
.aviso-fila.ambar{border-color:color-mix(in srgb,var(--ambar) 45%,var(--linea));
background:color-mix(in srgb,var(--ambar) 7%,transparent)}
.aviso-fila:hover{border-color:var(--ambar);color:var(--ambar)}
.dos-col{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
@media(max-width:900px){.dos-col{grid-template-columns:1fr}}
.barra-fila{display:flex;align-items:center;gap:12px;padding:6px 0;font-size:13px}
.barra-fila .et{width:88px;flex:none;color:var(--apagado)}
.barra-fila .barra{flex:1;height:8px;border-radius:5px;background:var(--sup2);overflow:hidden}
.barra-fila .barra i{display:block;height:100%;background:var(--ambar);border-radius:5px}
.barra-fila .n{font-family:var(--mono);font-size:11px;color:var(--apagado);width:78px;text-align:right}
.filtros-fila{display:flex;gap:22px;flex-wrap:wrap;margin-bottom:8px}
.tarjeta .doms{font-family:var(--mono);font-size:10.5px;color:var(--apagado);margin-bottom:10px;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tarjeta .doms.falta{color:#c0603b}
.detalle-trabajo{max-height:60vh;overflow-y:auto}
.det-bloque{margin-bottom:16px}
.det-bloque .tabla{font-size:12.5px}
.det-bloque .tabla td{padding:6px 10px 6px 0}
.modal:has(.detalle-trabajo){max-width:760px}
/* 24/08/2026 JVN: el detalle de un código lleva tres tablas y el histórico, así que necesita
más ancho que un formulario y poder desplazarse sin sacar la ventana de la pantalla. */
.modal:has(.detalle-codigo){max-width:900px}
.detalle-codigo{max-height:70vh;overflow-y:auto}
.detalle-codigo h3{margin:18px 0 8px}
.detalle-codigo h3:first-child{margin-top:0}
.detalle-codigo .tabla td{word-break:break-word}
/* --- 08/08/2026 JVN: campana de propuestas y paginación --- */
.campana{position:relative;display:flex;align-items:center;color:var(--apagado);padding:6px}
.campana:hover{color:var(--ambar)}
.campana svg{width:19px;height:19px}
.campana .globo{position:absolute;top:0;right:0;background:var(--mal);color:#fff;
font-family:var(--mono);font-size:9.5px;font-weight:700;line-height:1;
min-width:16px;padding:3px 4px;border-radius:9px;text-align:center}
body.sin-sesion .campana{display:none}
.paginas{display:flex;gap:8px;justify-content:center;margin-top:16px}
.pr-motivo{white-space:pre-line}
/* --- 09/08/2026 JVN: navegador de carpetas de Drive --- */
.migas{font-family:var(--mono);font-size:11.5px;margin-bottom:12px;padding-bottom:10px;
border-bottom:1px solid var(--linea)}
.dv-lista{max-height:320px;overflow-y:auto;border:1px solid var(--linea);border-radius:9px;padding:6px}
.dv-fila{display:flex;justify-content:space-between;align-items:center;gap:10px;
padding:6px 8px;border-radius:6px;font-size:13.5px}
.dv-fila:hover{background:var(--sup2)}
.dv-fila .enlace{text-decoration:none;text-align:left;flex:1}
.dv-fila .enlace:hover{text-decoration:underline}
.dv-actual{margin-top:12px;padding:10px 14px;border-radius:9px;background:var(--sup2);
display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:13px}
/* 09/08/2026 JVN: destello verde al guardar una fila, en vez de repintar la tabla */
tr.guardada > td{animation:guardada .8s ease-out}
@keyframes guardada{0%{background:rgba(45,168,105,.22)}100%{background:transparent}}
.rol-sel{font-size:12px;padding:3px 6px}
/* 09/08/2026 JVN: la sugerencia es un botón partido — aceptar a la izquierda, descartar
a la derecha. Descartar solo se ve al pasar por la fila: está ahí cuando hace falta y
no compite con la acción principal. */
.sug{display:inline-flex;align-items:stretch;border:1px solid var(--linea);border-radius:7px;
overflow:hidden;background:var(--sup)}
.sug-si,.sug-no{border:0;background:none;cursor:pointer;font:inherit;font-size:12.5px;
padding:4px 10px;color:var(--txt);transition:background .12s,color .12s}
.sug-si{font-weight:500}
.sug-si:hover{background:rgba(45,168,105,.14);color:var(--bien)}
.sug-si::before{content:'↳ ';color:var(--apagado)}
.sug-no{border-left:1px solid var(--linea);color:var(--apagado);font-size:11.5px;
max-width:0;padding-left:0;padding-right:0;opacity:0;white-space:nowrap;overflow:hidden}
tr:hover .sug-no,.sug-no:focus-visible{max-width:90px;padding-left:9px;padding-right:9px;opacity:1}
.sug-no:hover{background:rgba(200,60,60,.12);color:var(--mal)}
/* 09/08/2026 JVN: al asignar, la fila se va de la pestaña de pendientes */
tr.se-va > td{animation:se-va .32s ease-in forwards;overflow:hidden}
@keyframes se-va{0%{opacity:1}100%{opacity:0;padding-top:0;padding-bottom:0;
font-size:0;line-height:0;border-width:0}}
.pestanas.menudas{margin:0 0 12px}
.pestanas.menudas button{font-size:12.5px;padding:5px 12px}
.pestanas.menudas .n{margin-left:6px;opacity:.65}
/* 10/08/2026 JVN: filtros y paginación de las tablas grandes (actividad y movimientos).
Con miles de filas, ver las 60 últimas no servía de nada. */
.filtros{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:0 0 14px}
.filtros input[type=search]{min-width:240px;flex:1 1 240px}
.filtros input,.filtros select{padding:6px 9px;font-size:13px;border:1px solid var(--linea);
border-radius:6px;background:var(--sup2);color:var(--txt)}
.paginacion{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:14px;
padding-top:12px;border-top:1px solid var(--linea);font-size:13px}
.paginacion .n{margin:0 auto 0 4px;color:var(--apagado)}
.paginacion button[disabled]{opacity:.35;cursor:default}
.paginacion select{padding:4px 8px;font-size:12.5px;border:1px solid var(--linea);
border-radius:6px;background:var(--sup2);color:var(--txt)}
/* 11/08/2026 JVN: el bloque del cerebro nuevo en la cabecera, separado de la base vieja */
#metricas .separa{border-left:1px solid var(--linea);padding-left:14px;margin-left:6px}
/* 11/08/2026 JVN: el Markdown de las respuestas del chat */
.msg.cerebro h3,.msg.cerebro h4,.msg.cerebro h5,.msg.cerebro h6{
margin:14px 0 6px;font-size:14px;color:var(--txt);font-weight:600}
.msg.cerebro h3:first-child,.msg.cerebro h4:first-child{margin-top:0}
.msg.cerebro p{margin:0 0 10px;line-height:1.55}
.msg.cerebro p:last-of-type{margin-bottom:0}
.msg.cerebro ul{margin:0 0 10px;padding-left:20px}
.msg.cerebro li{margin:3px 0;line-height:1.5}
.msg.cerebro code{background:var(--sup2);padding:1px 5px;border-radius:4px;font-size:12.5px}
.msg.cerebro a{color:var(--ambar);text-decoration:underline;text-underline-offset:2px}
.msg.cerebro b{color:var(--txt);font-weight:600}
/* 11/08/2026 JVN: la pantalla de preguntar a toda la empresa */
#hilo-global{min-height:180px;max-height:60vh;overflow-y:auto;margin-bottom:14px}
#hilo-global:empty::before{content:'Pregunta lo que ningún cliente contesta solo.';
color:var(--apagado);font-size:13.5px}
.preguntar{display:flex;gap:8px;align-items:flex-end}
.preguntar textarea{flex:1;padding:9px 11px;border:1px solid var(--linea);border-radius:8px;
background:var(--sup2);color:var(--txt);font:inherit;font-size:13.5px;resize:vertical}
.sugerencias{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px;
padding-top:12px;border-top:1px solid var(--linea)}
.sugerencias .sug-p{font-size:12px;opacity:.8}
.sugerencias .sug-p:hover{opacity:1}
/* 11/08/2026 JVN: el perfil. Antes salía el correo entero y dos enlaces sueltos ocupando
media barra; ahora un botón con las iniciales y lo demás en un desplegable. */
.yo{position:relative;display:flex;align-items:center}
.perfil{width:30px;height:30px;border-radius:50%;border:1px solid var(--linea);
background:var(--sup2);color:var(--ambar);font-family:var(--mono);font-size:11.5px;
font-weight:600;cursor:pointer;letter-spacing:.02em}
.perfil:hover{border-color:var(--ambar)}
.popover{position:absolute;right:0;top:38px;min-width:210px;z-index:30;
background:var(--sup2);border:1px solid var(--linea);border-radius:10px;padding:6px;
box-shadow:0 10px 30px rgba(0,0,0,.45)}
.popover .quien{padding:8px 10px 10px;border-bottom:1px solid var(--linea);margin-bottom:4px;
font-family:var(--mono);font-size:11.5px;color:var(--apagado);word-break:break-all}
.popover .quien .n{display:block;margin-top:3px;opacity:.7}
.popover a,.popover button{display:block;width:100%;text-align:left;padding:8px 10px;
border:0;background:none;color:var(--txt);font:inherit;font-size:13px;border-radius:6px;
cursor:pointer}
.popover a:hover,.popover button:hover{background:rgba(255,255,255,.05);color:var(--ambar)}
/* 11/08/2026 JVN: filas de tabla que se pueden abrir */
tr.pincha{cursor:pointer}
tr.pincha:hover{background:rgba(255,255,255,.035)}
/* 11/08/2026 JVN: el agente flotante. Se pregunta EN MEDIO de estar mirando otra cosa,
así que no puede ser una pantalla a la que haya que irse. */
.agente-boton{position:fixed;right:24px;bottom:24px;z-index:50;
width:54px;height:54px;border-radius:50%;border:0;cursor:pointer;
background:var(--ambar);color:#1a1509;display:grid;place-items:center;
box-shadow:0 8px 26px rgba(0,0,0,.45);transition:transform .15s,box-shadow .15s}
.agente-boton:hover{transform:translateY(-2px);box-shadow:0 12px 32px rgba(0,0,0,.55)}
.agente-boton svg{width:24px;height:24px}
.agente-boton.abierto{transform:scale(.92);opacity:.85}
body.sin-sesion .agente-boton,body.sin-sesion .agente-panel{display:none}
/* 20/08/2026 JVN: el panel se quedaba pequeño para lo que se lee en él. Las respuestas del
cerebro traen tablas, listas de clientes y citas con su ruta, y en 440 px todo eso salía
partido en columnas de tres palabras. Se ensancha y se alarga; el tope sigue atado a la
ventana para que en pantallas pequeñas no se salga. */
.agente-panel{position:fixed;right:24px;bottom:90px;z-index:50;
width:min(680px,calc(100vw - 48px));max-height:min(860px,calc(100vh - 120px));
display:flex;flex-direction:column;
background:var(--sup2);border:1px solid var(--linea);border-radius:14px;
box-shadow:0 18px 50px rgba(0,0,0,.55);overflow:hidden}
.agente-cab{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
padding:13px 15px;border-bottom:1px solid var(--linea)}
.agente-cab b{display:block;font-size:13.5px}
.agente-cab .n{font-size:11.5px;color:var(--apagado)}
.agente-cerrar{background:none;border:0;color:var(--apagado);font-size:22px;line-height:1;
cursor:pointer;padding:0 2px}
.agente-cerrar:hover{color:var(--txt)}
#hilo-agente{flex:1;overflow-y:auto;padding:16px 18px;min-height:280px}
#hilo-agente:empty::before{content:'Pregunta lo que ninguna ficha contesta sola.';
color:var(--apagado);font-size:14px}
.agente-sug{display:flex;flex-direction:column;gap:6px;padding:0 18px 12px}
.agente-sug .sug-p{text-align:left;font-size:13px;padding:8px 12px;border-radius:7px;
border:1px solid var(--linea);background:none;color:var(--apagado);cursor:pointer}
.agente-sug .sug-p:hover{color:var(--ambar);border-color:var(--ambar)}
/* 20/08/2026 JVN: y la caja de escribir, que era de una línea. Aquí no se escriben preguntas
de cinco palabras: se escriben preguntas largas y con contexto. Arranca con sitio para tres
líneas y crece hasta 240 px antes de empezar a hacer scroll. */
.agente-panel .preguntar{padding:13px 18px 16px;border-top:1px solid var(--linea)}
.agente-panel .preguntar textarea{font-size:14.5px;line-height:1.5;padding:11px 13px;
min-height:74px;max-height:240px}
.agente-panel .preguntar .mini{padding:9px 16px;font-size:13.5px}
/* 11/08/2026 JVN: `hidden` DEBE ganar a cualquier display que se ponga después. Sin esto,
el panel del agente se quedaba abierto para siempre: el atributo estaba puesto pero
`.agente-panel{display:flex}` lo pisaba y no había manera de cerrarlo. */
[hidden]{display:none !important}
/* 11/08/2026 JVN: los desplegables de Ajustes → Auditorías. Sin esto el summary sale con la
flecha del navegador y desentona con el resto de la consola. */
.bloque>summary{cursor:pointer;padding:10px 14px;font-size:13px;list-style:none;
display:flex;align-items:center;gap:8px}
.bloque>summary::-webkit-details-marker{display:none}
.bloque>summary::before{content:'▸';font-size:10px;color:var(--apagado)}
.bloque[open]>summary::before{content:'▾'}
.bloque>summary:hover{color:var(--ambar)}
.bloque>label,.bloque>p,.bloque>.tabla,.bloque>button{margin-left:14px;margin-right:14px;
width:calc(100% - 28px)}
.bloque>button{margin-bottom:12px}
.bloque .chip{margin-left:auto}
/* 11/08/2026 JVN: las casillas de tipos de metadata y los buscadores de Ajustes → Auditorías.
Son 112 tipos: sin buscador y en columnas no hay quien encuentre nada. */
.casillas{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:2px 10px;
max-height:340px;overflow-y:auto;margin:0 14px 12px;padding:8px;border:1px solid var(--linea);
border-radius:8px;background:var(--bg)}
.casilla{display:flex;align-items:center;gap:7px;font-size:12.5px;margin:0;padding:2px 4px;
border-radius:5px;cursor:pointer;color:var(--txt)}
.casilla:hover{background:var(--sup2)}
.casilla input{width:auto;margin:0;display:inline-block}
.casilla span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.buscador-tipos,#buscador-procesos{display:block;width:calc(100% - 28px);margin:0 14px 10px;
padding:7px 10px;background:var(--bg);border:1px solid var(--linea);border-radius:8px;
font-size:13px}
.buscador-tipos:focus,#buscador-procesos:focus{outline:none;border-color:var(--ambar)}
/* 11/08/2026 JVN: la guía de cada pantalla de auditorías va siempre abierta: es lo que
explica qué pasa si se toca lo de abajo, y plegada no la lee nadie. */
.guia.abierta{padding:14px 16px;font-size:13px;line-height:1.55}
.guia.abierta p{margin:0 0 8px;max-width:80ch}
.guia.abierta p:last-child{margin-bottom:0}
.guia.abierta strong{color:var(--txt)}
/* 12/08/2026 JVN: el visor de una conversación de chat dentro de la tabla de mappings.
Alto limitado y con scroll propio: un directo puede tener cientos de mensajes y no puede
empujar la tabla entera fuera de la pantalla.
El fondo y el texto van con las variables del tema. La primera versión usaba una variable
que no existe —`--fondo-hundido`— y al no encontrarla caía en un gris casi blanco de
reserva, con el texto claro del tema encima: ilegible. Aquí no valen los valores sueltos:
el tema es oscuro y cualquier color escrito a mano se pelea con él. */
.chat-texto {
max-height: 22rem;
overflow: auto;
white-space: pre-wrap;
word-break: break-word;
font: .82rem/1.6 var(--mono);
color: var(--txt);
background: var(--sup2);
border: 1px solid var(--linea);
border-radius: 6px;
padding: .8rem 1rem;
margin: .5rem 0 0;
}
/* --- 12/08/2026 JVN: las orgs de Salesforce de un cliente ---------------------
Tarjetas y no tabla: el panel del cliente es estrecho y una tabla de cinco columnas
desbordaba por el lateral —la URL de la instancia y el correo de quien conectó salían
cortados y no había forma de leerlos—. Cada org es un bloque que se apila. */
.org {
border: 1px solid var(--linea);
border-radius: 10px;
padding: 12px 14px;
margin-bottom: 10px;
background: var(--sup2);
}
.org:last-child { margin-bottom: 0; }
.org-rota { border-color: var(--mal); }
.org-id {
display: flex; align-items: center; gap: 8px;
flex-wrap: wrap; /* con tres chips, que baje en vez de desbordar */
margin-bottom: 4px;
}
.org-id strong { font-size: 15px; }
/* la URL puede ser larguísima: se recorta con puntos suspensivos y el título la enseña
entera al pasar por encima */
.org-url {
font: 12px/1.4 var(--mono);
color: var(--apagado);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
margin-bottom: 10px;
}
.org-pie {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
flex-wrap: wrap;
font-size: 12px; color: var(--apagado);
}
.org-acciones { display: flex; gap: 6px; flex-shrink: 0; }
.org-motivo {
margin-top: 10px; padding-top: 10px;
border-top: 1px solid var(--linea);
font-size: 12px; color: var(--mal);
}
/* --- auditorías ---------------------------------------------------------- */
/* 12/08/2026 JVN: el informe se lee, no se ojea. Ancho de lectura limitado y aire entre
párrafos: es un documento que se le enseña a un cliente, no un volcado. */
.informe{max-width:78ch;line-height:1.62;font-size:14.5px}
.informe h2{font-size:22px;margin:26px 0 10px;padding-bottom:8px;border-bottom:1px solid var(--linea)}
.informe h2:first-child{margin-top:0}
.informe h3{font-size:17px;margin:22px 0 8px;color:var(--ambar)}
.informe h4,.informe h5{font-size:14.5px;margin:18px 0 6px;color:var(--txt)}
.informe p{margin:0 0 12px}
.informe ul,.informe ol{margin:0 0 14px;padding-left:22px}
.informe li{margin-bottom:5px}
.informe hr{border:0;border-top:1px solid var(--linea);margin:22px 0}
.informe blockquote{margin:0 0 14px;padding:8px 14px;border-left:2px solid var(--ambar2);
color:var(--apagado);background:var(--sup2);border-radius:0 8px 8px 0}
.informe code{font:12.5px/1.5 var(--mono);background:var(--sup2);padding:1px 5px;border-radius:4px}
.informe table{margin-bottom:16px}
/* las tablas de un informe pueden ser anchas: que scrolee la tabla, no la página */
.informe .tabla{display:block;overflow-x:auto;max-width:100%}
pre.codigo{background:var(--sup2);border:1px solid var(--linea);border-radius:10px;
padding:12px 14px;overflow-x:auto;margin:0 0 14px}
pre.codigo code{background:none;padding:0;font-size:12.5px}
/* un hallazgo se distingue por la severidad antes de leer el título */
.hallazgo{border-left:3px solid var(--linea)}
.hallazgo.sev-critica{border-left-color:#e0705f}
.hallazgo.sev-alta{border-left-color:var(--ambar)}
.hallazgo.sev-media{border-left-color:#8ab4d8}
.hallazgo.sev-baja{border-left-color:var(--linea)}
.chip.sev-critica{color:#e0705f;border-color:color-mix(in srgb,#e0705f 40%,var(--linea))}
.chip.sev-alta{color:var(--ambar);border-color:color-mix(in srgb,var(--ambar) 40%,var(--linea))}
.chip.sev-media{color:#8ab4d8;border-color:color-mix(in srgb,#8ab4d8 40%,var(--linea))}
.evidencias{max-height:340px;overflow-y:auto;margin:8px 0 0;padding-left:20px}
.evidencias li{font:12px/1.6 var(--mono);color:var(--apagado)}
/* la fila de la tabla entera es pulsable, que se note */
.fila-aud{cursor:pointer}
.fila-aud:hover{background:var(--sup2)}
/* 01/09/2026 JVN: lo mismo para las filas de las listas de casos que abren un detalle —la de
autores del ritmo de cambio lleva a «qué toca esta persona»—. Misma variable que arriba: dos
hovers distintos para la misma idea es exactamente lo que no se quiere. */
tr.pulsable{cursor:pointer}
tr.pulsable:hover>td{background:var(--sup2)}
tr.pulsable>td:first-child b{text-decoration:underline;text-decoration-style:dotted;
text-underline-offset:2px}
/* 12/08/2026 JVN: la acción de la pantalla, a la altura del párrafo y no del título.
Alineada al final para que el botón no baile según lo largo que sea el texto, y el
párrafo con ancho de lectura para que no se meta debajo. */
.cab-pantalla{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;
flex-wrap:wrap;margin-bottom:26px}
.cab-pantalla .sub{margin:0;max-width:72ch;flex:1 1 420px}
.cab-pantalla .btn{flex:none;padding:11px 22px}
/* 04/09/2026 JVN: el borde de `.btn.fantasma` lo hacía 2 px más alto que el relleno, y puestos
uno al lado del otro en una cabecera eso se ve. Se le da al relleno un borde transparente del
mismo grosor en vez de quitárselo al fantasma: así los dos miden igual sin tocar el ancho. */
/* 04/09/2026 JVN: la ficha de un fichero adjunto. Josep: «se ve en 1 sola linea y queda cutre».
El resumen es un párrafo, no un dato de tabla: necesita ancho de lectura y aire. El nombre y el
estado van arriba en una fila que envuelve, y el botón de quitar al final de esa fila y no en
una columna de 40 px pegada al borde. */
/* 04/09/2026 JVN: las preguntas del consultor. Josep: «las cajas de texto son super cutres,
sin ningún estilo y super pequeñas». Estaban fuera de un `label`, y aquí los campos se estilan
por `label input, label select, label textarea`: una textarea suelta no cogía ni fondo ni borde
ni ancho. Se envuelven en un `label` con clase propia y se les da altura de escribir.
El texto de la pregunta es un párrafo con ancho de lectura, no una línea contra el borde. */
/* 04/09/2026 JVN: la pregunta a la que se acaba de llevar se marca un momento. Con cinco
preguntas en pantalla, un scroll sin señal deja al lector buscando a cuál ha ido. */
.pregunta.senalada{background:color-mix(in srgb,var(--ambar) 10%,transparent);
border-radius:10px;transition:background .3s}
.pregunta{border-top:1px solid var(--linea);padding:14px 0}
.pregunta:first-of-type{border-top:0}
.pregunta.descartada{opacity:.7}
.pregunta-cab{display:flex;gap:10px;align-items:flex-start}
.pregunta-cab .chip{flex:none;margin-top:1px}
.pregunta-texto{margin:0;font-size:14px;line-height:1.55;max-width:78ch}
.pregunta-porque{margin:6px 0 0 calc(10px + 5.4em);font-size:12.5px;line-height:1.55;
color:var(--apagado);max-width:72ch}
.pregunta-caja{margin:10px 0 0;display:block}
.pregunta-caja textarea{display:block;width:100%;background:var(--bg);
border:1px solid var(--linea);border-radius:9px;padding:11px 13px;font-family:inherit;
font-size:14px;line-height:1.55;resize:vertical;min-height:76px}
.pregunta-caja textarea:focus{outline:none;border-color:var(--ambar)}
.pregunta-caja textarea::placeholder{color:var(--apagado)}
.pregunta-respuesta{margin:10px 0 0;background:var(--sup2);border-radius:9px;padding:10px 13px;
font-size:13.5px;line-height:1.6;max-width:78ch}
.pregunta.descartada .pregunta-respuesta{background:transparent;
border:1px dashed var(--linea)}
.pregunta-acciones{display:flex;gap:8px;margin:8px 0 0}
.adjunto{border-top:1px solid var(--linea);padding:12px 0}
.adjunto:first-of-type{border-top:0;padding-top:2px}
.adjunto-cab{display:flex;align-items:center;flex-wrap:wrap;gap:8px}
.adjunto-cab b{font-size:13.5px;word-break:break-word}
.adjunto-cab .mini{margin-left:auto}
.adjunto-resumen{margin:8px 0 0;font-size:13.5px;line-height:1.6;max-width:78ch;color:var(--txt)}
.adjunto-resumen.apagado{color:var(--apagado)}
.cab-pantalla .btn{border:1px solid transparent}
.cab-pantalla .btn.fantasma{border-color:var(--linea)}
/* dos campos por fila dentro de un modal, para que no sea una columna interminable */
.dos-campos{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
@media(max-width:520px){.dos-campos{grid-template-columns:1fr}}
.modal .check{display:flex;align-items:center;gap:9px;margin:14px 0 2px;font-size:13.5px}
.modal .check input{width:16px;height:16px;accent-color:var(--ambar);margin:0;flex:none}
.modal>.ayuda,.modal .dos-campos+.ayuda{display:block;margin:-6px 0 14px}
/* la auditoría que se está escribiendo ahora: se distingue de las hechas por el borde vivo */
.en-curso{border-color:color-mix(in srgb,var(--ambar) 45%,var(--linea))}
.en-curso .panel-cab h2{color:var(--ambar)}
/* el coste, en mono y a la derecha: es una cifra, se compara en columna */
.coste{font-family:var(--mono);font-size:12px;text-align:right;color:var(--ambar);white-space:nowrap}
/* --- entregables: propuestas y user stories ------------------------------- */
/* el campo obligatorio se marca con un punto ámbar, no con un asterisco rojo: no es un error,
es una indicación */
.modal label.obligatorio .req{color:var(--ambar);font-weight:700}
.modal h3.sub-t{font-size:12px;text-transform:uppercase;letter-spacing:.08em;
color:var(--apagado);margin:20px 0 8px;padding-top:12px;border-top:1px solid var(--linea)}
.modal h3.sub-t:first-of-type{border-top:0;padding-top:0}
.modal input[type=file]{padding:8px 0;font-size:12.5px}
/* la prioridad se lee por color antes que por número */
.chip.prio-1{color:#e0705f;border-color:color-mix(in srgb,#e0705f 45%,var(--linea))}
.chip.prio-2{color:var(--ambar);border-color:color-mix(in srgb,var(--ambar) 45%,var(--linea))}
.chip.prio-3{color:#8ab4d8;border-color:color-mix(in srgb,#8ab4d8 40%,var(--linea))}
.fila-hi{cursor:pointer}
.fila-hi:hover{background:var(--sup2)}
/* 20/08/2026 JVN: el nombre técnico del trabajo bajo su etiqueta, en la tabla de programados. */
.peq{font-size:11px;font-family:var(--mono);margin-top:2px}
/* 20/08/2026 JVN: los dos colores de texto de la tabla de programados. Los usé dando por hecho
que existían como clase suelta —solo estaban dentro de otros selectores— y salían en gris. */
.mal{color:#ffb397}
.ambar{color:var(--ambar)}
/* 21/08/2026 JVN: el estado del sistema de trabajos, arriba de «Lo que corre solo». */
.panel-salud{border:1px solid var(--linea);border-left-width:3px;border-radius:0 6px 6px 0;
padding:12px 16px;margin-bottom:16px}
.panel-salud b{display:block;font-size:14px}
.panel-salud ul{margin:8px 0 0;padding-left:20px;font-size:13px;color:var(--apagado)}
.panel-salud.ok{border-left-color:var(--bien,#5fc0a8)}
.panel-salud.pend{border-left-color:var(--ambar)}
.panel-salud.mal{border-left-color:var(--mal)}
/* ── 21/08/2026 JVN: las pestañas de la ficha del cliente ────────────────────────────────────
Los paneles se ocultan, no se destruyen: así los oyentes de eventos que ya estaban puestos
siguen enganchados y el refactor no puede romper lo que funcionaba.
Y la ficha deja de ser de dos columnas. Con `.dos` la izquierda medía 340 px fijos y el chat
se quedaba con el resto: la barra de pestañas cabía tan mal que tapaba la pantalla. Ahora el
chat es una pestaña más y todo va a ancho completo. */
.ficha-cli{display:block}
.hoja-cli{display:flex;flex-direction:column;gap:18px}
.hoja-cli.oculta{display:none}
#cli-pest{margin-bottom:18px;flex-wrap:wrap}
/* el chat dentro de su pestaña: alto cómodo pero sin comerse la ventana entera */
.chat.en-pestana{height:auto;min-height:520px;max-height:calc(100vh - 240px)}
.chat.en-pestana .escribir textarea{min-height:56px;font-size:14.5px}
/* ── 21/08/2026 JVN: la tabla de errores de la pestaña Errores ───────────────────────────────
La primera versión de esa pantalla enseñaba el estado y la cobertura y ni un solo error, con
los 88 de comexi ya guardados en la base. Esto es lo que faltaba. */
.tabla-inc tbody tr.fila-inc{cursor:pointer}
.tabla-inc tbody tr.fila-inc:hover{background:var(--sup2)}
.tabla-inc .peq{font-size:11px;font-family:var(--mono);margin-top:2px}
.det-inc>td{background:var(--sup);padding:0}
.det-inc-cuerpo{display:flex;flex-direction:column;gap:16px;padding:16px 18px}
.det-bloque h4{margin:0 0 8px;font-size:13px;letter-spacing:.02em}
.ocurrencia{border-left:2px solid var(--linea);padding:8px 0 8px 12px;margin-bottom:10px;
font-size:13px}
.ocurrencia:last-child{margin-bottom:0}
pre.stack{margin:6px 0 0;background:var(--sup2);border:1px solid var(--linea);border-radius:4px;
padding:8px 10px;overflow-x:auto;font-family:var(--mono);font-size:11.5px;line-height:1.45;
white-space:pre-wrap;max-height:220px}
/* la cobertura, plegada: es contexto, no la noticia */
.cob-det{margin-top:16px}
.cob-det>summary{font-size:13px}
/* 21/08/2026 JVN: la cobertura con marcas de verdad. Antes lo disponible era un bullet y lo no
disponible una X: se leía como una lista, no como un sí y un no. */
.tabla-cob td.marca{width:28px;text-align:center;font-size:15px;padding-right:0}
.tabla-cob .si{color:var(--bien,#5fc0a8)}
.tabla-cob .no{color:var(--mal)}
.tabla-cob .mitad{color:var(--ambar)}
/* ══ 21/08/2026 JVN · Force Trace ═════════════════════════════════════════════════════════
La pantalla de guardia: los errores de todas las orgs en una tabla que se ordena, se filtra
y se busca. Los tres controles pesan lo mismo, así que van en una sola barra. */
.ft-cab{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;
flex-wrap:wrap;margin-bottom:18px}
.ft-acciones{display:flex;gap:8px;flex-wrap:wrap;padding-top:6px}
.ft-tiles{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:16px}
.ft-tile{flex:1 1 118px;background:var(--sup);border:1px solid var(--linea);border-radius:10px;
padding:10px 13px}
.ft-tile b{display:block;font-family:var(--mono);font-size:20px;line-height:1.2;font-weight:600}
.ft-tile b.peq-t{font-size:13px;padding-top:5px}
.ft-tile span{display:block;font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;
color:var(--apagado);margin-top:2px}
/* lo grave se ve sin leerlo, pero solo si hay algo grave */
.ft-tile.grave b{color:var(--mal)}
.ft-tile.grave{border-color:color-mix(in srgb,var(--mal) 34%,var(--linea))}
.ft-filtros{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:14px;
padding-bottom:14px;border-bottom:1px solid var(--linea)}
.ft-filtros input[type=search],.ft-filtros select{background:var(--sup);color:var(--txt);
border:1px solid var(--linea);border-radius:8px;padding:7px 10px;font-size:13px}
.ft-filtros input[type=search]{flex:1 1 260px;min-width:180px}
.ft-filtros select{color:var(--apagado)}
.ft-filtros input[type=search]:focus,.ft-filtros select:focus{outline:none;
border-color:var(--ambar);color:var(--txt)}
.ft-cuenta{margin-left:auto;font-family:var(--mono);font-size:11.5px;color:var(--apagado)}
/* las cabeceras que ordenan: tienen que parecer pulsables antes de pulsarlas */
.ft-tabla th.ord{cursor:pointer;user-select:none;white-space:nowrap}
.ft-tabla th.ord:hover{color:var(--txt)}
.ft-tabla th.ord.act{color:var(--ambar)}
.ft-tabla th .fl{font-size:8px;margin-left:4px;vertical-align:1px}
.ft-tabla td{vertical-align:top}
.ft-tabla .ft-que{max-width:330px}
.ft-tabla .ft-cli{color:var(--txt);border-bottom:1px solid transparent}
.ft-tabla .ft-cli:hover{color:var(--ambar);border-bottom-color:var(--ambar2)}
.ft-tabla .mono-c{font-family:var(--mono);font-size:11.5px}
.ft-tabla .n.der{text-align:right}
.ft-tabla .peq{font-size:11px;color:var(--apagado);margin-top:2px}
/* el separador del desplegable del avatar, ahora que tiene dos grupos de opciones */
.popover .sep{height:1px;background:var(--linea);margin:6px 0}
/* 21/08/2026 JVN: nuestra propia org en Force Trace: no es un cliente y no lleva a ninguna ficha */
.ft-tabla .ft-propia{color:var(--apagado);border-bottom:1px dotted var(--linea)}
/* 21/08/2026 JVN: el id del incidente. Se enseña porque es como se le llama a uno cuando hay que
hablar de él —«el 224»— y sin verlo no había forma de referirse a nada. */
.ft-id{color:var(--apagado);font-variant-numeric:tabular-nums;white-space:nowrap}
.tabla-inc th.der,.tabla-inc td.der{text-align:right}
/* ══ 21/08/2026 JVN · Deep Diagnostics en el detalle de un incidente ══════════════════════
Va dentro del detalle COMPARTIDO, así que sale igual en Force Trace y en la ficha. */
.deep-ficha{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;margin-bottom:8px}
.deep-por{font-size:13px;color:var(--apagado)}
.deep-t{margin:8px 0 0;font-size:12.5px}
.deep-t td:first-child{color:var(--apagado);white-space:nowrap;width:1%;padding-right:14px}
/* el aviso que no se puede quitar: esto no recupera el error que ya pasó */
.deep-aviso{border-left:2px solid var(--ambar);background:color-mix(in srgb,var(--ambar) 7%,transparent);
padding:9px 12px;margin:10px 0;font-size:12.5px;border-radius:0 5px 5px 0}
.deep-bloq{margin-top:8px;font-size:12.5px;color:var(--mal)}
/* 28/08/2026 JVN: el bloque de Deep Diagnostics, VISIBLE.
Se pintaba como un `.det-bloque` cualquiera —un h4 y texto— y quedaba enterrado entre la
evidencia y las ocurrencias. Pero no es un bloque de datos más: es el único de la ficha desde el
que se ESCRIBE en la org de un cliente. Se le da caja propia y el ámbar de la casa en el título,
que es el color con el que aquí se marca «esto hace algo». */
.deep-caja{border:1px solid var(--ambar2);border-radius:8px;padding:13px 15px;
background:color-mix(in srgb,var(--ambar) 5%,transparent)}
.deep-caja h4{color:var(--ambar)}
/* ══ 28/08/2026 JVN · LA VENTANA DE CAPTURA Y SU TECHO ═════════════════════════════════════
El techo se pinta ANTES que las fechas y ocupa más sitio que ellas, a propósito: mientras la
ventana corre, lo único que hay que poder mirar de un vistazo es cuánto se lleva gastado de lo
que se autorizó. La barra se pone en rojo a partir del 80 %, que es cuando hay que decidir si
subir el techo o dejar que se pare sola. */
.pm-ventana{border:1px solid var(--ambar2);border-radius:8px;padding:12px 14px;margin-top:6px}
.pm-ventana legend{padding:0 6px;color:var(--ambar);font-size:12px;letter-spacing:.04em}
/* 28/08/2026 JVN: un modal ancho que NO recorta lo que se despliega dentro. Ver el comentario de
`modalTraza`: el desplegable del combobox va en absoluto y `overflow-y:auto` se lo come. */
.modal.ancho .campos.sin-recorte{max-height:none;overflow:visible}
/* 28/08/2026 JVN: cuántas sesiones se abren de verdad. Va en ámbar y arriba del todo porque es el
número que hay que ver antes de pulsar: cada una es un TraceFlag en la org de un cliente. */
.plan-cuantas{border:1px solid var(--linea);border-radius:7px;padding:10px 13px;margin-bottom:12px;
font-size:13px}
.plan-cuantas.suma{border-color:var(--ambar2);background:color-mix(in srgb,var(--ambar) 6%,transparent)}
.plan-cuantas b{color:var(--ambar)}
.pm-atajos{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:10px}
.pm-atajos .mini.puesto{border-color:var(--ambar);color:var(--ambar)}
.pm-fechas{display:grid;grid-template-columns:1fr 1fr 110px;gap:12px}
/* el campo entero abre el calendario, así que tiene que verse pulsable */
.pm-fechas input[type=datetime-local]{cursor:pointer}
.pm-aviso-techo{margin-top:10px;font-size:12px;color:var(--apagado);border-left:2px solid var(--ambar);
padding-left:10px}
.vent{border:1px solid var(--linea);border-radius:8px;padding:12px 14px;margin-bottom:10px}
.vent.viva{border-color:var(--ambar2);background:color-mix(in srgb,var(--ambar) 4%,transparent)}
.vent-cab{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;margin-bottom:10px}
.vent-techo{display:flex;gap:12px;align-items:center;flex-wrap:wrap;font-size:12.5px}
.vent-techo .mal{color:var(--mal)}
.vent-barra{flex:0 0 190px;height:9px;border-radius:5px;background:var(--sup2);
border:1px solid var(--linea);overflow:hidden}
.vent-barra i{display:block;height:100%;background:var(--ambar);transition:width .3s}
.vent-barra i.lleno{background:var(--mal)}
.vent-pie{margin-top:9px}
/* 28/08/2026 JVN: el semáforo de la cobertura. Verde a partir del 75 %, que es el mínimo que exige
Salesforce para desplegar: por debajo de ahí no es una opinión de calidad, es un bloqueo. */
.tabla b.o{color:var(--ok)} .tabla b.w{color:var(--ambar)} .tabla b.c{color:var(--mal)}
.tabla-inc tr.pr-fila{cursor:pointer}
.tabla-inc tr.pr-fila:hover{background:var(--sup2)}
/* 29/08/2026 JVN: la paginación, abajo y centrada. Solo se pinta si hay más de una página: un
control que nunca hace nada estorba más de lo que ayuda. */
.paginacion{display:flex;gap:8px;align-items:center;justify-content:center;margin-top:14px;
flex-wrap:wrap}
.paginacion .mini[disabled]{opacity:.35;cursor:default}
.paginacion .pag-de{font-size:12px;color:var(--apagado);margin:0 6px}
.paginacion .pag-de b{color:var(--txt);font-family:var(--mono)}
/* 29/08/2026 JVN: pruebas que pasan y que fallan, en la misma celda.
«12 fallando» sin el otro número no dice nada: doce sobre quince es una catástrofe y doce sobre
mil cuatrocientas es un martes cualquiera. Por eso van las dos, y el rojo solo si hay alguna. */
.pruebas-celda{display:inline-flex;align-items:baseline;gap:5px;justify-content:flex-end;
font-family:var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.pruebas-celda .pasan{color:var(--ok)}
.pruebas-celda .fallan{color:var(--mal);margin-left:7px}
.pruebas-celda .ok-sig{color:var(--ok);font-size:10px}
.pruebas-celda .mal-sig{color:var(--mal);font-size:10px}
/* la barrita de cobertura por clase, en el detalle */
.cob-barra{display:inline-block;width:100px;height:8px;border-radius:4px;background:var(--sup2);
border:1px solid var(--linea);overflow:hidden;vertical-align:middle}
.cob-barra i{display:block;height:100%}
.cob-barra i.o{background:var(--ok)} .cob-barra i.w{background:var(--ambar)}
.cob-barra i.c{background:var(--mal)}
.pr-org-fila{cursor:pointer}
.pr-org-fila:hover{background:var(--sup2)}
/* los filtros de la cobertura por clase: buscador y los tres umbrales, en una línea */
.cob-filtros{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:0 0 12px}
.cob-filtros input[type=search]{flex:1 1 220px;min-width:160px;background:var(--sup);
color:var(--txt);border:1px solid var(--linea);border-radius:7px;padding:7px 11px;font-size:13px}
.cob-filtros input[type=search]:focus{outline:none;border-color:var(--ambar2)}
.cob-filtros .mini.puesto{border-color:var(--ambar);color:var(--ambar)}
.cob-filtros .ft-cuenta{margin-left:auto;font-size:12px;color:var(--apagado)}
/* 29/08/2026 JVN: por dónde va una ejecución que sigue corriendo. «EN_CURSO» a secas no dice si
avanza; «553 / 1.538» y la barra, sí. */
.progreso-tests{display:flex;align-items:center;gap:7px;margin-top:5px}
.progreso-barra{display:inline-block;width:70px;height:6px;border-radius:3px;background:var(--sup2);
border:1px solid var(--linea);overflow:hidden}
.progreso-barra i{display:block;height:100%;background:var(--ambar);transition:width .4s}
.progreso-cifra{font-family:var(--mono);font-size:10.5px;color:var(--apagado);
font-variant-numeric:tabular-nums;white-space:nowrap}
/* 28/08/2026 JVN: el visor de un ApexLog. Es texto de columnas y hay que respetarlo tal cual:
sin plegar líneas, con su tipografía monoespaciada y con scroll propio en los dos ejes. Aquí el
desplazamiento horizontal SÍ es correcto —una línea de ApexLog mide lo que mide y partirla la
hace ilegible—, al revés que en una tabla. */
.deep-log{margin:0;max-height:62vh;overflow:auto;background:var(--sup2);border:1px solid var(--linea);
border-radius:7px;padding:12px 14px;font-family:var(--mono);font-size:11.5px;line-height:1.55;
white-space:pre;tab-size:2}
.deep-log-ficha{display:flex;gap:9px;align-items:baseline;flex-wrap:wrap;margin-bottom:10px;
font-size:12.5px;color:var(--apagado)}
.deep-log-ficha .mini{margin-left:auto}
.deep-ses{margin-top:10px;border:1px solid var(--linea);border-radius:8px;padding:11px 13px}
.deep-ses-cab{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;margin-bottom:4px}
/* 21/08/2026 JVN: el botón de Deep Diagnostics es la acción principal del bloque y con `.mini`
apenas se veía. Se le da cuerpo: relleno ámbar, icono y foco visible. */
.deep-acciones{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:12px}
.deep-boton{display:inline-flex;align-items:center;gap:8px;background:var(--ambar);
color:#1a1206;border:0;border-radius:9px;padding:10px 16px;font-size:13.5px;font-weight:650;
cursor:pointer;letter-spacing:.01em;box-shadow:0 1px 0 rgba(0,0,0,.25)}
.deep-boton svg{width:15px;height:15px}
.deep-boton:hover{background:#ffc271}
.deep-boton:focus-visible{outline:2px solid var(--txt);outline-offset:2px}
.deep-boton:disabled{opacity:.55;cursor:progress}
/* 03/09/2026 JVN: «todavía no» no es «está trabajando». `:disabled` a secas pinta el cursor de
progreso porque estos botones se deshabilitan mientras corren; un botón que aún no se puede
pulsar con un cursor de reloj parece que ya se pulsó. */
.deep-boton.aun-no:disabled{cursor:not-allowed;opacity:.4}
.deep-boton.trabajando{background:var(--ambar2);color:var(--txt)}
.deep-estado{font-family:var(--mono);font-size:11.5px;color:var(--ambar)}
.deep-fallo{border-left:2px solid var(--mal);background:color-mix(in srgb,var(--mal) 8%,transparent);
padding:10px 13px;margin-top:10px;font-size:12.5px;border-radius:0 5px 5px 0}
/* 21/08/2026 JVN: qué se va a retirar, delante del botón que lo retira */
.deep-retirar{margin-top:10px;font-size:12.5px;color:var(--apagado);
border-left:2px solid var(--linea);padding-left:10px}
.deep-boton.deep-quitar{background:var(--mal);color:#fff}
.deep-boton.deep-quitar:hover{background:#d1704b}
/* 21/08/2026 JVN: medir y autorizar no son acciones equivalentes: son dos pasos en orden */
.deep-pasos{list-style:none;counter-reset:p;margin:14px 0 0;padding:0;display:flex;
flex-direction:column;gap:12px}
.deep-pasos li{counter-increment:p;position:relative;padding-left:30px}
.deep-pasos li::before{content:counter(p);position:absolute;left:0;top:1px;width:20px;height:20px;
border-radius:50%;background:var(--sup2);border:1px solid var(--linea);display:grid;
place-items:center;font-family:var(--mono);font-size:11px;color:var(--apagado)}
.deep-paso-t{font-size:13px;font-weight:600;display:flex;gap:8px;align-items:baseline;
flex-wrap:wrap;margin-bottom:2px}
.deep-pasos .peq{margin-bottom:7px;line-height:1.5;max-width:64ch}
/* 21/08/2026 JVN: las cajas que representan un subconjunto son botones; los totales y la fecha,
no. Un contador que parece pulsable y no hace nada es peor que uno que se ve inerte. */
button.ft-tile{cursor:pointer;text-align:left;font:inherit;color:inherit;transition:none}
button.ft-tile:hover{border-color:color-mix(in srgb,var(--ambar) 45%,var(--linea))}
button.ft-tile:focus-visible{outline:2px solid var(--ambar);outline-offset:2px}
.ft-tile.puesto{border-color:var(--ambar);background:color-mix(in srgb,var(--ambar) 10%,var(--sup))}
.ft-tile.puesto b{color:var(--ambar)}
.ft-tile.ft-inerte{cursor:default}
/* 21/08/2026 JVN: el botón de nueva traza vive en la cabecera, y ahí necesita menos alto */
.ft-acciones .deep-boton{padding:8px 14px;font-size:13px}
/* 21/08/2026 JVN: el aviso de que a un cliente le falta una de las dos carpetas de destino */
.aviso-suave{border-left:2px solid var(--ambar);background:color-mix(in srgb,var(--ambar) 7%,transparent);
padding:8px 11px;margin:2px 0 6px;font-size:12.5px;border-radius:0 5px 5px 0}
/* ══ 21/08/2026 JVN · el desplegable que se busca escribiendo ═════════════════════════════
Los `select` con 190 clases obligaban a hacer scroll a ciegas. Esto filtra mientras escribes,
con teclado, y guarda el Id aparte del texto que se ve. */
.cbx{position:relative}
.cbx-txt{width:100%;background:var(--bg);color:var(--txt);border:1px solid var(--linea);
border-radius:8px;padding:8px 10px;font-size:13px}
.cbx-txt:focus{outline:none;border-color:var(--ambar)}
.cbx-txt:disabled{opacity:.6}
.cbx.puesto .cbx-txt{border-color:var(--ok);background:color-mix(in srgb,var(--ok) 7%,var(--bg))}
.cbx-lista{position:absolute;left:0;right:0;top:calc(100% + 3px);z-index:30;max-height:246px;
overflow-y:auto;background:var(--sup);border:1px solid var(--linea);border-radius:9px;
box-shadow:0 10px 26px rgba(0,0,0,.45)}
.cbx-op{padding:7px 11px;font-size:12.5px;cursor:pointer;white-space:nowrap;overflow:hidden;
text-overflow:ellipsis}
.cbx-op.marcada,.cbx-op:hover{background:var(--sup2);color:var(--ambar)}
.cbx-nada{padding:9px 11px;font-size:12.5px;color:var(--apagado)}
.tz-org-fija{font-size:13px;padding:8px 11px;background:var(--bg);border:1px solid var(--linea);
border-radius:8px}
.deep-boton.peq-b{padding:5px 11px;font-size:12px;border-radius:7px}
/* 21/08/2026 JVN: «vigilada y sin errores» no puede parecerse a «no vigilada» */
.ft-limpias{background:var(--sup);border:1px solid var(--linea);border-left:2px solid var(--ok);
border-radius:0 8px 8px 0;padding:9px 13px;margin-bottom:12px;font-size:12.5px}
/* 21/08/2026 JVN: la relación y el estado se cambian donde se leen, no en Ajustes → Mappings */
.cli-rel{display:flex;gap:14px;align-items:flex-end;flex-wrap:wrap;margin-top:8px}
.cli-rel label{display:flex;flex-direction:column;gap:3px;font-size:10.5px;
letter-spacing:.07em;text-transform:uppercase;color:var(--apagado)}
.cli-rel select{background:var(--sup);color:var(--txt);border:1px solid var(--linea);
border-radius:8px;padding:6px 9px;font-size:13px}
.cli-rel select:focus{outline:none;border-color:var(--ambar)}
.cli-rel select:disabled{opacity:.55;cursor:progress}
.cli-rel .peq{padding-bottom:7px;max-width:44ch;text-transform:none;letter-spacing:0}
/* 22/08/2026 JVN: el preview del plan de captura. Rejilla para el formulario y una tira de
cifras arriba, que es lo que se mira primero: N final y qué lo recortó. */
.plan-form {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
gap: 12px 16px;
margin-bottom: 14px;
}
.plan-form label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.plan-guardar { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.plan-kpis { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0 16px; }
.plan-kpis .kpi {
border: 1px solid var(--borde, #dde2ea);
border-radius: 6px;
padding: 10px 16px;
min-width: 86px;
text-align: center;
}
.plan-kpis .kpi b { display: block; font-size: 22px; line-height: 1.1; }
.plan-kpis .kpi span { font-size: 11.5px; opacity: .68; }
.tabla-scroll { overflow-x: auto; }
/* 22/08/2026 JVN: las tres pestañas de dentro de Monitorización. El panel de cada una ya trae su
propio margen, así que la hoja no añade ninguno: solo enseña u oculta. */
.hoja-mon[hidden] { display: none; }
.pl-org-sel { max-width: 340px; }
/* 22/08/2026 JVN: el modal del plan de captura enseña una tabla de candidatos, así que necesita
más ancho y poder desplazarse por dentro sin empujar la página. */
.modal.ancho { max-width: 980px; width: 92vw; }
.modal.ancho .campos { max-height: 62vh; overflow-y: auto; }
.ses-fila { cursor: pointer; }
.ses-fila:hover { background: var(--suave, rgba(127,127,127,.07)); }
.sf-enlace { display: inline-block; margin-top: 6px; }
/* 24/08/2026 JVN: el chip de «esto va mal». Se usaba desde la tabla de trazabilidad —`chip mal`—
pero no estaba definido, así que salía igual que un chip normal: un estado OPEN se leía igual
que uno cerrado. Va con la variable del tema, no con un rojo escrito a mano. */
.chip.mal{color:var(--mal);border-color:color-mix(in srgb,var(--mal) 40%,var(--linea))}
/* El código del diagrama. Hereda de .chat-texto —fondo y texto del tema— y solo cambia el alto:
un flowchart de veinte nodos necesita más sitio que una conversación. */
.ckm-diagrama{max-height:30rem;font-size:.76rem}
/* 24/08/2026 JVN: el backlog. Una feature es una caja con su tabla de historias dentro; el
grupo de prioridad las envuelve. Sin colores propios: todo sale de las variables del tema. */
.bkl-grupo { margin-bottom: 22px; }
.bkl-feature { border: 1px solid var(--linea); border-radius: 6px; padding: 12px 14px;
margin-bottom: 12px; background: var(--sup); }
.bkl-feature-cab { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap;
margin-bottom: 8px; }
/* 25/08/2026 JVN: los botones de expandir/plegar del árbol de backlog. Eran dos `.chip` a secas
—una cajita gris con texto en minúsculas, sin estado y sin señal de que fueran pulsables— al
lado de tres desplegables. Se les da la misma altura y el mismo borde que a los filtros que
tienen al lado, para que la fila se lea como una fila, y un hover que diga que se pulsan. */
.filtros button.chip{padding:6px 12px;font-size:11px;text-transform:none;letter-spacing:.02em;
border-radius:6px;background:transparent;cursor:pointer;color:var(--apagado);
transition:color .12s,border-color .12s}
.filtros button.chip:hover{color:var(--texto);border-color:color-mix(in srgb,var(--texto) 30%,var(--linea))}
.filtros button.chip:active{transform:translateY(1px)}
.filtros button.chip:focus-visible{outline:2px solid var(--ambar);outline-offset:2px}
/* 26/08/2026 JVN: la sangría del árbol de backlog.
Epic → Feature → User Story se leían las tres al mismo margen, así que la jerarquía había que
deducirla del texto de cada fila. Un escalón pequeño por nivel basta para verla de un vistazo.
Va todo bajo `.bkl-arbol` porque `.bkl-grupo` ya existe para el backlog viejo, donde es un div
con su propio margen: sin acotar, una regla pisaría la otra. */
.bkl-arbol .bkl-epic > td { padding-left: 0px }
.bkl-arbol .bkl-grupo > td { padding-left: 18px }
.bkl-arbol .bkl-us > td:first-child { padding-left: 36px }
/* el escalón se ve mejor con una guía muy tenue que lo acompañe */
.bkl-arbol .bkl-grupo > td { box-shadow: inset 6px 0 0 -5px var(--linea) }
.bkl-arbol .bkl-us > td:first-child { box-shadow: inset 24px 0 0 -23px var(--linea) }
/* 26/08/2026 JVN: el árbol se pliega con el chevron y se abre con el título. Dos gestos distintos
en la misma fila, así que tienen que verse distintos: el chevron es un botón pequeño y el
título subraya al pasar por encima, como cualquier cosa que abre algo. */
.bkl-tog{background:none;border:0;padding:0 8px 0 0;cursor:pointer;color:var(--apagado);
font-size:12px;line-height:1}
.bkl-tog:hover{color:var(--texto)}
.bkl-abre{cursor:pointer}
.bkl-abre:hover{text-decoration:underline;text-underline-offset:3px}
.bkl-modal .traza-fila{display:grid;grid-template-columns:150px 1fr;gap:10px;padding:7px 0;
border-bottom:1px solid var(--linea);font-size:13px}
.bkl-modal .traza-fila:last-child{border-bottom:0}
.bkl-modal h3{margin:18px 0 8px;font-size:14px}
/* 26/08/2026 JVN: la cabecera de columnas se repite dentro de cada Feature abierta. Va más
apagada que una cabecera de tabla normal para que no compita con el nombre de la Feature, que
es lo que ordena la lectura. */
.bkl-arbol .bkl-cab th{font-family:var(--mono);font-size:9.5px;letter-spacing:.07em;
text-transform:uppercase;color:var(--apagado);font-weight:400;text-align:left;
padding:6px 12px 6px 0;border-bottom:1px solid var(--linea)}
.bkl-arbol .bkl-cab th:first-child{padding-left:36px}
/* 27/08/2026 JVN: la ficha de una User Story es de lectura, no un formulario: en 560 px la
evidencia de la auditoría sale en columnas de tres palabras. */
.modal.ancho{max-width:920px}
.modal.ancho .markdown{font-size:14px}
.modal.ancho .markdown h3{font-size:13px;margin:16px 0 4px}
/* el botón que gasta tiene que verse. El `.mini` transparente se perdía dentro de la cabecera. */
.bloque-cab .btn.accion{margin-left:auto;padding:6px 14px;font-size:12.5px;
text-transform:none;letter-spacing:0}
/* 27/08/2026 JVN: la casilla del alta manual va en línea con su texto, no encima. */
label.linea{display:flex;gap:9px;align-items:flex-start;font-weight:400}
label.linea input[type=checkbox]{width:auto;margin:3px 0 0;flex:none}
/* 27/08/2026 JVN: la palanca de «que lo haga la IA». Una casilla no dice si algo va a gastar
dinero; una palanca encendida sí, y por eso viene encendida por defecto. */
.palanca-fila{display:flex;gap:14px;align-items:flex-start;padding:14px 0 4px}
.palanca{position:relative;display:inline-block;width:46px;height:26px;flex:none;margin:0;cursor:pointer}
.palanca input{position:absolute;opacity:0;width:0;height:0}
.palanca .pista{position:absolute;inset:0;background:var(--sup2);border:1px solid var(--linea);
border-radius:26px;transition:background .18s,border-color .18s}
.palanca .pista::before{content:"";position:absolute;height:18px;width:18px;left:3px;top:3px;
background:var(--apagado);border-radius:50%;transition:transform .18s,background .18s}
.palanca input:checked + .pista{background:color-mix(in srgb,var(--ambar) 22%,transparent);
border-color:var(--ambar)}
.palanca input:checked + .pista::before{transform:translateX(20px);background:var(--ambar)}
.palanca input:focus-visible + .pista{outline:2px solid var(--ambar);outline-offset:2px}
.palanca-fila strong{font-size:14px}
/* 27/08/2026 JVN: los dos ejes de categoría, en chips que se encienden. Un desplegable solo deja
elegir uno, y aquí hace falta poder mirar «flows + apex» a la vez. */
.filtros-cat{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:0 0 8px}
.filtros-cat > .n{min-width:52px;text-transform:uppercase;letter-spacing:.08em}
.chip-f{background:transparent;border:1px solid var(--linea);color:var(--apagado);
border-radius:20px;padding:4px 11px;font:inherit;font-size:12.5px;cursor:pointer;
display:inline-flex;gap:6px;align-items:center}
.chip-f:hover{color:var(--txt)}
.chip-f b{font-family:var(--mono);font-size:10.5px;font-weight:400;opacity:.7}
.chip-f.on{border-color:var(--ambar);color:var(--ambar);
background:color-mix(in srgb,var(--ambar) 10%,transparent)}
/* 27/08/2026 JVN: el selector de categorías. Un solo campo que despliega el árbol: el área es la
rama y las acciones sus hojas, con el recuento de cada cruce. */
.cat-caja{border:1px solid var(--linea);border-radius:10px;margin:0 0 12px;overflow:hidden}
.cat-cab{padding:9px 13px;cursor:pointer;font-size:13px;user-select:none;
display:flex;gap:8px;align-items:center}
.cat-cab::marker{color:var(--apagado)}
.cat-arbol{padding:4px 13px 12px;columns:2;column-gap:26px}
@media (max-width:860px){.cat-arbol{columns:1}}
.cat-rama{break-inside:avoid;margin-bottom:2px}
.cat-rama > summary{list-style:none;cursor:pointer;padding:2px 0}
.cat-rama > summary::-webkit-details-marker{display:none}
.cat-rama > summary::before{content:"▸";color:var(--apagado);margin-right:6px;font-size:11px}
.cat-rama[open] > summary::before{content:"▾"}
.cat-area,.cat-hoja{display:inline-flex;gap:7px;align-items:center;cursor:pointer;
font-size:13px;margin:0;font-weight:400}
.cat-area{font-weight:600}
.cat-area input,.cat-hoja input{width:auto;margin:0;flex:none}
.cat-area b,.cat-hoja b{font-family:var(--mono);font-size:10.5px;font-weight:400;color:var(--apagado)}
.cat-hojas{padding:2px 0 6px 22px;display:flex;flex-direction:column;gap:2px}
/* 27/08/2026 JVN: cifras que no son de la última pasada. Se atenúan y se rayan en diagonal para
que se distingan de un vistazo de las recién calculadas: un hueco se ve solo, un número viejo no.
No se ocultan —siguen siendo la mejor información que hay— pero dejan de mentir sobre su edad. */
.caduco{opacity:.55}
.caduco .chip{border-style:dashed}
.caduco::after{content:'·';margin-left:4px;color:var(--apagado)}
/* 27/08/2026 JVN: LA CAJA QUE CONTIENE UNA TABLA ANCHA.
`.tabla-caja` se usaba en dos sitios y no estaba definida en ninguna parte: era un div sin
reglas, así que no contenía nada. La tabla de Force Trace —doce columnas, varias con
`white-space:nowrap`— empujaba hasta sacar la PÁGINA entera del viewport, y aparecía scroll
horizontal en el body. Lo que tiene que desplazarse es la tabla dentro de su caja, nunca la
página. */
.tabla-caja{overflow-x:auto;max-width:100%;
/* el scroll propio necesita un poco de aire abajo o la última fila queda pegada a la barra */
padding-bottom:2px}
.tabla-caja>.tabla{min-width:max-content}
/* 28/08/2026 JVN: LA DE FORCE TRACE YA NO SE DESPLAZA.
Con seis columnas cabe de sobra, así que se le quita el `min-width:max-content` —que es
justamente lo que obligaba a la tabla a ser tan ancha como su contenido y sacaba la barra— y se
deja que el ancho lo reparta el navegador.
Lo que se estiraba era el texto libre: el título del error y la lista de orígenes. Esos dos se
pueden partir en varias líneas; los números y las fechas no, que partidos no se leen. */
.tabla-caja>.tabla.ft-tabla{min-width:0;width:100%}
.ft-tabla .ft-que{max-width:none;overflow-wrap:anywhere}
.ft-tabla .ft-origen{overflow-wrap:anywhere}
.ft-tabla td.n{white-space:nowrap}
/* Que casi siempre quepa sin desplazar: lo que ocupa de más es el texto libre, y ese sí puede
partirse en varias líneas. Los números y las fechas se quedan en una sola, que partidos no se
leen. */
.ft-tabla .ft-que{max-width:min(38vw,420px);white-space:normal;overflow-wrap:anywhere}
.ft-tabla td.mono-c{white-space:nowrap}
@media (max-width:1200px){
.ft-tabla .ft-que{max-width:min(46vw,320px)}
.ft-tabla{font-size:12.5px}
}
/* ══ 29/08/2026 JVN: EL MENÚ DE ACCIONES DE CADA ORGANIZACIÓN ══════════════════════════════════
Eran botones en línea. Con tres ya no cabían sin ensanchar la tabla, y «Apagar» quedaba pegado
a «Ejecutar ahora»: dos clics vecinos que hacen cosas muy distintas. */
.menu-acc { position: relative; display: inline-block; }
.menu-lista {
position: absolute; right: 0; top: calc(100% + 4px); z-index: 40;
display: flex; flex-direction: column; min-width: 15rem;
background: var(--fondo-alto, #1b1e24); border: 1px solid var(--linea, #333a45);
border-radius: 8px; padding: .25rem; box-shadow: 0 8px 24px rgba(0,0,0,.45);
}
.menu-lista.oculta { display: none; }
.menu-lista button {
all: unset; cursor: pointer; text-align: left; padding: .45rem .6rem;
border-radius: 5px; font-size: .82rem; color: var(--texto, #e6e8ec); white-space: nowrap;
}
.menu-lista button:hover { background: var(--fondo-hover, #262b33); }
/* ── subir la cobertura ─────────────────────────────────────────────────────────────────────── */
.cob-modal { max-width: 62rem; }
.cob-cuerpo { max-height: 68vh; overflow-y: auto; }
.cob-hoy { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.2rem; }
.cob-hoy-cifra {
font-size: 2.6rem; font-weight: 700; line-height: 1;
color: var(--marca, #c9a227); font-variant-numeric: tabular-nums;
}
.cob-hoy-txt { font-size: .85rem; opacity: .85; }
.cob-esperando { text-align: center; padding: 3rem 1rem; }
.cob-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: .75rem; margin-bottom: 1.2rem; }
.cob-kpi {
background: var(--fondo-alto, #1b1e24); border: 1px solid var(--linea, #333a45);
border-radius: 8px; padding: .8rem; text-align: center;
}
.cob-kpi b { display: block; font-size: 1.35rem; font-variant-numeric: tabular-nums; }
.cob-kpi span { display: block; font-size: .72rem; opacity: .7; margin-top: .2rem; }
.cob-veredicto { font-size: .88rem; line-height: 1.55; margin-bottom: 1rem; }
.cob-titulo { font-size: 1.05rem; font-weight: 600; }
.cob-tabla code { font-size: .78rem; }
.cob-por-que { font-size: .78rem; opacity: .82; max-width: 24rem; }
.cob-hecho { text-align: center; padding: 2rem 1rem; }
/* la dificultad se lee de un vistazo por el color, no leyendo la palabra */
.dif { font-size: .72rem; padding: .12rem .45rem; border-radius: 999px; white-space: nowrap; }
.dif-mecanica { background: rgba(60,160,90,.18); color: #6cc48c; }
.dif-media { background: rgba(200,160,40,.18); color: #d6b34a; }
.dif-dura { background: rgba(200,70,70,.18); color: #e08383; }
.dif-sinJuzgar{ background: rgba(140,140,150,.18); color: #9aa0aa; }
/* ══ 29/08/2026 JVN: LAS PRUEBAS QUE FALLAN ════════════════════════════════════════════════════
El color va por causa, no por gravedad: lo que se quiere ver de un vistazo es cuántos de los
fallos son del test y cuántos apuntan al producto. */
.fal-causas { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
gap: .6rem; margin: .6rem 0 1.1rem; }
.fal-causa {
border: 1px solid var(--linea, #333a45); border-left-width: 3px;
border-radius: 8px; padding: .6rem .7rem; background: var(--fondo-alto, #1b1e24);
}
.fal-causa b { font-size: 1.5rem; line-height: 1; font-variant-numeric: tabular-nums; }
.fal-causa-tit { display: block; font-size: .8rem; font-weight: 600; margin-top: .15rem; }
.fal-causa-txt { display: block; font-size: .72rem; opacity: .7; margin-top: .3rem; line-height: 1.45; }
.fal-clases { display: flex; flex-direction: column; gap: .5rem; }
.fal-clase { border: 1px solid var(--linea, #333a45); border-radius: 8px; padding: .5rem .7rem; }
.fal-clase > summary { cursor: pointer; display: flex; align-items: baseline; gap: .5rem; }
.fal-clase > summary code { font-size: .85rem; font-weight: 600; }
.fal-n { font-size: .72rem; opacity: .6; }
.fal-item { padding: .55rem 0 .55rem .7rem; margin-top: .5rem;
border-left: 2px solid var(--linea, #333a45); }
.fal-cab { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.fal-metodo { font-size: .8rem; opacity: .95; }
.fal-chip { font-size: .68rem; padding: .1rem .45rem; border-radius: 999px; white-space: nowrap; }
.fal-msg { font-size: .78rem; opacity: .8; line-height: 1.5; margin: .3rem 0 0; }
/* esperaba X → salió Y: de una aserción esto es literalmente todo lo que hace falta leer */
.fal-cmp { display: flex; align-items: center; gap: .5rem; margin-top: .35rem; font-size: .78rem;
font-variant-numeric: tabular-nums; }
.fal-esp b { color: #6cc48c; }
.fal-obt b { color: #e08383; }
.fal-flecha { opacity: .45; }
.fal-crudo { margin-top: .35rem; }
.fal-crudo > summary { cursor: pointer; font-size: .7rem; opacity: .5; }
.fal-crudo > summary:hover { opacity: .8; }
.fal-crudo pre { font-size: .68rem; white-space: pre-wrap; word-break: break-word;
background: var(--fondo, #14171c); border-radius: 6px; padding: .5rem; margin-top: .3rem;
max-height: 14rem; overflow: auto; }
/* un color por familia, en la tarjeta y en la etiqueta */
.fam-mixed-dml { border-left-color: #7a86c9; } .fal-chip.fam-mixed-dml { background: rgba(122,134,201,.2); color: #99a4e0; }
.fam-trigger { border-left-color: #e08383; } .fal-chip.fam-trigger { background: rgba(224,131,131,.2); color: #e89a9a; }
.fam-asercion { border-left-color: #d6b34a; } .fal-chip.fam-asercion { background: rgba(214,179,74,.2); color: #dcc069; }
.fam-validacion { border-left-color: #d18f4e; } .fal-chip.fam-validacion { background: rgba(209,143,78,.2); color: #dba469; }
.fam-nulo { border-left-color: #c96a9e; } .fal-chip.fam-nulo { background: rgba(201,106,158,.2); color: #d888b3; }
.fam-limites { border-left-color: #5fa8c9; } .fal-chip.fam-limites { background: rgba(95,168,201,.2); color: #7fbcd8; }
.fam-permisos { border-left-color: #8fb35e; } .fal-chip.fam-permisos { background: rgba(143,179,94,.2); color: #a5c47a; }
.fam-oculto { border-left-color: #9aa0aa; } .fal-chip.fam-oculto { background: rgba(154,160,170,.2); color: #adb3bd; }
.fam-otro { border-left-color: #6b7280; } .fal-chip.fam-otro { background: rgba(107,114,128,.2); color: #969ca6; }
/* 29/08/2026 JVN: un spinner de verdad. `.cargando` solo daba estilo al texto, así que un div
vacío con esa clase no pintaba nada: la espera de dos minutos era un párrafo quieto. */
.spinner {
width: 2.4rem; height: 2.4rem; margin: 0 auto 1rem;
border: 3px solid var(--linea, #333a45);
border-top-color: var(--marca, #c9a227);
border-radius: 50%; animation: girar .9s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }
/* quien tenga el movimiento desactivado ve latir el borde en vez de girar */
@media (prefers-reduced-motion: reduce) {
.spinner { animation: latir 1.6s ease-in-out infinite; }
@keyframes latir { 50% { opacity: .35; } }
}
/* el contador de segundos: no inventa un porcentaje que no se sabe, pero demuestra que sigue vivo */
.reloj-espera { font-variant-numeric: tabular-nums; opacity: .55; font-size: .78rem; }
/* 29/08/2026 JVN: la aspa de cerrar. Un modal con un paso largo dentro necesita salida visible;
dejar solo Escape y el clic fuera es esconderla. */
.modal h2 { position: relative; padding-right: 2rem; }
.cerrar-x {
all: unset; cursor: pointer; position: absolute; top: -.15rem; right: 0;
width: 1.7rem; height: 1.7rem; line-height: 1.6rem; text-align: center;
border-radius: 6px; font-size: 1.35rem; opacity: .5;
}
.cerrar-x:hover { opacity: 1; background: var(--fondo-hover, #262b33); }
/* el reparto: la primera pregunta al ver la lista es si esto es limpiar tests o arreglar la org */
.fal-reparto { display: flex; gap: .6rem; flex-wrap: wrap; margin: .6rem 0 .9rem; }
.fal-parte {
flex: 1 1 12rem; padding: .55rem .7rem; border-radius: 8px;
background: var(--fondo-alto, #1b1e24); border-left: 3px solid var(--linea, #333a45);
}
.fal-parte b { font-size: 1.6rem; line-height: 1; font-variant-numeric: tabular-nums; margin-right: .35rem; }
.fal-parte span { font-size: .8rem; font-weight: 600; }
.fal-parte em { display: block; font-style: normal; font-size: .72rem; opacity: .65; margin-top: .2rem; }
.culpa-producto { border-left-color: #e08383; }
.culpa-prueba { border-left-color: #7a86c9; }
.culpa-mirar { border-left-color: #d6b34a; }
/* el segundo eslabón de la cadena: lo que hay por debajo del síntoma */
.fal-raiz { opacity: .95; }
.fal-raiz span { opacity: .5; }
.fal-origen { font-size: .72rem; opacity: .6; margin: .25rem 0 0; }
.fal-origen code { font-size: .7rem; }
.fam-mixed-dml-producto { border-left-color: #e08383; }
.fal-chip.fam-mixed-dml-producto { background: rgba(224,131,131,.2); color: #e89a9a; }
/* una opción que no aplica se ve, pero no se pulsa: el `title` dice por qué */
.menu-lista button:disabled { opacity: .38; cursor: not-allowed; }
.menu-lista button:disabled:hover { background: none; }
/* los pasos concretos: es lo que convierte un diagnóstico en trabajo ejecutable */
.fal-pasos { margin: .4rem 0 .2rem; padding-left: 1.4rem; font-size: .78rem; line-height: 1.55; }
.fal-pasos li { margin-bottom: .22rem; }
.fal-pregunta { font-size: .78rem; margin: .35rem 0 0; padding: .4rem .55rem;
background: rgba(214,179,74,.1); border-left: 2px solid #d6b34a; border-radius: 0 5px 5px 0; }
/* ══ 29/08/2026 JVN: EL CUERPO DE UNA USER STORY, LEGIBLE ══════════════════════════════════════
Se escribe en Markdown y se pintaba dentro de un solo : treinta mil caracteres estructurados
convertidos en un muro. Va sobre `.markdown`, que es la clase que ya usaban el chat y Deep
Diagnostics — no hacía falta un segundo juego de estilos, hacía falta que este diera la talla. */
.markdown { line-height: 1.62; }
.markdown > :first-child { margin-top: 0; }
.markdown p { margin: 0 0 .7rem; }
.markdown h4, .markdown h5, .markdown h6 { line-height: 1.35; margin: 1.5rem 0 .5rem; }
.markdown h4 { font-size: 1rem; padding-bottom: .3rem;
border-bottom: 1px solid var(--linea, #333a45); }
.markdown h5 { font-size: .9rem; }
/* nivel 6 son los nombres de clase.método: se ven como código, que es lo que son */
.markdown h6 { font-size: .82rem; font-family: var(--mono); opacity: .95;
margin-top: 1.3rem; padding: .3rem .5rem; border-radius: 5px;
background: var(--sup2, #1b1e24); border-left: 2px solid var(--marca, #c9a227); }
.markdown h6 code { background: none; padding: 0; font-size: inherit; }
.markdown ul, .markdown ol { margin: 0 0 .7rem; padding-left: 1.5rem; }
.markdown li { margin-bottom: .35rem; }
/* los pasos numerados son lo que se ejecuta: aire suficiente para seguirlos uno a uno */
.markdown ol > li { margin-bottom: .55rem; }
.markdown li.sub { margin-left: 1rem; opacity: .88; font-size: .95em; }
.markdown hr { border: none; border-top: 1px solid var(--linea, #333a45); margin: 1.2rem 0; }
/* 29/08/2026 JVN: las subpestañas del detalle de una ejecución. Apex y Flows son dos listas
distintas y la de clases puede tener 485 filas: apiladas, la segunda no se encontraba. */
.sub-cob { margin: 18px 0 4px; }
.fl-que-falta { margin-top: .25rem; }
.fl-que-falta > summary { cursor: pointer; font-size: .72rem; opacity: .55; }
.fl-que-falta > summary:hover { opacity: .9; }
.fl-elem { display: inline-block; margin: .18rem .3rem 0 0; font-size: .7rem; }
.fl-elem em { font-style: normal; opacity: .5; }
/* ══ 29/08/2026 JVN: ANÁLISIS AVANZADOS ════════════════════════════════════════════════════════ */
/* 30/08/2026 JVN: `.an-ficha` era el bloque que explicaba cada análisis al pie de la pantalla.
Esa explicación se ha mudado a la pestaña del análisis dentro de la organización, que es donde
se necesita; la clase se queda porque el historial la sigue usando. */
.an-ficha { margin: 0 0 26px; }
.an-ficha h3 { margin: 0 0 2px; font-size: 1.05rem; }
/* plegada por defecto: la primera vez se leen, las siguientes cincuenta estorban */
.an-ficha-q { margin: 0 0 .6rem; }
.an-ficha-q .an-mas { margin: .2rem 0; }
.an-responde { margin: .4rem 0 .8rem; padding-left: 1.2rem; font-size: .78rem; opacity: .7; }
.an-responde li { margin-bottom: .15rem; }
.an-mas { cursor: pointer; font-size: .85rem; margin: 1rem 0 .4rem; }
/* el gráfico: divs con altura en porcentaje. Sin librería — son barras apiladas, no un cohete */
.an-grafico {
display: flex; align-items: flex-end; gap: 1px; height: 190px; margin: .8rem 0 .2rem;
padding: .5rem .4rem; background: var(--sup2, #1b1e24); border-radius: 8px;
border: 1px solid var(--linea, #333a45);
}
.an-barra { flex: 1 1 0; min-width: 2px; display: flex; flex-direction: column-reverse;
border-radius: 2px 2px 0 0; overflow: hidden; transition: opacity .12s; }
.an-barra:hover { opacity: .7; }
.an-barra i { display: block; width: 100%; }
/* 03/09/2026 JVN: los segmentos de la barra apilada de Agentforce. `.an-barra i` no traía color
—los otros gráficos lo heredan de su propia clase— y las barras salían transparentes.
El gris de «sin mensajes» es deliberado: es el suelo del canal y no dice nada del agente, así
que no puede competir visualmente con los desenlaces que sí significan algo. */
.an-barra i.o { background: var(--ok); }
.an-barra i.w { background: var(--ambar); }
.an-barra i.r { background: var(--mal); }
.an-barra i.apagada { background: color-mix(in srgb, var(--apagado) 35%, transparent); }
.an-eje { display: flex; justify-content: space-between; font-size: .68rem; opacity: .45;
padding: 0 .4rem; font-variant-numeric: tabular-nums; }
.an-color { display: inline-block; width: .7rem; height: .7rem; border-radius: 2px;
margin-right: .45rem; vertical-align: middle; }
/* el mes que es una carga masiva se marca: leerlo como uso normal es el error más fácil */
.an-carga { background: rgba(214,179,74,.08); }
/* ══ 29/08/2026 JVN: EL MAPA DE USO ════════════════════════════════════════════════════════════
Fila = objeto, columna = mes, intensidad = actividad. Es lo único que cuenta la historia de una
organización sin que haya que leer un número: dónde empieza cada franja es cuándo nació ese
objeto y dónde se apaga es cuándo dejó de usarse. */
.uso-mandos { display: flex; flex-wrap: wrap; gap: 1.2rem; margin: .2rem 0 .6rem; }
.uso-grupo { display: flex; align-items: center; gap: .3rem; flex-wrap: wrap; }
.uso-eti { font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; opacity: .45;
margin-right: .2rem; }
.uso-explica { margin: 0 0 1.1rem; font-style: italic; }
.mapa-caja { overflow-x: auto; border: 1px solid var(--linea, #333a45); border-radius: 10px;
background: var(--sup2, #1b1e24); padding: .5rem .6rem .6rem; }
.mapa { display: grid; gap: 1px; min-width: 40rem; }
.mapa-esq { position: sticky; left: 0; z-index: 2; background: var(--sup2, #1b1e24); }
.mapa-mes { font-size: .6rem; opacity: .4; text-align: left; padding-bottom: .3rem;
font-variant-numeric: tabular-nums; white-space: nowrap; }
.mapa-mes.anio { opacity: .75; border-left: 1px solid var(--linea, #333a45); padding-left: 2px; }
.mapa-obj { position: sticky; left: 0; z-index: 2; background: var(--sup2, #1b1e24);
display: flex; align-items: center; gap: .35rem; padding-right: .5rem; cursor: pointer;
font-size: .68rem; height: 1.05rem; }
.mapa-obj:hover code { color: var(--marca, #c9a227); }
.mapa-obj code { font-size: .68rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* la intensidad va en una variable para que el degradado sea uno solo y no cien clases */
.mapa-celda { height: 1.05rem; border-radius: 1px;
background: color-mix(in srgb, var(--marca, #c9a227) calc(var(--i) * 100%), transparent);
transition: outline-color .1s; outline: 1px solid transparent; }
.mapa-celda:hover { outline-color: #fff; }
.mapa-proc { display: inline-block; width: .4rem; height: .4rem; border-radius: 50%; flex: none; }
.mapa-estandar { background: #6b7280; }
.mapa-propio { background: #5fa8c9; }
.mapa-paquete { background: #c96a9e; }
.mapa-leyenda { display: flex; gap: 1.1rem; align-items: center; flex-wrap: wrap;
font-size: .68rem; opacity: .6; margin: .5rem 0 1.4rem; }
.mapa-escala { display: flex; align-items: center; gap: .18rem; margin-left: auto; }
.mapa-escala i { width: .8rem; height: .8rem; border-radius: 2px;
background: color-mix(in srgb, var(--marca, #c9a227) calc(var(--i) * 100%), transparent); }
.uso-totales { display: flex; flex-wrap: wrap; gap: .3rem .9rem; margin: .6rem 0 0;
font-size: .74rem; }
.uso-tot { display: inline-flex; align-items: center; gap: .35rem; }
.uso-tot i { width: .6rem; height: .6rem; border-radius: 2px; }
.uso-tot b { font-variant-numeric: tabular-nums; }
.uso-tot em { font-style: normal; opacity: .45; }
/* el filtro pulsado se queda encendido. `.puesto` solo estaba estilado dentro de otros
contenedores, así que en los mandos nuevos no se veía qué estaba seleccionado */
.uso-grupo .mini.puesto, .an-sub .mini.puesto {
border-color: var(--ambar); color: var(--ambar);
background: color-mix(in srgb, var(--ambar) 12%, transparent);
}
/* ── 29/08/2026 JVN: la pista flotante. Los `title` del navegador tardan un segundo, no se les da
formato y en una rejilla de mil celdas son inservibles: se pasaba el ratón y no salía una cifra. */
.pista-flota {
position: fixed; z-index: 200; pointer-events: none; opacity: 0;
transition: opacity .09s; max-width: 22rem;
background: #0d1014; border: 1px solid var(--linea, #333a45); border-radius: 8px;
padding: .5rem .65rem; font-size: .74rem; line-height: 1.45;
box-shadow: 0 8px 26px rgba(0,0,0,.55);
}
.pista-flota.viva { opacity: 1; }
.pista-flota b { display: block; font-family: var(--mono); font-size: .72rem; }
.pista-flota u { display: block; text-decoration: none; font-size: 1.15rem; font-weight: 700;
color: var(--marca, #c9a227); font-variant-numeric: tabular-nums; margin: .1rem 0; }
.pista-flota span { display: block; opacity: .65; font-size: .7rem; }
.pista-flota span i { display: inline-block; width: .5rem; height: .5rem; border-radius: 2px;
margin-right: .3rem; }
.pista-flota span b { display: inline; font-family: inherit; font-size: inherit; }
/* ── evolución: barras apiladas CON ejes. Antes no había ni escala ni referencia de magnitud ── */
.ev-caja { display: flex; gap: .5rem; height: 210px; margin: .6rem 0 0; }
.ev-eje-y { display: flex; flex-direction: column; justify-content: space-between;
font-size: .64rem; opacity: .4; text-align: right; min-width: 3.5rem;
font-variant-numeric: tabular-nums; padding-bottom: 2px; }
.ev-barras { flex: 1; display: flex; align-items: flex-end; gap: 1px;
border-left: 1px solid var(--linea, #333a45); border-bottom: 1px solid var(--linea, #333a45);
padding: 0 2px; }
.ev-barra { flex: 1 1 0; min-width: 2px; display: flex; flex-direction: column-reverse;
border-radius: 2px 2px 0 0; overflow: hidden; cursor: default; }
.ev-barra:hover { filter: brightness(1.35); }
.ev-barra i { display: block; width: 100%; }
.ev-eje-x { position: relative; height: 1rem; margin-left: 4rem; font-size: .64rem; opacity: .4; }
.ev-eje-x span { position: absolute; transform: translateX(-50%); }
/* ── reparto: el gráfico de barras que faltaba, con cifra y porcentaje a la derecha ── */
.rep { display: flex; flex-direction: column; gap: .3rem; margin-top: .6rem; }
.rep-fila { display: grid; grid-template-columns: 13rem 1fr 7rem; gap: .6rem; align-items: center; }
.rep-nom { font-size: .76rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rep-pista { height: 1.1rem; background: var(--sup2, #1b1e24); border-radius: 3px; overflow: hidden; }
.rep-pista i { display: block; height: 100%; border-radius: 3px; transition: width .2s; }
.rep-val { text-align: right; font-variant-numeric: tabular-nums; font-size: .76rem; }
.rep-val b { margin-right: .4rem; }
.rep-val em { font-style: normal; opacity: .45; font-size: .7rem; }
.uso-panel { margin-top: .8rem; }
/* ══ 29/08/2026 JVN: LAS GRÁFICAS DE UN LÍMITE ════════════════════════════════════════════════
Una barra por muestra, no por mes. Reutiliza la caja de `.an-grafico` pero el color lo pone el
nivel de consumo, no la serie: aquí lo que se lee de un vistazo es «va apretado» o «va sobrado»,
y eso es un color, no una leyenda. */
.lim-escala { font-size: .7rem; opacity: .6; margin: .8rem 0 -.4rem;
font-variant-numeric: tabular-nums; }
.lim-grafico { height: 150px; gap: 2px; }
.lim-barra { border-radius: 2px 2px 0 0; }
.lim-barra i.o { background: var(--ok); }
.lim-barra i.w { background: var(--ambar); }
.lim-barra i.c { background: var(--mal); }
/* lo reconstruido desde Event Monitoring se cuenta de otra forma: se dibuja, pero rayado, para
que no se lea como una muestra nuestra */
.lim-flojo i { background-image: repeating-linear-gradient(45deg,
rgba(0,0,0,.35) 0 3px, transparent 3px 6px); }
/* la miniatura de la fila: solo la forma. Sin ejes, sin números, sin hover que la agrande */
.lim-mini { display: inline-flex; align-items: flex-end; gap: 1px; height: 22px; width: 80px;
background: var(--sup2); border: 1px solid var(--linea); border-radius: 4px; padding: 1px; }
.lim-mini i { flex: 1 1 0; min-width: 1px; background: var(--ambar2, var(--ambar));
border-radius: 1px; }
.lim-mini-no { opacity: .3; font-size: .8rem; }
/* 29/08/2026 JVN: las organizaciones sin el análisis encendido van al final de la tabla y se
atenúan. No se ocultan: que un análisis esté apagado en una org también hay que poder verlo, y
es desde donde se enciende. */
.an-apagada > td { opacity: .55; }
.an-apagada:hover > td { opacity: 1; }
/* la hora que no se midió: se dibuja, pero no como un cero. Un cero de consumo y un «no se sabe»
son cosas distintas y la gráfica no puede confundirlas */
.lim-hueco { height: 100%; background-image: repeating-linear-gradient(45deg,
var(--linea) 0 2px, transparent 2px 5px); opacity: .5; border-radius: 0; }
/* ══ 30/08/2026 JVN: EL INTERRUPTOR DE CADA ANÁLISIS ══════════════════════════════════════════
La celda de la tabla es a la vez el estado y el mando. Tiene que leerse como un estado —de un
vistazo, sin pasar por encima— y comportarse como un botón cuando el ratón llega. */
.an-celda { white-space: nowrap; }
.an-sw { font: inherit; font-size: .68rem; font-weight: 700; letter-spacing: .06em;
padding: .25rem .6rem; border-radius: 999px; cursor: pointer; border: 1px solid transparent;
transition: filter .12s, border-color .12s; }
.an-sw.on { background: rgba(74,168,110,.16); color: var(--ok); border-color: rgba(74,168,110,.4); }
.an-sw.off { background: var(--sup2); color: var(--apagado); border-color: var(--linea); }
.an-sw:hover:not(:disabled) { filter: brightness(1.35); border-color: currentColor; }
.an-sw:disabled { opacity: .5; cursor: progress; }
/* ══ 30/08/2026 JVN: NOTAS DE MÉTODO ══════════════════════════════════════════════════════════
Explicar cómo se cuenta algo NO es avisar de que algo va mal, y hasta hoy las dos cosas usaban
la misma caja roja: cinco seguidas en el modal del uso de datos, mil doscientos caracteres de
prosa en rojo antes de dejar ver un dato. Cuando todo grita, lo que importa no se oye.
Una nota es una línea plegada. Se lee la primera vez y después se ignora sin esfuerzo, que es
exactamente lo que uno hace con ella. El rojo queda libre para lo que de verdad va mal. */
.notas { display: flex; flex-direction: column; gap: 4px; margin: 0 0 16px; }
.nota { font-size: 12.5px; border: 1px solid var(--linea); border-radius: 8px;
background: var(--sup); }
.nota > summary { cursor: pointer; padding: 7px 12px; color: var(--apagado);
list-style: none; display: flex; align-items: center; gap: .45rem; }
.nota > summary::-webkit-details-marker { display: none; }
/* el triángulo lo ponemos nosotros: el del navegador cambia de sitio en cada uno */
.nota > summary::before { content: '›'; opacity: .55; transition: transform .12s;
display: inline-block; }
.nota[open] > summary::before { transform: rotate(90deg); }
.nota > summary:hover { color: var(--txt); }
.nota > div { padding: 0 12px 10px 25px; color: var(--apagado); line-height: 1.55; }
/* ámbar solo cuando hay que fijarse: una foto incompleta o algo que no se le puede soltar al
cliente tal cual. El resto es contexto y va en gris */
.nota.ambar { border-color: color-mix(in srgb, var(--ambar) 40%, var(--linea)); }
.nota.ambar > summary { color: var(--ambar); }
/* ══ 30/08/2026 JVN: EL MAPA AGRUPA DE VERDAD ═════════════════════════════════════════════════
El selector decía «agrupar por» y el mapa lo ignoraba: salían los mismos cuarenta objetos con
cualquier agrupación. Ahora cada fila es un grupo y se despliega en sus objetos. */
.mapa-fila-grupo { cursor: pointer; font-weight: 600; }
.mapa-fila-grupo b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mapa-fila-grupo:hover { color: var(--ambar); }
.mapa-abrir { margin-left: auto; font-size: .62rem; opacity: .55;
font-variant-numeric: tabular-nums; }
/* el hijo, sangrado y con la etiqueta más pequeña: se ve de un vistazo qué cuelga de qué */
.mapa-obj.mapa-hijo { padding-left: 1.1rem; font-weight: 400; }
.mapa-obj.mapa-hijo code { opacity: .8; }
.mapa-celda.mapa-hijo { opacity: .9; }
/* `.oculta` en un grid deja el hueco si es `visibility`: aquí tiene que sacar la celda del flujo */
.mapa .oculta { display: none; }
/* la cola de grupos que no cabe en el mapa: se nombra, no se esconde */
.mapa-cola { margin: .5rem 0 0; line-height: 1.6; }
/* ══ 30/08/2026 JVN: EL RADIO DE EXPOSICIÓN ═══════════════════════════════════════════════════
Un hallazgo de seguridad tiene que leerse de un vistazo, así que la severidad va en la FORMA
—una franja de color a la izquierda— además de en la etiqueta. Solo con color, quien no
distingue rojo de ámbar no ve nada. */
.seg-hallazgos { display: flex; flex-direction: column; gap: 8px; margin: 14px 0; }
.seg-h { background: var(--sup); border: 1px solid var(--linea); border-radius: 9px;
padding: 12px 15px 13px 18px; position: relative; overflow: hidden; }
.seg-h::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
background: var(--apagado); }
.seg-h.c::before { background: var(--mal); }
.seg-h.w::before { background: var(--ambar); }
.seg-h-cab { display: flex; flex-wrap: wrap; align-items: baseline; gap: 9px; margin-bottom: 5px; }
.seg-h-id { font-family: var(--mono); font-size: 11.5px; color: var(--apagado); }
.seg-h p { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--txt); }
.seg-h-alc { font-size: 12px; color: var(--apagado); margin-top: 7px;
font-variant-numeric: tabular-nums; }
/* la cadena: de dónde sale un permiso. Es lo que Salesforce no enseña por ninguna pantalla */
.seg-cadena { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin: 9px 0;
padding: 9px 11px; background: var(--sup2); border: 1px solid var(--linea); border-radius: 8px; }
.seg-cadena .nodo { background: var(--sup); border: 1px solid var(--linea); border-radius: 5px;
padding: 3px 9px; font-size: 12.5px; }
.seg-cadena .nodo.fin { background: color-mix(in srgb, var(--mal) 14%, transparent);
border-color: var(--mal); color: var(--mal); font-weight: 600; font-family: var(--mono);
font-size: 12px; }
.seg-cadena .flecha { color: var(--apagado); font-size: 12px; }
/* 30/08/2026 JVN: el chip que va debajo del nombre necesita aire propio; sin esto queda pegado a
la línea de arriba y parece parte del nombre */
.tabla .detalle .chip { margin-top: 3px; }
/* ══ 30/08/2026 JVN: LA VISTA DE DATOS CONCLUYE ALGO ══════════════════════════════════════════
Era una tabla alfabética de 92 filas. Ahora los objetos van agrupados por su situación, y cada
grupo lleva delante la consecuencia de estar en ella. */
.dat-veredicto { background: var(--sup); border: 1px solid var(--linea);
border-left: 3px solid var(--ambar); border-radius: 0 9px 9px 0; padding: 13px 17px;
margin: 0 0 18px; font-size: 14px; line-height: 1.6; }
.dat-umbral { font-size: 12.5px; color: var(--apagado); margin-top: 9px;
padding-top: 8px; border-top: 1px dashed var(--linea); }
.dat-grupo { margin: 0 0 22px; }
.dat-grupo h4 { margin: 0 0 3px; }
/* el grupo grave se marca en el borde de su tabla, no repintando toda la fila */
.dat-grupo.c .tabla-caja { border-color: color-mix(in srgb, var(--mal) 45%, var(--linea)); }
.dat-grupo.w .tabla-caja { border-color: color-mix(in srgb, var(--ambar) 45%, var(--linea)); }
.dat-todo { margin-top: 8px; }
/* el invitado, medido: cada uno con su caja, porque son pocos y cada uno importa */
.fue-invitado { border: 1px solid var(--linea); border-radius: 9px; padding: 12px 14px;
margin: 0 0 12px; background: var(--sup); }
.fue-cab { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.fue-invitado .tabla-caja { margin: 0; }
/* ══ 30/08/2026 JVN: LAS ACCIONES ═════════════════════════════════════════════════════════════
/* ══ 31/08/2026 JVN: LAS ACCIONES · A LA TERCERA, TARJETAS ════════════════════════════════════
Era una lista de filas con un número a la izquierda y dos frases largas a la derecha: media
pantalla para decir tres cosas. Josep lo señaló tres veces, y las tres tenía razón.
Ahora son tarjetas del mismo tamaño, con la cifra grande arriba, la acción en una o dos líneas
y el porqué PLEGADO. El porqué importa —es lo que evita que alguien borre lo que no debe— pero
no tiene que ocupar la pantalla mientras se lee el resto. */
.acc-mos {
display: grid; gap: 10px; margin: 12px 0 22px;
grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.acc {
background: var(--sup); border: 1px solid var(--linea); border-radius: 12px;
padding: 15px 16px 13px; display: flex; flex-direction: column; gap: 6px;
border-top: 3px solid var(--linea);
}
.acc.w { border-top-color: var(--ambar); }
.acc.c { border-top-color: var(--mal); }
.acc > b {
font-size: 26px; font-weight: 600; letter-spacing: -.02em; line-height: 1;
font-variant-numeric: tabular-nums;
}
.acc.w > b { color: var(--ambar); }
.acc.c > b { color: var(--mal); }
.acc > span { font-size: 13px; line-height: 1.35; flex: 1 1 auto; }
.acc details { margin-top: 2px; }
.acc summary { font-size: 11px; color: var(--apagado); cursor: pointer; list-style: none;
display: inline-flex; align-items: center; gap: .3rem; }
.acc summary::-webkit-details-marker { display: none; }
.acc summary::before { content: "\203A"; opacity: .6; transition: transform .12s;
display: inline-block; }
.acc details[open] summary::before { transform: rotate(90deg); }
.acc summary:hover { color: var(--txt); }
.acc details p { margin: 6px 0 0; font-size: 11.5px; line-height: 1.5; color: var(--apagado); }
/* ══ 31/08/2026 JVN: LOS MOSAICOS ═════════════════════════════════════════════════════════════
Josep: «no funciona usar pestañas horizontales, hay más que ancho de modal y se quedan fuera
del rango visual. Lo mismo pasa con la tabla de organizaciones».
Tenía razón por partida doble: una tabla de diecisiete columnas no se lee y quince pestañas no
caben. Un mosaico no tiene ese problema — crece hacia abajo, que es gratis — y además deja
sitio para que cada tarjeta diga su estado sin necesidad de una columna propia. */
.mos { display: grid; gap: 10px; margin: 14px 0 4px;
grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.mos-t {
background: var(--sup); border: 1px solid var(--linea); border-radius: 11px;
padding: 14px 15px 13px; cursor: pointer; position: relative; overflow: hidden;
transition: border-color .12s, transform .12s;
display: flex; flex-direction: column; gap: 8px; min-height: 118px;
}
.mos-t:hover { border-color: var(--ambar); transform: translateY(-1px); }
.mos-t:focus-visible { outline: 2px solid var(--ambar); outline-offset: 2px; }
/* la franja de estado: en la FORMA además del color, para quien no distingue tonos */
.mos-t::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
background: var(--linea); }
.mos-t.on::before { background: var(--ok); }
.mos-t.off::before { background: var(--linea); }
.mos-t.mal::before { background: var(--mal); }
.mos-t.aviso::before { background: var(--ambar); }
.mos-tit { font-size: 14.5px; font-weight: 600; line-height: 1.3; }
.mos-sub { font-size: 12px; color: var(--apagado); line-height: 1.45; }
.mos-pie { margin-top: auto; display: flex; align-items: center; gap: 8px;
flex-wrap: wrap; font-size: 11.5px; color: var(--apagado); }
.mos-cifra { font-size: 22px; font-weight: 600; letter-spacing: -.02em;
font-variant-numeric: tabular-nums; line-height: 1; }
.mos-cifra span { font-size: 12px; font-weight: 400; color: var(--apagado); margin-left: 4px; }
/* el interruptor dentro de una tarjeta: no arrastra el clic de la tarjeta */
.mos-sw { margin-left: auto; }
/* ══ 31/08/2026 JVN: LOS INDICADORES · CUADRADOS, Y A LA TERCERA ══════════════════════════════
Josep, dos veces: «las cajas de KPIs son horribles, deberían ser mejor cajas cuadradas bien
hechas» y «tampoco me has hecho caso con los KPIs, son horribles, te pedí que fueran cuadrados,
más bonitos».
Lo que había hecho era una rejilla de cajas rectangulares con un filete de color arriba. Eso no
es lo que se pidió. Estas son CUADRADAS —`aspect-ratio: 1`— con la cifra centrada y grande, la
etiqueta debajo en dos líneas como mucho, y la nota al pie en gris. El color no va en un filete
sino en la propia cifra y en un halo suave del fondo: menos ruido y se lee de más lejos. */
/* 31/08/2026 JVN: Y AQUÍ ESTABA EL PROBLEMA DE VERDAD.
Josep, tres veces: «las cajas de KPIs son horribles». Yo iba puliendo `.kpi4`… y once pantallas
—Accesos entre ellas— usaban `class="kpis"` con `class="kpi"` dentro, escritas antes de que
existiera `indicadores()`.
`.kpis` y `.kpi` NO TENÍAN NI UNA REGLA EN TODA LA HOJA. Eran divs desnudos con un grid puesto
en el atributo `style`. No es que el estilo fuera malo: es que no había estilo, y yo estaba
mejorando el de las pantallas que ya se veían bien.
Se unifican aquí, en el selector, y no pantalla por pantalla: así queda arreglado también en las
que no toque. El `grid-template-columns` inline de esas once lo pisa `!important` a propósito —
es la única forma de ganar a un atributo `style`. */
.kpi4, .kpis {
display: grid; gap: 12px; margin: 18px 0 22px;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)) !important;
}
.kpi4 > div, .kpis > .kpi {
aspect-ratio: 1 / 1;
background: var(--sup); border: 1px solid var(--linea); border-radius: 14px;
padding: 16px; display: flex; flex-direction: column; justify-content: center;
align-items: center; text-align: center; gap: 8px;
position: relative; overflow: hidden;
transition: border-color .12s;
}
.kpi4 > div:hover, .kpis > .kpi:hover { border-color: color-mix(in srgb, var(--ambar) 45%, var(--linea)); }
/* en pantallas estrechas el cuadrado deja de tener sentido: manda el contenido */
@media (max-width: 560px) {
.kpi4 > div, .kpis > .kpi { aspect-ratio: auto; min-height: 120px; }
}
.kpi4 b, .kpis > .kpi b {
font-size: clamp(28px, 4.2vw, 38px); font-weight: 600; letter-spacing: -.03em;
line-height: 1; font-variant-numeric: tabular-nums; display: block;
}
.kpi4 span, .kpis > .kpi span {
font-size: 12px; color: var(--apagado); line-height: 1.35;
display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.kpi4 .kpi-nota, .kpis .kpi-nota {
font-size: 10.5px; opacity: .65; -webkit-line-clamp: 2;
border-top: 1px solid var(--linea); padding-top: 7px; width: 100%; margin-top: 2px;
}
/* el color va en la cifra y en un halo del fondo, no en un filete pegado al borde */
.kpi4 > div.o, .kpis > .kpi.o { background:
radial-gradient(120% 100% at 50% 0%, color-mix(in srgb, var(--ok) 9%, transparent), transparent 70%),
var(--sup); border-color: color-mix(in srgb, var(--ok) 32%, var(--linea)); }
.kpi4 > div.w, .kpis > .kpi.w { background:
radial-gradient(120% 100% at 50% 0%, color-mix(in srgb, var(--ambar) 11%, transparent), transparent 70%),
var(--sup); border-color: color-mix(in srgb, var(--ambar) 34%, var(--linea)); }
.kpi4 > div.c, .kpis > .kpi.c { background:
radial-gradient(120% 100% at 50% 0%, color-mix(in srgb, var(--mal) 11%, transparent), transparent 70%),
var(--sup); border-color: color-mix(in srgb, var(--mal) 34%, var(--linea)); }
.kpi4 > div.o b, .kpis > .kpi.o b { color: var(--ok); }
.kpi4 > div.w b, .kpis > .kpi.w b { color: var(--ambar); }
.kpi4 > div.c b, .kpis > .kpi.c b { color: var(--mal); }
/* ══ 31/08/2026 JVN: EL MODAL QUE NAVEGA POR DENTRO ═══════════════════════════════════════════
Antes se apilaban tres ventanas, con el botón de cerrar al final del contenido —después de
hacer scroll— y sin forma de volver un paso. Ahora es uno solo: la flecha vuelve, la X cierra,
y las dos están donde se buscan. */
.modal-nav { padding: 0; display: flex; flex-direction: column; max-height: 88vh; }
.mn-cab {
display: flex; align-items: center; gap: 12px; padding: 16px 20px;
border-bottom: 1px solid var(--linea); flex: 0 0 auto;
background: var(--sup); border-radius: 16px 16px 0 0;
position: sticky; top: 0; z-index: 2;
}
.mn-tit { margin: 0 !important; font-size: 17px; flex: 1 1 auto; min-width: 0;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mn-atras, .mn-x {
flex: 0 0 auto; width: 30px; height: 30px; border-radius: 8px; cursor: pointer;
background: var(--sup2); border: 1px solid var(--linea); color: var(--apagado);
font-size: 15px; line-height: 1; display: grid; place-items: center;
transition: color .12s, border-color .12s;
}
.mn-atras:hover, .mn-x:hover { color: var(--txt); border-color: var(--ambar); }
.mn-atras:focus-visible, .mn-x:focus-visible { outline: 2px solid var(--ambar); outline-offset: 1px }
.mn-cuerpo { padding: 18px 20px 22px; overflow-y: auto; flex: 1 1 auto; }
/* 31/08/2026 JVN: `.pista-flota` ya tenía sus reglas y son mejores que las que iba a poner —el
sujeto en monoespaciada, el resto atenuado—. Aquí solo el cursor, que es lo que faltaba: si algo
da información al pasar por encima, tiene que anunciarlo. */
.an-barra, .cob-barra, .lim-mini, .kpi4 > div { cursor: help; }
.mos-t, .ev-barra { cursor: pointer; }
/* ══ 31/08/2026 JVN: LOS GRÁFICOS ═════════════════════════════════════════════════════════════
«Me faltan gráficos chulos aquí». Lo que había eran barras dentro de celdas de tabla, que
sirven para comparar una fila con la de al lado y para nada más. */
.gr-anillo { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; margin: 14px 0 18px; }
.gr-anillo svg { flex: 0 0 auto; }
.an-arco { transition: opacity .12s; cursor: help; }
.gr-anillo:hover .an-arco { opacity: .45; }
.gr-anillo .an-arco:hover { opacity: 1; }
.gr-c1 { fill: var(--txt); font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; }
.gr-c2 { fill: var(--apagado); font-size: 8.5px; letter-spacing: .06em; text-transform: uppercase; }
.gr-leyenda { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column;
gap: 5px; min-width: 190px; flex: 1 1 190px; }
.gr-leyenda li { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
.gr-leyenda i { width: 10px; height: 10px; border-radius: 3px; flex: 0 0 auto; }
.gr-leyenda span { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
color: var(--apagado); }
.gr-leyenda b { font-variant-numeric: tabular-nums; }
.gr-reloj { display: flex; justify-content: center; margin: 10px 0 4px; }
.an-cuna { transition: opacity .12s; cursor: help; }
.gr-reloj:hover .an-cuna { opacity: .3 !important; }
.gr-reloj .an-cuna:hover { opacity: 1 !important; }
.gr-h { fill: var(--apagado); font-size: 8px; font-variant-numeric: tabular-nums; }
.gr-bh { display: flex; flex-direction: column; gap: 5px; margin: 12px 0 18px; }
.gr-bh-fila { display: grid; grid-template-columns: minmax(90px, 1.4fr) 3fr auto; gap: 10px;
align-items: center; font-size: 12.5px; cursor: help; }
.gr-bh-et { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gr-bh-pista { height: 9px; border-radius: 5px; background: var(--sup2);
border: 1px solid var(--linea); overflow: hidden; }
.gr-bh-pista i { display: block; height: 100%; border-radius: 4px; transition: width .2s; }
.gr-bh-val { font-variant-numeric: tabular-nums; color: var(--apagado); min-width: 58px;
text-align: right; }
/* dos gráficos lado a lado cuando cabe, uno debajo del otro cuando no */
.gr-par { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
margin: 6px 0 18px; }
.gr-par > div { min-width: 0; }
.gr-tit { font-family: var(--mono); font-size: 11px; letter-spacing: .08em;
text-transform: uppercase; color: var(--apagado); margin: 0 0 6px; }
/* 31/08/2026 JVN: la evolución, detrás de cualquier análisis. Reutiliza `.an-grafico` para las
barras; lo único propio es la cabecera con el desplegable de cifra y el aire de separación,
porque va pegada al final de una vista que no sabe que esto existe. */
.an-evo { margin-top: 1.6rem; padding-top: 1.1rem; border-top: 1px solid var(--linea); }
.an-evo-cab { display: flex; align-items: baseline; justify-content: space-between;
gap: .8rem; flex-wrap: wrap; margin-bottom: .3rem; }
.an-evo-cab .gr-tit { margin: 0; }
.an-evo-sel { font: inherit; font-size: .78rem; padding: .22rem .5rem; border-radius: 6px;
border: 1px solid var(--linea); background: var(--sup2); color: var(--txt); max-width: 15rem; }
/* 31/08/2026 JVN: las subpestañas de cada análisis. Heredan `.pestanas` —que ya envuelve, y por eso
no se salen del modal— y solo añaden el aire de separación respecto a la cabecera fija y el
rótulo largo dentro de la hoja. La evolución, cuando cae dentro de una pestaña, pierde su raya
de arriba: ahí ya la separa la propia pestaña. */
.sub-pest { margin: 1.5rem 0 1rem; }
.sub-hoja > h4:first-child, .sub-hoja > .sub-tit:first-child { margin-top: 0; }
.sub-tit { font-size: .82rem; color: var(--apagado); margin: 0 0 .7rem; }
.an-evo-suelta { margin-top: 0; padding-top: 0; border-top: 0; }
/* 31/08/2026 JVN: el rótulo de «Qué haría con esto». Era un h4 y con las subpestañas eso lo
convertía en una pestaña, escondiendo la conclusión detrás de un clic. Se queda con el mismo
aspecto que tenía, pero sin abrir sección. */
.acc-rot { font-size: 14px; font-weight: 600; color: var(--txt);
margin: 1.4rem 0 .5rem; letter-spacing: .01em; }
/* 31/08/2026 JVN: los casos dentro de una tarjeta de acción. Los tres primeros en línea, con su
dato en cursiva, y el botón que abre el resto. Sin esto la tarjeta daba un número y nada más,
que es con lo que no se puede decidir. */
.acc-cuales { display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center;
margin: .45rem 0 .1rem; }
.acc-cuales span { font-size: 11.5px; padding: 1px 6px; border-radius: 5px;
background: var(--sup2); color: var(--apagado); max-width: 100%; overflow: hidden;
text-overflow: ellipsis; white-space: nowrap; }
.acc-cuales span i { font-style: normal; color: var(--txt); font-family: var(--mono);
font-size: 10.5px; }
.acc-cuales button.mini { font-size: 11px; padding: 1px 7px; }
/* 31/08/2026 JVN: el visor de un ApexLog. Dos cosas que lo hacían ilegible: el modal iba a 1.150 px
cuando un log es texto en columnas de 150-200 caracteres, y el `
` no tenía un alto propio, así
que el scroll era el de la página. Ahora el modal ocupa lo que dé la ventana y el crudo tiene su
propia caja con scroll en los dos ejes. */
.deep-log { max-height: 62vh; overflow: auto; font-family: var(--mono); font-size: 11.5px;
line-height: 1.45; white-space: pre; tab-size: 4; padding: .7rem .8rem;
background: var(--bg); border: 1px solid var(--linea); border-radius: 8px; }
.deep-log-marcas { margin: .6rem 0 .8rem; padding: .7rem .8rem; border-radius: 8px;
background: var(--sup2); border: 1px solid var(--linea); }
.deep-log-marcas .chip { margin-right: 4px; }
/* 02/09/2026 JVN: la barra de acciones de la tarjeta de Pruebas y cobertura. Las cinco acciones
vivían en un menú «Acciones ▾» de una tabla; aquí la tarjeta ya es de UNA organización, así que
el menú no aporta nada y esconder lo único que se puede hacer sería el error de antes otra vez. */
.pr-acciones{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:10px 0 14px}
.pr-acciones button[disabled]{opacity:.45;cursor:not-allowed}
/* ══ 03/09/2026 JVN: EL TRANSCRIPT DE UNA CONVERSACIÓN DE AGENTFORCE ══════════════════════════
Josep, en la pestaña de fallos: «me gustaria poder clickar y ver la conversacion».
Los dos lados NO se pintan iguales a propósito. Lo que hay que leer aquí es una discrepancia
—el agente dice que hubo un problema y la persona preguntaba otra cosa—, y para verla de un
vistazo los turnos tienen que distinguirse sin leer la etiqueta. El agente a la izquierda con
su franja, la persona a la derecha; un tercer color para el humano que recoge un escalado,
porque confundirlo con el bot haría leer un escalado como un fallo del agente. */
.conv { display: flex; flex-direction: column; gap: 10px; margin: 4px 0 14px; }
.conv-t { max-width: 82%; border: 1px solid var(--linea); border-radius: 10px;
padding: 8px 11px; background: var(--sup); }
.conv-quien { font-size: .68rem; text-transform: uppercase; letter-spacing: .04em;
color: var(--apagado); margin-bottom: 4px; }
.conv-txt { font-size: .84rem; line-height: 1.55; white-space: pre-wrap;
overflow-wrap: anywhere; }
.conv-t.conv-agente { align-self: flex-start; border-left: 3px solid var(--ok); }
.conv-t.conv-persona { align-self: flex-end; border-right: 3px solid
color-mix(in srgb, var(--apagado) 60%, var(--linea)); }
.conv-t.conv-agente .conv-quien { color: var(--ok); }
.conv-t.conv-humano { align-self: flex-start; border-left: 3px solid var(--ambar); }
.conv-t.conv-humano .conv-quien { color: var(--ambar); }
/* una fila de fallo se puede pinchar, y se tiene que notar antes de pincharla */
tr[data-af-conv] { cursor: pointer; }
tr[data-af-conv]:hover > td { background: color-mix(in srgb, var(--txt) 5%, transparent); }
tr[data-af-conv]:focus-visible { outline: 2px solid var(--ok); outline-offset: -2px; }
/* ══ 04/09/2026 JVN: EL VEREDICTO DE LA PUERTA DE ANÁLISIS ═══════════════════════════════════
Josep: «donde pone bloquea, avisa... que valores puede haber? para poner colores diferentes
porque ahora visualmente no se distingue apenas».
No se distinguían porque las clases NO EXISTÍAN: la tabla pintaba `chip o`, `chip w` y `chip c`,
que son los códigos de nivel de los indicadores, y sobre un chip no están definidos en ninguna
parte. Los tres salían con el estilo por defecto.
── DÓNDE VA EL PESO VISUAL, Y POR QUÉ NO EN «BLOQUEA» ──────────────────────────────────────
Mi primera versión puso a BLOQUEA en rojo con fondo, por ser el que impide trabajar. Medido
contra las once organizaciones conectadas, eso era un error: hay **45 BLOQUEA, 15 AVISA y ningún
PASA**. Cuarenta y cinco celdas con fondo rojo de cincuenta y cinco no señalan nada; son un muro.
Y es que BLOQUEA no es una incidencia: es el estado normal de una organización que todavía no se
ha medido, que hoy son nueve de once. Lo que se busca al abrir esta tabla es lo contrario —qué
organizaciones YA se pueden auditar—, así que el peso visual va ahí:
PASA verde CON FONDO. Es el objetivo y hoy no hay ninguno: cuando aparezca, tiene que verse.
AVISA ámbar con fondo leve. Se puede generar declarando lo que falta. Es lo accionable.
BLOQUEA rojo en el texto y en el borde, SIN fondo. Se distingue de sobra por el color y no
ahoga la tabla.
Si algún día la proporción se invierte —casi todo medido y algún bloqueo suelto— habrá que
volver a mirar esto, porque entonces el que hay que encontrar de un barrido será el otro. */
.chip.puerta-pasa { color: #0f1a12; font-weight: 600;
border-color: color-mix(in srgb, var(--ok) 70%, var(--linea));
background: color-mix(in srgb, var(--ok) 78%, transparent); }
.chip.puerta-avisa { color: var(--ambar);
border-color: color-mix(in srgb, var(--ambar) 55%, var(--linea));
background: color-mix(in srgb, var(--ambar) 12%, transparent); }
/* el rojo del texto es #e0705f y no `--mal`: `--mal` sobre el fondo de la app da 4,23:1 y este
chip son diez píxeles en mayúsculas. #e0705f da 5,65:1 y ya está en la paleta —es el de
«severidad crítica»—, así que no se inventa un color nuevo. El borde sí usa `--mal`: en un borde
no hay texto que leer. */
.chip.puerta-bloquea { color: #e0705f;
border-color: color-mix(in srgb, var(--mal) 60%, var(--linea)); }
/* ══ 04/09/2026 JVN: QUÉ HAY DENTRO DE UNA SESIÓN DE CAPTURA ═════════════════════════════════
Josep: «estaria bien que el estado en la tabla principal ya indicara si hay algun error
capturado o no... sino tienes que abrir todo el historial hasta encontrar».
De 509 logs capturados hay CUATRO con marca de error. Así que aquí el peso visual sí va en el
error: es lo raro y es lo que se busca. Es el caso contrario al veredicto de la puerta de
análisis, donde el estado abundante era el rojo y darle fondo lo convertía en un muro.
«sin errores» va en gris y NUNCA en verde, a propósito. El semáforo solo dice que no encontró
ninguna de las marcas que busca; pintarlo de verde daría por bueno un log que nadie ha leído, y
eso es justo lo que el propio `apexlog-marcas.js` avisa de no hacer: «limpio» no es «correcto». */
.chip.log-error { color: #ffd9cc; font-weight: 600;
border-color: color-mix(in srgb, var(--mal) 70%, var(--linea));
background: color-mix(in srgb, var(--mal) 62%, transparent); }
.chip.log-aviso { color: var(--ambar);
border-color: color-mix(in srgb, var(--ambar) 55%, var(--linea));
background: color-mix(in srgb, var(--ambar) 12%, transparent); }
.chip.log-limpio { color: var(--apagado);
border-color: color-mix(in srgb, var(--apagado) 30%, var(--linea)); }
/* ══ 04/09/2026 JVN: LOS DOS BOTONES DE TANDA DEL MOSAICO ════════════════════════════════════
Josep: «un boton arriba del todo para encender todo y otro para apagar todo». Van sobre el
mosaico, con el recuento delante: «12 de 17 encendidas» dice qué van a hacer antes de pulsar. */
.an-tanda { display: flex; align-items: center; gap: 10px; margin: 0 0 12px;
padding-bottom: 10px; border-bottom: 1px solid var(--linea); }
.an-tanda .n { margin-right: auto; font-variant-numeric: tabular-nums; }
/* ══════════════════════════════════════════════════════════════════════════════════════════════
LAS ESTIMACIONES DE ALCANCE
══════════════════════════════════════════════════════════════════════════════════════════════
08/09/2026 JVN: Josep, al abrir la estimación 14: «el texto que aparece, el scroll horizontal
es infinito casi». Era `.tabla-caja>.tabla{min-width:max-content}` sobre celdas con párrafos
enteros dentro: el «de dónde salen las horas» de un módulo son tres líneas de prosa, y
`max-content` hace la tabla tan ancha como su párrafo más largo.
Aquí no hay ninguna tabla que se desplace: la lista tiene `table-layout:fixed` con anchos
propios, y los módulos de la ficha son tarjetas. Una tarjeta no puede desbordar a lo ancho. */
/* ── la tira de arriba: cuánto trabajo hay cifrado y sobre cuántas orgs de verdad ── */
.est-resumen{display:flex;gap:26px;flex-wrap:wrap;padding:14px 18px;margin:0 0 16px;
background:var(--sup);border:1px solid var(--linea);border-radius:12px}
.est-resumen>div{display:flex;flex-direction:column;gap:1px}
.est-resumen b{font-size:22px;font-weight:600;font-variant-numeric:tabular-nums;line-height:1.1}
.est-resumen span{font:10.5px/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase;
color:var(--apagado)}
.est-resumen .est-curso b{color:var(--ambar)}
.est-resumen .est-mal b{color:#e0705f}
/* ── la lista. Anchos fijos: la prosa se parte, no empuja ── */
.tabla-est{table-layout:fixed;width:100%}
.tabla-est th:nth-child(1){width:auto}
.tabla-est th:nth-child(2){width:12%}
.tabla-est th:nth-child(3){width:98px}
.tabla-est th:nth-child(4){width:82px}
.tabla-est th:nth-child(5){width:15%}
.tabla-est th:nth-child(6){width:11%}
.tabla-est td{vertical-align:top;overflow-wrap:anywhere}
.tabla-est tbody tr{cursor:pointer}
.tabla-est tbody tr:hover{background:var(--sup2)}
.est-t{font-weight:600;font-size:13.5px;line-height:1.35}
/* la petición es contexto, no el titular: dos líneas y a otra cosa */
.est-pet{margin-top:3px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
overflow:hidden;line-height:1.45}
.est-horas{white-space:nowrap}
.est-h{font-size:17px;font-weight:600;font-variant-numeric:tabular-nums}
.est-hu{font-size:11px;color:var(--apagado);margin-left:2px}
.est-horas .chip{margin-top:4px}
/* ── la ficha ── */
.est-cab{margin-bottom:6px}
.est-chip-h{font-size:12px;padding:3px 9px}
.est-conf{margin:0 0 12px;max-width:80ch}
/* la petición, tal y como la escribió el comercial: con sus saltos de línea y sin desbordar */
.est-pre{margin:0;white-space:pre-wrap;overflow-wrap:anywhere}
.est-mods{display:flex;flex-direction:column;gap:12px;margin:14px 0}
.est-mod{border:1px solid var(--linea);border-radius:11px;background:var(--sup);
padding:13px 16px 14px;overflow-wrap:anywhere}
.est-mod>header{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.est-mod-n{font:11px/1 var(--mono);color:var(--apagado);border:1px solid var(--linea);
border-radius:5px;padding:3px 6px}
.est-mod h5{margin:0;font-size:14px;font-weight:600;flex:1 1 auto;min-width:200px}
.est-mod-h{white-space:nowrap}
.est-mod>p{margin:8px 0 0;font-size:13.5px;line-height:1.55;color:var(--txt)}
.est-mod dl{margin:9px 0 0;display:grid;grid-template-columns:minmax(120px,180px) 1fr;
gap:3px 14px;font-size:12.5px}
.est-mod dt{font:10.5px/1.7 var(--mono);letter-spacing:.05em;text-transform:uppercase;
color:var(--apagado)}
.est-mod dd{margin:0;line-height:1.55;color:var(--apagado)}
.est-riesgos{margin:10px 0 0;padding:0;list-style:none;font-size:12.5px}
.est-riesgos li{padding:4px 0 4px 16px;position:relative;line-height:1.5;color:var(--apagado)}
.est-riesgos li::before{content:'⚠';position:absolute;left:0;color:var(--ambar);font-size:11px}
.est-mas{font-family:var(--mono);font-size:11px;color:var(--ambar);white-space:nowrap}
.est-procesos{margin:8px 0 14px;padding:0;list-style:none}
.est-procesos li{padding:8px 0;border-bottom:1px solid var(--linea);font-size:13px}
.est-procesos li:last-child{border-bottom:0}
.est-procesos .chip{margin-left:8px}
.est-rastro{margin:6px 0 0;padding:0 0 0 2px;list-style:none;font-size:12.5px}
.est-rastro li{padding:5px 0;border-bottom:1px solid var(--linea);overflow-wrap:anywhere}
.est-rastro li:last-child{border-bottom:0}
/* 08/09/2026 JVN: y una red por si esto vuelve a pasar en otro sitio. Un chip existe para llevar
una etiqueta de dos palabras; el día que alguien le meta un párrafo —el modelo lo hizo— se
parte en varias líneas en vez de estirar su contenedor hasta sacar la ficha de la pantalla. */
.chip{max-width:100%;overflow-wrap:anywhere}
/* 08/09/2026 JVN: el aspa de borrar de una fila. Josep: «me falta un botón para borrar US y para
borrar estimaciones y propuestas comerciales». Va discreta —es una acción que no se hace todos
los días— y solo se pone en rojo cuando el ratón está encima: una lista con veinte aspas rojas
parece una lista de errores. */
.borrar-fila{padding:2px 7px;line-height:1.2;color:var(--apagado);border-color:transparent;
opacity:.55;transition:opacity .15s,color .15s}
/* 08/09/2026 JVN: Josep: «en la UI siempre usa la misma manera de borrar, ahora tenemos botones
diferentes». Había ocho pintas para lo mismo: un «×» sin borde, un enlace de texto que decía
«borrar», tres botones con la palabra «quitar» y el aspa nueva. Ahora el aspa es la única forma
de borrar algo de una fila o de una lista, y se ve al pasar por encima esté donde esté —una
fila de tabla, un `` o un ``—, no solo dentro de un `
`. */
tr:hover .borrar-fila,li:hover .borrar-fila,.est-mod:hover .borrar-fila,
div:hover>.borrar-fila{opacity:1}
.borrar-fila:focus-visible{opacity:1}
.borrar-fila:hover{color:#e0705f;border-color:color-mix(in srgb,#e0705f 45%,var(--linea));
opacity:1}
.borrar-fila:disabled{opacity:.4;cursor:default}
/* la columna del aspa no ocupa más de lo que necesita */
.tabla-est th:last-child{width:44px}
/* 08/09/2026 JVN: el menú que se lleva a la reunión. Josep: «me parecen pocas propuestas».
Va antes que los módulos porque es lo que se mira para preparar la reunión; los módulos son la
consecuencia. Cada una dice en qué se apoya, y eso es lo que la separa de un folleto. */
.est-propuestas{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:9px}
.est-propuestas li{border:1px solid var(--linea);border-radius:10px;background:var(--sup);
padding:11px 14px;overflow-wrap:anywhere}
.est-prop-cab{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;font-size:13.5px}
.est-prop-cab b{flex:1 1 auto;min-width:200px}
.est-propuestas p{margin:6px 0 0;font-size:13px;line-height:1.55;color:var(--apagado)}
/* 08/09/2026 JVN: el PDF del cliente cuando lleva frases en técnico. No se bloquea la descarga
—a veces hace falta enviarlo ya— pero el botón lo dice y arriba está la lista de qué reescribir. */
.aviso-pdf{border-color:color-mix(in srgb,var(--ambar) 45%,var(--linea));color:var(--ambar)}
/* 08/09/2026 JVN: la tabla de backups. Anchos fijos y la prosa —el último error— partida, que es
lo que estiraba las tablas antes. */
.tabla-backups{table-layout:fixed;width:100%}
.tabla-backups th:nth-child(1){width:20%}
.tabla-backups th:nth-child(2){width:14%}
.tabla-backups th:nth-child(3){width:14%}
.tabla-backups th:nth-child(4){width:20%}
.tabla-backups th:nth-child(5){width:13%}
/* 08/09/2026 JVN: la última columna tenía tres botones y ahora solo lleva activar/desactivar */
.tabla-backups th:nth-child(6){width:110px}
.tabla-backups td{vertical-align:top;overflow-wrap:anywhere}
/* 16/09/2026 JVN: el estado de Salesforce. La tabla no se desplaza: anchos fijos y la prosa —el
nombre de un mantenimiento— partida. */
.tabla-estsf{table-layout:fixed;width:100%}
.tabla-estsf th:nth-child(1){width:17%}
.tabla-estsf th:nth-child(2){width:10%}
.tabla-estsf th:nth-child(3){width:13%}
.tabla-estsf th:nth-child(4){width:16%}
.tabla-estsf th:nth-child(5){width:9%}
.tabla-estsf th:nth-child(7){width:12%}
.tabla-estsf td{vertical-align:top;overflow-wrap:anywhere}
.tabla-estsf tbody tr:hover{background:var(--sup2)}
/* El incidente abierto. Josep: «además está super pegada a la tabla de abajo» — y lo estaba: la
caja de aviso no tenía margen inferior y la tabla arrancaba pegada a ella. */
.sf-incidente{border:1px solid color-mix(in srgb,var(--ambar) 38%,var(--linea));
border-left:3px solid var(--ambar);border-radius:10px;background:var(--sup);
padding:13px 16px;margin:0 0 22px}
.sf-inc-cab{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;font-size:13.5px}
.sf-inc-quien{margin:8px 0 0;font-size:13.5px}
.sf-inc-txt{margin:9px 0 0;font-size:13px;line-height:1.6;color:var(--apagado);
white-space:pre-wrap;max-width:88ch}
.sf-inc-pie{margin:9px 0 0;font-size:12.5px;line-height:1.55;max-width:88ch}
/* y aire entre la tabla principal y el bloque de mantenimientos */
.sf-titulo{margin-top:26px}
.chip.ambar{color:var(--ambar);border-color:color-mix(in srgb,var(--ambar) 40%,var(--linea))}
/* 16/09/2026 JVN: la ficha de una instancia. Josep: «realmente yo espero que me muestre al menos
la versión actual». Dos columnas: la etiqueta estrecha y el dato con sitio. */
.sf-ficha{margin:0 0 20px}
.sf-datos{display:grid;grid-template-columns:minmax(150px,240px) 1fr;gap:7px 18px;margin:0;
font-size:13.5px}
.sf-datos dt{font:10.5px/1.7 var(--mono);letter-spacing:.05em;text-transform:uppercase;
color:var(--apagado)}
.sf-datos dd{margin:0;overflow-wrap:anywhere}
.sf-datos dd .chip{margin:0 4px 3px 0}
.tabla-mant{table-layout:fixed;width:100%}
.tabla-mant th:nth-child(2){width:20%}
.tabla-mant th:nth-child(3){width:18%}
.tabla-mant th:nth-child(4),.tabla-mant th:nth-child(5){width:11%}
.tabla-mant td{vertical-align:top;overflow-wrap:anywhere}
@media(max-width:700px){.sf-datos{grid-template-columns:1fr}}
/* 16/09/2026 JVN: en el detalle de una instancia la caja del incidente va fina: el texto largo ya
se leyó en la lista, así que aquí se plega. Ver el comentario de `pantallaHistoriaSF`. */
.sf-inc-fino .sf-inc-pie{margin-top:7px}
.sf-inc-mas{margin-top:9px}
.sf-inc-mas .sf-inc-txt{margin-top:8px}
/* 16/09/2026 JVN: el estado de Salesforce en la ficha del cliente. Una caja por org suya. */
.sf-org-estado{border:1px solid var(--linea);border-radius:10px;background:var(--sup);
padding:12px 15px;margin:0 0 11px}
.sf-org-estado:last-child{margin-bottom:0}
/* 16/09/2026 JVN: las casillas de permisos de un token. Josep las pidió «bonitas para marcar y
desmarcar»: lo que las hace usables es que cada una diga qué abre y que lo peligroso se vea
—escribir en la org de un cliente no es lo mismo que leer su backlog—. */
.permisos{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px}
.permisos-grupo{border:1px solid var(--linea);border-radius:11px;padding:12px 14px 14px;margin:0;
background:var(--sup)}
.permisos-grupo legend{font:10.5px/1 var(--mono);letter-spacing:.07em;text-transform:uppercase;
color:var(--apagado);padding:0 6px}
.permiso{display:flex;gap:10px;align-items:flex-start;padding:8px 0;cursor:pointer;
border-bottom:1px solid var(--linea)}
.permisos-grupo .permiso:last-child{border-bottom:0;padding-bottom:0}
.permiso input{margin-top:3px;flex:0 0 auto;accent-color:var(--ambar);width:15px;height:15px;
cursor:pointer}
.permiso-txt{display:flex;flex-direction:column;gap:3px;font-size:13px;line-height:1.45}
.permiso-txt .chip{align-self:flex-start;margin-top:1px}
.permiso-txt .apagado{font-size:12px;line-height:1.5}
.permiso:hover{background:var(--sup2)}
/* lo que escribe en la organización de un cliente se ve antes de marcarlo, no después */
.permiso.peligroso{border-left:2px solid color-mix(in srgb,#e0705f 60%,transparent);
padding-left:9px;margin-left:-11px}
.permiso.sensible:not(.peligroso){border-left:2px solid color-mix(in srgb,var(--ambar) 50%,transparent);
padding-left:9px;margin-left:-11px}
.tk-cab{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;flex-wrap:wrap}
/* 16/09/2026 JVN: el «marcar todos» de los permisos, con su resumen al lado. Josep: «añade un
checkbox para marcarlos todos». El resumen dice cuántos de los marcados gastan o escriben en la
org de un cliente: es el número que hay que ver antes de guardar. */
.permisos-todos{display:flex;align-items:center;gap:9px;padding:9px 13px;margin:0 0 12px;
border:1px solid var(--linea);border-radius:9px;background:var(--sup2);cursor:pointer;
font-size:13.5px}
.permisos-todos input{accent-color:var(--ambar);width:15px;height:15px;cursor:pointer}
.permisos-todos .apagado{margin-left:auto;font-variant-numeric:tabular-nums}
/* 16/09/2026 JVN: tokens · el campo del secreto con su botón de copiar al lado.
(el separador `.tk-seccion` se retiró al pasar a subpestañas: el rótulo lo pone la pestaña) */
.tk-copiar { display: flex; gap: 8px; align-items: center; }
.tk-copiar input { flex: 1; min-width: 0; }
.tk-copiar .mini { flex: 0 0 auto; }
|