@import '_content/GESTAIVA.WASM.Core/GESTAIVA.WASM.Core.8tbmolkis2.bundle.scp.css';

/* /Components/Autoria/InfoAutoria.razor.rz.scp.css */
/* El ancho se acota en el contenido y no en la caja del popover, a la que el JS de posicionamiento le escribe
   max-width: none. El div lleva el ámbito de este componente aunque se pinte portaleado. */
.ia[b-uxmkrmg8is] {
    min-width: 12rem;
    max-width: 20rem;
    text-align: start;
    overflow-wrap: break-word;
}
/* /Components/Navegacion/MenuLateral.razor.rz.scp.css */
/* Cabecera de sección: banda con el fondo de grupo del sidebar, icono y nombre del área. Texto con el tono del
   sidebar, el único que pasa de 4,5:1 sobre esa banda en todos los temas. El icono (20 px) y el texto quedan
   alineados con los iconos y rótulos de las entradas. */
.rotulo[b-rbg3ow0wya] {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 8px;
    padding: 8px 16px 8px 18px;
    background-color: var(--gesta-sidebar-group-bg);
    color: var(--gesta-sidebar-text);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 1.5;
    text-transform: uppercase;
}

    .rotulo span[b-rbg3ow0wya] {
        min-width: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

/* En el rail de iconos queda la banda con el icono; el texto se oculta sin perder su alto, así los iconos no
   saltan al desplegar. */
.mud-drawer-mini.mud-drawer--closed .rotulo span[b-rbg3ow0wya] {
    visibility: hidden;
}
/* /Components/Operaciones/ChequeoFinal.razor.rz.scp.css */
/* Lista del chequeo final con el marcador nativo del <ol>, que conserva la semántica de lista. El reset de
   MudBlazor anula el padding: sin él el número caería fuera y lo recortaría el área con scroll de la ficha.
   position: relative contiene el texto sr-only dentro de esa área. */
.chq[b-hm8zedwlh2] {
    position: relative;
    margin: 0;
    padding-left: 1.9em;
    list-style: decimal outside;
}

.chq__paso[b-hm8zedwlh2] {
    padding: 12px 0;
}

.chq__paso:first-child[b-hm8zedwlh2] {
    padding-top: 0;
}

.chq__paso + .chq__paso[b-hm8zedwlh2] {
    border-top: 1px solid var(--color-divider-light);
}

.chq__paso[b-hm8zedwlh2]::marker {
    color: var(--color-accent);
    font: 700 13.5px var(--font-heading);
    font-variant-numeric: tabular-nums;
}

/* La pregunta da el contexto; la respuesta elegida es lo que se comprueba y se destaca. */
.chq__pregunta[b-hm8zedwlh2] {
    font-size: 14px;
    line-height: 1.4;
    color: color-mix(in srgb, var(--color-text) 72%, transparent);
    overflow-wrap: anywhere;
}

.chq__respuesta[b-hm8zedwlh2] {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin-top: 5px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--color-text);
}

/* Salto entre los árboles de dos grupos: no es un paso. Un display distinto de list-item lo saca de la
   numeración (ni marcador ni cuenta), y el borde superior lo separa del paso anterior como a cualquier otro. */
.chq__salto[b-hm8zedwlh2] {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    padding: 12px 0;
    border-top: 1px solid var(--color-divider-light);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--color-accent);
}

.chq__salto + .chq__paso[b-hm8zedwlh2] {
    border-top: 1px solid var(--color-divider-light);
}

/* Alto de una línea: el icono se centra en la primera línea aunque el texto envuelva. */
.chq__check[b-hm8zedwlh2],
.chq__salto-icono[b-hm8zedwlh2] {
    flex: none;
    display: inline-flex;
    align-items: center;
    height: 1lh;
    color: var(--color-accent);
}

.chq__check[b-hm8zedwlh2]  .mud-icon-root,
.chq__salto-icono[b-hm8zedwlh2]  .mud-icon-root {
    font-size: 1.15em;
}

.chq__texto[b-hm8zedwlh2] {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
}

@media (max-width: 760px) {
    .chq[b-hm8zedwlh2] {
        padding-left: 1.6em;
    }

    .chq__paso[b-hm8zedwlh2],
    .chq__salto[b-hm8zedwlh2] {
        padding: 10px 0;
    }

    .chq__pregunta[b-hm8zedwlh2],
    .chq__respuesta[b-hm8zedwlh2],
    .chq__salto[b-hm8zedwlh2] {
        font-size: 13.5px;
    }
}
/* /Components/Operaciones/FiltroTipoOperacion.razor.rz.scp.css */
/* Filtro segmentado: la píldora es la tpa-segmentado de la tarjeta. En estrecho baja a su propia línea y ocupa el
   ancho (tpa-segmentado--lleno), con cada opción en un tercio. */
@media (max-width: 760px) {
    .fto[b-8w91nfo3ox] {
        flex: 1 1 100%;
    }
}
/* /Components/Operaciones/TablaOperaciones.razor.rz.scp.css */
/* Tabla común de operaciones: el marco, las celdas y los chips son los de la tarjeta (tpa-tabla, tpa-codigo,
   tpa-chip); aquí, el reparto de columnas, el contenido de las celdas, las marcas de una guardada y el ocultado según
   el ancho del marco. Colores por variables de tema. */

/* Contenedor de consulta: el ocultado progresivo de columnas reacciona al ancho REAL de la tabla (no al del
   viewport), así se comporta igual con el drawer abierto o cerrado. */
.tog[b-zg3fx8nd37] {
    container-type: inline-size;
}

/* Fuera de Flexible la tabla no tiene scroll propio (el reparto fijo no desborda a lo ancho): así la raíz del
   desplazamiento de la virtualización es la página y no el contenedor de MudSimpleTable. */
.tog:not(.tog--flexible)[b-zg3fx8nd37]  .tog-simple .mud-table-container {
    overflow: visible;
}

/* Flexible: el marco crece con las filas hasta el alto que le deja su columna flex y, a partir de ahí, desplaza el
   contenedor de MudSimpleTable, que es el que fija la cabecera (FixedHeader). Posicionado para contener los textos
   sr-only de las filas, que son absolutos: si no, se escapan del desplazamiento y alargan la página. */
