/* =========================================================
   SNIPEX · componentes del área privada y de la administración
   Se apoya en ui.css (mismas variables, mismas formas); aquí solo va lo que
   las vistas del cliente no necesitaban: vinculaciones, fichas, filtros avanzados,
   código de errores, tablas que se vuelven tarjetas en móvil...
   ========================================================= */

/* La columna única del contenido puede encogerse: sin esto, una tabla o una traza ancha
   ensancha toda la página en móvil y las tarjetas se salen por la derecha. */
.content{grid-template-columns:minmax(0,1fr)}
.main{min-width:0}

/* ---- rol: lo que solo ve el administrador ---- */
html:not([data-rol="admin"]) .solo-admin{display:none !important}

/* ---- barra lateral: etiquetas con intención ---- */
.side a .tag{font-variant-numeric:tabular-nums}
.side a .tag-warn{color:var(--amber); border:1px solid rgba(240,136,62,.3); background:rgba(240,136,62,.1); padding:1px 7px; border-radius:var(--r-full)}
.side a .tag-err{color:var(--red); border:1px solid rgba(240,86,74,.3); background:var(--red-soft); padding:1px 7px; border-radius:var(--r-full)}
.side a .tag-vivo{color:var(--green); display:inline-flex; align-items:center; gap:6px}
.side a .tag-vivo::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--green); animation:ping 2.4s var(--in-out) infinite}
.side-sec-admin{margin-top:6px; color:var(--accent); display:flex; align-items:center; gap:8px}
.side-sec-admin::after{content:""; height:1px; flex:1; background:linear-gradient(90deg,var(--accent-ring),transparent)}
.side{overflow-y:auto}

