/* /Components/Comunes/Acordeon.razor.rz.scp.css */
.acordeon[b-8b3y4kwplq] {
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-md);
    background: var(--color-superficie);
    overflow: hidden;
}

.acordeon__cabecera[b-8b3y4kwplq] {
    display: flex;
    align-items: center;
    gap: var(--espacio-2);
    width: 100%;
    padding: var(--espacio-3) var(--espacio-4);
    background: transparent;
    border: none;
    font-family: var(--tipo-cuerpo);
    color: var(--color-texto);
    cursor: pointer;
    text-align: left;
}

.acordeon__cabecera:hover[b-8b3y4kwplq] {
    background: var(--color-superficie-tenue);
}

.acordeon__cabecera:focus-visible[b-8b3y4kwplq] {
    outline: none;
    box-shadow: var(--sombra-foco);
}

.acordeon__chevron[b-8b3y4kwplq] {
    display: inline-flex;
    flex: none;
    transition: transform 0.15s ease;
    color: var(--color-texto-tenue);
}

/* El icono "chevron" apunta a la derecha en reposo (m9 18 6-6-6-6): cerrado
   se queda así (0deg), abierto gira 90deg para apuntar hacia abajo. */
.acordeon__chevron--abierto[b-8b3y4kwplq] {
    transform: rotate(90deg);
}

.acordeon__chevron--cerrado[b-8b3y4kwplq] {
    transform: rotate(0deg);
}

.acordeon__titulo[b-8b3y4kwplq] {
    flex: 1;
    font-size: var(--texto-base);
    font-weight: 600;
}

.acordeon__acciones[b-8b3y4kwplq] {
    flex: none;
}

.acordeon__cuerpo[b-8b3y4kwplq] {
    padding: var(--espacio-4);
    border-top: 1px solid var(--color-borde);
}

.acordeon__cuerpo[hidden][b-8b3y4kwplq] {
    display: none;
}
/* /Components/Comunes/AsidoArrastre.razor.rz.scp.css */
/* Pieza 28 (enmienda_74). Sin color: cursor, presencia y transparencia
   sirven igual en claro y en oscuro. */

.asido[b-m3gx07uw8x] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: grab;
    /* Agarrar el asido no inicia una selección de texto. */
    user-select: none;
}

.asido:active[b-m3gx07uw8x] {
    cursor: grabbing;
}

.asido--moviendo[b-m3gx07uw8x] {
    opacity: 0.55;
}
/* /Components/Comunes/Aviso.razor.rz.scp.css */
.aviso[b-2kos26gqof] {
    padding: var(--espacio-3) var(--espacio-4);
    border-radius: var(--radio-md);
    font-family: var(--tipo-cuerpo);
    font-size: var(--texto-sm);
    line-height: 1.45;
    border: 1px solid transparent;
    border-left-width: 4px;
}

/* --- Relleno: texto blanco sobre la base. Los cuatro contrastes estan
       comprobados en §2.2.3 (5.73 / 6.12 / 6.65 / 11.10, minimo 4.5). --- */

.aviso--relleno[b-2kos26gqof] { color: var(--color-sobre-estado); }

.aviso--relleno.aviso--error[b-2kos26gqof]        { background: var(--color-error);        border-color: var(--color-error); }
.aviso--relleno.aviso--advertencia[b-2kos26gqof]  { background: var(--color-aviso);        border-color: var(--color-aviso); }
.aviso--relleno.aviso--exito[b-2kos26gqof]        { background: var(--color-exito);        border-color: var(--color-exito); }
.aviso--relleno.aviso--informacion[b-2kos26gqof]  { background: var(--color-informacion);  border-color: var(--color-informacion); }

/* --- Tenue: fondo, borde y texto propios por severidad (§2.2.2). --- */

.aviso--tenue.aviso--error[b-2kos26gqof] {
    background: var(--color-error-fondo);
    border-color: var(--color-error-borde);
    border-left-color: var(--color-error);
    color: var(--color-error-texto);
}

.aviso--tenue.aviso--advertencia[b-2kos26gqof] {
    background: var(--color-aviso-fondo);
    border-color: var(--color-aviso-borde);
    border-left-color: var(--color-aviso);
    color: var(--color-aviso-texto);
}

.aviso--tenue.aviso--exito[b-2kos26gqof] {
    background: var(--color-exito-fondo);
    border-color: var(--color-exito-borde);
    border-left-color: var(--color-exito);
    color: var(--color-exito-texto);
}

.aviso--tenue.aviso--informacion[b-2kos26gqof] {
    background: var(--color-informacion-fondo);
    border-color: var(--color-informacion-borde);
    border-left-color: var(--color-informacion);
    color: var(--color-informacion-texto);
}
/* /Components/Comunes/BarraAcciones.razor.rz.scp.css */
.barra-acciones[b-3y4tlvbxla] {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: var(--espacio-3);
}
/* /Components/Comunes/BarraFija.razor.rz.scp.css */
.barra-fija[b-tad5mos8xt] {
    position: sticky;
    bottom: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--espacio-4);
    background: var(--color-superficie);
    border-top: 1px solid var(--color-borde);
    box-shadow: var(--sombra-barra);
    padding: var(--espacio-4) var(--espacio-6);
}

.barra-fija__resumen[b-tad5mos8xt],
.barra-fija__controles[b-tad5mos8xt] {
    flex: 1 1 320px;
    font-size: var(--texto-base);
    color: var(--color-texto);
}

.barra-fija__acciones[b-tad5mos8xt] {
    margin-left: auto;
}
/* /Components/Comunes/BarraSecciones.razor.rz.scp.css */
/* S01-36 paso D (enmienda_27): de columna a fila. Mismo patrón visual que
   Pestanas.razor.css — lista horizontal con borde inferior, sección activa
   marcada con --marca-azul — porque en el uso es la misma mecánica de
   navegación, sólo que ésta vive DENTRO de una pestaña. flex-wrap deja que
   angosto envuelva a una segunda línea en vez de desbordar; no hace falta ya
   una excepción de mobile, la fila es la única forma. */

.barra-secciones[b-ket5423o6b] {
    display: flex;
    flex-direction: column;
    gap: var(--espacio-6);
}

.barra-secciones__lista[b-ket5423o6b] {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--espacio-1);
    background: var(--color-superficie);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-md);
    padding: var(--espacio-2);
}

.barra-secciones__seccion[b-ket5423o6b] {
    appearance: none;
    display: inline-flex;
    align-items: center;
    gap: var(--espacio-2);
    background: none;
    border: none;
    border-radius: var(--radio-sm);
    padding: var(--espacio-2) var(--espacio-3);
    font-family: var(--tipo-cuerpo);
    font-size: var(--texto-sm);
    color: var(--color-texto-secundario);
    cursor: pointer;
    text-align: left;
}

.barra-secciones__seccion:hover[b-ket5423o6b] {
    background: var(--color-superficie-tenue);
    color: var(--color-texto);
}

.barra-secciones__seccion:focus-visible[b-ket5423o6b] {
    outline: none;
    box-shadow: var(--sombra-foco);
}

.barra-secciones__seccion--activa[b-ket5423o6b] {
    background: var(--color-informacion-fondo);
    color: var(--color-acento);
    font-weight: 600;
}

.barra-secciones__seccion--activa:hover[b-ket5423o6b] {
    background: var(--color-informacion-fondo);
}

.barra-secciones__seccion:disabled[b-ket5423o6b] {
    color: var(--color-texto-tenue);
    cursor: not-allowed;
}
/* /Components/Comunes/BotonPrimario.razor.rz.scp.css */
/* Prefijo `sv-` (sistema visual) DELIBERADO, no cosmetico.

   El aislamiento de CSS de Blazor solo gana en las propiedades que este
   archivo DECLARA. `app.css` define un `.boton-primario` global heredado con
   `width: 100%`, y como este componente no declaraba `width`, ese valor se
   colaba y el boton salia a todo lo ancho -- lo destapo la propia ruta
   /catalogo al mirarla, no el build ni las pruebas.

   Con el prefijo, ninguna clase de un componente del catalogo puede chocar
   con la hoja global heredada, ni con la que venga. El frente B borrara esas
   reglas de app.css; el prefijo sigue siendo la garantia de que un choque asi
   no puede repetirse. */

.sv-boton-primario[b-uy4nl1u9dc] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--espacio-2);
    box-sizing: border-box;
    padding: var(--espacio-3) var(--espacio-4);
    border: none;
    border-radius: var(--radio-md);
    background: var(--color-accion);
    color: var(--color-sobre-accion);
    font-family: var(--tipo-cuerpo);
    font-size: var(--texto-base);
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.sv-boton-primario:hover:not(:disabled)[b-uy4nl1u9dc] {
    background: var(--color-accion-hover);
}

