/* Una sola hoja, sin nada de fuera: la consola tiene que abrir aunque no haya red mas que la del
   propio servicio. La direccion visual toma el aire, la geometria y el acento sobrio de Ploybot. */

:root {
    --fondo: #ffffff;
    --fondo-suave: #f5f7f7;
    --panel: #fafbfb;
    --panel-alto: #eef2f3;
    --borde: #c8d2d5;
    --borde-fuerte: #9dadb2;
    --texto: #181516;
    --tenue: #66757a;
    --acento: #8f150e;
    --acento-suave: #f5e9e8;
    --si: #277451;
    --no: #a52a23;
    --alerta: #9a6918;
    --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    --sombra: 0 18px 45px rgba(54, 70, 75, .09);
}

* { box-sizing: border-box; }

/* El atributo hidden lo pisa cualquier regla con display: sin esto, el tablero y la barra de sesion
   se ven antes de entrar. */
[hidden] { display: none !important; }

html { color-scheme: light; }

body {
    margin: 0;
    min-width: 20rem;
    background: var(--fondo);
    color: var(--texto);
    font: 15px/1.55 Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    -webkit-font-smoothing: antialiased;
}

button, input, select, textarea { accent-color: var(--acento); }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible,
[role="button"]:focus-visible, summary:focus-visible {
    outline: 2px solid var(--acento);
    outline-offset: 3px;
}

