/* ==========================================================================
   RAMOS — Lo propio del modulo, bajo .bl.ra. Archivo 13 de 13. Ver §6.14.
   Handoff: mudblazor/design_handoff_parametrizacion_ramos.
   ========================================================================== */
/* Va tras 12-due-diligence sin colisiones: otro scope. 09-motion gana igual con
   !important. Antes de mover el orden, ver «El orden ES el contrato». */

/* --------------------------------------------------------------------------
   §0 — Normalizacion de MudText. Su body1 trae letter-spacing y tamaño
   propios; en este modulo los manda la clase de cada parte.
   -------------------------------------------------------------------------- */
.bl.ra .mud-typography{
    letter-spacing: normal;
}

/* --------------------------------------------------------------------------
   §1 — Columna de pagina y tarjeta unibody. El mock no le pone borde a la
   tarjeta: la separa del fondo con sombra, no con filete.
   -------------------------------------------------------------------------- */
.bl.ra{
    max-width: 1320px;
    margin: 0 auto;
    padding: 26px 24px 60px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.bl.ra .ra-card{
    border: 0;
    border-radius: 16px;
    box-shadow: var(--ra-card-shadow);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* --------------------------------------------------------------------------
   §2 — Cabecera: titular, bajada y las tres pastillas de indicador.
   -------------------------------------------------------------------------- */
.bl.ra .ra-head{
    padding: 26px 28px 0;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    flex-wrap: wrap;
}
.bl.ra .ra-head__titles{
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}
.bl.ra .ra-h1{
    margin: 0;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.01em;
    color: var(--ra-navy);
}
.bl.ra .ra-sub{
    font-size: 14px;
    color: var(--ra-muted);
    text-wrap: pretty;
}
.bl.ra .ra-kpis{
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
/* Linea base y no centro: el numero de 20px y el rotulo de 13px se apoyan igual. */
.bl.ra .ra-kpi{
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 9px 18px;
    border-radius: 999px;
    background: var(--ra-kpi-bg);
    white-space: nowrap;
}
.bl.ra .ra-kpi__n{
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
    color: var(--ra-navy);
}
/* Identico al mock. CONCERNIENTE: #B06F00 sobre #F1F4F9 mide 3.72:1, bajo el
   piso de texto. Queda a decision del dueño. Ver §2.5. */
.bl.ra .ra-kpi--warn .ra-kpi__n{
    color: var(--ra-warn);
}
.bl.ra .ra-kpi__l{
    font-size: 13px;
    color: var(--ra-muted);
}

/* --------------------------------------------------------------------------
   §3 — Tira de alcance: la tabbar de MudTabs, con paneles vacios.
   Ver §8, trampas 23, 24 y 25.
   -------------------------------------------------------------------------- */
.bl.ra .ra-scope .mud-tabs-tabbar{
    margin-top: 20px;
    padding: 0 28px;
    min-height: 0;
    background: transparent;
    border-bottom: 1px solid var(--ra-line);
}
.bl.ra .ra-scope .mud-tabs-tabbar-inner{
    min-height: 0;
}
.bl.ra .ra-scope .mud-tabs-tabbar-content{
    overflow: visible;
}
.bl.ra .ra-scope .mud-tabs-tabbar-wrapper{
    width: auto;
    gap: 30px;
}
/* La tira nunca desborda: tres pestañas fijas. */
.bl.ra .ra-scope .mud-tabs-scroll-button{
    display: none;
}
/* El subrayado activo pisa el filete del contenedor: por eso el -1px. */
.bl.ra .ra-scope .mud-tab{
    width: auto;
    min-width: 0;
    min-height: 0;
    margin: 0 0 -1px;
    padding: 0 2px 12px;
    border-radius: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: .03em;
    text-transform: none;
    white-space: nowrap;
    color: var(--ra-muted);
    /* 02-base baja los inactivos a .72; el mock los quiere a color pleno. */
    opacity: 1;
}
.bl.ra .ra-scope .mud-tab.ra-tab--on{
    color: var(--ra-navy);
    border-bottom-color: var(--ra-navy);
    opacity: 1;
}
.bl.ra .ra-scope .mud-tab:focus-visible{
    outline: 2px solid var(--ra-navy);
    outline-offset: 2px;
}
/* Los paneles quedan vacios a proposito: el cuerpo vive fuera de MudTabs. */
.bl.ra .ra-scope .mud-tabs-panels{
    display: none;
}

/* --------------------------------------------------------------------------
   §4 — Barra de acciones: buscador y boton primario.
   -------------------------------------------------------------------------- */
.bl.ra .ra-bar{
    padding: 20px 28px 14px;
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}
.bl.ra .ra-search{
    flex: 1 1 260px;
    min-width: 260px;
    margin: 0;
}
.bl.ra .ra-search .mud-input.mud-input-outlined{
    gap: 12px;
    padding: 13px 16px;
    border-radius: 10px;
    background: var(--dc-surface);
}
.bl.ra .ra-search .mud-input-outlined-border{
    border: 1px solid var(--ra-line-strong);
    border-radius: 10px;
}
/* El mock no marca foco en el buscador: el filete se queda quieto. */
.bl.ra .ra-search .mud-input.mud-input-outlined:hover .mud-input-outlined-border,
.bl.ra .ra-search .mud-input.mud-input-outlined:focus-within .mud-input-outlined-border{
    border-width: 1px;
    border-color: var(--ra-line-strong);
}
.bl.ra .ra-search .mud-input-slot:not(textarea){
    height: auto;
    padding: 0;
    font-size: 14px;
    color: var(--ra-text);
}
.bl.ra .ra-search .mud-input-slot::placeholder{
    color: var(--ra-placeholder);
    opacity: 1;
}
.bl.ra .ra-search .mud-input-adornment{
    margin: 0;
}
.bl.ra .ra-search .mud-input-adornment .mud-icon-root{
    font-size: 18px;
    color: var(--ra-icon);
}
.bl.ra .ra-btn-primary{
    height: auto;
    min-width: 0;
    padding: 14px 22px;
    border-radius: 10px;
    background: var(--ra-navy);
    color: var(--ra-navy-ink);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: .03em;
    text-transform: none;
    box-shadow: none;
}
/* El mock no define hover para este boton: se pinea el mismo navy, porque
   MudBlazor oscurece .mud-button-filled en hover/focus-visible/active. */
.bl.ra .ra-btn-primary:hover,
.bl.ra .ra-btn-primary:focus-visible,
.bl.ra .ra-btn-primary:active{
    background: var(--ra-navy);
    box-shadow: none;
}
.bl.ra .ra-btn-primary .mud-button-label{
    gap: 8px;
}
.bl.ra .ra-btn-primary .mud-button-icon-start{
    margin: 0;
}
.bl.ra .ra-btn-primary .mud-icon-root{
    font-size: 16px;
}

/* --------------------------------------------------------------------------
   §5 — Fila de filtros: pastillas de departamento, separador y el interruptor
   «Solo sin comision».
   -------------------------------------------------------------------------- */
.bl.ra .ra-filters{
    padding: 0 28px 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.bl.ra .ra-pills{
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.bl.ra .ra-pill.mud-chip{
    height: auto;
    min-height: 0;
    margin: 0;
    padding: 7px 14px;
    border: 1px solid var(--ra-line-strong);
    border-radius: 999px;
    background: var(--dc-surface);
    color: var(--ra-text-2);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
}
.bl.ra .ra-pill.mud-chip .mud-chip-content{
    height: auto;
    padding: 0;
}
.bl.ra .ra-pill.mud-chip.mud-chip-selected,
.bl.ra .ra-pill.mud-chip.mud-chip-selected:hover{
    border-color: var(--ra-navy);
    background: var(--ra-navy);
    color: var(--ra-navy-ink);
}
/* El mock no le da reaccion al puntero a la pastilla sin elegir. */
.bl.ra .ra-pill.mud-chip:hover{
    border-color: var(--ra-line-strong);
    background: var(--dc-surface);
    color: var(--ra-text-2);
}
.bl.ra .ra-vsep.mud-divider{
    width: 1px;
    height: 22px;
    margin: 0 4px;
    align-self: center;
    border: 0;
    background: var(--ra-line);
}
.bl.ra .ra-toggle.mud-chip{
    height: auto;
    min-height: 0;
    margin: 0;
    padding: 7px 14px;
    border: 1px solid var(--ra-line-strong);
    border-radius: 999px;
    background: var(--dc-surface);
    color: var(--ra-text-2);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
}
.bl.ra .ra-toggle.mud-chip .mud-chip-content{
    height: auto;
    padding: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
/* Identico al mock. CONCERNIENTE: #B06F00 sobre #FDF1D8 mide 3.66:1, bajo el
   piso de texto. Queda a decision del dueño. Ver §2.5. */
.bl.ra .ra-toggle.mud-chip.mud-chip-selected,
.bl.ra .ra-toggle.mud-chip.mud-chip-selected:hover{
    border-color: var(--ra-warn);
    background: var(--ra-warn-bg);
    color: var(--ra-warn);
}
/* El mock no le da reaccion al puntero al interruptor sin activar. */
.bl.ra .ra-toggle.mud-chip:hover{
    border-color: var(--ra-line-strong);
    background: var(--dc-surface);
    color: var(--ra-text-2);
}
/* El punto es ambar en los dos estados: marca la idea, no el encendido. */
.bl.ra .ra-dot{
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ra-warn);
    flex: none;
}

/* --------------------------------------------------------------------------
   §6 — Matriz. Cabecera, grupos por departamento, filas de ramo y celdas.
   Un solo vector de columnas, calculado por N aseguradoras, va en linea.
   -------------------------------------------------------------------------- */
.bl.ra .ra-matrix{
    overflow: auto;
    max-height: 70vh;
}
.bl.ra .ra-thead{
    display: grid;
    position: sticky;
    top: 0;
    z-index: 5;
    background: var(--dc-surface);
    border-top: 1px solid var(--ra-line);
    border-bottom: 1px solid var(--ra-line);
}
.bl.ra .ra-th-name{
    padding: 14px 28px;
    display: flex;
    align-items: center;
    gap: 12px;
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--dc-surface);
    font-size: 14px;
    font-weight: 700;
    color: var(--ra-text);
}
.bl.ra .ra-th-ins{
    padding: 12px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1px;
}
.bl.ra .ra-th-ins__name{
    font-size: 14px;
    font-weight: 700;
    color: var(--ra-text);
}
.bl.ra .ra-th-ins__code{
    font-size: 12px;
    color: var(--ra-icon);
}

/* Casilla de 18px dibujada por CSS: el Color de MudCheckBox no se repinta. Ver §8, trampa 30. */
/* La Class de MudCheckBox cae en el contenedor externo, no en el label: descendientes, no hijos. */
.bl.ra .ra-check,
.bl.ra .ra-check .mud-checkbox{
    margin: 0;
    flex: none;
    --checkbox-color: var(--ra-navy-ink);
}
.bl.ra .ra-check .mud-icon-button{
    width: 18px;
    height: 18px;
    padding: 0;
    border: 2px solid var(--ra-placeholder);
    border-radius: 4px;
    background: var(--dc-surface);
    color: var(--ra-navy-ink);
}
.bl.ra .ra-check .mud-icon-root{
    width: 11px;
    height: 11px;
    font-size: 11px;
}
/* El estado lo manda una clase, no el :checked: asi se dibuja el indeterminado.
   Sin marca la caja va vacia. */
.bl.ra .ra-check .mud-icon-root{
    visibility: hidden;
}
.bl.ra .ra-check--some .mud-icon-root,
.bl.ra .ra-check--on .mud-icon-root{
    visibility: visible;
}
/* Indeterminado: la caja SIGUE blanca, solo aparece el guion. */
.bl.ra .ra-check--on .mud-icon-button{
    border-color: var(--ra-navy);
    background: var(--ra-navy);
}
/* El mock no le da reaccion al puntero a la casilla. */
.bl.ra .ra-check .mud-icon-button:hover,
.bl.ra .ra-check .mud-icon-button:focus{
    background-color: var(--dc-surface);
}
.bl.ra .ra-check--on .mud-icon-button:hover,
.bl.ra .ra-check--on .mud-icon-button:focus{
    background-color: var(--ra-navy);
}

/* La fila del grupo es un boton de ancho completo; el titulo sigue al scroll. */
.bl.ra .ra-group{
    width: 100%;
    display: block;
    min-width: 0;
    padding: 11px 28px;
    border: 0;
    border-top: 1px solid var(--ra-line);
    border-radius: 0;
    background: var(--ra-zone-bg);
    color: inherit;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: normal;
    text-align: left;
    text-transform: none;
}
.bl.ra .ra-group:hover{
    background: var(--ra-zone-bg);
}
.bl.ra .ra-group .mud-button-label{
    display: block;
    width: 100%;
}
.bl.ra .ra-group__in{
    position: sticky;
    left: 28px;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    max-width: 100%;
}
/* Triangulo CSS: ArrowDropDown tiene otra metrica. Ver §3.11 del handoff. */
.bl.ra .ra-caret{
    width: 0;
    height: 0;
    flex: none;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid var(--ra-icon);
    transform: none;
    transition: transform .15s;
}
.bl.ra .ra-caret--open{
    transform: rotate(180deg);
}
.bl.ra .ra-group__name{
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ra-navy);
    white-space: nowrap;
}
/* Info icon beside the legal group name; its tooltip uses the global info-tip text. */
.bl.ra .ra-group__info{
    display: inline-flex;
    align-items: center;
}
/* The tooltip root is the flex child; centre it or the 16px icon sits 2px above the 20px name. */
.bl.ra .ra-group__in > .mud-tooltip-root{
    display: inline-flex;
    align-self: center;
}
.bl.ra .ra-group__sum{
    font-size: 12px;
    color: var(--ra-muted);
    white-space: nowrap;
}
.bl.ra .ra-group__pg{
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: 8px;
}
.bl.ra .ra-progress.mud-progress-linear{
    width: 120px;
    height: 6px;
    flex: none;
    border-radius: 999px;
    background: var(--gh-line-row-1);
    overflow: hidden;
}
/* MudBlazor pinta el bar con (0,3,0) y le anima el transform: el mock no anima. */
.bl.ra .ra-progress.mud-progress-linear:not(.mud-progress-linear-buffer) .mud-progress-linear-bar{
    background-color: var(--ra-navy);
    border-radius: 999px;
    transition: none;
}
.bl.ra .ra-progress.mud-progress-linear::before{
    background-color: var(--gh-line-row-1);
}
.bl.ra .ra-group__pct{
    width: 38px;
    font-size: 12px;
    font-weight: 700;
    text-align: right;
    color: var(--ra-navy);
}

.bl.ra .ra-row{
    display: grid;
    border-top: 1px solid var(--ra-line-row);
    background: var(--dc-surface);
}
.bl.ra .ra-row__name{
    padding: 9px 28px;
    display: flex;
    align-items: center;
    gap: 12px;
    position: sticky;
    left: 0;
    z-index: 1;
    min-width: 0;
    background: var(--dc-surface);
}
/* Fila elegida: el tinte va en la fila Y en la celda pegada, o al desplazar
   la primera columna sale blanca. */
.bl.ra .ra-row--sel,
.bl.ra .ra-row--sel .ra-row__name{
    background: var(--ra-row-selected);
}
.bl.ra .ra-row__label{
    font-size: 14px;
    color: var(--ra-text-2);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.bl.ra .ra-cellbox{
    padding: 6px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
/* El filete transparente ocupa caja: sin el, la celda vacia mide distinto. */
.bl.ra .ra-cell{
    width: 100%;
    min-width: 0;
    padding: 6px 8px;
    border-radius: 6px;
    justify-content: flex-end;
    font-size: 14px;
    line-height: 1.2;
    letter-spacing: normal;
    text-align: right;
    text-transform: none;
}
.bl.ra .ra-cell--on{
    border: 1px solid var(--ra-cell-border);
    background: var(--ra-cell-filled);
    color: var(--ra-text);
    font-weight: 700;
}
/* Identico al mock. CONCERNIENTE: 2.54:1 en claro y 3.44:1 en oscuro, bajo el
   piso de texto. Decide el dueño. Ver §2.5. */
.bl.ra .ra-cell--off{
    border: 1px solid transparent;
    background: var(--dc-surface);
    color: var(--ra-placeholder);
    font-weight: 400;
}
/* Sin permiso la celda no reacciona: se le quita el lavado de MudButton. */
.bl.ra .ra-cell--on:hover{
    background: var(--ra-cell-filled);
}
.bl.ra .ra-cell--off:hover{
    background: var(--dc-surface);
}
/* Solo la celda editable reacciona: sin permiso el mock no ofrece el filete. */
.bl.ra .ra-cell--act.ra-cell--on:hover{
    border-color: var(--ra-navy);
    background: var(--ra-cell-filled);
}
.bl.ra .ra-cell--act.ra-cell--off:hover{
    border-color: var(--ra-navy);
    background: var(--dc-surface);
}
.bl.ra .ra-cell:not(.ra-cell--act){
    cursor: default;
}

/* El unico elemento de la pantalla con filete de 2px: el editor en linea. */
.bl.ra .ra-cell-edit.mud-input-control{
    width: 100%;
    margin: 0;
}
.bl.ra .ra-cell-edit .mud-input{
    margin: 0;
    padding: 6px 8px;
    border: 2px solid var(--ra-navy);
    border-radius: 6px;
    background: var(--dc-surface);
}
.bl.ra .ra-cell-edit .mud-input-slot:not(textarea){
    height: auto;
    padding: 0;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    text-align: right;
    color: var(--ra-text);
}

/* El vacio va DENTRO del marco y DEBAJO de los grupos que siguen filtrando. */
.bl.ra .ra-empty{
    padding: 48px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    border-top: 1px solid var(--ra-line-row);
}
.bl.ra .ra-empty__t{
    font-size: 15px;
    font-weight: 700;
    color: var(--ra-text);
}
.bl.ra .ra-empty__h{
    font-size: 13px;
    color: var(--ra-muted);
}
.bl.ra .ra-loading.mud-progress-linear{
    margin: 28px;
    border-radius: 999px;
}

/* --------------------------------------------------------------------------
   §6b — Grupos legales: la matriz de §6 con cuatro columnas fijas, no
   una por aseguradora.
   -------------------------------------------------------------------------- */
.bl.ra .ra-legal{
    grid-template-columns: minmax(240px, 1.3fr) minmax(160px, .8fr) minmax(280px, 1.4fr) 132px;
    min-width: 820px;
}
.bl.ra .ra-legal__th{
    padding: 14px 12px;
    display: flex;
    align-items: center;
    font-size: 14px;
    font-weight: 700;
    color: var(--ra-text);
}
.bl.ra .ra-legal__cell{
    padding: 6px 12px;
    display: flex;
    align-items: center;
    min-width: 0;
}
.bl.ra .ra-legal__dept,
.bl.ra .ra-legal__art{
    font-size: 13px;
    color: var(--ra-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Sin ramo legal: el mismo ambar del interruptor «Solo sin comision», en la fila y en la celda pegada. */
.bl.ra .ra-legal--none,
.bl.ra .ra-legal--none .ra-row__name{
    background: var(--ra-warn-bg);
}
.bl.ra .ra-legal__sel{
    width: 100%;
    margin: 0;
}
.bl.ra .ra-legal__sel .mud-input.mud-input-outlined{
    border-radius: 10px;
    background: var(--dc-surface);
    font-size: 14px;
    color: var(--ra-text);
}
.bl.ra .ra-legal__sel .mud-input-outlined-border{
    border: 1px solid var(--ra-line-strong);
    border-radius: 10px;
}
/* El desplegable vive fuera de .ra: el grupo legal es un rotulo, no una opcion. */
.bl.ra-legal-pop .ra-legal-pop__group{
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--gh-label-2);
}

/* --------------------------------------------------------------------------
   §6c — Corto plazo: la matriz de §6 dentro de Parametros. Filas = tramos
   base; columnas = Base y una por aseguradora.
   -------------------------------------------------------------------------- */
/* Incrustada en .bl.pr: sin la columna de pagina de §1. */
.bl.ra.ra--embedded{
    max-width: none;
    margin: 0;
    padding: 0;
    gap: 0;
}
/* The bracket label keeps its width ("Más de 330 días" is the widest) so every days field lines up. */
.bl.ra.ra--embedded .ra-row__name > .ra-row__label{
    flex: none;
    min-width: 104px;
}
/* Base es la plantilla: la zona tenue la separa de las aseguradoras. */
.bl.ra .ra-cp-base{
    background: var(--ra-zone-bg);
}
.bl.ra .ra-cp-th-acts{
    margin-top: 4px;
    display: flex;
    align-items: center;
    gap: 4px;
}
.bl.ra .ra-cp-switch{
    margin: 0;
}
.bl.ra .ra-cp-switch .mud-typography{
    font-size: 12px;
    color: var(--ra-muted);
}
.bl.ra .ra-cp-revert{
    color: var(--ra-icon);
}
.bl.ra .ra-cp-open{
    font-size: 13px;
    color: var(--ra-muted);
    white-space: nowrap;
}
.bl.ra .ra-cp-del{
    color: var(--ra-icon);
}
/* Heredada: el valor de la base, en tinta tenue y sin relleno. */
.bl.ra .ra-cell--off.ra-cp-inherited{
    color: var(--ra-muted);
}
/* Tramo con error: el ambar de §6b, en la fila y en la celda pegada. */
.bl.ra .ra-cp-row--err,
.bl.ra .ra-cp-row--err .ra-row__name{
    background: var(--ra-warn-bg);
}

/* --------------------------------------------------------------------------
   §7 — Pie: resumen a la izquierda, leyenda de dos muestras a la derecha.
   -------------------------------------------------------------------------- */
.bl.ra .ra-foot{
    padding: 14px 28px;
    border-top: 1px solid var(--ra-line);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    font-size: 13px;
    color: var(--ra-muted);
}
.bl.ra .ra-legend{
    display: flex;
    align-items: center;
    gap: 14px;
}
.bl.ra .ra-legend__i{
    display: flex;
    align-items: center;
    gap: 6px;
}
.bl.ra .ra-legend__sw{
    width: 12px;
    height: 12px;
    border-radius: 3px;
    flex: none;
}
.bl.ra .ra-legend__sw--on{
    border: 1px solid var(--ra-cell-border);
    background: var(--ra-cell-filled);
}
.bl.ra .ra-legend__sw--off{
    border: 1px dashed var(--ra-dash);
    background: var(--dc-surface);
}

/* --------------------------------------------------------------------------
   §8 — Barra flotante. Va FUERA de PageWrapper: su transform residual haria
   de bloque contenedor. Trae «bl ra» propio y reajusta la columna.
   -------------------------------------------------------------------------- */
.bl.ra.ra-bulk{
    position: fixed;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%);
    z-index: 30;
    max-width: calc(100vw - 32px);
    margin: 0;
    padding: 12px 16px;
    border-radius: 12px;
    background: var(--ra-navy);
    color: var(--ra-navy-ink);
    box-shadow: var(--ra-bulk-shadow);
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}
.bl.ra .ra-bulk__n{
    font-size: 14px;
    font-weight: 700;
}
.bl.ra .ra-bulk__sep.mud-divider{
    width: 1px;
    height: 26px;
    margin: 0;
    align-self: center;
    border: 0;
    background: var(--ra-on-navy-sep);
}
.bl.ra .ra-bulk__lbl{
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
}
.bl.ra .ra-bulk__in.mud-input-control{
    width: 78px;
    flex: none;
    margin: 0;
}
.bl.ra .ra-bulk__in .mud-input{
    margin: 0;
    padding: 7px 9px;
    border: 1px solid var(--ra-on-navy-line);
    border-radius: 6px;
    background: var(--ra-on-navy-fill);
}
.bl.ra .ra-bulk__in .mud-input-slot:not(textarea){
    height: auto;
    padding: 0;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    text-align: right;
    color: var(--ra-navy-ink);
}
.bl.ra .ra-bulk__in .mud-input-slot::placeholder{
    color: var(--ra-on-navy-hint);
    opacity: 1;
}
.bl.ra .ra-bulk__sel.mud-input-control{
    flex: none;
    margin: 0;
}
.bl.ra .ra-bulk__sel .mud-input{
    margin: 0;
    padding: 7px 9px;
    border: 1px solid var(--ra-navy-ink);
    border-radius: 6px;
    background: var(--ra-navy-ink);
}
.bl.ra .ra-bulk__sel .mud-input-slot:not(textarea){
    height: auto;
    padding: 0;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--ra-text);
}
.bl.ra .ra-bulk__sel .mud-input-adornment .mud-icon-root{
    font-size: 18px;
    color: var(--ra-text);
}
.bl.ra .ra-bulk__go{
    height: auto;
    min-width: 0;
    padding: 9px 18px;
    border-radius: 8px;
    background: var(--ra-navy-ink);
    color: var(--ra-navy);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: .02em;
    text-transform: none;
    box-shadow: none;
}
.bl.ra .ra-bulk__go:hover{
    background: var(--ra-navy-ink);
    box-shadow: none;
}
.bl.ra .ra-bulk__x{
    height: auto;
    min-width: 0;
    padding: 0;
    background: transparent;
    color: var(--ra-on-navy-muted);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: normal;
    text-transform: none;
}
.bl.ra .ra-bulk__x:hover{
    background: transparent;
}

/* --------------------------------------------------------------------------
   §9 — Aviso verde, por encima del velo del dialogo y fuera de PageWrapper.
   Sin animacion de entrada ni de salida.
   -------------------------------------------------------------------------- */
.bl.ra.ra-toast{
    position: fixed;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%);
    z-index: 60;
    max-width: calc(100vw - 32px);
    margin: 0;
    padding: 12px 18px;
    border-radius: 10px;
    background: var(--ra-ok);
    color: var(--ra-ok-ink);
    box-shadow: var(--ra-toast-shadow);
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 700;
}
.bl.ra .ra-toast__ico.mud-icon-root{
    width: 16px;
    height: 16px;
    font-size: 16px;
}
.bl.ra .ra-toast__t{
    font-size: 14px;
    font-weight: 700;
}

/* --------------------------------------------------------------------------
   §10 — Dialogo "Nueva parametrización". Class cae en su raiz (trampa 5):
   se pisa con mayor especificidad, sin depender del orden de carga.
   -------------------------------------------------------------------------- */
.mud-dialog.dlg-form.ra-dlg{
    /* Solo lo propio de Ramos: el ancho, y el re-anclaje del padding/gap de
       columna que §1 (.bl.ra) inyecta con la misma especificidad. El resto del
       cromo (radio, sombra, velo, titulo, cuerpo, cabecera, botones) lo da .dlg-form. */
    max-width: 1000px;
    padding: 0;
    gap: 0;
}
/* El pie lleva un resumen a la izquierda: reparte cabos a los extremos. */
.mud-dialog.dlg-form.ra-dlg .dlg-form__actions{
    justify-content: space-between;
    flex-wrap: wrap;
}
.bl.ra .ra-dlg__summary{
    font-size: 13px;
    color: var(--dlg-muted);
}

/* Encabezado de paso: circulo + rotulo + regla, comun a los 3 pasos. */
.bl.ra .ra-mstep{
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.bl.ra .ra-mstep--last{
    padding-bottom: 8px;
}
.bl.ra .ra-mstep__head{
    display: flex;
    align-items: center;
    gap: 12px;
}
.bl.ra .ra-mstep__circle{
    width: 22px;
    height: 22px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--ra-neutral);
    color: var(--ra-placeholder);
    font-size: 12px;
    font-weight: 700;
}
.bl.ra .ra-mstep__circle--on{
    background: var(--ra-navy);
    color: var(--ra-navy-ink);
}
.bl.ra .ra-mstep__label{
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: none;
    color: var(--ra-text);
    white-space: nowrap;
}
.bl.ra .ra-mstep__rule{
    flex: 1;
    height: 1px;
    background: var(--ra-line-strong);
}
.bl.ra .ra-mstep__aux{
    font-size: 12px;
    font-weight: 700;
    color: var(--ra-navy);
    white-space: nowrap;
}

/* Paso 1 — segmentado de alcance + chips de aseguradora. */
.bl.ra .ra-mscope-row{
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.bl.ra .ra-mseg.mud-toggle-group{
    border: 0;
    overflow: visible;
    border-radius: 8px;
    background: var(--ra-cell-filled);
    padding: 3px;
    gap: 0;
    height: auto;
    min-height: 0;
}
/* El item es un MudButton entero: hereda .mud-button (line-height ~1.75,
   min-width:64px) y .mud-button-label (min-height:20px). Trampa aparte. */
.bl.ra .ra-mseg .mud-toggle-item{
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--ra-text-2);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: none;
    padding: 8px 18px;
    box-shadow: none;
    line-height: normal;
    min-height: 0;
    height: auto;
    min-width: 0;
    margin: 0;
}
.bl.ra .ra-mseg .mud-toggle-item .mud-button-label{
    min-height: 0;
}
.bl.ra .ra-mseg .mud-toggle-item.ra-mseg__on{
    background: var(--ra-navy);
    color: var(--ra-navy-ink);
}
.bl.ra .ra-mseg-help{
    font-size: 12px;
    color: var(--ra-muted);
    text-wrap: pretty;
    max-width: 340px;
}
.bl.ra .ra-minsurers-row{
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}
.bl.ra .ra-mlink{
    height: auto;
    min-width: 0;
    padding: 0;
    background: transparent;
    color: var(--ra-navy);
    font-size: 13px;
    font-weight: 700;
    text-transform: none;
    box-shadow: none;
}
.bl.ra .ra-mlink:hover{
    background: transparent;
}
.bl.ra .ra-mlink--sm{
    font-size: 11px;
}

/* Chip de aseguradora: caja siempre blanca, solo cambia el borde; el tilde
   es siempre navy y aparece solo si esta elegido. */
.bl.ra .ra-mchip.mud-chip{
    height: auto;
    min-height: 0;
    margin: 0;
    padding: 7px 14px 7px 9px;
    border: 1px solid var(--ra-line-strong);
    border-radius: 999px;
    background: var(--dc-surface);
    color: var(--ra-text-2);
    font-size: 13px;
    font-weight: 600;
    gap: 8px;
}
.bl.ra .ra-mchip.mud-chip .mud-chip-content{
    height: auto;
    padding: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.bl.ra .ra-mchip.mud-chip.mud-chip-selected,
.bl.ra .ra-mchip.mud-chip.mud-chip-selected:hover{
    border-color: var(--ra-navy);
    background: var(--ra-navy);
    color: var(--ra-navy-ink);
}
/* El mock no le da reaccion al puntero al chip de aseguradora sin elegir. */
.bl.ra .ra-mchip.mud-chip:hover{
    border-color: var(--ra-line-strong);
    background: var(--dc-surface);
    color: var(--ra-text-2);
}
.bl.ra .ra-mchip__box{
    width: 15px;
    height: 15px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 4px;
    border: 1.5px solid var(--ra-placeholder);
    background: var(--dc-surface);
}
.bl.ra .ra-mchip.mud-chip-selected .ra-mchip__box{
    border-color: var(--ra-navy-ink);
}
.bl.ra .ra-mchip__tick.mud-icon-root{
    width: 10px;
    height: 10px;
    font-size: 10px;
    color: var(--ra-navy);
}

/* Paso 2 — tarjetas de departamento + panel de ramos. */
.bl.ra .ra-mdept-row{
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.bl.ra .ra-mdept.mud-chip{
    height: auto;
    min-height: 0;
    margin: 0;
    padding: 10px 16px;
    border: 1px solid var(--ra-line-strong);
    border-radius: 10px;
    background: var(--dc-surface);
    color: var(--ra-text);
    text-align: left;
}
.bl.ra .ra-mdept.mud-chip .mud-chip-content{
    height: auto;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
}
.bl.ra .ra-mdept.mud-chip.mud-chip-selected,
.bl.ra .ra-mdept.mud-chip.mud-chip-selected:hover{
    background: var(--ra-row-selected);
    border-color: var(--ra-navy);
    color: var(--ra-navy);
}
/* El mock no le da reaccion al puntero a la tarjeta de departamento sin elegir. */
.bl.ra .ra-mdept.mud-chip:hover{
    border-color: var(--ra-line-strong);
    background: var(--dc-surface);
    color: var(--ra-text);
}
/* Fuera del alcance activo el chip se esconde, pero SIGUE en el arbol: sacarlo
   lo desmontaria y el desmontaje se lleva el departamento elegido. */
.bl.ra .ra-mdept--hidden.mud-chip{
    display: none;
}
.bl.ra .ra-mdept__name{
    font-size: 14px;
    font-weight: 700;
    color: inherit;
}
.bl.ra .ra-mdept__sub{
    font-size: 12px;
    color: var(--ra-muted);
}
.bl.ra .ra-mpanel.mud-paper{
    border: 1px solid var(--ra-line);
    border-radius: 10px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    box-shadow: none;
}
.bl.ra .ra-mpanel__bar{
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.bl.ra .ra-mpanel__search{
    flex: 1 1 200px;
    min-width: 200px;
    margin: 0;
}
.bl.ra .ra-mpanel__search .mud-input{
    margin: 0;
    padding: 8px 12px;
    border-radius: 8px;
    background: var(--ra-cell-filled);
}
.bl.ra .ra-mpanel__search .mud-input-slot:not(textarea){
    height: auto;
    padding: 0;
    font-size: 13px;
    color: var(--ra-text);
}
.bl.ra .ra-mpanel__search .mud-input-slot::placeholder{
    color: var(--ra-placeholder);
    opacity: 1;
}
.bl.ra .ra-mpanel__search .mud-input-adornment{
    margin: 0;
}
.bl.ra .ra-mpanel__search .mud-input-adornment .mud-icon-root{
    font-size: 15px;
    color: var(--ra-icon);
}
.bl.ra .ra-mpanel__count{
    font-size: 12px;
    color: var(--ra-muted);
    white-space: nowrap;
}
.bl.ra .ra-mramo-chips{
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    max-height: 150px;
    overflow-y: auto;
}

/* Chip de ramo: misma logica que el de aseguradora, distinta metrica de caja
   (14px/radio 3, no 15px/radio 4 — ver §6, item 14 de la comparacion). */
.bl.ra .ra-rchip.mud-chip{
    height: auto;
    min-height: 0;
    margin: 0;
    padding: 5px 12px 5px 8px;
    border: 1px solid var(--ra-line-strong);
    border-radius: 999px;
    background: var(--dc-surface);
    color: var(--ra-text-2);
    font-size: 13px;
    font-weight: 600;
    gap: 6px;
}
.bl.ra .ra-rchip.mud-chip .mud-chip-content{
    height: auto;
    padding: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.bl.ra .ra-rchip.mud-chip.mud-chip-selected,
.bl.ra .ra-rchip.mud-chip.mud-chip-selected:hover{
    border-color: var(--ra-navy);
    background: var(--ra-navy);
    color: var(--ra-navy-ink);
}
/* El mock no le da reaccion al puntero al chip de ramo sin elegir. */
.bl.ra .ra-rchip.mud-chip:hover{
    border-color: var(--ra-line-strong);
    background: var(--dc-surface);
    color: var(--ra-text-2);
}
/* La busqueda esconde el chip que no coincide, pero lo deja en el arbol:
   desmontarlo se llevaria su ramo de la seleccion. */
.bl.ra .ra-rchip--hidden.mud-chip{
    display: none;
}
.bl.ra .ra-rchip__box{
    width: 14px;
    height: 14px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 3px;
    border: 1.5px solid var(--ra-placeholder);
    background: var(--dc-surface);
}
.bl.ra .ra-rchip.mud-chip-selected .ra-rchip__box{
    border-color: var(--ra-navy-ink);
}
.bl.ra .ra-rchip__tick.mud-icon-root{
    width: 10px;
    height: 10px;
    font-size: 10px;
    color: var(--ra-navy);
}

/* Paso 3 — caja vacia con guion, o llenado rapido + tabla de captura. */
.bl.ra .ra-mempty{
    border: 1px dashed var(--ra-dash);
    border-radius: 10px;
    padding: 28px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-align: center;
}
.bl.ra .ra-mempty__ico.mud-icon-root{
    width: 26px;
    height: 26px;
    font-size: 26px;
    color: var(--ra-placeholder);
}
.bl.ra .ra-mempty__t{
    font-size: 14px;
    font-weight: 700;
    color: var(--ra-text);
}
.bl.ra .ra-mempty__h{
    font-size: 13px;
    color: var(--ra-muted);
    max-width: 360px;
    text-wrap: pretty;
}

.bl.ra .ra-mfill.mud-paper{
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    background: var(--ra-zone-bg);
    border-radius: 10px;
    padding: 10px 12px;
    box-shadow: none;
}
.bl.ra .ra-mfill__lbl{
    font-size: 13px;
    font-weight: 600;
    color: var(--ra-text-2);
}
.bl.ra .ra-mfill__pct{
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--ra-muted);
}
.bl.ra .ra-mfill__in.mud-input-control{
    width: 82px;
    flex: none;
    margin: 0;
}
.bl.ra .ra-mfill__in .mud-input{
    margin: 0;
    padding: 7px 9px;
    border: 1px solid var(--ra-line-strong);
    border-radius: 6px;
    background: var(--dc-surface);
}
.bl.ra .ra-mfill__in .mud-input-slot:not(textarea){
    height: auto;
    padding: 0;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    text-align: right;
    color: var(--ra-text);
}
.bl.ra .ra-mfill__go{
    height: auto;
    min-width: 0;
    padding: 8px 14px;
    border: 1px solid var(--ra-navy);
    border-radius: 8px;
    background: var(--dc-surface);
    color: var(--ra-navy);
    font-size: 13px;
    font-weight: 700;
    text-transform: none;
    box-shadow: none;
}
.bl.ra .ra-mfill__go:hover{
    background: var(--dc-surface);
    box-shadow: none;
}
.bl.ra .ra-mfill__pending{
    margin-left: auto;
    font-size: 12px;
    font-weight: 700;
}
.bl.ra .ra-mfill__pending--warn{
    color: var(--ra-warn);
}
.bl.ra .ra-mfill__pending--ok{
    color: var(--ra-ok);
}

/* Tabla de captura: unico marco de la pantalla con filete VERTICAL, ademas
   del horizontal — a proposito distinto de la matriz principal. */
.bl.ra .ra-mtable{
    border: 1px solid var(--ra-line);
    border-radius: 10px;
    overflow: auto;
    max-height: 280px;
}
.bl.ra .ra-mtable__head{
    display: grid;
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--ra-zone-bg);
    border-bottom: 1px solid var(--ra-line);
}
/* Identico al mock. CONCERNIENTE: #6B7690 sobre #F6F8FB mide 4.27:1 en claro,
   bajo el piso de texto. Queda a decision del dueño. Ver §2.5. */
.bl.ra .ra-mtable__hcell{
    padding: 10px 14px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ra-muted);
    position: sticky;
    left: 0;
    background: var(--ra-zone-bg);
}
.bl.ra .ra-mtable__hins{
    padding: 8px 12px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1px;
    border-left: 1px solid var(--ra-line-soft);
}
.bl.ra .ra-mtable__hname{
    font-size: 13px;
    font-weight: 700;
    color: var(--ra-text);
}
.bl.ra .ra-mtable__row{
    display: grid;
    border-top: 1px solid var(--ra-line-row);
}
.bl.ra .ra-mtable__name{
    padding: 8px 14px;
    display: flex;
    flex-direction: column;
    position: sticky;
    left: 0;
    min-width: 0;
    background: var(--dc-surface);
}
.bl.ra .ra-mtable__ramo{
    font-size: 14px;
    color: var(--ra-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.bl.ra .ra-mtable__dept{
    font-size: 12px;
    color: var(--ra-muted);
}
.bl.ra .ra-mtable__cell{
    border-left: 1px solid var(--ra-line-row);
    padding: 6px;
    display: flex;
    align-items: center;
}
.bl.ra .ra-mtable__input.mud-input-control{
    width: 100%;
    margin: 0;
}
.bl.ra .ra-mtable__input .mud-input{
    margin: 0;
    padding: 8px 10px;
    border: 1px solid var(--ra-line-strong);
    border-radius: 6px;
    background: var(--dc-surface);
}
.bl.ra .ra-mtable__input--on .mud-input{
    border-color: var(--ra-cell-border);
    background: var(--ra-cell-filled);
}
.bl.ra .ra-mtable__input .mud-input-slot:not(textarea){
    height: auto;
    padding: 0;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    text-align: right;
    color: var(--ra-text);
}