.sv-boton-primario:focus-visible[b-uy4nl1u9dc] {
    outline: none;
    box-shadow: var(--sombra-foco-fuerte);
}

.sv-boton-primario:disabled[b-uy4nl1u9dc] {
    background: var(--color-inhabilitado);
    cursor: not-allowed;
}

.sv-boton-primario__hilandero[b-uy4nl1u9dc] {
    width: 14px;
    height: 14px;
    border: 2px solid var(--color-sobre-accion);
    border-top-color: transparent;
    border-radius: 50%;
    animation: boton-gira-b-uy4nl1u9dc 0.7s linear infinite;
}

@keyframes boton-gira-b-uy4nl1u9dc {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .sv-boton-primario__hilandero[b-uy4nl1u9dc] { animation: none; }
}
/* /Components/Comunes/BotonSecundario.razor.rz.scp.css */
/* Prefijo `sv-` (sistema visual) DELIBERADO, no cosmetico.

   El aislamiento de CSS de Blazor solo gana en las propiedades que este
   archivo DECLARA. `app.css` define un `.boton-primario` global heredado con
   `width: 100%`, y como este componente no declaraba `width`, ese valor se
   colaba y el boton salia a todo lo ancho -- lo destapo la propia ruta
   /catalogo al mirarla, no el build ni las pruebas.

   Con el prefijo, ninguna clase de un componente del catalogo puede chocar
   con la hoja global heredada, ni con la que venga. El frente B borrara esas
   reglas de app.css; el prefijo sigue siendo la garantia de que un choque asi
   no puede repetirse. */

.sv-boton-secundario[b-wb0husawi4] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--espacio-2);
    box-sizing: border-box;
    padding: var(--espacio-3) var(--espacio-4);
    border: 1.5px solid var(--color-acento);
    border-radius: var(--radio-md);
    background: transparent;
    color: var(--color-acento);
    font-family: var(--tipo-cuerpo);
    font-size: var(--texto-base);
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.sv-boton-secundario:hover:not(:disabled)[b-wb0husawi4] {
    background: var(--color-informacion-fondo);
}

.sv-boton-secundario:focus-visible[b-wb0husawi4] {
    outline: none;
    box-shadow: var(--sombra-foco-fuerte);
}

.sv-boton-secundario:disabled[b-wb0husawi4] {
    border-color: var(--color-inhabilitado);
    color: var(--color-texto-inhabilitado);
    cursor: not-allowed;
}

.sv-boton-secundario__hilandero[b-wb0husawi4] {
    width: 14px;
    height: 14px;
    border: 2px solid var(--color-acento);
    border-top-color: transparent;
    border-radius: 50%;
    animation: boton-sec-gira-b-wb0husawi4 0.7s linear infinite;
}

@keyframes boton-sec-gira-b-wb0husawi4 {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .sv-boton-secundario__hilandero[b-wb0husawi4] { animation: none; }
}
/* /Components/Comunes/CampoArchivo.razor.rz.scp.css */
/* Prefijo `sv-` (sistema visual), mismo motivo que BotonSecundario.razor.css:
   el aislamiento de CSS de Blazor sólo gana en lo que este archivo declara,
   y el prefijo evita que una hoja global heredada se cuele por una
   propiedad que aquí no se fija.

   La etiqueta replica LITERALMENTE los valores de .sv-boton-secundario —no
   es un segundo botón con su propio CSS paralelo, es el mismo aspecto,
   declarado una vez aquí porque una <label> no puede ser BotonSecundario
   (que renderiza <button>) y seguir asociada al <input type="file"> nativo
   por for/id. */

.sv-campo-archivo[b-4amv2f2c5b] {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--espacio-1);
}

/* Oculto de forma ACCESIBLE: nunca display:none ni visibility:hidden —
   ambos sacan el input del árbol de tabulación y del lector de pantalla.
   1x1px, recortado, fuera de flujo, pero presente para teclado/AT.

   ::deep es obligatorio aquí, mismo motivo que en CampoBase.razor.css: el
   <input> real lo renderiza InputFile (componente hijo, pieza compleja de
   §1.2), no esta pieza — el atributo de aislamiento de Blazor sólo se
   estampa en elementos que ESTE archivo escribe directo (la <label> lo
   tiene; el <input> de un componente hijo no), así que sin ::deep la regla
   nunca casaría y el input nativo del sistema operativo quedaría visible. */
.sv-campo-archivo[b-4amv2f2c5b]  .sv-campo-archivo__input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.sv-campo-archivo__etiqueta[b-4amv2f2c5b] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--espacio-2);
    box-sizing: border-box;
    padding: var(--espacio-3) var(--espacio-4);
    border: 1.5px solid var(--color-acento);
    border-radius: var(--radio-md);
    background: transparent;
    color: var(--color-acento);
    font-family: var(--tipo-cuerpo);
    font-size: var(--texto-base);
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.sv-campo-archivo__etiqueta:hover[b-4amv2f2c5b] {
    background: var(--color-informacion-fondo);
}

/* El foco vive en el <input> oculto, no en la <label> — se refleja aquí
   con el selector de hermano adyacente, por eso el <input> va ANTES que la
   <label> en el marcado. ::deep otra vez porque el lado izquierdo del
   selector (el propio <input>) lo renderiza InputFile. */
.sv-campo-archivo[b-4amv2f2c5b]  .sv-campo-archivo__input:focus-visible + .sv-campo-archivo__etiqueta {
    outline: none;
    box-shadow: var(--sombra-foco-fuerte);
}

.sv-campo-archivo__ayuda[b-4amv2f2c5b] {
    font-size: var(--texto-xs);
    color: var(--color-texto-tenue);
}
/* /Components/Comunes/CampoCasilla.razor.rz.scp.css */
.casilla[b-yfzx7jswpr] {
    display: inline-flex;
    align-items: baseline;
    gap: var(--espacio-2);
    font-family: var(--tipo-cuerpo);
    font-size: var(--texto-sm);
    color: var(--color-texto);
    cursor: pointer;
}

.casilla input[b-yfzx7jswpr] {
    accent-color: var(--color-acento);
    width: var(--espacio-4);
    height: var(--espacio-4);
    flex: none;
    translate: 0 2px;
}

.casilla:focus-within[b-yfzx7jswpr] {
    outline: none;
    border-radius: var(--radio-sm);
    box-shadow: var(--sombra-foco);
}

.casilla--inhabilitada[b-yfzx7jswpr] {
    color: var(--color-texto-inhabilitado);
    cursor: not-allowed;
}
/* /Components/Comunes/CampoInterruptor.razor.rz.scp.css */
.interruptor[b-afi0r8hhyw] {
    display: flex;
    align-items: flex-start;
    gap: var(--espacio-3);
    font-family: var(--tipo-cuerpo);
    cursor: pointer;
}

.interruptor--inhabilitado[b-afi0r8hhyw] {
    cursor: not-allowed;
}

.interruptor[b-afi0r8hhyw]  input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin: 2px 0 0 0;
    accent-color: var(--color-acento);
    flex: none;
    cursor: inherit;
}

.interruptor[b-afi0r8hhyw]  input[type="checkbox"]:focus-visible {
    outline: none;
    box-shadow: var(--sombra-foco-fuerte);
    border-radius: var(--radio-sm);
}

.interruptor__textos[b-afi0r8hhyw] {
    display: flex;
    flex-direction: column;
    gap: var(--espacio-1);
}

.interruptor__etiqueta[b-afi0r8hhyw] {
    font-size: var(--texto-sm);
    font-weight: 600;
    color: var(--color-texto-secundario);
}

.interruptor__ayuda[b-afi0r8hhyw] {
    font-size: var(--texto-xs);
    color: var(--color-texto-tenue);
}

.interruptor--inhabilitado .interruptor__etiqueta[b-afi0r8hhyw],
.interruptor--inhabilitado .interruptor__ayuda[b-afi0r8hhyw] {
    color: var(--color-texto-inhabilitado);
}
/* /Components/Comunes/ControlRangoPeriodos.razor.rz.scp.css */
.control-rango[b-q39ypg4mt5] {
    display: grid;
    grid-template-columns: repeat(12, minmax(40px, 1fr));
    gap: 1px;
    background: var(--color-borde);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-sm);
    overflow-x: auto;
    user-select: none;
    touch-action: none;
}

.control-rango--deshabilitado[b-q39ypg4mt5] {
    opacity: 0.6;
}

