/* ==========================================================================
   estilo.css — Oscuro, siempre. No hay tema claro ni toggle.

   La paleta NO es inventada: son los mismos valores del tema oscuro de
   play.dinaup.com (`wwwroot/css/var.css`, bloque [data-bs-theme="dark"]), que a
   su vez es la paleta gris de Radzen. Los nombres de aquí son semánticos
   —fondo, panel, texto— pero los colores son literalmente los suyos, para que
   esto y play se vean como la misma casa.

     fondo    #1e1e1e   base-900, el --bs-body-bg de play
     panel    #252525   base-800, donde se posan las cards
     panel-2  #2d2d2d   base-700 = --play-fondo-sutil
     panel-3  #3c3c3c   base-600 = --play-fondo-marcado
     borde    #3c3c3c   --bs-border-color
     texto    #d4d4d4 / #b3b3b3 / #949494   base-100 / 200 / 300

   El color lo lleva SOLO el semáforo. Todo lo demás es gris, así que cuando
   algo está rojo es lo único rojo que hay en pantalla.
   ========================================================================== */

:root {
    --fondo: #1e1e1e;
    --panel: #252525;
    --panel-2: #2d2d2d;
    --panel-3: #3c3c3c;
    --borde: #3c3c3c;
    --borde-2: #4d4d4d;

    --texto: #d4d4d4;
    --texto-2: #b3b3b3;
    --texto-3: #949494;

    --acento: #5ba0f2;
    --acento-fondo: rgba(91, 160, 242, .18);

    --ok: #66bb6a;
    --ok-fondo: rgba(102, 187, 106, .18);
    --ok-flojo: rgba(102, 187, 106, .42);   /* el heredado: verde, a media luz */
    --mal: #f87171;
    --mal-fondo: rgba(248, 113, 113, .18);
    --aviso: #ffa726;
    --aviso-fondo: rgba(255, 167, 38, .18);
    --info: #4dabf5;
    --info-fondo: rgba(77, 171, 245, .18);

    --radio: .375rem;                        /* --bs-border-radius de play */
    --tipo: Roboto, system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    --mono: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
    background: var(--fondo); color: var(--texto);
    font: 14px/1.5 var(--tipo);
    -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
::selection { background: var(--acento-fondo); }

::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #4d4d4d; border-radius: var(--radio); border: 3px solid var(--fondo); }

.msr {
    font-family: "Material Symbols Rounded"; font-weight: normal; font-style: normal;
    font-size: 18px; line-height: 1; letter-spacing: normal; text-transform: none;
    display: inline-block; white-space: nowrap; direction: ltr; vertical-align: -3px;
    font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 20;
}

.envoltura { max-width: 1480px; margin: 0 auto; padding: 0 22px; }

/* ───────────────────────────────────────────────────────── cabecera ──── */

.cab {
    display: flex; align-items: center; gap: 12px;
    padding: 0 22px; height: 54px;
    background: var(--panel); border-bottom: 1px solid var(--borde);
    position: sticky; top: 0; z-index: 20;
}
.cab-marca { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.cab-marca b { font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.cab-marca span { color: var(--texto-3); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cab-hueco { flex: 1; }

/* ── chapas: pequeñas, mayúsculas, con fondo tenue ── */
.chapa {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
    padding: 3px 8px; border-radius: 999px;
    background: var(--panel-3); color: var(--texto-2); white-space: nowrap;
}
.chapa-ok    { background: var(--ok-fondo);     color: var(--ok); }
.chapa-mal   { background: var(--mal-fondo);    color: var(--mal); }
.chapa-aviso { background: var(--aviso-fondo);  color: var(--aviso); }
.chapa-info  { background: var(--info-fondo);   color: var(--info); }
.chapa-ia    { background: var(--acento-fondo); color: var(--acento); }

/* ── botones ── */
.boton {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 13px; font-weight: 500; line-height: 1;
    padding: 8px 12px; border-radius: var(--radio); cursor: pointer;
    border: 1px solid transparent; background: transparent; color: var(--acento);
    transition: background .12s, border-color .12s;
}
.boton:hover { background: var(--acento-fondo); }
.boton-solido { background: var(--acento); color: #1e1e1e; }
.boton-solido:hover { background: #8bbcf6; }
.boton-borde { border-color: var(--borde-2); color: var(--texto-2); }
.boton-borde:hover { border-color: var(--texto-3); color: var(--texto); background: transparent; }
.boton-peligro { color: var(--mal); }
.boton-peligro:hover { background: var(--mal-fondo); }
.boton:disabled { opacity: .4; cursor: default; }
.boton .msr { font-size: 17px; }

/* ─────────────────────────────────────────────────────────── portada ──── */

.portada-titulo { padding: 34px 0 6px; font-size: 22px; font-weight: 600; letter-spacing: -.02em; }
.portada-sub { color: var(--texto-3); margin: 0 0 22px; }

.rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.tarjeta {
    background: var(--panel); border: 1px solid var(--borde);
    border-radius: var(--radio); padding: 18px 18px 16px; display: block;
    transition: border-color .12s, background .12s;
}
.tarjeta:hover { border-color: var(--borde-2); background: var(--panel-2); }
.tarjeta h3 { margin: 0 0 4px; font-size: 15px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.tarjeta h3 .msr { color: var(--acento); }
.tarjeta p { margin: 0 0 16px; color: var(--texto-3); font-size: 13px; }
.tarjeta-pie { display: flex; gap: 14px; font-size: 12px; color: var(--texto-3); font-variant-numeric: tabular-nums; }
.tarjeta-pie b { color: var(--texto-2); font-weight: 600; }

/* ─────────────────────────────────────────────────── el tablero: 2 col ── */

.tablero { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 18px; align-items: start; padding: 18px 0 70px; }
@media (max-width: 920px) { .tablero { grid-template-columns: 1fr; } }

.panel { background: var(--panel); border: 1px solid var(--borde); border-radius: var(--radio); overflow: hidden; }
.panel-cab { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--borde); }
.panel-cab h2 { margin: 0; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--texto-3); }

/* ── canal: dos vidas distintas, no un filtro ── */
.canales { display: flex; gap: 3px; padding: 10px 10px 0; }
.canal {
    flex: 1; text-align: center; font-size: 12px; font-weight: 600; letter-spacing: .02em;
    padding: 7px 0; border-radius: var(--radio); cursor: pointer; border: 1px solid transparent;
    color: var(--texto-3); background: var(--panel-2);
}
.canal:hover { color: var(--texto-2); }
.canal.activo { background: var(--panel-3); border-color: var(--borde-2); color: var(--texto); }

/* ── la lista de versiones: cada fila es un marcador ── */
.versiones { padding: 8px; display: flex; flex-direction: column; gap: 3px; max-height: calc(100dvh - 190px); overflow: auto; }
.version {
    display: block; width: 100%; text-align: left; cursor: pointer;
    border: 1px solid transparent; background: transparent;
    border-radius: var(--radio); padding: 10px 12px 11px 14px; position: relative;
    transition: background .12s, border-color .12s;
}
.version::before {
    content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 2px;
    background: var(--borde-2);
}
.version.s-bien::before   { background: var(--ok); }
.version.s-medias::before { background: var(--ok-flojo); }
.version.s-mal::before    { background: var(--mal); }
.version:hover { background: var(--panel-2); }
.version.activa { background: var(--panel-3); border-color: var(--borde-2); }

.version-alto { display: flex; align-items: baseline; gap: 8px; }
.version-etiqueta { font-family: var(--mono); font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.version-cuenta { margin-left: auto; font-family: var(--mono); font-size: 12px; color: var(--texto-2); }
.version-cuenta b { color: var(--texto); font-weight: 600; }

/* La barra lleva DOS verdes: el lleno es lo probado en esta build; el de media
   luz, lo heredado. Con un solo verde, un tablero heredado entero parecería
   recién probado — la mentira que este tablero existe para no contar. */
.barra { height: 5px; border-radius: 3px; background: var(--panel-3); margin-top: 8px; display: flex; overflow: hidden; gap: 1px; }
.barra i { display: block; height: 100%; }
.barra .firme    { background: var(--ok); }
.barra .heredado { background: var(--ok-flojo); }
.barra .fallo    { background: var(--mal); }
.barra .bloq     { background: var(--aviso); opacity: .7; }

.version-pie { margin-top: 6px; font-size: 11.5px; color: var(--texto-3); display: flex; gap: 10px; flex-wrap: wrap; }
.version-pie .m { color: var(--mal); }
.version-pie .c { color: var(--aviso); }

/* ────────────────────────────────────────────────── cuerpo del detalle ── */

.hero { padding: 22px 22px 0; display: flex; align-items: flex-start; gap: 18px; flex-wrap: wrap; }
.hero-num { display: flex; flex-direction: column; gap: 4px; min-width: 240px; }
.hero-num h1 { margin: 0; font-family: var(--mono); font-size: 40px; font-weight: 600; letter-spacing: -.03em; line-height: 1; }
.hero-num .notas { color: var(--texto-3); font-size: 13px; }
.hero-num .fila { display: flex; align-items: center; gap: 8px; margin-top: 2px; }
.hero-acciones { margin-left: auto; display: flex; gap: 6px; align-items: center; }

/* los cuatro números que importan, en losetas */
.losetas { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; padding: 18px 22px 0; }
.loseta { background: var(--panel-2); border: 1px solid var(--borde); border-radius: var(--radio); padding: 12px 14px; }
.loseta .n { font-family: var(--mono); font-size: 24px; font-weight: 600; line-height: 1; letter-spacing: -.02em; }
.loseta .t { margin-top: 5px; font-size: 12px; color: var(--texto-3); }
.loseta .n small { font-size: 13px; color: var(--texto-3); font-weight: 500; }
.loseta.ok .n { color: var(--ok); }
.loseta.mal .n { color: var(--mal); }
.loseta.aviso .n { color: var(--aviso); }

.barra-grande { padding: 16px 22px 0; }
.barra-grande .barra { height: 10px; margin: 0; border-radius: 5px; }
.leyenda { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 10px; font-size: 12px; color: var(--texto-3); }
.leyenda span { display: inline-flex; align-items: center; gap: 6px; }
.leyenda i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.leyenda b { color: var(--texto-2); font-weight: 600; font-variant-numeric: tabular-nums; }

/* Cada pestaña lleva su propio marcador: la idea es saber dónde está el
   problema leyendo la fila, sin abrir ninguna. */
.pestanas { display: flex; gap: 2px; padding: 20px 14px 0; border-bottom: 1px solid var(--borde); overflow-x: auto; }
.pestana {
    display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
    font-size: 13px; font-weight: 500; cursor: pointer;
    padding: 9px 12px; border: 0; background: transparent; color: var(--texto-3);
    border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.pestana:hover { color: var(--texto-2); }
.pestana.activa { color: var(--texto); border-bottom-color: var(--acento); }
.pestana .msr { font-size: 16px; }

.pes-cuenta {
    font-size: 11.5px; font-weight: 600; font-variant-numeric: tabular-nums;
    padding: 2px 7px; border-radius: 999px;
    background: var(--panel-3); color: var(--texto-2);
}
.pes-cuenta.s-bien   { background: var(--ok-fondo);  color: var(--ok); }
.pes-cuenta.s-mal    { background: var(--mal-fondo); color: var(--mal); }
.pes-cuenta.s-medias { background: var(--panel-3);   color: var(--texto-2); }

/* ── filas de test ── */
.tests { display: flex; flex-direction: column; }
.grupo {
    padding: 18px 22px 6px; font-size: 11px; font-weight: 600;
    text-transform: uppercase; letter-spacing: .08em; color: var(--texto-3);
}
.test {
    display: grid; grid-template-columns: 138px minmax(0, 1fr) auto; gap: 14px; align-items: start;
    padding: 11px 22px; border: 0; border-top: 1px solid var(--borde);
    cursor: pointer; background: transparent; text-align: left; width: 100%;
    transition: background .1s;
}
.test:hover { background: var(--panel-2); }
.test-cuerpo { min-width: 0; }
.test-titulo { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.test-titulo b { font-weight: 500; color: var(--texto); }
.test-ref { font-family: var(--mono); font-size: 11.5px; color: var(--texto-3); }
.test-obs {
    font-size: 12.5px; color: var(--texto-3); margin-top: 3px;
    overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.test.con-fallo .test-obs { color: var(--texto-2); }
.test-lado { display: flex; align-items: center; gap: 10px; color: var(--texto-3); font-size: 12px; padding-top: 2px; }
.test-lado .msr { font-size: 16px; }

/* el estado: color + FORMA. Lleno = probado aquí, hueco = heredado,
   anillo = pendiente. Se distingue de lejos aunque no se lea la palabra. */
.estado { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 500; white-space: nowrap; padding-top: 2px; }
.estado .punto { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.e-ok          { color: var(--ok); }        .e-ok .punto          { background: var(--ok); }
.e-heredado    { color: var(--ok); opacity: .7; } .e-heredado .punto { background: transparent; border: 2px solid var(--ok); }
.e-error       { color: var(--mal); font-weight: 600; } .e-error .punto { background: var(--mal); box-shadow: 0 0 0 3px var(--mal-fondo); }
.e-bloqueado   { color: var(--aviso); }     .e-bloqueado .punto   { background: var(--aviso); }
.e-en_curso    { color: var(--info); }      .e-en_curso .punto    { background: var(--info); animation: late 1.4s ease-in-out infinite; }
.e-sin_probar,
.e-sin_disenio { color: var(--texto-3); }
.e-sin_probar .punto, .e-sin_disenio .punto { background: transparent; border: 2px solid var(--borde-2); }
@keyframes late { 0%,100% { opacity: 1 } 50% { opacity: .35 } }

.fuera { padding: 14px 22px 22px; color: var(--texto-3); font-size: 12.5px; border-top: 1px solid var(--borde); }
.fuera summary { cursor: pointer; color: var(--texto-2); }
.fuera ul { margin: 8px 0 0; padding-left: 18px; }
.fuera b { font-family: var(--mono); font-weight: 500; color: var(--texto-2); }

.vacio { padding: 40px 22px; text-align: center; color: var(--texto-3); }

/* ──────────────────────────────────────────────────────── conversación ── */

.hilos { display: flex; flex-direction: column; gap: 12px; padding: 18px 22px 24px; }
.hilo { border: 1px solid var(--borde); border-radius: var(--radio); overflow: hidden; background: var(--panel-2); }
.hilo.resuelto { opacity: .55; }
.hilo-cab { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-bottom: 1px solid var(--borde); }
.hilo-cab b { font-weight: 500; font-size: 14px; }
.hilo-cab .cuenta { margin-left: auto; font-size: 12px; color: var(--texto-3); white-space: nowrap; }

.mensajes { display: flex; flex-direction: column; gap: 14px; padding: 16px 14px; }
.msg { display: flex; gap: 10px; }
.msg .cara {
    width: 30px; height: 30px; border-radius: 50%; flex: none;
    display: grid; place-items: center; font-size: 12px; font-weight: 700;
    background: var(--panel-3); color: var(--texto-2); border: 1px solid var(--borde-2);
}
.msg.ia .cara { background: var(--acento-fondo); color: var(--acento); border-color: transparent; }
.msg-cuerpo { min-width: 0; flex: 1; }
.msg-quien { font-size: 12px; color: var(--texto-3); display: flex; gap: 8px; align-items: baseline; }
.msg-quien b { color: var(--texto); font-size: 13px; font-weight: 600; }
.msg.ia .msg-quien b { color: var(--acento); }
.msg-texto {
    white-space: pre-wrap; word-break: break-word; margin-top: 4px; font-size: 13.5px; color: var(--texto);
    background: var(--panel-3); border-radius: 0 var(--radio) var(--radio) var(--radio); padding: 9px 12px; display: inline-block; max-width: 100%;
}
.msg.ia .msg-texto { background: rgba(124,156,255,.10); }

.responder { display: flex; gap: 8px; padding: 10px 14px 12px; border-top: 1px solid var(--borde); }
.responder textarea {
    flex: 1; resize: vertical; min-height: 40px; font: inherit; font-size: 13.5px; color: var(--texto);
    padding: 9px 11px; border: 1px solid var(--borde-2); border-radius: var(--radio); background: var(--panel);
}
.responder textarea:focus { outline: none; border-color: var(--acento); }

/* ─────────────────────────────────────────────────────────── ventanas ─── */

.velo { position: fixed; inset: 0; background: rgba(0,0,0,.55); display: grid; place-items: center; padding: 20px; z-index: 40; backdrop-filter: blur(3px); }
.ventana {
    background: var(--panel); border: 1px solid var(--borde-2); border-radius: var(--radio);
    width: min(96%, 880px); max-height: 92dvh; display: flex; flex-direction: column; overflow: hidden;
    box-shadow: 0 11px 15px -7px rgba(0,0,0,.5), 0 24px 38px 3px rgba(0,0,0,.34);
}
.ventana.ancha { width: min(96%, 1080px); }
.ventana-cab { display: flex; align-items: center; gap: 10px; padding: 14px 20px; border-bottom: 1px solid var(--borde); }
.ventana-cab h2 { margin: 0; font-size: 16px; font-weight: 600; display: flex; align-items: center; gap: 10px; }
.ventana-cuerpo { overflow: auto; }
.ventana-pie { display: flex; gap: 8px; align-items: center; padding: 12px 20px; border-top: 1px solid var(--borde); }

.bloque { padding: 18px 20px; border-bottom: 1px solid var(--borde); }
.bloque:last-child { border-bottom: 0; }
.bloque h3 { margin: 0 0 10px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--texto-3); }
.pasos {
    white-space: pre-wrap; background: var(--panel-2); border: 1px solid var(--borde);
    border-radius: var(--radio); padding: 12px 14px; font-size: 13.5px; max-height: 34dvh; overflow: auto; line-height: 1.6;
}

.linea-historial { display: flex; gap: 12px; align-items: baseline; padding: 8px 0; border-bottom: 1px solid var(--borde); font-size: 13px; }
.linea-historial:last-child { border-bottom: 0; }
.linea-historial .v { font-family: var(--mono); font-weight: 600; min-width: 92px; }
.linea-historial .quien { margin-left: auto; color: var(--texto-3); font-size: 12px; white-space: nowrap; }

.campos { display: flex; flex-wrap: wrap; gap: 10px; }
.campo { display: flex; flex-direction: column; gap: 5px; flex: 1; min-width: 160px; }
.campo label { font-size: 11.5px; color: var(--texto-3); font-weight: 500; }
.campo input, .campo select, .campo textarea {
    font: inherit; font-size: 13.5px; color: var(--texto); padding: 9px 11px;
    border: 1px solid var(--borde-2); border-radius: var(--radio); background: var(--panel-2);
}
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: none; border-color: var(--acento); }
.campo.obli input, .campo.obli textarea { border-color: var(--mal); }
.campo select option { background: var(--panel-2); }

.acciones-marcar { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px; }

.fallo-fila { padding: 14px 20px; border-bottom: 1px solid var(--borde); }
.fallo-fila .t { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.fallo-fila .t b { font-weight: 500; }
.fallo-fila .o { margin-top: 6px; font-size: 13px; color: var(--texto-2); line-height: 1.55; }
.pista { padding: 14px 20px 0; color: var(--texto-3); font-size: 13px; }


/* ── el texto del test, editable ────────────────────────────────────────── */

.pasos-edita {
    width: 100%; font: inherit; font-size: 13.5px; line-height: 1.6; color: var(--texto);
    background: var(--panel-2); border: 1px solid var(--borde); border-radius: var(--radio);
    padding: 12px 14px; resize: vertical;
}
.pasos-edita:focus { outline: none; border-color: var(--acento); }
.pie-nota { margin: 8px 0 0; font-size: 12px; color: var(--texto-3); }

/* ── resultados de ejecuciones: los reportes y la conversación, juntos ──── */
/* Un fallo y la discusión de ese fallo son la misma historia. Tenerlos en dos
   listas obligaba a saltar de una a otra para entender qué pasó en una build. */

.crono { display: flex; flex-direction: column; gap: 12px; }

.reporte {
    border: 1px solid var(--borde); border-left: 3px solid var(--borde-2);
    border-radius: var(--radio); background: var(--panel-2); padding: 10px 14px;
}
.reporte.r-ok        { border-left-color: var(--ok); }
.reporte.r-error     { border-left-color: var(--mal); }
.reporte.r-bloqueado { border-left-color: var(--aviso); }
.reporte.r-inicio    { border-left-color: var(--info); }

.reporte-cab { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.reporte-cab .v { font-family: var(--mono); font-weight: 600; font-size: 13px; }
.reporte-cab .paso { font-size: 12px; color: var(--texto-3); }
.reporte-cab .quien {
    margin-left: auto; font-size: 12px; color: var(--texto-3);
    display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;
}
.reporte-texto { margin-top: 7px; font-size: 13.5px; line-height: 1.55; white-space: pre-wrap; word-break: break-word; }

/* Dentro de la cronología los hilos van sin margen propio: los separa el gap. */
.crono .hilo { background: var(--panel-2); }


/* ── archivadas: dejan de molestar, no dejan de existir ─────────────────── */

.ver-archivadas {
    display: flex; align-items: center; gap: 7px; width: 100%;
    padding: 10px 14px; border: 0; border-top: 1px solid var(--borde);
    background: transparent; color: var(--texto-3); font-size: 12.5px; cursor: pointer;
}
.ver-archivadas:hover { color: var(--texto-2); background: var(--panel-2); }
.version.archivada .version-etiqueta { color: var(--texto-3); }
.version.archivada::before { opacity: .45; }

/* ── cómo conecta el agente ─────────────────────────────────────────────── */

.conecta { display: flex; flex-direction: column; gap: 10px; }
.conecta-fila { display: flex; align-items: center; gap: 10px; }
.conecta-que { font-size: 12px; color: var(--texto-3); min-width: 200px; }
.conecta-fila code {
    flex: 1; min-width: 0; font-family: var(--mono); font-size: 12.5px;
    background: var(--panel-2); border: 1px solid var(--borde); border-radius: var(--radio);
    padding: 8px 11px; overflow-x: auto; white-space: nowrap; color: var(--texto);
}
.conecta details { margin-top: 2px; }
.conecta summary { cursor: pointer; color: var(--texto-3); font-size: 12.5px; }
.conecta-json {
    margin: 8px 0; font-family: var(--mono); font-size: 12.5px; line-height: 1.5;
    background: var(--panel-2); border: 1px solid var(--borde); border-radius: var(--radio);
    padding: 12px 14px; overflow-x: auto; color: var(--texto);
}
@media (max-width: 760px) {
    .conecta-fila { flex-wrap: wrap; }
    .conecta-que { min-width: 100%; }
}