/* ============================================================================
   DETALLE DE RENTA — /rentas/{id}
   ============================================================================
   Portado del proyecto de Claude Design «Rediseño página lavado Vinali»
   (mock.html), cuya copia íntegra vive en wwwroot/_bench/mock.html. El banco
   de /_bench/comparar.html?v=1 compara ESTA hoja contra ese dibujo: si las dos
   mitades no coinciden, gana el mock.

   Antes esto eran 451 líneas de <style> dentro de DetalleRenta.razor. Un bloque
   así no tiene scope —un selector `.mud-card` pelado ahí restilaba los diálogos
   que la propia página abre— y el banco no podía reproducirlo, que es la razón
   por la que cada rediseño de esta pantalla costaba entre 3 y 8 commits.

   REGLAS
   · Nada de hex crudo: los --ic-* y --lc-* voltean solos con data-theme.
     Lo vigila SustratoVisualTests.
   · Las reglas de la página van bajo .dr-page-container. Las de la hoja de
     historial (.dr-sheet, .dr-mile*) van SIN acotar: MudBlazor renderiza el
     diálogo en su portal, a nivel de <body>, fuera del contenedor.
   · Mínimo táctil 48px (--ic-touch-min), no 44. Excepciones documentadas, todas con
     hit-slop por ::after para que el área TÁCTIL sí llegue a 48 (.dr-btn--sm, .dr-card__act):
     el botón «Ir» de la franja, que se pinta a 30 y gana área con un ::after.

   Lo que NO se portó del mock, y por qué:
   · .dr-foot { position: sticky }. La barra real es .dr-action-bar en app.css,
     position:fixed, y app.css oculta el BottomNav con :has() para que el botón
     central elevado del Calendario no tape el CTA. El mock se dibuja dentro de
     .bench-frame, que es su propio contenedor de scroll; la app no lo es.
   · Los `top:` de .dr-head y .dr-strip. El mock los ancla a mano porque el
     banco no tiene AppBar; en la app lo hace .ic-ph--detail (PageHeader).
   ========================================================================== */


/* ══════════════════════════════════════════════════════════════════════════
   1. ARMAZÓN
   ══════════════════════════════════════════════════════════════════════════ */

/* El canalón lo pone .ic-page-gutter (app.css), que esta página comparte con
   /registrar-entrega, /productos/{id} y /asignar-renta. Aquí sólo queda lo que
   es de esta pantalla. */
.dr-page-container {
    position: relative;
}

/* ── Encabezado ───────────────────────────────────────────────────────────
   El .dr-head del mock ES el PageHeader Detail: misma altura (56px), mismo
   padding lateral y ya sticky bajo el AppBar. Lo único que cambia es que el
   mock lo dibuja plano y a sangre; eso lo hace el modificador .ic-ph--plano,
   que vive en PageHeader.razor.css porque ese archivo es scoped y desde aquí
   no se alcanza su interior.

   Lo de abajo sí es de la página: el contenido del TitleSlot lo autora
   DetalleRenta.razor, así que lleva SU scope, no el del componente. */

/* width:100%, no flex:1 — el padre (.ic-ph__center) es una columna, así que un
   flex-grow crecería a lo alto y no a lo ancho. */
