/* ════════════════════════════════════════════════════════════════════
   Reembolsos y Rendiciones (REE v1) — bandeja «Mis gastos».
   Cero colores en duro: todo sale de los tokens --mt-* del lenguaje Orbis.
   ════════════════════════════════════════════════════════════════════ */

.rmb-page {
    max-width: 1100px;
    margin: 0 auto;
    padding: 1.25rem 1.25rem 3rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.rmb-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.rmb-head__title {
    margin: .15rem 0 .2rem;
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--mt-heading-color);
}

.rmb-head__sub {
    margin: 0;
    color: var(--mt-body-color);
    font-size: .88rem;
    max-width: 60ch;
}

/* ── Resumen ─────────────────────────────────────────────────────── */

.rmb-resumen {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: .75rem;
}

.rmb-resumen__item {
    background: var(--mt-paper-bg);
    border: 1px solid var(--mt-border-color);
    border-radius: var(--mt-radius-lg);
    padding: .85rem 1rem;
    display: flex;
    flex-direction: column;
    gap: .15rem;
}

.rmb-resumen__n {
    font-family: var(--mt-font-mono, monospace);
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--mt-heading-color);
}

.rmb-resumen__l {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--mt-muted-color);
}

/* ── Filtros ─────────────────────────────────────────────────────── */

.rmb-chips { display: flex; gap: .4rem; flex-wrap: wrap; }

.rmb-chip {
    border: 1px solid var(--mt-input-border);
    background: var(--mt-paper-bg);
    color: var(--mt-body-color);
    border-radius: var(--mt-radius-xxl);
    padding: .35rem .85rem;
    font-size: .8rem;
    cursor: pointer;
    transition: background .12s ease, color .12s ease, border-color .12s ease;
}

/* `:not(.is-on)` o el hover se come el estado activo, que es más importante. */
.rmb-chip:hover:not(.is-on) { border-color: var(--mt-primary); }

.rmb-chip.is-on {
    background: var(--mt-primary);
    border-color: var(--mt-primary);
    color: var(--mt-paper-bg);
    font-weight: 600;
}

/* ── Lista ───────────────────────────────────────────────────────── */

.rmb-lista { display: flex; flex-direction: column; gap: .6rem; }

.rmb-card {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    background: var(--mt-paper-bg);
    border: 1px solid var(--mt-border-color);
    border-radius: var(--mt-radius-lg);
    padding: .9rem 1.1rem;
    cursor: pointer;
    transition: box-shadow .12s ease, border-color .12s ease;
}

.rmb-card:hover {
    border-color: var(--mt-input-border);
    box-shadow: var(--mt-shadow-sm);
}

/* La tarjeta que NO se abre al pulsarla: sus acciones son botones propios. Sin esto el cursor
   promete un enlace que no existe. */
.rmb-card--estatica { cursor: default; }
.rmb-card--estatica:hover { border-color: var(--mt-border-color); box-shadow: none; }
.rmb-card--estatica .rmb-card__main { flex: 1 1 auto; }

.rmb-card__main { min-width: 0; display: flex; flex-direction: column; gap: .3rem; }

.rmb-card__top { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; }

.rmb-card__cod {
    font-family: var(--mt-font-mono, monospace);
    font-size: .76rem;
    color: var(--mt-muted-color);
}

.rmb-card__motivo {
    margin: 0;
    font-size: .98rem;
    font-weight: 600;
    color: var(--mt-heading-color);
}

.rmb-card__meta { margin: 0; font-size: .8rem; color: var(--mt-muted-color); }

.rmb-card__obs {
    margin: .2rem 0 0;
    font-size: .82rem;
    color: var(--mt-body-color);
    border-left: 2px solid var(--mt-warning, var(--mt-border-color));
    padding-left: .5rem;
}

.rmb-card__monto {
    font-family: var(--mt-font-mono, monospace);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--mt-heading-color);
    white-space: nowrap;
}

/* ── Vacío y carga ───────────────────────────────────────────────── */

.rmb-vacio {
    background: var(--mt-paper-bg);
    border: 1px solid var(--mt-border-color);
    border-radius: var(--mt-radius-lg);
    padding: 2.5rem 1.5rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
}

.rmb-vacio__t { margin: 0; font-size: 1.1rem; color: var(--mt-heading-color); }

.rmb-vacio__p { margin: 0; color: var(--mt-muted-color); font-size: .88rem; max-width: 52ch; }

.rmb-skeleton { display: flex; flex-direction: column; gap: .6rem; }

.rmb-skeleton__row {
    height: 72px;
    border-radius: var(--mt-radius-lg);
    background: linear-gradient(90deg,
        var(--mt-border-color) 25%,
        var(--mt-body-bg) 50%,
        var(--mt-border-color) 75%);
    background-size: 200% 100%;
    animation: rmb-shimmer 1.3s infinite;
}

@keyframes rmb-shimmer {
    from { background-position: 200% 0; }
    to   { background-position: -200% 0; }
}

/* ── Botones ─────────────────────────────────────────────────────── */

.rmb-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    height: var(--mt-input-height, 40px);
    padding: 0 1rem;
    border-radius: var(--mt-radius);
    border: 1px solid var(--mt-input-border);
    background: var(--mt-paper-bg);
    color: var(--mt-body-color);
    font-size: .87rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: background .12s ease, border-color .12s ease;
}

.rmb-btn:hover:not(:disabled) { border-color: var(--mt-primary); }

.rmb-btn:disabled { opacity: .55; cursor: not-allowed; }

.rmb-btn--primary {
    background: var(--mt-primary);
    border-color: var(--mt-primary);
    color: var(--mt-paper-bg);
}

.rmb-btn--primary:hover:not(:disabled) { opacity: .9; }

.rmb-btn--ghost { border-color: transparent; background: transparent; }

/* La lectura automática lleva la identidad de IA del ERP: el gradiente de marca, el mismo que
   AMY. Va en la hoja global porque lo usan la ficha, el asistente y la captura móvil, y el CSS
   aislado de una página no llega a las otras. */
.rmb-btn--ia {
    background: var(--mt-gradient-brand);
    border-color: transparent;
    color: #fff;
}

.rmb-btn--ia:hover:not(:disabled) { opacity: .92; }
.rmb-btn--ia:disabled { opacity: .6; }

/* Lo que hay que mirar de lo que leyó la IA. */
.rmb-avisos-ia {
    margin: .5rem 0 0;
    padding-left: 1.1rem;
    display: flex;
    flex-direction: column;
    gap: .25rem;
    font-size: .75rem;
    line-height: 1.45;
}

