/* ============================================================================
   Módulo MIS BENEFICIOS — estilos compartidos (prefijo .ben-)
   docs/arquitectura/23-mis-beneficios.md · mockups P1-P15 del área funcional.

   Global y no aislado, como activos-fijos.css: las piezas (indicadores, tablas, modal, asistente)
   las comparten la administración, el asistente y el portal del trabajador, y con CSS aislado
   habría que repetirlas en cada página o colgarlas de ::deep.
   Todo con tokens var(--mt-*). Cero colores fijos. Al tocarlo, subir su ?v= en App.razor.
   ============================================================================ */

/* ── Indicadores (P1-P15: cuadro de iniciales + rótulo + valor) ───────────── */
.ben-kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 16px;
}
.ben-kpis--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }

.ben-kpi {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    background: var(--mt-paper-bg);
    border: 1px solid var(--mt-border-color);
    border-radius: var(--mt-radius-lg);
    box-shadow: var(--mt-shadow-sm);
    min-width: 0;
}
.ben-kpi__txt { display: flex; flex-direction: column; min-width: 0; }
.ben-kpi__label { font-size: .78rem; color: var(--mt-body-color); }
.ben-kpi__valor {
    font-size: 1.45rem;
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.2;
    color: var(--mt-heading-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ben-kpi__sub { font-size: .72rem; color: var(--mt-muted-color); }

/* ── Cuadro de iniciales ─────────────────────────────────────────────────── */
.ben-tile {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--mt-radius);
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .02em;
}
.ben-tile--info    { color: var(--mt-info-hover);    background: var(--mt-info-light); }
.ben-tile--warn    { color: var(--mt-warning-hover); background: var(--mt-warning-light); }
.ben-tile--success { color: var(--mt-success-hover); background: var(--mt-success-light); }
.ben-tile--purple  { color: var(--mt-purple);        background: var(--mt-purple-light); }
.ben-tile--teal    { color: var(--mt-teal);          background: var(--mt-teal-light); }
.ben-tile--neutral { color: var(--mt-body-color);    background: var(--mt-gray-50); }

/* ── Tarjetas ────────────────────────────────────────────────────────────── */
.ben-card {
    background: var(--mt-paper-bg);
    border: 1px solid var(--mt-border-color);
    border-radius: var(--mt-radius-lg);
    box-shadow: var(--mt-shadow-sm);
    padding: 20px 22px;
    margin-bottom: 16px;
    min-width: 0;
}
.ben-card__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}
.ben-card__head--linea {
    padding-bottom: 14px;
    border-bottom: 1px solid var(--mt-border-color);
    margin-bottom: 18px;
}
.ben-card__titulo { font-size: 1.1rem; font-weight: 800; color: var(--mt-heading-color); margin: 0; }
.ben-card__sub { font-size: .8rem; color: var(--mt-body-color); margin: 4px 0 0; }

.ben-vacio {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    padding: 48px 24px;
    color: var(--mt-body-color);
}
.ben-vacio > i { font-size: 1.6rem; color: var(--mt-muted-color); }
.ben-vacio h2 { font-size: 1.05rem; font-weight: 800; color: var(--mt-heading-color); margin: 0; }
.ben-vacio p { max-width: 560px; margin: 0; font-size: .85rem; }
.ben-vacio--mini { padding: 28px 16px; }

/* ── Aviso de borrador de configuración ──────────────────────────────────── */
.ben-borrador {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 18px;
    margin-bottom: 16px;
    background: var(--mt-warning-light);
    border: 1px solid var(--mt-warning);
    border-radius: var(--mt-radius-lg);
}
.ben-borrador__ico { color: var(--mt-warning-hover); margin-top: 3px; }
.ben-borrador__txt { flex: 1; display: flex; flex-direction: column; gap: 2px; font-size: .82rem; color: var(--mt-body-color); min-width: 0; }
.ben-borrador__txt strong { color: var(--mt-heading-color); font-size: .88rem; }
.ben-borrador__lista { margin: 6px 0 0; padding-left: 18px; }
.ben-borrador__acc { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }

/* ── Avisos ──────────────────────────────────────────────────────────────── */
.ben-aviso {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 16px;
    margin-bottom: 16px;
    border-radius: var(--mt-radius);
    border: 1px solid var(--mt-border-color);
    font-size: .8rem;
    color: var(--mt-body-color);
}
.ben-aviso > i { margin-top: 2px; }
.ben-aviso > div { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ben-aviso strong { color: var(--mt-heading-color); font-size: .84rem; }
.ben-aviso--info { background: var(--mt-info-light); border-color: var(--mt-info-subtle); }
.ben-aviso--info > i { color: var(--mt-info-hover); }
.ben-aviso--warn { background: var(--mt-warning-light); border-color: var(--mt-warning-subtle); }
.ben-aviso--warn > i { color: var(--mt-warning-hover); }
.ben-aviso--danger { background: var(--mt-danger-light); border-color: var(--mt-danger-subtle); }
.ben-aviso--danger > i { color: var(--mt-danger); }

/* ── Filtros ─────────────────────────────────────────────────────────────── */
.ben-filtros {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}
.ben-filtro { display: flex; flex-direction: column; gap: 4px; min-width: 170px; }
.ben-filtro--ancho { min-width: 280px; flex: 1 1 280px; }
.ben-filtro--buscar { position: relative; flex: 1 1 240px; max-width: 320px; }
.ben-filtro--buscar > i {
    position: absolute;
    left: 12px;
    bottom: 13px;
    font-size: .8rem;
    color: var(--mt-muted-color);
}
.ben-filtro--buscar .ben-input { padding-left: 34px; }
.ben-contador { margin-left: auto; font-size: .78rem; font-weight: 700; color: var(--mt-body-color); white-space: nowrap; }

/* ── Campos ──────────────────────────────────────────────────────────────── */
.ben-input {
    width: 100%;
    height: var(--mt-input-height);
    padding: 0 12px;
    border: 1px solid var(--mt-input-border);
    border-radius: var(--mt-radius);
    background: var(--mt-paper-bg);
    color: var(--mt-heading-color);
    font: inherit;
    font-size: .86rem;
}
.ben-input:focus { outline: none; border-color: var(--mt-ring); box-shadow: var(--mt-ring-shadow); }
.ben-input:disabled { background: var(--mt-gray-50); color: var(--mt-body-color); }
.ben-input--area { height: auto; padding: 10px 12px; resize: vertical; line-height: 1.45; }
.ben-input--num { width: 110px; }
.ben-input-acc { display: flex; align-items: center; gap: 8px; }

.ben-campo { display: flex; flex-direction: column; gap: 5px; min-width: 0; margin-bottom: 12px; }
.ben-campo__label { font-size: .78rem; font-weight: 700; color: var(--mt-heading-color); }
.ben-campo--full, .ben-campo--ancho { grid-column: 1 / -1; }
.ben-campo--medio { max-width: 420px; }
.ben-hint, .ben-muted { font-size: .75rem; color: var(--mt-muted-color); }
.ben-sub { display: block; font-size: .72rem; color: var(--mt-muted-color); }
.ben-txt-warn { color: var(--mt-warning-hover); }

.ben-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
.ben-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 16px; }
.ben-grid-dg { display: grid; grid-template-columns: 2fr 1fr 1.2fr; gap: 0 16px; }
.ben-grid-dg .ben-campo--ancho { grid-column: span 1; }
.ben-seccion { margin: 18px 0 10px; }
.ben-fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }

/* ── Píldoras ────────────────────────────────────────────────────────────── */
.ben-pills { display: inline-flex; gap: 8px; flex-wrap: wrap; }
.ben-pill {
    height: 34px;
    padding: 0 14px;
    border: 1px solid var(--mt-input-border);
    border-radius: var(--mt-radius-xxl);
    background: var(--mt-paper-bg);
    color: var(--mt-body-color);
    font: inherit;
    font-size: .8rem;
    font-weight: 600;
    cursor: pointer;
}
.ben-pill:hover { border-color: var(--mt-heading-color); }
.ben-pill.is-on { background: var(--mt-primary); border-color: var(--mt-primary); color: var(--mt-paper-bg); }

/* ── Interruptores (P5, P10) ─────────────────────────────────────────────── */
.ben-toggles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.ben-toggles--uno { grid-template-columns: minmax(0, 1fr); margin-top: 16px; }
.ben-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 16px;
    border: 1px solid var(--mt-border-color);
    border-radius: var(--mt-radius);
    background: var(--mt-body-bg);
}
.ben-toggle > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ben-toggle strong { font-size: .84rem; color: var(--mt-heading-color); }
.ben-toggle span { font-size: .74rem; color: var(--mt-muted-color); }
.ben-switch {
    position: relative;
    flex: 0 0 auto;
    width: 44px;
    height: 24px;
    border-radius: 12px;
    border: 0;
    background: var(--mt-input-border);
    cursor: pointer;
    transition: background .15s ease;
}
.ben-switch.is-on { background: var(--mt-success); }
.ben-switch:disabled { cursor: not-allowed; opacity: .6; }
.ben-switch:focus-visible { outline: none; box-shadow: var(--mt-ring-shadow); }
.ben-switch__knob {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--mt-paper-bg);
    box-shadow: var(--mt-shadow-sm);
    transition: transform .15s ease;
}
.ben-switch.is-on .ben-switch__knob { transform: translateX(20px); }

/* ── Tablas ──────────────────────────────────────────────────────────────── */
.ben-tabla-wrap { overflow-x: auto; }
.ben-tabla { width: 100%; border-collapse: collapse; font-size: .82rem; }
.ben-tabla thead th {
    text-align: left;
    padding: 10px 12px;
    background: var(--mt-body-bg);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--mt-label-color);
    white-space: nowrap;
}
.ben-tabla tbody td {
    padding: 12px;
    border-bottom: 1px solid var(--mt-border-color);
    color: var(--mt-body-color);
    vertical-align: middle;
}
.ben-tabla tbody tr:hover { background: var(--mt-body-bg); }
.ben-tabla__acc { text-align: right; white-space: nowrap; }

.ben-nombre { display: flex; align-items: center; gap: 12px; min-width: 220px; }
.ben-nombre > div { display: flex; flex-direction: column; min-width: 0; }
.ben-nombre__t { font-weight: 700; color: var(--mt-heading-color); text-decoration: none; }
a.ben-nombre__t:hover { text-decoration: underline; }
.ben-nombre__c { font-size: .72rem; color: var(--mt-muted-color); }
.ben-etapas { display: block; font-size: .7rem; color: var(--mt-muted-color); margin-top: 3px; }

.ben-link {
    border: 0;
    background: none;
    padding: 0;
    font: inherit;
    font-size: .8rem;
    font-weight: 700;
    color: var(--mt-info-hover);
    cursor: pointer;
    text-decoration: none;
}
.ben-link:hover { text-decoration: underline; }
.ben-link--sec { display: block; margin-top: 4px; margin-left: auto; font-weight: 600; color: var(--mt-body-color); }
.ben-mas { margin-top: 10px; }

.ben-icobtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid transparent;
    border-radius: var(--mt-radius);
    background: none;
    color: var(--mt-body-color);
    cursor: pointer;
}
.ben-icobtn:hover { background: var(--mt-body-bg); border-color: var(--mt-border-color); }
.ben-icobtn:disabled { opacity: .35; cursor: not-allowed; }

.ben-menu { position: relative; display: inline-block; margin-left: 8px; }
.ben-menu__pop {
    position: absolute;
    right: 0;
    top: calc(100% + 4px);
    z-index: 20;
    min-width: 220px;
    display: flex;
    flex-direction: column;
    padding: 6px;
    background: var(--mt-paper-bg);
    border: 1px solid var(--mt-border-color);
    border-radius: var(--mt-radius);
    box-shadow: var(--mt-shadow-lg);
}
.ben-menu__pop > button, .ben-menu__pop > a {
    text-align: left;
    padding: 9px 10px;
    border: 0;
    border-radius: 8px;
    background: none;
    font: inherit;
    font-size: .82rem;
    color: var(--mt-heading-color);
    text-decoration: none;
    cursor: pointer;
}
.ben-menu__pop > button:hover, .ben-menu__pop > a:hover { background: var(--mt-body-bg); }
.ben-menu__pop > button:disabled { color: var(--mt-muted-color); cursor: not-allowed; }
.ben-menu__peligro { color: var(--mt-danger) !important; }

/* ── Selector de empresa (P6) ────────────────────────────────────────────── */
.ben-selector { display: flex; align-items: flex-end; gap: 28px; flex-wrap: wrap; padding: 16px 22px; }
.ben-selector__dato { display: flex; flex-direction: column; gap: 6px; }
.ben-selector__valor { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-height: var(--mt-input-height); color: var(--mt-heading-color); }