.dr-head__id {
    width: 100%;
    min-width: 0;
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.dr-head__folio {
    flex-shrink: 0;
    font-size: var(--ic-text-xs);
    font-weight: 700;
    color: var(--ic-text-tertiary);
}

/* Nowrap con elipsis a propósito: el encabezado es sticky y su alto tiene que
   ser determinista. Un nombre que envolviera movería todo lo que va debajo. */
.dr-head__name {
    min-width: 0;
    font-size: var(--ic-text-lg);
    font-weight: 700;
    letter-spacing: -0.01em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Franja de campo (BelowSlot del PageHeader) ───────────────────────────
   Recupera lo único que se consulta en movimiento —próximo hito, saldo y
   navegar— y viaja pegada al encabezado, que ya es sticky. */

.dr-strip {
    display: flex;
    align-items: center;
    gap: var(--ic-space-2);
    min-height: var(--ic-touch-min);
    padding: var(--ic-space-1) var(--ic-space-3);
    background: var(--ic-surface-2);
    border-top: 1px solid var(--ic-border);
    font-size: var(--ic-text-sm);
    /* Necesario para el hit-slop del botón «Ir». */
    overflow: visible;
}

.dr-strip__time {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    font-weight: 700;
}

.dr-strip__texto {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* El reloj va en el acento, no en gris apagado: es lo que ancla la lectura. */
.dr-strip__icon {
    width: 16px;
    height: 16px;
    fill: var(--lc-accent);
    flex-shrink: 0;
    display: block;
}

/* Punto de 3px, no el carácter «·»: el glifo se sienta en la línea base y
   queda descentrado respecto a la fila; el círculo cae justo en medio. */
.dr-strip__dot {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--ic-text-tertiary);
    flex-shrink: 0;
}

/* El saldo toma el espacio libre y empuja el botón al extremo. */
.dr-strip__due {
    flex: 1;
    min-width: 0;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dr-strip__due--pendiente { color: var(--lc-warn); }
.dr-strip__due--ok        { color: var(--lc-ok); }

/* Excepción deliberada a --ic-touch-min: una franja de 48px no aloja un
   control de 48px con su padding. El botón se PINTA a 30px y gana área
   tappable con el ::after, que lo lleva a ~48×48. */
.dr-strip__ir {
    margin-left: auto;
    height: 30px !important;
    min-height: 30px !important;
    padding-inline: 11px !important;
    border-radius: 9px !important;
    font-size: var(--ic-text-xs) !important;
    font-weight: 700 !important;
    flex-shrink: 0;
    position: relative;
}

.dr-strip__ir::after {
    content: "";
    position: absolute;
    inset: -9px -8px;
}

/* ── Cuerpo ───────────────────────────────────────────────────────────────
   Sustituye a <MudGrid Class="dr-detalle-grid"> + <MudItem md="6">. Una sola
   columna que fluye en móvil; en escritorio, dos columnas por CSS grid. */

.dr-body {
    display: flex;
    flex-direction: column;
    gap: var(--ic-space-3);
    padding: var(--ic-space-3) 0 var(--ic-space-4);
}

/* ── Hueco para la barra fija del pie ──────────────────────────────────────
   Padding del cuerpo, no un div espaciador: como hijo de esta columna flex, el
   espaciador sumaba su alto MÁS el gap de 12px que lo separaba del chat, y encima
   el padding inferior de aquí. Tres fuentes para una medida, y 35px de aire bajo
   el chat. La altura se compone de partes para que no haya cuatro literales que
   mantener: 8+52+8 con acciones, 8+48+8 sin ellas, y +59 si hay franja de equipo
   (50 de la franja, 8 de su padding y 1 de su borde). El +8 final es holgura
   para el redondeo del navegador. */
.dr-body--pie {
    --dr-pie-base: 68px;
    padding-bottom: calc(var(--dr-pie-base) + var(--ic-space-2));
}

.dr-body--pie-info { --dr-pie-base: 64px; }

.dr-body--pie-crew {
    padding-bottom: calc(var(--dr-pie-base) + 59px + var(--ic-space-2));
}

@media (min-width: 960px) {
    .dr-body {
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: start;
    }
    /* Las tarjetas que se leen enteras de un vistazo no se parten a la mitad. */
    .dr-body > .dr-alert,
    .dr-body > .dr-card--ancha { grid-column: 1 / -1; }
}


/* ══════════════════════════════════════════════════════════════════════════
   2. TARJETAS
   Se construyen con div y clases propias, no con MudCard: MudCard trae
   padding de 16px, flex-grow y wrappers extra que habría que neutralizar
   uno a uno. Los componentes Mud se conservan donde su COMPORTAMIENTO es el
   valor: menús, diálogos, formularios, tooltips.
   ══════════════════════════════════════════════════════════════════════════ */

.dr-card {
    background: var(--ic-surface);
    border: 1px solid var(--ic-border);
    border-radius: var(--ic-radius-md);
    overflow: hidden;
}

.dr-card__head {
    display: flex;
    align-items: center;
    gap: var(--ic-space-2);
    padding: var(--ic-space-3) var(--ic-space-4);
}

.dr-card__head + .dr-row,
.dr-card__head + .dr-pad { border-top: 1px solid var(--ic-border); }

.dr-card__title {
    flex: 1;
    min-width: 0;
    font-size: var(--ic-text-md);
    font-weight: 700;
}

.dr-card__meta {
    flex-shrink: 0;
    font-size: var(--ic-text-xs);
    font-weight: 700;
    color: var(--ic-text-tertiary);
}

/* Lápiz de sección: abre el diálogo que edita esta tarjeta.
   Caja VISUAL de 32px a propósito. Con los 48px de --ic-touch-min el encabezado de
   cada tarjeta crecería 16px, y son cinco tarjetas: la página entera se estiraría
   por un botón que casi nunca se usa. El área TÁCTIL sí llega a 48 por el ::after,
   la misma técnica que .dr-strip__ir::after. */

.dr-card__act {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    background: transparent;
    border-radius: var(--ic-radius-sm);
    color: var(--ic-icon-muted);
    cursor: pointer;
    position: relative;
}

.dr-card__act::after {
    content: "";
    position: absolute;
    inset: -8px;
}

.dr-card__act:hover { background: color-mix(in srgb, var(--ic-text) 7%, transparent); }

.dr-card__act:disabled { opacity: .5; cursor: default; }

.dr-pad {
    padding: var(--ic-space-3) var(--ic-space-4);
    display: flex;
    flex-direction: column;
    gap: var(--ic-space-3);
}

.dr-sep { border-top: 1px solid var(--ic-border); }

/* ── Aviso ── */

.dr-alert {
    display: flex;
    gap: var(--ic-space-3);
    padding: var(--ic-space-3);
    border-radius: var(--ic-radius-md);
    background: color-mix(in srgb, var(--lc-err) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--lc-err) 42%, transparent);
}

/* Caja translúcida con borde, no un bloque de color sólido: a ancho completo
   y relleno, el color gritaba más que el propio texto, que es lo que hay que
   LEER, y encima lo dejaba sobre fondo saturado. */
.dr-alert--info {
    background: color-mix(in srgb, var(--lc-accent) 12%, transparent);
    border-color: color-mix(in srgb, var(--lc-accent) 42%, transparent);
}
.dr-alert--info .dr-alert__ico,
.dr-alert--info .dr-alert__t { color: var(--lc-accent); }

.dr-alert--lavado {
    background: color-mix(in srgb, var(--lc-warn) 12%, transparent);
    border-color: color-mix(in srgb, var(--lc-warn) 42%, transparent);
}
.dr-alert--lavado .dr-alert__ico,
.dr-alert--lavado .dr-alert__t { color: var(--lc-warn); }

.dr-alert__ico {
    flex-shrink: 0;
    color: var(--lc-err);
    line-height: 0;
    padding-top: 2px;
}

.dr-alert__body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.dr-alert__t {
    font-size: var(--ic-text-xs);
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--lc-err);
}

.dr-alert__d {
    font-size: var(--ic-text-sm);
    line-height: 1.45;
    color: var(--ic-text);
    text-wrap: pretty;
}

/* Enlaces detectados dentro de notas de texto plano (NotasLinkify). */
.dr-nota-link {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
    cursor: pointer;
    word-break: break-all;
}

/* ── Renglones de producto ── */

.dr-row {
    display: flex;
    align-items: flex-start;
    gap: var(--ic-space-3);
    padding: var(--ic-space-3) var(--ic-space-4);
}

.dr-row + .dr-row { border-top: 1px solid var(--ic-border); }

.dr-row--tap { cursor: pointer; }
.dr-row--tap:hover { background: color-mix(in srgb, var(--ic-text) 4%, transparent); }

.dr-thumb {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    border-radius: var(--ic-radius-sm);
    background: color-mix(in srgb, var(--ic-text) 8%, transparent);
    color: var(--ic-icon-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.dr-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.dr-row__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.dr-row__name {
    font-size: var(--ic-text-md);
    font-weight: 700;
    line-height: 1.35;
    text-wrap: pretty;
}

.dr-row__sub {
    font-size: var(--ic-text-sm);
    color: var(--ic-muted);
}

.dr-row__money {
    flex-shrink: 0;
    font-size: var(--ic-text-md);
    font-weight: 800;
    /* Sin tabular-nums: en Schibsted Grotesk la coma tabular se lleva un avance de
       dígito completo y "$1,250" se lee "$1 , 250" (+27% de ancho). Inter no lo hacía.
       Se conserva solo donde hay columna de dígitos SIN separador de miles.
       Ver docs/design-substrate.md → «La familia: Schibsted Grotesk». */
    color: var(--lc-ok);
}

/* La línea excluida sigue contando en el historial pero ya no en la ruta. */
.dr-row--excluida { opacity: 0.6; }

/* ── Chips ── */

.dr-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 24px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: var(--ic-text-xs);
    font-weight: 700;
    white-space: nowrap;
    border: 1px solid var(--ic-border);
    color: var(--ic-muted);
}

.dr-chip--ok   { color: var(--lc-ok);      border-color: color-mix(in srgb, var(--lc-ok) 45%, transparent);      background: color-mix(in srgb, var(--lc-ok) 12%, transparent); }
.dr-chip--warn { color: var(--lc-warn);    border-color: color-mix(in srgb, var(--lc-warn) 45%, transparent);    background: color-mix(in srgb, var(--lc-warn) 12%, transparent); }
.dr-chip--err  { color: var(--lc-err);     border-color: color-mix(in srgb, var(--lc-err) 45%, transparent);     background: color-mix(in srgb, var(--lc-err) 12%, transparent); }
.dr-chip--acc  { color: var(--lc-accent);  border-color: color-mix(in srgb, var(--lc-accent) 45%, transparent);  background: color-mix(in srgb, var(--lc-accent) 12%, transparent); }
.dr-chip--info { color: var(--lc-info);    border-color: color-mix(in srgb, var(--lc-info) 45%, transparent);    background: color-mix(in srgb, var(--lc-info) 12%, transparent); }
.dr-chip--neu  { color: var(--lc-neutral); border-color: color-mix(in srgb, var(--lc-neutral) 45%, transparent); background: color-mix(in srgb, var(--lc-neutral) 12%, transparent); }

/* Faltante de recolección: el chip es el contenido, el botón da el área táctil
   (48px) sin inflar el chip de 24px ni romper la fila de chips. */
.dr-faltante {
    display: inline-flex;
    align-items: center;
    min-height: var(--ic-touch-min);
    /* El área táctil se queda en 48px, pero sólo ocupa ~32 en el flujo: sin esto, dos
       faltantes en la misma línea quedan separados por un hueco de media tarjeta. */
    margin-block: -8px;
    padding: 0;
    border: 0;
    background: transparent;
    font: inherit;
    cursor: pointer;
}
.dr-faltante:disabled { cursor: default; opacity: .6; }
.dr-faltante .dr-chip { white-space: normal; height: auto; min-height: 24px; }

/* ── Acuerdo por material faltante (AcuerdoFaltanteDialog). Las opciones de
   motivo reusan mfr-* de registrar-entrega.css (hoja global). ── */
.af-meta { margin: 0 0 var(--ic-space-3); font-size: var(--ic-text-sm); color: var(--ic-muted); }
.af-seccion { display: flex; flex-direction: column; gap: var(--ic-space-2); margin-bottom: var(--ic-space-4); }
.af-label { font-size: var(--ic-text-xs); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ic-muted); }

.af-seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--ic-space-1);
          padding: var(--ic-space-1); border-radius: var(--ic-radius-md); background: var(--ic-surface-2); }