code { font-family: var(--mono); }
.simbolos { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---- barra ---- */

.barra {
    min-height: 5.25rem;
    display: grid;
    grid-template-columns: minmax(14rem, 1fr) auto minmax(14rem, 1fr);
    align-items: center;
    gap: 1.5rem;
    padding: .85rem clamp(1.25rem, 4vw, 4.5rem);
    border-bottom: 1px solid #e4e9ea;
    background: rgba(255, 255, 255, .96);
    position: relative;
    z-index: 5;
}

.barra::after {
    content: "";
    position: absolute;
    left: clamp(1.25rem, 4vw, 4.5rem);
    bottom: -1px;
    width: 3rem;
    height: 2px;
    background: var(--acento);
}

.barra > .marca { display: flex; align-items: center; gap: .75rem; min-width: 0; }
.marca-icono { width: 2.55rem; height: 2.55rem; color: #85979c; flex: none; }
.marca-texto { display: flex; flex-direction: column; line-height: 1.05; }
.marca-texto strong {
    font-size: .92rem;
    letter-spacing: .095em;
    text-transform: uppercase;
    white-space: nowrap;
}
.marca-texto small {
    color: var(--tenue);
    font-size: .64rem;
    letter-spacing: .15em;
    margin-top: .35rem;
    text-transform: uppercase;
}

.pestanas { display: flex; align-self: stretch; gap: 2rem; }
.pestana {
    position: relative;
    background: none;
    border: 0;
    color: #4c4648;
    cursor: pointer;
    font: inherit;
    font-size: .78rem;
    letter-spacing: .075em;
    padding: 0 .15rem;
    text-transform: uppercase;
}
.pestana::after {
    content: "";
    position: absolute;
    height: 2px;
    left: 50%;
    right: 50%;
    bottom: -.85rem;
    background: var(--acento);
    transition: left .18s ease, right .18s ease;
}
.pestana:hover, .pestana[aria-current="true"] { color: var(--texto); }
.pestana:hover::after, .pestana[aria-current="true"]::after { left: 0; right: 0; }
.pestana-cuenta {
    display: inline-block;
    min-width: 1.15rem;
    margin-left: .35rem;
    padding: 0 .28rem;
    border-radius: 999px;
    background: var(--acento-suave);
    color: var(--acento);
    font-size: .68rem;
    letter-spacing: 0;
    line-height: 1.35;
    text-transform: none;
    vertical-align: text-top;
}

/* Idioma y sesión comparten la tercera columna de la barra: un cuarto hijo descuadraría la rejilla. */
.barra-derecha { justify-self: end; display: flex; align-items: center; gap: 1rem; min-width: 0; }
.idiomas { display: flex; gap: .6rem; font-size: .74rem; }
.idiomas .idioma { color: var(--tenue); padding: 0; }
.idiomas .idioma[aria-pressed="true"] { color: var(--texto); font-weight: 600; text-decoration: none; }
.barra-aceptacion .idiomas { margin-left: auto; margin-right: 1rem; }

.sesion {
    justify-self: end;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .85rem;
    font-size: .78rem;
}
.quien {
    cursor: pointer;
    max-width: 14rem;
    overflow: hidden;
    color: var(--tenue);
    font-family: var(--mono);
    text-overflow: ellipsis;
    white-space: nowrap;
}
.menu-sesion { position: relative; }
.menu-sesion > summary { list-style: none; }
.menu-sesion > summary::-webkit-details-marker { display: none; }
.menu-sesion > summary::after { content: "v"; color: var(--acento); margin-left: .45rem; }
.menu-sesion-panel {
    position: absolute;
    right: 0;
    top: calc(100% + .75rem);
    width: 12.5rem;
    display: grid;
    gap: .8rem;
    padding: .9rem 1rem;
    background: #fff;
    border: 1px solid var(--borde);
    box-shadow: var(--sombra);
}
.menu-sesion-panel .enlace { text-align: left; }

/* El enganche no dice que todo va bien, sino que los avisos estan llegando en vivo. */
.enganche {
    width: .48rem;
    height: .48rem;
    border-radius: 50%;
    background: var(--borde-fuerte);
    flex: none;
}
.enganche.vivo { background: var(--si); box-shadow: 0 0 0 4px color-mix(in srgb, var(--si) 14%, transparent); }
.enganche.roto { background: var(--alerta); box-shadow: 0 0 0 4px color-mix(in srgb, var(--alerta) 14%, transparent); }

.enlace {
    background: none;
    border: 0;
    color: var(--acento);
    cursor: pointer;
    font: inherit;
    padding: 0;
}
.enlace:hover { text-decoration: underline; text-underline-offset: .2em; }

/* ---- puerta ---- */

.entrada {
    width: min(72rem, calc(100% - 2.5rem));
    min-height: calc(100vh - 5.25rem);
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(18rem, .82fr) minmax(20rem, 1.18fr);
    grid-auto-rows: min-content;
    align-content: center;
    column-gap: clamp(2rem, 8vw, 8rem);
    padding: 4rem 0;
}
.entrada > :not(.geometria) { grid-column: 1; min-width: 0; }
.entrada .sobrelinea {
    color: var(--acento);
    font-size: .67rem;
    font-weight: 650;
    letter-spacing: .18em;
    margin: 0 0 1rem;
    text-transform: uppercase;
}
.entrada h1 {
    font-size: clamp(2.25rem, 4.3vw, 4.2rem);
    font-weight: 650;
    letter-spacing: -.045em;
    line-height: .98;
    margin: 0 0 1.25rem;
}
.claro { color: #4f5b5f; font-size: 1.05rem; margin: 0 0 2rem; max-width: 35rem; }
.pie { color: var(--tenue); font-size: .79rem; margin: .8rem 0 0; }
.entrada .pie { max-width: 31rem; overflow-wrap: anywhere; }
.entrada > div, .entrada > form, .entrada > .error { margin-right: auto; }

.geometria {
    grid-column: 2;
    grid-row: 1 / span 12;
    align-self: center;
    width: min(100%, 37rem);
    max-height: 32rem;
    justify-self: center;
    filter: drop-shadow(0 22px 26px rgba(83, 100, 105, .14));
}

.entrada label { display: block; color: #465256; font-size: .78rem; letter-spacing: .04em; margin-bottom: .4rem; }
.entrada input {
    width: min(100%, 26rem);
    padding: .76rem .85rem;
    margin-bottom: .85rem;
    background: #fff;
    border: 1px solid var(--borde);
    border-radius: 2px;
    color: var(--texto);
    font-family: var(--mono);
}

.como-funciona {
    display: grid;
    gap: .7rem;
    list-style: none;
    margin: -.35rem 0 2rem;
    padding: 0;
}
.como-funciona li { display: grid; grid-template-columns: 1.7rem 1fr; gap: .65rem; align-items: start; }
.como-funciona li > span {
    width: 1.55rem;
    height: 1.55rem;
    display: grid;
    place-items: center;
    border: 1px solid var(--borde-fuerte);
    border-radius: 50%;
    color: var(--acento);
    font: 650 .7rem/1 var(--mono);
}
.como-funciona p { color: #4f5b5f; font-size: .88rem; margin: .05rem 0 0; }
.como-funciona strong { color: var(--texto); }

.principal {
    background: var(--acento);
    border: 1px solid var(--acento);
    border-radius: 2px;
    color: #fff;
    cursor: pointer;
    font: inherit;
    font-size: .78rem;
    font-weight: 650;
    letter-spacing: .075em;
    padding: .72rem 1.55rem;
    text-transform: uppercase;
    transition: background .16s ease, border-color .16s ease, transform .16s ease;
}
.principal:hover { background: #6f0f0a; border-color: #6f0f0a; transform: translateY(-1px); }

/* ---- tablero ---- */

.tablero {
    display: grid;
    grid-template-columns: minmax(17rem, 23rem) minmax(0, 1fr);
    min-height: calc(100vh - 5.25rem);
    background: var(--fondo);
}
.volver-lista { display: none; }

.lista {
    min-width: 0;
    overflow-y: auto;
    padding: 2rem 1.35rem 3rem clamp(1.25rem, 3vw, 3.25rem);
    background: var(--fondo-suave);
    border-right: 1px solid #e0e6e7;
}
.detalle {
    min-width: 0;
    padding: clamp(2rem, 4.2vw, 4rem) clamp(1.5rem, 5vw, 5.5rem) 5rem;
    background:
        linear-gradient(90deg, transparent 0, transparent calc(100% - 1px), #edf0f1 calc(100% - 1px)) 0 0 / min(100%, 76rem) 100% no-repeat,
        var(--fondo);
}

.lista h2 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .75rem;
    color: #536166;
    font-size: .67rem;
    font-weight: 650;
    letter-spacing: .14em;
    margin: 0 0 1rem;
    text-transform: uppercase;
}
.cuenta { color: var(--acento); font-family: var(--mono); }
.lista ul { list-style: none; margin: 0; padding: 0; }

.tarjeta {
    position: relative;
    background: rgba(255, 255, 255, .72);
    border: 1px solid #dbe2e4;
    border-radius: 2px;
    cursor: pointer;
    margin-bottom: .65rem;
    overflow: hidden;
    padding: .9rem 1rem;
    transition: border-color .16s ease, background .16s ease, transform .16s ease, box-shadow .16s ease;
}
.tarjeta::after {
    content: "";
    position: absolute;
    width: .58rem;
    height: .58rem;
    right: .7rem;
    top: .7rem;
    background: var(--borde);
    clip-path: polygon(100% 0, 100% 100%, 0 0);
}
.tarjeta:hover { background: #fff; border-color: var(--borde-fuerte); transform: translateX(2px); }
.tarjeta[aria-current="true"] { background: #fff; border-color: var(--borde-fuerte); box-shadow: 0 8px 22px rgba(60, 75, 80, .08); }
.tarjeta[aria-current="true"]::after { background: var(--acento); }
.tarjeta .que { padding-right: .8rem; font-family: var(--mono); font-size: .86rem; font-weight: 620; }
.tarjeta .quienpide { color: var(--tenue); font-size: .76rem; margin-top: .3rem; }
.tarjeta .cola { display: flex; gap: .38rem; align-items: center; flex-wrap: wrap; margin-top: .62rem; }

/* ---- detalle ---- */

.titular {
    max-width: 64rem;
    margin: 0 0 .35rem;
    font-size: clamp(1.75rem, 3vw, 2.8rem);
    font-weight: 630;
    letter-spacing: -.035em;
    line-height: 1.1;
}
.titular .verbo { font-family: inherit; }
.subtitular {
    color: var(--acento);
    margin: 0 0 .75rem;
    font-size: .68rem;
    font-weight: 650;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.chips { display: flex; flex-wrap: wrap; gap: .42rem; align-items: center; margin: 1rem 0 1.8rem; }
.chip {
    border: 1px solid var(--borde);
    border-radius: 2px;
    color: #4f5d61;
    font-family: var(--mono);
    font-size: .65rem;
    letter-spacing: .055em;
    padding: .22rem .52rem;
    text-transform: uppercase;
    white-space: nowrap;
}
.chip.produccion, .chip.riesgo-high { border-color: color-mix(in srgb, var(--no) 56%, white); color: var(--no); background: color-mix(in srgb, var(--no) 5%, white); }
.chip.riesgo-medium { border-color: color-mix(in srgb, var(--alerta) 58%, white); color: var(--alerta); }
.chip.riesgo-low { border-color: color-mix(in srgb, var(--si) 52%, white); color: var(--si); }
.chip.reloj { color: var(--tenue); }
.chip.reloj.poco { border-color: var(--alerta); color: var(--alerta); }
.chip.caducada { border-color: var(--no); color: var(--no); }
.chip.inferencia { letter-spacing: .04em; }

.filtros-pendientes {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    margin: .2rem 0 .85rem;
}
.filtros-pendientes button[aria-pressed="true"] {
    font-weight: 650;
    color: var(--acento);
}

.bloque {
    max-width: 76rem;
    position: relative;
    background: var(--panel);
    border: 1px solid #dce3e5;
    border-radius: 2px;
    margin-bottom: 1rem;
    padding: 1.05rem 1.2rem;
}
.bloque::before {
    content: "";
    position: absolute;
    width: .7rem;
    height: .7rem;
    right: -1px;
    top: -1px;
    border-top: 1px solid var(--borde-fuerte);
    border-right: 1px solid var(--borde-fuerte);
}
.bloque h3 {
    color: #5a686c;
    font-size: .66rem;
    font-weight: 650;
    letter-spacing: .13em;
    margin: 0 0 .75rem;
    text-transform: uppercase;
}

.campos { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: .38rem 1.2rem; margin: 0; }
.campos dt { color: var(--tenue); font-size: .8rem; }
.campos dd { font-family: var(--mono); font-size: .81rem; margin: 0; word-break: break-all; }
.motivo { font-size: 1rem; margin: 0; }
.resumen-decision .campos { gap: .2rem .85rem; }
.resumen-decision .campos dd { font-family: inherit; font-size: .9rem; }
.razon-decision { border-top: 1px solid var(--borde); margin-top: .85rem; padding-top: .85rem; }
.razon-decision h3 { margin-bottom: .3rem; }
.identificadores-decision { font-size: .8rem; }
.identificadores-decision .campos { margin-top: .6rem; }
.conexion-principal { margin-bottom: .55rem; }
.url-agente { overflow-wrap: anywhere; margin: .45rem 0; }
.conexion-mcp { margin-top: .75rem; }

/* El diff conserva el codigo de color semantico dentro del sistema claro. */
.diff { font-family: var(--mono); font-size: .82rem; margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.diff .fuera { color: var(--no); }
.diff .dentro { color: var(--si); }
.diff .igual { color: var(--tenue); }
.sin-antes { color: var(--tenue); font-size: .78rem; margin: .6rem 0 0; }
/* El «antes» lo declara el agente: se ve distinto de lo que se aprueba. */
.aviso-sesion {
    position: fixed; left: 50%; bottom: 1.25rem; transform: translateX(-50%); z-index: 20;
    display: flex; align-items: center; gap: 1rem; max-width: calc(100% - 2rem);
    padding: .75rem 1rem; background: var(--fondo, #fff); color: var(--texto);
    border: 1px solid var(--acento); box-shadow: 0 6px 24px rgba(0, 0, 0, .12); font-size: .85rem;
}
.antes-declarado { color: var(--texto); border-left: 2px solid var(--acento); padding-left: .6rem; }

.decidir { display: flex; gap: .75rem; flex-wrap: wrap; margin: 1.6rem 0; }
.boton {
    background: #fff;
    border: 1px solid var(--borde-fuerte);
    border-radius: 2px;
    color: var(--texto);
    cursor: pointer;
    font: inherit;
    font-size: .77rem;
    font-weight: 650;
    letter-spacing: .055em;
    padding: .68rem 1.3rem;
    text-transform: uppercase;
    transition: background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
}
.boton:hover:not([disabled]) { border-color: #53656a; transform: translateY(-1px); }
.boton[disabled] { cursor: not-allowed; opacity: .42; }
.boton.principal { background: var(--acento); border-color: var(--acento); color: #fff; }
.rechazar { background: transparent; color: var(--no); border-color: color-mix(in srgb, var(--no) 65%, white); }
.rechazar:not([disabled]):hover { background: color-mix(in srgb, var(--no) 7%, white); border-color: var(--no); }
.aprobar { background: var(--si); border-color: var(--si); color: #fff; }
.aprobar:not([disabled]):hover { background: #1e5f41; border-color: #1e5f41; }

.resuelta { border-left: 2px solid var(--borde); padding: .35rem 0 .35rem 1rem; margin: 1.6rem 0; }
.resuelta.APPROVED { border-left-color: var(--si); }
.resuelta.REJECTED, .resuelta.EXPIRED, .resuelta.FAILED { border-left-color: var(--no); }
.resuelta.EXECUTED { border-left-color: var(--acento); }

.efecto {
    border-left: 3px solid var(--borde);
    margin: 1.6rem 0;
    padding: .55rem 0 .55rem 1rem;
}
.efecto strong { display: block; font-size: 1rem; margin-bottom: .35rem; }
.efecto.esperando { border-left-color: var(--alerta); }
.efecto.hecho { border-left-color: var(--si); }
.efecto.fallo { border-left-color: var(--no); }
.efecto .pie { margin: .45rem 0 0; }

/* ---- evidencia ---- */

.traza { list-style: none; margin: 0; padding: 0; font-family: var(--mono); font-size: .76rem; }
.traza li { border-bottom: 1px solid #e2e7e8; padding: .55rem 0; }
.traza li:last-child { border-bottom: 0; }
.traza .tipo { color: var(--acento); font-weight: 620; }
.traza .cuando { color: var(--tenue); margin-left: .5rem; }
.traza .detalle-evento { color: var(--tenue); display: block; margin-top: .22rem; word-break: break-all; }
.traza .cuerpos-purgados { border-left: 2px solid var(--alerta); padding-left: .75rem; }
.cuerpos-purgados span, .cuerpos-purgados code { display: block; margin-top: .3rem; }
.cuerpos-purgados code { color: var(--tenue); font-size: .7rem; word-break: break-all; }

.vacio { color: var(--tenue); }
.error { color: var(--no); }
.entrada > .error { border-left: 2px solid var(--no); padding-left: .75rem; }

.aviso {
    position: fixed;
    z-index: 20;
    left: 50%;
    bottom: 1.5rem;
    transform: translateX(-50%);
    background: #fff;
    border: 1px solid var(--borde-fuerte);
    border-radius: 2px;
    box-shadow: var(--sombra);
    padding: .72rem 1rem;
    font-size: .8rem;
    max-width: 90vw;
}
.aviso.mal { border-color: var(--no); color: var(--no); }

.dialogo-consola {
    background: #fff;
    border: 1px solid var(--borde-fuerte);
    border-radius: 2px;
    box-shadow: 0 24px 70px rgba(31, 43, 47, .22);
    color: var(--texto);
    margin: auto;
    max-height: calc(100vh - 2rem);
    max-width: min(34rem, calc(100vw - 2rem));
    overflow: auto;
    padding: 1.5rem;
    width: 100%;
}
.dialogo-consola::backdrop { background: rgba(25, 35, 38, .42); }
.dialogo-consola h2 { font-family: var(--serif); font-size: 1.65rem; margin: .2rem 0 .75rem; }
.dialogo-consola .dialogo-mensaje { color: var(--tenue); font-size: .85rem; white-space: pre-line; }
.dialogo-consola .formulario:empty { display: none; }
.dialogo-consola .acciones { justify-content: flex-end; margin-top: 1.25rem; }
.dialogo-consola .boton.peligro { background: var(--no); border-color: var(--no); color: #fff; }

.dialogo-edicion {
    max-width: min(52rem, calc(100vw - 2rem));
    padding: 1.35rem 1.5rem 1.75rem;
}
.dialogo-edicion.dialogo-ancho { max-width: min(58rem, calc(100vw - 1.5rem)); }
.dialogo-edicion-cabeza {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
}
.dialogo-edicion .sobrelinea {
    color: var(--acento);
    font-size: .67rem;
    font-weight: 650;
    letter-spacing: .16em;
    margin: 0;
    text-transform: uppercase;
}
.dialogo-edicion h2 { font-family: inherit; font-size: 1.45rem; letter-spacing: -.03em; }
#dialogoEdicionCuerpo { margin-top: .35rem; }
#dialogoEdicionCuerpo .bloque { margin-bottom: 0; }

.destinos-asistente { display: grid; gap: .85rem; margin-bottom: 1rem; }
.destino-elegido {
    background: #fff;
    border: 1px solid #dce3e5;
    border-left: 2px solid var(--si);
    padding: .85rem 1rem;
}
.destino-elegido .acciones, .destino-elegido .boton { margin-top: .45rem; }

/* ---- permisos con alcance ---- */

#permisos { margin-top: 2.4rem; }
.permiso {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .6rem;
    padding: .8rem .9rem;
    margin-bottom: .55rem;
    border: 1px solid #dce3e5;
    border-left: 2px solid var(--si);
    border-radius: 2px;
    background: #fff;
}
.permiso .retirar { color: var(--no); flex: none; }
.permiso .que { font-family: var(--mono); font-size: .82rem; }
.permiso .quienpide { color: var(--tenue); font-size: .75rem; }
.permiso .cola { display: flex; gap: .35rem; flex-wrap: wrap; margin-top: .5rem; }

/* ---- alcance y claims ---- */

.aprobar-grupo { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; }
.alcance { display: inline-flex; align-items: center; gap: .45rem; color: var(--tenue); font-size: .8rem; }
.alcance select, .plantilla {
    background: #fff;
    border: 1px solid var(--borde);
    border-radius: 2px;
    color: var(--texto);
    padding: .48rem .55rem;
    font: inherit;
    font-size: .8rem;
}
.alcance-opciones { flex-basis: 100%; }
.alcance-opciones summary { display: inline-block; }
.alcance-opciones .alcance { display: flex; margin-top: .7rem; width: min(100%, 24rem); }
.alcance-opciones .alcance select { flex: 1; }
.detalles-tecnicos > summary {
    color: var(--acento);
    cursor: pointer;
    font-size: .8rem;
    font-weight: 650;
}
.detalles-tecnicos[open] > summary { margin-bottom: .9rem; }
.detalle-tecnico { border-top: 1px solid #e0e6e7; padding: 1rem 0 .35rem; }
.detalle-tecnico:first-of-type { border-top: 0; }

.claims { list-style: none; margin: 0; padding: 0; }
.claim {
    display: grid;
    grid-template-columns: 1.5rem minmax(0, 1fr) auto;
    align-items: baseline;
    gap: .5rem;
    padding: .48rem 0;
    border-bottom: 1px solid #e2e7e8;
}
.claim .marca { font-weight: 700; cursor: help; }
.claim.corroborated .marca { color: var(--si); }
.claim.contradicted .marca { color: var(--no); }
.claim.unverified .marca { color: var(--alerta); }
.claim .veredicto { color: var(--tenue); font-size: .76rem; }
.simple { margin: 0; padding-left: 1.1rem; }

.cuerpo {
    margin: .4rem 0 0;
    padding: .7rem;
    max-height: 12rem;
    overflow: auto;
    background: #f1f4f4;
    border: 1px solid #dce3e5;
    border-radius: 2px;
    color: #334044;
    font-family: var(--mono);
    font-size: .73rem;
    white-space: pre-wrap;
    word-break: break-all;
}

/* ---- menu del alta ---- */

.menu { list-style: none; margin: 0 0 1rem; padding: 0; }
.menu li { margin-bottom: .25rem; }
.opcion {
    position: relative;
    background: none;
    border: 0;
    border-bottom: 1px solid #e1e6e7;
    color: #526065;
    cursor: pointer;
    display: flex;
    font: inherit;
    font-size: .82rem;
    justify-content: space-between;
    gap: .5rem;
    padding: .7rem .2rem;
    text-align: left;
    width: 100%;
}
.opcion::before {
    content: "";
    position: absolute;
    left: -.75rem;
    top: 50%;
    width: .42rem;
    height: .42rem;
    background: transparent;
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    transform: translateY(-50%);
}
.opcion:hover { color: var(--texto); }
.opcion[aria-current="true"] { color: var(--texto); font-weight: 620; }
.opcion[aria-current="true"]::before { background: var(--acento); }
.menu-avanzado { margin-top: 1.4rem; border-top: 1px solid #dce3e5; padding-top: .7rem; }
.menu-avanzado > summary {
    color: var(--tenue);
    cursor: pointer;
    font-size: .68rem;
    font-weight: 650;
    letter-spacing: .1em;
    padding: .55rem .2rem;
    text-transform: uppercase;
}
.menu-avanzado[open] > summary { color: var(--texto); }
.menu-avanzado ul { margin-top: .35rem; }
.menu-grupo { margin-top: 1.4rem; border-top: 1px solid #dce3e5; padding-top: .7rem; }
/* La frontera entre grupos la dibuja el siguiente grupo, no también su última opción. */
#menuAlta > ul > li:last-child > .opcion,
#menuAlta > .menu-grupo > ul > li:last-child > .opcion { border-bottom: 0; }
.menu-grupo > h3, .menu-grupo > summary {
    color: var(--tenue);
    font-size: .68rem;
    font-weight: 650;
    letter-spacing: .1em;
    margin: 0 0 .35rem;
    padding: .55rem .2rem;
    text-transform: uppercase;
}
.menu-grupo > summary { cursor: pointer; }
.borradores {
    margin: .8rem 0 0; padding: .6rem .7rem; border: 1px solid var(--acento);
    background: var(--panel); font-size: .8rem;
}
.borradores h3 { margin: 0 0 .35rem; font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; }
.borradores ul { list-style: none; margin: 0; padding: 0; }
.borradores li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .3rem .6rem; padding: .3rem 0; }
.borradores li + li { border-top: 1px solid #dce3e5; }
.borradores small { display: block; color: var(--tenue); }
.acciones-borrador { display: flex; gap: .6rem; }
.borradores .pie { margin: .35rem 0 0; }
.menu-grupo[open] > summary { color: var(--texto); }

/* Importar tools: cuatro contratos, una entrada del menú (ADR 0159). */
.subpestanas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
    gap: .5rem;
    margin: 0 0 1.4rem;
}
.subpestana {
    background: var(--panel);
    border: 1px solid var(--borde);
    border-radius: 4px;
    color: var(--texto);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    font: inherit;
    font-size: .84rem;
    font-weight: 620;
    gap: .15rem;
    padding: .65rem .8rem;
    text-align: left;
}
.subpestana small { color: var(--tenue); font-size: .72rem; font-weight: 400; }
.subpestana:hover { border-color: var(--borde-fuerte); }
.subpestana[aria-current="true"] { background: var(--acento-suave); border-color: var(--acento); }

.cabeza-ficha {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem 1.5rem;
    margin: 0 0 1.6rem;
    max-width: 76rem;
}
.cabeza-ficha .titular { margin-bottom: .4rem; }
.cabeza-ficha-texto { margin: 0; max-width: 40rem; font-size: .95rem; }
.acciones-cabeza {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem 1rem;
    align-items: center;
    padding-top: .35rem;
}
.cabeza-alta { margin-bottom: 1.25rem; }
.cabeza-alta .enlace { display: inline-block; margin-bottom: .65rem; }

/* ---- tablas del catalogo ---- */

.tabla-marco { overflow-x: auto; }
.tabla { border-collapse: collapse; font-size: .82rem; width: 100%; }
.tabla th {
    color: #5c696d;
    font-size: .64rem;
    font-weight: 650;
    letter-spacing: .11em;
    text-align: left;
    text-transform: uppercase;
    padding: .45rem .8rem .55rem 0;
    border-bottom: 1px solid var(--borde-fuerte);
    white-space: nowrap;
}
.tabla td { border-bottom: 1px solid #e1e6e7; padding: .68rem .8rem .68rem 0; vertical-align: top; }
.tabla tr:last-child td { border-bottom: 0; }
.tabla code { font-family: var(--mono); font-size: .77rem; word-break: break-all; }
.mini { list-style: none; margin: 0; padding: 0; font-family: var(--mono); font-size: .72rem; }
ol.mini { counter-reset: regla; }
ol.mini li::before { content: counter(regla) ". "; counter-increment: regla; color: var(--tenue); }
.tenue { color: var(--tenue); }
.si { color: var(--si); }
.no { color: var(--no); }

/* ---- formularios ---- */

.formulario { display: grid; gap: .85rem; }
.formulario.en-linea { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); align-items: end; }
.campo { display: block; }
.campo > span { color: #566468; display: block; font-size: .73rem; letter-spacing: .025em; margin-bottom: .3rem; }
.campo input, .campo select, .campo textarea,
.fila input, .fila select {
    background: #fff;
    border: 1px solid var(--borde);
    border-radius: 2px;
    color: var(--texto);
    font: inherit;
    font-size: .82rem;
    padding: .58rem .62rem;
    width: 100%;
}
.campo input, .campo textarea { font-family: var(--mono); }
.campo em { color: var(--tenue); display: block; font-size: .72rem; font-style: normal; margin-top: .28rem; }
.campo input:hover, .campo select:hover, .campo textarea:hover,
.fila input:hover, .fila select:hover { border-color: var(--borde-fuerte); }

.formulario fieldset { border: 1px solid #d9e1e3; border-radius: 2px; padding: .85rem .95rem; margin: 0; }
.formulario legend { color: #5a686c; font-size: .64rem; font-weight: 650; letter-spacing: .1em; padding: 0 .3rem; text-transform: uppercase; }
.fila { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: .45rem; align-items: center; }
.fila input, .fila select { font-family: var(--mono); font-size: .76rem; padding: .48rem .55rem; flex: 1 1 8rem; min-width: 0; }
.fila input[type="checkbox"], .campo input[type="checkbox"] {
    background: none;
    border: 0;
    flex: none;
    padding: 0;
    width: auto;
}
.fila .quitar { flex: none; }
.fila-regla .r-predicado { flex: 2 1 16rem; }
.acciones { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; margin-top: .55rem; }
.plantilla { color: #4e5b5f; font-size: .76rem; }
.marcas { display: grid; gap: .38rem; }
.marcas .marca { display: flex; align-items: baseline; gap: .42rem; font-size: .81rem; }
.marcas .marca code { font-family: var(--mono); font-size: .76rem; }

.gestor-permisos { display: grid; gap: 1rem; }
.gestor-permisos > .campo { margin: 0; }
.origen-permisos {
    border: 1px solid var(--borde);
    border-radius: .55rem;
    padding: .7rem .85rem 0.85rem;
    display: grid;
    gap: .45rem;
    background: var(--panel);
}
.origen-permisos-cabeza {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    align-items: center;
    font-size: .82rem;
}
.origen-permisos .permiso-configuracion {
    border: 0;
    border-top: 1px solid #e4e9ea;
    padding: .55rem 0 0;
    margin: 0;
}
.acceso-agente {
    margin: .15rem 0 .35rem;
    padding-bottom: .35rem;
    border-bottom: 1px solid #e4e9ea;
}

.fichas-agente { display: grid; gap: 1.15rem; max-width: 76rem; }
.ficha-agente {
    background: var(--panel);
    border: 1px solid var(--borde);
    border-radius: .55rem;
    padding: 1rem 1.1rem 1.05rem;
}
.ficha-agente-cabeza {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: .5rem 1rem;
    margin-bottom: .55rem;
}
.ficha-agente-cabeza h3 { margin: 0; font-size: 1.05rem; }
.ficha-agente-cabeza .pie { margin: .22rem 0 0; }
.ficha-agente-meta { margin: 0 0 1rem; font-size: .82rem; }
.configuracion-agente { margin: 0 0 1.05rem; }
.configuracion-agente > .pie { margin: 0 0 .55rem; }
.configuracion-agente .modo-auth {
    color: inherit;
    font: inherit;
    text-align: left;
    width: 100%;
    height: 100%;
}
.configuracion-agente div.modo-auth { cursor: default; }
.configuracion-agente div.modo-auth:not(.elegido):hover { border-color: var(--borde); }
.tabla-marco:focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; }
.configuracion-agente .modo-auth .pie {
    color: var(--texto, #243033);
    display: block;
    font-size: .78rem;
    margin: .2rem 0 0;
}
.receta-runtime { margin-top: .85rem; }
.ficha-agente-destinos-cabeza {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: .4rem 1rem;
    margin-bottom: .45rem;
}
.ficha-agente-destinos-cabeza h4 { margin: 0; }
.ficha-agente h4 {
    color: #5c696d;
    font-size: .64rem;
    font-weight: 650;
    letter-spacing: .11em;
    margin: 0 0 .45rem;
    text-transform: uppercase;
}
.destinos-agente { display: grid; gap: .55rem; list-style: none; margin: 0; padding: 0; }
.destinos-agente > li {
    background: #fff;
    border: 1px solid #e1e6e7;
    border-radius: .4rem;
    display: grid;
    gap: .35rem;
    padding: .65rem .75rem;
}
.destino-agente-fila {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .4rem .85rem;
}
.destino-agente-datos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem .55rem;
    min-width: 0;
}
.destino-agente-endpoint { font-family: var(--mono); font-size: .8rem; word-break: break-all; }
.destino-agente-caps { color: var(--tenue); font-size: .75rem; margin: 0; }
.destino-agente-caps code { font-size: .72rem; }
.ficha-agente > .acciones { margin-top: .85rem; }
.selector-autorizadores { display: grid; gap: .42rem; }
.autorizadores {
    display: flex;
    flex-wrap: wrap;
    gap: .38rem;
    align-items: center;
    min-height: 1.7rem;
}
.autorizador {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    max-width: 100%;
    background: #fff;
    border: 1px solid var(--borde);
    border-radius: 2px;
    font-size: .8rem;
    padding: .22rem .4rem .22rem .52rem;
}
.autorizador.aviso { border-color: var(--alerta); }
.autorizador .chip { letter-spacing: .04em; padding: .08rem .32rem; }
.autorizador .quitarAutorizador { font-size: .72rem; }
.combo-autorizador { margin: 0; max-width: 28rem; }
.formulario details summary, details > summary { color: var(--acento); cursor: pointer; font-size: .8rem; margin: .6rem 0; }
.config-avanzada { border-top: 1px solid #e1e6e7; padding-top: .35rem; }
.config-avanzada > .campo, .config-avanzada > fieldset { margin-top: .85rem; }
.fila-constraint.campo { display: block; }

/* Revisar OpenAPI / MCP / SOAP / gRPC: el checkbox no es un .fila de constraints; si lo fuera
   el input se estira como un campo de texto y deja de verse a qué tool pertenece. */
.filas-publicar {
    display: grid;
    gap: .55rem;
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
}
.publicar-item {
    align-items: start;
    background: #fff;
    border: 1px solid var(--borde);
    border-radius: 2px;
    cursor: pointer;
    display: grid;
    gap: .2rem .7rem;
    grid-template-columns: auto minmax(0, 1fr);
    margin: 0;
    padding: .65rem .75rem;
}
.publicar-item:hover { border-color: var(--borde-fuerte); }
.publicar-item:has(input:checked) {
    background: var(--acento-suave);
    border-color: var(--acento);
}
.publicar-item > input[type="checkbox"] {
    margin: .28rem 0 0;
}
.publicar-item-cuerpo { min-width: 0; }
.publicar-item-cuerpo details { margin: 0; }

.formulario fieldset.modos-auth {
    border: 0;
    margin: 0;
    padding: 0;
}
.formulario fieldset.modos-auth legend {
    color: #566468;
    font-size: .73rem;
    font-weight: 500;
    letter-spacing: .025em;
    margin-bottom: .45rem;
    padding: 0;
    text-transform: none;
}
.modos-auth-rejilla {
    display: grid;
    gap: .55rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 14.5rem), 1fr));
}
.modo-auth {
    align-items: flex-start;
    background: #fff;
    border: 1px solid var(--borde);
    border-radius: 2px;
    cursor: pointer;
    display: flex;
    gap: .55rem;
    margin: 0;
    padding: .7rem .75rem;
}
.modo-auth:hover { border-color: var(--borde-fuerte); }
.modo-auth.elegido {
    background: var(--acento-suave);
    border-color: var(--acento);
    align-items: flex-start;
    flex-wrap: nowrap;
    margin: 0;
}
.modo-auth input {
    accent-color: var(--acento);
    flex: none;
    margin: .2rem 0 0;
    width: auto;
}
.modo-auth-cuerpo { display: grid; gap: .18rem; min-width: 0; }
.modo-auth-cuerpo strong { font-size: .84rem; font-weight: 620; }
.modo-auth-cuerpo em, .modos-auth > em {
    color: var(--tenue);
    display: block;
    font-size: .72rem;
    font-style: normal;
}
.modos-auth > em { margin-top: .45rem; }
#loginDelegadoKind { margin-top: .85rem; }
#oauth2Conexion .acciones { margin: .35rem 0 .2rem; }

/* ---- asistente y secreto ---- */

.paso { border-left: 2px solid var(--borde); }
.paso.actual { border-left-color: var(--acento); box-shadow: 0 12px 30px rgba(73, 89, 94, .06); }
.paso.hecho { border-left-color: var(--si); }
.paso.pendiente { opacity: .62; }
.paso h3 { align-items: center; display: flex; gap: .55rem; }
.numero {
    background: #fff;
    border: 1px solid var(--borde);
    border-radius: 50%;
    color: var(--texto);
    display: inline-grid;
    font-size: .66rem;
    height: 1.45rem;
    place-items: center;
    width: 1.45rem;
}
.paso.hecho .numero { border-color: var(--si); color: var(--si); }
.paso.actual .numero { border-color: var(--acento); color: var(--acento); }
.progreso-alta { margin: 1.2rem 0 1.5rem; }
.progreso-alta ol {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    list-style: none;
    margin: 0;
    padding: 0;
}
.progreso-alta li { border-top: 2px solid var(--borde); color: var(--tenue); font-size: .68rem; padding: .55rem .3rem 0 0; }
.progreso-alta li.hecho { border-color: var(--si); color: var(--si); }
.progreso-alta li.actual { border-color: var(--acento); color: var(--texto); font-weight: 650; }
.resumen-alta {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem .8rem;
    align-items: center;
    margin: 0 0 1rem;
    color: var(--tenue);
    font-size: .76rem;
}
.resumen-alta code { color: var(--texto); }
.fin-alta { border-color: color-mix(in srgb, var(--si) 42%, var(--borde)); background: #f7fbf9; }
.elegido { display: flex; flex-wrap: wrap; gap: .5rem; align-items: baseline; margin: 0 0 .55rem; }
.elegido code { font-family: var(--mono); font-size: .76rem; }
.comprobaciones { list-style: none; margin: .55rem 0 0; padding: 0; font-size: .78rem; }
.comprobaciones li { padding: .18rem 0; }
.comprobaciones code { font-family: var(--mono); }
.secreto { border-color: color-mix(in srgb, var(--alerta) 58%, white); background: #fffcf5; }
.secreto h3 { color: var(--alerta); }
.secreto dd { user-select: all; }

/* El estado de un gateway. "Sin registrar" no es un error y por eso no va en rojo: es un gateway
   dado de alta al que todavia no le han pasado su secreto, o que aun no ha arrancado. */
.etiqueta {
    border: 1px solid var(--borde);
    border-radius: 999px;
    display: inline-block;
    font-size: .72rem;
    letter-spacing: .01em;
    padding: .1rem .5rem;
    white-space: nowrap;
}
.etiqueta.active { border-color: color-mix(in srgb, var(--si) 58%, white); color: var(--si); }
.etiqueta.pending { border-color: color-mix(in srgb, var(--alerta) 58%, white); color: var(--alerta); }
.etiqueta.suspended { color: var(--tenue); }
.etiqueta.online { border-color: color-mix(in srgb, var(--si) 58%, white); color: var(--si); }
.etiqueta.silent { border-color: color-mix(in srgb, var(--no) 58%, white); color: var(--no); }
.etiqueta.never_seen { border-color: color-mix(in srgb, var(--alerta) 58%, white); color: var(--alerta); }
.etiqueta.no_identity { color: var(--tenue); }
.etiqueta.not_applicable { color: var(--tenue); }

/* ---- adaptacion ---- */

@media (max-width: 68rem) {
    .barra { grid-template-columns: auto 1fr; }
    .pestanas { justify-self: end; }
    .sesion { grid-column: 1 / -1; justify-self: stretch; padding-top: .6rem; border-top: 1px solid #edf0f1; }
    .tablero { min-height: calc(100vh - 8.5rem); }
}

@media (max-width: 49rem) {
    .entrada { display: block; width: calc(100vw - 2.5rem); max-width: 34rem; padding: 3rem 0; }
    .entrada > :not(.geometria) { grid-column: 1; }
    .geometria { grid-column: 1; grid-row: auto; width: min(100%, 25rem); margin-top: 1.25rem; }
    .tablero { grid-template-columns: 1fr; }
    .tablero:not(.movil-detalle) > .detalle { display: none; }
    .tablero.movil-detalle > .lista { display: none; }
    .tablero.movil-detalle > .volver-lista {
        display: block;
        justify-self: start;
        margin: 1.25rem 1.25rem 0;
    }
    .lista { border-right: 0; padding-right: 1.25rem; }
    .detalle { padding: 2rem 1.25rem 4rem; }
}

@media (max-width: 39rem) {
    .barra { display: flex; flex-wrap: wrap; padding: .85rem 1rem; gap: .85rem 1rem; }
    .barra::after { left: 1rem; }
    .barra > .marca { flex: 1 1 auto; }
    .marca-texto small { display: none; }
    .pestanas { order: 3; width: 100%; height: 2.25rem; justify-content: center; gap: 2.5rem; border-top: 1px solid #edf0f1; }
    .pestana::after { bottom: -.2rem; }
    .barra-derecha { order: 2; margin-left: auto; gap: .6rem; }
    .sesion { width: auto; border: 0; padding: 0; }
    .sesion .quien { max-width: 7rem; }
    .entrada h1 { font-size: 2.45rem; }
    .geometria { margin-top: .5rem; }
    .campos { grid-template-columns: 1fr; gap: .1rem; }
    .campos dd { margin-bottom: .45rem; }
    .claim { grid-template-columns: 1.4rem 1fr; }
    .claim .veredicto { grid-column: 2; }
    .decidir { flex-direction: column; align-items: stretch; }
    .aprobar-grupo { align-items: stretch; }
    .aprobar-grupo .aprobar { flex: 1; }
    .alcance { width: 100%; justify-content: space-between; }
    .progreso-alta ol { grid-template-columns: repeat(3, 1fr); gap: .8rem 0; }
    .dialogo-consola { max-width: calc(100vw - 1.25rem); padding: 1.15rem; }
}

/* ---- conectar por MCP y clúster virtual ---- */

/* Lo que se copia se lee entero: partir un curl por la mitad de una palabra hace que al pegarlo
   no se note que faltaba algo. Scroll horizontal antes que un salto de línea inventado. */
.copiable {
    max-height: 22rem;
    white-space: pre;
    word-break: normal;
    overflow-x: auto;
}
.copiable + .acciones { margin-top: .35rem; }

.bloque details { margin-top: 1rem; }
.bloque details .tabla { margin-top: .4rem; }
.bloque details .traza { margin-top: .8rem; }
.tabla .detalle-evento { color: var(--tenue); display: block; font-size: .72rem; margin-top: .25rem; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}

/* ---- pantalla de aceptación (aviso push) ---- */

body.aceptacion {
    min-height: 100vh;
    background:
        radial-gradient(ellipse 80% 50% at 50% -10%, #f3e8e6, transparent 55%),
        var(--fondo-suave);
}
body.aceptacion .barra-aceptacion {
    grid-template-columns: 1fr auto;
    background: transparent;
    border-bottom-color: transparent;
}
body.aceptacion .barra-aceptacion::after { display: none; }
body.aceptacion .sesion {
    display: flex;
    align-items: center;
    gap: 1rem;
    justify-self: end;
}
.marco-aceptacion {
    width: min(36rem, calc(100% - 2rem));
    margin: 0 auto;
    padding: 1.5rem 0 4rem;
}
/* Sin geometria no hay segunda columna: con la rejilla de .entrada el contenido se quedaba en
   la primera, un tercio del marco, y en movil el min-height dejaba media pantalla en blanco. */
.entrada-aceptacion {
    display: block;
    width: auto;
    max-width: none;
    min-height: 0;
    padding: 2rem 0;
}
.entrada-aceptacion .geometria { display: none; }
.entrada-aceptacion .ficha {
    margin: 1.25rem 0;
    padding: 1rem 0;
    border-top: 1px solid var(--borde);
}
.entrada-aceptacion .ficha h2 { font-size: 1.05rem; margin: 0 0 .4rem; }

/* La casilla va en linea con su texto: la regla general de .entrada label/input la convertiria
   en un bloque y en un campo de 26rem. */
.entrada label.casilla-aceptar {
    display: flex;
    gap: .55rem;
    align-items: flex-start;
    max-width: 26rem;
    margin: .2rem 0 1rem;
    font-size: .82rem;
    letter-spacing: 0;
    line-height: 1.45;
}
.entrada label.casilla-aceptar input { width: auto; margin: .2rem 0 0; padding: 0; }

/* ---- oferta ---- */

.marco-aceptacion.marco-oferta { width: min(64rem, calc(100% - 2rem)); }
.marco-oferta .claro,
.marco-oferta .texto-oferta { max-width: 42rem; }
.marco-oferta .texto-oferta { color: #3c4649; line-height: 1.6; margin: 0 0 1rem; }
.marco-oferta h2 { font-size: 1.2rem; letter-spacing: -.01em; margin: 2.5rem 0 .7rem; }
.marco-oferta h3 { font-size: .98rem; margin: 1.6rem 0 .5rem; }
.lista-legal { padding-left: 1.2rem; }
.lista-legal li { margin: 0 0 .4rem; }
.datos-legales {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: .35rem 1.2rem;
    max-width: 42rem;
    margin: 0 0 1rem;
}
.datos-legales dt { color: var(--tenue); font-size: .82rem; }
.datos-legales dd { margin: 0; overflow-wrap: anywhere; }
.planes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13.5rem, 1fr));
    gap: 1rem;
    margin: 0 0 1.75rem;
}
.plan {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--borde);
    border-radius: 4px;
    box-shadow: var(--sombra);
    padding: 1.35rem 1.35rem 1.2rem;
}
.plan h3 { font-size: 1.05rem; margin: 0 0 .9rem; }
.plan-precio { font-size: 1.9rem; font-weight: 650; letter-spacing: -.03em; line-height: 1.1; margin: 0; }
.plan-precio small { color: var(--tenue); font-size: .78rem; font-weight: 400; letter-spacing: 0; }
.plan-periodo { color: var(--tenue); font-size: .8rem; margin: .3rem 0 1rem; }
.plan-resumen { color: #3c4649; font-size: .88rem; line-height: 1.5; margin: 0 0 1rem; }
.plan-techos {
    list-style: none;
    margin: auto 0 0;
    padding: .9rem 0 0;
    border-top: 1px solid #e4e9ea;
    font-size: .82rem;
}
.plan-techos li { padding: .18rem 0; }
.plan-techos strong { font-variant-numeric: tabular-nums; }
.ficha-aceptacion {
    background: #fff;
    border: 1px solid var(--borde);
    border-radius: 4px;
    box-shadow: var(--sombra);
    padding: clamp(1.4rem, 4vw, 2.2rem);
}
.ficha-aceptacion .titular {
    font-size: clamp(1.55rem, 4vw, 2.05rem);
    letter-spacing: -.03em;
    margin: .15rem 0 1rem;
}
.agente-pide {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .35rem 1rem;
    border-left: 3px solid var(--acento);
    padding: .2rem 0 .2rem 1rem;
}
.agente-nombre {
    font-size: 1.15rem;
    font-weight: 650;
    margin: 0;
}
.agente-id { margin: 0; color: var(--tenue); }
.ficha-aceptacion .decidir {
    margin-top: 2rem;
    padding-top: 1.4rem;
    border-top: 1px solid #e4e9ea;
}
.ficha-aceptacion .aprobar { min-width: 11rem; }

/* ---- instalar el CLI ---- */

.marco-instalar .paquete-cli {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: .35rem 1.25rem;
    max-width: 42rem;
    margin: 0 0 2rem;
    padding: .9rem 1.1rem;
    background: #fff;
    border: 1px solid var(--borde);
    border-left: 3px solid var(--acento);
    border-radius: 4px;
    font-size: .85rem;
}
.marco-instalar .paquete-cli div { display: contents; }
.marco-instalar .paquete-cli dt { color: var(--tenue); }
.marco-instalar .paquete-cli dd { margin: 0; min-width: 0; }
/* La huella se compara a ojo con la de shasum: entera, aunque parta la linea. */
.marco-instalar .paquete-cli code { overflow-wrap: anywhere; }
.marco-instalar label[for="plataforma"] { display: block; margin: .8rem 0 .35rem; font-weight: 600; }
.marco-instalar #plataforma { max-width: 100%; padding: .55rem .7rem; border: 1px solid var(--borde-fuerte); border-radius: 4px; background: #fff; color: inherit; }
.marco-instalar #huellaSeleccionada { overflow-wrap: anywhere; }
.aviso-paquete { color: var(--no); max-width: 42rem; }

.pasos { counter-reset: paso; list-style: none; margin: 0; padding: 0 0 0 2.75rem; max-width: 46rem; }
.pasos > li { counter-increment: paso; padding: 0 0 .5rem; }
/* El numero va en el titulo y no en el li: el margen del h2 colapsa con el del li y un numero
   anclado al li queda a la altura del parrafo, no del titulo. */
.pasos > li > h2 { position: relative; }
.pasos > li > h2::before {
    content: counter(paso);
    position: absolute;
    left: -2.75rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1.75rem;
    height: 1.75rem;
    display: grid;
    place-items: center;
    border: 1px solid var(--borde-fuerte);
    border-radius: 50%;
    color: var(--acento);
    font-size: .8rem;
    font-weight: 650;
}
.marco-instalar h3 {
    color: var(--tenue);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .1em;
    margin: 1.2rem 0 .4rem;
    text-transform: uppercase;
}
.comando {
    display: flex;
    align-items: stretch;
    gap: .5rem;
    margin: 0 0 .75rem;
}
.comando pre {
    flex: 1;
    min-width: 0;
    margin: 0;
    padding: .7rem .9rem;
    background: var(--panel-alto);
    border: 1px solid var(--borde);
    border-radius: 4px;
    font-size: .82rem;
    line-height: 1.6;
}
.comando .boton { flex: none; align-self: flex-start; }

@media (max-width: 560px) {
    .pasos { padding-left: 0; }
    .pasos > li > h2 { display: flex; align-items: center; gap: .6rem; }
    .pasos > li > h2::before { position: static; transform: none; flex: none; }
    .comando { flex-direction: column; }
    .comando .boton { align-self: flex-end; }
}