.tog--flexible[b-zg3fx8nd37] {
    flex: 0 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.tog--flexible[b-zg3fx8nd37]  .tog-simple {
    flex: 0 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.tog--flexible[b-zg3fx8nd37]  .tog-simple .mud-table-container {
    position: relative;
    flex: 0 1 auto;
    min-height: 0;
}

/* Reparto fijo con ancho explícito en las columnas cortas: la operación se queda con lo que sobra y trunca
   con elipsis cuando no cabe; sin él, el nombre (nowrap) ensancharía la tabla y el marco recortaría la
   acción. Régimen en porcentaje: a ancho completo ronda los 300px y en
   pantallas medias cede sitio al nombre en vez de truncarlo. La última columna aloja la acción («Ver», unos
   65px) o la fecha (hasta «dd/MM/yyyy», unos 68px) y el menú de autoría (28px). */
.tog[b-zg3fx8nd37]  .tog-simple table {
    table-layout: fixed;
    width: 100%;
}

.tog[b-zg3fx8nd37]  .tog-simple thead th:nth-child(2) { width: 110px; }
.tog[b-zg3fx8nd37]  .tog-simple thead th:nth-child(3) { width: 110px; }
.tog[b-zg3fx8nd37]  .tog-simple thead th:nth-child(4) { width: 26%; }
.tog[b-zg3fx8nd37]  .tog-simple thead th:nth-child(5) { width: 124px; }

.tog[b-zg3fx8nd37]  .tog-op {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.tog[b-zg3fx8nd37]  .tog-nombre {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}

/* Guardada en mantenimiento: llave inglesa tras el nombre, que no encoge (trunca el nombre, no el icono). La
   raíz del tooltip en inline-flex mide lo que el icono, así la fila no crece. Sin el ámbar del tema, que en
   esta tabla ya significa «Gasto». */
.tog[b-zg3fx8nd37]  .tog-mant {
    display: inline-flex;
    flex: none;
}

.tog[b-zg3fx8nd37]  .tog-mant-icono {
    font-size: 16px;
    color: var(--mud-palette-text-secondary);
}

/* Ámbito: nombre corto, en el mismo tono secundario que el régimen. */
.tog[b-zg3fx8nd37]  .tog-ambito {
    white-space: nowrap;
    font-size: .78rem;
    color: var(--mud-palette-text-secondary);
}

/* Régimen: una sola línea; si desborda, elipsis (y el tooltip del markup muestra el texto completo). El
   tope es el de la celda —el tooltip va en bloque (Inline=false) para que el porcentaje resuelva contra
   ella—: con un literal en px el texto invadía la columna siguiente cuando la celda era más estrecha. */
.tog[b-zg3fx8nd37]  .tog-regimen {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
    font-size: .78rem;
    color: var(--mud-palette-text-secondary);
}

/* Líneas secundarias bajo la operación: cada @container de abajo enseña lo que su columna deja de mostrar. */
.tog[b-zg3fx8nd37]  .tog-sec,
.tog[b-zg3fx8nd37]  .tog-sec > * {
    display: none;
}

/* Acción o fecha de la fila y menú de autoría, pegados a la derecha. */
.tog[b-zg3fx8nd37]  .tog-acc {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 2px;
}

/* ---------- Ocultado progresivo de columnas al estrechar ----------
   Columnas: 1 Operación · 2 Ámbito · 3 Tipo · 4 Régimen · 5 acción o fecha. Al reducirse el ancho de la tabla se
   oculta primero Ámbito, luego Régimen y por último Tipo; siempre quedan la operación y la última columna. Los
   umbrales están calculados para la última columna de 124px (acción o fecha y menú de autoría), y lo que se oculta
   pasa a la línea secundaria. */

/* A 740 px el ámbito ya no cabe. */
@container (max-width: 740px) {
    .tog[b-zg3fx8nd37]  .tog-simple thead th:nth-child(2),
    .tog[b-zg3fx8nd37]  .tog-simple tbody td:nth-child(2) {
        display: none;
    }

    /* Cada texto, en una línea y cortado con elipsis a pocos caracteres. Si no caben juntos, baja de línea el
       texto entero: en una sola fila, el encogimiento flex los dejaba en la primera letra. */
    .tog[b-zg3fx8nd37]  .tog-sec {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 4px 8px;
        margin-top: 6px;
        font-size: .78rem;
        color: var(--mud-palette-text-secondary);
    }

    .tog[b-zg3fx8nd37]  .tog-sec .tog-sec-ambito,
    .tog[b-zg3fx8nd37]  .tog-sec .tog-sec-regimen {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .tog[b-zg3fx8nd37]  .tog-sec .tog-sec-ambito {
        display: inline;
        max-width: 18ch;
    }

    .tog[b-zg3fx8nd37]  .tog-sec .tog-sec-regimen {
        max-width: 22ch;
    }

    .tog[b-zg3fx8nd37]  .tog-sec .tog-sec-tipo {
        flex: none;
    }

    /* Sin el ámbito, el régimen cede parte de su ancho a la operación. */
    .tog[b-zg3fx8nd37]  .tog-simple thead th:nth-child(4) {
        width: 34%;
    }
}

/* A 600 px la operación necesita el ancho del régimen. */
@container (max-width: 600px) {
    .tog[b-zg3fx8nd37]  .tog-simple thead th:nth-child(4),
    .tog[b-zg3fx8nd37]  .tog-simple tbody td:nth-child(4) {
        display: none;
    }

    .tog[b-zg3fx8nd37]  .tog-sec .tog-sec-regimen {
        display: inline;
    }
}

/* Estrecho (móvil): el código y el nombre se apilan y el nombre envuelve en vez de truncarse; las celdas
   ceden parte del aire lateral. Se apilan envolviendo, no en
   columna: el nombre ocupa su propia línea (ancho completo, ordenado al final) y las marcas se quedan junto
   al código en vez de bajar a una tercera línea. */
@container (max-width: 520px) {
    .tog[b-zg3fx8nd37]  .tog-simple {
        --tpa-tabla-lado: 12px;
    }

    .tog[b-zg3fx8nd37]  .tog-op {
        flex-wrap: wrap;
        gap: 4px 8px;
    }

    .tog[b-zg3fx8nd37]  .tog-nombre {
        order: 1;
        flex-basis: 100%;
        white-space: normal;
    }
}

/* A 440 px solo caben la operación y su acción. */
@container (max-width: 440px) {
    .tog[b-zg3fx8nd37]  .tog-simple thead th:nth-child(3),
    .tog[b-zg3fx8nd37]  .tog-simple tbody td:nth-child(3) {
        display: none;
    }

    .tog[b-zg3fx8nd37]  .tog-sec .tog-sec-tipo {
        display: inline;
    }
}

/* Estrecho, en Flexible: la sección de la tarjeta crece con su contenido y desplaza la página (TarjetaPagina); la
   tabla deja de desplazar por dentro, para no tener un scroll dentro de otro, y su cabecera deja de ser fija. */
@media (max-width: 760px) {
    .tog--flexible[b-zg3fx8nd37]  .tog-simple .mud-table-container {
        overflow: visible;
    }

    .tog--flexible[b-zg3fx8nd37]  .tog-simple thead th {
        position: static;
    }
}
/* /Components/Pagina/TarjetaPagina.razor.rz.scp.css */
/* Tarjeta de las páginas de Usuarios: sus medidas y las piezas comunes del contenido (secciones, cabecera de sección,
   campo y buscador, segmentado, tabla, chips y código, resumen, aviso y barra de consumo; la lista, en
   TarjetaPagina.razor), que la página marca por clase y aquí se alcanzan con ::deep. Todos los colores salen de
   variables de tema. */

/* --tpa-lado: relleno lateral del hero y de las secciones. */
.tpa[b-o850we1h2s] {
    --tpa-lado: 28px;
    display: flex;
    justify-content: center;
}

/* Sin overflow: hidden: recortaría la barra pegajosa de la asignación. Nada pinta fondo hasta las esquinas, así que
   no hace falta. */
.tpa[b-o850we1h2s]  .tpa-card {
    width: 100%;
    max-width: 1180px;
    border-radius: 14px;
    box-shadow: 0 1px 2px color-mix(in srgb, var(--mud-palette-black) 5%, transparent),
                0 16px 40px color-mix(in srgb, var(--mud-palette-black) 6%, transparent);
}

/* Destacada: sin barra superior ni menú alrededor (la página pública), la tarjeta se despega más del fondo y su
   contenido se aparta más de los bordes. */
.tpa--destacada[b-o850we1h2s] {
    --tpa-lado: 48px;
}

.tpa--destacada[b-o850we1h2s]  .tpa-card {
    border: 1px solid var(--mud-palette-lines-default);
    box-shadow: 0 2px 4px color-mix(in srgb, var(--mud-palette-black) 8%, transparent),
                0 20px 48px color-mix(in srgb, var(--mud-palette-black) 14%, transparent);
}

/* Ancha: el tope del MudContainer del layout (1280px) lo levanta gesta-pagina-ancha, en la hoja global de Core. */
.tpa--ancha[b-o850we1h2s]  .tpa-card {
    max-width: 1440px;
}

/* ---------- Alto completo ----------
   El suelo de la tarjeta es el alto de ventana. La sección flexible se reparte lo que sobra con base 0, así su
   contenido no estira la tarjeta y desplaza por dentro; su min-height es el mínimo: por debajo crece la tarjeta y
   desplaza la página. */
.tpa--alto[b-o850we1h2s]  .tpa-card {
    display: flex;
    flex-direction: column;
    min-height: var(--gesta-alto-ventana);
}

.tpa--alto .tpa-hero[b-o850we1h2s] {
    flex: none;
}

.tpa--alto[b-o850we1h2s]  .tpa-seccion--flexible {
    flex: 1 1 0px;
    min-height: 360px;
    display: flex;
    flex-direction: column;
}

/* Lo que pinta la sección (la lista o el indicador de carga) ocupa todo su alto. */
.tpa--alto[b-o850we1h2s]  .tpa-seccion--flexible > * {
    flex: 1 1 0px;
    min-height: 0;
}

/* Mínimo propio (una herramienta): la sección y su hijo ceden el mínimo al contenido, que lo fija en su último
   eslabón; si la ventana no da, crece la tarjeta y desplaza la página. */
.tpa--alto[b-o850we1h2s]  .tpa-seccion--flexible.tpa-seccion--minimo-propio,
.tpa--alto[b-o850we1h2s]  .tpa-seccion--flexible.tpa-seccion--minimo-propio > * {
    min-height: auto;
}

/* ---------- Cabecera ---------- */
.tpa-hero[b-o850we1h2s] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: clamp(28px, 3.5vw, 44px) var(--tpa-lado) 24px;
}

/* El botón de texto trae 8px de relleno: se recupera para que la flecha caiga en la línea del eyebrow. */
.tpa[b-o850we1h2s]  .tpa-volver {
    margin: -8px 0 10px -8px;
    text-transform: none;
    font-weight: 600;
}

/* El overline del tema no fuerza mayúsculas: se ponen aquí. */
.tpa[b-o850we1h2s]  .tpa-eyebrow {
    display: block;
    color: var(--mud-palette-primary);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    margin-bottom: 12px;
}

/* Eyebrow con acciones a su derecha: la fila hereda el margen del eyebrow, y el relleno del botón de texto se
   recupera para que no aumente su alto ni lo separe del borde. */
.tpa-eyebrow-fila[b-o850we1h2s] {
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;
    margin-bottom: 12px;
}

.tpa .tpa-eyebrow-fila[b-o850we1h2s]  .tpa-eyebrow {
    margin-bottom: 0;
    white-space: nowrap;
}

.tpa-acciones--eyebrow[b-o850we1h2s]  .mud-button-root {
    margin: -8px -8px -8px 0;
}

.tpa-titulo-fila[b-o850we1h2s] {
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px 16px;
}

/* Un nombre sin espacios no debe ensanchar la tarjeta. */
.tpa[b-o850we1h2s]  .tpa-titulo {
    min-width: 0;
    overflow-wrap: anywhere;
    font-size: clamp(1.6rem, 2.8vw, 2rem);
    line-height: 1.12;
    font-weight: 800;
    letter-spacing: -.015em;
    color: var(--mud-palette-text-primary);
    margin: 0;
}

.tpa-acciones[b-o850we1h2s] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

/* El slot llega declarado aunque su @if no pinte nada (mientras carga, sin acceso): vacío no abre línea ni hueco. */
.tpa-acciones:empty[b-o850we1h2s] {
    display: none;
}

.tpa[b-o850we1h2s]  .tpa-lead {
    margin-top: 15px;
    color: var(--mud-palette-text-secondary);
}

/* Slot Cabecera: llega declarado aunque su @if no pinte nada (mientras carga): vacío no abre hueco. */
.tpa-cabecera[b-o850we1h2s] {
    align-self: stretch;
    margin-top: 18px;
}

.tpa-cabecera:empty[b-o850we1h2s] {
    display: none;
}

/* Aviso del hero o de una sección (suscripción, catálogo). */
.tpa[b-o850we1h2s]  .tpa-aviso {
    max-width: 640px;
}

.tpa[b-o850we1h2s]  .tpa-aviso:not(:first-child) {
    margin-top: 18px;
}

/* ---------- Resumen de estado o de relación ----------
   Chips y datos en una fila que envuelve; la acción sobre la relación, empujada abajo a la derecha. */
.tpa[b-o850we1h2s]  .tpa-resumen {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 10px;
}

.tpa[b-o850we1h2s]  .tpa-resumen-dato {
    font-size: .875rem;
    color: var(--mud-palette-text-secondary);
}

.tpa[b-o850we1h2s]  .tpa-resumen-accion {
    flex: none;
    align-self: flex-end;
    margin-left: auto;
}

/* ---------- Secciones ---------- */
.tpa[b-o850we1h2s]  .tpa-seccion {
    padding: 24px var(--tpa-lado) 30px;
    border-top: 1px solid var(--mud-palette-divider);
}

/* Pegada: continúa el hero sin línea ni relleno superior (el marco de una herramienta). La doble clase gana también
   al relleno de estrecho. */
.tpa[b-o850we1h2s]  .tpa-seccion.tpa-seccion--pegada {
    border-top: none;
    padding-top: 0;
}

/* Título y recuento a la izquierda; buscador o filtros a la derecha, que bajan si no caben. */
.tpa[b-o850we1h2s]  .tpa-cab {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px 16px;
    margin-bottom: 16px;
}

.tpa[b-o850we1h2s]  .tpa-cab-tit {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 10px;
    min-width: 0;
}

.tpa[b-o850we1h2s]  .tpa-cab-h {
    font-weight: 700;
    color: var(--mud-palette-text-primary);
}

.tpa[b-o850we1h2s]  .tpa-count {
    font-size: .82rem;
    color: var(--mud-palette-text-secondary);
}

/* Vigencia tras el recuento. El separador va en CSS: si baja de línea en xs no debe abrirla un punto. */
.tpa[b-o850we1h2s]  .tpa-vigencia::before {
    content: "· ";
}

/* ---------- Campo de 40px sin etiqueta flotante (buscador, alta de un campo) ----------
   Sin el margen que reserva la etiqueta y con el alto en el input, que MudBlazor fija a una línea (height: 1lh)
   más su relleno, en content-box. */
.tpa[b-o850we1h2s]  .tpa-campo .mud-input-control {
    margin: 0;
}

.tpa[b-o850we1h2s]  .tpa-campo .mud-input-outlined input.mud-input-root {
    box-sizing: border-box;
    height: 40px;
}

.tpa[b-o850we1h2s]  .tpa-campo .mud-input-outlined-border {
    border-radius: 8px;
}

/* Botón que acompaña a un tpa-campo en un alta de un campo: su mismo alto y su mismo radio. */
.tpa[b-o850we1h2s]  .tpa-boton-campo.mud-button-root {
    height: 40px;
    padding: 0 20px;
    border-radius: 8px;
    font-weight: 700;
}

/* Buscador de la cabecera de sección: pegado a la derecha también cuando baja de línea. */
.tpa[b-o850we1h2s]  .tpa-buscador {
    flex: 0 1 320px;
    min-width: 0;
    margin-left: auto;
}

/* ---------- Segmentado en píldora (MudToggleGroup con Class="tpa-segmentado") ----------
   Cada MudToggleItem es un MudButton y el activo se selecciona por su aria-checked: se anulan su borde y su relleno
   para dejar la píldora sobre la pista. El relleno lateral de la opción lo puede ajustar quien lo monta con
   --tpa-segmentado-relleno. */
.tpa[b-o850we1h2s]  .tpa-segmentado.mud-toggle-group {
    min-width: 0;
    padding: 3px;
    gap: 4px;
    border: none;
    border-radius: 999px;
    box-shadow: none;
    background-color: color-mix(in srgb, var(--mud-palette-text-primary) 6%, transparent);
}

.tpa[b-o850we1h2s]  .tpa-segmentado .mud-toggle-item {
    min-width: auto;
    margin: 0;
    padding: 5px var(--tpa-segmentado-relleno, 16px);
    border: none !important;
    border-radius: 999px !important;
    background-color: transparent;
    color: var(--mud-palette-text-secondary);
    text-transform: none;
    font-size: .8rem;
    font-weight: 600;
    white-space: nowrap;
}

.tpa[b-o850we1h2s]  .tpa-segmentado .mud-toggle-item .mud-button-label {
    gap: 6px;
}

.tpa[b-o850we1h2s]  .tpa-segmentado .mud-toggle-item .mud-icon-root {
    font-size: 16px;
}

.tpa[b-o850we1h2s]  .tpa-segmentado .mud-toggle-item:hover:not([aria-checked="true"]):not(:disabled) {
    background-color: color-mix(in srgb, var(--mud-palette-text-primary) 5%, transparent);
    color: var(--mud-palette-text-primary);
}

.tpa[b-o850we1h2s]  .tpa-segmentado .mud-toggle-item[aria-checked="true"] {
    background-color: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    box-shadow: 0 1px 2px color-mix(in srgb, var(--mud-palette-black) 10%, transparent);
}

/* MudBlazor quita el contorno a los botones: el foco se marca hacia dentro, porque el grupo recorta. */
.tpa[b-o850we1h2s]  .tpa-segmentado .mud-toggle-item:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: -2px;
}

.tpa[b-o850we1h2s]  .tpa-segmentado .mud-toggle-item:disabled {
    background-color: transparent;
    color: var(--mud-palette-text-disabled);
    cursor: not-allowed;
    pointer-events: auto;
}

/* ---------- Marco de tabla (AppTable de página o AppSimpleTable de un componente con marco propio) ---------- */
/* Marco redondeado; las líneas entre filas, más suaves que las del tema. Recorta las esquinas con clip-path y no con
   overflow, que lo haría contenedor de desplazamiento (y raíz de la virtualización). */
.tpa[b-o850we1h2s]  .tpa-tabla {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 10px;
    clip-path: inset(0 round 10px);
    --mud-palette-table-lines: color-mix(in srgb, var(--mud-palette-text-primary) 7%, transparent);
}

/* Tabla que virtualiza: su contenedor no desplaza, para que la virtualización siga el scroll de la página. */
.tpa[b-o850we1h2s]  .tpa-tabla--virtual .mud-table-container {
    overflow: visible;
}

.tpa[b-o850we1h2s]  .tpa-tabla .mud-table {
    border-radius: 0;
    background-color: transparent;
}

.tpa[b-o850we1h2s]  .tpa-tabla .mud-table-root .mud-table-head .mud-table-cell {
    padding: 11px 20px;
    background-color: color-mix(in srgb, var(--mud-palette-text-primary) 3%, var(--mud-palette-surface));
    border-bottom: 1px solid var(--mud-palette-lines-default);
    text-transform: uppercase;
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .08em;
    color: var(--mud-palette-text-secondary);
}

.tpa[b-o850we1h2s]  .tpa-tabla .mud-table-root .mud-table-head .mud-table-cell:last-child {
    padding-left: 8px;
    padding-right: 12px;
}

/* Botones de texto de las filas, sin mayúsculas. */
.tpa[b-o850we1h2s]  .tpa-tabla tbody .mud-button-root:not(.mud-icon-button) {
    text-transform: none;
    font-weight: 600;
}

/* Sobre AppSimpleTable, el mismo aspecto con su DOM. El :where deja la especificidad en la del marco para que las
   @container del componente ganen; --tpa-tabla-lado ajusta el aire lateral de las celdas. */
.tpa[b-o850we1h2s]  .tpa-tabla :where(.mud-simple-table thead th) {
    padding: 11px var(--tpa-tabla-lado, 20px);
    background-color: color-mix(in srgb, var(--mud-palette-text-primary) 3%, var(--mud-palette-surface));
    border-bottom: 1px solid var(--mud-palette-lines-default);
    text-transform: uppercase;
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .08em;
    color: var(--mud-palette-text-secondary);
}

.tpa[b-o850we1h2s]  .tpa-tabla :where(.mud-simple-table tbody td) {
    padding: 12px var(--tpa-tabla-lado, 20px);
    border-bottom: 1px solid var(--mud-palette-table-lines);
}

.tpa[b-o850we1h2s]  .tpa-tabla :where(.mud-simple-table tbody tr:last-child td) {
    border-bottom: none;
}

/* Con MudVirtualize el último hijo del tbody es su espaciador vacío: la última fila es la que lo precede. */
.tpa[b-o850we1h2s]  .tpa-tabla :where(.mud-simple-table tbody tr:has(+ tr:last-child:empty) td) {
    border-bottom: none;
}

/* La columna de acciones cede aire lateral: sus botones ya llevan relleno propio. */
.tpa[b-o850we1h2s]  .tpa-tabla :where(.mud-simple-table tr > .text-end:last-child) {
    padding-left: 8px;
    padding-right: 12px;
}

/* Solo en columnas: apilada (por debajo de md) la tabla conserva el relleno compacto de MudBlazor. */
@media (min-width: 960px) {
    .tpa[b-o850we1h2s]  .tpa-tabla .mud-table-root .mud-table-body .mud-table-cell {
        padding: 14px 20px;
    }

    /* La acción cede aire lateral: el botón ya lleva relleno propio. */
    .tpa[b-o850we1h2s]  .tpa-tabla .mud-table-root .mud-table-body .mud-table-cell:last-child {
        padding-left: 8px;
        padding-right: 12px;
    }
}

/* ---------- Chip de estado ----------
   Píldora con el tinte de su propio color. No encoge ni parte (en una fila trunca el nombre, no el chip). Una
   columna de chips mide lo mismo si la página fija --tpa-chip-ancho en un ancestro. */
.tpa[b-o850we1h2s]  .tpa-chip.mud-chip {
    flex: none;
    width: var(--tpa-chip-ancho, auto);
    height: auto;
    min-height: 0;
    margin: 0;
    padding: 4px 11px;
    border-radius: 999px;
    font-size: .7rem;
    font-weight: 600;
    white-space: nowrap;
    background-color: color-mix(in srgb, currentColor 15%, transparent);
}

/* Sin color semántico: neutro. */
.tpa[b-o850we1h2s]  .tpa-chip.mud-chip-color-default {
    background-color: color-mix(in srgb, var(--mud-palette-text-primary) 7%, transparent);
    color: var(--mud-palette-text-secondary);
}

/* El mismo chip, neutro, sobre un <span>, donde no cabe un MudChip (la etiqueta de un MudCheckBox). Lleva su
   color explícito, que la casilla deshabilitada no atenúa. */
.tpa[b-o850we1h2s]  span.tpa-chip {
    flex: none;
    display: inline-block;
    padding: 4px 11px;
    border-radius: 999px;
    font-size: .7rem;
    font-weight: 600;
    line-height: 1.25;
    white-space: nowrap;
    background-color: color-mix(in srgb, var(--mud-palette-text-primary) 7%, transparent);
    color: var(--mud-palette-text-secondary);
}

/* Código de una operación o de un régimen: rectángulo neutro compacto, sobre un <span> (cabe en una etiqueta). */
.tpa[b-o850we1h2s]  .tpa-codigo {
    flex: none;
    display: inline-block;
    padding: 4px 8px;
    border-radius: 5px;
    background-color: color-mix(in srgb, var(--mud-palette-text-primary) 7%, transparent);
    color: var(--mud-palette-text-secondary);
    font-size: .7rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: .04em;
    white-space: nowrap;
}

/* Barra del consumo de un paquete de consultas (MudProgressLinear). */
.tpa[b-o850we1h2s]  .tpa-barra-consumo {
    height: 8px;
    border-radius: 999px;
    background-color: color-mix(in srgb, var(--mud-palette-text-primary) 8%, transparent);
}

/* ---------- Estrecho ---------- */
@media (max-width: 760px) {
    /* El hero se come casi todo el alto y la página va a desplazar: la sección flexible crece con su contenido para
       que no desplace también por dentro. */
    .tpa--alto[b-o850we1h2s]  .tpa-seccion--flexible,
    .tpa--alto[b-o850we1h2s]  .tpa-seccion--flexible > * {
        flex: 1 0 auto;
    }

    .tpa[b-o850we1h2s]  .tpa-eyebrow {
        font-size: .66rem;
        margin-bottom: 10px;
    }

    .tpa[b-o850we1h2s]  .tpa-titulo {
        font-size: 1.4rem;
    }

    .tpa[b-o850we1h2s]  .tpa-lead {
        font-size: .76rem;
        margin-top: 12px;
    }

    .tpa[b-o850we1h2s]  .tpa-cab-h {
        font-size: 1rem;
    }

    .tpa[b-o850we1h2s],
    .tpa--destacada[b-o850we1h2s] {
        --tpa-lado: 20px;
    }

    .tpa[b-o850we1h2s]  .tpa-seccion {
        padding-top: 20px;
        padding-bottom: 26px;
    }

    /* Lleno: el segmentado ocupa el ancho de su envoltorio y reparte las opciones a partes iguales (el grid de
       columnas lo pone MudBlazor en línea). */
    .tpa[b-o850we1h2s]  .tpa-segmentado--lleno.mud-toggle-group {
        width: 100%;
    }
}

@media (max-width: 599.98px) {
    .tpa[b-o850we1h2s]  .tpa-buscador {
        flex-basis: 100%;
    }

    .tpa[b-o850we1h2s]  .tpa-vigencia,
    .tpa[b-o850we1h2s]  .tpa-resumen-dato {
        flex-basis: 100%;
    }

    .tpa[b-o850we1h2s]  .tpa-vigencia::before {
        content: none;
    }

    /* Las acciones bajan bajo el título con todo el ancho, por si alguna se estira (un conmutador). */
    .tpa-acciones[b-o850we1h2s] {
        flex: 1 1 100%;
    }

    /* Las del eyebrow no: comparten fila con el rótulo, que no debe partirse. */
    .tpa-acciones.tpa-acciones--eyebrow[b-o850we1h2s] {
        flex: none;
    }
}
/* /Components/PeticionesAlta/CorreosAlta.razor.rz.scp.css */
/* Correos de una petición de alta: una fila por correo, con su número y el botón de quitar; el campo de 40 px lo pone
   TarjetaPagina (tpa-campo). */
.ca[b-tvas4a9k2d] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Alineadas por arriba, para que el error de un correo no mueva el número ni el botón de quitar. */
.ca-fila[b-tvas4a9k2d] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    max-width: 560px;
}

.ca-num[b-tvas4a9k2d] {
    flex: none;
    width: 1.5em;
    line-height: 40px;
    font-size: .8rem;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
}

.ca-campo[b-tvas4a9k2d] {
    flex: 1 1 auto;
    min-width: 0;
}

/* El botón de quitar, centrado en el alto del campo. */
.ca-fila[b-tvas4a9k2d]  .mud-icon-button {
    margin-top: 4px;
}

.ca-error[b-tvas4a9k2d],
.ca-anadir[b-tvas4a9k2d] {
    padding-left: calc(1.5em + 8px);
}

.ca-anadir[b-tvas4a9k2d] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 12px;
}