.af-seg__opt {
    min-height: var(--ic-touch-min);
    border: 0;
    border-radius: var(--ic-radius-sm);
    background: transparent;
    color: var(--ic-text);
    font: inherit;
    font-size: var(--ic-text-sm);
    font-weight: 600;
    cursor: pointer;
}
.af-seg__opt--on { background: var(--ic-surface); box-shadow: 0 1px 2px rgba(0, 0, 0, .12); }
.af-seg__opt:disabled { opacity: .55; cursor: default; }
.af-ref:disabled, .af-link:disabled { opacity: .55; cursor: default; }

.af-ref {
    align-self: flex-start;
    min-height: var(--ic-touch-min);
    padding: 0 var(--ic-space-2);
    border: 0;
    background: transparent;
    color: var(--ic-primary);
    font: inherit;
    font-size: var(--ic-text-sm);
    font-weight: 600;
    cursor: pointer;
}

.af-aviso { margin: 0; font-size: var(--ic-text-sm); color: var(--ic-muted); }

.af-inventario {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ic-space-2);
    padding: var(--ic-space-2) var(--ic-space-3);
    border-radius: var(--ic-radius-md);
    background: color-mix(in srgb, var(--lc-warn) 10%, transparent);
    color: var(--ic-text);
    font-size: var(--ic-text-sm);
}
.af-link {
    min-height: var(--ic-touch-min);
    border: 0;
    background: transparent;
    color: var(--ic-primary);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
}

