@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;450;500;550;600;650;700;750&display=swap');
:root{font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#263b4c;background:#f5f7fa;font-synthesis:none;--bg:#f5f7fa;--surface:#fff;--text:#263b4c;--muted:#74818e;--border:#e4e9ef;--blue:#2868e8;--blue-soft:#edf3ff;--hover:#f8fafc;--note:#fff9e9;--shadow:0 12px 50px #142a4215}*{box-sizing:border-box}body{margin:0;font-size:14px}body.dark{--bg:#101c28;--surface:#172634;--text:#e3ebf4;--muted:#a1b1c1;--border:#2c3e4e;--blue:#76a5ff;--blue-soft:#253d5c;--hover:#1c2d3d;--note:#342e21;color:var(--text);background:var(--bg)}button,input,select,textarea{font:inherit}button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.5}a{color:var(--blue)}button:focus-visible,a:focus-visible{outline:3px solid #82b0ff;outline-offset:3px}button{border:1px solid var(--border);background:var(--surface);color:var(--text);border-radius:7px;padding:9px 13px;font-weight:550;display:inline-flex;align-items:center;justify-content:center;gap:8px}button:hover{background:var(--hover)}svg{width:20px;height:20px;flex-shrink:0;stroke:currentColor;stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round}.primary{background:#2868e8;border-color:#2868e8;color:white}.primary:hover{background:#2059ca}.icon-btn{border:0;padding:8px;background:transparent}.muted{color:var(--muted);font-size:13px;line-height:1.6}.app{display:grid;grid-template-columns:76px minmax(0,1fr);min-height:100vh}.rail{position:fixed;inset:0 auto 0 0;width:76px;background:#102b3d;display:flex;align-items:center;flex-direction:column;padding:22px 12px;gap:13px;color:#a0b9c9;z-index:5}.mark{width:39px;height:39px;background:#fff;border-radius:10px;display:grid;place-content:center;color:#14364a;font-weight:750;font-size:21px;letter-spacing:-2px;margin-bottom:26px}.mark span{color:#38a281}.rail button{width:46px;height:46px;color:inherit;background:transparent;border:0;border-radius:9px}.rail button.active{color:#fff;background:#2b4a60;box-shadow:inset 3px 0 #71baff}.rail button:hover{background:#254456}.rail-bottom{margin-top:auto;display:grid;gap:12px}.brand{font-size:15px;font-weight:750;letter-spacing:-.6px;padding:0 10px}.demo-label{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600;color:#607891;background:var(--bg);border:1px solid var(--border);border-radius:5px;padding:5px 7px}.main{grid-column:2;min-width:0}.topbar{height:83px;border-bottom:1px solid var(--border);background:var(--surface);display:flex;align-items:center;justify-content:space-between;padding:0 32px;gap:18px}.breadcrumb{display:flex;align-items:center;gap:12px;font-size:13px;color:var(--muted)}.breadcrumb strong{color:var(--text);font-weight:550}.top-actions{display:flex;gap:12px;align-items:center}.search{display:flex;align-items:center;gap:10px;border:1px solid var(--border);background:var(--bg);padding:8px 12px;border-radius:7px;max-width:340px;color:var(--muted)}.search input{border:0;outline:0;background:transparent;width:210px;color:var(--text);padding:0}.workspace{padding:31px 32px}.heading{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:25px}h1{font-size:27px;letter-spacing:-.8px;font-weight:650;margin:0 0 8px}h2{font-size:19px;letter-spacing:-.4px;margin:0}p{line-height:1.65}.heading p{color:var(--muted);margin:0;font-size:14px}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:28px}.stat{justify-content:flex-start;align-items:flex-start;text-align:left;flex-direction:column;padding:18px 19px;background:var(--surface);border:1px solid var(--border);border-radius:9px;position:relative}.stat .stat-label{color:var(--muted);font-weight:500;font-size:13px}.stat .stat-value{font-size:29px;font-weight:650;letter-spacing:-1px;margin-top:2px}.stat .stat-foot{font-size:12px;color:var(--muted);font-weight:400}.stat.selected{border-color:#99b9f6;box-shadow:0 0 0 1px #99b9f61a}.stat svg{position:absolute;right:17px;top:19px;color:var(--muted);width:18px}.ticket-list{border:1px solid var(--border);border-radius:10px;overflow:hidden;background:var(--surface)}.list-header{padding:13px 21px;background:var(--hover);color:var(--muted);font-size:12px;display:flex;justify-content:space-between;border-bottom:1px solid var(--border)}.ticket-row{width:100%;border:0;border-bottom:1px solid var(--border);border-radius:0;padding:20px;display:grid;grid-template-columns:42px minmax(0,1fr) 135px;gap:14px;text-align:left;justify-content:initial;align-items:center;font-weight:400}.ticket-row:last-child{border-bottom:0}.avatar{height:39px;width:39px;border-radius:10px;display:grid;place-content:center;color:#596ca2;background:#eef0fb;font-size:13px;font-weight:650}.avatar.mint{background:#e9f4ef;color:#4a7a62}.avatar.amber{background:#fbf0dd;color:#98773c}.avatar.rose{background:#f8eaf0;color:#9a5a78}.row-title{font-size:15px;font-weight:600;display:flex;align-items:center;gap:9px;line-height:1.5}.row-title span{font-weight:450;color:var(--muted);font-size:12px;white-space:nowrap}.row-meta{margin-top:7px;color:var(--muted);font-size:12px;display:flex;gap:9px;flex-wrap:wrap;align-items:center}.row-bottom{display:flex;gap:10px;align-items:center;margin-top:9px;font-size:12px;color:var(--muted)}.reply-tag{color:#2969c1;background:#edf4ff;padding:3px 7px;border-radius:4px;font-weight:550}.row-right{display:flex;align-items:flex-end;flex-direction:column;gap:9px;font-size:12px;color:var(--muted)}.status{display:inline-flex;align-items:center;border-radius:5px;padding:4px 8px;font-size:12px;font-weight:550;white-space:nowrap}.status.abierto{color:#3269b7;background:#edf3ff}.status.pendiente{color:#956617;background:#fff4dc}.status.resuelto,.status.cerrado{color:#388365;background:#eaf6ee}.priority{display:inline-flex;gap:6px;align-items:center}.priority:before{content:'';width:6px;height:6px;border-radius:2px;background:#91a5b5}.priority.alta:before,.priority.urgente:before{background:#e27966}.list-foot{display:flex;justify-content:space-between;align-items:center;margin-top:17px;color:var(--muted);font-size:12px}.list-foot button{padding:6px 10px;font-size:12px}.empty{padding:65px 24px;text-align:center;color:var(--muted)}.empty h2{color:var(--text);margin-bottom:10px}.detail-top{display:flex;gap:12px;align-items:center;margin-bottom:23px}.detail-top .spacer{flex:1}.detail-grid{display:grid;grid-template-columns:minmax(0,1fr) 272px;gap:24px}.conversation{min-width:0}.ticket-heading{padding-bottom:24px;border-bottom:1px solid var(--border)}.ticket-heading h1{font-size:24px;line-height:1.4;margin-top:12px}.ticket-heading p{color:var(--muted);margin:8px 0 0;font-size:13px}.message{background:var(--surface);border:1px solid var(--border);border-radius:10px;margin:20px 0;padding:21px}.message.note{background:var(--note)}.message-head{display:flex;gap:11px;align-items:center}.message-head strong{font-size:14px}.message-head small{display:block;margin-top:5px;color:var(--muted);font-size:12px}.message-head time{margin-left:auto;color:var(--muted);font-size:12px}.message-body{font-size:15px;line-height:1.8;padding-top:17px;white-space:pre-wrap}.attachments{display:flex;flex-wrap:wrap;gap:8px;margin-top:15px}.attachment{font-size:12px;padding:8px;border:1px solid var(--border);border-radius:6px;display:inline-flex;align-items:center;gap:7px;background:var(--surface)}.composer{border:1px solid var(--border);border-radius:10px;background:var(--surface);overflow:hidden;margin:25px 0}.compose-tabs{display:flex;gap:8px;padding:10px 13px;border-bottom:1px solid var(--border);background:var(--hover)}.compose-tabs button{border:0;background:transparent;color:var(--muted)}.compose-tabs button.active{background:var(--surface);box-shadow:0 1px 4px #0000000d;color:var(--blue)}.compose-tabs button.active.note-tab{color:#9b711f}.recipient{padding:13px 20px;color:var(--muted);font-size:12px}.composer textarea{width:100%;min-height:140px;resize:vertical;border:0!important;outline:none;padding:0 20px 20px;background:transparent;box-shadow:none!important;font-size:15px;line-height:1.7}.compose-foot{border-top:1px solid var(--border);padding:12px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}.compose-foot .primary{margin-left:auto}.compose-foot select{width:auto}.context-card{border:1px solid var(--border);border-radius:9px;padding:19px;background:var(--surface);margin-bottom:17px}.context-card h3{font-size:13px;font-weight:650;margin:0 0 17px;display:flex;align-items:center;gap:9px}.context-card h3 svg{width:17px;color:var(--muted)}label{display:block;font-size:13px;font-weight:500;margin-bottom:14px;color:var(--text)}input,select,textarea{display:block;width:100%;padding:10px 11px;color:var(--text);background:var(--surface);border:1px solid var(--border);border-radius:6px;margin-top:7px;line-height:1.5}input:focus,select:focus,textarea:focus{outline:0;border-color:#7da9fa;box-shadow:0 0 0 3px #2868e815}.context-card label:last-child{margin-bottom:0}.context-card p{font-size:13px;margin:6px 0;color:var(--muted)}.context-card strong{font-size:14px;font-weight:600}.text-button{border:0;padding:10px 0 0;background:transparent;color:var(--blue);font-size:13px}.machine-symbol{background:var(--bg);padding:16px;border-radius:7px;margin-bottom:14px;display:flex;gap:12px;align-items:center}.machine-symbol svg{width:30px;height:30px;color:#7894a8}.machine-symbol small{display:block;font-size:11px;color:var(--muted);margin-top:5px}.history-item{padding:12px 0;border-top:1px solid var(--border);font-size:13px;line-height:1.6}.history-item small{display:block;font-size:12px;color:var(--muted)}.contact-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.contact-card{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:24px}.contact-card h2{font-size:17px;margin:15px 0 5px}.contact-card p{color:var(--muted);font-size:13px}.contact-card button{margin-top:12px}#toast{position:fixed;bottom:25px;left:50%;transform:translate(-50%,20px);opacity:0;pointer-events:none;background:#15394b;color:#fff;padding:13px 22px;border-radius:8px;box-shadow:var(--shadow);z-index:100;transition:.2s;max-width:90vw;font-size:14px}#toast.show{opacity:1;transform:translate(-50%,0)}dialog{border:1px solid var(--border);border-radius:13px;background:var(--surface);color:var(--text);width:min(520px,92vw);padding:26px;box-shadow:var(--shadow);max-height:90vh}dialog::backdrop{background:#10253677;backdrop-filter:blur(3px)}.dialog-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}.login{min-height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;background:var(--bg);padding:24px}.login .brand{font-size:23px}.login h1{font-size:25px;margin:27px 0}.login-card{width:min(420px,100%);padding:30px;background:var(--surface);border:1px solid var(--border);border-radius:11px;box-shadow:var(--shadow)}.login-card .primary{width:100%;margin-top:6px}.login-card p{font-size:13px;color:var(--muted)}.login-foot{margin-top:22px;color:var(--muted);font-size:12px}.draft-hint{padding:0 20px 12px;font-size:12px;color:var(--muted)}
@media(min-width:1500px){.workspace{max-width:1450px;margin:auto;padding:36px 44px}.ticket-row{padding:22px}.detail-grid{grid-template-columns:minmax(0,1fr) 300px}}@media(max-width:1150px){.app{grid-template-columns:64px minmax(0,1fr)}.rail{width:64px;padding:22px 8px}.workspace{padding:24px 22px}.topbar{padding:0 22px}.search input{width:150px}.detail-grid{grid-template-columns:minmax(0,1fr) 235px;gap:16px}.stat{padding:15px 12px}.stat svg{display:none}.ticket-row{grid-template-columns:36px minmax(0,1fr) 100px;padding:16px;gap:11px}.row-title{display:block}}@media(max-width:900px){.detail-grid{grid-template-columns:1fr}.context{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.context-card{margin:0}.breadcrumb{display:none}.topbar{height:72px}.stats{gap:9px}.top-actions{width:100%}.search{flex:1;max-width:none}.search input{width:100%}}@media(max-width:600px){.rail{width:52px;padding:17px 5px}.rail button{width:40px;height:42px}.mark{width:32px;height:32px;font-size:18px}.app{grid-template-columns:52px minmax(0,1fr)}.workspace{padding:21px 14px}.topbar{padding:0 14px}.top-actions{gap:6px}.top-actions .primary{font-size:0;padding:10px}.top-actions .primary svg{width:19px}.search{padding:9px}.search input{font-size:13px}.heading{align-items:flex-start}.heading h1{font-size:24px}.stats{grid-template-columns:repeat(2,1fr);gap:9px;margin-bottom:18px}.stat{padding:13px}.stat-value{font-size:25px!important}.ticket-row{grid-template-columns:1fr 86px;padding:17px 13px;gap:8px}.ticket-row>.avatar{display:none}.row-title{font-size:14px}.row-meta{gap:5px;font-size:12px}.row-bottom{flex-wrap:wrap}.list-header{padding:12px;font-size:11px}.list-header span:last-child{display:none}.row-right{font-size:11px}.list-foot{gap:10px;flex-wrap:wrap}.context,.contact-grid{grid-template-columns:1fr}.detail-top{flex-wrap:wrap}.ticket-heading h1{font-size:21px}.message{padding:16px}.message-head time{font-size:11px;max-width:60px;text-align:right}.message-body{font-size:14px}.compose-foot{gap:6px}.compose-foot button{font-size:12px}.compose-foot select{max-width:115px;font-size:12px}.context{order:2}.demo-label{font-size:10px}.heading .demo-label{max-width:95px;line-height:1.4}.list-foot .muted{font-size:11px}}

/* --- Adjuntos que se ven ------------------------------------------------ */
.attachments{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-start}
.adjunto-visual{display:flex;flex-direction:column;gap:6px;max-width:320px;text-decoration:none;color:inherit}
.adjunto-visual img,.adjunto-visual video{
  display:block;max-width:320px;max-height:240px;width:auto;height:auto;
  border-radius:10px;border:1px solid var(--line,#e5e7eb);background:#00000008;object-fit:cover;
}
.adjunto-visual img{cursor:zoom-in;transition:opacity .15s}
.adjunto-visual:hover img{opacity:.88}
.adjunto-audio audio{width:320px}
.adjunto-pie{display:inline-flex;align-items:center;gap:6px;font-size:12px;opacity:.7;line-height:1.3;word-break:break-word}
.adjunto-pie svg{width:14px;height:14px;flex:none}
a.attachment{text-decoration:none;color:inherit}
a.attachment:hover{text-decoration:underline}
.adjunto-roto .adjunto-pie::after{content:' · no se puede previsualizar, pulsa para descargar';opacity:.8}

/* --- Adjuntos en la barra lateral --------------------------------------- */
.context-sub{margin-top:18px;padding-top:16px;border-top:1px solid var(--border)}
.context-sub h4{font-size:12px;font-weight:650;margin:0 0 12px;display:flex;align-items:center;gap:8px}
.context-sub h4 svg{width:15px;color:var(--muted)}
.context-sub h4 span{margin-left:auto;font-weight:500;color:var(--muted);font-variant-numeric:tabular-nums}
.adjuntos-mini{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.mini{display:block;text-decoration:none;color:inherit;min-width:0}
.mini img,.mini video{
  display:block;width:100%;height:62px;object-fit:cover;
  border-radius:6px;border:1px solid var(--border);background:#00000008;
}
.mini img{cursor:zoom-in;transition:opacity .15s}
.mini:hover img{opacity:.88}
/* Marca de reproducción: sin ella una miniatura de vídeo parece una foto. */
.mini-video{position:relative}
.mini-video::after{
  content:'';position:absolute;left:50%;top:31px;transform:translate(-40%,-50%);
  border-left:11px solid #fff;border-top:7px solid transparent;border-bottom:7px solid transparent;
  filter:drop-shadow(0 1px 3px #0009);pointer-events:none;
}
.mini-nombre{display:block;font-size:11px;color:var(--muted);margin-top:5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Si la imagen no se puede previsualizar (el archivo de imprenta de 1.256 Mpx)
   no queda un hueco vacío: se ve que hay algo y que se puede descargar. */
.mini-rota .mini-nombre::before{content:'⤓ ';opacity:.7}

/* --- Pantalla principal: las tecnologías -------------------------------- */
.grupos{display:grid;grid-template-columns:repeat(auto-fit,minmax(208px,1fr));gap:16px}
.grupo{
  display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;
  padding:22px 18px 20px;background:var(--surface);border:1px solid var(--border);
  border-radius:11px;font-weight:400;transition:border-color .15s,box-shadow .15s,transform .15s;
}
.grupo:hover{background:var(--surface);border-color:#b9c9dd;transform:translateY(-2px);box-shadow:0 8px 24px #142a4212}
.grupo.selected{border-color:#99b9f6;box-shadow:0 0 0 1px #99b9f6}
/* La caja de la imagen es cuadrada y de tamaño fijo: las ilustraciones tienen
   fondo transparente y proporciones distintas entre sí, y sin una caja común
   cada tarjeta quedaría a una altura. */
.grupo-img{position:relative;width:96px;height:96px;display:grid;place-content:center;margin-bottom:8px}
.grupo-img img{width:96px;height:96px;object-fit:contain;display:block}
.grupo-icono{display:grid;place-content:center;width:96px;height:96px;border-radius:50%;background:var(--bg);color:var(--muted)}
.grupo-icono svg{width:34px;height:34px}
/* El aviso va sobre la imagen y no debajo del nombre: es lo único de la
   tarjeta que pide actuar hoy, y ahí se ve sin leer nada. */
.grupo-aviso{
  position:absolute;top:-2px;right:-4px;min-width:24px;height:24px;padding:0 6px;
  border-radius:12px;background:#e27966;color:#fff;font-size:12px;font-weight:650;
  display:grid;place-content:center;box-shadow:0 0 0 3px var(--surface);
  font-variant-numeric:tabular-nums;
}
.grupo strong{font-size:15px;font-weight:600;letter-spacing:-.2px}
.grupo-cifra{font-size:13px;color:var(--muted)}
.grupo.avisa .grupo-cifra{color:#c2604c;font-weight:550}
.grupo small{font-size:12px;color:var(--muted);opacity:.8}
body.dark .grupo.avisa .grupo-cifra{color:#ef9a86}

/* --- La tecnología en la que estás trabajando --------------------------- */
.lente{
  display:inline-flex;align-items:center;gap:8px;margin-top:10px;padding:5px 6px 5px 8px;
  background:var(--blue-soft);color:var(--blue);border-radius:7px;font-size:13px;font-weight:600;
}
.lente img{width:22px;height:22px;object-fit:contain;display:block}
.lente svg{width:17px;height:17px}
.lente .icon-btn{padding:0 5px;color:inherit;font-size:17px;line-height:1;opacity:.75}
.lente .icon-btn:hover{opacity:1;background:transparent}
/* --- El raíl se tiñe con el color de la tecnología ---------------------- */
/* Todo lo de dentro se dibuja con blancos translúcidos en vez de colores
   fijos: así funciona igual sobre el azul de siempre, sobre el naranja de
   Formlabs, sobre negro y sobre el verde de Bambu Lab, sin una regla por
   color. Los dos tintes los pone el JavaScript en línea con el dato que viene
   de la base; cuál de los dos se usa lo decide el tema aquí, porque el agente
   cambia de tema sin recargar y el servidor no está para enterarse.

   El de noche no es el de día un poco más claro: el de día se calculó contra
   una página blanca y sobre la negra dos de los cuatro desaparecen —el negro
   del SLS queda a 1,01:1 del fondo, o sea el mismo color—. El comentario
   largo, con los números, está en esquema.sql, que es donde viven. */
.app{--rail:var(--rail-claro,#102b3d)}
body.dark .app{--rail:var(--rail-oscuro,#1D4D6D)}
.rail{background:var(--rail);transition:background .25s}
.rail button{color:#fff;opacity:.72}
.rail button:hover{background:#ffffff1f;opacity:1}
.rail button.active{background:#ffffff26;opacity:1;box-shadow:inset 3px 0 #ffffffcc}
.rail .mark{background:#fff;color:#14364a}

/* La marca de arriba, cuando enseña la tecnología. Fondo claro a propósito:
   dos de las tres ilustraciones son casi negras y sobre el raíl teñido de
   negro desaparecerían. De noche el blanco puro es un foco en mitad de una
   pantalla oscura, así que baja a un gris claro: sigue sobrándole contraste
   para que se vea una máquina negra encima (11:1) y deja de deslumbrar. */
.mark-grupo{padding:5px;overflow:hidden;background:#fff}
.mark-grupo img{width:100%;height:100%;object-fit:contain;display:block}
body.dark .rail .mark{background:#dfe6ee;color:#1b3547}

/* --- La marca como selector de tecnología -------------------------------- */
.mark-caja{position:relative;margin-bottom:26px}
.rail .mark{margin:0;border:0;cursor:pointer;transition:transform .12s}
.rail .mark:hover{transform:scale(1.06)}
.mark-menu{
  position:absolute;top:0;left:calc(100% + 12px);z-index:20;min-width:252px;
  background:var(--surface);border:1px solid var(--border);border-radius:11px;
  box-shadow:var(--shadow);padding:7px;display:grid;gap:2px;
}
.mark-opcion{
  width:100%;border:0;background:transparent;justify-content:flex-start;
  gap:11px;padding:9px 10px;font-weight:500;font-size:14px;text-align:left;
}
.mark-opcion:hover{background:var(--hover)}
.mark-opcion.selected{background:var(--blue-soft);color:var(--blue);font-weight:650}
/* El punto es la pista rápida del color que tomará el raíl. El color va en el
   aro y no en el relleno, y eso no es decoración: rellenándolo, la ilustración
   de la Fuse —negra— caía sobre el negro del SLS y el punto quedaba vacío.
   La máquina se apoya en una placa clara y el color se ve igual alrededor. */
.mark-punto{
  width:34px;height:34px;flex:none;border-radius:9px;background:#eef2f6;
  display:grid;place-content:center;overflow:hidden;padding:4px;
  box-shadow:inset 0 0 0 2px var(--punto-claro,transparent);
}
body.dark .mark-punto{
  background:#dfe6ee;
  box-shadow:inset 0 0 0 2px var(--punto-oscuro,var(--punto-claro,transparent));
}
.mark-punto img{width:100%;height:100%;object-fit:contain;display:block}
.mark-punto svg{width:18px;height:18px;color:var(--muted)}
.mark-aviso{
  margin-left:auto;min-width:21px;height:21px;padding:0 6px;border-radius:11px;
  background:#e27966;color:#fff;font-size:11px;font-weight:650;
  display:grid;place-content:center;font-variant-numeric:tabular-nums;
}
@media(max-width:600px){.mark-menu{min-width:200px;left:calc(100% + 6px)}}

/* El menú vive DENTRO del raíl en el DOM, así que le caen encima las reglas
   del raíl: botones de 46×46 y texto blanco. Sobre el fondo blanco del menú
   eso es texto invisible dentro de cajas del tamaño de un icono. Se devuelve
   aquí lo que un menú necesita. */
.rail .mark-menu button{
  width:100%;height:auto;min-height:0;color:var(--text);opacity:1;
  border-radius:8px;box-shadow:none;justify-content:flex-start;
}
.rail .mark-menu button:hover{background:var(--hover);transform:none}
.rail .mark-menu button.selected{background:var(--blue-soft);color:var(--blue)}
.rail .mark-menu button svg{width:18px;height:18px}

/* --- Las máquinas, de noche -------------------------------------------- */
/* Dos de las tres ilustraciones son prácticamente negras: la Fuse mide 0,046
   de luminancia y la Bambu Lab 0,024, contra los 0,018 de la tarjeta oscura.
   Es decir, 1,1:1 — sobre la tarjeta no están, y lo primero que se pierde es
   el contorno negro que las dibuja.

   La solución no es una caja clara detrás (un cuadrado blanco de 96 px en una
   pantalla oscura es un foco), sino un charco de luz: un degradado radial que
   se apaga antes del borde. La máquina se apoya en algo, la tarjeta sigue
   siendo oscura y no aparece ninguna arista nueva. De día no hace falta, y por
   eso esto solo existe en modo noche. */
body.dark .grupo-img{
  background:radial-gradient(circle at 50% 50%,
    #dae3ec 0 46%, rgb(218 227 236 / .6) 62%, rgb(218 227 236 / 0) 80%);
}

/* --- La búsqueda manda sobre la lente ----------------------------------- */
/* Mismo aspecto que la lente de tecnología, a propósito: las dos dicen "hay
   algo puesto que estrecha lo que ves, y se quita con la ×". En neutro y no en
   azul de marca porque no es una tecnología, es un texto que has escrito. */
.lente-busqueda{background:var(--hover);color:var(--text);border:1px solid var(--border)}
.lente-busqueda svg{width:15px;color:var(--muted)}

/* --- Las máquinas, con su cara ------------------------------------------ */
/* Un técnico reconoce una Form 4 de un vistazo; leyendo "Form 4" tiene que
   pararse a leer. Las fotos son las de la tienda, recortadas y unificadas
   sobre blanco, y van por FAMILIA: la H2C, la H2D y la H2S son la misma
   máquina a ojo, así que una foto más el nombre debajo ya distingue.

   El fondo blanco se queda blanco también de noche, igual que la placa de las
   ilustraciones del raíl: las máquinas son negras o gris oscuro y sobre la
   tarjeta oscura desaparecerían. */
.machine-symbol img{
  width:64px;height:64px;object-fit:contain;border-radius:7px;
  background:#fff;padding:3px;flex:none;
}
/* En la vista de Máquinas la foto manda, así que ocupa lo que ocupaba el
   avatar pero en grande. */
.maquina-foto{
  width:88px;height:88px;border-radius:10px;background:#fff;
  border:1px solid var(--border);display:grid;place-content:center;padding:5px;
}
.maquina-foto img{width:100%;height:100%;object-fit:contain;display:block}
.maquina-foto svg{width:34px;height:34px;color:var(--muted)}
/* Y en la fila de la lista, del tamaño del texto: ayuda a repasar sin robar
   sitio al asunto, que es lo que de verdad se lee. */
.row-maquina{display:inline-flex;align-items:center;gap:6px}
.row-maquina img{
  width:22px;height:22px;object-fit:contain;border-radius:4px;
  background:#fff;padding:1px;flex:none;
}

/* --- Lo que ha adivinado el programa ------------------------------------ */
/* Una máquina propuesta por la detección se enseña donde se enseña la
   confirmada —si se escondiera no serviría de nada—, pero tiene que
   distinguirse SIN leer. De ahí el borde discontinuo: dice "esto está a
   medias" en el mismo idioma que un campo de formulario sin rellenar, y no
   depende del color, que es lo primero que se pierde en una pantalla mala o
   para quien no distingue el rojo del verde. */
.context-card.sin-confirmar{
  border-style:dashed;
  border-color:#b9c6d4;
}
body.dark .context-card.sin-confirmar{border-color:#4a5e72}
.marca-propuesta{
  display:inline-block;font-size:11px;font-weight:650;letter-spacing:.2px;
  color:#8a6414;background:#fff4dc;border-radius:4px;padding:3px 7px;margin-right:6px;
}
body.dark .marca-propuesta{color:#f0d28a;background:#3a3120}
.propuesta-porque{line-height:1.7}
.context-card .primary.ancho{width:100%;margin-top:4px}
.elegir-maquina{margin-top:16px;padding-top:14px;border-top:1px solid var(--border);margin-bottom:0}
/* En la fila de la lista no cabe una etiqueta, así que la marca es un punto
   del mismo ámbar y el texto va en cursiva. El title lo explica al pasar por
   encima, y la ficha del ticket lo dice con todas las letras. */
.fila-propuesta{font-style:italic}
.fila-propuesta:after{
  content:'';display:inline-block;width:5px;height:5px;border-radius:50%;
  background:#c79216;margin-left:5px;vertical-align:middle;
}
.cita{margin-top:12px}.cita summary{cursor:pointer;color:var(--muted);font-size:12px;font-weight:550;display:inline-block;padding:3px 8px;border:1px solid var(--border);border-radius:5px;list-style:none}.cita summary::-webkit-details-marker{display:none}.cita summary:hover{background:var(--hover)}.cita[open] summary{margin-bottom:4px}.cita .message-body{color:var(--muted);font-size:14px;border-left:3px solid var(--border);padding:4px 0 4px 14px;margin-top:8px}

/* --- Aviso sobre un mensaje concreto (28/09) ----------------------------- */
/* Remitente sin verificar, o un correo que apuntaba al ticket de otro
   cliente. Misma chapa ámbar que «Sin confirmar»: las dos dicen "esto no está
   comprobado", y dos colores para lo mismo obligarían a aprender dos. */
.aviso-mensaje{margin:10px 0 0;line-height:1.7;font-size:13px}