.ca-cuenta[b-tvas4a9k2d] {
    font-size: .82rem;
    color: var(--mud-palette-text-secondary);
}
/* /Components/PeticionesAlta/SelectorRegimenesAlta.razor.rz.scp.css */
/* Selector de regímenes de una petición de alta: filtros de ámbito y tipo, lista con casillas y resumen de lo
   marcado. El segmentado, el marco de la tabla y el código los pone TarjetaPagina. Colores por variables de tema. */
.sra[b-aol6ie8eyu] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.sra-filtros[b-aol6ie8eyu] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 24px;
}

.sra-grupo[b-aol6ie8eyu] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

/* En estrecho, donde ya no caben en una fila, se apilan sobre una rejilla común: los rótulos en la primera columna y
   los segmentados en la segunda, con el mismo ancho y el mismo arranque. */
@media (max-width: 760px) {
    .sra-filtros[b-aol6ie8eyu] {
        display: grid;
        grid-template-columns: max-content minmax(0, 26rem);
        gap: 10px 12px;
    }

    .sra-grupo[b-aol6ie8eyu] {
        display: contents;
    }

    .sra-grupo[b-aol6ie8eyu]  .mud-toggle-group {
        width: 100%;
    }
}

.sra-rotulo[b-aol6ie8eyu] {
    flex: none;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

.sra-cuenta[b-aol6ie8eyu] {
    margin-left: 4px;
    font-size: .72rem;
    font-weight: 500;
    color: var(--mud-palette-text-secondary);
}

/* Menos aire lateral que una tabla de datos: los nombres largos parten menos en estrecho. */
.sra-tabla[b-aol6ie8eyu] {
    --tpa-tabla-lado: 14px;
}

/* Con error, el marco en rojo; la especificidad gana al borde del marco común. */
.sra .sra-tabla.sra-tabla--error[b-aol6ie8eyu] {
    border-color: var(--mud-palette-error);
}

/* La casilla lleva el código y el nombre como etiqueta: toda la fila la marca. Las celdas, con menos aire vertical
   que una tabla de datos. */
.sra .sra-tabla[b-aol6ie8eyu]  th,
.sra .sra-tabla[b-aol6ie8eyu]  td {
    padding-top: 2px;
    padding-bottom: 2px;
}

.sra-tabla[b-aol6ie8eyu]  .sra-check,
.sra-tabla[b-aol6ie8eyu]  .sra-check .mud-input-control-input-container,
.sra-tabla[b-aol6ie8eyu]  .sra-check .mud-checkbox {
    width: 100%;
    margin: 0;
}

.sra-tabla[b-aol6ie8eyu]  .sra-check .mud-checkbox {
    display: flex;
    align-items: center;
    padding: 3px 0;
}

.sra-tabla[b-aol6ie8eyu]  .sra-check .mud-checkbox > .mud-typography {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: .875rem;
    line-height: 1.35;
}

.sra-tabla[b-aol6ie8eyu]  thead .sra-check .mud-checkbox > .mud-typography {
    font-size: inherit;
    font-weight: inherit;
}

.sra-marcado td[b-aol6ie8eyu] {
    background-color: color-mix(in srgb, var(--mud-palette-primary) 6%, transparent);
}

/* Resumen al pie del marco: recuento, chips de lo marcado y Limpiar. */
.sra-resumen[b-aol6ie8eyu] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 12px;
    padding: 12px 20px;
    border-top: 1px solid var(--mud-palette-lines-default);
}

.sra-pista[b-aol6ie8eyu] {
    font-size: .82rem;
    color: var(--mud-palette-text-secondary);
}

.sra-total[b-aol6ie8eyu] {
    font-size: .82rem;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
}

.sra-chips[b-aol6ie8eyu] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    min-width: 0;
}
/* /Components/Suscripciones/PanelSuscripcion.razor.rz.scp.css */
/* Panel de suscripción por consultas (inicio de Usuarios). La cabecera, el marco de la tabla, los chips, el código y
   la barra de consumo son piezas de la tarjeta, y la tabla es la común de operaciones; aquí, la cifra, el pie y la
   fecha de las filas. Colores solo por variables de tema; los tres tonos son tokens semánticos. */

/* ---------- Consumo del paquete: a todo el ancho, como la tabla ---------- */
.ps-cifra[b-piakbj7kkt] {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
}

.ps-num[b-piakbj7kkt] {
    font-size: 2.5rem;
    line-height: 1;
    font-weight: 800;
    letter-spacing: -.03em;
    font-variant-numeric: tabular-nums;
}

.ps-num-label[b-piakbj7kkt] {
    font-size: 1rem;
    font-weight: 500;
    color: var(--mud-palette-text-secondary);
}

/* Tonos: tokens base (no los -text, que son el color de contraste sobre ese fondo). */
.ps--ok[b-piakbj7kkt] { color: var(--mud-palette-primary); }
.ps--bajo[b-piakbj7kkt] { color: var(--mud-palette-warning); }
.ps--agotada[b-piakbj7kkt] { color: var(--mud-palette-error); }

.ps[b-piakbj7kkt]  .ps-barra {
    margin-top: 18px;
}

.ps-uso[b-piakbj7kkt] {
    margin-top: 12px;
    margin-bottom: 24px;
    font-size: .86rem;
    color: var(--mud-palette-text-secondary);
}

/* Móvil: la cifra y su resumen, un punto menores. */
@media (max-width: 760px) {
    .ps-num[b-piakbj7kkt] {
        font-size: 2rem;
    }

    .ps-num-label[b-piakbj7kkt] {
        font-size: .9rem;
    }

    .ps-uso[b-piakbj7kkt] {
        font-size: .8rem;
    }
}

/* A cero, el resumen es la alerta: toma el tono de error y peso. */
.ps-uso.ps--agotada[b-piakbj7kkt] {
    color: var(--mud-palette-error);
    font-weight: 600;
}