.control-rango__segmento[b-q39ypg4mt5] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--espacio-1);
    padding: var(--espacio-2) var(--espacio-1);
    min-height: 52px;
    border: none;
    background: var(--color-superficie);
    color: var(--color-texto-tenue);
    font-family: var(--tipo-cuerpo);
    cursor: pointer;
}

.control-rango__segmento:disabled[b-q39ypg4mt5] {
    cursor: not-allowed;
}

.control-rango__segmento:focus-visible[b-q39ypg4mt5] {
    outline: none;
    box-shadow: inset var(--sombra-foco);
    position: relative;
    z-index: 1;
}

.control-rango__mes[b-q39ypg4mt5] {
    font-size: var(--texto-xs);
    font-weight: 600;
}

.control-rango__estado[b-q39ypg4mt5] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 16px;
}

.control-rango__segmento--sin-sondeo[b-q39ypg4mt5] {
    background: var(--color-superficie-tenue);
    color: var(--color-texto-inhabilitado);
}

.control-rango__segmento--migrable[b-q39ypg4mt5] {
    background: var(--color-informacion-fondo);
    color: var(--color-informacion-texto);
}

.control-rango__segmento--palomita[b-q39ypg4mt5] {
    background: var(--color-exito-fondo);
    color: var(--color-exito-texto);
}

.control-rango__segmento--reabierto[b-q39ypg4mt5] {
    background: var(--color-aviso-fondo);
    color: var(--color-aviso-texto);
}

.control-rango__segmento--abierto[b-q39ypg4mt5] {
    background: var(--color-error-fondo);
    color: var(--color-error-texto);
}

.control-rango__segmento--en-rango[b-q39ypg4mt5] {
    box-shadow: inset 0 -3px 0 var(--color-accion);
}
/* /Components/Comunes/Desplegable.razor.rz.scp.css */
.desplegable__velo[b-au6af2lqew] {
    position: fixed;
    inset: 0;
    background: var(--velo-modal);
    z-index: 40;
}

.desplegable[b-au6af2lqew] {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 41;
    width: min(420px, 100vw);
    background: var(--color-superficie);
    box-shadow: var(--sombra-modal);
    display: flex;
    flex-direction: column;
}

.desplegable__cabecera[b-au6af2lqew] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--espacio-3);
    padding: var(--espacio-4);
    border-bottom: 1px solid var(--color-borde);
}

.desplegable__titulo[b-au6af2lqew] {
    margin: 0;
    font-family: var(--tipo-titulo);
    font-size: var(--texto-lg);
    color: var(--color-texto);
}

.desplegable__cerrar[b-au6af2lqew] {
    appearance: none;
    background: none;
    border: none;
    border-radius: var(--radio-sm);
    padding: var(--espacio-1);
    color: var(--color-texto-secundario);
    cursor: pointer;
    line-height: 0;
}

.desplegable__cerrar:hover[b-au6af2lqew] {
    color: var(--color-texto);
}

.desplegable__cerrar:focus-visible[b-au6af2lqew] {
    outline: none;
    box-shadow: var(--sombra-foco);
}

.desplegable__cuerpo[b-au6af2lqew] {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: var(--espacio-4);
}

.desplegable__pie[b-au6af2lqew] {
    border-top: 1px solid var(--color-borde);
    padding: var(--espacio-4);
}

@media (max-width: 480px) {
    .desplegable[b-au6af2lqew] {
        width: 100vw;
    }
}
/* /Components/Comunes/EditorTexto.razor.rz.scp.css */
/* Pieza 18 (enmienda 14): sólo bordes y aire con tokens — el cromo interno
   (barra, mangas de formato) es el de Quill con los tokens del sistema,
   mismo criterio que las piezas MudBlazor de §1.2. */
.editor-texto__etiqueta[b-z0qss5cju6] {
    font-size: var(--tipografia-etiqueta-fija);
    font-weight: var(--tipografia-etiqueta-peso);
    color: var(--color-texto);
    margin: 0 0 var(--espacio-1);
}

.editor-texto__quill[b-z0qss5cju6] {
    border: 1px solid var(--color-borde-campo);
    border-radius: var(--radio-campo);
    background: var(--color-superficie-campo);
    color: var(--color-texto);
}

.editor-texto :global(.ql-toolbar)[b-z0qss5cju6] {
    background: var(--color-superficie);
    border-color: var(--color-borde-campo);
    border-bottom: 0;
}

.editor-texto :global(.ql-container)[b-z0qss5cju6] {
    background: var(--color-superficie-campo);
    border-color: var(--color-borde-campo);
    color: var(--color-texto);
    font-size: var(--tipografia-cuerpo);
}

.editor-texto :global(.ql-snow .ql-stroke)[b-z0qss5cju6],
.editor-texto :global(.ql-snow .ql-stroke-miter)[b-z0qss5cju6] {
    stroke: var(--color-texto-secundario);
}

.editor-texto :global(.ql-snow .ql-fill)[b-z0qss5cju6],
.editor-texto :global(.ql-snow .ql-stroke.ql-fill)[b-z0qss5cju6] {
    fill: var(--color-texto-secundario);
}

.editor-texto :global(.ql-snow .ql-picker)[b-z0qss5cju6] {
    color: var(--color-texto-secundario);
}

.editor-texto :global(.ql-snow button:hover .ql-stroke)[b-z0qss5cju6],
.editor-texto :global(.ql-snow button.ql-active .ql-stroke)[b-z0qss5cju6],
.editor-texto :global(.ql-snow .ql-picker-label:hover .ql-stroke)[b-z0qss5cju6],
.editor-texto :global(.ql-snow .ql-picker-label.ql-active .ql-stroke)[b-z0qss5cju6] {
    stroke: var(--color-acento);
}

.editor-texto :global(.ql-snow button:hover .ql-fill)[b-z0qss5cju6],
.editor-texto :global(.ql-snow button.ql-active .ql-fill)[b-z0qss5cju6],
.editor-texto :global(.ql-snow .ql-picker-label:hover .ql-fill)[b-z0qss5cju6],
.editor-texto :global(.ql-snow .ql-picker-label.ql-active .ql-fill)[b-z0qss5cju6] {
    fill: var(--color-acento);
}

.editor-texto :global(.ql-snow .ql-picker-options)[b-z0qss5cju6],
.editor-texto :global(.ql-snow .ql-tooltip)[b-z0qss5cju6] {
    background: var(--color-superficie);
    border-color: var(--color-borde-campo);
    color: var(--color-texto);
    box-shadow: var(--sombra-tarjeta);
}

.editor-texto :global(.ql-snow .ql-tooltip input[type="text"])[b-z0qss5cju6] {
    background: var(--color-superficie-campo);
    border-color: var(--color-borde-campo);
    color: var(--color-texto);
}

.editor-texto :global(.ql-editor.ql-blank::before)[b-z0qss5cju6] {
    color: var(--color-texto-tenue);
}

.editor-texto :global(.ql-editor blockquote)[b-z0qss5cju6],
.editor-texto :global(.ql-editor td)[b-z0qss5cju6] {
    border-color: var(--color-borde);
}

.editor-texto :global(.ql-snow a)[b-z0qss5cju6] {
    color: var(--color-acento);
}

.editor-texto__ayuda[b-z0qss5cju6],
.editor-texto__error[b-z0qss5cju6] {
    margin: var(--espacio-1) 0 0;
    font-size: var(--tipografia-pie);
    color: var(--color-texto-tenue);
}

.editor-texto__error[b-z0qss5cju6] {
    color: var(--color-error);
}

.editor-texto__lectura[b-z0qss5cju6] {
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-campo);
    padding: var(--espacio-3);
    background: var(--color-superficie-tenue);
    font-size: var(--tipografia-cuerpo);
}
/* /Components/Comunes/EstadoVacio.razor.rz.scp.css */
.vacio[b-2kc0osh8lx] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--espacio-4);
    padding: var(--espacio-12) var(--espacio-6);
    text-align: center;
    font-family: var(--tipo-cuerpo);
}

.vacio__mensaje[b-2kc0osh8lx] {
    margin: 0;
    max-width: 46ch;
    color: var(--color-texto-tenue);
    font-size: var(--texto-sm);
}
/* /Components/Comunes/FilaOpcion.razor.rz.scp.css */
/* Prefijo `sv-` — misma convención declarada en BotonSecundario.razor.css:
   ninguna clase de una pieza de composición debe poder chocar con la hoja
   global heredada. */

.sv-fila-opcion[b-7yxbgm7bc8] {
    display: flex;
    flex-direction: column;
    gap: var(--espacio-3);
    padding: var(--espacio-4) 0;
    border-bottom: 1px solid var(--color-borde);
}