.af-error { margin: var(--ic-space-2) 0 0; color: var(--lc-err); font-weight: 600; font-size: var(--ic-text-sm); }

@media (max-width: 599px) {
    .af-dlg-root .mud-dialog-actions { flex-direction: column-reverse; align-items: stretch; }
    .af-dlg-root .mud-dialog-actions .fx-btn { width: 100%; }
}

/* Parcial: misma paleta, borde punteado. Se lee «algo hecho, falta el resto»
   sin gastar un color más. */
.dr-chip--parcial { border-style: dashed; }

/* «Se lo pides a X» es el único chip de esta fila cuyo texto lleva un nombre propio dentro, y con
   el nowrap de .dr-chip se salía de la tarjeta a 320px. Aquí el chip deja de ser píldora de una
   línea: envuelve y crece, que es lo que hace falta cuando el dato ES el nombre. */
.dr-chip--prestado {
    height: auto;
    min-height: 24px;
    max-width: 100%;
    padding: 3px 10px;
    white-space: normal;
    text-align: left;
    line-height: 1.3;
}

.dr-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ic-space-1);
}

.dr-swatch {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 1px solid var(--ic-border);
    flex-shrink: 0;
}

.dr-eyebrow {
    font-size: var(--ic-text-xs);
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ic-text-tertiary);
}

/* ── Botones ── */

.dr-btn {
    min-height: var(--ic-touch-min);
    min-width: 64px;
    padding: 0 var(--ic-space-4);
    border-radius: var(--ic-radius-md);
    border: 1px solid var(--ic-border);
    background: transparent;
    color: var(--ic-muted);
    font-family: inherit;
    font-size: var(--ic-text-md);
    font-weight: 700;
    letter-spacing: 0.01em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ic-space-2);
    cursor: pointer;
}

.dr-btn:hover  { background: color-mix(in srgb, var(--ic-text) 7%, transparent); }
.dr-btn:disabled { opacity: 0.5; cursor: default; }
.dr-btn:disabled:hover { background: transparent; }

.dr-btn--icon  { width: var(--ic-touch-min); min-width: var(--ic-touch-min); padding: 0; color: var(--ic-icon-muted); }
.dr-btn--plain { border-color: transparent; }
.dr-btn--main  { border-color: transparent; background: var(--lc-accent); color: var(--ic-bg); font-weight: 800; }
.dr-btn--main:hover { background: color-mix(in srgb, var(--lc-accent) 84%, var(--ic-text)); }
.dr-btn--go    { color: var(--lc-ok); border-color: color-mix(in srgb, var(--lc-ok) 45%, transparent); background: color-mix(in srgb, var(--lc-ok) 10%, transparent); }
.dr-btn--ok    { border-color: transparent; background: var(--lc-ok); color: var(--ic-bg); font-weight: 800; }
.dr-btn--warn  { color: var(--lc-warn); border-color: color-mix(in srgb, var(--lc-warn) 45%, transparent); }
/* Segunda excepción documentada al mínimo de 48px, junto al botón «Ir» de la franja.
   36px de caja VISUAL porque tres de estos van en una sola línea con 4px de separación
   (.dr-chips) y a 48 no caben a 390px. El área TÁCTIL sí llega a 48 por el ::after, que
   es la misma técnica de .dr-strip__ir::after y .dr-card__act::after. Sin él, tocar
   «Cambiar estado» con guantes caía en «Eliminar». */
.dr-btn--sm    { min-height: 36px; padding: 0 var(--ic-space-3); font-size: var(--ic-text-sm); position: relative; }

/* Foco visible en la fila tocable: ya es alcanzable con Tab (role/tabindex en el .razor),
   y sin esto no se ve dónde está el cursor de teclado. Mismo tratamiento que .dr-team__row. */
.dr-row--tap:focus-visible {
    outline: 2px solid var(--ic-primary);
    outline-offset: -2px;
}

.dr-btn--sm::after {
    content: "";
    position: absolute;
    inset: -6px -2px;
}
.dr-btn--grow  { flex: 1; }
.dr-btn--soft  { border-color: transparent; color: var(--lc-ok); background: color-mix(in srgb, var(--lc-ok) 14%, transparent); }

/* La acción principal de la pantalla, dentro de la barra del pie: 52px, por
   encima del mínimo táctil. Equivale al `.dr-actions .dr-btn` del mock; la
   barra en sí (fija, y la supresión del BottomNav) sigue en app.css.
   Las reglas .dr-action-bar__btn* de allí quedaron muertas al salir MudButton
   de la barra: son candidatas del barrido de CSS huérfano. */
.dr-action-bar__row .dr-btn { min-height: 52px; }

/* Con dos acciones, la secundaria no se estira: en el mock «Pausar» e «Iniciar
   yo» miden lo que su texto y el peso visual se lo lleva la principal. */
.dr-action-bar__row .dr-btn:not(.dr-btn--grow) { flex: 0 0 auto; }

/* Franja de cierre: la barra cuando no hay nada que accionar —renta cerrada, o
   una ruta que la lleva otra persona—. El mock la dibuja en la columna de
   Cancelada; aquí sirve además para que la barra deje de desaparecer del todo,
   que era lo que borraba de la pantalla quién está en la calle. */
.dr-closed {
    display: flex;
    align-items: center;
    gap: var(--ic-space-2);
    min-height: var(--ic-touch-min);
    font-size: var(--ic-text-sm);
    font-weight: 700;
    color: var(--ic-text-tertiary);
}

.dr-closed svg { flex-shrink: 0; }

