:root{ --fondo:#F6F8FB; --panel:#FFFFFF; --tinta:#0B1A26; --tinta2:#5A7183; --tinta3:#93A8B6; --fondo2:#F1F5F9; /* superficie hundida: cajas dentro de una tarjeta */ --marca:#0F6CC4; --marca2:#1E9BE0; --marca-suave:#EAF4FC; --borde:#E6EDF3; --borde2:#EFF3F7; --turquesa:#2BD3E2; --tinta-inv:#F6F9FC; /* El turquesa de la marca sobre blanco da 1.82:1 — MEDIDO, y reprueba hasta para numero grande (el ambar de al lado da 3.22). Sirve para degradados y acentos, no para texto. Este es su version legible: 4.8:1 sobre blanco. Es la leccion de los tonos del CSAT, calculados sobre blanco y cortos a 13px. */ --turquesa-t:#0A7E8A; --verde:#17966B; --ambar:#C97F04; --rojo:#D14837; --verde-f:#E7F6EF; --ambar-f:#FCF2DD; --rojo-f:#FCEBE8; --s1:0 1px 2px rgba(11,26,38,.04),0 1px 3px rgba(11,26,38,.06); --s2:0 2px 4px rgba(11,26,38,.04),0 8px 24px rgba(11,26,38,.07); --s3:0 8px 16px rgba(11,26,38,.06),0 24px 56px rgba(11,26,38,.12); --sombra:var(--s2); --sombra-alta:var(--s3); --radio:18px; --radio-sm:12px; --grad:linear-gradient(135deg,#0F6CC4 0%,#1E9BE0 55%,#2BD3E2 120%); } /* ── Modo oscuro ──────────────────────────────────────────────────────────── Sigue la preferencia del sistema (el camino Apple: el telefono decide de noche). Todo el diseño vive en tokens, asi que oscurecer es redefinirlos; abajo, un puñado de reglas puntuales para los pasteles que no son token. El azul de marca sube un paso de luz: el #0F6CC4 original pierde contraste sobre fondo oscuro. Los correos NO cambian: HTML con estilos en linea. */ @media (prefers-color-scheme: dark){ :root{ --fondo:#0F1318; --panel:#171D24; --tinta:#ECF1F6; --tinta2:#A7B5C1; --tinta3:#71808D; --fondo2:#12181F; --marca:#4FA8EC; --marca2:#67B8F2; --marca-suave:#13293C; --borde:#28323D; --borde2:#212A33; --tinta-inv:#0B1A26; --verde:#33B888; --ambar:#E3A93F; --rojo:#EA7360; /* En oscuro el turquesa de la marca SI se lee (10.9:1 sobre el fondo), asi que aqui el token legible vuelve a ser el de la marca. */ --turquesa-t:#2BD3E2; --verde-f:#12312A; --ambar-f:#33280F; --rojo-f:#3A1E19; --s1:0 1px 2px rgba(0,0,0,.3),0 1px 3px rgba(0,0,0,.35); --s2:0 2px 4px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.42); --s3:0 8px 16px rgba(0,0,0,.4),0 24px 56px rgba(0,0,0,.55); } } *{box-sizing:border-box} ::selection{background:rgba(30,155,224,.18)} body{margin:0;background:var(--fondo);color:var(--tinta); font:15px/1.6 -apple-system,BlinkMacSystemFont,'SF Pro Text','SF Pro Display','Helvetica Neue','Segoe UI',system-ui,Roboto,Arial,sans-serif; letter-spacing:-.01em;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility} a{color:var(--marca);text-decoration:none} /* El texto DENTRO de un SVG no hereda la fuente de la página: el navegador le pone su tipografía por defecto, que suele ser una serif. Por eso los números de las gráficas se veían de otra familia que el resto del tablero — no era el tamaño, era la letra. Una sola regla lo arregla en las tres gráficas. 'font-variant-numeric' alinea las cifras: en una escala, un 1 más angosto que un 8 hace que las marcas bailen. */ svg text{font-family:inherit;font-variant-numeric:tabular-nums;letter-spacing:-.1px} /* Escala tipográfica al estilo de las pantallas de estado (2-sep-2026): títulos a 700 —no 800— con tracking negativo y líneas balanceadas, subtítulo un punto más grande y con interlineado de lectura. Los tamaños base no se tocan: las tablas y los formularios están medidos con 15px y moverlo los descuadra. */ h1{font-size:30px;font-weight:700;letter-spacing:-.03em;margin:0 0 6px;line-height:1.12;text-wrap:balance} h2{font-weight:700;letter-spacing:-.025em;text-wrap:balance} h3{font-size:15px;font-weight:650;letter-spacing:-.015em} .sub{color:var(--tinta2);margin:0 0 24px;font-size:15.5px;line-height:1.5;max-width:70ch;text-wrap:pretty} /* ── encabezado */ header{background:rgba(255,255,255,.80);-webkit-backdrop-filter:saturate(180%) blur(16px);backdrop-filter:saturate(180%) blur(16px); border-bottom:1px solid var(--borde);padding:0 22px;display:flex;align-items:center;gap:18px; height:60px;position:sticky;top:0;z-index:20} header .logo{display:flex;align-items:center;gap:11px;color:var(--tinta)} header .logo img{height:30px;width:auto;display:block} header .logo span{font-weight:700;letter-spacing:-.02em;font-size:14.5px;color:var(--tinta); border-left:1px solid var(--borde);padding-left:11px;white-space:nowrap} /* min-width:0 + overflow-x son lo que impide que la barra desborde cuando el menú crece: sin ellos, un elemento nuevo empuja el botón de Salir fuera de la pantalla y toda la página pide scroll lateral (pasó al agregar "Activos"). Con esto el menú se desliza dentro de su propio carril y el encabezado nunca se rompe. */ /* El degradado que insinúa "hay más a la derecha" vivía SOLO dentro del bloque de 860px. Entre 861px y el ancho donde empieza a recortar, el menú se desliza sin ninguna pista: la barra de scroll está oculta arriba y no hay sombra. Así fue como "Tablero" desapareció de la vista sin que nada lo anunciara. Aquí sirve para cualquier número de elementos: header nav es flex:1 1 auto, así que cuando todo cabe la franja derecha queda vacía y el degradado cae sobre nada. */ header nav{display:flex;gap:1px;flex:1 1 auto;min-width:0;margin-left:6px; overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;padding-right:22px; -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 22px),transparent); mask-image:linear-gradient(90deg,#000 calc(100% - 22px),transparent)} header nav::-webkit-scrollbar{display:none} header nav a{flex:0 0 auto} header nav a{color:var(--tinta2);padding:7px 13px;border-radius:9px;font-size:13.5px;font-weight:650; transition:color .16s,background .16s;position:relative} header nav a:hover{color:var(--marca)} header nav a.act{color:var(--marca);background:var(--marca-suave)} header .quien{font-size:13px;color:var(--tinta2);white-space:nowrap;font-weight:600} main{max-width:1180px;margin:32px auto;padding:0 24px;animation:surge .4s ease} /* La bandeja es una TABLA DE DATOS, no una columna de lectura. Los 1180px del resto del sitio le quedaron cortos al llegar a ocho columnas: el navegador le quita el ancho a la única columna que puede encoger —el asunto— y lo deja en una palabra por renglón, que fue justo lo que se vio en producción. Se abre solo aquí; el resto del sitio conserva su ancho de lectura. */ main.ancha{max-width:1400px} @keyframes surge{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}} /* ── superficies */ .tarjeta{background:var(--panel);border:1px solid var(--borde);border-radius:var(--radio); padding:24px;margin-bottom:18px;box-shadow:var(--s1)} table{width:100%;border-collapse:collapse;font-size:14px} th{text-align:left;color:var(--tinta3);font-weight:700;font-size:10.5px;text-transform:uppercase; letter-spacing:.8px;padding:10px 14px;border-bottom:1px solid var(--borde)} td{padding:14px;border-bottom:1px solid var(--borde2);vertical-align:middle} tr:last-child td{border-bottom:0} /* ── filas de ticket clicables con acento por prioridad */ tr.fila{cursor:pointer;transition:background .14s} tr.fila:hover td{background:#F8FBFD} tr.fila td:first-child{border-left:3px solid transparent} tr.fila.p-critica td:first-child{border-left-color:#B3261E;border-left-width:4px} tr.fila.p-alta td:first-child{border-left-color:var(--rojo)} tr.fila.p-media td:first-child{border-left-color:var(--ambar)} tr.fila.p-baja td:first-child{border-left-color:var(--verde)} .folio{font-family:ui-monospace,SFMono-Regular,'SF Mono',Menlo,monospace; font-size:12.5px;font-weight:600;letter-spacing:-.2px} .chip{display:inline-flex;align-items:center;gap:6px;padding:3px 11px;border-radius:999px; font-size:12px;font-weight:700;white-space:nowrap} .chip .pt{width:7px;height:7px;border-radius:50%} .c-verde{background:var(--verde-f);color:var(--verde)} .c-verde .pt{background:var(--verde)} .c-ambar{background:var(--ambar-f);color:var(--ambar)} .c-ambar .pt{background:var(--ambar)} .c-rojo{background:var(--rojo-f);color:var(--rojo)} .c-rojo .pt{background:var(--rojo)} .c-rojo.pulso .pt{animation:pulso 1.6s infinite} @keyframes pulso{0%,100%{box-shadow:0 0 0 0 rgba(209,72,55,.5)}50%{box-shadow:0 0 0 5px rgba(209,72,55,0)}} .c-gris{background:#EDF2F0;color:var(--tinta2)} .c-gris .pt{background:var(--tinta3)} /* Campo de fecha. El calendario emergente lo dibuja el navegador y no se puede estilizar; lo que sí es nuestro es el campo y su ícono. */ input[type=date]{position:relative;font-variant-numeric:tabular-nums;cursor:pointer} input[type=date]::-webkit-calendar-picker-indicator{ width:20px;height:20px;padding:4px;margin-right:-4px;border-radius:7px;cursor:pointer; opacity:.55;transition:opacity .12s ease,background .12s ease} input[type=date]:hover::-webkit-calendar-picker-indicator{opacity:1;background:var(--marca-suave)} input[type=date]::-webkit-datetime-edit{padding:0} input[type=date]:focus{border-color:var(--marca)} /* prioridad como semáforo: verde puede esperar → rojo sólido no puede */ .pr-critica{background:var(--rojo);color:#fff} .pr-critica .pt{background:var(--panel)} .pr-alta{background:var(--rojo-f);color:var(--rojo)} .pr-alta .pt{background:var(--rojo)} .pr-media{background:var(--ambar-f);color:var(--ambar)} .pr-media .pt{background:var(--ambar)} .pr-baja{background:var(--verde-f);color:var(--verde)} .pr-baja .pt{background:var(--verde)} /* estados con paleta propia distinta (dona y chips coinciden) */ .e-espaprob{background:#FBF0DE;color:#8A5A12} .e-espaprob .pt{background:#B5751A} .e-nuevo{background:#EAEDFB;color:#3D4FB8} .e-nuevo .pt{background:#5566D6} .e-asignado{background:#F4E9FB;color:#7B37B5} .e-asignado .pt{background:#9D57D4} .e-encurso{background:#E0F4F9;color:#0E7A8D} .e-encurso .pt{background:#15A3BC} .e-espera{background:#FCE8F0;color:#C13C70} .e-espera .pt{background:#E8598B} .e-resuelto{background:var(--verde-f);color:var(--verde)} .e-resuelto .pt{background:#17966B} .e-cerrado{background:#F7E9E7;color:#8C453A} .e-cerrado .pt{background:#A6564A} /* Cerrado por silencio no es lo mismo que rechazado: nadie decidió que no, solo se apagó la conversación. Gris, no rojo — no hay nada que reprocharle a nadie. */ .e-sinresp{background:#EDF1F4;color:#5E7285} .e-sinresp .pt{background:#8399A8} .badge{display:inline-block;padding:2px 10px;border-radius:999px;font-size:12px;font-weight:700; background:var(--marca-suave);color:var(--marca)} /* ── formularios */ form.linea{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end} label{display:block;font-size:12.5px;font-weight:700;color:var(--tinta);margin-bottom:6px;letter-spacing:-.1px} input,select,textarea{width:100%;padding:11px 14px;border:1.5px solid var(--borde);border-radius:var(--radio-sm); font:inherit;background:var(--panel);color:var(--tinta);transition:border-color .16s,box-shadow .16s} input::placeholder,textarea::placeholder{color:var(--tinta3)} input:focus,select:focus,textarea:focus{outline:0;border-color:var(--marca2); box-shadow:0 0 0 3.5px rgba(30,155,224,.14)} .campo{margin-bottom:16px} button,.boton{background:var(--marca);color:#fff;border:0;border-radius:var(--radio-sm);padding:11px 20px; font:inherit;font-weight:600;letter-spacing:-.01em;cursor:pointer;display:inline-block;transition:transform .14s,box-shadow .14s,background .14s; box-shadow:0 1px 2px rgba(15,108,196,.24),0 4px 12px rgba(15,108,196,.20)} button:hover,.boton:hover{background:var(--marca2);transform:translateY(-1px); box-shadow:0 2px 6px rgba(15,108,196,.26),0 8px 20px rgba(15,108,196,.26);text-decoration:none} button:active,.boton:active{transform:translateY(0)} .boton.sec{background:var(--panel);color:var(--marca);border:1.5px solid var(--borde);box-shadow:none} /* ── línea de tiempo (bitácora) */ /* ── Controles con acabado propio ─────────────────────────────────────────── Los widgets nativos (flecha de select, casilla, botón de archivo) los dibuja el sistema operativo: en Windows se ven de otra época y rompen el resto de la interfaz. Aquí se reemplazan por versiones propias, iguales en todos lados. */ select{appearance:none;-webkit-appearance:none;-moz-appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235A7183' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 13px center;padding-right:38px;cursor:pointer} select::-ms-expand{display:none} /* Casilla propia: el cuadrito nativo se oculta y se dibuja uno con la marca. */ .chk{position:relative;display:inline-flex;align-items:flex-start;gap:10px;cursor:pointer} .chk>input[type=checkbox]{position:absolute;width:1px;height:1px;opacity:0;margin:0} .chk>input[type=checkbox]+.caja{flex:0 0 auto;width:19px;height:19px;margin-top:1px;border-radius:6px; border:1.8px solid var(--borde);background:var(--panel);display:grid;place-items:center; transition:border-color .15s,background .15s,transform .12s} .chk>input[type=checkbox]+.caja::after{content:'';width:10px;height:6px;border-left:2.2px solid #fff; border-bottom:2.2px solid #fff;transform:rotate(-45deg) scale(.5);opacity:0;transition:opacity .14s,transform .14s; margin-top:-2px} .chk>input[type=checkbox]:checked+.caja{background:var(--marca);border-color:var(--marca)} .chk>input[type=checkbox]:checked+.caja::after{opacity:1;transform:rotate(-45deg) scale(1)} .chk>input[type=checkbox]:focus-visible+.caja{box-shadow:0 0 0 3.5px rgba(30,155,224,.18)} .chk:hover>input[type=checkbox]:not(:checked)+.caja{border-color:var(--marca2)} /* Zona para soltar archivos. El input nativo se estira invisible por encima: así el clic y el arrastrar-y-soltar funcionan aun sin JavaScript, y el JavaScript solo agrega el nombre del archivo y el resaltado. */ .rejilla-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:0 14px} /* Opciones sueltas: casillas en línea, sin caja de color. Antes cada una vivía en su propio recuadro ámbar y dos recuadros seguidos saturaban el formulario. */ .opciones-sueltas{display:flex;flex-direction:column;gap:10px;margin-top:16px; padding-top:14px;border-top:1px solid var(--borde)} .opciones-sueltas .chk{font-size:14px} .opciones-sueltas .chk small{display:block;color:var(--tinta3);font-size:12px;margin-top:1px} .accesos{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:10px;margin:18px 0 4px} .acceso{display:flex;align-items:center;gap:13px;padding:14px 16px;background:var(--panel); border:1px solid var(--borde);border-radius:var(--radio-sm);text-decoration:none;color:inherit; transition:border-color .16s,transform .16s,box-shadow .16s} .acceso:hover{border-color:var(--marca2);transform:translateY(-1px); box-shadow:0 2px 6px rgba(15,108,196,.08),0 8px 20px rgba(15,108,196,.08);text-decoration:none} .acceso-ico{flex:0 0 auto;width:36px;height:36px;border-radius:10px;background:var(--marca-suave); color:var(--marca);display:grid;place-items:center} .acceso>span:nth-child(2){display:flex;flex-direction:column;gap:1px;min-width:0;flex:1} .acceso b{font-size:14px;font-weight:700} .acceso small{font-size:12px;color:var(--tinta3);line-height:1.4} .acceso-fl{flex:0 0 auto;color:var(--tinta3);font-size:16px;transition:transform .16s,color .16s} .acceso:hover .acceso-fl{color:var(--marca);transform:translateX(3px)} .soltar{position:relative;display:flex;align-items:center;gap:14px;padding:18px 20px; border:1.8px dashed var(--borde);border-radius:var(--radio-sm);background:var(--fondo2); cursor:pointer;transition:border-color .18s,background .18s,transform .18s} .soltar:hover,.soltar.encima{border-color:var(--marca2);background:var(--marca-suave)} .soltar.encima{transform:scale(1.005)} .soltar.puesto{border-style:solid;border-color:var(--verde);background:var(--verde-f)} .soltar>input[type=file]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer} .soltar-ico{flex:0 0 auto;width:42px;height:42px;border-radius:12px;background:var(--panel); border:1px solid var(--borde);display:grid;place-items:center;color:var(--marca);transition:color .18s} .soltar.puesto .soltar-ico{color:var(--verde);border-color:#C6E9D8} .soltar.pesado{border-style:solid;border-color:var(--rojo);background:var(--rojo-f)} .soltar.pesado .soltar-ico{color:var(--rojo);border-color:#F3C9C9} .soltar.pesado .soltar-txt .nombre{color:var(--rojo)} /* Va encima del input invisible que cubre la zona; si no, el clic abriría el explorador. */ .soltar-quitar{position:absolute;top:9px;right:9px;z-index:3;width:26px;height:26px;padding:0; display:flex;align-items:center;justify-content:center;border:1px solid var(--borde); border-radius:50%;background:var(--panel);color:var(--tinta3);cursor:pointer;transition:all .12s ease} .soltar-quitar:hover{border-color:var(--rojo);color:var(--rojo);background:var(--rojo-f)} /* Ayuda del importador: una fila de Excel dibujada. Son 14 columnas, así que la tabla se desliza sola dentro de su caja en vez de empujar la página a lo ancho. */ .cols-ayuda{margin:2px 0 16px} .cols-scroll{overflow-x:auto;border:1px solid var(--borde);border-radius:10px;background:var(--fondo2)} .cols-import{border-collapse:collapse;font-size:12.5px;white-space:nowrap;min-width:100%} .cols-import th{background:var(--fondo);color:var(--tinta3);font-weight:700;font-size:11px; padding:5px 10px;border-right:1px solid var(--borde);border-bottom:1px solid var(--borde);text-align:left} .cols-import td{padding:7px 10px;border-right:1px solid var(--borde);vertical-align:top} .cols-import th:last-child,.cols-import td:last-child{border-right:0} .cols-import td b{font-weight:650;color:var(--tinta)} .cols-import .cols-pista td{padding-top:0;font-size:11.5px;color:var(--tinta3)} .cols-import .req{color:var(--marca);font-style:normal;font-weight:800;margin-left:2px} .cols-nota{font-size:12px;color:var(--tinta3);margin:8px 2px 0} /* Importar en tres pasos: descargar, llenar, subir. Numerados a mano con un contador para que el número viva pegado al paso y no en el HTML. */ .pasos-import{list-style:none;counter-reset:pi;margin:0 0 6px;padding:0;display:flex;flex-direction:column;gap:20px} .pasos-import>li{counter-increment:pi;position:relative;padding-left:38px} .pasos-import>li::before{content:counter(pi);position:absolute;left:0;top:-1px;width:26px;height:26px; border-radius:50%;background:var(--marca);color:#fff;font-size:13px;font-weight:800; display:flex;align-items:center;justify-content:center} .pasos-import>li>b{display:block;font-size:14.5px;margin-bottom:3px} .pasos-import>li>span{display:block;font-size:13px;color:var(--tinta2);line-height:1.55;margin-bottom:10px} .pasos-import .cols-ayuda{margin-top:2px} .pasos-import .boton{text-decoration:none;display:inline-flex;align-items:center;gap:7px} .det-pegar{margin-top:20px;border-top:1px solid var(--borde);padding-top:14px} .det-pegar>summary{cursor:pointer;font-size:13px;color:var(--tinta3);font-weight:600} .det-pegar>summary:hover{color:var(--marca)} .import-trabado{background:var(--rojo-f);border:1px solid var(--rojo);border-radius:12px; padding:13px 16px;margin-bottom:16px;font-size:13.5px;line-height:1.6;color:var(--tinta)} .import-trabado b{color:var(--rojo)} /* Cómo se vigila un equipo: hechos, no controles. Por eso no parecen formulario. */ .ctl-caja{margin-top:12px;display:flex;flex-direction:column;gap:9px} .ctl-fila{display:flex;gap:9px;align-items:flex-start;flex-wrap:wrap} .ctl-fila small{color:var(--tinta2);font-size:12.5px;line-height:1.45;flex:1;min-width:180px} .ctl-pedir{border-top:1px solid var(--borde);padding-top:10px;margin-top:2px} .ctl-pedir>summary{cursor:pointer;font-size:13px;font-weight:650;color:var(--marca2); list-style:none;display:inline-flex;align-items:center;gap:6px} .ctl-pedir>summary::-webkit-details-marker{display:none} .ctl-pedir>summary::before{content:'+';font-weight:800} .ctl-pedir[open]>summary::before{content:'–'} .ctl-pedir p{font-size:12.5px;color:var(--tinta2);line-height:1.45;margin:8px 0 10px} .ctl-pedir input{width:100%;margin-bottom:8px} /* La bitácora vive en la columna angosta y se queda a la vista mientras se lee el resto: es la referencia que uno consulta, no algo que se recorra una vez. */ .col-bitacora{position:sticky;top:16px} .col-bitacora .bit{max-height:70vh;overflow-y:auto;padding-right:4px} /* La bitácora comparte la línea del historial de resguardo: las dos cuentan lo mismo —qué pasó y cuándo— y leerlas con dos formas distintas costaba un salto. */ .bit.timeline li{padding:0 0 20px 26px;border-bottom:0} .bit.timeline li:last-child{padding-bottom:0} .bit.timeline b{display:block;font-size:13.5px;line-height:1.45;font-weight:750} /* El "quién y cuándo" es referencia, no titular: se lee cuando se busca. */ .bit.timeline small{display:block;margin-top:3px;font-size:11.5px;color:var(--tinta3); font-weight:600;letter-spacing:.1px} /* El detalle era un
pelón que se encimaba con el renglón siguiente y hacía parecer que la bitácora era un solo bloque de texto. */ .bit-det{margin-top:7px;padding:7px 11px;font-size:12.5px;line-height:1.5;color:var(--tinta2); background:var(--fondo);border:1px solid var(--borde2);border-radius:9px; overflow-wrap:anywhere} /* El guion del video: es lo único que la persona tiene que seguir, así que se lee como una receta y no como una nota al pie. */ .guion{margin:12px 0 0;padding:14px 16px;border:1px solid var(--marca2);border-radius:12px; background:var(--marca-suave)} .guion>b{font-size:14px} .guion ol{margin:8px 0 0;padding-left:20px;font-size:14px;line-height:1.6} .guion ol li{margin-bottom:6px} .guion p{font-size:12.5px;color:var(--tinta2);margin:10px 0 0;line-height:1.5} @media(max-width:860px){ .col-bitacora{position:static} .col-bitacora .bit{max-height:none} } /* Un KPI que vale cero es una buena noticia; solo se pinta en rojo si NO es cero. */ .ka-mal b{color:var(--rojo)} .ka-mal{border-color:var(--rojo)} .soltar-txt{display:flex;flex-direction:column;gap:2px;min-width:0} .soltar-txt b{font-size:14.5px;font-weight:700;color:var(--tinta)} .soltar-txt small{font-size:12px;color:var(--tinta3);line-height:1.45} .soltar-txt .nombre{font-size:13px;color:var(--verde);font-weight:650;overflow:hidden; text-overflow:ellipsis;white-space:nowrap} @media(max-width:520px){ .soltar{padding:15px 16px;gap:11px} .soltar-ico{width:36px;height:36px} } /* ── Activos de TI ─────────────────────────────────────────────────────────── */ .c-azul{background:var(--marca-suave);color:var(--marca2)} .c-azul .pt{background:var(--marca2)} /* Cobertura de vigilancia: cuantos equipos mira Intune, cuantos estan unidos a Entra y cuantos faltan. Va en tarjeta aparte de los contadores de estado porque contesta otra pregunta. */ .cobertura{border:1px solid var(--borde);border-radius:14px;padding:14px 16px;margin:0 0 14px; background:var(--panel)} .cob-nums{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px} .cob{min-width:0} .cob b{display:block;font-size:22px;font-weight:700;font-variant-numeric:tabular-nums; letter-spacing:-.02em;color:var(--marca)} .cob b i{font-style:normal;font-size:14px;font-weight:600;color:var(--tinta2)} .cob span{display:block;font-size:12.5px;font-weight:600;margin-top:1px} .cob small{display:block;font-size:11.5px;color:var(--tinta3);line-height:1.35;margin-top:2px} .cob-falta b{color:var(--ambar)} .cob-ok b{color:var(--verde)} .cob-sindato b{color:var(--tinta3)} .cob-listo b{color:var(--turquesa-t)} .cob-nota{margin:12px 0 0;padding-top:11px;border-top:1px solid var(--borde); font-size:11.5px;line-height:1.45;color:var(--tinta2)} /* Dentro de una tarjeta del tablero la pieza ya está en su caja: el borde y el fondo propios pintaban una caja dentro de otra. En /activos sigue siendo tarjeta ella misma, así que el estilo se apaga por contexto y no se borra. */ .tarjeta .cobertura{border:0;background:none;padding:0;margin:0} /* El escudo de la fila: vertical-align y NO inline-flex. Un contenedor flex al lado de texto se sintetiza la linea base del borde inferior y hunde lo que sigue — es el bug del negritas con icono del 07-sep-2026. */ .esc{display:inline-block;vertical-align:-4px;margin-left:6px;line-height:0} /* El trazo se engrosa desde el CSS: el simbolo del sprite trae 1.9 y la clase .ico lo baja, y a 16px un escudo de linea fina no se lee como un sello. */ .esc .ico{width:16px;height:16px;stroke-width:2.05} /* OJO: la variable --azul NO existe en la paleta de la app (vive en el :root propio de las pantallas de estado), y usarla dejaba el escudo del color del texto, o sea invisible como marca. Es la misma falla del boton de Microsoft del login: un color sin token se ve bien en un tema y desaparece en el otro. El azul de la casa es --marca, y tiene su valor en claro y en oscuro. */ .esc-ok{color:var(--marca)} .esc-media{color:var(--ambar)} /* Registrado en Entra y sin Intune: ni azul —no esta vigilado— ni ambar —no falla nada—. Se usa el turquesa de la marca, que ya existe en los dos temas. */ .esc-entra{color:var(--turquesa-t)} /* En la ficha el escudo vive dentro de .ctl-fila, que es FLEX: ahi vertical-align no hace nada y el icono quedaba 5px arriba del centro del chip. Se le da la altura de la caja del chip y se centra dentro, en vez de empujarlo con un margen a ojo: asi sigue alineado si el chip cambia de tamano. Aqui inline-flex SI es correcto —es un elemento flex hermano, no un icono pegado a texto suelto, que es el caso del bug del 07-sep-2026. */ .ctl-fila .esc{display:inline-flex;align-items:center;min-height:25px;vertical-align:baseline} .kpis-activos{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:12px;margin:18px 0} .ka{display:flex;flex-direction:column;gap:2px;padding:14px 16px;background:var(--panel); border:1px solid var(--borde);border-radius:14px;text-decoration:none;color:inherit; box-shadow:0 1px 2px rgba(16,24,32,.04);transition:border-color .15s,transform .15s} .ka:hover{border-color:var(--marca2);transform:translateY(-1px)} .ka b{font-size:26px;font-weight:700;letter-spacing:-.03em;font-variant-numeric:tabular-nums} .ka span{font-size:12px;color:var(--tinta3);font-weight:600} /* La tarjeta de equipo perdido se ve distinta: si se viera igual que las demás, sería un número más en una fila de números. */ .ka-alerta{border-color:var(--rojo,#c0392b)} .ka-alerta b{color:var(--rojo,#c0392b)} .filtros-activos{display:flex;gap:9px;flex-wrap:wrap;align-items:center;margin-bottom:14px} .filtros-activos input{flex:1 1 240px;min-width:0} .filtros-activos select{flex:0 1 auto;width:auto} .tabla-activos tr.fila{cursor:pointer} .tabla-activos tr.fila:hover{background:var(--marca-suave)} /* Con nueve columnas y los importes en nowrap, la tabla rebasaba la tarjeta en anchos intermedios (una ventana de ~1400px con el navegador a media pantalla): "Vale hoy" quedaba pintada FUERA del borde y "Quién lo tiene" se partía palabra por palabra. El bloque móvil ya hacía que la tarjeta se deslizara, pero solo bajo 860px; arriba de eso no había nada que contuviera el desborde. La tabla se desliza DENTRO de su tarjeta a cualquier ancho, y el nombre de quien tiene el equipo se lee en una o dos líneas en vez de cinco. Bajo 700px las filas se apilan en tarjetas y el bloque de abajo vuelve a soltar el overflow. */ .tabla-activos{overflow-x:auto} .tabla-activos td[data-c=quien]{min-width:140px} /* Nueve columnas con 14px por lado son 252px solo de relleno. Con 10px la tabla cabe en el ancho normal de escritorio sin pedir scroll; bajo eso, se desliza. */ .tabla-activos th,.tabla-activos td{padding-left:10px;padding-right:10px} /* Los importes se alinean a la derecha y con cifras de ancho fijo: así las columnas de pesos y centavos quedan una debajo de otra y un cero de más se ve solo. */ .col-valor{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums} /* Captura de valores en bloque. */ /* Los tres modos de la pantalla de valores. */ .modos{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 16px} .modos a{padding:6px 13px;border-radius:99px;border:1px solid var(--borde);font-size:13px; color:var(--tinta2);text-decoration:none;background:var(--panel)} .modos a:hover{border-color:var(--marca2);color:var(--marca2)} .modos a.hoy{background:var(--marca-suave);border-color:var(--marca2);color:var(--marca2);font-weight:600} /* Valuar es mirar anuncios y teclear. La liga por modelo convierte una tarde de búsquedas en unos minutos, y de paso deja claro contra qué se estimó. */ .busca{font-size:12.5px;color:var(--marca2);text-decoration:none;white-space:nowrap} .busca:hover{text-decoration:underline} .arrendado{font-size:12.5px;color:var(--tinta2);line-height:1.45} .cuando{font-size:12px;color:var(--tinta2);white-space:nowrap} .cuando small{display:block;color:var(--tinta3);font-size:11px;max-width:220px; white-space:normal;line-height:1.35;margin-top:2px} /* Un avalúo viejo no se esconde: se marca. Esconderlo perdería el dato y mostrarlo como si fuera de hoy sería mentir. */ .cuando .viejo{color:var(--ambar,#8a5a12);font-weight:600} .cuando .viejo::after{content:" · ya tiene un año"} .lote{margin-bottom:14px} .lote > b{display:block;font-size:14.5px} .lote > p{margin:4px 0 12px;font-size:13px;color:var(--tinta2);max-width:70ch} .lote-fila{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap} .lote-fila label{display:flex;flex-direction:column;gap:4px;font-size:12.5px; font-weight:600;color:var(--tinta2)} .lote-fila label small{font-weight:400} .lote-fila input{width:150px;font-variant-numeric:tabular-nums} .lote-cuenta{font-size:12.5px;color:var(--tinta2);padding-bottom:9px} .col-mar{width:34px;text-align:center} .tabla-activos td.col-valor input{width:120px;text-align:right; font-variant-numeric:tabular-nums} .tabla-activos small.eq{display:block;color:var(--tinta2);font-size:12px;margin-top:2px} .tabla-activos td.quien{font-size:12.5px;color:var(--tinta2)} /* El 16% que no cuadra se marca en el renglón, no en un aviso aparte: con veinte equipos en pantalla, un aviso arriba no dice CUÁL renglón revisar. */ .tabla-activos tr.no-cuadra td.col-valor input{border-color:var(--ambar,#c98a12); background:var(--ambar-f,#fdf6e6)} .tabla-activos tr.recien td.col-valor input{border-color:var(--marca2)} /* Un avalúo de más de un año se ve apagado: sigue ahí, pero avisa que ya no manda. */ .mer-viejo{color:var(--tinta3);text-decoration:underline dotted} @media(max-width:700px){ .lote-fila input{width:120px} } th.col-valor{text-align:right} /* Resumen de dinero. Vive fuera de los contadores de estado a propósito: aquellos cuentan equipos y este cuenta pesos, y mezclarlos haría dudar de qué suma qué. */ .resumen-valor{display:flex;gap:14px;align-items:baseline;flex-wrap:wrap; margin:0 0 12px;padding:10px 14px;border:1px solid var(--borde);border-radius:12px; background:var(--panel);font-size:13.5px;color:var(--tinta2)} .resumen-valor b{color:var(--tinta);font-size:16px;font-variant-numeric:tabular-nums; margin-left:5px} .resumen-valor a{color:var(--ambar,#8a5a12);font-weight:600;text-decoration:none; border-bottom:1px dashed currentColor} .resumen-valor a:hover{border-bottom-style:solid} .resumen-valor a.activo{border-bottom-style:solid} .resumen-valor a.quitar{color:var(--tinta2);font-weight:500} .resumen-valor a.capturar{color:var(--marca2);border-bottom-color:var(--marca2)} .resumen-valor .todo-listo{color:var(--verde,#0f6b5c);font-weight:600} /* El tipo se lee como etiqueta, no como texto corrido: esa columna se recorre de arriba abajo buscando "laptop" o "monitor", y así saltan a la vista. */ .tipo-act{display:inline-block;padding:2px 8px;border-radius:999px;background:var(--marca-suave); border:1px solid var(--marca2);color:var(--marca2);font-size:11.5px;font-weight:600; white-space:nowrap} /* Solo la primera letra, no cada palabra: 'capitalize' escribía "Soporte De Monitor" e "Impresora De Credenciales", que en español están mal. */ .tipo-act::first-letter{text-transform:uppercase} .mono-min{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;color:var(--tinta2)} .a-cabeza{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:4px} .folio.grande{font-size:17px} .rejilla-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:0 14px} .chk-alto{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;margin:6px 0 14px; background:var(--ambar-f);border:1px solid #F0DDB4;border-radius:12px;cursor:pointer} .chk-alto input{width:16px;height:16px;margin-top:2px;flex:0 0 auto} .chk-alto span{display:flex;flex-direction:column;gap:2px;font-size:13.5px} .chk-alto small{color:var(--tinta2);font-size:12px} .det-alta{margin-top:18px} .det-alta>summary{cursor:pointer;font-weight:700;font-size:14px;color:var(--marca2); padding:10px 0;list-style:none;display:flex;align-items:center;gap:7px} .det-alta>summary::before{content:'+';font-size:17px;line-height:1} .det-alta[open]>summary::before{content:'−'} .prev{flex:1 1 100%;min-width:0;margin:10px 0 0} .prev>summary{cursor:pointer;font-size:12.5px;font-weight:600;color:var(--marca2); list-style:none;display:inline-flex;align-items:center;gap:6px;padding:4px 0} .prev>summary::-webkit-details-marker{display:none} .prev>summary::before{content:'▸';font-size:11px;transition:transform .15s} .prev[open]>summary::before{content:'▾'} .prev-marco{width:100%;margin-top:8px;border:1px solid var(--borde);border-radius:10px; overflow:hidden;background:var(--fondo2)} /* Alto pensado para una hoja carta: con el ancho completo de la tarjeta, esto deja ver la hoja de arriba abajo sin que el visor tenga que recortarla. */ .prev-marco iframe{display:block;width:100%;height:min(80vh,760px);border:0;background:#fff} .prev-nueva{display:inline-block;margin-top:8px;font-size:12px;color:var(--tinta2);text-decoration:none} .prev-nueva:hover{text-decoration:underline} @media (max-width:620px){ .prev-marco iframe{height:min(70vh,520px)} } .foto-equipo{margin:0 0 14px;padding:0} .foto-equipo img{display:block;width:100%;max-height:260px;object-fit:contain;border-radius:10px; background:var(--fondo2);border:1px solid var(--borde)} .foto-equipo figcaption{font-size:12px;color:var(--tinta3);margin-top:6px} .foto-falta{font-size:12.5px;color:var(--tinta3);margin:0 0 14px;padding:10px 12px; background:var(--fondo2);border:1px dashed var(--borde);border-radius:10px} .etq-priv{font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--tinta3);font-weight:700} .nota-priv{font-size:12px;color:var(--tinta3);margin:12px 0 0;padding-top:10px;border-top:1px solid var(--borde)} .dict{flex:1 1 100%;font-size:12.5px;border-radius:9px;padding:8px 11px;margin-top:2px} .dict b{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.4px;margin-bottom:3px} .dict ul{margin:0;padding-left:16px} .dict.ok{background:var(--verde-f);color:var(--verde)} .dict.mal{background:var(--rojo-f);color:var(--rojo)} .dict.pend{background:var(--ambar-f);color:var(--ambar)} .adj-acc{flex:1 1 100%;display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:4px} .form-forzar{display:flex;gap:6px;flex:1 1 260px} .form-forzar input{flex:1 1 auto;min-width:0;font-size:12.5px;padding:7px 10px} .ps-vincular{margin-top:12px;padding:12px 14px;background:var(--ambar-f);border:1px solid #F0DDB4;border-radius:12px} .ps-vincular label{display:block;font-size:13px;margin-bottom:7px} .ps-vincular small{display:block;margin-top:6px;font-size:11.5px;color:var(--tinta2)} .ps-clave{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap; margin-top:8px;padding:10px 13px;background:var(--fondo2);border:1px solid var(--borde2);border-radius:11px} .ps-clave span{font-size:12.5px;color:var(--tinta2)} .ps-clave-sso{background:var(--marca-suave,#EAF4FD);border-color:#BEDCF5} /* La hoja de apagado. Va en ámbar y no en rojo a propósito: no es una alarma, es una lista de pendientes que solo importa el día de la salida. */ /* Lo que la mesa encontró al elegir a quien sale. Aparece solo cuando hay algo que decir: un recuadro vacío permanente es ruido en un formulario largo. */ .baja-tiene:empty{display:none} .baja-tiene{margin:0 0 14px;padding:11px 14px;border-radius:11px;font-size:13px;line-height:1.55; background:var(--fondo2);border:1px solid var(--borde2);color:var(--tinta2)} /* Estas dos tarjetas traían colores fijos de tema claro y ninguno de oscuro. La peor era .apagar: un degradado de crema casi blanco al panel — que en oscuro SÍ cambia—, así que la mitad de arriba quedaba clara con el texto claro encima y no se leía nada. Van por tokens, que existen en los dos temas. */ .baja-tiene.hay{background:var(--ambar-f);border-color:var(--ambar);color:var(--ambar)} .baja-tiene.mal{background:var(--rojo-f);border-color:var(--rojo);color:var(--rojo)} .apagar{border-color:var(--ambar);background:var(--ambar-f)} .apagar h3{color:var(--ambar)} /* Sobre el fondo ámbar, la tinta más tenue se pierde: aquí sube un escalón. */ .apagar .pista,.apagar .res-item small,.apagar .pf-vacio{color:var(--tinta2)} /* El domicilio de resguardo se guardaba al asignar y solo se veía abriendo la ficha del equipo. Quien lo busca lo busca AQUÍ —en la persona— porque la pregunta es "¿dónde está el equipo de fulano?", no "¿dónde está tal etiqueta?". (Sin ejemplos de etiqueta aquí, ni siquiera el prefijo: esta hoja va INLINE en el HTML de cada página, así que una etiqueta escrita en un comentario sale en TODAS, y quien lea etiquetas de la página se lleva esa como si fuera un activo real. Costó una prueba en rojo averiguarlo.) DATO PERSONAL (LFPDPPP): esta pantalla ya es solo de supervisores. */ .res-dom{display:block;color:var(--tinta3);line-height:1.45;margin-top:2px} .res-dom.falta{color:var(--ambar)} .ap-sis{font-weight:650;font-size:14px} .ap-extra{margin-top:12px;padding-top:11px;border-top:1px dashed var(--ambar)} .ap-extra b{display:block;font-size:13.5px} .ap-extra small{display:block;margin-top:3px;font-size:12px;color:var(--tinta2);line-height:1.5} .pasos-asientos{margin:14px 0 0;padding-left:20px;display:flex;flex-direction:column;gap:14px} .pasos-asientos li b{display:block;font-size:14px} .pasos-asientos li span{display:block;font-size:13px;color:var(--tinta2);margin:3px 0 8px;line-height:1.5} .clave-nueva{background:var(--verde-f,#E7F6EF);border:1.5px solid #9FD9BE;border-radius:14px; padding:14px 16px;margin-bottom:16px} .clave-nueva b{color:#0F6B47} .clave-nueva p{margin:6px 0 10px;font-size:13.5px;color:var(--tinta2)} .clave-nueva small{display:block;margin-top:9px;font-size:11.5px;color:var(--tinta2)} .clave-caja{display:flex;align-items:center;gap:10px;flex-wrap:wrap} .clave-caja code{font-size:16px;font-weight:700;letter-spacing:.5px;background:#fff; border:1px solid #9FD9BE;border-radius:9px;padding:8px 13px;color:#0F6B47} .ps-crear{margin-top:12px;border-top:1px dashed #E0C89A;padding-top:10px} .ps-crear summary{cursor:pointer;font-size:12.5px;font-weight:650;color:#8A5A12} .ps-crear form{margin-top:10px} .ps-crear .campo{margin-bottom:10px} .ps-crear .campo label{font-size:12px} .ub-corr{margin:6px 0 2px;padding-left:2px} .ub-corr>summary{cursor:pointer;font-size:12.5px;font-weight:650;color:var(--marca2);list-style:none} .ub-corr>summary::-webkit-details-marker{display:none} .ub-corr>summary::before{content:'›';display:inline-block;margin-right:6px;transition:transform .15s} .ub-corr[open]>summary::before{transform:rotate(90deg)} .ub-corr form{margin-top:9px} .ub-corr .campo{margin-bottom:9px} .ub-corr .campo label{font-size:12px} .ub-corr .pista{display:block;margin:-2px 0 9px} .firmas-tit{font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--tinta3);margin:16px 0 8px} .firmas-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:8px} .firma-fila{display:flex;gap:9px;align-items:center;margin:0} .firma-fila span{flex:0 0 auto;font-size:13.5px;font-weight:600;min-width:96px} .firma-fila select{flex:1 1 auto;width:auto;min-width:0} .firmas-rh{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:8px} .chip-btn{border:1.5px solid var(--borde);background:var(--panel);color:var(--tinta2);border-radius:99px; padding:5px 12px;font-size:12.5px;font-weight:600;cursor:pointer;transition:all .15s} .chip-btn:hover{border-color:var(--marca2)} .chip-btn.act{background:var(--marca-suave);border-color:var(--marca2);color:var(--marca2)} /* Quienes se sumaron a la conversación. La ✕ va DENTRO del chip y es su propio formulario: dos formularios no se anidan, así que cada quitar es uno aparte. */ .part-lista{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 8px} .part-chip{display:inline-flex;align-items:center;gap:2px;max-width:100%; border:1.5px solid var(--borde);background:var(--marca-suave);color:var(--marca2); border-radius:99px;padding:3px 4px 3px 11px;font-size:12.5px;font-weight:600} .part-chip form{margin:0;display:inline} .part-x{background:none;border:0;box-shadow:none;color:var(--tinta3);cursor:pointer; width:22px;height:22px;padding:0;border-radius:99px;font-size:16px;line-height:1} .part-x:hover{background:var(--rojo-f);color:var(--rojo)} .part-nota{display:block;margin-top:6px;font-size:11.5px;color:var(--tinta3)} .panel-firmas .ps-cab{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:12px} .firmas-lista{list-style:none;margin:0;padding:0;counter-reset:f} .firmas-lista li{position:relative;padding:9px 0 9px 26px;border-bottom:1px solid var(--borde)} .firmas-lista li:last-child{border-bottom:none} .firmas-lista li::before{counter-increment:f;content:counter(f);position:absolute;left:0;top:11px; width:18px;height:18px;border-radius:50%;background:var(--borde);color:var(--tinta2); font-size:10.5px;font-weight:700;display:flex;align-items:center;justify-content:center} .firmas-lista li.ahora::before{background:var(--marca2);color:#fff} .fir-cab{display:flex;gap:8px;align-items:center;flex-wrap:wrap} .fir-quien{font-size:12.5px;color:var(--tinta3);margin-top:1px} .fir-motivo{font-size:12.5px;color:var(--tinta2);margin-top:3px;font-style:italic} .fir-accion{margin-top:14px;padding-top:14px;border-top:1px solid var(--borde)} .fir-pregunta{font-size:13.5px;margin-bottom:10px} .fir-just{margin-top:4px;padding:8px 11px;background:var(--fondo2);border-radius:9px;font-size:13px;color:var(--tinta2)} .eq-caja{margin:2px 0 10px;padding:12px 14px;background:var(--fondo2);border:1px solid var(--borde);border-radius:12px} .eq-caja>.tarjeta{margin:0 0 10px;padding:0;border:none;background:none;box-shadow:none} .eq-caja.aviso-caja{background:var(--ambar-f);border-color:#F0DDB4} .eq-caja.aviso-caja p{margin:4px 0 0;font-size:13px;color:var(--tinta2)} .eq-chk{display:flex;gap:9px;align-items:flex-start;padding:8px 10px;margin-bottom:6px; background:var(--panel);border:1px solid var(--borde);border-radius:10px;cursor:pointer;font-size:13.5px} .eq-chk input{width:16px;height:16px;margin-top:1px;flex:0 0 auto} .eq-bloqueo{margin:8px 0 0;font-size:13px;color:var(--ambar);font-weight:600} /* ── Módulo de equipo del ticket ───────────────────────────────────────────── Vive BAJO la conversación y no en la columna angosta, a propósito: elegir el equipo es una acción con lista —etiqueta, marca, serie— y en 320px una serie no se lee. Todo con tokens, así que el modo oscuro sale de la paleta y no hace falta un bloque aparte que se olvide de actualizar. */ .mod-eq{margin-top:14px} .eqp-cab{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:10px} .eqp-para{font-size:13.5px;color:var(--tinta2);margin:0 0 12px} .eqp-para b{color:var(--tinta);font-weight:600} .eqp-op{display:flex;gap:10px;align-items:flex-start;padding:9px 11px;margin-bottom:6px; border:1px solid var(--borde);border-radius:10px;background:var(--panel);cursor:pointer;font-size:13.5px} .eqp-op:hover{border-color:var(--marca2)} .eqp-op input{width:16px;height:16px;margin-top:2px;flex:0 0 auto} .eqp-op code{font-size:12.5px;font-weight:700;color:var(--marca);margin-right:7px} .eqp-op small{display:block;color:var(--tinta2);font-size:12.5px;margin-top:1px} .eqp-alto{color:var(--ambar);font-weight:700;font-size:11.5px;letter-spacing:.04em;text-transform:uppercase} /* La ficha del equipo apartado: el dato que importa se lee sin buscar. */ .eqp-ficha{display:flex;gap:12px;align-items:flex-start;justify-content:space-between; padding:12px 14px;border:1px solid var(--borde);border-radius:12px;background:var(--panel)} .eqp-ficha .eqp-que{font-size:14.5px;font-weight:600;line-height:1.4} .eqp-ficha .eqp-que code{font-size:13px;color:var(--marca);margin-right:6px} .eqp-ficha .eqp-que small{display:block;font-weight:500;color:var(--tinta2);font-size:12.5px;margin-top:2px} .eqp-aviso{margin:10px 0 0;padding:11px 13px;border-radius:11px;font-size:13px;line-height:1.5; background:var(--ambar-f);border:1px solid var(--ambar);color:var(--tinta)} .eqp-aviso.malo{background:var(--rojo-f);border-color:var(--rojo)} .eqp-aviso b{display:block;margin-bottom:2px} .eqp-aviso form{margin:9px 0 0} .eqp-nada{margin:0;font-size:13.5px;color:var(--ambar);font-weight:600} .eqp-nada small{display:block;font-weight:500;color:var(--tinta2);margin-top:3px} .eqp-otros{margin-top:8px} .eqp-otros>summary{font-size:13px;color:var(--marca);cursor:pointer;font-weight:600;padding:4px 0} .mod-datos .dat-grupo{margin-bottom:12px} .mod-datos .dat-tit{font-size:11.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase; color:var(--tinta3);margin-bottom:7px} .mod-datos .eqp-op small{display:block;color:var(--tinta3);font-size:12px;margin-top:1px} /* Viene de un ticket mal clasificado: se dice antes del formulario, no después, porque cambia lo que la persona está a punto de escribir. */ .reclas-de{margin:0 0 18px;padding:14px 16px;border-radius:14px;background:var(--marca-suave); border:1px solid var(--marca2);font-size:13.5px;line-height:1.55} .reclas-de b{display:block;margin-bottom:3px;color:var(--marca)} .reclas-de span{color:var(--tinta2)} .reclas-de a{font-weight:700} .eq-aviso-rh{margin:12px 0 0;padding:11px 13px;border-radius:11px;background:var(--ambar-f); border:1px solid #F0DDB4;font-size:13px;line-height:1.5;color:var(--tinta2)} .eq-aviso-rh b{color:var(--tinta)} /* En un teléfono la ficha y su botón se apilan: si no, el nombre del equipo se parte en cuatro renglones para dejarle sitio a "Soltar". */ @media(max-width:560px){.eqp-ficha{flex-direction:column;align-items:stretch;gap:10px}} .eq-pend{display:flex;gap:9px;align-items:center;flex-wrap:wrap;padding:8px 0;border-bottom:1px solid var(--borde)} .eq-pend:last-child{border-bottom:none} .eq-pend span{flex:1 1 auto;font-size:13.5px} .eq-form .campo{margin-bottom:10px} .ver-reto{margin:10px 0;padding:10px 13px;background:var(--marca-suave);border:1px dashed var(--marca2); border-radius:10px;font-size:14px;color:var(--marca2)} .ver-reto b{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:16px;letter-spacing:1px} .form-verif{margin-top:8px} /* Se pide en ámbar, no en rojo: al equipo no le falta nada, al registro sí. */ .pide-serie{margin:0 0 12px;padding:12px 14px;background:var(--ambar-f); border:1px solid var(--ambar);border-radius:10px} .pide-serie b{display:block;font-size:14px} .pide-serie p{margin:6px 0 10px;font-size:13px;line-height:1.5;color:var(--tinta2)} .pide-serie label{display:block;margin-top:8px;font-size:12.5px;color:var(--tinta2)} .pide-serie input{margin-top:4px} .pide-serie input[name=serie_reportada]{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.5px;text-transform:uppercase} .leido{color:var(--marca2);font-weight:600;font-size:10.5px;text-transform:uppercase;letter-spacing:.4px} .lista-adj{list-style:none;margin:0 0 12px;padding:0} .lista-adj li{display:flex;flex-wrap:wrap;align-items:center;gap:6px 9px;padding:9px 0;border-bottom:1px solid var(--borde)} .lista-adj li:last-child{border-bottom:none} .adj-nombre{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;font-weight:600;text-decoration:none;color:var(--marca2)} .adj-nombre:hover{text-decoration:underline} .adj-meta{font-size:11.5px;color:var(--tinta3);flex:1 1 100%} .form-adj{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:4px 0 6px} .form-adj select{width:auto;flex:0 1 auto} .form-adj input[type=file]{flex:1 1 180px;min-width:0;font-size:12.5px;padding:7px} .form-adj button{flex:0 0 auto} .res-item{display:flex;flex-direction:column;gap:1px;padding:9px 0;border-bottom:1px solid var(--borde)} .res-item:last-child{border-bottom:none} .res-item span{font-size:13.5px;font-weight:600} .res-item small{font-size:11.5px;color:var(--tinta3)} .bit{list-style:none;margin:0;padding:0;font-size:13px} .bit li{padding:8px 0;border-bottom:1px solid var(--borde)} .bit li:last-child{border-bottom:none} .bit small{display:block;color:var(--tinta3);font-size:11.5px;margin-top:1px} .bit div{color:var(--tinta2);margin-top:2px} .timeline{list-style:none;margin:0;padding:0;position:relative} .timeline::before{content:'';position:absolute;left:5px;top:6px;bottom:6px;width:2px; background:linear-gradient(var(--borde),var(--borde2))} .timeline li{position:relative;padding:0 0 22px 26px} .timeline li:last-child{padding-bottom:0} .tl-punto{position:absolute;left:0;top:3px;width:12px;height:12px;border-radius:50%; background:var(--panel);border:2.5px solid var(--marca2);box-shadow:0 0 0 3px var(--marca-suave)} .timeline li:first-child .tl-punto{border-color:var(--turquesa);box-shadow:0 0 0 3px rgba(43,211,226,.18)} .tl-cuando{font-size:11.5px;color:var(--tinta3);font-weight:600;letter-spacing:.1px;margin-bottom:3px} .tl-que{font-size:13.5px;color:var(--tinta);line-height:1.5} .tl-que b{font-weight:750} .tl-det{font-size:13px;color:var(--tinta2);margin-top:6px;padding:7px 11px;background:var(--fondo); border-radius:9px;border:1px solid var(--borde2);line-height:1.5;overflow-wrap:anywhere} .b-texto .ml{display:block} .b-texto .ml+.ml{margin-top:3px} .b-texto .ml i.met{font-style:normal;font-size:12px;opacity:.7;margin-right:6px; text-transform:uppercase;letter-spacing:.03em;font-weight:600} .b-texto .ml b{font-weight:650} .mi-cuerpo .ml{display:block} .mi-cuerpo .ml+.ml{margin-top:3px} .mi-cuerpo .ml i.met{font-style:normal;font-size:11.5px;opacity:.75;margin-right:6px; text-transform:uppercase;letter-spacing:.03em;font-weight:600} /* Formato de los mensajes (src/formato.js). La sangría colgante es lo que hace que una lista se lea como lista: sin ella, el segundo renglón vuelve al margen y el número deja de significar nada. */ .ml.mli{display:flex;gap:7px;align-items:baseline} .ml.mli i.mnum{font-style:normal;font-weight:700;opacity:.6;flex:0 0 auto; min-width:14px;font-variant-numeric:tabular-nums} .ml.mli .mtx{flex:1;min-width:0} .ml.mh{font-weight:750;margin-top:7px} .ml.mh:first-child{margin-top:0} .ml.mhr{display:block;height:1px;background:currentColor;opacity:.16;margin:8px 0} .ml em{font-style:italic} .ml code{font-family:ui-monospace,SFMono-Regular,'SF Mono',Menlo,monospace;font-size:.88em; background:rgba(127,127,127,.14);border-radius:5px;padding:1px 5px} .ml a{color:inherit;text-decoration:underline;text-underline-offset:2px; overflow-wrap:anywhere} .fila-msg.suyo .ml a{color:var(--marca)} /* ── chat de burbujas (conversación) */ .chat-card{padding:0;overflow:hidden} .chat-head{padding:18px 22px 14px;border-bottom:1px solid var(--borde2);display:flex; align-items:baseline;gap:10px;flex-wrap:wrap} .chat-head .chat-sub{font-size:12.5px;color:var(--tinta3);font-weight:600} .chat{padding:20px 22px;display:flex;flex-direction:column;gap:12px;background: linear-gradient(var(--fondo),var(--fondo)) ;min-height:120px;max-height:520px;overflow-y:auto} .chat-vacio{text-align:center;color:var(--tinta3);font-size:13.5px;padding:26px 0} .fila-msg{display:flex;max-width:100%} .fila-msg.mio{justify-content:flex-end} .fila-msg.suyo{justify-content:flex-start} .burbuja{max-width:76%;padding:9px 13px;border-radius:18px;position:relative; box-shadow:0 1px 1px rgba(11,26,38,.06);animation:surge .3s ease} .fila-msg.suyo .burbuja{background:var(--panel);border:1px solid var(--borde);border-bottom-left-radius:6px;color:var(--tinta)} .fila-msg.mio .burbuja{background:var(--grad);color:#fff;border-bottom-right-radius:6px} /* Quien habla se distingue por COLOR, no solo por el nombre en letra chica. En un hilo donde escriben la persona que reporta, su jefa y un agente, TODAS las burbujas de la izquierda se ven iguales y el cambio de interlocutor pasa de largo: el aviso estaba, pero no avisaba. El tono se reparte por ORDEN DE APARICION dentro del hilo y no por el id del usuario — con el id, dos participantes del mismo ticket pueden caer en el mismo color justo cuando importa distinguirlos. */ .fila-msg.suyo .burbuja{border-left-width:3px;border-left-color:var(--tono,var(--borde))} .fila-msg.suyo .b-autor{color:var(--tono,var(--marca))} .fila-msg.t0{--tono:#1179C4} .fila-msg.t1{--tono:#0F7A6E} .fila-msg.t2{--tono:#6D4AB8} .fila-msg.t3{--tono:#B03A78} .fila-msg.t4{--tono:#4F7A18} .fila-msg.t5{--tono:#AF5A16} /* Aire extra donde cambia quien habla; los mensajes seguidos de la misma persona se quedan pegados. El agrupamiento es la mitad de la señal: sin él, el color solo. */ .fila-msg.cambia{margin-top:7px} .b-autor{display:block;font-size:11.5px;font-weight:750;color:var(--marca);margin-bottom:2px} .b-quien{color:inherit;text-decoration:none;border-bottom:1px dotted currentColor} .b-quien:hover{border-bottom-style:solid} .b-texto{display:block;font-size:14px;line-height:1.5;word-wrap:break-word} .b-pie{display:flex;align-items:center;gap:4px;justify-content:flex-end; font-size:10.5px;margin-top:3px;opacity:.72} .fila-msg.mio .b-pie{color:rgba(255,255,255,.92)} .fila-msg.suyo .b-pie{color:var(--tinta3)} .palomas{display:inline-flex;color:rgba(255,255,255,.55)} .palomas.leido{color:#B7EEFF} .msg-interno{align-self:center;max-width:82%;background:#FFFBF0;border:1px solid #F1DDA9; border-radius:12px;padding:9px 13px;box-shadow:none} .msg-interno .mi-head{font-size:11px;font-weight:700;color:#B0851E;margin-bottom:3px; display:flex;align-items:center;gap:6px} .msg-interno .mi-cuerpo{font-size:13.5px;color:#6E5A22;line-height:1.5} .asis-conf{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:12px 18px; border-top:1px solid rgba(30,155,224,.3); background:linear-gradient(90deg,rgba(30,155,224,.06),rgba(43,211,226,.05))} .asis-conf-t{font-size:13px;font-weight:600;color:var(--marca);flex:1;min-width:200px} .chat-form{padding:14px 18px 18px;border-top:1px solid var(--borde2);background:var(--panel)} /* Barra de formato del cuadro de escribir. Discreta: es una ayuda, no una botonera de procesador de textos, y compite por espacio con el mensaje. */ .fmt-barra{display:flex;align-items:center;gap:4px;margin-bottom:8px;flex-wrap:wrap} .fmt-b{width:28px;height:26px;padding:0;border:1px solid transparent;border-radius:7px; background:none;color:var(--tinta3);font-size:13px;line-height:1;cursor:pointer; display:inline-flex;align-items:center;justify-content:center} .fmt-b:hover{background:var(--fondo);color:var(--tinta2)} .fmt-b.fmt-cod{font-family:ui-monospace,SFMono-Regular,'SF Mono',Menlo,monospace;font-size:11px} /* Prendido = el cursor está DENTRO de esa marca. Es el indicador de qué formato tiene la palabra: sin él, la única forma de saberlo es mandar el mensaje. */ .fmt-b[aria-pressed="true"]{background:var(--marca-suave);border-color:rgba(30,155,224,.28); color:var(--marca)} .fmt-pista{font-size:11px;color:var(--tinta3);margin-left:4px} @media (max-width:520px){.fmt-pista{display:none}} .chat-input{display:flex;gap:9px;align-items:flex-end} /* Evidencia: la captura del caso */ .b-adj{padding:6px 6px 4px;max-width:min(78%,320px)} .b-adj .b-autor{padding:2px 6px 0} .b-adj .b-pie{padding:0 6px 2px} /* contain, nunca cover: esto es EVIDENCIA. Recortar una captura para que llene el cuadro puede tapar justo el mensaje de error que la persona subió a enseñar. Se ve completa aunque queden bandas a los lados. (Sin comillas invertidas aquí: este bloque vive dentro de un template literal y lo cerrarían.) */ .adj-orig{display:inline-block;margin-top:6px;font-size:13px} .adj-med{display:block;width:100%;max-height:320px;object-fit:contain;border-radius:13px; background:var(--fondo)} video.adj-med{max-height:300px} .adj-noimg{font-size:12.5px;line-height:1.5;padding:8px 8px 10px;color:var(--tinta2)} .adj-noimg .ico{width:15px;height:15px;vertical-align:-3px;margin-right:4px} .pista-captura{display:flex;gap:9px;align-items:flex-start;font-size:13px;line-height:1.5; color:var(--tinta2);background:var(--marca-suave);border:1px solid rgba(30,155,224,.22); border-radius:11px;padding:11px 13px;margin:0 0 16px} .pista-captura .ico{width:17px;height:17px;flex:0 0 auto;color:var(--marca);margin-top:1px} .chat-pista{display:flex;gap:7px;align-items:center;font-size:12px;color:var(--tinta3); margin-top:9px;line-height:1.45} .chat-pista .ico{width:14px;height:14px;flex:0 0 auto} .ev-form{padding:0 18px;margin:0} .ev-form input[type=file]{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none} .ev-espera{font-size:12.5px;color:var(--tinta3);padding:8px 0 0;display:block} .ev-espera[hidden]{display:none} .chat-clip{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center; width:40px;height:40px;border-radius:50%;cursor:pointer;color:var(--tinta3); border:1px solid var(--borde2);background:var(--panel);transition:.15s} .chat-clip:hover{color:var(--marca);border-color:var(--marca);background:var(--marca-suave)} .chat-clip .ico{width:19px;height:19px} /* Nota de voz. El micrófono es un botón hermano del clip; el panel de grabación aparece encima del cajón solo mientras se graba o se revisa. */ .chat-mic{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center; width:40px;height:40px;border-radius:50%;cursor:pointer;color:var(--tinta3); border:1px solid var(--borde2);background:var(--panel);transition:.15s;padding:0} .chat-mic:hover{color:var(--marca);border-color:var(--marca);background:var(--marca-suave)} .chat-mic .ico{width:19px;height:19px} .chat-mic.grabando{color:#fff;background:#D9463F;border-color:#D9463F;animation:latido 1.1s ease-in-out infinite} @keyframes latido{0%,100%{box-shadow:0 0 0 0 rgba(217,70,63,.45)}50%{box-shadow:0 0 0 7px rgba(217,70,63,0)}} .voz-panel{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:0 0 10px; padding:10px 14px;border-radius:14px;background:var(--marca-suave);border:1px solid rgba(30,155,224,.22)} .voz-panel[hidden]{display:none} /* Los .boton y el