/* p-sistema.css · /sistema/ (Colores y tokens). Solo var(--…) de tokens.css: sin hex, sin sombras, sin degradados, sin rebotes.
   Las piezas «cl-» y el interruptor salen de p-componentes.css; aquí vive solo la maqueta de esta página («sis-»). */

.sis .code{margin-top:var(--s-16)}
.sis-alto{max-height:420px}
.sis-acc{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-12) var(--s-16);margin-top:var(--s-24)}
.sis-acc .small{margin:0}
.sis .cmp-sub{margin:var(--s-32) 0 var(--s-12)}
.sis .sec-head+.cmp-sub{margin-top:0}
/* compacto: menos aire entre secciones, cabeceras de una línea y todo lo técnico dentro de details */
.sis .sec{padding:var(--s-48) 0}
.sis .sec-head{margin-bottom:var(--s-24)}
.sis .sec-head .eyebrow{margin-bottom:var(--s-8)}
.sis .sec-head .lede{margin-top:var(--s-8)}
.sis .cmp-hero{padding:var(--s-32) 0 var(--s-48)}
.sis details.mas{padding:var(--s-12) 0;margin-top:var(--s-16)}
.sis details.mas+details.mas{margin-top:0}
.sis details.mas>div{padding-top:var(--s-12)}
.sis .tabs{margin-bottom:var(--s-24)}
.sis .acciones{margin-top:var(--s-12)}
@media (min-width:1101px){.sis .cmp-ir{display:none}}
@media (max-width:1100px){.sis .cmp-ir{margin-top:var(--s-24)}}
.sis .copy{white-space:nowrap}
.sis-dot[data-theme]{background:var(--c);border-color:var(--borde-control)}
.sis-dot{display:inline-block;flex:none;width:14px;height:14px;border-radius:50%;background:var(--c);border:var(--borde-ancho) solid var(--borde-control);vertical-align:-2px}

/* ---- portada: un color, tres maneras de copiarlo ---- */
.sis-copiar{display:flex;flex-direction:column;border:var(--borde-ancho) solid var(--borde);border-radius:var(--r-tarjeta);background:var(--fondo);overflow:hidden}
.sis-copiar-c{display:block;height:112px;background:var(--c)}
.sis-copiar-t{display:flex;align-items:baseline;gap:var(--s-12);padding:var(--s-16) var(--s-24)}
.sis-copiar-t b{font-size:var(--t-24);letter-spacing:var(--trk-24);line-height:var(--lh-titulo-24)}
.sis-copiar-t span{font-size:var(--t-15);color:var(--texto-2)}
.sis-fila{display:grid;grid-template-columns:5.5em minmax(0,1fr) auto;gap:var(--s-16);align-items:center;width:100%;padding:var(--s-12) var(--s-24);border:0;border-top:var(--borde-ancho) solid var(--borde);background:none;color:var(--texto);font:inherit;text-align:left;cursor:pointer;transition:background var(--dur-micro) var(--mov-micro)}
.sis-fila:hover{background:var(--superficie)}
.sis-fila span{font-size:var(--t-12);font-weight:var(--bold);letter-spacing:var(--trk-eyebrow);text-transform:uppercase;color:var(--texto-2)}
.sis-fila code{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sis-fila em{font-style:normal;font-size:var(--t-15);font-weight:var(--bold)}

/* ---- paleta ---- */
.sis-paleta{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-24) var(--medianil)}
@media (max-width:1100px){.sis-paleta{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.sis-paleta{grid-template-columns:minmax(0,1fr)}}
.sis-sw{display:flex;flex-direction:column;gap:var(--s-8);min-width:0}
.sis-sw-c{display:block;height:88px;border-radius:var(--r-captura);background:var(--c)}
.sis-sw-c.borde{border:var(--borde-ancho) solid var(--borde-control)}
.sis-sw>b{font-size:var(--t-19);letter-spacing:var(--trk-19)}
.sis-sw>p{margin:0;font-size:var(--t-15);color:var(--texto-2);line-height:var(--lh-pieza)}
.sis-sw-cp{display:flex;flex-wrap:wrap;gap:6px}
.sis-par{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-16) var(--s-48);margin-top:var(--s-32);align-items:start}
.sis-par .cmp-sub{margin-top:0}
@media (max-width:900px){.sis-par{grid-template-columns:minmax(0,1fr)}}