/* El separador no lo pinta la última fila de su grupo (enmienda_37 §2.2,
   plan S01-39 paso 2): se resuelve aquí con :last-child, no borrando el
   borde a mano desde la página que compone. Se comprobó en el render real
   que GrupoOpciones no renderiza nada después de la última FilaOpcion, así
   que el selector acierta sobre el DOM final. */
.sv-fila-opcion:last-child[b-7yxbgm7bc8] {
    border-bottom: none;
    padding-bottom: 0;
}

.sv-fila-opcion__cabecera[b-7yxbgm7bc8] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--espacio-4);
}

.sv-fila-opcion__texto[b-7yxbgm7bc8] {
    display: flex;
    flex-direction: column;
    gap: var(--espacio-1);
    min-width: 0;
    flex: 1 1 auto;
}

.sv-fila-opcion__titulo-linea[b-7yxbgm7bc8] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--espacio-2);
}

.sv-fila-opcion__titulo[b-7yxbgm7bc8] {
    font-family: var(--tipo-cuerpo);
    font-size: var(--texto-base);
    font-weight: 600;
    color: var(--color-texto);
}

.sv-fila-opcion__ayuda[b-7yxbgm7bc8] {
    margin: 0;
    font-family: var(--tipo-cuerpo);
    font-size: var(--texto-xs);
    color: var(--color-texto-tenue);
}

.sv-fila-opcion__controles[b-7yxbgm7bc8] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--espacio-4);
}

/* Los campos (CampoNumero/CampoTexto/CampoSelector) llegan sin ancho propio
   -- su `.campo` sólo fija el de su `<input>` al 100% del contenedor. Sin
   una base aquí, cada uno colapsa al ancho intrínseco del control nativo. */
.sv-fila-opcion__controles[b-7yxbgm7bc8]  .campo {
    flex: 1 1 200px;
    min-width: 160px;
}

/* Corrección del usuario en revisión (2026-08-24): un numberbox sólo enseña
   2-3 dígitos y las flechas nativas -- estirarlo a 200px como un CampoTexto o
   CampoSelector es aire puro ("a escala manual... no ocupa casi nada de largo
   realmente"). Por :has(), no por una clase nueva escrita en la página
   (R3/R4): la pieza decide su propio ancho según lo que contiene. */
.sv-fila-opcion__controles[b-7yxbgm7bc8]  .campo:has(input[type="number"]) {
    flex: 0 1 120px;
    min-width: 90px;
}

.sv-fila-opcion__accion[b-7yxbgm7bc8] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 36px;
    height: 36px;
    flex: none;
    border: 1px solid var(--color-borde-campo);
    border-radius: var(--radio-md);
    background: var(--color-superficie);
    color: var(--color-texto-secundario);
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.sv-fila-opcion__accion:hover:not(:disabled)[b-7yxbgm7bc8] {
    background: var(--color-informacion-fondo);
}

.sv-fila-opcion__accion:focus-visible[b-7yxbgm7bc8] {
    outline: none;
    box-shadow: var(--sombra-foco-fuerte);
}

.sv-fila-opcion__accion:disabled[b-7yxbgm7bc8] {
    border-color: var(--color-inhabilitado);
    color: var(--color-texto-inhabilitado);
    cursor: not-allowed;
}
/* /Components/Comunes/Formulario.razor.rz.scp.css */
.formulario[b-3htp83996x] {
    display: flex;
    flex-direction: column;
    gap: var(--espacio-4);
}
/* /Components/Comunes/GloboInformacion.razor.rz.scp.css */
.globo[b-1rztinltbz] {
    position: relative;
    display: inline-flex;
}

.globo__disparador[b-1rztinltbz] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    padding: 0;
    margin: 0;
    color: inherit;
    cursor: help;
    border-radius: var(--radio-sm);
}

.globo__disparador:focus-visible[b-1rztinltbz] {
    outline: none;
    box-shadow: var(--sombra-foco);
}

.globo__panel[b-1rztinltbz] {
    position: absolute;
    z-index: 30;
    bottom: calc(100% + var(--espacio-2));
    left: 50%;
    transform: translateX(-50%);
    min-width: 220px;
    max-width: 320px;
    padding: var(--espacio-3);
    border-radius: var(--radio-md);
    border: 1px solid var(--color-borde);
    background: var(--color-superficie);
    color: var(--color-texto);
    font-family: var(--tipo-cuerpo);
    font-size: var(--texto-xs);
    line-height: 1.4;
    box-shadow: var(--sombra-tarjeta);
    text-align: left;
    pointer-events: none;

    opacity: 0;
    visibility: hidden;
    transition: opacity 0s linear 0s, visibility 0s linear 0s;
}

.globo:hover .globo__panel[b-1rztinltbz] {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.15s ease 1s, visibility 0s linear 1s;
}

.globo:focus-within .globo__panel[b-1rztinltbz] {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.1s ease 0s, visibility 0s linear 0s;
}
/* /Components/Comunes/GrupoOpciones.razor.rz.scp.css */
/* Prefijo `sv-` — misma convención declarada en BotonSecundario.razor.css:
   ninguna clase de una pieza de composición debe poder chocar con la hoja
   global heredada. */

.sv-grupo-opciones + .sv-grupo-opciones[b-e11o0v4ya9] {
    /* El ritmo entre dos grupos consecutivos, no dentro de uno: el primero no
       lleva aire por encima que no le corresponde. */
    margin-top: var(--espacio-6);
}

/* Corrección del usuario en revisión (2026-08-24, S01-39): el título nació
   en --texto-sm/600/color-texto-secundario, MÁS CHICO que el título de cada
   fila (--texto-base/600/color-texto) — jerarquía invertida, «no se ve una
   jerarquía de secciones». Se descarta el fondo relleno como arreglo: es
   justo lo que esta pieza evita a propósito (comentario de GrupoOpciones.razor
   — sin relleno, para no leerse como tarjeta anidada, razón de R9). El
   principio correcto es tamaño + peso + color, no fondo: un paso de escala
   por encima de la fila (--texto-lg, el mismo que usa TarjetaPanel.__titulo),
   más peso (700 contra 600) y el color de marca de los títulos de tarjeta
   (--marca-navy) en vez del secundario — tres ejes de énfasis a la vez,
   ninguno nuevo (mismos tokens ya usados en otras piezas del catálogo). */
.sv-grupo-opciones__titulo[b-e11o0v4ya9] {
    margin: 0 0 var(--espacio-3);
    padding-bottom: var(--espacio-2);
    border-bottom: 1px solid var(--color-borde);
    font-family: var(--tipo-cuerpo);
    font-size: var(--texto-lg);
    font-weight: 700;
    color: var(--color-titulo);
}

.sv-grupo-opciones__filas[b-e11o0v4ya9] {
    display: flex;
    flex-direction: column;
}
/* /Components/Comunes/Icono.razor.rz.scp.css */
/* Enmienda 18 §2: un solo tamaño base, 16×16, alineado con --texto-sm. Sin
   color propio: el SVG usa currentColor y hereda el par de contraste ya
   comprobado del texto que lo acompaña. */
.icono[b-az5lyhvds7] {
    display: inline-block;
    vertical-align: -2px;
    flex: none;
}
/* /Components/Comunes/Insignia.razor.rz.scp.css */
.insignia[b-0n5vtll9ko] {
    display: inline-flex;
    align-items: center;
    gap: var(--espacio-2);
    padding: var(--espacio-1) var(--espacio-3);
    border: 1px solid transparent;
    border-radius: 999px;
    font-family: var(--tipo-cuerpo);
    font-size: var(--texto-xs);
    font-weight: 600;
    white-space: nowrap;
}

.insignia__punto[b-0n5vtll9ko] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex: none;
}

.insignia--exito[b-0n5vtll9ko] {
    background: var(--color-exito-fondo);
    border-color: var(--color-exito-borde);
    color: var(--color-exito-texto);
}

.insignia--advertencia[b-0n5vtll9ko] {
    background: var(--color-aviso-fondo);
    border-color: var(--color-aviso-borde);
    color: var(--color-aviso-texto);
}

.insignia--error[b-0n5vtll9ko] {
    background: var(--color-error-fondo);
    border-color: var(--color-error-borde);
    color: var(--color-error-texto);
}

.insignia--informacion[b-0n5vtll9ko] {
    background: var(--color-informacion-fondo);
    border-color: var(--color-informacion-borde);
    color: var(--color-informacion-texto);
}