/* El icono de WhatsApp es un <svg> inline, no un MudIcon: el icon-font de
   Material tiene métricas propias y 20px nominales no ocupan 20px reales. */
.dr-wa-icon {
    display: inline-flex;
    width: 20px;
    height: 20px;
    align-items: center;
    justify-content: center;
}
.dr-wa-icon svg { width: 20px; height: 20px; display: block; }

/* ── Dinero ── */

.dr-total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--ic-space-3);
}

.dr-total__n {
    font-size: var(--ic-text-2xl);
    font-weight: 800;
    letter-spacing: -0.02em;
}

.dr-total__r {
    font-size: var(--ic-text-sm);
    font-weight: 700;
    color: var(--lc-warn);
}
.dr-total__r--ok { color: var(--lc-ok); }

.dr-bar {
    height: 6px;
    border-radius: 999px;
    overflow: hidden;
    background: color-mix(in srgb, var(--ic-text) 12%, transparent);
}
.dr-bar__fill { height: 100%; background: var(--lc-ok); }

.dr-pay {
    display: flex;
    align-items: center;
    gap: var(--ic-space-3);
}

.dr-pay__t {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.dr-pay__n { font-size: var(--ic-text-sm); font-weight: 700; }
.dr-pay__m { font-size: var(--ic-text-xs); color: var(--ic-text-tertiary); }
.dr-pay__a {
    font-size: var(--ic-text-md);
    font-weight: 800;
    color: var(--lc-ok);
}
.dr-pay__a--warn { color: var(--lc-warn); }

/* El folio fiscal se puede seleccionar: es el dato que el cliente pide por
   WhatsApp. En monoespaciada porque se compara carácter a carácter. */
.dr-cfdi__uuid {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: var(--ic-text-xs);
    color: var(--ic-muted);
    word-break: break-all;
    user-select: all;
}

.dr-cfdi__aviso,
.dr-cfdi__error { font-size: var(--ic-text-sm); line-height: 1.35; }
.dr-cfdi__aviso { color: var(--lc-warn); }
.dr-cfdi__error { color: var(--lc-err); }
.dr-cfdi__reps  { font-size: var(--ic-text-xs); color: var(--ic-muted); }

/* ── Dirección y contacto ── */

.dr-addr {
    display: flex;
    align-items: flex-start;
    gap: var(--ic-space-3);
}

.dr-addr__ico {
    flex-shrink: 0;
    color: var(--ic-icon-muted);
    line-height: 0;
    padding-top: 2px;
}

.dr-addr__t {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.dr-addr__l1 {
    font-size: var(--ic-text-sm);
    font-weight: 500;
    line-height: 1.45;
    text-wrap: pretty;
}

.dr-addr__l2 {
    font-size: var(--ic-text-xs);
    color: var(--ic-muted);
    line-height: 1.45;
    text-wrap: pretty;
}

.dr-grid2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--ic-space-3);
}

.dr-field {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.dr-field__l {
    font-size: var(--ic-text-xs);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ic-text-tertiary);
}

.dr-field__v { font-size: var(--ic-text-md); font-weight: 700; }
.dr-field__v--ok { color: var(--lc-ok); }
.dr-field__m { font-size: var(--ic-text-xs); color: var(--ic-text-tertiary); }

.dr-contact {
    display: flex;
    align-items: center;
    gap: var(--ic-space-3);
}

.dr-contact__t {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

/* Tabular-nums y letter-spacing: un teléfono se lee dígito a dígito para
   marcarlo, no como palabra. */
.dr-contact__n {
    font-size: var(--ic-text-md);
    font-weight: 800;
    letter-spacing: 0.02em;
    font-variant-numeric: tabular-nums;
}

.dr-contact__m { font-size: var(--ic-text-xs); color: var(--ic-text-tertiary); }

/* ── Evidencia ── */

.dr-evi {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--ic-space-2);
}

.dr-evi__box {
    aspect-ratio: 1 / 1;
    border-radius: var(--ic-radius-sm);
    background: color-mix(in srgb, var(--ic-text) 8%, transparent);
    border: 1px solid var(--ic-border);
    color: var(--ic-icon-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.dr-evi__box img,
.dr-evi__box video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.dr-sign {
    height: 72px;
    border-radius: var(--ic-radius-sm);
    border: 1px dashed var(--ic-border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--ic-text-xs);
    color: var(--ic-text-tertiary);
    overflow: hidden;
}

/* La firma se captura en trazo oscuro sobre blanco; sobre el fondo del tema
   oscuro sería invisible, así que conserva su lienzo. */
.dr-sign img {
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
    background: var(--ic-canvas-firma);
    border-radius: var(--ic-radius-sm);
}

/* ── Estado vacío ── */

.dr-empty {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--ic-space-2);
    padding: var(--ic-space-4);
}

.dr-empty__t { font-size: var(--ic-text-sm); font-weight: 700; color: var(--ic-muted); }
.dr-empty__d {
    font-size: var(--ic-text-sm);
    color: var(--ic-text-tertiary);
    line-height: 1.45;
    text-wrap: pretty;
}

/* ── Ubicación en vivo ── */

.dr-map {
    height: 132px;
    border-radius: var(--ic-radius-sm);
    border: 1px solid var(--ic-border);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--ic-text-xs);
    color: var(--ic-text-tertiary);
}


/* ══════════════════════════════════════════════════════════════════════════
   3. CHAT DE LA RENTA  (componente ChatRenta)
   ══════════════════════════════════════════════════════════════════════════ */

.dr-msgs {
    display: flex;
    flex-direction: column;
    gap: var(--ic-space-2);
    max-height: 340px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.dr-msg {
    max-width: 84%;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--ic-space-2) var(--ic-space-3);
    border-radius: var(--ic-radius-md);
}