.rmb-btn--peligro { color: var(--mt-danger, #DC2626); }
.rmb-btn--peligro:hover:not(:disabled) { border-color: var(--mt-danger, #DC2626); }

/* ════════════════════════════════════════════════════════════════════
   Ficha del expediente
   ════════════════════════════════════════════════════════════════════ */

.rmb-page--angosta { max-width: 760px; }

.rmb-volver { font-size: .8rem; color: var(--mt-muted-color); text-decoration: none; }
.rmb-volver:hover { color: var(--mt-heading-color); }

.rmb-ficha__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.rmb-ficha__cod {
    margin: .2rem 0 .1rem;
    font-family: var(--mt-font-mono, monospace);
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--mt-heading-color);
}

.rmb-ficha__motivo { margin: 0; color: var(--mt-body-color); font-size: .95rem; }

.rmb-ficha__total { text-align: right; display: flex; flex-direction: column; }

.rmb-ficha__total-n {
    font-family: var(--mt-font-mono, monospace);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--mt-heading-color);
}

.rmb-ficha__total-l { font-size: .74rem; color: var(--mt-muted-color); }

/* Los tres estados, uno al lado del otro: es el punto del modulo. */
.rmb-estados {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: .6rem;
}

.rmb-estado {
    background: var(--mt-paper-bg);
    border: 1px solid var(--mt-border-color);
    border-radius: var(--mt-radius-lg);
    padding: .7rem .9rem;
    display: flex;
    flex-direction: column;
    gap: .35rem;
    align-items: flex-start;
}

.rmb-estado__l {
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--mt-muted-color);
    font-weight: 700;
}

/* ── Avisos ──────────────────────────────────────────────────────── */

.rmb-aviso {
    background: var(--mt-paper-bg);
    border: 1px solid var(--mt-border-color);
    border-left-width: 3px;
    border-radius: var(--mt-radius);
    padding: .75rem 1rem;
    font-size: .87rem;
    color: var(--mt-body-color);
}

.rmb-aviso--warn { border-left-color: var(--mt-warning, var(--mt-border-color)); }
.rmb-aviso--ok { border-left-color: var(--mt-success); }
.rmb-aviso__p { margin: .35rem 0 0; font-size: .82rem; color: var(--mt-muted-color); }

/* ── Pestañas ────────────────────────────────────────────────────── */

.rmb-tabs {
    display: flex;
    gap: .15rem;
    border-bottom: 1px solid var(--mt-border-color);
    overflow-x: auto;
}

.rmb-tab {
    border: none;
    background: transparent;
    padding: .6rem .9rem;
    font-size: .87rem;
    font-weight: 600;
    color: var(--mt-muted-color);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}

/* `:not(.is-on)` o el hover se come el estado activo, que es mas importante. */
.rmb-tab:hover:not(.is-on) { color: var(--mt-body-color); }

.rmb-tab.is-on { color: var(--mt-heading-color); border-bottom-color: var(--mt-success); }

.rmb-tab__n {
    font-size: .7rem;
    background: var(--mt-body-bg);
    border-radius: var(--mt-radius-xxl);
    padding: .05rem .4rem;
    color: var(--mt-muted-color);
}

/* ── Paneles y formularios ───────────────────────────────────────── */

.rmb-panel {
    background: var(--mt-paper-bg);
    border: 1px solid var(--mt-border-color);
    border-radius: var(--mt-radius-lg);
    padding: 1.1rem 1.2rem;
    display: flex;
    flex-direction: column;
    gap: .8rem;
}

.rmb-panel__t { margin: 0; font-size: 1rem; font-weight: 700; color: var(--mt-heading-color); }
.rmb-panel__s { margin: -.5rem 0 0; font-size: .84rem; color: var(--mt-muted-color); max-width: 68ch; }

/* `flex-end` alinea los CONTROLES, no las etiquetas. En una fila donde unos campos tienen la
   etiqueta en una línea y otros en dos —«Cada cuánto se factura» junto a «Plazo para responder
   (días)»— el estirado por defecto dejaba unos inputs un renglón por debajo de los otros. Con la
   base común, la etiqueta crece hacia arriba y los campos siguen en línea. */
.rmb-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .7rem; }

.rmb-campo { display: flex; flex-direction: column; gap: .25rem; flex: 1 1 200px; min-width: 0; }
.rmb-campo--ancho { flex-basis: 100%; }
.rmb-campo--corto { flex: 0 0 130px; }

/* Para un campo numérico cuya ETIQUETA no cabe en 130px. Sin esto, «Cargo administrativo (%)»
   rompía en tres líneas y su input quedaba un renglón por debajo de los topes de al lado. */
.rmb-campo--medio { flex: 0 0 172px; }

.rmb-campo__l {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    font-weight: 700;
    color: var(--mt-label-color);
}

.rmb-campo__opt { text-transform: none; letter-spacing: 0; font-weight: 400; }

/* Obligatorio: el asterisco lo lee la vista y `aria-required` el lector de pantalla. Antes solo se
   marcaba lo opcional y lo obligatorio había que deducirlo del «Falta» del botón. */
.rmb-campo__req { color: var(--mt-danger); font-weight: 700; margin-left: .15em; }

.rmb-leyenda {
    margin: 0 0 10px;
    font-size: .75rem;
    color: var(--mt-muted-color);
}

/* Lo que falta para pedir, bajo los botones del formulario corto. Nombre propio a propósito:
   `.rmb-faltan` ya es el aviso del expediente y de Gastos por pagar, y compartirlo los descuadraba. */
.rmb-pendientes {
    margin-top: 10px;
    font-size: .8rem;
    color: var(--mt-body-color);
}

.rmb-pendientes__t { font-weight: 600; }

.rmb-pendientes__l { margin: 4px 0 0; padding-left: 18px; }

.rmb-campo__ayuda {
    font-size: .78rem;
    color: var(--mt-muted-color);
    line-height: 1.4;
}

.rmb-campo__ayuda a { color: var(--mt-success); font-weight: 600; }

/* ── Anticipos de fondos ─────────────────────────────────────────────────────────────────── */

.rmb-ant__saldos {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    margin-top: .6rem;
    padding-top: .6rem;
    border-top: 1px solid var(--mt-border-color);
}

.rmb-ant__saldo { display: flex; flex-direction: column; gap: .1rem; }

.rmb-ant__saldo-n { font-size: .95rem; font-weight: 700; color: var(--mt-heading-color); }

.rmb-ant__saldo-l {
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    font-weight: 700;
    color: var(--mt-label-color);
}

/* El saldo que mueve dinero se distingue del que solo informa: «te deben» y «devuelves» son
   las dos únicas cifras sobre las que alguien tiene que hacer algo. */