.sis-estados{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-16);margin:0;padding:0;list-style:none}
@media (max-width:760px){.sis-estados{grid-template-columns:minmax(0,1fr)}}
.sis-estados li{display:flex;gap:var(--s-12);align-items:flex-end;padding-top:var(--s-12);border-top:var(--borde-ancho) solid var(--borde)}
.sis-estados b{display:block;font-size:var(--t-19);letter-spacing:var(--trk-19)}
.sis-estados p{margin:0;font-size:var(--t-15);color:var(--texto-2)}
.sis-prop{display:flex;height:48px;border-radius:var(--r-pill);overflow:hidden;border:var(--borde-ancho) solid var(--borde)}
.sis-prop span{display:flex;align-items:center;justify-content:center;font-size:var(--t-15);font-weight:var(--bold);white-space:nowrap;min-width:0}
.sis-prop .a{flex:80;background:var(--superficie)}
.sis-prop .b{flex:15;background:var(--control-hecho);color:var(--fondo)}
.sis-prop .c{flex:5;background:var(--acento)}
.sis-prop-l{display:flex;flex-wrap:wrap;gap:var(--s-8) var(--s-24);margin:var(--s-12) 0 0;padding:0;list-style:none;font-size:var(--t-15);color:var(--texto-2)}
.sis-prop-l li{display:flex;align-items:center;gap:var(--s-8)}
.sis-prop-l i{display:block;width:16px;height:16px;border-radius:50%}
.sis-prop-l .a{background:var(--superficie);border:var(--borde-ancho) solid var(--borde-control)}
.sis-prop-l .b{background:var(--control-hecho)}
.sis-prop-l .c{background:var(--acento)}

/* ---- roles y tema ---- */
.sis-tema{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:var(--s-48);align-items:start}
.sis-tema-d .cmp-sub{margin-top:0}
@media (max-width:900px){.sis-tema{grid-template-columns:minmax(0,1fr)}}
.sis-tema-ctl{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-12) var(--s-16);margin-bottom:var(--s-16)}
.sis-tema-ctl .small{margin:0}
.sis-muestra{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s-16);padding:var(--s-24);border:var(--borde-ancho) solid var(--borde);border-radius:var(--r-tarjeta);background:var(--fondo);color:var(--texto)}
.sis-muestra .cl-eyebrow{margin:0}
.sis-m-t{margin:0;font-size:var(--t-30);font-weight:var(--bold);letter-spacing:var(--trk-30);line-height:var(--lh-titulo-30)}
.sis-m-t span{color:var(--texto-3)}
.sis-m-f{display:flex;flex-wrap:wrap;gap:var(--s-8)}
.sis-m-c{flex-direction:row;align-items:center;gap:var(--s-16);width:100%}
.sis-m-c p{color:var(--texto)}
.sis-m-c .cl-sw{--hueco:var(--elevado)}
.sis-leyenda{display:grid;grid-template-columns:max-content 1fr;gap:var(--s-8) var(--s-24);margin:0 0 var(--s-16);font-size:var(--t-15)}
.sis-leyenda dt{color:var(--texto-2)}
.sis-leyenda dd{display:flex;align-items:center;gap:var(--s-8);margin:0}
.sis .tabla .num{text-align:right;font-variant-numeric:tabular-nums}
.sis-contr td:first-child{white-space:nowrap}
.sis-roles td{vertical-align:middle}
.sis-roles td:first-child b{display:block;font-size:var(--t-15)}
.sis-roles td:first-child span{display:block;font-size:var(--t-12);color:var(--texto-2);line-height:1.4;max-width:26em}
.sis-v{display:inline-flex;align-items:center;gap:var(--s-8)}