/* ---------- Tabla ---------- */
/* Pie de la tabla: el rótulo de cuántas consultas se listan. */
.ps-pie[b-piakbj7kkt] {
    padding: 10px 20px;
    border-top: 1px solid var(--mud-palette-lines-default);
    background-color: color-mix(in srgb, var(--mud-palette-text-primary) 2%, var(--mud-palette-surface));
}

/* Fecha de la consulta: ocupa el sitio del botón «Ver» de guardadas. */
.ps-fecha[b-piakbj7kkt] {
    white-space: nowrap;
    font-size: .8rem;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
}
/* /Pages/Asesoria/AltaClienteNueva.razor.rz.scp.css */
/* Nueva alta (formulario en tarjeta): solo lo propio de la página; las secciones, sus cabeceras y los campos los
   pone TarjetaPagina. Colores por variables de tema. */

/* Barra del formulario: a 320 px los dos botones no caben en una línea y el primario partiría su rótulo; mejor que
   Cancelar baje entero. La fila es de BarraAccionesFormulario (Core): se alcanza con ::deep. */
.acn-barra[b-0h767i45qg]  .d-flex {
    flex-wrap: wrap;
}

.acn-barra[b-0h767i45qg]  .mud-button-root {
    flex: none;
    white-space: nowrap;
}

/* Error de la casilla de condiciones, alineado con su texto: la etiqueta de MudCheckBox empieza a 48 px, tras el
   botón de la casilla. */
.acn-error-casilla[b-0h767i45qg] {
    padding-left: 48px;
}
/* /Pages/Asesoria/AltasClientes.razor.rz.scp.css */
/* Altas de clientes: los filtros del listado y lo propio de su tabla; la tarjeta, la sección, el segmentado, el
   buscador, la tabla y el chip los pone TarjetaPagina. Colores por variables de tema. */

/* ---------- Filtros ---------- */
/* Estado a la izquierda y buscador a la derecha, a pie de fila; si no caben, el buscador baja a su línea. */
.ac-filtros[b-jokevm8ldk] {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 12px 16px;
    margin-bottom: 16px;
}

/* Con cinco opciones el segmentado no cabe en un móvil: se desplaza dentro de su propio bloque. */
.ac-estados[b-jokevm8ldk] {
    min-width: 0;
    max-width: 100%;
    overflow-x: auto;
}

.ac-estados[b-jokevm8ldk]  .ac-estados__grupo.mud-toggle-group {
    width: max-content;
}

/* ---------- Tabla ---------- */
/* Todos los chips de estado miden lo mismo: cabe «Rechazada», el texto más largo. */
.ac-lista[b-jokevm8ldk] {
    --tpa-chip-ancho: 7.5em;
}

.ac-nombre[b-jokevm8ldk] {
    font-weight: 700;
    color: var(--mud-palette-text-primary);
}

.ac-sec[b-jokevm8ldk] {
    font-size: .75rem;
    color: var(--mud-palette-text-secondary);
}

/* Fila del motivo de una rechazada, bajo la suya: el mismo aire lateral que las celdas. */
.ac-motivo[b-jokevm8ldk] {
    padding: 0 20px 14px;
}

.ac-vacio-titulo[b-jokevm8ldk] {
    font-size: 1rem;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
}
/* /Pages/Asesoria/Componentes/AsignacionOperaciones.razor.rz.scp.css */
/* El marco no recorta (sin overflow: hidden): la barra de la selección es pegajosa y un ancestro con overflow la
   dejaría pegada a él y no al pie de la ventana. */
.ao-marco[b-cf157m6rw7] {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 10px;
}

/* Explorar se queda con el alto que la página cede al marco; la barra de la selección no encoge. El :not respeta el
   hidden, que pierde ante cualquier display de autor. */
.ao-explorar:not([hidden])[b-cf157m6rw7] {
    flex: 1 1 0px;
    display: flex;
    flex-direction: column;
}

/* La banda tintada de cada modo sigue la curva del marco, que no la recorta. */
.ao-marco[b-cf157m6rw7]  .ex-filtros,
.ao-marco[b-cf157m6rw7]  .bu-filtros {
    border-radius: 9px 9px 0 0;
}
/* /Pages/Asesoria/Componentes/BarraSeleccionAsignacion.razor.rz.scp.css */
/* Pegajosa al pie mientras se ve la herramienta. Como sticky ocupa su sitio en el flujo: al final del desplazamiento
   queda bajo la última fila y no la tapa. Opaca, para que las filas pasen por debajo. */
.bsa[b-724zjx9tay] {
    position: sticky;
    bottom: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px 16px;
    padding: 12px 20px;
    border-top: 1px solid var(--mud-palette-lines-default);
    border-radius: 0 0 9px 9px;
    background-color: var(--mud-palette-surface);
}

.bsa-info[b-724zjx9tay] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.bsa-pista[b-724zjx9tay] {
    font-size: .82rem;
    color: var(--mud-palette-text-secondary);
}

.bsa-cuenta[b-724zjx9tay] {
    font-size: .82rem;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
}

/* Chips con tope de alto y scroll interno: un lote grande no empuja la barra media pantalla. */
.bsa-chips[b-724zjx9tay] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    max-height: 64px;
    min-width: 0;
    overflow-y: auto;
}

/* El botón de asignar no encoge ni parte su rótulo. La raíz la pinta el componente: ::deep. */
.bsa[b-724zjx9tay]  .bsa-asignar.mud-button-root {
    flex: none;
    white-space: nowrap;
}

.bsa[b-724zjx9tay]  .mud-button-root {
    white-space: nowrap;
}

/* Estrecho: los chips solo se ven abiertos con «Ver selección», a todo el ancho. */
@media (max-width: 599.98px) {
    .bsa[b-724zjx9tay] {
        padding: 10px 16px;
    }

    .bsa-chips[b-724zjx9tay] {
        flex-basis: 100%;
        order: 1;
    }

    .bsa-chips:not(.bsa-chips--abierta)[b-724zjx9tay] {
        display: none;
    }
}
/* /Pages/Asesoria/Componentes/BuscadorAsignacion.razor.rz.scp.css */
/* Buscador de asignación: banda de filtros y tabla de resultados. Colores por variables de tema. */
.bu-filtros[b-j45efc6doj] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    background-color: color-mix(in srgb, var(--mud-palette-text-primary) 3%, var(--mud-palette-surface));
}

/* El texto se queda con lo que sobra y los filtros y «Todos» van a su derecha, centrados con el recuadro del campo
   y no con su caja: la etiqueta flotante le reserva 8px arriba (y el texto de error, abajo). Recuadro de 36px,
   píldora de 38px. Si no caben, bajan a la línea siguiente. */
.bu-busqueda[b-j45efc6doj] {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 10px;
}

.bu-texto[b-j45efc6doj] {
    flex: 1 1 260px;
    min-width: 0;
}

.bu-segs[b-j45efc6doj],
.bu-todos[b-j45efc6doj] {
    margin-top: 7px;
}

.bu-todos[b-j45efc6doj] {
    flex: none;
}

.bu-segs[b-j45efc6doj] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    min-width: 0;
}

/* Error de la búsqueda, con el aire lateral de la banda de filtros. */
.bu-error[b-j45efc6doj] {
    padding: 16px 20px;
}

/* Tabla de resultados. La fila elegida lleva el tinte del primario; las no disponibles, el texto atenuado. */
.bu[b-j45efc6doj]  .bu-tabla .mud-table-row.bu-fila--sel {
    background-color: color-mix(in srgb, var(--mud-palette-primary) 8%, var(--mud-palette-surface));
}

.bu[b-j45efc6doj]  .bu-tabla .mud-table-row.bu-fila--off {
    cursor: not-allowed;
}

.bu[b-j45efc6doj]  .bu-fila--off .bu-nombre,
.bu[b-j45efc6doj]  .bu-fila--off .tpa-codigo,
.bu[b-j45efc6doj]  .bu-fila--off .bu-reg {
    color: var(--mud-palette-text-disabled);
}

.bu[b-j45efc6doj]  .bu-check.mud-input-control {
    margin: 0;
}

.bu[b-j45efc6doj]  .bu-icono {
    font-size: 18px;
    margin: 0 6px;
}

.bu[b-j45efc6doj]  .bu-icono--off {
    color: var(--mud-palette-text-disabled);
}