/* ── Modal del módulo ────────────────────────────────────────────────────── */
.ben-modal-ov {
    position: fixed;
    inset: 0;
    z-index: 1040;
    background: rgba(var(--mt-primary-rgb), .38);
}
.ben-modal {
    position: fixed;
    z-index: 1041;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% - 32px);
    max-width: 540px;
    max-height: calc(100vh - 48px);
    display: flex;
    flex-direction: column;
    background: var(--mt-paper-bg);
    border-radius: var(--mt-radius-xl);
    box-shadow: var(--mt-shadow-lg);
}
.ben-modal__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 20px 22px 12px; }
.ben-modal__titulo { font-size: 1.05rem; font-weight: 800; color: var(--mt-heading-color); margin: 0; }
.ben-modal__sub { font-size: .8rem; color: var(--mt-body-color); margin: 4px 0 0; }
.ben-modal__body { padding: 4px 22px 8px; overflow-y: auto; }
.ben-modal__texto { font-size: .84rem; color: var(--mt-body-color); }
.ben-modal__lista { margin: 0 0 12px; padding-left: 18px; font-size: .82rem; color: var(--mt-heading-color); }
.ben-modal__pie { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 22px 20px; border-top: 1px solid var(--mt-border-color); }
.ben-btn--peligro { background: var(--mt-danger) !important; border-color: var(--mt-danger) !important; }

/* ── Configuración con navegación lateral (P10-P15) ──────────────────────── */
.ben-cfg { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 16px; align-items: start; }
.ben-cfg__nav {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 18px 14px;
    background: var(--mt-paper-bg);
    border: 1px solid var(--mt-border-color);
    border-radius: var(--mt-radius-lg);
    box-shadow: var(--mt-shadow-sm);
}
.ben-cfg__nav > .ob-label { padding: 0 8px 6px; }
.ben-cfg__item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px 14px;
    border-radius: var(--mt-radius);
    text-decoration: none;
    border-left: 3px solid transparent;
}
.ben-cfg__item strong { font-size: .88rem; color: var(--mt-heading-color); }
.ben-cfg__item span { font-size: .72rem; color: var(--mt-muted-color); }
.ben-cfg__item:hover { background: var(--mt-body-bg); }
.ben-cfg__item.is-on { background: var(--mt-body-bg); border-left-color: var(--mt-primary); }
.ben-cfg__estado {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    margin-top: 18px;
    padding: 14px;
    border: 1px solid var(--mt-border-color);
    border-radius: var(--mt-radius);
    background: var(--mt-body-bg);
    font-size: .8rem;
}
.ben-cfg__panel { margin-bottom: 0; }
.ben-pie { display: flex; justify-content: flex-end; gap: 10px; margin-top: 8px; }

.ben-resumen {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    margin-bottom: 16px;
    border-radius: var(--mt-radius);
    font-size: .8rem;
    color: var(--mt-body-color);
}
.ben-resumen > div { display: flex; flex-direction: column; gap: 2px; }
.ben-resumen strong { color: var(--mt-heading-color); font-size: .88rem; }
.ben-resumen--ok { background: var(--mt-success-light); border: 1px solid var(--mt-success-subtle); }
.ben-resumen--warn { background: var(--mt-warning-light); border: 1px solid var(--mt-warning-subtle); }
.ben-resumen__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 44px;
    border-radius: var(--mt-radius);
    background: var(--mt-paper-bg);
    font-weight: 800;
    color: var(--mt-heading-color);
}
.ben-campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ben-campo-dato {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--mt-border-color);
    border-radius: var(--mt-radius);
}
.ben-campo-dato > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ben-campo-dato strong { font-size: .84rem; color: var(--mt-heading-color); }
.ben-campo-dato span { font-size: .72rem; color: var(--mt-muted-color); }

.ben-version {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    margin-bottom: 10px;
    border: 1px solid var(--mt-border-color);
    border-radius: var(--mt-radius);
    background: var(--mt-body-bg);
}
.ben-version > div { display: flex; flex-direction: column; gap: 3px; }
.ben-version strong { color: var(--mt-heading-color); }
.ben-version > .ben-version__badges { flex-direction: row; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: flex-end; }
.ben-cambios { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: .82rem; color: var(--mt-heading-color); }
.ben-cambios li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--mt-border-color); }

/* ── Asistente (P5) ──────────────────────────────────────────────────────── */
.ben-asist { display: flex; flex-direction: column; gap: 14px; }
.ben-asist__card { padding: 0; }
.ben-asist__card > .ben-card__head { padding: 20px 24px 14px; margin-bottom: 0; }
.ben-asist__cuerpo { display: grid; grid-template-columns: 240px minmax(0, 1fr); }
.ben-asist__panel { padding: 22px 28px; border-left: 1px solid var(--mt-border-color); min-width: 0; }
.ben-asist__t { font-size: 1.25rem; font-weight: 800; color: var(--mt-heading-color); margin: 0; }
.ben-asist__panel > .ben-card__sub { margin-bottom: 18px; }
.ben-asist__pie {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 24px;
    border-top: 1px solid var(--mt-border-color);
}
.ben-asist__pie-der { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.ben-bloque { padding: 16px; margin: 6px 0 16px; border: 1px solid var(--mt-border-color); border-radius: var(--mt-radius); background: var(--mt-body-bg); }
.ben-bloque .ben-toggles { margin-bottom: 0; }
.ben-bloque .ben-toggle { background: var(--mt-paper-bg); }

.ben-pasos { list-style: none; margin: 0; padding: 22px 16px 22px 24px; display: flex; flex-direction: column; }
.ben-paso { position: relative; }
.ben-paso:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 15px;
    top: 40px;
    bottom: -4px;
    width: 2px;
    background: var(--mt-border-color);
}
.ben-paso > button {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 6px 0 22px;
    border: 0;
    background: none;
    text-align: left;
    font: inherit;
    cursor: pointer;
}
.ben-paso__num {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 32px;
    height: 32px;
    border-radius: 50%;
    border: 1.5px solid var(--mt-input-border);
    background: var(--mt-paper-bg);
    font-size: .78rem;
    font-weight: 800;
    color: var(--mt-body-color);
}
.ben-paso__txt { display: flex; flex-direction: column; }
.ben-paso__txt strong { font-size: .84rem; font-weight: 600; color: var(--mt-body-color); }
.ben-paso__txt small { font-size: .7rem; color: var(--mt-muted-color); }
.ben-paso.is-actual .ben-paso__num { background: var(--mt-primary); border-color: var(--mt-primary); color: var(--mt-paper-bg); }
.ben-paso.is-actual .ben-paso__txt strong { font-weight: 800; color: var(--mt-heading-color); }
.ben-paso.is-ok .ben-paso__num { background: var(--mt-success-light); border-color: var(--mt-success); color: var(--mt-success-hover); }
.ben-paso.is-pend .ben-paso__txt small { color: var(--mt-warning-hover); }