/* ---- tipografía ---- */
.sis-pesos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-32);margin-bottom:var(--s-24)}
@media (max-width:700px){.sis-pesos{grid-template-columns:minmax(0,1fr)}}
.sis-peso{margin:0 0 var(--s-4);font-size:var(--t-42);letter-spacing:var(--trk-42);line-height:var(--lh-titulo-42)}
.sis-peso.b{font-weight:var(--bold)}.sis-peso.r{font-weight:var(--regular)}
.sis-pesos p:not(.sis-peso){margin:0;font-size:var(--t-15);color:var(--texto-2)}
.sis-pesos p b{color:var(--texto)}
.sis-escala{border-bottom:var(--borde-ancho) solid var(--borde)}
.sis-esc{display:grid;grid-template-columns:11rem minmax(0,1fr) auto;gap:var(--s-8) var(--s-24);align-items:center;padding:var(--s-8) 0;border-top:var(--borde-ancho) solid var(--borde)}
.sis-esc-m{display:flex;align-items:baseline;gap:var(--s-8);flex-wrap:wrap}
.sis-esc-m b{font-size:var(--t-24);letter-spacing:var(--trk-24);line-height:1;font-variant-numeric:tabular-nums}
.sis-esc-m span{font-size:var(--t-12);color:var(--texto-2);line-height:1.3}
.sis-esc-x{margin:0;min-width:0;overflow-wrap:anywhere;text-wrap:balance}
.sis-esc-r{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end}
@media (max-width:1100px){.sis-esc{grid-template-columns:8rem minmax(0,1fr)}.sis-esc-r{grid-column:2;justify-content:flex-start}}
@media (max-width:560px){.sis-esc{grid-template-columns:minmax(0,1fr)}.sis-esc-r{grid-column:auto}}
.sis-dos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-32);align-items:start}
@media (max-width:900px){.sis-dos{grid-template-columns:minmax(0,1fr)}}