/* interruptor de la maqueta (no existe en el producto) */
.rolsw{display:grid; gap:7px; padding:0 8px 14px}
.rolsw-t{font-family:var(--mono); font-size:.54rem; letter-spacing:.14em; text-transform:uppercase; color:var(--text-faint)}
.rolsw-b{display:flex; padding:3px; border-radius:var(--r-full); border:1px solid var(--border); background:var(--bg-deep)}
.rolsw-b button{flex:1; padding:6px 0; border-radius:var(--r-full); font-size:.76rem; font-weight:600; color:var(--text-dim); transition:.3s var(--out)}
.rolsw-b button[aria-pressed="true"]{background:linear-gradient(180deg,#eec55c,var(--accent)); color:var(--on-accent)}

/* ---- 403 ---- */
.prohibido{max-width:560px; margin:6vh auto 0; text-align:center; padding:34px 28px; border-radius:var(--r-lg); border:1px solid var(--border); background:var(--bg-card); box-shadow:var(--e3)}
.prohibido .gate-ic{margin-bottom:18px}
.prohibido-act{display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:22px}

/* ---- avatares con tono propio (para distinguir a los usuarios de un vistazo) ---- */
.av[style*="--h"]{background:linear-gradient(140deg,hsl(var(--h) 52% 66%),hsl(var(--h) 46% 46%)); color:#0e1014}
.av-xl{width:64px; height:64px; font-size:1.25rem}
.av-sm{width:28px; height:28px; font-size:.6rem}
.pers{display:flex; align-items:center; gap:11px; min-width:0}
.pers .t{min-width:0}
.pers .t b{display:block; color:var(--text); font-weight:600; font-size:.86rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.pers .t span{display:block; font-size:.72rem; color:var(--text-faint); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
a.pers:hover .t b{color:var(--accent)}
.lnk{color:var(--accent); font-weight:600; font-size:.8rem}
.lnk:hover{text-decoration:underline}

/* ---- pestañas ---- */
.tabs{display:flex; gap:2px; border-bottom:1px solid var(--border-soft); overflow-x:auto; scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs [role="tab"]{
  position:relative; padding:11px 16px; font-size:.86rem; font-weight:600; color:var(--text-dim);
  white-space:nowrap; transition:color .25s;
}
.tabs [role="tab"] em{font-style:normal; font-family:var(--mono); font-size:.66rem; color:var(--text-faint); margin-left:7px}
.tabs [role="tab"]:hover{color:var(--text)}
.tabs [role="tab"][aria-selected="true"]{color:var(--accent)}
.tabs [role="tab"][aria-selected="true"]::after{content:""; position:absolute; left:10px; right:10px; bottom:-1px; height:2px; border-radius:2px; background:var(--accent)}

/* ---- avisos ---- */
.alerta{display:flex; align-items:center; gap:13px; padding:14px 18px; border-radius:var(--r-md); border:1px solid rgba(240,136,62,.3); background:rgba(240,136,62,.09)}
.alerta .ai{display:flex; flex-shrink:0; color:var(--amber)}
.alerta b{display:block; font-size:.9rem; margin-bottom:2px}
.alerta p{margin:0; font-size:.81rem; color:var(--text-dim); line-height:1.5}
.alerta .btn{margin-left:auto; flex-shrink:0}
.alerta.ok{border-color:rgba(63,208,127,.3); background:var(--green-soft)} .alerta.ok .ai{color:var(--green)}
.alerta.err{border-color:rgba(240,86,74,.32); background:var(--red-soft)} .alerta.err .ai{color:var(--red)}
@media (max-width:760px){ .alerta{flex-wrap:wrap} .alerta .btn{margin-left:0; width:100%} }

/* ---- rejillas ---- */
.grid2{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; align-items:start}
.grid3{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px}
.grid-ficha{display:grid; grid-template-columns:minmax(0,1.7fr) minmax(300px,1fr); gap:18px; align-items:start}
.kpis.k5{grid-template-columns:repeat(5,minmax(0,1fr))}
.kpis.k5 .kpi .v.hero{font-size:1.85rem}
.kpis.k5 .kpi .d{display:block; line-height:1.55}
.kpis.k3{grid-template-columns:repeat(3,minmax(0,1fr))}
.col{display:grid; gap:18px; align-content:start; min-width:0}
/* con 5 tarjetas, la última rellena lo que sobra de la fila: nunca queda un hueco vacío */
@media (max-width:1380px){ .kpis.k5{grid-template-columns:repeat(6,minmax(0,1fr))} .kpis.k5 .kpi{grid-column:span 2} .kpis.k5 .kpi:nth-child(n+4){grid-column:span 3} }
@media (max-width:1180px){ .grid-ficha,.grid2{grid-template-columns:minmax(0,1fr)} }
@media (max-width:860px){ .grid3,.kpis.k3{grid-template-columns:minmax(0,1fr)} .kpis.k5{grid-template-columns:repeat(2,minmax(0,1fr))} .kpis.k5 .kpi,.kpis.k5 .kpi:nth-child(n+4){grid-column:span 1} .kpis.k5 .kpi:last-child{grid-column:span 2} }
@media (max-width:560px){ .kpis.k5{grid-template-columns:minmax(0,1fr)} .kpis.k5 .kpi:last-child{grid-column:span 1} }

/* ---- KPI con variantes ---- */
.kpi .v.sm{font-size:1.5rem}
.kpi .d .pos{color:var(--green)} .kpi .d .neg{color:var(--red)} .kpi .d .warn{color:var(--amber)}
.kpi a.d{color:var(--accent)} .kpi a.d:hover{text-decoration:underline}
.kpi.alerta-k{border-color:rgba(240,86,74,.32)}
.kpi.alerta-k .v{color:var(--red)}

/* En móvil las cifras van de dos en dos: cuatro tarjetas apiladas se comen la pantalla */
@media (max-width:560px){
  body[data-zona="admin"] .kpis,body[data-zona="admin"] .kpis.k3{grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px}
  body[data-zona="admin"] .kpi{padding:14px 15px}
  body[data-zona="admin"] .kpi .v,body[data-zona="admin"] .kpis.k5 .kpi .v.hero{font-size:1.45rem}
  body[data-zona="admin"] .kpis > .kpi:last-child:nth-child(odd){grid-column:span 2}
}

/* ---- salud de la plataforma ---- */
.salud{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px}
.sv{display:flex; flex-direction:column; gap:5px; padding:14px 16px; border-radius:var(--r); border:1px solid var(--border-soft); background:rgba(26,30,38,.55); min-width:0}
.sv .n{display:flex; align-items:center; gap:8px; font-size:.8rem; font-weight:600; color:var(--text)}
.sv .n .dot{flex-shrink:0}
.sv .n .dot.warn{background:var(--amber); animation:none; box-shadow:none}
.sv .n .dot.err{background:var(--red); animation:none; box-shadow:none}
.sv .d{font-size:.74rem; color:var(--text-dim); line-height:1.45}
.sv .x{font-family:var(--mono); font-size:.64rem; color:var(--text-faint)}
/* 5 señales: en pantallas medias 3 + 2 a todo el ancho de la fila (sin huecos) */
@media (max-width:1500px){ .salud{grid-template-columns:repeat(6,minmax(0,1fr))} .sv{grid-column:span 2} .sv:nth-child(n+4){grid-column:span 3} }
@media (max-width:760px){ .salud{grid-template-columns:repeat(2,minmax(0,1fr))} .sv,.sv:nth-child(n+4){grid-column:span 1} .sv:last-child{grid-column:span 2} }
@media (max-width:480px){ .salud{grid-template-columns:minmax(0,1fr); gap:8px} .sv:last-child{grid-column:span 1} .sv{padding:11px 14px; gap:3px} .sv .x{display:none} }

/* ---- vinculaciones: tres señales en una celda ---- */
.vd{display:inline-flex; gap:4px}
.vd i{
  font-style:normal; font-family:var(--mono); font-size:.6rem; font-weight:700; letter-spacing:.04em;
  padding:3px 7px; border-radius:6px; border:1px solid var(--border); color:var(--text-faint); background:var(--bg-deep);
}
.vd i.ok{color:var(--green); border-color:rgba(63,208,127,.3); background:var(--green-soft)}
.vd i.no{color:var(--red); border-color:rgba(240,86,74,.35); background:var(--red-soft); text-decoration:line-through; text-decoration-thickness:1px}

/* ---- filtros avanzados ---- */
.barra{display:flex; flex-wrap:wrap; align-items:center; gap:10px}
.barra .sel{
  appearance:none; padding:7px 32px 7px 12px; border-radius:var(--r-full); border:1px solid var(--border); background:var(--bg-deep) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239099a8' stroke-width='2.4'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 11px center;
  font-size:.78rem; color:var(--text-dim); cursor:pointer; transition:border-color .25s, color .25s;
}
.barra .sel:hover{border-color:var(--border-hover); color:var(--text)}
.barra .sel:focus{outline:0; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft)}
.barra .sel option{background:var(--bg-card)}
.barra .buscar{margin-left:auto; position:relative; width:min(280px,100%)}
.barra .buscar .inp{padding-top:8px; padding-bottom:8px; font-size:.84rem}
.cuenta-res{font-size:.78rem; color:var(--text-faint)}
.cuenta-res b{color:var(--text-dim); font-weight:600}
@media (max-width:760px){ .barra .buscar{margin-left:0; width:100%; order:-1} }

/* ---- tablas: densidad y orden ---- */
.tbl th.ord{cursor:pointer; user-select:none; transition:color .2s}
.tbl th.ord:hover{color:var(--text-dim)}
.tbl th.ord[aria-sort]::after{content:" ↓"; color:var(--accent)}
.tbl th.ord[aria-sort="ascending"]::after{content:" ↑"}
.tbl td.num{font-variant-numeric:tabular-nums; font-family:var(--mono); font-size:.8rem}
.tbl td.r.sm,.tbl td .mut{font-size:.74rem; color:var(--text-faint)}
.tbl td .mono{font-family:var(--mono); font-size:.74rem}
.tbl tbody tr[data-href],.tbl tbody tr[data-id],.tbl tbody tr[data-run]{cursor:pointer}
.tbl .est-pend td:first-child{box-shadow:inset 3px 0 0 var(--red)}
.tbl .msg{max-width:340px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--text-dim)}
.tbl .tipo{font-family:var(--mono); font-size:.76rem; color:var(--text)}
.tbl-total td{font-weight:600; color:var(--text); border-top:1px solid var(--border)}
.tbl td.nw{white-space:nowrap}
.tbl td .mut{font-size:.74rem; color:var(--text-faint)}

/* Tabla → tarjetas en móvil: cada fila pasa a ser una tarjeta con sus rótulos */
@media (max-width:760px){
  .tbl.resp thead{display:none}
  .tbl.resp,.tbl.resp tbody,.tbl.resp tr,.tbl.resp td{display:block; width:100%}
  .tbl.resp tr{padding:14px 16px; border-bottom:1px solid var(--border-soft)}
  .tbl.resp tr:last-child{border-bottom:0}
  .tbl.resp td{border:0; padding:5px 0; display:flex; justify-content:space-between; align-items:center; gap:14px; text-align:right}
  .tbl.resp td[data-l]::before{content:attr(data-l); font-family:var(--mono); font-size:.56rem; letter-spacing:.12em; text-transform:uppercase; color:var(--text-faint); text-align:left; flex-shrink:0}
  .tbl.resp td.principal{display:block; text-align:left; padding-bottom:8px}
  .tbl.resp td.principal::before{display:none}
  .tbl.resp .msg{max-width:none; white-space:normal; text-align:right}
  .tbl.resp .est-pend td:first-child{box-shadow:none}
  .tbl.resp tr.est-pend{box-shadow:inset 3px 0 0 var(--red)}
}

/* ---- barras de progreso finas ---- */
.pbar{height:6px; border-radius:var(--r-full); background:var(--bg-hover); overflow:hidden}
.pbar i{display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--accent-dim),var(--accent)); transition:width .8s var(--out)}
.pbar.ok i{background:var(--green)} .pbar.warn i{background:var(--amber)} .pbar.err i{background:var(--red)}
.pbar-l{display:flex; justify-content:space-between; font-size:.74rem; color:var(--text-faint); margin-top:7px}
.pbar-l b{color:var(--text-dim); font-weight:600}

/* ---- las tres vinculaciones (cliente) ---- */
.listo{display:flex; align-items:center; gap:18px; padding:20px 22px; border-radius:var(--r-md); border:1px solid var(--border); background:linear-gradient(180deg,var(--bg-card),rgba(20,23,30,.85)); box-shadow:var(--e2); position:relative; overflow:hidden}
.listo::before{content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--amber)}
.listo.ok::before{background:var(--green)}
.listo .ic{width:46px; height:46px; border-radius:14px; display:grid; place-items:center; flex-shrink:0; background:rgba(240,136,62,.1); border:1px solid rgba(240,136,62,.3); color:var(--amber)}
.listo.ok .ic{background:var(--green-soft); border-color:rgba(63,208,127,.3); color:var(--green)}
.listo h2{font-size:1.15rem; margin-bottom:5px}
.listo p{margin:0; font-size:.86rem; color:var(--text-dim); line-height:1.55; max-width:62ch}
.listo .prog{margin-left:auto; text-align:right; flex-shrink:0}
.listo .prog b{display:block; font-size:1.7rem; font-family:var(--display); letter-spacing:-.03em; line-height:1}
.listo .prog span{font-family:var(--mono); font-size:.6rem; letter-spacing:.12em; text-transform:uppercase; color:var(--text-faint)}
@media (max-width:760px){ .listo{flex-wrap:wrap} .listo .prog{margin-left:0; text-align:left} }

.pasos3{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px}
.paso{position:relative; display:flex; flex-direction:column; gap:12px; padding:20px; border-radius:var(--r-md); border:1px solid var(--border); background:var(--bg-card)}
.paso.hecho{border-color:rgba(63,208,127,.22)}
.paso.ahora{border-color:var(--accent-ring); box-shadow:0 0 0 1px var(--accent-ring), var(--glow)}
.paso.bloq{opacity:.62}
.paso .cab{display:flex; align-items:center; gap:11px}
.paso .num{
  width:30px; height:30px; border-radius:10px; display:grid; place-items:center; flex-shrink:0;
  font-family:var(--mono); font-size:.76rem; font-weight:700; color:var(--accent);
  background:linear-gradient(160deg,rgba(224,182,75,.2),var(--accent-soft) 60%); border:1px solid var(--accent-ring);
}
.paso.hecho .num{color:var(--green); background:var(--green-soft); border-color:rgba(63,208,127,.32)}
.paso.bloq .num{color:var(--text-faint); background:var(--bg-deep); border-color:var(--border)}
.paso h3{font-size:1rem}
.paso .badge{margin-left:auto}
.paso p{margin:0; font-size:.83rem; color:var(--text-dim); line-height:1.55}
.paso .dato{display:flex; align-items:center; gap:9px; padding:9px 12px; border-radius:var(--r-sm); background:var(--bg-deep); border:1px solid var(--border-soft); font-size:.82rem; min-width:0}
.paso .dato .mono{color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.paso .dato svg{color:var(--green); flex-shrink:0}
.paso .acc{margin-top:auto; display:flex; gap:8px; flex-wrap:wrap}
@media (max-width:1100px){ .pasos3{grid-template-columns:minmax(0,1fr)} }

/* ---- filas de cuenta: etiqueta + valor + acción ---- */
.kvlist{display:grid}
.kv{display:flex; align-items:center; gap:14px; padding:13px 0; border-bottom:1px solid var(--border-soft); font-size:.86rem}
.kv:last-child{border-bottom:0}
.kv > span:first-child{color:var(--text-dim); flex-shrink:0; min-width:130px}
.kv > b,.kv > .v{color:var(--text); font-weight:600; min-width:0; overflow-wrap:anywhere}
.kv > .acc{margin-left:auto; display:flex; gap:8px; flex-shrink:0}
@media (max-width:620px){ .kv{flex-wrap:wrap} .kv > span:first-child{min-width:100%; font-size:.74rem} .kv > .acc{margin-left:0} }

/* ---- equipos (instalaciones) ---- */
.equipo{display:flex; align-items:center; gap:14px; padding:14px 0; border-bottom:1px solid var(--border-soft)}
.equipo:last-child{border-bottom:0}
.equipo .ic{width:40px; height:40px; border-radius:12px; display:grid; place-items:center; flex-shrink:0; background:var(--bg-deep); border:1px solid var(--border); color:var(--text-dim)}
.equipo.off .ic{opacity:.5}
.equipo .t{min-width:0; flex:1}
.equipo .t b{display:flex; align-items:center; gap:8px; font-size:.9rem; flex-wrap:wrap}
.equipo .t span{display:block; font-size:.76rem; color:var(--text-faint); margin-top:2px}
.equipo .acc{display:flex; gap:8px; flex-shrink:0}
@media (max-width:620px){ .equipo{flex-wrap:wrap} .equipo .acc{width:100%} }

/* ---- opciones tipo tarjeta (nivel de avisos) ---- */
.opts{display:grid; gap:10px}
.opt{display:flex; align-items:flex-start; gap:13px; padding:14px 16px; border-radius:var(--r); border:1px solid var(--border); background:var(--bg-deep); cursor:pointer; transition:border-color .25s, background .25s}
.opt:hover{border-color:var(--border-hover)}
.opt input{appearance:none; width:18px; height:18px; border:1px solid var(--border-hover); border-radius:50%; flex-shrink:0; margin-top:2px; position:relative; transition:.25s var(--out); cursor:pointer}
.opt input:checked{border-color:var(--accent); background:var(--accent)}
.opt input:checked::after{content:""; position:absolute; inset:4px; border-radius:50%; background:var(--on-accent)}
.opt:has(input:checked){border-color:var(--accent-ring); background:var(--accent-soft)}
.opt b{display:block; font-size:.88rem; margin-bottom:2px}
.opt span{font-size:.78rem; color:var(--text-dim); line-height:1.5}

/* ---- campo de código de vinculación ---- */
.codigo{
  width:100%; text-align:center; font-family:var(--mono); font-size:1.9rem; font-weight:700; letter-spacing:.32em; text-transform:uppercase;
  padding:16px 14px 16px calc(14px + .32em); border-radius:var(--r-md); background:var(--bg-deep); border:1px solid var(--border);
}
.codigo::placeholder{color:var(--border-hover)}
.codigo:focus{outline:0; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft)}
.nota-sec{display:flex; gap:10px; align-items:flex-start; font-size:.78rem; color:var(--text-faint); line-height:1.55; padding:11px 13px; border-radius:var(--r-sm); background:rgba(26,30,38,.55); border:1px solid var(--border-soft)}
.nota-sec svg{flex-shrink:0; color:var(--accent); margin-top:2px}

/* ---- ficha de usuario ---- */
.ficha{display:flex; align-items:center; gap:20px; padding:22px 24px; border-radius:var(--r-md); border:1px solid var(--border); background:linear-gradient(180deg,var(--bg-card),rgba(20,23,30,.85)); box-shadow:var(--e2)}
.ficha .id{min-width:0}
.ficha h2{font-size:1.4rem; margin-bottom:4px}
.ficha .em{color:var(--text-dim); font-size:.86rem; word-break:break-all}
.ficha .tags{display:flex; flex-wrap:wrap; gap:7px; margin-top:11px}
.ficha .acc{margin-left:auto; display:flex; gap:9px; flex-wrap:wrap; justify-content:flex-end}
@media (max-width:900px){ .ficha{flex-wrap:wrap} .ficha .acc{margin-left:0; justify-content:flex-start; width:100%} }
.migas{display:flex; align-items:center; gap:9px; font-size:.8rem; color:var(--text-faint)}
.migas a{color:var(--text-dim)} .migas a:hover{color:var(--accent)}

.checks{display:grid; gap:2px}
.chk{display:flex; align-items:center; gap:12px; padding:11px 0; border-bottom:1px solid var(--border-soft); font-size:.85rem}
.chk:last-child{border-bottom:0}
.chk .s{width:22px; height:22px; border-radius:50%; display:grid; place-items:center; flex-shrink:0; border:1px solid var(--border); color:var(--text-faint)}
.chk.ok .s{color:var(--green); border-color:rgba(63,208,127,.4); background:var(--green-soft)}
.chk.no .s{color:var(--red); border-color:rgba(240,86,74,.4); background:var(--red-soft)}
.chk .x{margin-left:auto; font-size:.76rem; color:var(--text-faint); text-align:right}

.linea-t{display:grid; gap:0; position:relative}
.linea-t .ev{display:flex; gap:13px; padding:0 0 18px; position:relative}
.linea-t .ev::before{content:""; position:absolute; left:6px; top:14px; bottom:-2px; width:1px; background:var(--border)}
.linea-t .ev:last-child::before{display:none}
.linea-t .ev i{width:13px; height:13px; border-radius:50%; flex-shrink:0; margin-top:3px; background:var(--bg-card); border:2px solid var(--border-hover)}
.linea-t .ev.ok i{border-color:var(--green)} .linea-t .ev.err i{border-color:var(--red)} .linea-t .ev.ac i{border-color:var(--accent)}
.linea-t .ev b{display:block; font-size:.84rem; font-weight:600}
.linea-t .ev span{font-size:.75rem; color:var(--text-faint)}

/* ---- atención: lo que el administrador debería mirar ---- */
.atn{display:grid}
.atn a{display:flex; align-items:center; gap:12px; padding:12px 18px; border-bottom:1px solid var(--border-soft); transition:background .22s}
.atn a:last-child{border-bottom:0}
.atn a:hover{background:var(--bg-hover)}
.atn .tx{min-width:0; flex:1}
.atn .tx b{display:block; font-size:.84rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.atn .tx span{display:block; font-size:.76rem; color:var(--text-dim); line-height:1.45}
.atn .pt{width:8px; height:8px; border-radius:50%; flex-shrink:0; background:var(--amber)}
.atn .pt.err{background:var(--red)}
.atn .go{color:var(--text-faint); flex-shrink:0}

/* ---- ahora mismo ---- */
.vivo{display:grid}
.vivo .it{display:flex; align-items:center; gap:13px; padding:13px 18px; border-bottom:1px solid var(--border-soft)}
.vivo .it:last-child{border-bottom:0}
.vivo .it .t{min-width:0; flex:1}
.vivo .it .t b{display:block; font-size:.85rem}
.vivo .it .t span{font-size:.75rem; color:var(--text-faint)}
.vivo .it .tm{font-family:var(--mono); font-size:.78rem; color:var(--accent)}

/* ---- código: trazas y JSON ---- */
pre.code{
  margin:0; padding:14px 16px; border-radius:var(--r-sm); background:var(--bg-deep); border:1px solid var(--border-soft);
  font-family:var(--mono); font-size:.72rem; line-height:1.7; color:var(--text-dim); overflow:auto; max-height:260px; white-space:pre;
  tab-size:2;
}
pre.code .k{color:var(--accent)} pre.code .e{color:var(--red)} pre.code .f{color:var(--text)}
.code-h{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px}
.code-h .h{font-family:var(--mono); font-size:.57rem; letter-spacing:.14em; text-transform:uppercase; color:var(--text-faint)}
.code-h .btn{padding:4px 9px}

/* captura de pantalla del error (en la maqueta, un dibujo del navegador del bot) */
.shot{position:relative; border-radius:var(--r-sm); overflow:hidden; border:1px solid var(--border); background:#0a0b0e}
.shot svg{display:block; width:100%; height:auto}
.shot .pie{display:flex; justify-content:space-between; align-items:center; gap:10px; padding:8px 12px; font-family:var(--mono); font-size:.66rem; color:var(--text-faint); border-top:1px solid var(--border-soft); background:var(--bg-deep)}

.dsec + .dsec{margin-top:0}
.drawer-in.ancho{width:min(620px,100%); display:flex; flex-direction:column}
.drawer-in.ancho .drawer-b{flex:1; grid-template-columns:minmax(0,1fr); align-content:start}
.drawer-b > *{min-width:0}
.drawer-b pre.code{max-width:100%}
.drawer-b .usr{display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:var(--r); border:1px solid var(--border); background:var(--bg-card); transition:border-color .25s}
.drawer-b .usr:hover{border-color:var(--accent-ring)}
.drawer-b .usr .go{margin-left:auto; color:var(--accent); font-size:.78rem; font-weight:600; white-space:nowrap}
.drawer-pie{position:sticky; bottom:0; display:flex; gap:9px; flex-wrap:wrap; padding:14px 22px; border-top:1px solid var(--border-soft); background:rgba(14,16,20,.92); backdrop-filter:blur(12px)}

/* ---- resumen de errores ---- */
.frecuentes{display:flex; flex-wrap:wrap; gap:8px}
.frecuentes button{display:inline-flex; align-items:center; gap:8px; padding:6px 12px; border-radius:var(--r-full); border:1px solid var(--border); background:var(--bg-deep); font-family:var(--mono); font-size:.7rem; color:var(--text-dim); transition:.25s var(--out)}
.frecuentes button:hover{border-color:var(--border-hover); color:var(--text)}
.frecuentes button[aria-pressed="true"]{border-color:var(--accent-ring); background:var(--accent-soft); color:var(--accent)}
.frecuentes button em{font-style:normal; color:var(--text-faint)}

/* ---- versiones y datos de EA ---- */
.ver{display:flex; align-items:center; gap:14px; padding:16px 18px; border-bottom:1px solid var(--border-soft)}
.ver:last-child{border-bottom:0}
.ver .vn{font-family:var(--display); font-weight:700; font-size:1.25rem; letter-spacing:-.02em; min-width:74px}
.ver .t{min-width:0; flex:1}
.ver .t span{display:block; font-size:.8rem; color:var(--text-dim); line-height:1.5; margin-top:3px}
.ver .t .meta{font-family:var(--mono); font-size:.66rem; color:var(--text-faint)}
.ver .uso{text-align:right; flex-shrink:0; min-width:96px}
.ver .uso b{display:block; font-size:1.15rem; font-variant-numeric:tabular-nums}
.ver .uso span{font-size:.7rem; color:var(--text-faint)}
.ver .acc{display:flex; gap:8px; flex-shrink:0; align-items:center}
@media (max-width:900px){ .ver{flex-wrap:wrap} .ver .acc{width:100%} .ver .uso{text-align:left} }
.oblig{display:inline-flex; align-items:center; gap:9px; font-size:.78rem; color:var(--text-dim)}

.reloj{display:flex; align-items:center; gap:16px; padding:18px 20px; border-radius:var(--r-md); border:1px solid var(--accent-ring); background:linear-gradient(180deg,var(--accent-soft),transparent)}
.reloj .gr{font-family:var(--display); font-weight:700; font-size:1.7rem; letter-spacing:-.02em; line-height:1}
.reloj .gr small{display:block; font-family:var(--mono); font-size:.58rem; letter-spacing:.14em; text-transform:uppercase; color:var(--text-faint); font-weight:400; margin-bottom:7px}
.reloj p{margin:0; font-size:.82rem; color:var(--text-dim); line-height:1.55}
.reloj .btn{margin-left:auto; flex-shrink:0}
@media (max-width:760px){ .reloj{flex-wrap:wrap} .reloj .btn{margin-left:0} }

/* ---- varios ---- */
.sec-t{margin:6px 0 -4px}
.chips{display:flex; flex-wrap:wrap; gap:7px}
.lista-simple{display:grid}
.lista-simple .it{display:flex; align-items:center; justify-content:space-between; gap:14px; padding:11px 0; border-bottom:1px solid var(--border-soft); font-size:.84rem; color:var(--text-dim)}
.lista-simple .it:last-child{border-bottom:0}
.lista-simple .it b{color:var(--text); font-weight:600}
.legend.leg-fila{display:flex; flex-wrap:wrap; gap:6px 18px; margin-top:14px}
.legend.leg-fila .it{font-size:.78rem}
.sub{font-size:.78rem; color:var(--text-faint); line-height:1.5}
.btn-row{display:flex; gap:9px; flex-wrap:wrap}
.topbar .sp .chip-ad{color:var(--accent); border-color:var(--accent-ring); background:var(--accent-soft)}
@media (max-width:620px){ .topbar .sp .chip, .topbar .sp .btn{display:none !important} }

/* =========================================================
   SOPORTE · tickets (cliente, sin cuenta y administración)
   Una conversación se pinta igual en los tres sitios: burbujas del cliente a la derecha,
   soporte a la izquierda, avisos del sistema centrados y —solo para el administrador—
   las notas internas en ámbar y con borde discontinuo.
   ========================================================= */
.tk{
  display:grid; grid-template-columns:minmax(270px,350px) minmax(0,1fr);
  border:1px solid var(--border); border-radius:var(--r-md); background:var(--bg-card); overflow:hidden;
  height:calc(100svh - 64px - clamp(36px,5.2vw,60px)); min-height:520px;
}
.tk-lista{display:flex; flex-direction:column; min-height:0; border-right:1px solid var(--border-soft); background:rgba(8,9,12,.35)}
.tk-lista-h{display:grid; gap:12px; padding:14px 14px 12px; border-bottom:1px solid var(--border-soft)}
.tk-lista-h .filtros{gap:6px}
.tk-items{flex:1; min-height:0; overflow-y:auto; padding:8px; display:grid; gap:6px; align-content:start}
.tk-it{
  display:grid; gap:6px; width:100%; text-align:left; padding:12px 13px; border-radius:var(--r);
  border:1px solid transparent; transition:background .22s, border-color .22s;
}
.tk-it:hover{background:var(--bg-hover)}
.tk-it[aria-current="true"]{background:var(--accent-soft); border-color:var(--accent-ring)}
.tk-it .l1,.tk-it .l3{display:flex; align-items:center; justify-content:space-between; gap:10px}
.tk-it .ref{font-family:var(--mono); font-size:.64rem; letter-spacing:.06em; color:var(--text-faint)}
.tk-it .as{font-size:.86rem; font-weight:600; color:var(--text); line-height:1.4; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.tk-it .cu{font-size:.7rem; color:var(--text-faint); white-space:nowrap}
.tk-nuevo{display:inline-flex; align-items:center; gap:6px; padding:2px 8px; border-radius:var(--r-full); font-size:.62rem; font-weight:700; background:var(--accent); color:var(--on-accent); white-space:nowrap}

.tk-conv{display:flex; flex-direction:column; min-width:0; min-height:0}
.tk-cab{display:flex; align-items:center; gap:14px; padding:14px 18px; border-bottom:1px solid var(--border-soft); background:rgba(8,9,12,.4)}
.tk-cab .t{min-width:0; flex:1}
.tk-cab h2{font-size:1rem; line-height:1.35; overflow-wrap:anywhere}
.tk-cab .meta{display:flex; flex-wrap:wrap; gap:4px 12px; margin-top:4px; font-size:.74rem; color:var(--text-faint)}
.tk-cab .meta .mono{font-size:.7rem}
.tk-cab .acc{display:flex; align-items:center; gap:8px; flex-shrink:0}
.tk-volver{display:none; flex-shrink:0}

.tk-log{flex:1; min-height:0; overflow-y:auto; padding:20px 18px; display:flex; flex-direction:column; gap:12px}
.tk-msg{max-width:min(620px,82%); padding:11px 14px; border-radius:16px; border:1px solid var(--border); background:var(--bg-deep); align-self:flex-start; border-top-left-radius:6px}
.tk-msg.mio{align-self:flex-end; background:var(--accent-soft); border-color:var(--accent-ring); border-top-left-radius:16px; border-top-right-radius:6px}
.tk-msg .cab{display:flex; align-items:baseline; gap:9px; margin-bottom:4px; font-size:.72rem}
.tk-msg .cab b{color:var(--text); font-weight:600}
.tk-msg .cab span{color:var(--text-faint)}
.tk-msg.mio .cab{justify-content:flex-end}
.tk-msg .tx{font-size:.87rem; line-height:1.6; color:var(--text); white-space:pre-wrap; overflow-wrap:anywhere}
.tk-msg.sis{align-self:center; max-width:90%; padding:3px 12px; border:0; background:none; font-size:.74rem; color:var(--text-faint); text-align:center}
.tk-msg.nota{background:rgba(240,136,62,.07); border:1px dashed rgba(240,136,62,.42); align-self:stretch; max-width:none; border-radius:var(--r)}
.tk-msg.nota .cab b{color:var(--amber)}
.tk-msg.nota .cab b::before{content:"Nota interna · "; font-weight:700}

.tk-adjs{display:flex; flex-wrap:wrap; gap:7px; margin-top:9px}
.tk-adj{display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border-radius:var(--r-sm); border:1px solid var(--border); background:var(--bg-card); font-size:.74rem; color:var(--text-dim); transition:border-color .22s, color .22s}
a.tk-adj:hover{border-color:var(--accent-ring); color:var(--accent)}
.tk-adj svg{flex-shrink:0; color:var(--text-faint)}
.tk-adj em{font-style:normal; font-family:var(--mono); font-size:.62rem; color:var(--text-faint)}
.tk-adj button{display:flex; color:var(--text-faint); margin-left:2px; border-radius:50%}
.tk-adj button:hover{color:var(--red)}

.tk-comp{display:grid; gap:10px; padding:14px 18px; border-top:1px solid var(--border-soft); background:rgba(8,9,12,.4)}
.tk-comp textarea.inp{resize:vertical; min-height:74px; line-height:1.55; font-size:.88rem}
.tk-comp .barra2{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.tk-comp .barra2 .sp{margin-left:auto; display:flex; align-items:center; gap:10px}
.tk-comp .ayuda{font-size:.7rem; color:var(--text-faint)}
.tk-comp.nota{background:rgba(240,136,62,.06)}
.tk-comp.nota textarea.inp:focus{border-color:var(--amber); box-shadow:0 0 0 3px rgba(240,136,62,.14)}
.tk-cerrado{display:flex; align-items:center; gap:13px; padding:16px 18px; border-top:1px solid var(--border-soft); background:rgba(8,9,12,.5)}
.tk-cerrado .ic{width:36px; height:36px; border-radius:11px; display:grid; place-items:center; flex-shrink:0; border:1px solid var(--border); background:var(--bg-deep); color:var(--text-faint)}
.tk-cerrado b{display:block; font-size:.88rem}
.tk-cerrado span{font-size:.79rem; color:var(--text-dim); line-height:1.5}
.tk-cerrado .btn{margin-left:auto; flex-shrink:0}

.tk-vacio{margin:auto; max-width:380px; padding:30px 24px; text-align:center; display:grid; gap:10px; justify-items:center}
.tk-vacio .ic{width:52px; height:52px; border-radius:16px; display:grid; place-items:center; border:1px solid var(--accent-ring); background:var(--accent-soft); color:var(--accent); margin-bottom:6px}
.tk-vacio h2{font-size:1.1rem}
.tk-vacio p{margin:0; font-size:.86rem; color:var(--text-dim); line-height:1.6}

/* formulario de ticket nuevo (dentro del panel de conversación o en la página pública) */
.tk-form{flex:1; min-height:0; overflow-y:auto; padding:22px; display:grid; gap:2px; align-content:start}
.tk-form h2{font-size:1.1rem; margin-bottom:4px}
.tk-form .sub{margin:0 0 16px}
.tk-form .dos{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 14px}
.tk-form textarea.inp{resize:vertical; min-height:140px; line-height:1.55}
.tk-form select.inp{appearance:none; cursor:pointer; padding-right:38px; background:var(--bg-deep) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239099a8' stroke-width='2.4'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center}
.tk-form select.inp option{background:var(--bg-card)}
.tk-form .pie{display:flex; justify-content:flex-end; gap:9px; margin-top:8px}
.tk-suelta{display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:14px 16px; border-radius:var(--r); border:1px dashed var(--border-hover); background:var(--bg-deep); font-size:.8rem; color:var(--text-dim)}
.tk-suelta .ayuda{font-size:.72rem; color:var(--text-faint)}

@media (max-width:900px){
  /* en móvil la página entera se desplaza: el chat deja de tener un alto fijo y el escribir queda al final */
  .tk,.sop .tk{grid-template-columns:minmax(0,1fr); height:auto; min-height:0}
  .tk-conv{min-height:72svh}
  .tk-log{flex:1 1 auto; min-height:300px; max-height:none; padding:16px 14px}
  .tk-lista{border-right:0; min-height:60svh}
  .tk-comp textarea.inp{min-height:56px}
  .tk-comp .ayuda{display:none}
  .tk-cab .acc{width:100%; justify-content:space-between}
  .tk-volver{width:100%; justify-content:flex-start}
  .tk[data-vista="lista"] .tk-conv{display:none}
  .tk:not([data-vista="lista"]) .tk-lista{display:none}
  .tk-volver{display:inline-flex}
  .tk-cab{flex-wrap:wrap}
  .tk-msg{max-width:92%}
  .tk-form .dos{grid-template-columns:minmax(0,1fr)}
  .tk-cerrado{flex-wrap:wrap} .tk-cerrado .btn{margin-left:0; width:100%}
}

/* ---- administración: ficha del ticket ---- */
.tk-box .tk-log{max-height:min(62vh,640px); min-height:260px; flex:none}
.tk-modo{display:inline-flex; padding:3px; border-radius:var(--r-full); border:1px solid var(--border); background:var(--bg-deep)}
.tk-modo button{padding:6px 14px; border-radius:var(--r-full); font-size:.78rem; font-weight:600; color:var(--text-dim); transition:.25s var(--out)}
.tk-modo button[aria-pressed="true"]{background:var(--bg-hover); color:var(--text)}
.tk-modo button[data-m="nota"][aria-pressed="true"]{background:rgba(240,136,62,.16); color:var(--amber)}
.tk-gest{display:grid; gap:12px}
.tk-gest label{display:grid; gap:7px; font-size:.74rem; font-weight:600; color:var(--text-dim)}
.tk-gest .barra .sel{width:100%; border-radius:var(--r); padding:10px 34px 10px 13px; font-size:.86rem; color:var(--text)}
.tk-otros{display:grid}
.tk-otros a{display:flex; align-items:center; gap:10px; padding:11px 0; border-bottom:1px solid var(--border-soft); font-size:.82rem; color:var(--text-dim); min-width:0}
.tk-otros a:last-child{border-bottom:0}
.tk-otros a:hover b{color:var(--accent)}
.tk-otros .t{min-width:0; flex:1}
.tk-otros b{display:block; color:var(--text); font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.tk-otros .ref{font-family:var(--mono); font-size:.64rem; color:var(--text-faint)}
.tk-anon{display:flex; align-items:center; gap:13px}
.tk-anon .av{background:var(--bg-hover); color:var(--text-dim); border:1px dashed var(--border-hover)}
.tbl .tk-asunto{max-width:360px}
.tbl .tk-asunto b{display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.tbl .tk-asunto span{font-family:var(--mono); font-size:.66rem; color:var(--text-faint)}
.tbl .pri-alta{color:var(--red); font-weight:600}
.tbl .pri-baja{color:var(--text-faint)}
.tbl .sin-cuenta{display:flex; align-items:center; gap:11px; min-width:0}
@media (max-width:760px){ .tbl.resp .tk-asunto{max-width:none} .tbl.resp .tk-asunto b{white-space:normal} }

/* ---- página pública (sin cuenta) ---- */
.sop{padding:calc(var(--nav-h) + 34px) 0 70px}
.sop-cab{max-width:720px; margin-bottom:26px}
.sop-cab .lead{margin:12px 0 0}
.sop-grid{display:grid; grid-template-columns:minmax(0,1.5fr) minmax(280px,1fr); gap:20px; align-items:start}
.sop-card{border:1px solid var(--border); border-radius:var(--r-md); background:var(--bg-card); overflow:hidden}
.sop-card .tk-form{padding:24px; overflow:visible}
.sop-card .tk-conv .tk-log{max-height:min(58vh,560px); min-height:240px; flex:none}
.sop-lat{display:grid; gap:18px}
.sop-pasos{display:grid; gap:14px; counter-reset:p; margin:0; padding:0}
.sop-pasos li{display:flex; gap:12px; font-size:.84rem; color:var(--text-dim); line-height:1.55; list-style:none}
.sop-pasos li::before{counter-increment:p; content:counter(p); width:24px; height:24px; border-radius:8px; display:grid; place-items:center; flex-shrink:0; font-family:var(--mono); font-size:.7rem; font-weight:700; color:var(--accent); border:1px solid var(--accent-ring); background:var(--accent-soft)}
.sop-pasos b{color:var(--text)}
.tk-enlace{display:grid; gap:10px; padding:16px 18px; border-bottom:1px solid var(--border-soft); background:linear-gradient(180deg,var(--accent-soft),transparent)}
.tk-enlace b{font-size:.9rem}
.tk-enlace p{margin:0; font-size:.8rem; color:var(--text-dim); line-height:1.55}
.tk-enlace .url{display:flex; gap:8px; align-items:center}
.tk-enlace .url .inp{font-family:var(--mono); font-size:.74rem; padding:9px 12px}
.sop-demo{display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-size:.76rem; color:var(--text-faint); margin-bottom:18px}
.sop-demo .filtros{gap:6px}
@media (max-width:980px){ .sop-grid{grid-template-columns:minmax(0,1fr)} }

/* tabla de beneficio por días: en móvil se quedan Día, Invertido y Beneficio (lo importante) */
@media (max-width:620px){ .tbl .ocul-m{display:none} }