.bu[b-j45efc6doj]  .bu-op {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.bu[b-j45efc6doj]  .bu-op__texto {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.bu[b-j45efc6doj]  .bu-nombre {
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}

.bu[b-j45efc6doj]  .bu-fila--sel .bu-nombre {
    font-weight: 700;
}

.bu[b-j45efc6doj]  .bu-sub {
    font-size: .75rem;
    color: var(--mud-palette-text-secondary);
}

.bu[b-j45efc6doj]  .bu-reg {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: .82rem;
    line-height: 1.35;
    color: var(--mud-palette-text-secondary);
}

.bu[b-j45efc6doj]  .bu-ambito {
    font-size: .69rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

@media (max-width: 599.98px) {
    .bu-filtros[b-j45efc6doj],
    .bu-error[b-j45efc6doj] {
        padding: 12px 16px;
    }

    /* El texto ocupa su línea y los filtros, ya bajo él, no necesitan el desfase del recuadro. */
    .bu-texto[b-j45efc6doj] {
        flex-basis: 100%;
    }

    .bu-segs[b-j45efc6doj],
    .bu-todos[b-j45efc6doj] {
        margin-top: 0;
    }
}
/* /Pages/Asesoria/Componentes/ContadorAsignadas.razor.rz.scp.css */
.ca[b-wsnheusub9] {
    flex: none;
    padding: 2px 7px;
    border-radius: 999px;
    white-space: nowrap;
    font-size: .69rem;
    font-weight: 700;
    color: var(--mud-palette-primary);
    background-color: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent);
}
/* /Pages/Asesoria/Componentes/ExploradorAsignacion.razor.rz.scp.css */
/* Explorador de asignación: segmentados, migas y tres columnas con scroll propio. Contenedor de consulta: se apila
   según el ancho real del explorador, con el drawer abierto o cerrado. En columna flex, para que las columnas se
   queden con el alto que le cedan. Colores por variables de tema. */
.ex[b-4qml503ixf] {
    container-type: inline-size;
    flex: 1 1 0px;
    display: flex;
    flex-direction: column;
}

/* ── Segmentados ÁMBITO y TIPO ─────────────────────────────── */
.ex-filtros[b-4qml503ixf] {
    flex: none;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px 24px;
    padding: 12px 20px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    background-color: color-mix(in srgb, var(--mud-palette-text-primary) 3%, var(--mud-palette-surface));
}

.ex-seg[b-4qml503ixf] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.ex-seg__rotulo[b-4qml503ixf] {
    flex: none;
    font-size: .69rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

.ex-seg[b-4qml503ixf]  .ex-seg__cuenta {
    font-size: .69rem;
    font-weight: 500;
    color: var(--mud-palette-text-secondary);
}

.ex-seg[b-4qml503ixf]  .ex-seg__grupo .mud-toggle-item:disabled .ex-seg__cuenta {
    color: var(--mud-palette-text-disabled);
}

/* ── Migas ─────────────────────────────────────────────────── */
.ex-migas[b-4qml503ixf] {
    flex: none;
    padding: 11px 20px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    font-size: .82rem;
    line-height: 1.3;
    color: var(--mud-palette-text-secondary);
}

.ex-migas__tira[b-4qml503ixf] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.ex-migas__raiz[b-4qml503ixf],
.ex-migas__actual[b-4qml503ixf] {
    font-weight: 700;
    color: var(--mud-palette-text-primary);
}

.ex-migas__sep[b-4qml503ixf] {
    color: var(--mud-palette-text-disabled);
}

/* ── Columnas ──────────────────────────────────────────────── */
/* Base 0: una lista larga no estira el explorador; el mínimo es el alto de las columnas cuando no se les cede más, y
   con el hero, las migas y los filtros cabe en 1280×720 sin desplazar la página. */
.ex-cols[b-4qml503ixf] {
    flex: 1 1 0px;
    min-height: 280px;
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(240px, 1.3fr);
    grid-template-rows: minmax(0, 1fr);
}

.ex-col[b-4qml503ixf] {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow-y: auto;
    border-right: 1px solid var(--mud-palette-lines-default);
}

.ex-col--op[b-4qml503ixf] {
    border-right: 0;
}

/* Cabecera pegajosa y opaca: cada columna desplaza por su cuenta y las filas pasan por debajo. Alto mínimo fijo,
   para que la cabecera mida lo mismo con o sin el resumen. */
.ex-col__cap[b-4qml503ixf] {
    position: sticky;
    top: 0;
    z-index: 1;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 40px;
    padding: 8px 16px;
    background-color: color-mix(in srgb, var(--mud-palette-text-primary) 7%, var(--mud-palette-surface));
    font-size: .69rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

.ex-col__resumen[b-4qml503ixf] {
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    white-space: nowrap;
}

.ex-vacio[b-4qml503ixf] {
    padding: 20px 16px;
    font-size: .82rem;
    line-height: 1.5;
    color: var(--mud-palette-text-secondary);
}

/* Error de carga de la columna: en su hueco, como el vacío, con el color de error. */
.ex-vacio--error[b-4qml503ixf] {
    color: var(--mud-palette-error);
}

/* Fila de régimen o grupo: el acento lateral y el tinte de la elegida viven en el contenedor. */
.ex-fila[b-4qml503ixf] {
    flex: none;
    display: flex;
    border-left: 3px solid transparent;
}

.ex-fila:not(.ex-fila--off):hover[b-4qml503ixf] {
    background-color: color-mix(in srgb, var(--mud-palette-text-primary) 4%, transparent);
}

.ex-fila--sel[b-4qml503ixf],
.ex-fila--sel:not(.ex-fila--off):hover[b-4qml503ixf] {
    border-left-color: var(--mud-palette-primary);
    background-color: color-mix(in srgb, var(--mud-palette-primary) 10%, var(--mud-palette-surface));
}

/* Botón a medida: el reset de MudBlazor centra todo <button>, de ahí el justify-content. Posicionado para contener
   los textos sr-only, que son absolutos. */
.ex-fila__boton[b-4qml503ixf] {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    padding: 10px 14px 10px 13px;
    border: 0;
    background: transparent;
    text-align: left;
    font: inherit;
    font-size: .875rem;
    line-height: 1.35;
    color: var(--mud-palette-text-primary);
    cursor: pointer;
}

button.ex-fila__boton:focus-visible[b-4qml503ixf] {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: -2px;
}

.ex-fila--sel .ex-fila__boton[b-4qml503ixf] {
    font-weight: 700;
}

.ex-fila__cod[b-4qml503ixf] {
    flex: none;
    min-width: 28px;
    font-size: .75rem;
    font-weight: 700;
    color: var(--mud-palette-text-secondary);
}

.ex-fila__nombre[b-4qml503ixf] {
    flex: 1 1 auto;
    min-width: 0;
}

.ex-fila__cuenta[b-4qml503ixf] {
    flex: none;
    font-size: .69rem;
    font-weight: 400;
    color: var(--mud-palette-text-secondary);
}

/* No contratada o de baja: en su sitio, atenuada y sin acción. */
.ex-fila--off .ex-fila__boton[b-4qml503ixf] {
    cursor: not-allowed;
    color: var(--mud-palette-text-disabled);
}

.ex-fila--off .ex-fila__cod[b-4qml503ixf] {
    color: var(--mud-palette-text-disabled);
}

.ex-marca[b-4qml503ixf] {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    font-size: .69rem;
    color: var(--mud-palette-text-secondary);
}

.ex-fila[b-4qml503ixf]  .ex-marca__icono {
    flex: none;
    font-size: 14px;
    color: var(--mud-palette-text-secondary);
}

/* ── Operaciones ───────────────────────────────────────────── */
.ex-op[b-4qml503ixf] {
    flex: none;
    border-bottom: 1px solid color-mix(in srgb, var(--mud-palette-text-primary) 6%, transparent);
}

.ex-op:hover[b-4qml503ixf] {
    background-color: color-mix(in srgb, var(--mud-palette-text-primary) 3%, transparent);
}

.ex-op--sel[b-4qml503ixf],
.ex-op--sel:hover[b-4qml503ixf] {
    background-color: color-mix(in srgb, var(--mud-palette-primary) 8%, var(--mud-palette-surface));
}

/* La etiqueta del MudCheckBox ocupa la fila entera: toda ella marca y desmarca. Su control trae márgenes y ancho
   propios que se anulan desde aquí. */
.ex-op[b-4qml503ixf]  .ex-op__check.mud-input-control {
    margin: 0;
    width: 100%;
}

.ex-op[b-4qml503ixf]  .ex-op__check .mud-input-control-input-container,
.ex-op[b-4qml503ixf]  .ex-op__check .mud-checkbox {
    width: 100%;
}

.ex-op[b-4qml503ixf]  .ex-op__check .mud-checkbox {
    display: flex;
    align-items: center;
    padding: 3px 16px 3px 6px;
}

.ex-op[b-4qml503ixf]  .ex-op__check .mud-checkbox > .mud-typography {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: .875rem;
    line-height: 1.35;
}

/* Fila de una ya asignada: sin casilla; el visto ocupa su hueco. */
.ex-op__fila[b-4qml503ixf] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px 10px 14px;
    font-size: .875rem;
    line-height: 1.35;
}

.ex-op[b-4qml503ixf]  .ex-op__icono {
    flex: none;
    font-size: 18px;
}

.ex-op[b-4qml503ixf]  .ex-op__nombre {
    flex: 1 1 auto;
    min-width: 0;
}

.ex-op--sel[b-4qml503ixf]  .ex-op__nombre {
    font-weight: 700;
}

/* ── Estrecho: columnas apiladas ───────────────────────────── */
/* Elegir no cambia el alto de nada: migas en una sola línea y sin negrita en la fila elegida. */
@container (max-width: 759.98px) {
    .ex-filtros[b-4qml503ixf] {
        padding: 12px 16px;
    }

    /* Las opciones se reparten el ancho a partes iguales: el resumen baja bajo el nombre si no cabe al lado. La doble
       clase gana a la píldora de la tarjeta. */
    .ex-seg[b-4qml503ixf] {
        flex: 1 1 100%;
        --tpa-segmentado-relleno: 10px;
    }

    .ex-seg[b-4qml503ixf]  .ex-seg__grupo.mud-toggle-group {
        flex: 1 1 auto;
    }

    .ex-seg[b-4qml503ixf]  .ex-seg__grupo.tpa-segmentado .mud-toggle-item {
        white-space: normal;
    }

    .ex-seg[b-4qml503ixf]  .ex-seg__grupo.tpa-segmentado .mud-toggle-item .mud-button-label {
        flex-wrap: wrap;
        justify-content: center;
        gap: 0 6px;
    }

    /* Migas desplazables enseñando el final: el contenedor en rtl coloca la tira en su borde derecho y la tira
       vuelve a ltr para leerse en orden; el min-width evita que una tira corta se pegue a la derecha. */
    .ex-migas[b-4qml503ixf] {
        direction: rtl;
        overflow-x: auto;
        scrollbar-width: none;
        padding: 10px 16px;
    }

    .ex-migas[b-4qml503ixf]::-webkit-scrollbar {
        height: 0;
    }

    .ex-migas__tira[b-4qml503ixf] {
        direction: ltr;
        display: inline-flex;
        flex-wrap: nowrap;
        width: max-content;
        min-width: 100%;
    }

    .ex-migas__tira > span[b-4qml503ixf] {
        flex: none;
        white-space: nowrap;
    }

    .ex-cols[b-4qml503ixf] {
        flex: none;
        min-height: 0;
        display: flex;
        flex-direction: column;
    }

    /* Apiladas, cada columna conserva su tope y su scroll aunque desplace la página: sin él, para llegar a los grupos
       de un régimen habría que bajar por la lista entera de regímenes. */
    .ex-col[b-4qml503ixf] {
        max-height: 320px;
        border-right: 0;
        border-bottom: 1px solid var(--mud-palette-lines-default);
    }

    .ex-col--op[b-4qml503ixf] {
        border-bottom: 0;
    }

    .ex-fila--sel .ex-fila__boton[b-4qml503ixf],
    .ex-op--sel[b-4qml503ixf]  .ex-op__nombre {
        font-weight: inherit;
    }

    /* El nombre baja a su propia línea: con el código y el chip delante, a 320 px no le quedaría ancho. */
    .ex-op__fila[b-4qml503ixf],
    .ex-op[b-4qml503ixf]  .ex-op__check .mud-checkbox > .mud-typography {
        flex-wrap: wrap;
        row-gap: 2px;
    }

    .ex-op[b-4qml503ixf]  .ex-op__nombre {
        order: 1;
        flex-basis: 100%;
    }
}
/* /Pages/Asesoria/Componentes/OperacionesAsignadas.razor.rz.scp.css */
/* Columna que ocupa el alto que le cede su sección: la cabecera no encoge, la tabla se queda con el resto y los
   estados (carga, vacío) se centran en el hueco. */
.oa[b-d8s4t79oeh] {
    display: flex;
    flex-direction: column;
}

.oa-estado[b-d8s4t79oeh] {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* A la derecha de la cabecera de sección (tpa-cab), el filtro y el acceso a la asignación; en estrecho bajan a su
   línea y el filtro la ocupa con el botón al lado, en vez de la línea entera que pide por su cuenta. */
.oa-acc[b-d8s4t79oeh] {
    display: flex;
    align-items: center;
    gap: 8px;
}

@media (max-width: 760px) {
    .oa-acc[b-d8s4t79oeh] {
        flex: 1 1 100%;
    }

    .oa-acc[b-d8s4t79oeh]  .fto {
        flex: 1 1 auto;
        min-width: 0;
    }
}
/* /Pages/Asesoria/Componentes/ResumenContratacion.razor.rz.scp.css */
/* Rótulo y ámbitos en una fila que envuelve; cada ámbito no se parte por dentro salvo que no quepa solo. */
.rc[b-x5lxqzyxkx] {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px 20px;
    font-size: .875rem;
    color: var(--mud-palette-text-secondary);
}

.rc-ambito[b-x5lxqzyxkx] {
    display: inline-flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0 6px;
}

.rc-ambito b[b-x5lxqzyxkx] {
    font-weight: 700;
    color: var(--mud-palette-text-primary);
}

/* Atenuado sin bajar del tono secundario: «No contratado» es un dato y debe leerse. */
.rc-ambito--no b[b-x5lxqzyxkx] {
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
}
/* /Pages/Asesoria/EmpresaAsesoradaDetalle.razor.rz.scp.css */
/* Cabecera del detalle: dos resúmenes (tpa-resumen) apilados, los chips de la suscripción del cliente con su
   vigencia y, debajo, su contratación con «Dejar de asesorar». */
.ead-resumen[b-gfl3fv69pa] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
/* /Pages/Asesoria/EmpresasAsesoradas.razor.rz.scp.css */
/* Tus empresas: lo propio de la tabla de la cartera; la tarjeta, la sección, el buscador, la tabla y el chip los
   pone TarjetaPagina. */

/* Todos los chips de suscripción miden lo mismo: cabe «Sin suscripción», el texto más largo. */
.ea-cartera[b-l2fp6mwybk] {
    --tpa-chip-ancho: 9.5em;
}

.ea-nombre[b-l2fp6mwybk] {
    font-weight: 700;
    color: var(--mud-palette-text-primary);
}

.ea-nif[b-l2fp6mwybk] {
    margin-top: 2px;
    font-size: .75rem;
    color: var(--mud-palette-text-secondary);
}

/* También en el menú de la fila, que se pinta fuera de la tabla. */
.ea-regimenes[b-l2fp6mwybk] {
    font-size: .8rem;
    line-height: 1.6;
    color: var(--mud-palette-text-primary);
}

.ea-no-contratado[b-l2fp6mwybk] {
    color: var(--mud-palette-text-disabled);
}
/* /Pages/Asesoria/SolicitudesEnviadas.razor.rz.scp.css */
/* Solicitudes enviadas: el alta en la cabecera de la tarjeta, los filtros del listado y lo propio de su tabla; la
   tarjeta, la sección, el campo y su botón, el segmentado, el buscador, la tabla y el chip los pone TarjetaPagina.
   Colores por variables de tema. */

/* ---------- Alta por NIF ---------- */
/* Campo y botón en una fila, alineados por arriba para que el mensaje de validación no mueva el botón. */
.se-alta[b-6g2gskgpxc] {
    max-width: 560px;
}

.se-alta-fila[b-6g2gskgpxc] {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 10px 12px;
}

.se-alta-nif[b-6g2gskgpxc] {
    flex: 1 1 260px;
    min-width: 0;
}

/* ---------- Filtros ---------- */
/* Estado a la izquierda y buscador a la derecha, a pie de fila; si no caben, el buscador baja a su línea, también a la
   derecha. */
.se-filtros[b-6g2gskgpxc] {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 12px 16px;
    margin-bottom: 16px;
}

/* Con seis opciones el segmentado no cabe en un móvil: se desplaza dentro de su propio bloque. */
.se-estados[b-6g2gskgpxc] {
    min-width: 0;
    max-width: 100%;
    overflow-x: auto;
}

.se-estados[b-6g2gskgpxc]  .se-estados__grupo.mud-toggle-group {
    width: max-content;
}

/* ---------- Tabla ---------- */
/* Todos los chips de estado miden lo mismo: cabe «Rechazada», el texto más largo. */
.se-lista[b-6g2gskgpxc] {
    --tpa-chip-ancho: 7.5em;
}

.se-nif[b-6g2gskgpxc] {
    font-weight: 700;
    color: var(--mud-palette-text-primary);
}

.se-sec[b-6g2gskgpxc] {
    font-size: .75rem;
    color: var(--mud-palette-text-secondary);
}
/* /Pages/Asesor/Asesor.razor.rz.scp.css */
/* Marco del asesor: alto de ventana, borde y redondeo de panel; la cabecera, la fase activa y la barra al pie se
   reparten el alto en columna. Recorta las esquinas: todo lo que desplaza lo hace por dentro de sus hijos. Colores
   por los tokens del sistema (--color-*), que .bs-root/arbol.css re-mapean al tema activo. */
.asesor[b-35zkr1hjot] {
    height: var(--gesta-alto-ventana);
    min-height: 460px;
    display: flex;
    flex-direction: column;
    background: var(--color-bg);
    border: 1px solid var(--color-divider);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.ase-top[b-35zkr1hjot] {
    flex: none;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 13px 22px;
    border-bottom: 1px solid var(--color-divider);
}

/* min-width: 0 deja encoger al <h1> dentro de la fila flex: en móvil las migas desplazan dentro de él en
   vez de ensanchar la cabecera. */
.ase-brand[b-35zkr1hjot] {
    min-width: 0;
    font: 600 16px var(--font-heading);
    letter-spacing: -.01em;
    margin: 0;
}

/* Región de un estado del marco (carga, aviso, error): cede su alto y desplaza por sí misma. */
.ase-region[b-35zkr1hjot] {
    flex: 1;
    min-height: 0;
    overflow: auto;
    padding: 24px;
}

.ase-body[b-35zkr1hjot] {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: 250px 1fr;
}

.ase-rail-wrap[b-35zkr1hjot] {
    min-height: 0;
}

/* min-width: 0 deja encoger la pista 1fr; no recorta: desplaza .ase-scroll. */
.ase-main[b-35zkr1hjot] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
}

.ase-scroll[b-35zkr1hjot] {
    flex: 1;
    min-height: 0;
    overflow: auto;
}

.ase-panel[b-35zkr1hjot] {
    /* ancho por clase compartida gesta-w-ancho, aplicada en el markup */
    padding: 40px 48px 48px;
    animation: aseIn-b-35zkr1hjot .3s cubic-bezier(.22, 1, .36, 1);
}

@keyframes aseIn-b-35zkr1hjot {
    from {
        opacity: 0;
        transform: translateX(var(--enter-x, 26px));
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.ase-kicker[b-35zkr1hjot] {
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--color-text) 50%, transparent);
    margin-bottom: 12px;
}

.ase-q[b-35zkr1hjot] {
    font-size: 32px;
    line-height: 1.08;
    letter-spacing: -.015em;
    margin: 0;
    text-wrap: balance;
}

/* Reciben el foco por código al cambiar de paso, para que no se pierda: no son controles y no llevan anillo. */
.ase-q:focus[b-35zkr1hjot],
.ase-brand:focus[b-35zkr1hjot] {
    outline: none;
}

/* Solo separa la descripción de su pregunta; la separación con las opciones la fija el grupo. */
.ase-q-desc[b-35zkr1hjot] {
    font-size: 16px;
    line-height: 1.4;
    color: color-mix(in srgb, var(--color-text) 60%, transparent);
    margin: 10px 0 0;
    text-wrap: pretty;
}

/* Separación del bloque de la pregunta (enunciado + descripción opcional) con las tarjetas. */
.ase-panel[b-35zkr1hjot]  .gop {
    margin-top: 32px;
}

/* Destino de una redirección: ocupa el hueco de las opciones, con su misma separación del enunciado. */
.ase-dest[b-35zkr1hjot] {
    margin-top: 32px;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 18px;
    border: 1px solid var(--color-divider);
    background: var(--color-surface);
    border-radius: var(--radius-md);
}

.ase-dest__icono[b-35zkr1hjot] {
    flex: none;
    display: inline-flex;
    color: var(--color-accent);
}

.ase-dest__texto[b-35zkr1hjot] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ase-dest__grupo[b-35zkr1hjot] {
    font: 600 17px/1.25 var(--font-heading);
    overflow-wrap: anywhere;
}

.ase-dest__regimen[b-35zkr1hjot] {
    font-size: 14px;
    line-height: 1.4;
    color: color-mix(in srgb, var(--color-text) 60%, transparent);
    overflow-wrap: anywhere;
}

/* La región viva existe siempre; solo el aviso que llega dentro ocupa sitio. */
.ase-dest-aviso__cuerpo[b-35zkr1hjot] {
    margin-top: 16px;
}

/* Móvil: el rail pasa a franja compacta sobre la pregunta y la tipografía baja un punto. */
@media (max-width: 760px) {
    .ase-top[b-35zkr1hjot] {
        padding: 11px 16px;
    }

    .ase-brand[b-35zkr1hjot] {
        font-size: 15px;
    }

    .ase-region[b-35zkr1hjot] {
        padding: 16px;
    }

    .ase-body[b-35zkr1hjot] {
        grid-template-columns: 1fr;
        grid-template-rows: auto minmax(0, 1fr);
    }

    .ase-panel[b-35zkr1hjot] {
        padding: 22px 18px 26px;
        max-width: none;
    }

    .ase-kicker[b-35zkr1hjot] {
        font-size: 10px;
        margin-bottom: 10px;
    }

    .ase-q[b-35zkr1hjot] {
        font-size: 21px;
        line-height: 1.15;
        max-width: none;
        margin: 0;
    }

    .ase-q-desc[b-35zkr1hjot] {
        font-size: 13px;
        margin: 8px 0 0;
    }

    .ase-panel[b-35zkr1hjot]  .gop {
        margin-top: 24px;
    }

    .ase-dest[b-35zkr1hjot] {
        margin-top: 24px;
        gap: 11px;
        padding: 14px 16px;
    }

    .ase-dest__grupo[b-35zkr1hjot] {
        font-size: 15px;
    }

    .ase-dest__regimen[b-35zkr1hjot] {
        font-size: 13px;
    }
}
/* /Pages/Asesor/Componentes/BarraAsistente.razor.rz.scp.css */
/* Barra fija al pie del marco del Asesor: el contenido de la fase desplaza por encima y los botones no se van con
   él. Colores por los tokens del sistema (--color-*), que .bs-root re-mapea al tema activo. */
.barra[b-553z2sfsam] {
    flex: none;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 22px;
    border-top: 1px solid var(--color-divider);
    background: var(--color-surface);
}

/* La pista ocupa el hueco entre los dos botones aunque esté vacía: así la primaria queda siempre a la derecha. */
.barra__pista[b-553z2sfsam] {
    flex: 1;
    min-width: 0;
    font-size: 13px;
    color: color-mix(in srgb, var(--color-text) 58%, transparent);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Estrecho: sin pista (las migas y la primaria ya lo dicen) y botones que no encogen, porque un botón que encoge
   parte su rótulo en dos líneas. El contexto de Atrás queda solo para los lectores de pantalla. La raíz del
   AppButton la pinta el componente: ::deep. */
@media (max-width: 760px) {
    .barra[b-553z2sfsam] {
        justify-content: space-between;
        padding: 12px 16px;
    }

    .barra__pista[b-553z2sfsam] {
        display: none;
    }

    .barra[b-553z2sfsam]  .mud-button-root {
        flex: none;
        white-space: nowrap;
    }

    .barra[b-553z2sfsam]  .barra-contexto {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }
}
/* /Pages/Asesor/Componentes/FormularioVerificacion.razor.rz.scp.css */
/* Verificación previa: mismo relieve y ritmo que el paso del árbol, con maqueta propia porque las clases
   .ase-* pertenecen al scope aislado de Asesor.razor. Llena el marco (.asesor es flex column) y reparte
   el alto entre el formulario (scroll interno) y la barra del asistente (fija), como el selector en cascada. */
.verf[b-l8jt5586x7] {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.verf-scroll[b-l8jt5586x7] {
    flex: 1;
    min-height: 0;
    overflow: auto;
}

.verf-panel[b-l8jt5586x7] {
    /* ancho por clase compartida gesta-w-ancho, aplicada en el markup */
    padding: 40px 48px;
    animation: verfIn-b-l8jt5586x7 .3s cubic-bezier(.22, 1, .36, 1);
}

@keyframes verfIn-b-l8jt5586x7 {
    from {
        opacity: 0;
        transform: translateX(26px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.verf-titulo[b-l8jt5586x7] {
    font-size: 32px;
    line-height: 1.08;
    letter-spacing: -.015em;
    margin: 0;
    text-wrap: balance;
}

/* Recibe el foco por código al entrar en el paso: no es un control y no lleva anillo. */
.verf-titulo:focus[b-l8jt5586x7] {
    outline: none;
}

.verf-desc[b-l8jt5586x7] {
    font-size: 16px;
    line-height: 1.4;
    color: color-mix(in srgb, var(--color-text) 60%, transparent);
    margin: 10px 0 0;
    text-wrap: pretty;
}

/* Cada pregunta es un bloque separado: en el árbol solo hay una, aquí conviven varias. */
.verf-bloque[b-l8jt5586x7] {
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid var(--color-divider);
}

.verf-q[b-l8jt5586x7] {
    font: 600 19px/1.25 var(--font-heading);
    margin: 0;
    text-wrap: balance;
}

.verf-bloque[b-l8jt5586x7]  .gop {
    margin-top: 16px;
}

/* El check de guardar cierra el formulario como un bloque más. La caja del MudCheckBox deja aire alrededor
   del icono: se retrasa para alinear la casilla con las tarjetas (raíz del componente Mud: ::deep). */
.verf-guardar[b-l8jt5586x7] {
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid var(--color-divider);
}

.verf-guardar[b-l8jt5586x7]  .mud-input-control {
    margin-left: -12px;
}

@media (max-width: 760px) {
    .verf-panel[b-l8jt5586x7] {
        padding: 22px 18px 26px;
        max-width: none;
    }

    .verf-titulo[b-l8jt5586x7] {
        font-size: 21px;
        line-height: 1.15;
    }

    .verf-desc[b-l8jt5586x7] {
        font-size: 13px;
        margin: 8px 0 0;
    }

    .verf-q[b-l8jt5586x7] {
        font-size: 15px;
    }

    .verf-bloque[b-l8jt5586x7]  .gop {
        margin-top: 14px;
    }
}
/* /Pages/Asesor/Componentes/GrupoOpciones.razor.rz.scp.css */
/* Rejilla de tarjetas de un grupo de opciones: dos columnas, una en estrecho. La separación con el enunciado la
   pone quien lo monta. */
.gop[b-v94ai9mhjf] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 13px;
}

@media (max-width: 760px) {
    .gop[b-v94ai9mhjf] {
        grid-template-columns: 1fr;
        gap: 12px;
    }
}
/* /Pages/Asesor/Componentes/OptionCard.razor.rz.scp.css */
.opt[b-1vt5e028vh] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;   /* fija el contenido a la IZQUIERDA (un button global lo centraba) */
    justify-content: flex-start; /* ...y ARRIBA en la tarjeta */
    gap: 6px;
    width: 100%;
    text-align: left;
    padding: 16px 18px;
    border: 1.5px solid var(--color-divider);
    background: var(--color-surface);
    border-radius: 4px;
    cursor: pointer;
    color: inherit;
    font: inherit;
    transition: border-color .16s, background .16s, box-shadow .16s;
}

.opt:hover[b-1vt5e028vh] {
    border-color: var(--color-accent);
    background: var(--color-accent-100);
}

.opt--sel[b-1vt5e028vh] {
    border-color: var(--color-accent);
    background: var(--color-accent-100);
}

/* Respuesta elegida que descarta el grupo: mismo relieve, tono de aviso. */
.opt--warn[b-1vt5e028vh] {
    border-color: var(--mud-palette-warning);
    background: color-mix(in srgb, var(--mud-palette-warning) 10%, transparent);
}

.opt__row[b-1vt5e028vh] {
    display: flex;
    align-items: flex-start;
    gap: 11px;
}

.opt__tick[b-1vt5e028vh] {
    flex: none;
    width: 21px;
    height: 21px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    border: 1.5px solid var(--color-neutral-400);
}

.opt--sel .opt__tick[b-1vt5e028vh] {
    border-color: var(--color-accent);
    background: var(--color-accent);
    color: var(--color-bg);
}

.opt--warn .opt__tick[b-1vt5e028vh] {
    border-color: var(--mud-palette-warning);
    background: var(--mud-palette-warning);
    color: var(--mud-palette-warning-text);
}

.opt__title[b-1vt5e028vh] {
    font: 600 17px/1.2 var(--font-heading);
}

.opt--compacta .opt__title[b-1vt5e028vh] {
    font: 400 15px/1.35 var(--font-heading);
}

.opt__desc[b-1vt5e028vh] {
    font-size: 13px;
    line-height: 1.45;
    color: color-mix(in srgb, var(--color-text) 62%, transparent);
    padding-left: 32px;
}

@media (max-width: 760px) {
    .opt__title[b-1vt5e028vh] {
        font-size: 15px;
    }

    .opt--compacta .opt__title[b-1vt5e028vh] {
        font-size: 13.5px;
    }

    .opt__desc[b-1vt5e028vh] {
        font-size: 12px;
    }
}
/* /Pages/Asesor/Componentes/RouteRail.razor.rz.scp.css */
.rail[b-xghnq6enef] {
    background: var(--color-surface);
    border-right: 1px solid var(--color-divider);
    padding: 26px 24px;
    overflow: auto;
    display: flex;
    flex-direction: column;
    gap: 26px;
    height: 100%;
}

.rail-prog__label[b-xghnq6enef] {
    font: 600 12px var(--font-heading);
    letter-spacing: .02em;
}

.rail-prog__row[b-xghnq6enef] {
    display: flex;
    align-items: baseline;
    gap: 7px;
    margin-top: 7px;
}

.rail-prog__num[b-xghnq6enef] {
    font: 600 30px var(--font-heading);
    color: var(--color-accent);
}

.rail-prog__step[b-xghnq6enef] {
    font-size: 11px;
    color: color-mix(in srgb, var(--color-text) 50%, transparent);
}

.pbar[b-xghnq6enef] {
    height: 5px;
    background: var(--color-neutral-200);
    border-radius: 3px;
    overflow: hidden;
    margin-top: 9px;
}

.pbar__fill[b-xghnq6enef] {
    height: 100%;
    background: var(--color-accent);
    border-radius: 3px;
    transition: width .45s cubic-bezier(.22, 1, .36, 1);
}

.rail-tl[b-xghnq6enef] {
    display: flex;
    flex-direction: column;
}

.tl-row[b-xghnq6enef] {
    display: flex;
    gap: 12px;
}

.tl-col[b-xghnq6enef] {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.tl-dot[b-xghnq6enef] {
    flex: none;
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.tl-dot--done[b-xghnq6enef] {
    background: var(--color-accent);
}

.tl-dot--current[b-xghnq6enef] {
    background: var(--color-accent);
    box-shadow: 0 0 0 3px var(--color-accent-200);
}

.tl-dot--pending[b-xghnq6enef] {
    border: 1.5px solid var(--color-neutral-400);
    background: var(--color-bg);
}

.tl-line[b-xghnq6enef] {
    width: 2px;
    flex: 1;
    min-height: 22px;
    background: var(--color-neutral-300);
}

.tl-line--done[b-xghnq6enef] {
    background: var(--color-accent);
}

.tl-body[b-xghnq6enef] {
    padding-bottom: 14px;
}

.tl-body--pending[b-xghnq6enef] {
    opacity: .55;
}

.tl-title[b-xghnq6enef] {
    font-size: 11px;
    color: color-mix(in srgb, var(--color-text) 50%, transparent);
}

.tl-title--current[b-xghnq6enef] {
    font-weight: 600;
    color: var(--color-accent);
}

.tl-value[b-xghnq6enef] {
    font: 600 14px/1.25 var(--font-heading);
    margin-top: 1px;
}

.rail-reset[b-xghnq6enef] {
    margin-top: auto;
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font: 600 13px var(--font-heading);
    color: color-mix(in srgb, var(--color-text) 55%, transparent);
    background: transparent;
    border: 0;
    padding: 4px 0;
    transition: color .16s;
}

.rail-reset:hover[b-xghnq6enef] {
    color: var(--color-accent);
}

/* Estrecho: franja compacta bajo la cabecera, del mismo alto antes y después de elegir. Sin traza ni «Paso X de
   N» (el panel ya lo dice): el porcentaje, la barra y Reiniciar en una fila. */
@media (max-width: 760px) {
    .rail[b-xghnq6enef] {
        flex-direction: row;
        align-items: center;
        gap: 12px;
        height: auto;
        padding: 10px 16px;
        border-right: 0;
        border-bottom: 1px solid var(--color-divider);
        overflow: visible;
    }

    .rail-prog[b-xghnq6enef] {
        flex: 1;
        min-width: 0;
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .rail-prog__label[b-xghnq6enef],
    .rail-prog__step[b-xghnq6enef],
    .rail-tl[b-xghnq6enef] {
        display: none;
    }

    .rail-prog__row[b-xghnq6enef] {
        margin-top: 0;
    }

    .rail-prog__num[b-xghnq6enef] {
        font-size: 15px;
    }

    .pbar[b-xghnq6enef] {
        flex: 1;
        margin-top: 0;
    }

    .rail-reset[b-xghnq6enef] {
        flex: none;
        margin-top: 0;
        white-space: nowrap;
    }
}
/* /Pages/Asesor/Componentes/SelectorOperacion.razor.rz.scp.css */
/* Selector en cascada del Asesor. Llena el marco (.asesor es flex column) y reparte el alto entre
   migas (fijas), columnas (scroll interno), el aviso tras «Comenzar» y la barra del asistente (fija). Colores/tipografía por los tokens
   del sistema (--color-*, --font-*), que .bs-root re-mapea al tema activo. */

.sel[b-id75q8vdvo] {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* ── Migas ─────────────────────────────────────────────────── */
.sel-crumbs[b-id75q8vdvo] {
    flex: none;
    padding: 13px 24px;
    border-bottom: 1px solid var(--color-divider);
    font-size: 13px;
    line-height: 1.3;
}

.sel-crumbs__tira[b-id75q8vdvo] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.sel-crumbs__root[b-id75q8vdvo] {
    color: color-mix(in srgb, var(--color-text) 42%);
    font-weight: bold;
}

.sel-crumbs__sep[b-id75q8vdvo] {
    color: color-mix(in srgb, var(--color-text) 28%, transparent);
}

.sel-crumbs__item[b-id75q8vdvo] {
    background: transparent;
    border: 0;
    padding: 0;
    font: inherit;
    cursor: pointer;
    color: color-mix(in srgb, var(--color-text) 60%, transparent);
    transition: color .16s;
}

.sel-crumbs__item:hover[b-id75q8vdvo] {
    color: var(--color-accent-700);
}

.sel-crumbs__item--current[b-id75q8vdvo] {
    cursor: default;
    font-weight: 600;
    color: var(--color-text);
}

/* Miga fija (el ámbito): texto que sitúa, no un nivel al que volver. */
.sel-crumbs__item--fijo[b-id75q8vdvo] {
    cursor: default;
}

.sel-crumbs__item--fijo:hover[b-id75q8vdvo] {
    color: color-mix(in srgb, var(--color-text) 60%, transparent);
}

/* ── Columnas ──────────────────────────────────────────────── */
.sel-cols[b-id75q8vdvo] {
    flex: 1;
    min-height: 0;
    display: flex;
}

/* El scroll-padding deja la fila que recibe el foco por debajo de la cabecera pegajosa de la columna. */
.sel-col[b-id75q8vdvo] {
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--color-divider);
    overflow: auto;
    scroll-padding-top: 40px;
}

.sel-col--tipo[b-id75q8vdvo] {
    flex: 0 0 158px;
}

/* En ancho, régimen a 600 px y grupo con el resto. Si el marco no da para las dos (el menú abierto entre
   761 y 1100 px), encogen en proporción a su base en vez de recortar el régimen y dejar el grupo a cero. */
.sel-col--reg[b-id75q8vdvo] {
    flex: 0 1 600px;
    min-width: 0;
}

.sel-col--fam[b-id75q8vdvo] {
    flex: 1 1 260px;
    min-width: 0;
    border-right: 0;
}

/* Banda de cabecera: mismo tinte neutro en las tres columnas (los separadores verticales son los que
   marcan la división). Sticky porque cada columna scrollea por su cuenta: sin esto el rótulo se pierde
   al bajar y las filas quedarían sueltas arriba. Opaca a propósito, para que las filas pasen por debajo. */
.sel-col__cap[b-id75q8vdvo] {
    position: sticky;
    top: 0;
    z-index: 1;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font: 600 10.5px var(--font-body);
    letter-spacing: .09em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--color-text) 70%, transparent);
    background: var(--color-neutral-200);
    border-bottom: 1px solid var(--color-divider-light);
    padding: 14px 16px 8px;
}

/* La fila es un contenedor plano, no el propio botón: no se pueden anidar <button>, así que la opción y
   el botón de ayuda del nivel elegido son hermanos. El tinte y el acento de selección viven aquí para
   que la banda cubra la fila entera, ayuda incluida. */
.sel-rowwrap[b-id75q8vdvo] {
    flex: none;
    display: flex;
    align-items: center;
    border-left: 2px solid transparent;
    transition: background .14s, border-color .14s;
}

.sel-rowwrap:hover[b-id75q8vdvo] {
    background: color-mix(in srgb, var(--color-text) 5%, transparent);
}

.sel-rowwrap--sel[b-id75q8vdvo] {
    background: var(--color-accent-100);
    border-left-color: var(--color-accent);
}

.sel-row[b-id75q8vdvo] {
    display: flex;
    align-items: center;
    /* El reset global de MudBlazor pone justify-content:center a todo <button>; sin esto las
       opciones quedan centradas en vez de pegadas a la izquierda. */
    justify-content: flex-start;
    gap: 10px;
    flex: 1 1 auto;
    min-width: 0;
    text-align: left;
    padding: 11px 16px;
    background: transparent;
    border: 0;
    cursor: pointer;
    font: 14px/1.3 var(--font-body);
    color: var(--color-text);
    transition: color .14s;
}

.sel-rowwrap--sel .sel-row[b-id75q8vdvo] {
    color: var(--color-accent-800);
    font-weight: 600;
}

.sel-row__code[b-id75q8vdvo] {
    flex: none;
    min-width: 30px;
    font: 600 11px var(--font-body);
    letter-spacing: .02em;
    color: color-mix(in srgb, var(--color-text) 55%, transparent);
}

.sel-rowwrap--sel .sel-row__code[b-id75q8vdvo] {
    color: var(--color-accent-700);
}

/* Ayuda del nivel elegido: píldora al final de la fila, fuera del flujo de texto de la opción (no hereda
   su peso 600). justify-content explícito por el mismo reset de MudBlazor. */
.sel-ayuda[b-id75q8vdvo] {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    margin-right: 12px;
    padding: 4px 11px 4px 8px;
    border: 1px solid var(--color-accent-300);
    border-radius: 999px;
    background: var(--color-bg);
    color: var(--color-accent-800);
    font: 600 11.5px var(--font-body);
    letter-spacing: .02em;
    cursor: pointer;
    transition: background .14s, border-color .14s;
}

.sel-ayuda:hover[b-id75q8vdvo] {
    background: var(--color-accent-200);
    border-color: var(--color-accent);
}

/* El CSS aislado no alcanza la raíz de un componente Mud: al icono se llega con ::deep. */
.sel-ayuda[b-id75q8vdvo]  .mud-icon-root {
    font-size: 15px;
}

/* Copia de la ayuda en la cabecera de la columna: solo en estrecho (abajo). */
.sel-ayuda--cap[b-id75q8vdvo] {
    display: none;
    margin-right: 0;
    text-transform: none;
}

.sel-row__label[b-id75q8vdvo] {
    min-width: 0;
}

/* Subtítulo del grupo, en su propia línea bajo el nombre. Con él, el código se alinea con la primera línea
   del nombre y no con el centro del bloque. Peso explícito: la fila elegida pasa a negrita y no debe
   arrastrarlo. */
.sel-row:has(.sel-row__sub)[b-id75q8vdvo] {
    align-items: baseline;
}

.sel-row__sub[b-id75q8vdvo] {
    display: block;
    margin-top: 2px;
    font: 400 12.5px/1.35 var(--font-body);
    color: color-mix(in srgb, var(--color-text) 55%, transparent);
}

/* Fila en mantenimiento (régimen o grupo de baja en Soporte): en su sitio, atenuada y sin acción; no es un
   botón. Sin pointer-events: none, que apagaría el tooltip del icono: el hover y el cursor se neutralizan
   aquí. Sin el ámbar del tema, que en el asesor ya significa «Gasto». */
.sel-rowwrap--mant:hover[b-id75q8vdvo] {
    background: transparent;
}

/* Posicionada para contener su texto sr-only, que es absoluto: sin un ancestro posicionado cercano, su caja no
   se desplaza con la columna ni la recorta, y alarga el scroll de la página. */
.sel-row--mant[b-id75q8vdvo] {
    position: relative;
    cursor: default;
    color: color-mix(in srgb, var(--color-text) 50%, transparent);
}

.sel-row--mant .sel-row__code[b-id75q8vdvo],
.sel-row--mant .sel-row__sub[b-id75q8vdvo] {
    color: color-mix(in srgb, var(--color-text) 38%, transparent);
}

/* La raíz del tooltip y el icono los pinta MudBlazor: se llega con ::deep. La raíz en inline-flex mide lo que
   el icono (16px, menos que el alto de línea), así la fila no crece, tampoco en estrecho; va al final de la
   fila, donde las elegidas llevan la ayuda. */
.sel-row--mant[b-id75q8vdvo]  .sel-mant {
    display: inline-flex;
    flex: none;
    margin-left: auto;
}

.sel-row--mant[b-id75q8vdvo]  .sel-mant__icono {
    font-size: 16px;
    color: color-mix(in srgb, var(--color-text) 55%, transparent);
}

.sel-empty[b-id75q8vdvo] {
    padding: 12px 16px;
    font-size: 13px;
    line-height: 1.5;
    color: color-mix(in srgb, var(--color-text) 55%, transparent);
}

/* Error de carga de la columna: en su hueco, como el vacío, con el color de error. */
.sel-empty--error[b-id75q8vdvo] {
    color: var(--mud-palette-error);
}

/* ── Aviso tras «Comenzar» ─────────────────────────────────── */
.sel-aviso[b-id75q8vdvo] {
    flex: none;
}

.sel-aviso__cuerpo[b-id75q8vdvo] {
    padding: 12px 22px;
    border-top: 1px solid var(--color-divider);
}

/* ── Responsive: apilar columnas ───────────────────────────── */
/* Regla de la versión apilada: elegir una fila no cambia el alto de nada que esté por encima de ella ni el
   suyo propio; si no, la última fila de la lista, pegada al borde inferior, queda oculta al elegirla y el
   asesor no ve lo que acaba de pulsar (aquí no se desplaza nada por él: la lista la mueve el usuario). */
@media (max-width: 760px) {
    /* Migas en una sola línea con desplazamiento horizontal, enseñando el final (lo último elegido): el
       contenedor en rtl coloca la tira en su borde derecho y el desborde queda a la izquierda, y la tira
       vuelve a ltr para que las migas se lean en orden. El min-width evita que una tira corta se alinee a
       la derecha. Sin barra visible, como las migas de la cabecera (MigasSeleccion). */
    .sel-crumbs[b-id75q8vdvo] {
        direction: rtl;
        overflow-x: auto;
        scrollbar-width: none;
        padding: 12px 16px;
        font-size: 12.5px;
    }

    .sel-crumbs[b-id75q8vdvo]::-webkit-scrollbar {
        height: 0;
    }

    .sel-crumbs__tira[b-id75q8vdvo] {
        direction: ltr;
        display: inline-flex;
        flex-wrap: nowrap;
        width: max-content;
        min-width: 100%;
    }

    .sel-crumbs__root[b-id75q8vdvo],
    .sel-crumbs__sep[b-id75q8vdvo],
    .sel-crumbs__item[b-id75q8vdvo] {
        flex: none;
        white-space: nowrap;
    }

    .sel-cols[b-id75q8vdvo] {
        flex-direction: column;
        overflow: auto;
        scroll-padding-top: 42px;
    }

    .sel-col[b-id75q8vdvo] {
        border-right: 0;
        border-bottom: 1px solid var(--color-divider);
        overflow: visible;
    }

    .sel-col--tipo[b-id75q8vdvo],
    .sel-col--reg[b-id75q8vdvo],
    .sel-col--fam[b-id75q8vdvo] {
        flex: none;
    }

    .sel-row[b-id75q8vdvo] {
        font-size: 13px;
    }

    .sel-row__sub[b-id75q8vdvo] {
        font-size: 12px;
    }

    .sel-empty[b-id75q8vdvo] {
        font-size: 12px;
    }

    /* La ayuda del nivel elegido pasa de la fila a la cabecera pegajosa, que reserva el alto del botón
       (26px + relleno) para medir lo mismo con y sin él. */
    .sel-col__cap[b-id75q8vdvo] {
        min-height: 42px;
        padding: 6px 12px 6px 16px;
    }

    .sel-rowwrap .sel-ayuda[b-id75q8vdvo] {
        display: none;
    }

    .sel-ayuda--cap[b-id75q8vdvo] {
        display: inline-flex;
    }

    /* La negrita ensancha el texto y puede añadirle una línea: en estrecho el elegido se distingue por el
       tinte, el acento lateral y el color. */
    .sel-rowwrap--sel .sel-row[b-id75q8vdvo] {
        font-weight: inherit;
    }

    .sel-aviso__cuerpo[b-id75q8vdvo] {
        padding: 12px 16px;
    }
}
/* /Pages/Cuenta/Componentes/HistorialSuscripciones.razor.rz.scp.css */
/* Historial de suscripciones (Mi cuenta): la cabecera, el marco de la tabla y los chips son piezas de la tarjeta;
   aquí, la tarjeta por fila en estrecho. Colores solo por variables de tema. */

/* Contenedor de consulta: la tabla se apila según su ancho real, no el de la ventana. */
.hs-tabla[b-wvbpxs53io] {
    container-type: inline-size;
}

/* En estrecho cada suscripción pasa a tarjeta: modalidad y estado en cabeza y debajo inicio, fin y consultas con
   su rótulo, de modo que no se pierde ningún dato. Por encima de 600 px las cinco columnas caben sin recorte. */
@container (max-width: 600px) {
    .hs[b-wvbpxs53io]  .hs-simple thead {
        display: none;
    }

    .hs[b-wvbpxs53io]  .hs-simple tbody tr {
        display: grid;
        grid-template-columns: 1fr auto;
        align-items: center;
        gap: 6px 12px;
        padding: 14px 16px;
        border-bottom: 1px solid color-mix(in srgb, var(--mud-palette-text-primary) 7%, transparent);
    }

    .hs[b-wvbpxs53io]  .hs-simple tbody tr:last-child {
        border-bottom: none;
    }

    .hs[b-wvbpxs53io]  .hs-simple tbody td {
        display: flex;
        align-items: baseline;
        gap: 12px;
        padding: 0;
        border-bottom: none;
    }

    .hs[b-wvbpxs53io]  .hs-simple tbody td:nth-child(1) {
        grid-row: 1;
        grid-column: 1;
        font-weight: 600;
    }

    .hs[b-wvbpxs53io]  .hs-simple tbody td:nth-child(5) {
        grid-row: 1;
        grid-column: 2;
    }

    .hs[b-wvbpxs53io]  .hs-simple tbody td[data-label] {
        grid-column: 1 / -1;
        font-size: .85rem;
    }

    .hs[b-wvbpxs53io]  .hs-simple tbody td[data-label]::before {
        content: attr(data-label);
        min-width: 88px;
        font-size: .66rem;
        font-weight: 700;
        letter-spacing: .08em;
        text-transform: uppercase;
        color: var(--mud-palette-text-secondary);
    }
}
/* /Pages/Cuenta/Componentes/ListaRegimenes.razor.rz.scp.css */
/* Lista de regímenes del catálogo (Mi cuenta): tarjeta con banda de cabecera y filas separadas por una línea
   tenue. Colores solo por variables de tema; el icono de estado toma el suyo del Color del MudIcon y los no
   suscritos se atenúan. Contenedor de consulta: el ajuste de la fila sigue al ancho real de la lista. */

.lr[b-ro1iec55x8] {
    min-width: 0;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 10px;
    clip-path: inset(0 round 10px);
    background-color: var(--mud-palette-surface);
    container-type: inline-size;
}

.lr-cab[b-ro1iec55x8] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 16px;
    background-color: color-mix(in srgb, var(--mud-palette-text-primary) 6%, var(--mud-palette-surface));
}

.lr-tit[b-ro1iec55x8] {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--mud-palette-text-primary);
}

.lr-count[b-ro1iec55x8] {
    font-size: .76rem;
    color: var(--mud-palette-text-secondary);
}

.lr-vacio[b-ro1iec55x8] {
    padding: 16px;
    font-size: .84rem;
    color: var(--mud-palette-text-secondary);
}

/* El reset de MudBlazor ya quita las viñetas; se anula también el margen y la sangría. */
.lr-lista[b-ro1iec55x8] {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* position: relative contiene el sr-only del mantenimiento dentro de su fila. */
.lr-fila[b-ro1iec55x8] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-top: 1px solid color-mix(in srgb, var(--mud-palette-text-primary) 7%, transparent);
}

.lr-fila:first-child[b-ro1iec55x8] {
    border-top: none;
}

.lr-fila--no[b-ro1iec55x8] {
    background-color: color-mix(in srgb, var(--mud-palette-text-primary) 2%, var(--mud-palette-surface));
}

/* El código (tpa-codigo de la tarjeta) con un ancho mínimo, para que los nombres arranquen alineados. */
.lr-cod[b-ro1iec55x8] {
    min-width: 32px;
    text-align: center;
}

.lr-texto[b-ro1iec55x8] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1 1 auto;
    min-width: 0;
}

.lr-nombre[b-ro1iec55x8] {
    font-size: .9rem;
    line-height: 1.35;
    color: var(--mud-palette-text-primary);
}

.lr-fila--no .lr-nombre[b-ro1iec55x8] {
    color: var(--mud-palette-text-secondary);
}

.lr-desc[b-ro1iec55x8] {
    font-size: .78rem;
    line-height: 1.4;
    color: var(--mud-palette-text-secondary);
}

/* La raíz del tooltip mide lo que el icono, así la fila no crece. */
.lr[b-ro1iec55x8]  .lr-mant,
.lr[b-ro1iec55x8]  .lr-estado {
    display: inline-flex;
    flex: none;
}

.lr[b-ro1iec55x8]  .lr-mant-icono {
    font-size: 16px;
    color: var(--mud-palette-text-secondary);
}

/* Lista estrecha (móvil): la fila cede aire lateral para dejar sitio al nombre. */
@container (max-width: 360px) {
    .lr-fila[b-ro1iec55x8] {
        gap: 10px;
        padding: 11px 12px;
    }
}
/* /Pages/Cuenta/Componentes/RegimenesCatalogo.razor.rz.scp.css */
/* Catálogo de regímenes (Mi cuenta). La cabecera es la tpa-cab de la tarjeta y la píldora de ámbito, su
   tpa-segmentado. Colores por variables de tema. */

/* Las dos listas lado a lado mientras quepan; si no, apiladas. El min() evita el desborde en móvil. */
.rc-listas[b-vp8ulalo36] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
    gap: 20px;
    align-items: start;
}

/* Móvil: la píldora baja a su línea y reparte el ancho entre los ámbitos. */
@media (max-width: 760px) {
    .rc[b-vp8ulalo36]  .rc-ambitos.mud-toggle-group {
        flex: 1 1 100%;
    }
}
/* /Pages/Cuenta/Componentes/ResumenSuscripcion.razor.rz.scp.css */
/* Resumen de la suscripción (Mi cuenta): la fila de chips y vigencia, la barra y el aviso son piezas de la tarjeta;
   aquí, el bloque del consumo. Colores por variables de tema. */

.rs-consumo[b-bh3oj0flq7] {
    max-width: 520px;
    margin-top: 16px;
}

.rs-uso[b-bh3oj0flq7] {
    display: block;
    margin-top: 10px;
    font-size: .84rem;
    color: var(--mud-palette-text-secondary);
}
/* /Pages/Home.razor.rz.scp.css */
/* Inicio (Usuarios): lo propio de la landing dentro de TarjetaPagina, que aporta la tarjeta, el hero y las secciones.
   Los componentes Mud de la fila de acción se alcanzan con ::deep desde su envoltorio. Colores por variables de tema. */

/* Fila de acción: el botón y, a continuación, el check del camino especial. Ocupa el ancho del hero (encogida al
   contenido, el MudCheckBox partiría la etiqueta); si no caben, el check baja a su propia línea. */
.inicio-accion[b-194zm3h47a] {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 12px 20px;
}

.inicio-accion[b-194zm3h47a]  .inicio-cta {
    padding: 11px 24px;
    border-radius: 6px;
    font-weight: 700;
    letter-spacing: .03em;
}

/* El check se apoya en el borde inferior del botón, no en su centro: la caja del MudCheckBox mide 48px con el icono
   (24px) centrado, así que se baja 12px para que el icono acabe donde acaba el botón. */
.inicio-accion[b-194zm3h47a]  .inicio-check {
    margin-bottom: -12px;
}

/* En estrecho el check va siempre en su línea, bajo el botón: si dependiera de si cabe, el ajuste de abajo no sabría
   cuándo aplicarse. La casilla se alinea con el botón (el icono lleva padding) y no hace falta bajarla. */
@media (max-width: 760px) {
    .inicio-accion[b-194zm3h47a] {
        flex-direction: column;
        align-items: flex-start;
    }

    .inicio-accion[b-194zm3h47a]  .inicio-check {
        margin-left: -8px;
        margin-bottom: 0;
    }
}
/* /Pages/MiAsesoria/MiAsesoria.razor.rz.scp.css */
/* Mi asesoría: la asociación vigente bajo el título de la tarjeta; la tarjeta, la sección, la tabla y el chip los pone
   TarjetaPagina. Colores por variables de tema. */

.mia-nombre[b-pwwewajh59] {
    font-weight: 700;
    color: var(--mud-palette-text-primary);
}
/* /Pages/Publico/ConfirmarSolicitud.razor.rz.scp.css */
/* Confirmación de una petición del formulario público: solo lo propio de la página; la sección, su cabecera y los
   códigos los pone TarjetaPagina. */

/* Pasos de lo que pasa tras confirmar, numerados con el código de la familia, como en la confirmación del formulario. */
.cso-pasos[b-mgptr5e63f] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0 0 20px;
    padding: 0;
    list-style: none;
}

.cso-pasos li[b-mgptr5e63f] {
    display: flex;
    align-items: baseline;
    gap: 12px;
}

/* Reintentar, a la derecha del mensaje y debajo de él si no cabe. */
.cso-error[b-mgptr5e63f] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 16px;
}
/* /Pages/Publico/SolicitarAlta.razor.rz.scp.css */
/* Formulario público de alta (T6): solo lo propio de la página; las secciones, sus cabeceras, los campos y los
   códigos los pone TarjetaPagina. Colores por variables de tema. */

/* Texto alineado con la etiqueta de una casilla: la explicación de «Somos una asesoría» y el error de las
   condiciones. La etiqueta de MudCheckBox empieza a 48 px, tras el botón de la casilla. */
.sal-sangria[b-gosusv1owy] {
    padding-left: 48px;
}

.sal-casilla[b-gosusv1owy] {
    display: flex;
    flex-direction: column;
}

/* Reintentar, a la derecha del mensaje y debajo de él si no cabe. */
.sal-error[b-gosusv1owy] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 16px;
}

/* Barra del pie: el botón no parte su rótulo y la pista ocupa lo que queda o baja de línea entera. La fila es de
   BarraAccionesFormulario (Core): se alcanza con ::deep. */
.sal-barra[b-gosusv1owy]  .d-flex {
    flex-wrap: wrap;
}

.sal-barra[b-gosusv1owy]  .mud-button-root {
    flex: none;
    white-space: nowrap;
}

.sal-pista[b-gosusv1owy] {
    flex: 1 1 260px;
    min-width: 0;
}

/* Pasos de la confirmación, numerados con el código de la familia. */
.sal-pasos[b-gosusv1owy] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0 0 20px;
    padding: 0;
    list-style: none;
}

.sal-pasos li[b-gosusv1owy] {
    display: flex;
    align-items: baseline;
    gap: 12px;
}