.rmb-ant__saldo--favor .rmb-ant__saldo-n { color: var(--mt-success); }
.rmb-ant__saldo--deuda .rmb-ant__saldo-n { color: var(--mt-danger, #DC2626); }

.rmb-ant__plazo { font-size: .8rem; color: var(--mt-muted-color); margin: .35rem 0 0; }
.rmb-ant__plazo--vencido { color: var(--mt-danger, #DC2626); font-weight: 600; }

.rmb-ant__acciones {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: .75rem;
}

/* ── Política de gastos del contrato (F5) ────────────────────────────────────────────────── */

.rmb-panel__cab {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.rmb-input {
    height: var(--mt-input-height, 40px);
    border: 1px solid var(--mt-input-border);
    border-radius: var(--mt-radius);
    background: var(--mt-paper-bg);
    color: var(--mt-body-color);
    padding: 0 .7rem;
    font-size: .88rem;
    width: 100%;
}

.rmb-input:focus-visible {
    outline: none;
    border-color: var(--mt-success);
    box-shadow: var(--mt-ring-shadow);
}

.rmb-input:disabled { background: var(--mt-body-bg); color: var(--mt-muted-color); }
.rmb-input--monto { font-family: var(--mt-font-mono, monospace); text-align: right; }

.rmb-form__pie { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; padding-top: .3rem; }

.rmb-heredado {
    margin: 0;
    font-size: .82rem;
    color: var(--mt-muted-color);
    border-top: 1px dashed var(--mt-border-color);
    padding-top: .6rem;
}

/* TaxSelect lo pinta un componente hijo. Como esta hoja es GLOBAL (no aislada) no hace falta
   `::deep`: el selector llega igual. Si algun dia se mueve a un `.razor.css`, hara falta. */
.rmb-campo .txs { width: 100%; }
.rmb-alta .txs { flex: 0 0 190px; }

/* ── Alta rápida de conceptos ────────────────────────────────────── */

.rmb-alta { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.rmb-alta .rmb-input { flex: 1 1 180px; width: auto; }
.rmb-alta .rmb-input--monto { flex: 0 0 120px; }

/* ── Tablas ──────────────────────────────────────────────────────── */

.rmb-tabla { width: 100%; border-collapse: collapse; font-size: .86rem; }

.rmb-tabla th {
    text-align: left;
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    font-weight: 700;
    color: var(--mt-muted-color);
    padding: .45rem .6rem;
    border-bottom: 1px solid var(--mt-border-color);
}

.rmb-tabla td {
    padding: .55rem .6rem;
    border-bottom: 1px solid var(--mt-border-color);
    color: var(--mt-body-color);
}

.rmb-tabla tfoot td { border-bottom: none; font-weight: 700; color: var(--mt-heading-color); }

.rmb-num, .rmb-tabla th.rmb-num {
    text-align: right;
    font-family: var(--mt-font-mono, monospace);
    white-space: nowrap;
}

.rmb-total { font-size: .95rem; }
.rmb-acciones { text-align: right; width: 44px; }

.rmb-icono {
    border: none;
    background: transparent;
    color: var(--mt-muted-color);
    cursor: pointer;
    font-size: .95rem;
    line-height: 1;
    padding: .25rem .4rem;
    border-radius: var(--mt-radius);
}

.rmb-icono:hover { color: var(--mt-danger, var(--mt-heading-color)); background: var(--mt-body-bg); }

.rmb-pista {
    display: inline-block;
    margin-left: .4rem;
    font-size: .68rem;
    padding: .05rem .4rem;
    border-radius: var(--mt-radius-xxl);
    background: var(--mt-body-bg);
    color: var(--mt-muted-color);
}

.rmb-pista--warn { color: var(--mt-warning, var(--mt-body-color)); }
.rmb-pista--ok { color: var(--mt-success); }

.rmb-pista-larga { font-size: .84rem; color: var(--mt-muted-color); text-align: center; margin: 0; }
.rmb-pista-larga a { color: var(--mt-success); }

/* ── Sustento ────────────────────────────────────────────────────── */

.rmb-doc-alta {
    border: 1px dashed var(--mt-input-border);
    border-radius: var(--mt-radius-lg);
    padding: .9rem 1rem;
    display: flex;
    flex-direction: column;
    gap: .8rem;
}

.rmb-doc-alta__pie { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }

/* El input de archivo lo pinta InputFile. Sin esconderlo, el selector nativo del navegador se
   queda a la vista junto al boton y descuadra la fila. */
.rmb-subir {
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    height: var(--mt-input-height, 40px);
    padding: 0 .9rem;
    border: 1px solid var(--mt-input-border);
    border-radius: var(--mt-radius);
    cursor: pointer;
    font-size: .85rem;
    color: var(--mt-body-color);
}

.rmb-subir input[type="file"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.rmb-subir__t { pointer-events: none; }

.rmb-check { display: inline-flex; align-items: center; gap: .4rem; font-size: .84rem; color: var(--mt-body-color); }

/* La casilla con su explicación debajo: `.rmb-check` a secas centra en vertical y deja el texto de
   ayuda pegado al costado del cuadrito.

   ⚠️ Va DESPUÉS de `.rmb-check` y no antes. Tienen la misma especificidad, así que gana la última
   de la hoja: colocado arriba —como estuvo— `align-items: center` le pisaba el `flex-start` y la
   casilla se iba al medio del párrafo. Un modificador siempre después de su base. */
.rmb-check--bloque {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    margin-top: .6rem;
}

.rmb-check--bloque input { margin-top: .2rem; flex: 0 0 auto; }
.rmb-check--bloque .rmb-campo__ayuda { display: block; margin-top: .15rem; }

/* ── Reparto ─────────────────────────────────────────────────────── */

.rmb-destino {
    border: 1px solid var(--mt-border-color);
    border-radius: var(--mt-radius-lg);
    padding: .8rem .9rem;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.rmb-destino__cab { display: flex; align-items: center; justify-content: space-between; }

.rmb-destino__n {
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 700;
    color: var(--mt-muted-color);
}

.rmb-destino__pista { flex: 1 1 100%; margin: 0; font-size: .82rem; color: var(--mt-muted-color); }
.rmb-destino__falta { color: var(--mt-warning, var(--mt-body-color)); }

.rmb-reparto__previo {
    flex: 1;
    font-size: .82rem;
    color: var(--mt-muted-color);
    font-family: var(--mt-font-mono, monospace);
}

/* ── Pie de la ficha ─────────────────────────────────────────────── */

.rmb-pie {
    position: sticky;
    bottom: 0;
    background: var(--mt-paper-bg);
    border: 1px solid var(--mt-border-color);
    border-radius: var(--mt-radius-lg);
    padding: .9rem 1.1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    box-shadow: var(--mt-shadow-base);
}

.rmb-faltan { flex: 1; min-width: 260px; }

.rmb-faltan__t { margin: 0 0 .25rem; font-size: .78rem; font-weight: 700; color: var(--mt-heading-color); }

.rmb-faltan__l {
    margin: 0;
    padding-left: 1.1rem;
    font-size: .82rem;
    color: var(--mt-body-color);
    display: flex;
    flex-direction: column;
    gap: .15rem;
}

.rmb-pie__acciones { display: flex; gap: .5rem; margin-left: auto; }

/* ── Historial ───────────────────────────────────────────────────── */

.rmb-hist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .55rem; }

.rmb-hist__i {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    border-left: 2px solid var(--mt-border-color);
    padding-left: .8rem;
}

.rmb-hist__f { font-size: .72rem; color: var(--mt-muted-color); font-family: var(--mt-font-mono, monospace); }
.rmb-hist__t { font-size: .88rem; font-weight: 600; color: var(--mt-heading-color); }
.rmb-hist__d { font-size: .82rem; color: var(--mt-body-color); }

/* ── Captura móvil ───────────────────────────────────────────────── */

.rmb-camara {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .3rem;
    min-height: 190px;
    border: 2px dashed var(--mt-input-border);
    border-radius: var(--mt-radius-lg);
    cursor: pointer;
    text-align: center;
    padding: 1.2rem;
    transition: border-color .12s ease;
}

.rmb-camara:hover { border-color: var(--mt-success); }

.rmb-camara input[type="file"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.rmb-camara__icono { font-size: 2.2rem; line-height: 1; }
.rmb-camara__t { font-size: 1rem; font-weight: 700; color: var(--mt-heading-color); }
.rmb-camara__s { font-size: .8rem; color: var(--mt-muted-color); }

/* Lo que Amy leyó de la foto, antes de guardar nada. */

.cap-lectura { margin-top: 1rem; }

.cap-dl {
    margin: .75rem 0 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: .75rem 1.25rem;
}

.cap-dl div { min-width: 0; }

.cap-dl dt {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--mt-label-color);
}

.cap-dl dd {
    margin: .15rem 0 0;
    font-size: .9rem;
    color: var(--mt-heading-color);
    word-break: break-word;
}

.cap-avisos {
    margin: .9rem 0 0;
    padding-left: 1.1rem;
    display: flex;
    flex-direction: column;
    gap: .3rem;
    font-size: .78rem;
    line-height: 1.45;
    color: var(--mt-body-color);
}

.cap-acciones {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    margin-top: 1rem;
}

/* En el teléfono los dos botones van a lo ancho: es donde se usa esta pantalla. */
@media (max-width: 640px) {
    .cap-acciones { flex-direction: column-reverse; }
    .cap-acciones .rmb-btn { width: 100%; }
}

/* ── Tesorería ───────────────────────────────────────────────────── */

.rmb-check-col { width: 36px; text-align: center; }

.rmb-tabla tr.is-marcada td { background: var(--mt-body-bg); }

.rmb-enlace { color: var(--mt-heading-color); font-weight: 600; text-decoration: none; }
.rmb-enlace:hover { color: var(--mt-success); }

/* El dato secundario de una celda: el motivo bajo el código, el banco bajo la cuenta. */
.rmb-sub { display: block; font-size: .76rem; color: var(--mt-muted-color); }

.rmb-lote__cab {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

/* ── Diálogo de motivo (observar / rechazar) ─────────────────────── */

.rmb-modal {
    position: fixed;
    inset: 0;
    background: rgba(15, 17, 21, .45);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    z-index: 900;
}

.rmb-modal__caja {
    background: var(--mt-paper-bg);
    border-radius: var(--mt-radius-xl);
    box-shadow: var(--mt-shadow-lg);
    padding: 1.4rem 1.5rem;
    width: min(520px, 100%);
    display: flex;
    flex-direction: column;
    gap: .7rem;
}

.rmb-modal__t { margin: 0; font-size: 1.1rem; font-weight: 700; color: var(--mt-heading-color); }
.rmb-modal__s { margin: 0; font-size: .86rem; color: var(--mt-muted-color); }

.rmb-textarea {
    border: 1px solid var(--mt-input-border);
    border-radius: var(--mt-radius);
    background: var(--mt-paper-bg);
    color: var(--mt-body-color);
    padding: .6rem .7rem;
    font-size: .88rem;
    font-family: inherit;
    resize: vertical;
    width: 100%;
}

.rmb-textarea:focus-visible {
    outline: none;
    border-color: var(--mt-success);
    box-shadow: var(--mt-ring-shadow);
}

.rmb-modal__pie { display: flex; justify-content: flex-end; gap: .5rem; }

@media (max-width: 640px) {
    .rmb-card { flex-direction: column; gap: .5rem; }
    .rmb-card__monto { align-self: flex-end; }
    .rmb-ficha__head { flex-direction: column; }
    .rmb-ficha__total { text-align: left; }
    .rmb-alta { flex-direction: column; align-items: stretch; }
    .rmb-alta .rmb-input, .rmb-alta .rmb-input--monto { flex: 1 1 auto; }
    .rmb-pie { flex-direction: column; align-items: stretch; }
    .rmb-pie__acciones { margin-left: 0; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   Bandeja EMBEBIDA en una pestaña del hub.
   `rmb-page` aporta el padding y el ancho máximo de una PÁGINA; dentro del hub
   eso ya lo pone el contenedor, y repetirlo mete la bandeja en una caja dentro
   de otra. Aquí solo se separa del borde superior de la pestaña.
   ───────────────────────────────────────────────────────────────────────────── */
.rmb-embebido {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Sin el título, la cabecera solo lleva los botones: van a la derecha, como en la página. */
.rmb-embebido > .rmb-head {
    justify-content: flex-end;
    padding: 0;
    border: 0;
    margin: 0;
}

/* Dos acciones en la cabecera de una bandeja. */
.rmb-head__acciones {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Panel de tarjeta del módulo. GLOBAL y no CSS aislado porque lo comparten el
   hub, su riel y el asistente de lote: el aislado de una página no llega a otra.
   ───────────────────────────────────────────────────────────────────────────── */
.hub-panel {
    padding: 16px;
    background: var(--mt-paper-bg);
    border: 1px solid var(--mt-border-color);
    border-radius: var(--mt-radius-lg);
}

.hub-panel__t {
    margin: 0 0 10px;
    font-size: 14px;
    font-weight: 700;
    color: var(--mt-heading-color);
}

.hub-panel__s {
    margin: -6px 0 12px;
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--mt-muted-color);
    max-width: 88ch;
}

.hub-panel__nota {
    margin: 10px 0 0;
    font-size: 11px;
    line-height: 1.5;
    color: var(--mt-muted-color);
}

/* ─────────────────────────────────────────────────────────────────────────────
   Lista de pasos numerados (flujo del expediente, ruta de aprobación). GLOBAL por
   el mismo motivo que `.hub-panel`: la comparten dos pantallas y el CSS aislado de
   una no llega a la otra.
   ───────────────────────────────────────────────────────────────────────────── */
.hub-flujo {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.hub-flujo__paso {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 12.5px;
}

.hub-flujo__paso strong {
    display: block;
    color: var(--mt-heading-color);
}

.hub-flujo__paso small {
    display: block;
    margin-top: 1px;
    font-size: 11.5px;
    line-height: 1.45;
    color: var(--mt-muted-color);
}

.hub-flujo__n {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--mt-body-bg);
    border: 1px solid var(--mt-border-color);
    font-size: 11px;
    font-weight: 700;
    color: var(--mt-body-color);
}

/* ════════════════════════════════════════════════════════════════════
   Rediseño de Mis gastos y de la ficha (anatomía del diseño funcional):
   indicadores con icono, fila de filtros, tabla de expedientes y riel.

   Vive en la hoja GLOBAL porque la bandeja se pinta en dos sitios —su
   propia página y la pestaña del hub— y el CSS aislado no cruza de un
   `.razor` a otro.
   ════════════════════════════════════════════════════════════════════ */

/* ── Indicadores ─────────────────────────────────────────────────── */

.rmb-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: .8rem;
}

.rmb-kpi {
    display: flex;
    align-items: center;
    gap: .8rem;
    padding: 1rem;
    background: var(--mt-paper-bg);
    border: 1px solid var(--mt-border-color);
    border-radius: var(--mt-radius-lg);
    box-shadow: var(--mt-shadow-base);
}

.rmb-kpi__icono {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--mt-primary-light);
    color: var(--mt-heading-color);
}

.rmb-kpi__icono svg { width: 22px; height: 22px; }

.rmb-kpi__icono--info { background: var(--mt-info-light); color: var(--mt-info-hover); }
.rmb-kpi__icono--ok   { background: var(--mt-success-light); color: var(--mt-success-hover); }
.rmb-kpi__icono--warn { background: var(--mt-warning-light); color: var(--mt-warning-hover); }

.rmb-kpi__txt { min-width: 0; display: flex; flex-direction: column; }

.rmb-kpi__l { font-size: .78rem; color: var(--mt-muted-color); }

.rmb-kpi__n {
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--mt-heading-color);
    font-variant-numeric: tabular-nums;
}

.rmb-kpi__n--ok { color: var(--mt-success-hover); }

.rmb-kpi__s { font-size: .72rem; color: var(--mt-muted-color); }
.rmb-kpi__s--warn { color: var(--mt-warning-hover); font-weight: 600; }

/* ── Cuerpo a dos columnas: la bandeja y el riel ─────────────────── */

/* Las dos pantallas con riel necesitan más ancho que el resto del módulo: con los 1100px de
   `.rmb-page`, el riel de 300 deja la tabla en 780 y las siete columnas se aprietan. */
.rmb-page--ancha { max-width: 1400px; }

.rmb-cuerpo {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 1rem;
    align-items: start;
}

.rmb-cuerpo__main { min-width: 0; display: flex; flex-direction: column; gap: .75rem; }

/* Sticky porque acompaña al trabajo: en la ficha, el resumen y «lo que falta» tienen que seguir
   a la vista mientras se rellenan las secciones de abajo. Sin esto, el riel se queda arriba y la
   mitad derecha de la pantalla es un hueco en blanco. */
.rmb-riel {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    position: sticky;
    top: 1rem;
}

/* En pantallas bajas el riel no cabe: sticky lo dejaría cortado por arriba. */
@media (max-height: 700px) {
    .rmb-riel { position: static; }
}

/* ── Filtros ─────────────────────────────────────────────────────── */

.rmb-filtros {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .8rem .9rem;
    background: var(--mt-paper-bg);
    border: 1px solid var(--mt-border-color);
    border-radius: var(--mt-radius-lg);
    box-shadow: var(--mt-shadow-base);
}

.rmb-buscador { position: relative; flex: 1 1 auto; min-width: 0; display: block; }

.rmb-buscador svg {
    position: absolute;
    left: .7rem;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    color: var(--mt-muted-color);
    pointer-events: none;
}

.rmb-buscador .rmb-input { width: 100%; padding-left: 2.2rem; }

.rmb-filtros__periodo { flex: 0 0 190px; }

.rmb-chip__n { color: var(--mt-muted-color); font-weight: 400; margin-left: .15rem; }
.rmb-chip.is-on .rmb-chip__n { color: inherit; opacity: .6; }

/* ── La tabla de expedientes ─────────────────────────────────────── */

/* `gap: 0` no es cosmético: `.rmb-panel` es un flex column con gap, y sin anularlo queda una
   franja en blanco entre la última fila de la tabla y la línea del pie. */
.rmb-panel--tabla { padding: 0; overflow: hidden; gap: 0; }

.rmb-panel--tabla .rmb-tabla th:first-child,
.rmb-panel--tabla .rmb-tabla td:first-child { padding-left: 1rem; }

.rmb-panel--tabla .rmb-tabla th:last-child,
.rmb-panel--tabla .rmb-tabla td:last-child { padding-right: 1rem; }

.rmb-panel--tabla .rmb-tabla th { padding-top: .9rem; }

.rmb-fila { cursor: pointer; }
.rmb-fila:hover td { background: var(--mt-body-bg); }

/* Lo observado es lo único de la lista que exige algo de quien mira. */
.rmb-fila--observada td { background: var(--mt-warning-subtle); }
.rmb-fila--observada:hover td { background: var(--mt-warning-light); }

.rmb-fila__motivo { font-weight: 600; color: var(--mt-heading-color); }

.rmb-fila__obs {
    display: block;
    margin-top: .15rem;
    font-size: .78rem;
    color: var(--mt-warning-hover);
}

.rmb-fila__monto { font-weight: 600; color: var(--mt-heading-color); white-space: nowrap; }
.rmb-fila__nada { color: var(--mt-muted-color); }

/* Los destinos que no caben en la primera línea de un gasto repartido. */
.rmb-fila__destinos {
    display: block;
    margin-top: .15rem;
    font-size: .74rem;
    color: var(--mt-muted-color);
}

/* Códigos y fechas en monoespaciada: se comparan en vertical de un vistazo. */
.rmb-cod {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: .78rem;
    color: var(--mt-body-color);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.rmb-tabla__pie {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .8rem 1rem;
    border-top: 1px solid var(--mt-border-color);
    font-size: .78rem;
    color: var(--mt-muted-color);
}

/* ── El riel del flujo ───────────────────────────────────────────── */

.rmb-flujo { list-style: none; margin: .3rem 0 0; padding: 0; }

.rmb-flujo__paso {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .35rem 0;
    position: relative;
}

/* La línea que une los pasos, sin un elemento extra por hueco. Va del borde inferior del icono
   al superior del siguiente: calculada sobre el alto del paso quedaba de dos píxeles. */
.rmb-flujo__paso:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 16px;
    top: 39px;
    bottom: -5px;
    width: 1px;
    background: var(--mt-border-color);
}

.rmb-flujo__ico {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--mt-gray-50);
    color: var(--mt-muted-color);
}

.rmb-flujo__ico svg { width: 17px; height: 17px; }

.rmb-flujo__paso.is-on .rmb-flujo__ico--ok { background: var(--mt-success-light); color: var(--mt-success-hover); }
.rmb-flujo__paso.is-on .rmb-flujo__ico--info { background: var(--mt-info-light); color: var(--mt-info-hover); }

.rmb-flujo__t { font-size: .82rem; font-weight: 600; color: var(--mt-muted-color); }
.rmb-flujo__paso.is-on .rmb-flujo__t { color: var(--mt-heading-color); }
.rmb-flujo__n { font-weight: 400; color: var(--mt-muted-color); }

/* ── Estado vacío, con su ilustración ────────────────────────────── */

.rmb-vacio__icono {
    display: grid;
    place-items: center;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--mt-primary-subtle);
    color: var(--mt-muted-color);
    margin-bottom: .5rem;
}

.rmb-vacio__icono svg { width: 34px; height: 34px; }

.rmb-vacio__acciones { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; margin-top: .8rem; }

.rmb-vacio__pie {
    margin: 1.2rem 0 0;
    padding-top: 1rem;
    border-top: 1px solid var(--mt-border-color);
    max-width: 56ch;
    font-size: .8rem;
    color: var(--mt-muted-color);
}

.rmb-vacio--corto { padding: 2rem 1.5rem; }

/* ── Ficha: migas, título y cinta de estados ─────────────────────── */

.rmb-migas { margin: 0 0 .5rem; font-size: .8rem; color: var(--mt-muted-color); }
.rmb-migas a { color: var(--mt-muted-color); text-decoration: none; }
.rmb-migas a:hover { color: var(--mt-heading-color); text-decoration: underline; }
.rmb-migas__sep { margin: 0 .4rem; }

.rmb-ficha__titulo { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; }

/* Los tres estados en UNA línea. Sustituye a `.rmb-estados`, que gastaba
   tres tarjetas para decir tres palabras. */
.rmb-cinta {
    display: flex;
    align-items: stretch;
    background: var(--mt-paper-bg);
    border: 1px solid var(--mt-border-color);
    border-radius: var(--mt-radius-lg);
    box-shadow: var(--mt-shadow-base);
    overflow: hidden;
}

.rmb-cinta__item {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .8rem 1.1rem;
}

.rmb-cinta__item + .rmb-cinta__item { border-left: 1px solid var(--mt-border-color); }

.rmb-cinta__l {
    flex: 0 0 auto;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--mt-label-color);
}

/* ── Riel de la ficha: comprobante y resumen ─────────────────────── */

.rmb-doc-mini {
    display: flex;
    gap: .7rem;
    padding: .7rem;
    border: 1px solid var(--mt-border-color);
    border-radius: var(--mt-radius);
    background: var(--mt-body-bg);
}

.rmb-doc-mini__ico {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: var(--mt-radius-sm);
    background: var(--mt-paper-bg);
    border: 1px solid var(--mt-border-color);
    color: var(--mt-muted-color);
}

.rmb-doc-mini__ico svg { width: 20px; height: 20px; }

.rmb-doc-mini__txt { min-width: 0; display: flex; flex-direction: column; gap: .1rem; }

.rmb-doc-mini__id {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: .8rem;
    font-weight: 600;
    color: var(--mt-heading-color);
}

.rmb-doc-mini__emisor { font-size: .78rem; line-height: 1.35; color: var(--mt-body-color); }

.rmb-doc-mini__meta {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: .72rem;
    color: var(--mt-muted-color);
}

.rmb-doc-mini__pie {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-top: .6rem;
    font-size: .78rem;
}

.rmb-doc-mini__pie a { color: var(--mt-success); font-weight: 600; text-decoration: none; }
.rmb-doc-mini__pie a:hover { text-decoration: underline; }

.rmb-doc-mini__mas { margin-top: .6rem; }

.rmb-resumen-caja { margin: .3rem 0 0; display: flex; flex-direction: column; gap: .5rem; }

.rmb-resumen-caja > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .75rem;
    font-size: .8rem;
}

.rmb-resumen-caja dt { color: var(--mt-body-color); }

.rmb-resumen-caja dd {
    margin: 0;
    font-weight: 600;
    color: var(--mt-heading-color);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.rmb-resumen-caja__total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .75rem;
    margin-top: .8rem;
    padding-top: .7rem;
    border-top: 1px solid var(--mt-border-color);
}

.rmb-resumen-caja__total strong {
    font-size: 1.15rem;
    color: var(--mt-heading-color);
    font-variant-numeric: tabular-nums;
}

.rmb-resumen-caja__nota { margin: .7rem 0 0; font-size: .78rem; color: var(--mt-muted-color); }
.rmb-resumen-caja__nota--warn { color: var(--mt-warning-hover); font-weight: 600; }

.rmb-nota-info {
    display: flex;
    gap: .6rem;
    margin-top: .8rem;
    padding: .7rem;
    border-radius: var(--mt-radius);
    background: var(--mt-info-subtle);
}

.rmb-nota-info svg { flex: 0 0 auto; width: 16px; height: 16px; margin-top: 1px; color: var(--mt-info-hover); }
.rmb-nota-info p { margin: 0; font-size: .76rem; line-height: 1.5; color: var(--mt-info-hover); }

.rmb-panel--falta {
    border-color: rgba(var(--mt-warning-rgb), .35);
    background: var(--mt-warning-subtle);
}

.rmb-panel__t--warn { color: var(--mt-warning-hover); font-size: .88rem; }

/* ── Historial plegado ───────────────────────────────────────────── */

.rmb-desplegable { padding: 0; }
.rmb-desplegable > *:not(summary) { padding: 0 1.1rem 1.1rem; }

.rmb-desplegable__cab {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .9rem 1.1rem;
    cursor: pointer;
    list-style: none;
}

.rmb-desplegable__cab::-webkit-details-marker { display: none; }

.rmb-desplegable__ico {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--mt-gray-50);
    color: var(--mt-muted-color);
}

.rmb-desplegable__ico svg { width: 16px; height: 16px; }

.rmb-desplegable__txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.rmb-desplegable__t { font-size: .85rem; font-weight: 600; color: var(--mt-heading-color); }
.rmb-desplegable__n { font-weight: 400; color: var(--mt-muted-color); }

.rmb-desplegable__s {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: .72rem;
    color: var(--mt-muted-color);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rmb-desplegable__flecha {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    color: var(--mt-muted-color);
    transition: transform .15s ease;
}

.rmb-desplegable[open] .rmb-desplegable__flecha { transform: rotate(180deg); }

/* Meta del pie de la ficha, a la izquierda de las acciones. */
.rmb-pie__meta { font-size: .78rem; color: var(--mt-muted-color); }

/* ── Pantallas estrechas ─────────────────────────────────────────── */

@media (max-width: 1100px) {
    .rmb-cuerpo { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 640px) {
    .rmb-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
    .rmb-kpi { flex-direction: column; align-items: flex-start; gap: .5rem; padding: .8rem; }
    .rmb-kpi__icono { width: 36px; height: 36px; }
    .rmb-kpi__icono svg { width: 18px; height: 18px; }
    .rmb-kpi__n { font-size: 1.15rem; }

    .rmb-filtros { flex-wrap: wrap; }
    .rmb-filtros__periodo { flex: 1 1 100%; }

    /* La cinta de estados se apila: tres columnas de 100px no caben. */
    .rmb-cinta { flex-direction: column; }
    .rmb-cinta__item + .rmb-cinta__item { border-left: 0; border-top: 1px solid var(--mt-border-color); }

    /* `.tbl-cards` convierte la tabla en tarjetas; el pie se queda de resumen. */
    .rmb-tabla__pie { padding: .8rem 0 0; }
}

/* ── Anticipos: puertas, progreso de la rendición y ficha (23-set-2026) ──────
   Global y no aislado: lo pintan la bandeja de anticipos, el componente
   AnticipoAcciones (hijo) y la ficha del anticipo. */

.rmb-puerta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

.rmb-puerta small {
    font-size: 11.5px;
    color: var(--mt-muted-color);
}

a.rmb-card__cod { text-decoration: none; }
a.rmb-card__cod:hover { text-decoration: underline; }

.rmb-ant__progreso {
    list-style: none;
    margin: .6rem 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.rmb-ant__nota {
    margin: .6rem 0 0;
    font-size: .8rem;
    line-height: 1.45;
    color: var(--mt-body-color);
}

.rmb-ant__devolver { margin-top: .6rem; }

.rmb-ficha {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 16px;
    align-items: start;
    margin-top: 16px;
}

.rmb-ficha__main,
.rmb-ficha__riel {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

.rmb-ficha__gastos {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.rmb-ficha__gastos li + li { border-top: 1px solid var(--mt-border-color); }

.rmb-ficha__gastos a {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 12px;
    padding: 10px 4px;
    color: inherit;
    text-decoration: none;
}

.rmb-ficha__gastos a:hover { background: var(--mt-body-bg); }

.rmb-ficha__gastos strong {
    font-variant-numeric: tabular-nums;
    color: var(--mt-heading-color);
}

.rmb-ficha__gasto-m {
    font-size: 13px;
    color: var(--mt-body-color);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rmb-ficha__dl {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.rmb-ficha__dl dt {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--mt-label-color);
}

.rmb-ficha__dl dd {
    margin: 2px 0 0;
    font-size: 13px;
    color: var(--mt-heading-color);
    overflow-wrap: anywhere;
}

@media (max-width: 1100px) {
    .rmb-ficha { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 640px) {
    .rmb-ficha__gastos a {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 4px 12px;
    }
    .rmb-ficha__gasto-m { grid-column: 1 / -1; grid-row: 2; white-space: normal; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   MIS RENDICIONES (REE_v11): el hub del colaborador, con tres pestañas.
   Global y no aislado: `.hub-tab` es CSS aislado de DashboardReembolsosPage y no
   llega a esta página (trampa nº 2 del módulo, doc 12).
   Cada pestaña lleva una segunda línea que dice CUÁNDO usarla.
   ───────────────────────────────────────────────────────────────────────────── */
.mr-tabs {
    display: flex;
    gap: 4px;
    margin-top: 20px;
    border-bottom: 1px solid var(--mt-border-color);
    overflow-x: auto;
    scrollbar-width: none;
}

.mr-tab {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    border: 0;
    background: none;
    padding: 10px 16px 12px;
    font: inherit;
    text-align: left;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    white-space: nowrap;
    min-height: 44px;
}

.mr-tab__t {
    font-size: 14px;
    font-weight: 700;
    color: var(--mt-muted-color);
}

.mr-tab__s {
    font-size: 12px;
    color: var(--mt-muted-color);
}

.mr-tab:not(.is-on):hover .mr-tab__t { color: var(--mt-heading-color); }

.mr-tab.is-on { border-bottom-color: var(--mt-success); }
.mr-tab.is-on .mr-tab__t { color: var(--mt-heading-color); }
.mr-tab.is-on .mr-tab__s { color: var(--mt-body-color); }

.mr-tab:focus-visible {
    outline: none;
    box-shadow: var(--mt-ring-shadow);
    border-radius: var(--mt-radius) var(--mt-radius) 0 0;
}

.mr-cuerpo { margin-top: 16px; }


@media (max-width: 640px) {
    .mr-tab { padding: 10px 12px; }
    .mr-tab__s { display: none; }
}

/* Ficha ▸ Sustento: archivos de cada comprobante bajo su identificación, y su botón de
   adjuntar en la columna de acciones (bugfix 107). */
.rmb-doc-archivos {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 6px;
}

.rmb-doc-archivo {
    display: inline-block;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 2px 8px;
    border: 1px solid var(--mt-border-color);
    border-radius: var(--mt-radius-xxl);
    font-size: 11.5px;
    color: var(--mt-body-color);
}

.rmb-doc-acciones {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    white-space: nowrap;
}

.rmb-subir--mini {
    height: 32px;
    padding: 0 .7rem;
    font-size: .8rem;
}

/* Selector compacto dentro de una tabla (el comprobante de cada concepto). */
.rmb-select--mini { min-width: 180px; }

/* Botón compacto dentro de una celda (confirmar los datos de un comprobante leído). */
.rmb-btn--mini {
    height: 30px;
    padding: 0 .7rem;
    font-size: .8rem;
}

/* Acción secundaria en línea (validar una cuenta desde un listado): se lee como enlace. */
.rmb-enlace-btn {
    border: 0;
    background: none;
    padding: 0;
    font: inherit;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--mt-success);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.rmb-enlace-btn:disabled { opacity: .6; cursor: default; }

/* ─────────────────────────────────────────────────────────────────────────────
   Carpetas de proyecto (Mis rendiciones P1b): pestaña Mis proyectos, alta y ficha.
   Globales a propósito, como todo el módulo: los paneles se embeben en el hub y el
   CSS aislado de una página no llega al panel de otra (trampa nº 2 del módulo).
   ───────────────────────────────────────────────────────────────────────────── */

.mp-intro { max-width: 640px; }

.mp-lado {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    text-align: right;
}
.mp-lado__l { font-size: 12px; color: var(--mt-muted-color); }

.cp-cifras {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
    margin: 0 0 16px;
}
.cp-cifra {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 14px;
    border: 1px solid var(--mt-border-color);
    border-radius: var(--mt-radius-lg);
    background: var(--mt-paper-bg);
}
.cp-cifra__n {
    font-family: var(--mt-font-mono, monospace);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--mt-heading-color);
}
.cp-cifra__s { font-size: 12px; color: var(--mt-muted-color); }

.cp-tabla { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.cp-tabla th {
    text-align: left;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--mt-label-color);
    padding: 8px 10px;
    border-bottom: 1px solid var(--mt-border-color);
}
.cp-tabla td { padding: 10px; border-bottom: 1px solid var(--mt-border-color); vertical-align: middle; }
.cp-tabla .cp-num { text-align: right; font-family: var(--mt-font-mono, monospace); white-space: nowrap; }
.cp-sub { display: block; font-size: 12px; color: var(--mt-muted-color); }

.cp-personas { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.cp-persona {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 6px 4px 10px;
    border-radius: var(--mt-radius-xxl);
    background: var(--mt-body-bg);
    font-size: 13px;
    color: var(--mt-heading-color);
}
.cp-persona button {
    border: 0;
    background: transparent;
    color: var(--mt-muted-color);
    cursor: pointer;
    padding: 0 4px;
    font-size: 14px;
    line-height: 1;
}
.cp-persona button:hover,
.cp-persona button:focus-visible { color: var(--mt-danger); }

.cp-plan__total {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: flex-end;
    margin-top: 12px;
    font-size: 13.5px;
    color: var(--mt-body-color);
}
.cp-plan__total strong { font-family: var(--mt-font-mono, monospace); color: var(--mt-heading-color); }

@media (max-width: 640px) {
    .mp-lado { align-items: flex-start; text-align: left; }
    .cp-tabla thead { display: none; }
    .cp-tabla tr { display: block; padding: 8px 0; border-bottom: 1px solid var(--mt-border-color); }
    .cp-tabla td { display: flex; justify-content: space-between; gap: 12px; border: 0; padding: 4px 0; }
    .cp-tabla td::before { content: attr(data-label); color: var(--mt-muted-color); font-size: 12px; }
}

/* Con ayudas bajo algunos campos, alinear abajo desnivela las etiquetas de la fila. */
.cp-form { align-items: flex-start; }
.cp-persona--fija { padding-right: 10px; }

.cp-acciones { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.cp-tabla .rmb-btn--mini { margin-top: 4px; }

.cp-cab { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.cp-corte {
    margin-top: 12px;
    padding: 12px 14px;
    border: 1px solid var(--mt-border-color);
    border-radius: var(--mt-radius-lg);
}
.cp-corte--nuevo { display: flex; flex-direction: column; gap: 8px; background: var(--mt-body-bg); }
.cp-corte--sustituido { opacity: .7; }
.cp-corte__cab { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 8px; }
.cp-decision { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.cp-decision .rmb-input { flex: 1 1 200px; min-width: 0; }

@media (max-width: 640px) {
    .cp-cab { flex-direction: column; }
}

/* ── Resultado del banco por abono (P2, RF15) ─────────────────────────────── */
.lp-resultados { display: flex; flex-direction: column; gap: 8px; margin: 0 0 12px; max-height: 360px; overflow-y: auto; }
.lp-resultado {
    display: grid;
    grid-template-columns: 1fr 240px;
    gap: 6px 12px;
    align-items: center;
    padding: 8px 10px;
    border: 1px solid var(--mt-border-color);
    border-radius: var(--mt-radius);
}
.lp-resultado .rmb-input { grid-column: 1 / -1; }
.lp-resultado__quien { font-size: 13px; color: var(--mt-heading-color); }
@media (max-width: 640px) { .lp-resultado { grid-template-columns: 1fr; } }

/* ── Sin comprobante en la ficha (P2, RF19-RF20) ───────────────────────────────────────────── */
.sus-modo { display: inline-flex; gap: 4px; padding: 4px; margin-bottom: 12px;
    background: var(--mt-body-bg); border-radius: var(--mt-radius-xxl); }
.sus-modo__b { height: 32px; padding: 0 14px; border: none; border-radius: var(--mt-radius-xxl);
    background: transparent; color: var(--mt-body-color); font: inherit; font-size: .86rem; cursor: pointer;
    transition: background-color .15s ease, color .15s ease; }
.sus-modo__b.is-on { background: var(--mt-paper-bg); color: var(--mt-heading-color); font-weight: 600;
    box-shadow: var(--mt-shadow-sm); }
.sus-modo__b:focus-visible { outline: none; box-shadow: var(--mt-ring-shadow); }
.sus-traslados { list-style: none; margin: 4px 0 0; padding: 0; font-size: .8rem; color: var(--mt-body-color); }
.sus-traslados li { padding: 1px 0; }
.sus-movilidad { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--mt-border-color); }
.sus-exceso { color: var(--mt-warning); }

/* ── Firma de la planilla y la declaración (P2, RF21) ─────────────────────────────────────── */
.sus-firma { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.sus-firma__estado { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.sus-firma__acciones { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; }
.sus-firma__campo { display: flex; flex-direction: column; gap: 4px; flex: 0 0 240px; }
.sus-firma__custodia { width: 240px; }
.sus-firma__obs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.sus-firma__obs .rmb-input { flex: 1 1 280px; }