.insignia--neutra[b-0n5vtll9ko] {
    background: var(--color-superficie-tenue);
    border-color: var(--color-borde);
    color: var(--color-texto-tenue);
}
/* /Components/Comunes/Interno/CampoBase.razor.rz.scp.css */
.campo[b-7tqdcl7clk] {
    display: flex;
    flex-direction: column;
    gap: var(--espacio-1);
    font-family: var(--tipo-cuerpo);
}

.campo__etiqueta[b-7tqdcl7clk] {
    font-size: var(--texto-sm);
    font-weight: 600;
    color: var(--color-texto-secundario);
}

.campo__requerido[b-7tqdcl7clk] {
    color: var(--color-error);
    margin-left: var(--espacio-1);
}

.campo__control[b-7tqdcl7clk] {
    display: block;
}

/* El control lo renderiza el componente hijo: hace falta ::deep. */

.campo__control[b-7tqdcl7clk]  input,
.campo__control[b-7tqdcl7clk]  select {
    width: 100%;
    box-sizing: border-box;
    padding: var(--espacio-2) var(--espacio-3);
    border: 1px solid var(--color-borde-campo);
    border-radius: var(--radio-md);
    background: var(--color-superficie-campo);
    color: var(--color-texto);
    font-family: inherit;
    font-size: var(--texto-base);
}

.campo__control[b-7tqdcl7clk]  input:focus,
.campo__control[b-7tqdcl7clk]  select:focus {
    outline: none;
    border-color: var(--color-acento);
    box-shadow: var(--sombra-foco);
}

.campo__control--error[b-7tqdcl7clk]  input,
.campo__control--error[b-7tqdcl7clk]  select {
    border-color: var(--color-error);
}

.campo__control--error[b-7tqdcl7clk]  input:focus,
.campo__control--error[b-7tqdcl7clk]  select:focus {
    box-shadow: 0 0 0 3px var(--color-error-borde);
}

.campo__control[b-7tqdcl7clk]  input:disabled,
.campo__control[b-7tqdcl7clk]  select:disabled {
    background: var(--color-superficie-tenue);
    color: var(--color-texto-inhabilitado);
    cursor: not-allowed;
}

.campo__control[b-7tqdcl7clk]  input[readonly] {
    background: var(--color-superficie-tenue);
    color: var(--color-texto-secundario);
}

.campo__ayuda[b-7tqdcl7clk] {
    font-size: var(--texto-xs);
    color: var(--color-texto-tenue);
}

.campo__error[b-7tqdcl7clk] {
    font-size: var(--texto-xs);
    font-weight: 600;
    color: var(--color-error-texto);
}

.campo--inhabilitado .campo__etiqueta[b-7tqdcl7clk] {
    color: var(--color-texto-inhabilitado);
}
/* /Components/Comunes/MarcoImagen.razor.rz.scp.css */
/* Prefijo `sv-` (sistema visual), mismo motivo que CampoArchivo.razor.css:
   el aislamiento de CSS de Blazor sólo gana en lo que este archivo declara.

   133px de alto FIJO (no min-height; 400px/3, ajuste de fidelidad sobre la
   enmienda_30 — el marco original se veía desproporcionado): el espacio no
   se reduce por una imagen chica, así que las dos columnas de una Rejilla
   miden siempre lo mismo sin importar el tamaño real de cada imagen. Ancho
   al 100% de la columna donde viva, para no desbordar la Rejilla que la
   contiene. object-fit: contain respeta la relación de aspecto de la
   imagen real — nunca la deforma ni la recorta. */

.sv-marco-imagen[b-tg0np3n7te] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 133px;
    flex: none;
    overflow: hidden;
}

.sv-marco-imagen img[b-tg0np3n7te] {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}
/* /Components/Comunes/PaginaPanel.razor.rz.scp.css */
.pagina[b-kxfbz8a67s] {
    display: flex;
    flex-direction: column;
    gap: var(--espacio-6);
    margin: 0 auto;
    padding: var(--espacio-8) var(--espacio-6) var(--espacio-12);
    font-family: var(--tipo-cuerpo);
    color: var(--color-texto);
}

.pagina--lectura[b-kxfbz8a67s] {
    max-width: 1180px;
}

.pagina--datos[b-kxfbz8a67s] {
    max-width: 1600px;
}

.pagina__cabecera[b-kxfbz8a67s] {
    display: flex;
    flex-direction: column;
    gap: var(--espacio-1);
}

.pagina__titulo[b-kxfbz8a67s] {
    margin: 0;
    font-family: var(--tipo-titulo);
    font-size: var(--texto-xl);
    font-weight: 600;
    color: var(--color-titulo);
    text-wrap: balance;
}

.pagina__subtitulo[b-kxfbz8a67s] {
    margin: 0;
    max-width: 70ch;
    font-size: var(--texto-base);
    color: var(--color-texto-tenue);
}

.pagina__separador[b-kxfbz8a67s] {
    width: 100%;
    margin: 0;
    border: 0;
    border-top: 1px solid var(--color-borde);
}

.pagina__contenido[b-kxfbz8a67s] {
    display: flex;
    flex-direction: column;
    gap: var(--espacio-6);
}
/* /Components/Comunes/Pestanas.razor.rz.scp.css */
.pestanas__lista[b-z73z3zk5ol] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--espacio-1);
    border-bottom: 1px solid var(--color-borde);
}

.pestanas__pestana[b-z73z3zk5ol] {
    appearance: none;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: var(--radio-sm) var(--radio-sm) 0 0;
    padding: var(--espacio-2) var(--espacio-3);
    font-family: var(--tipo-cuerpo);
    font-size: var(--texto-sm);
    color: var(--color-texto-secundario);
    cursor: pointer;
}

.pestanas__pestana:hover[b-z73z3zk5ol] {
    color: var(--color-texto);
}

.pestanas__pestana:focus-visible[b-z73z3zk5ol] {
    outline: none;
    box-shadow: var(--sombra-foco);
}

.pestanas__pestana--activa[b-z73z3zk5ol] {
    color: var(--color-acento);
    border-bottom-color: var(--color-acento);
    font-weight: 600;
}

.pestanas__pestana:disabled[b-z73z3zk5ol] {
    color: var(--color-texto-inhabilitado);
    cursor: not-allowed;
}

.pestanas__panel[b-z73z3zk5ol] {
    padding-top: var(--espacio-6);
}

.pestanas__panel:focus-visible[b-z73z3zk5ol] {
    outline: none;
    box-shadow: var(--sombra-foco);
    border-radius: var(--radio-sm);
}
/* /Components/Comunes/Rejilla.razor.rz.scp.css */
.rejilla[b-fb9ybgp77b] {
    display: grid;
    gap: var(--espacio-4);
    align-items: start;
}

.rejilla--dos[b-fb9ybgp77b] { grid-template-columns: repeat(auto-fit, minmax(max(min(320px, 100%), (100% - var(--espacio-4)) / 2), 1fr)); }
.rejilla--tres[b-fb9ybgp77b] { grid-template-columns: repeat(auto-fit, minmax(max(min(280px, 100%), (100% - 2 * var(--espacio-4)) / 3), 1fr)); }
/* /Components/Comunes/TablaPanel.razor.rz.scp.css */
.tabla-envoltura[b-j0lbjrzqzs] {
    /* La tabla se desplaza dentro de su propio contenedor: el cuerpo de la
       pagina nunca debe desplazarse en horizontal. */
    overflow-x: auto;
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-md);
    background: var(--color-superficie);
}

.tabla[b-j0lbjrzqzs] {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--tipo-cuerpo);
    font-size: var(--texto-sm);
    /* Las cifras de un panel de reporteria se leen en columna: sin esto, los
       digitos de distinto ancho descuadran el alineado. */
    font-variant-numeric: tabular-nums;
}

.tabla thead th[b-j0lbjrzqzs] {
    text-align: left;
    padding: var(--espacio-3) var(--espacio-4);
    background: var(--color-superficie-tenue);
    border-bottom: 1px solid var(--color-borde);
    font-size: var(--texto-xs);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-texto-tenue);
    white-space: nowrap;
}

.tabla[b-j0lbjrzqzs]  tbody td {
    padding: var(--espacio-3) var(--espacio-4);
    border-bottom: 1px solid var(--color-borde);
    color: var(--color-texto-secundario);
    /* El renglon arranca de arriba (instruccion literal del usuario,
       2026-08-27: los campos de una fila de tabla deben quedar a la misma
       altura aunque uno de ellos traiga texto de ayuda). Sin esto, la
       celda hereda el centrado vertical del navegador y las celdas bajas
       --un campo sin ayuda junto a uno con ella-- flotan mas abajo. */
    vertical-align: top;
}