.ben-regla { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; margin-bottom: 6px; border: 1px solid var(--mt-border-color); border-radius: var(--mt-radius); background: var(--mt-body-bg); font-size: .82rem; color: var(--mt-heading-color); }
.ben-criterios { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ben-criterio { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border: 1px solid var(--mt-border-color); border-radius: var(--mt-radius); background: var(--mt-paper-bg); min-width: 0; }
.ben-criterio--exclusion { background: var(--mt-warning-light); border-color: var(--mt-warning-subtle); }
.ben-criterio--nuevo { border-style: dashed; background: none; justify-content: center; }
.ben-criterio__cab { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: .84rem; color: var(--mt-heading-color); }
.ben-inline { display: inline-flex; align-items: center; gap: 8px; font-size: .8rem; color: var(--mt-body-color); }
.ben-pills--wrap { display: flex; }
.ben-pills--wrap .ben-pill { height: 30px; font-size: .76rem; }

.ben-ruta { display: flex; align-items: stretch; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.ben-ruta__caja {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    min-width: 190px;
    border: 1px solid var(--mt-border-color);
    border-radius: var(--mt-radius);
    background: var(--mt-paper-bg);
}
.ben-ruta__caja > div:not(.ben-ruta__acc) { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.ben-ruta__caja strong { font-size: .84rem; color: var(--mt-heading-color); }
.ben-ruta__caja span { font-size: .72rem; color: var(--mt-muted-color); }
.ben-ruta__n { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 26px; height: 26px; border-radius: 50%; background: var(--mt-info-light); color: var(--mt-info-hover); font-size: .74rem; font-weight: 800; }
.ben-ruta__acc { display: flex; gap: 2px; }
.ben-ruta__flecha { align-self: center; color: var(--mt-muted-color); }
.ben-ruta__nueva { min-width: 200px; align-self: center; }

.ben-revision { display: flex; flex-direction: column; gap: 8px; }
.ben-revision__fila { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--mt-border-color); border-radius: var(--mt-radius); }
.ben-revision__fila > div { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: .8rem; color: var(--mt-body-color); }
.ben-revision__fila strong { color: var(--mt-heading-color); font-size: .86rem; }

/* ── Responsive: 1366 × 768 y móvil ──────────────────────────────────────── */
@media (max-width: 1400px) {
    .ben-grid-dg { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ben-grid-dg .ben-campo--ancho { grid-column: 1 / -1; }
}
@media (max-width: 1200px) {
    .ben-kpis, .ben-kpis--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ben-cfg { grid-template-columns: minmax(0, 1fr); }
    .ben-cfg__nav { flex-direction: row; flex-wrap: wrap; }
    .ben-cfg__nav > .ob-label, .ben-cfg__estado { display: none; }
    .ben-cfg__item { border-left: 0; border-bottom: 3px solid transparent; }
    .ben-cfg__item.is-on { border-bottom-color: var(--mt-primary); }
}
@media (max-width: 900px) {
    .ben-asist__cuerpo { grid-template-columns: minmax(0, 1fr); }
    .ben-pasos { flex-direction: row; overflow-x: auto; padding: 14px 16px; gap: 6px; border-bottom: 1px solid var(--mt-border-color); }
    .ben-paso:not(:last-child)::after { display: none; }
    .ben-paso > button { padding: 4px 8px 4px 0; white-space: nowrap; }
    .ben-paso__txt small { display: none; }
    .ben-asist__panel { border-left: 0; padding: 18px 16px; }
    .ben-toggles, .ben-grid2, .ben-grid3, .ben-grid-dg, .ben-criterios, .ben-campos { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
    /* Dos por fila y sin el cuadro de iniciales: apilados de a uno, los cuatro KPI llenaban la
       primera pantalla y las tarjetas —lo que el trabajador vino a ver— quedaban debajo. */
    .ben-kpis, .ben-kpis--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .ben-kpi { padding: 12px 14px; }
    .ben-kpi > .ben-tile { display: none; }
    .ben-card { padding: 16px; }
    .ben-borrador { flex-direction: column; }
    .ben-filtro, .ben-filtro--buscar { min-width: 0; max-width: none; flex: 1 1 100%; }
    .ben-contador { margin-left: 0; }
    .ben-asist__pie { flex-direction: column-reverse; align-items: stretch; }
    .ben-asist__pie-der { justify-content: stretch; }
}

/* ── Correcciones del primer recorrido visual (28-set-2026) ─────────────── */
/* Los botones-enlace heredaban el subrayado de <a>. */
.ben a.ob-btn, .ben-asist a.ob-btn { text-decoration: none; }

/* El asistente no va dentro de SubmoduloHub: necesita su propio margen y sus migas
   (las de .hub__crumbs son CSS aislado del hub y aquí no llegan). */
.ben-asist { padding: 16px 20px 48px; max-width: 1600px; margin: 0 auto; width: 100%; }
.ben-crumbs { display: flex; align-items: center; gap: 8px; font-size: .78rem; color: var(--mt-muted-color); }
.ben-crumbs a { color: var(--mt-body-color); text-decoration: none; }
.ben-crumbs a:hover { text-decoration: underline; }
.ben-crumbs i { font-size: .6rem; }
.ben-crumbs [aria-current] { color: var(--mt-heading-color); font-weight: 600; }
.ben-pie { align-items: center; }
/* Cierra el menú ⋮ al hacer clic fuera (revisión de diseño, 28-set-2026). */
.ben-menu__velo { position: fixed; inset: 0; z-index: 19; }
.ben-modal:focus { outline: none; }
/* Fase 2: pie de formulario con motivo, y la versión de P11 separada del editor. */
.ben-pie--form { flex-wrap: wrap; }
.ben-pie--form .ben-input { flex: 1 1 320px; max-width: 520px; }
.ben-cfg__panel .ben-version { margin-top: 16px; }
.ben-cfg__panel > .ben-pills { margin: 4px 0 12px; }

/* ══ Portal del trabajador (P1-P3, fase 2) ══════════════════════════════════ */
.ben-portal { display: flex; flex-direction: column; gap: 16px; padding: 16px 20px 48px; max-width: 1600px; margin: 0 auto; width: 100%; }
.ben-portal .ben-kpis { margin-bottom: 0; }
.ben-portal .ob-pagehead a.ob-btn { text-decoration: none; }
.ben-portal__card { padding-top: 6px; }

.ben-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--mt-border-color); margin: 0 -22px 18px; padding: 0 22px; overflow-x: auto; }
.ben-tab {
    padding: 12px 14px;
    background: none;
    border: 0;
    border-bottom: 2px solid transparent;
    font-family: inherit;
    cursor: pointer;
    font-size: .88rem;
    font-weight: 600;
    color: var(--mt-body-color);
    text-decoration: none;
    white-space: nowrap;
}
.ben-tab:hover { color: var(--mt-heading-color); }
.ben-tab:focus-visible { outline: none; box-shadow: var(--mt-ring-shadow); border-radius: var(--mt-radius) var(--mt-radius) 0 0; }
.ben-tab.is-on { color: var(--mt-heading-color); border-bottom-color: var(--mt-primary); font-weight: 800; }

.ben-tarjetas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.ben-tarjeta {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 230px;
    padding: 18px;
    border: 1px solid var(--mt-border-color);
    border-radius: var(--mt-radius-lg);
    background: var(--mt-paper-bg);
    box-shadow: var(--mt-shadow-sm);
}
.ben-tarjeta__cab { display: flex; align-items: flex-start; gap: 14px; }
.ben-tarjeta__cab > div { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; }
.ben-tarjeta__cab h3 { font-size: 1rem; font-weight: 800; color: var(--mt-heading-color); margin: 0; }
.ben-tarjeta__desc { flex: 1; margin: 0; font-size: .82rem; line-height: 1.5; color: var(--mt-body-color); }
.ben-tarjeta__pie { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 12px; border-top: 1px solid var(--mt-border-color); font-size: .82rem; color: var(--mt-heading-color); }
.ben-tarjeta__accion {
    border: 0;
    background: none;
    padding: 6px 0;
    font: inherit;
    font-size: .82rem;
    font-weight: 800;
    color: var(--mt-heading-color);
    cursor: pointer;
    white-space: nowrap;
}
.ben-tarjeta__accion:hover { text-decoration: underline; }
.ben-tarjeta__accion:focus-visible { outline: none; box-shadow: var(--mt-ring-shadow); border-radius: 6px; }

.ben-explorar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ben-explorar__item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--mt-border-color);
    border-radius: var(--mt-radius);
    background: var(--mt-paper-bg);
    text-align: left;
    font: inherit;
    cursor: pointer;
}
.ben-explorar__item:hover { background: var(--mt-body-bg); }
.ben-explorar__item > span:nth-child(2) { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ben-explorar__item strong { font-size: .88rem; color: var(--mt-heading-color); }
.ben-explorar__item small { font-size: .74rem; color: var(--mt-muted-color); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.ben-mono { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: .78rem; }
.ben-tabla--clic tbody tr { cursor: pointer; }
.ben-tabla--clic tbody tr:focus-visible { outline: none; box-shadow: inset var(--mt-ring-shadow); }

/* Panel lateral (P2) */
.ben-drawer-ov { position: fixed; inset: 0; z-index: 1030; background: rgba(var(--mt-primary-rgb), .32); }
.ben-drawer:focus { outline: none; }
.ben-drawer {
    position: fixed;
    z-index: 1031;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(560px, 100%);
    display: flex;
    flex-direction: column;
    background: var(--mt-paper-bg);
    box-shadow: var(--mt-shadow-lg);
}
.ben-drawer__cab { display: flex; align-items: flex-start; gap: 14px; padding: 24px 24px 16px; border-bottom: 1px solid var(--mt-border-color); }
.ben-drawer__cab > div { flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; }
.ben-drawer__cab h2 { font-size: 1.3rem; font-weight: 800; color: var(--mt-heading-color); margin: 0; }
.ben-drawer__cuerpo { flex: 1; overflow-y: auto; padding: 18px 24px; display: flex; flex-direction: column; gap: 8px; }
.ben-drawer__cuerpo > .ob-label { margin-top: 12px; }
.ben-drawer__texto { margin: 0; font-size: .86rem; line-height: 1.5; color: var(--mt-body-color); }
.ben-drawer__pie { display: flex; gap: 10px; justify-content: flex-end; padding: 16px 24px 24px; border-top: 1px solid var(--mt-border-color); }
.ben-btn--ancho { flex: 1; justify-content: center; text-decoration: none; }

.ben-dl { display: grid; grid-template-columns: auto 1fr; gap: 10px 16px; margin: 0; font-size: .84rem; }
.ben-dl dt { color: var(--mt-body-color); font-weight: 400; }
.ben-dl dd { margin: 0; text-align: right; color: var(--mt-heading-color); font-weight: 700; }
.ben-puntos { margin: 0; padding-left: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; font-size: .84rem; color: var(--mt-heading-color); }
.ben-puntos li { position: relative; padding-left: 18px; }
.ben-puntos li::before { content: ""; position: absolute; left: 2px; top: .5em; width: 7px; height: 7px; border-radius: 50%; background: var(--mt-success); }
.ben-puntos--doc li::before { background: var(--mt-info); }
.ben-doc { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; align-items: center; padding: 12px 14px; border: 1px solid var(--mt-border-color); border-radius: var(--mt-radius); background: var(--mt-body-bg); font-size: .84rem; }
.ben-doc strong { color: var(--mt-heading-color); }
.ben-doc span { grid-column: 1; font-size: .74rem; color: var(--mt-muted-color); }
.ben-doc .ben-link { grid-row: 1 / span 2; grid-column: 2; }
.ben-hist { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--mt-border-color); border-radius: var(--mt-radius); background: none; font: inherit; font-size: .82rem; color: var(--mt-heading-color); cursor: pointer; text-align: left; }
.ben-hist:hover { background: var(--mt-body-bg); }
.ben-hist > span:nth-child(2) { flex: 1; color: var(--mt-body-color); }

.ben-timeline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ben-timeline li { display: flex; align-items: flex-start; gap: 12px; font-size: .8rem; }
.ben-timeline li > div { display: flex; flex-direction: column; gap: 2px; color: var(--mt-body-color); }
.ben-timeline strong { color: var(--mt-heading-color); font-weight: 600; }

/* Subir documento: el input nativo ocupa todo el botón y es invisible (patrón de ContratosHub). */
.ben-subir { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; padding: 14px; border: 1.5px dashed var(--mt-input-border); border-radius: var(--mt-radius); font-size: .82rem; font-weight: 600; color: var(--mt-body-color); cursor: pointer; }
.ben-subir:hover { border-color: var(--mt-heading-color); color: var(--mt-heading-color); }
.ben-subir input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }

@media (max-width: 1200px) {
    .ben-tarjetas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
    .ben-portal { padding: 12px 12px 40px; }
    .ben-tarjetas, .ben-explorar { grid-template-columns: minmax(0, 1fr); }
    .ben-tabs { margin: 0 -16px 14px; padding: 0 16px; }
    .ben-tarjeta { min-height: 0; }
}


/* ── Fase 3: aprobaciones (P7, P12, «Por aprobar») ───────────────────────── */
.ben-drawer--ancho { width: min(680px, 100%); }
.ben-fila-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.ben-texto--danger { color: var(--mt-danger); }
.ben-texto--warn { color: var(--mt-warning-hover); }

/* Etapas de una solicitud: una lista vertical con número, rol y estado. */
.ben-etapas { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ben-etapa {
    display: flex;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid var(--mt-border-color);
    border-radius: var(--mt-radius);
    background: var(--mt-paper-bg);
}
.ben-etapa > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ben-etapa > div > strong { color: var(--mt-heading-color); }
.ben-etapa__num {
    flex: none;
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-size: .78rem;
    font-weight: 800;
    color: var(--mt-body-color);
    background: var(--mt-gray-50);
}
.ben-etapa--success .ben-etapa__num { color: var(--mt-success-hover); background: var(--mt-success-light); }
.ben-etapa--info { border-color: var(--mt-info); }
.ben-etapa--info .ben-etapa__num { color: var(--mt-info-hover); background: var(--mt-info-light); }
.ben-etapa--danger .ben-etapa__num { color: var(--mt-danger-hover); background: var(--mt-danger-light); }
.ben-etapa .ob-badge { align-self: flex-start; }

.ben-ajuste { margin: 4px 0 12px; padding: 10px 12px; border: 1px solid var(--mt-border-color); border-radius: var(--mt-radius); }
.ben-ajuste > summary { cursor: pointer; font-weight: 700; color: var(--mt-heading-color); }
.ben-ajuste[open] > summary { margin-bottom: 10px; }
.ben-check { display: flex; align-items: flex-start; gap: 8px; font-size: .85rem; color: var(--mt-body-color); margin: 4px 0 8px; cursor: pointer; }
.ben-check input { margin-top: 3px; accent-color: var(--mt-success); }

/* Bandeja: la barra del flujo «Finanzas · 2/3». */
.ben-flujo { display: flex; flex-direction: column; gap: 4px; min-width: 120px; }
.ben-flujo > span:first-child { font-size: .82rem; }
.ben-flujo__barra { display: block; height: 4px; border-radius: 4px; background: var(--mt-gray-100); overflow: hidden; }
.ben-flujo__barra > span { display: block; height: 100%; background: var(--mt-success); border-radius: 4px; }
.ben-tabla td .ob-badge + .ob-badge { margin-left: 4px; }

.ben-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 12px;
    border-radius: var(--mt-radius-xxl);
    border: 1px solid var(--mt-input-border);
    background: var(--mt-paper-bg);
    font: inherit;
    font-size: .82rem;
    font-weight: 700;
    color: var(--mt-body-color);
    cursor: pointer;
}
.ben-chip--warn { color: var(--mt-warning-hover); border-color: var(--mt-warning); background: var(--mt-warning-light); }
.ben-chip.is-on { box-shadow: var(--mt-ring-shadow); }
.ben-tab__num {
    display: inline-grid;
    place-items: center;
    min-width: 20px;
    height: 20px;
    margin-left: 6px;
    padding: 0 6px;
    border-radius: 10px;
    font-size: .72rem;
    font-weight: 800;
    color: var(--mt-paper-bg);
    background: var(--mt-success);
}