/* ---- espacio, radios y bordes ---- */
.sis-espacio{border-bottom:var(--borde-ancho) solid var(--borde)}
.sis-esp{display:grid;grid-template-columns:15em minmax(0,1fr) 3.5em minmax(0,1.3fr);gap:var(--s-8) var(--s-24);align-items:center;padding:var(--s-8) 0;border-top:var(--borde-ancho) solid var(--borde)}
.sis-esp-b i{display:block;height:var(--s-16);background:var(--control-hecho)}
.sis-esp-p{font-weight:var(--bold);font-variant-numeric:tabular-nums;text-align:right}
.sis-esp-u{font-size:var(--t-15);color:var(--texto-2)}
@media (max-width:760px){.sis-esp{grid-template-columns:minmax(0,1fr) 3.5em}.sis-esp>b{grid-column:1/-1}.sis-esp-u{grid-column:1/-1;font-size:var(--t-12)}}
.sis-esp>b{display:flex;flex-wrap:wrap;gap:6px;font-weight:var(--regular)}
.sis-cps{display:flex;flex-wrap:wrap;gap:6px;margin-top:var(--s-4)}
.sis-escalera{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--s-16) var(--s-12);padding:var(--s-24);background:var(--superficie);border-radius:var(--r-tarjeta)}
.sis-paso{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:var(--s-8);min-width:36px;padding:0;border:0;background:none;color:var(--texto-2);font:inherit;font-size:var(--t-12);font-variant-numeric:tabular-nums;cursor:pointer}
.sis-paso i{display:block;width:var(--n);height:var(--n);background:var(--control-hecho);transition:background var(--dur-micro) var(--mov-micro)}
.sis-paso:hover i{background:var(--texto-2)}
.sis-paso:hover b{color:var(--texto)}
.sis-forma{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-16) var(--s-32);margin-top:var(--s-32);align-items:start}
.sis-forma .cmp-sub{margin-top:0}
@media (max-width:1100px){.sis-forma{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:700px){.sis-forma{grid-template-columns:minmax(0,1fr)}}
.sis-fl{margin:0;padding:0;list-style:none;display:grid;gap:var(--s-16)}
.sis-fl li{display:grid;grid-template-columns:72px minmax(0,1fr);gap:var(--s-16);align-items:center}
.sis-fl b{font-size:var(--t-15)}
.sis-fl span{font-size:var(--t-12);color:var(--texto-2)}
.sis-rad i{display:block;width:56px;aspect-ratio:1;background:var(--superficie);border:var(--borde-ancho) solid var(--borde-control);border-radius:var(--r)}
.sis-alt i{display:block;width:72px;background:var(--superficie);border:var(--borde-ancho) solid var(--borde-control);border-radius:var(--r-pill)}
.sis-bor i{display:block;width:72px;height:0}

/* ---- retícula ---- */
.sis-ret{display:flex;gap:var(--s-24);align-items:flex-end;padding:var(--s-16) var(--s-24);background:var(--superficie);border-radius:var(--r-tarjeta)}
.sis-ret-f{min-width:0}
.sis-ret-f svg{display:block;width:100%;height:auto}
.sis-ret-f figcaption{font-size:var(--t-12);line-height:1.4}
.r-lienzo{fill:var(--elevado);stroke:var(--borde-control);stroke-width:1;vector-effect:non-scaling-stroke}
.r-cab{fill:var(--superficie)}
.r-col{fill:var(--acento-suave);stroke:var(--acento);stroke-width:1;vector-effect:non-scaling-stroke}
.r-m{stroke:var(--texto-3);stroke-dasharray:4 3;stroke-width:1;vector-effect:non-scaling-stroke}
.r-t{fill:var(--texto-2);font-family:var(--fuente)}
@media (max-width:700px){.sis-ret{flex-direction:column;align-items:stretch}.sis-ret-f{flex:none!important}}
.sis-formatos td{font-size:var(--t-15)}
.sis-formatos td:first-child{white-space:nowrap}

/* ---- zonas seguras ---- */
.sis-zona{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,23rem);gap:var(--s-32);align-items:start}
@media (max-width:900px){.sis-zona{grid-template-columns:minmax(0,1fr)}}
.sis-zona-f{display:grid;place-items:center;padding:var(--s-16);background:var(--superficie);border-radius:var(--r-tarjeta);min-width:0}
.sis-zona-f svg{display:block;width:100%;max-width:var(--mw);height:auto;max-height:340px}
.sis-zona-d .kv{margin-bottom:var(--s-16)}
.sis-zona-d .kv dd{font-variant-numeric:tabular-nums}
.z-lienzo{fill:var(--fondo);stroke:var(--borde-control);stroke-width:1;vector-effect:non-scaling-stroke}
.z-zona{fill:var(--acento-suave);fill-opacity:.7;stroke:var(--acento);stroke-width:1.5;vector-effect:non-scaling-stroke}
.z-guia{fill:none;stroke:var(--texto-3);stroke-width:1;stroke-dasharray:6 5;vector-effect:non-scaling-stroke}
.z-libre{fill:var(--superficie);stroke:var(--texto-3);stroke-width:1;stroke-dasharray:6 5;vector-effect:non-scaling-stroke}
.z-col{fill:var(--borde);fill-opacity:.55}
.z-logo{fill:var(--texto)}
.z-linea{stroke:var(--texto);stroke-width:1.5;stroke-dasharray:10 6;vector-effect:non-scaling-stroke}
.z-t{fill:var(--texto-2);font-family:var(--fuente)}
.z-tl{fill:var(--texto);font-weight:var(--bold)}
.sis-leyz{display:flex;flex-wrap:wrap;gap:var(--s-8) var(--s-24);margin:var(--s-16) 0 0;padding:0;list-style:none;font-size:var(--t-15);color:var(--texto-2)}
.sis-leyz li{display:flex;align-items:center;gap:var(--s-8)}
.sis-leyz i{display:block;width:24px;height:14px;border-radius:3px}
.sis-leyz .z-zona{background:var(--acento-suave);border:var(--borde-encendido) solid var(--acento)}
.sis-leyz .z-guia{border:var(--borde-ancho) dashed var(--texto-3)}
.sis-leyz .z-linea{height:0;border-radius:0;border-top:var(--borde-encendido) dashed var(--texto)}