.tabla[b-j0lbjrzqzs]  tbody tr:last-child td {
    border-bottom: none;
}

/* Presentación para filas en pleno arrastre (enmienda_74): regla inerte
   hasta que una pantalla pone la clase en las celdas de su fila. */
.tabla[b-j0lbjrzqzs]  tbody td.fila-en-movimiento {
    opacity: 0.55;
}

.tabla__grupo th[b-j0lbjrzqzs] {
    text-align: left;
    padding: var(--espacio-2) var(--espacio-4);
    background: var(--color-superficie-tenue);
    border-bottom: 1px solid var(--color-borde);
    font-size: var(--texto-xs);
    font-weight: 600;
    color: var(--color-texto-secundario);
}
/* /Components/Comunes/TarjetaPanel.razor.rz.scp.css */
.tarjeta[b-2eqfz451uz] {
    display: flex;
    flex-direction: column;
    background: var(--color-superficie);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-md);
    overflow: hidden;
}

/* Dos columnas desde la enmienda_34: el texto a la izquierda y las Acciones
   arriba a la derecha, como en PaginaPanel. Sin Acciones hay un solo hijo y
   el texto ocupa el ancho igual que antes — ninguna tarjeta ya construida se
   mueve. `flex-wrap` con base de 320px apila la acción bajo el título cuando
   la tarjeta es angosta, en vez de estrujar ambos. */
.tarjeta__cabecera[b-2eqfz451uz] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--espacio-4);
    padding: var(--espacio-4) var(--espacio-6) 0;
}

.tarjeta__cabecera-texto[b-2eqfz451uz] {
    flex: 1 1 320px;
}

.tarjeta__acciones[b-2eqfz451uz] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--espacio-2);
}

.tarjeta__titulo[b-2eqfz451uz] {
    margin: 0;
    font-family: var(--tipo-titulo);
    font-size: var(--texto-lg);
    font-weight: 600;
    color: var(--color-titulo);
}

.tarjeta__subtitulo[b-2eqfz451uz] {
    margin: var(--espacio-1) 0 0;
    font-family: var(--tipo-cuerpo);
    font-size: var(--texto-sm);
    color: var(--color-texto-tenue);
}

.tarjeta__cuerpo[b-2eqfz451uz] {
    /* Apila con el mismo ritmo que PaginaPanel (enmienda 11): sin esto, dos
       componentes dentro de una misma tarjeta quedaban pegados. */
    display: flex;
    flex-direction: column;
    gap: var(--espacio-6);
    padding: var(--espacio-6);
    font-family: var(--tipo-cuerpo);
    color: var(--color-texto);
}

.tarjeta__pie[b-2eqfz451uz] {
    padding: var(--espacio-3) var(--espacio-6);
    border-top: 1px solid var(--color-borde);
    background: var(--color-superficie-tenue);
    font-family: var(--tipo-cuerpo);
    font-size: var(--texto-xs);
    color: var(--color-texto-tenue);
}
/* /Components/Layout/ControlCambiarContrasena.razor.rz.scp.css */
/* Reproduce el aspecto de .sv-sidebar__tema/.sv-sidebar__salir
   (MainLayout.razor.css) con los mismos tokens del sidebar -- el
   aislamiento de CSS de Blazor no deja que ese archivo alcance este
   componente, así que la regla vive aquí, no allá. */

.cambiar-clave[b-5mkx9nommk] {
    align-items: center;
    background: none;
    border: 1px solid transparent;
    border-radius: var(--radio-md);
    box-sizing: border-box;
    color: var(--color-sidebar);
    cursor: pointer;
    display: flex;
    font: inherit;
    font-size: var(--texto-sm);
    gap: var(--espacio-3);
    min-height: 44px;
    padding: var(--espacio-2) var(--espacio-3);
    text-align: left;
    width: 100%;
}

.cambiar-clave:hover[b-5mkx9nommk],
.cambiar-clave:focus-visible[b-5mkx9nommk] {
    background: var(--fondo-sidebar-tenue);
    border-color: var(--borde-sidebar-tenue);
    color: var(--color-sidebar-fuerte);
    outline: none;
}

.cambiar-clave:focus-visible[b-5mkx9nommk] {
    box-shadow: var(--sombra-foco-fuerte);
}

.cambiar-clave__texto[b-5mkx9nommk] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cambiar-clave__campos[b-5mkx9nommk] {
    display: flex;
    flex-direction: column;
    gap: var(--espacio-3);
}

/* Enmienda 39 §9: plegado, sólo el icono con nombre accesible. */
html[data-sidebar-estado="plegado"] .cambiar-clave__texto[b-5mkx9nommk] {
    display: none;
}

html[data-sidebar-estado="plegado"] .cambiar-clave[b-5mkx9nommk] {
    justify-content: center;
    padding-left: var(--espacio-2);
    padding-right: var(--espacio-2);
}