.dr-msg--them {
    align-self: flex-start;
    border-bottom-left-radius: 4px;
    background: var(--ic-surface-2);
    border: 1px solid var(--ic-border);
}

.dr-msg--me {
    align-self: flex-end;
    border-bottom-right-radius: 4px;
    background: color-mix(in srgb, var(--lc-accent) 16%, transparent);
    border: 1px solid color-mix(in srgb, var(--lc-accent) 34%, transparent);
}

.dr-msg__who { font-size: var(--ic-text-xs); font-weight: 700; color: var(--lc-accent); }
.dr-msg__d   { font-size: var(--ic-text-sm); line-height: 1.45; text-wrap: pretty; white-space: pre-wrap; }
.dr-msg__h   { align-self: flex-end; font-size: var(--ic-text-xs); color: var(--ic-text-tertiary); }

.dr-compose {
    display: flex;
    align-items: center;
    gap: var(--ic-space-2);
}

.dr-compose__f {
    flex: 1;
    min-width: 0;
    min-height: var(--ic-touch-min);
    border-radius: var(--ic-radius-md);
    border: 1px solid var(--ic-border);
    background: var(--ic-bg);
    color: var(--ic-text);
    display: flex;
    align-items: center;
    padding: 0 var(--ic-space-3);
    font-family: inherit;
    font-size: var(--ic-text-sm);
}

.dr-compose__f::placeholder { color: var(--ic-text-tertiary); }
.dr-compose__f:focus { outline: 2px solid color-mix(in srgb, var(--lc-accent) 55%, transparent); outline-offset: -1px; }

/* Lo que el mock no dibuja pero el chat sí tiene: separador de día, eventos
   automáticos, adjuntos y previsualización antes de enviar. */

.dr-chat__day {
    align-self: center;
    font-size: var(--ic-text-xs);
    color: var(--ic-text-tertiary);
    text-transform: capitalize;
    padding: 2px var(--ic-space-2);
    border-radius: 999px;
    background: var(--ic-surface-2);
    border: 1px solid var(--ic-border);
    margin: var(--ic-space-1) 0;
}

/* Los mensajes automáticos —«se registró un pago», «salió la cuadrilla»— van
   apagados: son el diario de la renta, no algo que alguien te esté diciendo. */
.dr-msg--auto .dr-msg__d { color: var(--ic-muted); }

.dr-chat__event { display: flex; align-items: flex-start; gap: 6px; }
.dr-chat__event-icon { opacity: .85; margin-top: 1px; }

.dr-chat__img-link { display: block; margin-top: var(--ic-space-1); }

.dr-chat__img {
    display: block;
    max-width: 220px;
    max-height: 240px;
    border-radius: var(--ic-radius-sm);
    object-fit: cover;
}

/* La firma se traza en oscuro sobre blanco: sin su lienzo, en tema oscuro no se ve. */
.dr-chat__img--firma {
    background: var(--ic-canvas-firma);
    object-fit: contain;
    padding: 4px;
}

.dr-chat__file {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: var(--ic-space-1);
    font-size: var(--ic-text-sm);
    color: inherit;
    text-decoration: underline;
}

.dr-chat__preview {
    display: flex;
    align-items: center;
    gap: var(--ic-space-2);
    padding: var(--ic-space-1) var(--ic-space-2);
    background: var(--ic-surface-2);
    border: 1px solid var(--ic-border);
    border-radius: var(--ic-radius-sm);
}

.dr-chat__preview-img { width: 40px; height: 40px; object-fit: cover; border-radius: 6px; }
.dr-chat__preview-name {
    flex: 1 1 auto;
    min-width: 0;
    font-size: var(--ic-text-sm);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 600px) {
    .dr-msg { max-width: 90%; }
    .dr-chat__img { max-width: 160px; }
}


/* ══════════════════════════════════════════════════════════════════════════
   4. HOJA DE HISTORIAL  (HistorialRentaDialog)
   SIN acotar a .dr-page-container: MudBlazor renderiza el diálogo en su
   portal, a nivel de <body>, fuera del contenedor de la página.
   ══════════════════════════════════════════════════════════════════════════ */

/* El diálogo de MudBlazor, convertido en hoja: sube desde abajo y toca los dos
   filos en móvil. Se estiliza el .mud-dialog directamente porque su chrome
   (padding del título, borde, radio) es lo que hay que anular; los selectores
   llevan .dr-sheet-dialog para no tocar ningún otro diálogo de la app. */
.mud-dialog.dr-sheet-dialog {
    margin-top: auto;
    margin-bottom: 0;
    width: 100%;
    background: var(--ic-surface);
    border: 1px solid var(--ic-border);
    border-bottom: 0;
    border-radius: var(--ic-radius-lg) var(--ic-radius-lg) 0 0;
    overflow: hidden;
}

.mud-dialog.dr-sheet-dialog .mud-dialog-title {
    padding: 0;
    margin: 0;
}

.mud-dialog.dr-sheet-dialog .mud-dialog-content {
    padding: 0;
    max-height: min(70vh, 560px);
    overflow-y: auto;
}

/* Las acciones traen su propio pie a lo ancho; el gutter de MudBlazor lo
   desplazaba y le metía un gap entre botones que no es el del sistema. */
.mud-dialog.dr-sheet-dialog .mud-dialog-actions {
    padding: 0;
    margin: 0;
    gap: 0;
}

@media (min-width: 600px) {
    /* En escritorio no hay «abajo» que valga: vuelve a ser una tarjeta centrada,
       pero conserva la agarradera y el riel, que es lo que se vino a ver. */
    .mud-dialog.dr-sheet-dialog {
        margin-block: auto;
        border-bottom: 1px solid var(--ic-border);
        border-radius: var(--ic-radius-lg);
    }
}