/* P12: las cajas de la ruta, en horizontal con flechas. */
.ben-cajas { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-wrap: wrap; align-items: stretch; gap: 8px; }
.ben-caja {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 210px;
    padding: 12px;
    border: 1px solid var(--mt-border-color);
    border-radius: var(--mt-radius-lg);
    background: var(--mt-paper-bg);
    box-shadow: var(--mt-shadow-sm);
}
.ben-caja--nueva { justify-content: center; border-style: dashed; box-shadow: none; }
.ben-caja__cab { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.ben-caja__num {
    width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%;
    font-size: .75rem; font-weight: 800; color: var(--mt-paper-bg); background: var(--mt-primary);
}
.ben-caja__acc { display: flex; gap: 2px; }
.ben-caja__sub { font-size: .75rem; color: var(--mt-muted-color); }
.ben-caja__sla { display: flex; align-items: center; gap: 6px; font-size: .8rem; color: var(--mt-body-color); margin-top: auto; }
.ben-caja__sla .ben-input--num { width: 72px; }
.ben-cajas__flecha { display: flex; align-items: center; color: var(--mt-muted-color); }
.ben-icobtn--sm { width: 26px; height: 26px; font-size: .75rem; }

.ben-flujos { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; margin: 16px 0; }
.ben-flujo-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 14px;
    text-align: left;
    font: inherit;
    border: 1px solid var(--mt-border-color);
    border-radius: var(--mt-radius-lg);
    background: var(--mt-paper-bg);
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.ben-flujo-card > strong { color: var(--mt-heading-color); }
.ben-flujo-card > span { font-size: .8rem; color: var(--mt-body-color); }
.ben-flujo-card:hover { border-color: var(--mt-input-border); box-shadow: var(--mt-shadow-sm); }
.ben-flujo-card.is-on { border-color: var(--mt-primary); box-shadow: var(--mt-shadow-sm); }
.ben-flujo-card--nuevo { align-items: center; justify-content: center; flex-direction: row; border-style: dashed; font-weight: 700; color: var(--mt-heading-color); }
.ben-subcard { padding: 16px; margin-bottom: 20px; border: 1px solid var(--mt-border-color); border-radius: var(--mt-radius-lg); background: var(--mt-body-bg); }
.ben-subcard .ben-caja { background: var(--mt-paper-bg); }

.ben-escala { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 12px; }
.ben-escala__caja {
    flex: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 12px 14px;
    border: 1px solid var(--mt-warning);
    border-radius: var(--mt-radius-lg);
    background: var(--mt-warning-light);
    color: var(--mt-warning-hover);
    font-size: .8rem;
}
.ben-escala__reglas { flex: 1; min-width: 0; }
.ben-tramo { padding: 12px; margin-bottom: 10px; border: 1px solid var(--mt-border-color); border-radius: var(--mt-radius-lg); background: var(--mt-paper-bg); }
.ben-tramo__cab { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; }
.ben-campo--inline { flex-direction: row; align-items: center; gap: 8px; margin: 0; }
.ben-campo--inline .ben-input--num { width: 130px; }
.ben-probar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin-bottom: 12px; }
.ben-probar > .ben-campo { min-width: 200px; margin: 0; }
.ben-probar > .ben-check { margin-bottom: 10px; }