@media (max-width: 768px) {
    html[data-sidebar-estado="plegado"] .cambiar-clave__texto[b-5mkx9nommk] {
        display: initial;
    }

    html[data-sidebar-estado="plegado"] .cambiar-clave[b-5mkx9nommk] {
        justify-content: flex-start;
        padding-left: var(--espacio-3);
        padding-right: var(--espacio-3);
    }
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
.sv-casco[b-hafqwxzomk] {
    display: flex;
    min-height: 100vh;
}

.sv-sidebar[b-hafqwxzomk] {
    background: linear-gradient(135deg, var(--fondo-sidebar), var(--fondo-sidebar-profundo));
    box-sizing: border-box;
    color: var(--color-sidebar);
    display: flex;
    flex: 0 0 280px;
    flex-direction: column;
    height: 100vh;
    padding: var(--espacio-3);
    position: sticky;
    top: 0;
    transition: flex-basis 160ms ease, width 160ms ease;
    width: 280px;
    z-index: 30;
}

.sv-sidebar__control[b-hafqwxzomk],
.sv-sidebar__abrir-movil[b-hafqwxzomk] {
    align-items: center;
    background: none;
    border: 1px solid transparent;
    border-radius: var(--radio-md);
    color: var(--color-sidebar);
    cursor: pointer;
    display: inline-flex;
    height: 48px;
    justify-content: center;
    padding: 0;
    width: 48px;
}

.sv-sidebar__control[b-hafqwxzomk] {
    left: var(--espacio-3);
    position: absolute;
    top: var(--espacio-3);
}

.sv-sidebar__abrir-movil[b-hafqwxzomk] {
    height: 44px;
    width: 44px;
}

.sv-sidebar__control:hover[b-hafqwxzomk],
.sv-sidebar__control:focus-visible[b-hafqwxzomk],
.sv-sidebar__fila:hover[b-hafqwxzomk],
.sv-sidebar__fila:focus-visible[b-hafqwxzomk],
.sv-sidebar__tema:hover[b-hafqwxzomk],
.sv-sidebar__tema:focus-visible[b-hafqwxzomk],
.sv-sidebar__salir:hover[b-hafqwxzomk],
.sv-sidebar__salir:focus-visible[b-hafqwxzomk],
.sv-sidebar__flotante-fila:hover[b-hafqwxzomk],
.sv-sidebar__flotante-fila:focus-visible[b-hafqwxzomk] {
    background: var(--fondo-sidebar-tenue);
    border-color: var(--borde-sidebar-tenue);
    color: var(--color-sidebar-fuerte);
    outline: none;
}

.sv-sidebar__control:focus-visible[b-hafqwxzomk],
.sv-sidebar__fila:focus-visible[b-hafqwxzomk],
.sv-sidebar__tema:focus-visible[b-hafqwxzomk],
.sv-sidebar__salir:focus-visible[b-hafqwxzomk],
.sv-sidebar__flotante-fila:focus-visible[b-hafqwxzomk],
.sv-sidebar__abrir-movil:focus-visible[b-hafqwxzomk] {
    box-shadow: var(--sombra-foco-fuerte);
}

.sv-sidebar__icono-desplegar[b-hafqwxzomk] {
    display: none;
}

.sv-sidebar__navegacion[b-hafqwxzomk] {
    flex: 1;
    margin-top: 60px;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
}

.sv-sidebar__nivel[b-hafqwxzomk] {
    display: flex;
    flex-direction: column;
    gap: var(--espacio-1);
    list-style: none;
    margin: 0;
    padding: 0;
}

.sv-sidebar__nivel--2[b-hafqwxzomk] {
    border-left: 1px solid var(--borde-sidebar-tenue);
    margin-left: 21px;
    padding-left: var(--espacio-3);
}

.sv-sidebar__nivel--3[b-hafqwxzomk] {
    border-left: 1px solid var(--borde-sidebar-activo);
    margin-left: 18px;
    padding-left: var(--espacio-2);
}

.sv-sidebar__item[b-hafqwxzomk] {
    min-width: 0;
    position: relative;
}

.sv-sidebar__fila[b-hafqwxzomk],
.sv-sidebar__tema[b-hafqwxzomk],
.sv-sidebar__salir[b-hafqwxzomk],
.sv-sidebar__flotante-fila[b-hafqwxzomk] {
    align-items: center;
    background: none;
    border: 1px solid transparent;
    border-radius: var(--radio-md);
    box-sizing: border-box;
    color: var(--color-sidebar-tenue);
    cursor: pointer;
    display: flex;
    font: inherit;
    font-size: var(--texto-sm);
    gap: var(--espacio-3);
    min-height: 44px;
    padding: var(--espacio-2) var(--espacio-3);
    text-align: left;
    text-decoration: none;
    width: 100%;
}

.sv-sidebar__item--nivel-2 > .sv-sidebar__fila[b-hafqwxzomk],
.sv-sidebar__item--nivel-3 > .sv-sidebar__fila[b-hafqwxzomk] {
    color: var(--color-sidebar);
}

.sv-sidebar__item--ancestro > .sv-sidebar__fila[b-hafqwxzomk] {
    background: var(--fondo-sidebar-tenue);
    border-color: var(--borde-sidebar-tenue);
    color: var(--color-sidebar-fuerte);
    font-weight: 650;
}

.sv-sidebar__item--actual > .sv-sidebar__fila[b-hafqwxzomk] {
    background: var(--fondo-sidebar-activo);
    border-color: var(--borde-sidebar-activo);
    box-shadow: inset 3px 0 0 var(--acento-sidebar);
    color: var(--color-sidebar-fuerte);
    font-weight: 700;
}

.sv-sidebar__rotulo[b-hafqwxzomk],
.sv-sidebar__nombre[b-hafqwxzomk],
.sv-sidebar__accion-texto[b-hafqwxzomk],
.sv-sidebar__flotante-fila span[b-hafqwxzomk] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sv-sidebar__rotulo[b-hafqwxzomk] {
    line-height: 1.25;
    overflow: visible;
    overflow-wrap: anywhere;
    text-overflow: clip;
    white-space: normal;
}

.sv-sidebar__chevron[b-hafqwxzomk] {
    display: inline-flex;
    margin-left: auto;
    transition: transform 150ms ease;
}

.sv-sidebar__fila[aria-expanded="true"] .sv-sidebar__chevron[b-hafqwxzomk] {
    transform: rotate(90deg);
}

.sv-sidebar__sesion[b-hafqwxzomk] {
    border-top: 1px solid var(--borde-sidebar-tenue);
    display: flex;
    flex-direction: column;
    gap: var(--espacio-2);
    padding-top: var(--espacio-3);
}

.sv-sidebar__usuario[b-hafqwxzomk] {
    align-items: center;
    display: flex;
    gap: var(--espacio-3);
    min-height: 44px;
    min-width: 0;
    padding: 0 var(--espacio-2);
}

.sv-sidebar__avatar[b-hafqwxzomk] {
    align-items: center;
    background: var(--fondo-sidebar-avatar);
    border: 1px solid var(--borde-sidebar-avatar);
    border-radius: 50%;
    color: var(--color-sidebar-fuerte);
    display: inline-flex;
    flex: 0 0 36px;
    font-size: var(--texto-sm);
    font-weight: 700;
    height: 36px;
    justify-content: center;
    width: 36px;
}

.sv-sidebar__nombre[b-hafqwxzomk] {
    color: var(--color-sidebar-fuerte);
    font-size: var(--texto-sm);
    font-weight: 650;
    white-space: normal;
}

.sv-sidebar__acciones-sesion[b-hafqwxzomk] {
    display: grid;
    gap: var(--espacio-2);
    grid-template-columns: 1fr 1fr;
}

.sv-sidebar__acciones-sesion form[b-hafqwxzomk] {
    min-width: 0;
}

.sv-sidebar__tema[b-hafqwxzomk],
.sv-sidebar__salir[b-hafqwxzomk] {
    color: var(--color-sidebar);
}

.sv-sidebar__tema [data-theme-icon][b-hafqwxzomk] {
    display: inline-flex;
}

.sv-sidebar__tema [data-theme-icon][hidden][b-hafqwxzomk] {
    display: none;
}

.sv-sidebar__flotante[b-hafqwxzomk] {
    background: var(--fondo-sidebar-flotante);
    border: 1px solid var(--borde-sidebar-activo);
    border-radius: var(--radio-md);
    box-shadow: var(--sombra-tarjeta);
    box-sizing: border-box;
    left: 76px;
    min-width: 250px;
    padding: var(--espacio-2);
    position: fixed;
    top: var(--sidebar-flyout-top);
    z-index: 50;
}

.sv-sidebar__flotante-titulo[b-hafqwxzomk] {
    color: var(--color-sidebar-tenue);
    font-size: var(--texto-xs);
    font-weight: 700;
    letter-spacing: 0.06em;
    padding: var(--espacio-2) var(--espacio-3);
    text-transform: uppercase;
}

.sv-sidebar__flotante-fila[b-hafqwxzomk] {
    color: var(--color-sidebar);
}

.sv-sidebar__abrir-movil[b-hafqwxzomk],
.sv-sidebar__velo[b-hafqwxzomk] {
    display: none;
}

.sv-casco__contenido[b-hafqwxzomk] {
    flex: 1;
    min-width: 0;
}

html[data-sidebar-estado="plegado"] .sv-sidebar[b-hafqwxzomk] {
    flex-basis: 72px;
    width: 72px;
}

html[data-sidebar-estado="plegado"] .sv-sidebar__icono-contraer[b-hafqwxzomk] {
    display: none;
}

html[data-sidebar-estado="plegado"] .sv-sidebar__icono-desplegar[b-hafqwxzomk] {
    display: inline-flex;
}

html[data-sidebar-estado="plegado"] .sv-sidebar__rotulo[b-hafqwxzomk],
html[data-sidebar-estado="plegado"] .sv-sidebar__chevron[b-hafqwxzomk],
html[data-sidebar-estado="plegado"] .sv-sidebar__nombre[b-hafqwxzomk],
html[data-sidebar-estado="plegado"] .sv-sidebar__accion-texto[b-hafqwxzomk] {
    display: none;
}

html[data-sidebar-estado="plegado"] .sv-sidebar__fila[b-hafqwxzomk],
html[data-sidebar-estado="plegado"] .sv-sidebar__tema[b-hafqwxzomk],
html[data-sidebar-estado="plegado"] .sv-sidebar__salir[b-hafqwxzomk],
html[data-sidebar-estado="plegado"] .sv-sidebar__usuario[b-hafqwxzomk] {
    justify-content: center;
    padding-left: var(--espacio-2);
    padding-right: var(--espacio-2);
}

html[data-sidebar-estado="plegado"] .sv-sidebar__item--actual > .sv-sidebar__fila[b-hafqwxzomk] {
    box-shadow: none;
}

html[data-sidebar-estado="plegado"] .sv-sidebar__nivel--2[b-hafqwxzomk],
html[data-sidebar-estado="plegado"] .sv-sidebar__nivel--3[b-hafqwxzomk] {
    border-left: 0;
    margin-left: 0;
    padding-left: 0;
}

html[data-sidebar-estado="plegado"] .sv-sidebar__nivel--2:not(.sv-sidebar__nivel--ruta-activa)[b-hafqwxzomk],
html[data-sidebar-estado="plegado"] .sv-sidebar__nivel--3:not(.sv-sidebar__nivel--ruta-activa)[b-hafqwxzomk],
html[data-sidebar-estado="plegado"] .sv-sidebar__nivel--2 > .sv-sidebar__item:not(.sv-sidebar__item--ancestro):not(.sv-sidebar__item--actual)[b-hafqwxzomk],
html[data-sidebar-estado="plegado"] .sv-sidebar__nivel--3 > .sv-sidebar__item:not(.sv-sidebar__item--ancestro):not(.sv-sidebar__item--actual)[b-hafqwxzomk] {
    display: none;
}

html[data-sidebar-estado="plegado"] .sv-sidebar__item--nivel-2[b-hafqwxzomk]::before,
html[data-sidebar-estado="plegado"] .sv-sidebar__item--nivel-3[b-hafqwxzomk]::before {
    background: var(--borde-sidebar-activo);
    border-radius: var(--radio-sm);
    content: "";
    height: 16px;
    left: 2px;
    position: absolute;
    top: 14px;
    width: 2px;
    z-index: 1;
}

html[data-sidebar-estado="plegado"] .sv-sidebar__item--nivel-3[b-hafqwxzomk]::before {
    background: var(--acento-sidebar);
    width: 3px;
}

html[data-sidebar-estado="plegado"] .sv-sidebar__acciones-sesion[b-hafqwxzomk] {
    grid-template-columns: 1fr;
}

html[data-sidebar-estado="plegado"] .sv-sidebar__acciones-sesion form[b-hafqwxzomk],
html[data-sidebar-estado="plegado"] .sv-sidebar__tema[b-hafqwxzomk],
html[data-sidebar-estado="plegado"] .sv-sidebar__salir[b-hafqwxzomk] {
    width: 100%;
}

#blazor-error-ui[b-hafqwxzomk] {
    background: var(--color-aviso-fondo);
    bottom: 0;
    box-shadow: var(--sombra-barra);
    box-sizing: border-box;
    color: var(--color-aviso-texto);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss[b-hafqwxzomk] {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

@media (max-width: 768px) {
    .sv-sidebar[b-hafqwxzomk],
    html[data-sidebar-estado="plegado"] .sv-sidebar[b-hafqwxzomk] {
        flex-basis: 280px;
        left: 0;
        position: fixed;
        transform: translateX(-100%);
        transition: transform 160ms ease;
        width: 280px;
    }

    html[data-sidebar-movil="abierto"] .sv-sidebar[b-hafqwxzomk] {
        transform: translateX(0);
    }

    html[data-sidebar-estado="plegado"] .sv-sidebar__rotulo[b-hafqwxzomk],
    html[data-sidebar-estado="plegado"] .sv-sidebar__chevron[b-hafqwxzomk],
    html[data-sidebar-estado="plegado"] .sv-sidebar__nombre[b-hafqwxzomk],
    html[data-sidebar-estado="plegado"] .sv-sidebar__accion-texto[b-hafqwxzomk] {
        display: initial;
    }

    html[data-sidebar-estado="plegado"] .sv-sidebar__fila[b-hafqwxzomk],
    html[data-sidebar-estado="plegado"] .sv-sidebar__tema[b-hafqwxzomk],
    html[data-sidebar-estado="plegado"] .sv-sidebar__salir[b-hafqwxzomk],
    html[data-sidebar-estado="plegado"] .sv-sidebar__usuario[b-hafqwxzomk] {
        justify-content: flex-start;
        padding-left: var(--espacio-3);
        padding-right: var(--espacio-3);
    }

    html[data-sidebar-estado="plegado"] .sv-sidebar__nivel--2[b-hafqwxzomk],
    html[data-sidebar-estado="plegado"] .sv-sidebar__nivel--3[b-hafqwxzomk] {
        border-left: 1px solid var(--borde-sidebar-tenue);
        margin-left: 21px;
        padding-left: var(--espacio-3);
    }

    html[data-sidebar-estado="plegado"] .sv-sidebar__nivel--3[b-hafqwxzomk] {
        border-left-color: var(--borde-sidebar-activo);
        margin-left: 18px;
        padding-left: var(--espacio-2);
    }

    html[data-sidebar-estado="plegado"] .sv-sidebar__nivel--2 > .sv-sidebar__item[b-hafqwxzomk],
    html[data-sidebar-estado="plegado"] .sv-sidebar__nivel--3 > .sv-sidebar__item[b-hafqwxzomk] {
        display: list-item;
    }

    html[data-sidebar-estado="plegado"] .sv-sidebar__item--nivel-2[b-hafqwxzomk]::before,
    html[data-sidebar-estado="plegado"] .sv-sidebar__item--nivel-3[b-hafqwxzomk]::before {
        display: none;
    }

    .sv-sidebar__flotante[b-hafqwxzomk] {
        display: none;
    }

    .sv-sidebar__abrir-movil[b-hafqwxzomk] {
        background: var(--fondo-sidebar-disparador);
        color: var(--color-sidebar-fuerte);
        display: inline-flex;
        left: var(--espacio-3);
        position: fixed;
        top: var(--espacio-3);
        z-index: 20;
    }

    html[data-sidebar-estado="plegado"] .sv-sidebar__acciones-sesion[b-hafqwxzomk] {
        grid-template-columns: 1fr 1fr;
    }

    .sv-sidebar__velo[b-hafqwxzomk] {
        background: var(--velo-modal);
        border: 0;
        bottom: 0;
        cursor: pointer;
        left: 0;
        padding: 0;
        position: fixed;
        right: 0;
        top: 0;
        z-index: 25;
    }

    html[data-sidebar-movil="abierto"] .sv-sidebar__velo[b-hafqwxzomk] {
        display: block;
    }

    .sv-casco__contenido[b-hafqwxzomk] {
        padding-top: 60px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sv-sidebar[b-hafqwxzomk],
    .sv-sidebar__chevron[b-hafqwxzomk] {
        transition: none;
    }
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-8moatetott],
.components-reconnect-repeated-attempt-visible[b-8moatetott],
.components-reconnect-failed-visible[b-8moatetott],
.components-pause-visible[b-8moatetott],
.components-resume-failed-visible[b-8moatetott],
.components-rejoining-animation[b-8moatetott] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-8moatetott],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-8moatetott],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-8moatetott],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-8moatetott],
#components-reconnect-modal.components-reconnect-retrying[b-8moatetott],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-8moatetott],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-8moatetott],
#components-reconnect-modal.components-reconnect-failed[b-8moatetott],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-8moatetott] {
    display: block;
}