.dr-sheet {
    margin-top: auto;
    background: var(--ic-surface);
    border-top: 1px solid var(--ic-border);
    border-radius: var(--ic-radius-lg) var(--ic-radius-lg) 0 0;
    display: flex;
    flex-direction: column;
}

.dr-sheet__grab {
    width: 36px;
    height: 4px;
    border-radius: 999px;
    margin: var(--ic-space-2) auto 0;
    background: var(--ic-border);
}

.dr-sheet__head {
    display: flex;
    align-items: center;
    gap: var(--ic-space-2);
    padding: var(--ic-space-2) var(--ic-space-3) var(--ic-space-3);
}

.dr-sheet__t {
    flex: 1;
    min-width: 0;
    padding-left: var(--ic-space-1);
    font-size: var(--ic-text-lg);
    font-weight: 700;
}

.dr-sheet__body {
    padding: 0 var(--ic-space-4) var(--ic-space-4);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

/* ── Elegir equipo (EditarEquipoAsignacionDialog) ──────────────────────────
   La hoja que se abre desde la franja del pie. Toda la fila es el control: un
   checkbox de 18px es un blanco imposible con guantes y a pleno sol, y era lo
   que este diálogo pedía apuntar. */

.dr-team__intro {
    display: flex;
    flex-direction: column;
    gap: var(--ic-space-1);
    padding: 0 var(--ic-space-4) var(--ic-space-3);
}

.dr-team {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--ic-border);
    max-height: min(52vh, 420px);
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* Reset del <button>: hereda la fila, no el chrome del navegador. */
.dr-team__row {
    width: 100%;
    border: 0;
    border-bottom: 1px solid var(--ic-border);
    background: transparent;
    color: inherit;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    align-items: center;
}

.dr-team__row:hover { background: color-mix(in srgb, var(--ic-text) 5%, transparent); }
.dr-team__row:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--lc-accent) 60%, transparent);
    outline-offset: -2px;
}

/* Seleccionado: fondo del acento y no sólo un borde. El borde de 2px que había
   antes desplazaba la fila un pixel al marcarla, y la lista entera temblaba. */
.dr-team__row--on { background: color-mix(in srgb, var(--lc-accent) 14%, transparent); }
.dr-team__row--on:hover { background: color-mix(in srgb, var(--lc-accent) 20%, transparent); }

.dr-team__avatar {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 50%;
    background: color-mix(in srgb, var(--ic-text) 10%, transparent);
    color: var(--ic-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--ic-text-md);
    font-weight: 800;
}

.dr-team__row--on .dr-team__avatar {
    background: var(--lc-accent);
    color: var(--ic-bg);
}

/* Palomita en su hueco fijo: sin él, la fila se reacomoda al marcarla. */
.dr-team__check {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ic-bg);
    background: transparent;
    border: 2px solid var(--ic-border);
}

.dr-team__row--on .dr-team__check {
    background: var(--lc-accent);
    border-color: var(--lc-accent);
}

/* El correo es un dato de desempate, no algo que se lea: nunca parte la fila. */
.dr-team__row .dr-row__sub {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Intento de guardar sin nadie: se marca la lista, no un mensaje aparte. */
.dr-team--falta {
    border-top-color: var(--lc-err);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--lc-err) 45%, transparent);
}

.dr-team__foot {
    display: flex;
    align-items: center;
    gap: var(--ic-space-2);
    width: 100%;
    padding: var(--ic-space-3) var(--ic-space-4);
    border-top: 1px solid var(--ic-border);
}

.dr-team__foot .dr-btn { min-height: 52px; }

.dr-team__count {
    flex: 1;
    min-width: 0;
    font-size: var(--ic-text-xs);
    font-weight: 700;
    color: var(--ic-text-tertiary);
}

/* A 390px el conteo y los dos botones no caben en una línea: el conteo se va
   arriba a lo ancho y los botones se reparten abajo. */
@media (max-width: 419px) {
    .dr-team__foot { flex-wrap: wrap; }
    .dr-team__count { flex: 1 0 100%; }
}

/* ── Riel de hitos ── */

.dr-mile { display: flex; gap: var(--ic-space-3); }

.dr-mile__rail {
    width: 16px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.dr-mile__dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid var(--ic-border);
    background: var(--ic-surface);
    flex-shrink: 0;
    margin-top: 4px;
}

.dr-mile__dot--on   { border-color: var(--lc-ok);     background: var(--lc-ok); }
.dr-mile__dot--now  { border-color: var(--lc-accent); background: var(--lc-accent); }
.dr-mile__dot--warn { border-color: var(--lc-warn);   background: var(--lc-warn); }
.dr-mile__dot--err  { border-color: var(--lc-err);    background: var(--lc-err); }

.dr-mile__line {
    flex: 1;
    width: 2px;
    background: var(--ic-border);
    min-height: 14px;
}