@media (max-width: 700px) {
    .ben-caja { width: 100%; }
    .ben-cajas__flecha { width: 100%; justify-content: center; transform: rotate(90deg); }
    .ben-escala { flex-direction: column; }
}

.ben-tabla td.ben-mono { white-space: nowrap; }
.ben-tabla td > .ben-nombre__c { display: block; }

/* ── Fase 4: presupuesto (P8, P9, P13) y campañas ───────────────────────── */
.ben-filtros--cab { align-items: flex-end; margin-bottom: 16px; }
.ben-filtros--cab > .ob-btn { margin-left: auto; }
.ben-pres { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 16px; margin-bottom: 16px; }
.ben-pres > .ben-card { margin: 0; }

.ben-barras { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 6px; height: 200px; align-items: end; padding: 8px 0 0; }
.ben-barras__mes { display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; }
.ben-barras__grupo { flex: 1; width: 100%; display: flex; align-items: flex-end; justify-content: center; gap: 2px; }
.ben-barras__b { display: block; width: 28%; min-height: 1px; border-radius: 3px 3px 0 0; }
.ben-barras__b--plan { background: var(--mt-gray-200); }
.ben-barras__b--comp { background: var(--mt-info); }
.ben-barras__b--ejec { background: var(--mt-success); }
.ben-barras__lbl { font-size: .72rem; color: var(--mt-muted-color); text-transform: capitalize; }
.ben-leyenda { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 10px; font-size: .78rem; color: var(--mt-body-color); }
.ben-leyenda__c { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 4px; vertical-align: -1px; }
.ben-nota { margin: 10px 0 0; font-size: .82rem; }
.ben-nota--warn { color: var(--mt-warning-hover); }