#components-reconnect-modal[b-8moatetott] {
    background-color: var(--color-superficie);
    color: var(--color-texto);
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: var(--sombra-modal);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-8moatetott 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-8moatetott 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-8moatetott 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-8moatetott]::backdrop {
    background-color: var(--velo-modal);
    animation: components-reconnect-modal-fadeInOpacity-b-8moatetott 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-8moatetott {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-8moatetott {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-8moatetott {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-8moatetott] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-8moatetott] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-8moatetott] {
    border: 0;
    background-color: var(--color-reconexion);
    color: var(--color-sobre-reconexion);
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-8moatetott] {
        background-color: var(--color-reconexion-hover);
    }

    #components-reconnect-modal button:active[b-8moatetott] {
        background-color: var(--color-reconexion);
    }

.components-rejoining-animation[b-8moatetott] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-8moatetott] {
        position: absolute;
        border: 3px solid var(--color-acento);
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-8moatetott 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-8moatetott] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-8moatetott {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Pages/Catalogo.razor.rz.scp.css */
/* Estilos propios del catalogo. Es la UNICA pagina del proyecto autorizada a
   tenerlos, y la excepcion esta declarada en la prueba de `pruebas/interfaz/`
   (R3 y R4), no escondida aqui: el catalogo no es una pantalla de producto,
   es la representacion del propio sistema y solo existe en Development. */

.muestras[b-mz45v1dxmj] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: var(--espacio-4);
}

.muestra[b-mz45v1dxmj] {
    display: flex;
    flex-direction: column;
    gap: var(--espacio-1);
}

.muestra__color[b-mz45v1dxmj] {
    height: 56px;
    border-radius: var(--radio-sm);
    border: 1px solid var(--color-borde);
}

.muestra__token[b-mz45v1dxmj] {
    font-size: var(--texto-xs);
    font-weight: 600;
    color: var(--color-acento);
}

.muestra__rotulo[b-mz45v1dxmj] {
    font-size: var(--texto-xs);
    color: var(--color-texto-tenue);
}

.pila[b-mz45v1dxmj] {
    display: flex;
    flex-direction: column;
    gap: var(--espacio-3);
}

/* Fuerza el colapso de una pieza que mide su propio contenedor (Rejilla,
   BarraFija) para poder mostrar el estado apilado en la misma captura. */
.angosto[b-mz45v1dxmj] {
    max-width: 340px;
}

.rotulo[b-mz45v1dxmj] {
    margin: 0;
    font-size: var(--texto-xs);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-texto-tenue);
}

/* Muestras de la pieza Icono (enmienda 18): el icono va DENTRO del enlace
   interactivo y hereda su foco y su color — el icono nunca es focusable. */
.enlace-demo[b-mz45v1dxmj] {
    display: inline-flex;
    align-items: center;
    gap: var(--espacio-2);
    font-size: var(--texto-sm);
    color: var(--color-acento);
    text-decoration: none;
}

.enlace-demo:active .icono[b-mz45v1dxmj] {
    translate: 0 1px;
}