.dr-mile__body {
    flex: 1;
    min-width: 0;
    padding-bottom: var(--ic-space-3);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.dr-mile:last-child .dr-mile__body { padding-bottom: 0; }

.dr-mile__t   { font-size: var(--ic-text-sm); font-weight: 700; }
.dr-mile__who { font-size: var(--ic-text-sm); color: var(--ic-muted); }
.dr-mile__m   { font-size: var(--ic-text-xs); color: var(--ic-text-tertiary); }


/* ══════════════════════════════════════════════════════════════════════════
   5. MENÚ ⋮  (MudMenu del PageHeader — se renderiza en el portal)
   ══════════════════════════════════════════════════════════════════════════ */

.dr-menu-item {
    display: flex;
    align-items: center;
    gap: var(--ic-space-2);
    font-size: var(--ic-text-md);
    line-height: 1.35;
}

.dr-menu-item--danger,
.dr-menu-item--danger .mud-icon-root { color: var(--lc-err); font-weight: 600; }

.dr-menu-section {
    padding: var(--ic-space-2) var(--ic-space-4) var(--ic-space-1);
    font-size: var(--ic-text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ic-text-tertiary);
    pointer-events: none;
}

.dr-menu-divider { margin: var(--ic-space-1) 0; }


/* ══════════════════════════════════════════════════════════════════════════
   6. ESTADOS DE CARGA Y ERROR
   El mock no los dibuja —no son diseño, son el hueco mientras llega la API—
   pero tienen que existir o la pantalla salta al cargar.
   ══════════════════════════════════════════════════════════════════════════ */

.dr-header-skeleton {
    display: flex;
    align-items: center;
    gap: var(--ic-space-3);
    margin-bottom: var(--ic-space-5);
}

.dr-sk-back {
    width: 36px;
    height: 36px;
    border-radius: var(--ic-radius-sm);
    background: color-mix(in srgb, var(--ic-text) 10%, transparent);
    flex-shrink: 0;
    animation: ic-pulse 1.5s ease-in-out infinite;
}

.dr-sk-title {
    width: 200px;
    height: 22px;
    border-radius: 6px;
    background: color-mix(in srgb, var(--ic-text) 10%, transparent);
    animation: ic-pulse 1.5s ease-in-out infinite;
}

.dr-skeleton-card {
    background: var(--ic-surface);
    border: 1px solid var(--ic-border);
    border-radius: var(--ic-radius-md);
    padding: var(--ic-space-4);
    margin-bottom: var(--ic-space-4);
    display: flex;
    flex-direction: column;
    gap: var(--ic-space-2);
    animation: ic-pulse 1.5s ease-in-out infinite;
}

.dr-sk-line         { border-radius: 6px; background: color-mix(in srgb, var(--ic-text) 8%, transparent); }
.dr-sk-line--title  { height: 14px; width: 45%; }
.dr-sk-line--wide   { height: 11px; width: 80%; }
.dr-sk-line--mid    { height: 11px; width: 60%; }
.dr-sk-line--narrow { height: 11px; width: 40%; }

.dr-not-found {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--ic-space-6) var(--ic-space-4);
    gap: var(--ic-space-2);
}

.dr-not-found__icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--ic-text) 6%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--ic-space-1);
}

.dr-not-found__title {
    margin: 0;
    font-size: var(--ic-text-lg);
    font-weight: 600;
    color: var(--ic-text);
}

.dr-not-found__sub {
    margin: 0;
    font-size: var(--ic-text-sm);
    color: var(--ic-muted);
    line-height: 1.5;
}

.dr-not-found__btn {
    margin-top: var(--ic-space-1);
    border-radius: var(--ic-radius-md) !important;
}

/* ── Corregir el importe de un pago ───────────────────────────────────────────
   El diálogo vive en Pages/Dialogs/CorregirPagoDialog.razor y su CSS aquí, no en
   un <style> dentro del .razor: esos bloques no tienen scope y un selector suelto
   restilaría todo lo que la página abre.
   Nada de hex: --ic-* y --lc-* voltean solos con data-theme. */

.cp-ctx {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--ic-space-2);
    border-radius: var(--ic-radius-md);
    background: var(--ic-surface-2);
}

.cp-saldo {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--ic-space-1);
    font-size: var(--ic-text-sm);
    color: var(--ic-muted);
}
.cp-saldo strong {
    font-size: var(--ic-text-md);
    font-weight: 800;
    color: var(--ic-text);
}

/* Marca de enmienda bajo la línea del movimiento. Deliberadamente en voz baja: es
   un dato de bitácora, no una alerta — que un pago se haya corregido no es un
   problema, es el sistema funcionando. */
.dr-pay__fix {
    font-size: var(--ic-text-xs);
    color: var(--ic-muted);
    font-style: italic;
}

/* ── Corregir cantidades entregadas/recogidas ──────────────────────────────────
   Reparto por color dentro del diálogo de corrección. Reusa .cp-ctx y .cp-saldo
   (el contexto en frío y la previsualización) porque son el mismo gesto que
   corregir un pago: enseñar lo que hay, lo que quedaría, y pedir el motivo.
   Nada de hex: --ic-* voltea solo con data-theme. */

.ce-colores {
    display: flex;
    flex-direction: column;
    gap: var(--ic-space-2);
}

.ce-color {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ic-space-2);
    /* El mínimo táctil va en la FILA y no solo en el campo: en el teléfono se toca
       el renglón del color, no el recuadro del número. */
    min-height: var(--ic-touch-min);
}

.ce-color__id {
    display: flex;
    align-items: center;
    gap: var(--ic-space-1);
    min-width: 0;
    flex: 1 1 auto;
}

.ce-color__nombre {
    font-size: var(--ic-text-sm);
    color: var(--ic-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* El tope contratado de ese color, en voz baja: es el límite, no el dato. */
.ce-color__tope {
    font-size: var(--ic-text-xs);
    color: var(--ic-muted);
    white-space: nowrap;
}

.ce-color__campo {
    flex: 0 0 auto;
    width: 104px;
}

/* El total NO se teclea: se deriva de la suma por color. Se pinta como resultado
   —no como campo— para que se lea que depende de los de arriba. */
.ce-total {
    display: flex;
    align-items: baseline;
    justify-content: flex-end;
    gap: var(--ic-space-1);
    margin-top: var(--ic-space-2);
    padding-top: var(--ic-space-2);
    border-top: 1px solid var(--ic-border);
    font-size: var(--ic-text-sm);
    color: var(--ic-muted);
}
.ce-total strong {
    font-size: var(--ic-text-md);
    font-weight: 800;
    color: var(--ic-text);
}