.ben-distrib { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ben-distrib li > div { display: flex; justify-content: space-between; gap: 8px; font-size: .85rem; }
.ben-distrib li > div span { color: var(--mt-body-color); }
.ben-distrib__barra { display: block; height: 6px; margin-top: 4px; border-radius: 4px; background: var(--mt-gray-100); overflow: hidden; }
.ben-distrib__barra > span { display: block; height: 100%; background: var(--mt-info); border-radius: 4px; }
.ben-inversion { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: var(--mt-radius); background: var(--mt-body-bg); }
.ben-inversion strong { font-size: 1.3rem; color: var(--mt-heading-color); }

.ben-proy { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.ben-proy__barra { flex: 1; display: block; height: 10px; border-radius: 6px; background: var(--mt-gray-100); overflow: hidden; }
.ben-proy__barra > span { display: block; height: 100%; border-radius: 6px; background: var(--mt-success); }
.ben-proy__barra--warn > span { background: var(--mt-warning); }
.ben-proy > strong { flex: none; min-width: 64px; text-align: right; color: var(--mt-heading-color); }

.ben-eval__pag { max-width: 1400px; }
.ben-eval__cab { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.ben-eval__cab .ob-btn { text-decoration: none; }
.ben-eval__datos { display: flex; flex-wrap: wrap; gap: 12px 28px; margin: 0 0 16px; padding: 14px 18px; border: 1px solid var(--mt-border-color); border-radius: var(--mt-radius-lg); background: var(--mt-paper-bg); }
.ben-eval__datos dt { font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--mt-label-color); }
.ben-eval__datos dd { margin: 2px 0 0; font-weight: 700; color: var(--mt-heading-color); }
.ben-eval { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(300px, 1fr); gap: 16px; align-items: start; }
.ben-eval__izq { display: flex; flex-direction: column; gap: 16px; }
.ben-eval__izq > .ben-card, .ben-eval__der { margin: 0; }
.ben-eval__acc { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 8px; }
.ben-alternativas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.ben-alt {
    display: flex; flex-direction: column; gap: 4px; padding: 14px; text-align: left; font: inherit; font-size: .84rem;
    color: var(--mt-body-color); background: var(--mt-paper-bg); border: 1px solid var(--mt-border-color);
    border-radius: var(--mt-radius-lg); cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease;
}
.ben-alt > strong { color: var(--mt-heading-color); font-size: .95rem; }
.ben-alt:hover:not(:disabled) { border-color: var(--mt-input-border); }
.ben-alt.is-on { border-color: var(--mt-success); box-shadow: 0 0 0 1px var(--mt-success); }
.ben-alt--dir { border-left-width: 1px; }
.ben-alt--dir .ben-alt__nota { color: var(--mt-warning-hover); }
.ben-alt:disabled { opacity: .55; cursor: not-allowed; }
.ben-alt__nota { color: var(--mt-muted-color); font-size: .78rem; }
.ben-alt:focus-visible { outline: none; box-shadow: var(--mt-ring-shadow); }

.ben-caja-meses { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
.ben-caja-meses .ben-campo__label { text-transform: capitalize; }
.ben-input--motivo { flex: 1; max-width: 420px; }
.ben-total { display: flex; align-items: center; height: var(--mt-input-height); font-size: 1.05rem; color: var(--mt-heading-color); }

@media (max-width: 1100px) {
    .ben-pres, .ben-eval { grid-template-columns: minmax(0, 1fr); }
    .ben-caja-meses { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
    .ben-alternativas { grid-template-columns: minmax(0, 1fr); }
    .ben-caja-meses { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ben-barras { gap: 2px; height: 160px; }
    .ben-eval__cab { flex-direction: column; }
}
.ben-eval__izq .ben-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* ── Fase 5: integraciones (P14), pagos y gobierno (P15) ───────────────────────────────────── */
.ben-alternativas--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.ben-int { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 16px; align-items: start; }
.ben-int__lista { display: flex; flex-direction: column; gap: 6px; }
.ben-int__item {
    display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 12px 14px; text-align: left; font: inherit;
    font-size: .82rem; color: var(--mt-body-color); background: var(--mt-paper-bg); border: 1px solid var(--mt-border-color);
    border-radius: var(--mt-radius); cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease;
}
.ben-int__item > strong { color: var(--mt-heading-color); }
.ben-int__item:hover { border-color: var(--mt-input-border); }
.ben-int__item.is-on { border-color: var(--mt-success); box-shadow: 0 0 0 1px var(--mt-success); }
.ben-int__item:focus-visible { outline: none; box-shadow: var(--mt-ring-shadow); }
.ben-int__editor { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.ben-int__cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.ben-int__cab > div { display: flex; flex-direction: column; gap: 3px; }
.ben-int__cab strong { color: var(--mt-heading-color); font-size: 1rem; }
.ben-int__tarjetas { align-items: stretch; }
.ben-int__tarjeta {
    display: flex; flex-direction: column; gap: 10px; padding: 16px; background: var(--mt-paper-bg);
    border: 1px solid var(--mt-border-color); border-radius: var(--mt-radius-lg);
}
.ben-int__tarjeta-cab { display: flex; align-items: center; gap: 10px; }
.ben-int__tarjeta-cab strong { color: var(--mt-heading-color); }
.ben-int__regla {
    display: flex; flex-direction: column; gap: 4px; padding: 14px; border: 1px solid var(--mt-border-color);
    border-radius: var(--mt-radius); background: var(--mt-body-bg);
}
.ben-int__regla strong { color: var(--mt-heading-color); font-size: 1.1rem; }

.ben-sim {
    display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 16px;
    background: var(--mt-success-light); border: 1px solid var(--mt-success-subtle); border-radius: var(--mt-radius-lg);
    font-size: .84rem; color: var(--mt-body-color);
}
.ben-sim > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ben-sim strong { color: var(--mt-heading-color); }

.ben-version--borrador { margin-top: 10px; }
.ben-gob { margin-top: 16px; align-items: stretch; }
.ben-gob__caja {
    display: flex; flex-direction: column; gap: 10px; padding: 16px; background: var(--mt-paper-bg);
    border: 1px solid var(--mt-border-color); border-radius: var(--mt-radius-lg);
}
.ben-gob__caja--warn { background: var(--mt-warning-light); border-color: var(--mt-warning-subtle); }
.ben-gob__doc { display: flex; align-items: center; gap: 12px; }
.ben-gob__doc > i { font-size: 1.3rem; color: var(--mt-muted-color); }
.ben-gob__doc > div { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ben-gob__doc strong { color: var(--mt-heading-color); overflow-wrap: anywhere; }
.ben-gob__acc { display: flex; flex-wrap: wrap; gap: 8px; }
.ben-gob__prog { justify-content: flex-end; }

.ben-instr { list-style: none; margin: 0 0 6px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ben-instr li {
    display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 12px;
    border: 1px solid var(--mt-border-color); border-radius: var(--mt-radius); font-size: .82rem;
}
.ben-instr li > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ben-instr strong { color: var(--mt-heading-color); }

@media (max-width: 1100px) {
    .ben-int { grid-template-columns: minmax(0, 1fr); }
    .ben-int__lista { flex-direction: row; flex-wrap: wrap; }
    .ben-alternativas--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
    .ben-alternativas--4 { grid-template-columns: minmax(0, 1fr); }
    .ben-sim { flex-direction: column; align-items: stretch; }
}

/* ── Fase 5d: bienvenida (resumen inicial de beneficios) ── */
.ben-bienvenida { margin-bottom: 16px; }
.ben-bienvenida__grupos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 10px; }
.ben-bienvenida__grupo { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border: 1px solid var(--mt-border-color); border-radius: var(--mt-radius); }
.ben-bienvenida__grupo ul { margin: 0; padding-left: 18px; font-size: .82rem; color: var(--mt-body-color); display: flex; flex-direction: column; gap: 2px; }
.ben-bienvenida__grupo .ob-badge { align-self: flex-start; }
.ben-transf { display: flex; flex-direction: column; gap: 8px; }
.ben-transf__fila { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 12px; align-items: center; padding: 10px 12px; border: 1px solid var(--mt-border-color); border-radius: var(--mt-radius); font-size: .82rem; }
.ben-transf__fila strong { color: var(--mt-heading-color); }
@media (max-width: 900px) { .ben-bienvenida__grupos { grid-template-columns: minmax(0, 1fr); } .ben-transf__fila { grid-template-columns: minmax(0, 1fr); } }

/* ── Fase 5e: indicadores ── */
.ben-indic { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.ben-indic > .ben-card { margin-bottom: 0; }
.ben-adop { display: flex; flex-direction: column; gap: 4px; }
.ben-adop__barra { display: block; height: 6px; border-radius: var(--mt-radius-xxl); background: var(--mt-gray-200); overflow: hidden; }
.ben-adop__barra > span { display: block; height: 100%; background: var(--mt-success); border-radius: inherit; }
.ben-adop__txt { font-size: .76rem; color: var(--mt-body-color); }
.ben-venc { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; }
.ben-venc li { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 12px; padding: 10px 0; border-top: 1px solid var(--mt-border-color); font-size: .82rem; }
.ben-venc li:first-child { border-top: 0; }
.ben-venc li div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ben-venc a { color: var(--mt-heading-color); text-decoration: none; }
.ben-venc a:hover { text-decoration: underline; }
.ben-venc__fecha { font-weight: 700; color: var(--mt-heading-color); }
.ben-venc__fecha.is-vencido { color: var(--mt-danger); }
@media (max-width: 1100px) { .ben-indic { grid-template-columns: minmax(0, 1fr); } }
.ben-tabla .ben-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ben-tabla td > .ben-muted { display: block; }
.ben-indic__nombre { display: block; color: var(--mt-heading-color); }

/* ── B4: condiciones que acepta el trabajador ── */
.ben-condiciones { margin-top: 12px; padding: 12px 14px; border: 1px solid var(--mt-border-color); border-radius: var(--mt-radius); background: var(--mt-body-bg); }
.ben-condiciones__texto { margin: 0 0 10px; font-size: .84rem; color: var(--mt-body-color); white-space: pre-line; }

/* ── A5 · Transferencias en aprobación ───────────────────────────────────────────── */
.ben-transf__lista { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ben-transf__lista li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: .82rem; padding-bottom: 8px; border-bottom: 1px solid var(--mt-border-color); }
.ben-transf__lista li .ben-muted { flex-basis: 100%; }
.ben-transf__totales { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0 0 12px; }
.ben-transf__totales div { padding: 8px 10px; border-radius: var(--mt-radius); background: var(--mt-body-bg); }
.ben-transf__totales dt { font-size: .72rem; color: var(--mt-muted-color); }
.ben-transf__totales dd { margin: 2px 0 0; font-weight: 700; color: var(--mt-heading-color); }
@media (max-width: 700px) { .ben-transf__totales { grid-template-columns: minmax(0, 1fr); } }