/* ---- movimiento ---- */
.sis-mov{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-16)}
@media (max-width:900px){.sis-mov{grid-template-columns:minmax(0,1fr)}}
.stage.sis-mov-f{display:grid;grid-template-columns:7rem minmax(0,1fr);gap:var(--s-16) var(--s-24);align-items:center;justify-items:stretch;place-items:center stretch;padding:var(--s-24) var(--s-24) 52px;min-height:0;background:var(--fondo)}
.sis-mov-t{grid-column:1/-1}
.sis-curva{display:block;width:100%;height:auto;overflow:visible}
.c-marco{fill:none;stroke:var(--borde)}
.c-asa{stroke:var(--texto-3);stroke-width:1;stroke-dasharray:3 3}
.c-ctl{fill:var(--fondo);stroke:var(--texto-2);stroke-width:1.5}
.c-curva{fill:none;stroke:var(--texto);stroke-width:2.5;stroke-linecap:round}
.c-punto{fill:var(--acento)}
@keyframes sis-cx{from{transform:translateX(0)}to{transform:translateX(160px)}}
@keyframes sis-cy{from{transform:translateY(0)}to{transform:translateY(-160px)}}
.stage.is-playing .c-x{animation:sis-cx var(--d) linear both}
.stage.is-playing .c-y{animation:sis-cy var(--d) var(--c) both}
.sis-mov-t h3{margin:0 0 var(--s-4);font-size:var(--t-24);letter-spacing:var(--trk-24);line-height:var(--lh-titulo-24)}
.sis-mov-t p{margin:0 0 var(--s-12);font-size:var(--t-15);color:var(--texto-2)}
.sis-mov-cp{display:flex;flex-wrap:wrap;gap:6px}
.sis-mov-demo{display:grid;place-items:center start;min-height:96px;min-width:0}
.sis-d{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s-8);position:relative}
.sis-d p{margin:0;font-size:var(--t-15);color:var(--texto-2)}
.sis-d-estado{flex-direction:row;align-items:flex-end;gap:var(--s-16)}
@keyframes sis-entra{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes sis-entra-r{from{opacity:0;transform:translateY(48px)}to{opacity:1;transform:none}}
@keyframes sis-sale{from{opacity:1;transform:none}to{opacity:0;transform:translateY(-8px)}}
@keyframes sis-micro{from{background:var(--elevado);border-color:var(--borde);color:var(--texto-2)}to{background:var(--acento-suave);border-color:var(--acento);color:var(--texto)}}
.stage.is-playing .sis-d-entrada{animation:sis-entra var(--d) var(--c) both}
.stage.is-playing .sis-d-entrada.sis-rebote{animation-name:sis-entra-r}
.stage.is-playing .sis-d-estado .cl-sw::after{animation:cmp-knob var(--d) var(--c) both}
.sis-d-salida .hueco{position:absolute;inset:-8px;border:var(--borde-ancho) dashed var(--texto-3);border-radius:var(--r-captura)}
.sis-d-salida .sale{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s-8);position:relative}
.stage.is-playing .sis-d-salida .sale{animation:sis-sale var(--d) var(--c) 700ms both}
.cl-chip.micro{border-width:var(--borde-encendido)}
.stage.is-playing .cl-chip.micro{animation:sis-micro var(--d) var(--c) 500ms both}
.sis-durs{border-bottom:var(--borde-ancho) solid var(--borde)}
.sis .cmp-reglas{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-12) var(--s-32);margin-top:var(--s-24)}
@media (max-width:900px){.sis .cmp-reglas{grid-template-columns:minmax(0,1fr)}}
.sis-dur{display:grid;grid-template-columns:7em minmax(0,1fr) 4.5em 3em minmax(0,1.2fr);gap:var(--s-8) var(--s-16);align-items:center;padding:var(--s-8) 0;border-top:var(--borde-ancho) solid var(--borde);font-size:var(--t-15)}
.sis-dur-b i{display:block;height:var(--s-12);background:var(--control-hecho)}
.sis-dur-m{font-weight:var(--bold);text-align:right;font-variant-numeric:tabular-nums}
.sis-dur-f,.sis-dur-u{color:var(--texto-2);font-variant-numeric:tabular-nums}
@media (max-width:760px){.sis-dur{grid-template-columns:6em minmax(0,1fr) 4.5em}.sis-dur-f{display:none}.sis-dur-u{grid-column:1/-1;font-size:var(--t-12)}}

/* ---- usar los tokens, tu IA ---- */
.sis-uso{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:var(--s-32);align-items:start}
.sis-uso p{margin:0 0 var(--s-16)}
.sis-uso .code{margin-top:0}
@media (max-width:900px){.sis-uso{grid-template-columns:minmax(0,1fr)}}
.sis-ia-g{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-16) var(--s-48);align-items:start}
.sis-ia-g .cmp-sub{margin-top:0}
@media (max-width:900px){.sis-ia-g{grid-template-columns:minmax(0,1fr)}}
.sis-ia-acc{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-12) var(--s-16)}
.sis-ia-acc .small{margin:0}
.sis-pasos{margin:var(--s-12) 0 0;padding-left:1.4em;display:grid;gap:var(--s-8);font-size:var(--t-17)}
.sis-sug{margin:0;padding:0;list-style:none;display:grid;gap:var(--s-8)}
.sis-sug .copy{white-space:normal;text-align:left;font-family:var(--fuente);font-size:var(--t-15);padding:var(--s-8) var(--s-12);line-height:1.4;border-radius:var(--r-campo)}
.sis-cambio{margin:0;padding-left:1.4em;display:grid;gap:var(--s-8);font-size:var(--t-15);color:var(--texto-2)}
.sis-cambio b{color:var(--texto)}

/* ---- lo que no se hace ---- */
.sis-nos{display:grid;gap:var(--s-24)}
.sis-no{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:var(--s-8);min-height:140px;padding:var(--s-16) var(--s-24);border:var(--borde-ancho) solid var(--borde);border-radius:var(--r-tarjeta);background:var(--fondo);color:var(--texto);min-width:0}
.dont .sis-no,.dont .sis-no-st{border-color:var(--texto-3)}
.sis-no p{margin:0}
.sis-no-azul p{font-size:var(--t-15);color:var(--texto-2)}
.sis-no-b{display:block;width:120px;height:16px}
.sis-t15{font-size:var(--t-15);line-height:var(--lh-cuerpo)}
.sis-t24{font-size:var(--t-24);letter-spacing:var(--trk-24);line-height:var(--lh-titulo-24)}
.sis-t12{font-size:var(--t-12)}
.sis-tr{font-size:var(--t-80);font-weight:var(--bold);line-height:var(--lh-titular)!important;color:var(--texto)}
.stage.sis-no-st{min-height:140px;padding:var(--s-16) var(--s-24) 48px;place-items:center start;background:var(--fondo)}
@media (max-width:620px){.sis-tr{font-size:var(--t-58)}.sis-muestra{padding:var(--s-24)}}

/* tabla de roles apilada en celular */
@media (max-width:700px){
  .sis-roles,.sis-roles tbody,.sis-roles tr,.sis-roles td{display:block}
  .sis-roles thead{display:none}
  .sis-roles tr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-8) var(--s-16);padding:var(--s-16) 0;border-bottom:var(--borde-ancho) solid var(--borde)}
  .sis-roles td{padding:0;border:0}
  .sis-roles td:first-child{grid-column:1/-1}
  .sis-roles td:nth-child(2){grid-column:1/-1}
  .sis-roles td[data-l]::before{content:attr(data-l);display:block;margin-bottom:4px;font-size:var(--t-12);font-weight:var(--bold);letter-spacing:var(--trk-eyebrow);text-transform:uppercase;color:var(--texto-2)}
  .sis-roles td:first-child span{max-width:none}
}

/* descargas en dos columnas */
.sis .cmp-dl{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--s-48)}
.sis .cmp-dl li{padding:var(--s-12) 0}
@media (max-width:900px){.sis .cmp-dl{grid-template-columns:minmax(0,1fr)}}

/* celular: paleta en filas, retícula más baja, descargas con el botón al lado */
@media (max-width:520px){
  .sis-paleta{gap:var(--s-16)}
  .sis-sw{display:grid;grid-template-columns:64px minmax(0,1fr);column-gap:var(--s-16);row-gap:2px;align-items:start}
  .sis-sw-c{grid-row:1/span 3;width:64px;height:64px}
  .sis-sw>b,.sis-sw>p,.sis-sw-cp{grid-column:2}
}
@media (max-width:700px){
  .sis-ret-f svg{max-height:190px}
  .sis .cmp-dl li{grid-template-columns:minmax(0,1fr) auto}
}