/* ============================================================================
   REGISTRAR ENTREGA / RECOLECCIÓN — /registrar-entrega/{id}/{tipo}
   ============================================================================
   Prefijo .re-*. Estaban dentro de un <style> en RegistrarEntrega.razor: ese
   bloque no tiene scope y el banco de /_bench no podía reproducir la pantalla,
   que es lo que hacía falta para comparar su ancho con /rentas/{id}.

   El canalón lateral y el arranque superior NO están aquí: los pone
   .ic-page-gutter (app.css), compartida con /rentas/{id}, /productos/{id} y
   /asignar-renta, para que las cuatro no puedan desincronizarse.
   ========================================================================== */

:root {
    /* Verde de acción del CTA, no el --lc-ok de estado: ése es claro en tema
       oscuro y dejaba el texto blanco por debajo del contraste mínimo. El par se
       lee igual en los dos temas, por eso no tiene variante clara. Aquí es una
       DECLARACIÓN de token, que es el único sitio donde un hex es legítimo. */
    --re-confirmar-bg:       #1D8E51;
    --re-confirmar-bg-hover: #187844;
    --re-confirmar-fg:       #FFFFFF;

    /* Inicial sobre la pastilla de color: contrasta con el SWATCH, no con el
       tema, así que tampoco voltea. */
    --re-swatch-ink:         #475569;
}

/* Todo el color sale de tokens --ic-* / --lc-*: un hex fijo de tema oscuro
   dejaría esta pantalla como isla negra en tema claro. */

/* Skeletons. El @keyframes ic-pulse vive en app.css: lo usan también
   /productos/{id} y /rentas/{id}, así que tenerlo aquí lo duplicaba. */
.re-header-sk {
    width: 200px; height: 28px; border-radius: var(--ic-radius-sm);
    background: rgba(var(--lc-neutral-rgb), .16);
    margin-bottom: var(--ic-space-4);
    animation: ic-pulse 1.5s ease-in-out infinite;
}

.re-sk-card {
    background: var(--ic-surface);
    border: 1px solid var(--ic-border);
    border-radius: var(--ic-radius-lg);
    margin-bottom: var(--ic-space-3);
    animation: ic-pulse 1.5s ease-in-out infinite;
}

/* Píldora del tipo, en el slot Actions del PageHeader */
.re-tipo {
    display: inline-block;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: var(--ic-text-sm);
    font-weight: 800;
    white-space: nowrap;
}

.re-tipo--entrega  { background: rgba(var(--lc-accent-rgb), .16); color: var(--lc-accent); }
.re-tipo--recogida { background: rgba(var(--lc-purple-rgb), .16); color: var(--lc-purple); }

/* ── Tarjeta ─────────────────────────────────────────────────────────── */
.re-card {
    background: var(--ic-surface);
    border: 1px solid var(--ic-border);
    border-radius: var(--ic-radius-lg);
    overflow: hidden;
    margin-bottom: var(--ic-space-3);
}

.re-card--alerta { border-color: rgba(var(--lc-warn-rgb), .5); }

.re-card__head {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 12px 13px 10px;
}

.re-card__title {
    flex: 1;
    min-width: 0;
    font-size: var(--ic-text-lg);
    font-weight: 800;
    letter-spacing: -.01em;
    color: var(--ic-text);
}

.re-card__meta {
    flex-shrink: 0;
    font-size: var(--ic-text-sm);
    font-weight: 600;
    color: var(--ic-text-tertiary);
}

.re-card__seccion {
    padding: 12px 13px 6px;
    font-size: var(--ic-text-xs);
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ic-text-tertiary);
}

/* Cuadro de ícono de sección */
.re-ico {
    width: 32px; height: 32px;
    flex-shrink: 0;
    border-radius: var(--ic-radius-sm);
    display: flex; align-items: center; justify-content: center;
}

.re-ico .mud-icon-root { font-size: 1.15rem; }
.re-ico--accent  { background: rgba(var(--lc-accent-rgb), .14);  color: var(--lc-accent); }
.re-ico--purple  { background: rgba(var(--lc-purple-rgb), .14);  color: var(--lc-purple); }
.re-ico--teal    { background: rgba(var(--lc-teal-rgb), .14);    color: var(--lc-teal); }
.re-ico--ok      { background: rgba(var(--lc-ok-rgb), .14);      color: var(--lc-ok); }
.re-ico--warn    { background: rgba(var(--lc-warn-rgb), .14);    color: var(--lc-warn); }
.re-ico--neutral { background: rgba(var(--lc-neutral-rgb), .16); color: var(--lc-neutral); }

/* Píldora de contador/estado */
.re-pill {
    flex-shrink: 0;
    font-size: var(--ic-text-sm);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--ic-muted);
    background: rgba(var(--lc-neutral-rgb), .16);
    padding: 4px 11px;
    border-radius: 999px;
}

.re-pill--warn { background: rgba(var(--lc-warn-rgb), .14); color: var(--lc-warn); }
.re-pill--ok   { background: rgba(var(--lc-ok-rgb), .14);   color: var(--lc-ok); }

/* ── Cabecera plegable ───────────────────────────────────────────────── */
.re-collapse {
    width: 100%;
    min-height: 60px;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 11px 13px;
    background: transparent;
    border: 0;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    color: inherit;
}

.re-collapse:hover { background: var(--ic-interactive-hover); }
.re-collapse--acc { min-height: 58px; }

.re-collapse__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.re-collapse__title {
    font-size: var(--ic-text-base);
    font-weight: 700;
    color: var(--ic-text);
    overflow-wrap: anywhere;
}

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

.re-chev {
    flex-shrink: 0;
    color: var(--ic-icon-muted);
    transition: transform .18s ease;
}

.re-chev--on { transform: rotate(180deg); }

/* Cuerpo desplegado */
.re-panel {
    padding: 0 13px 13px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.re-collapse + .re-panel {
    border-top: 1px solid var(--ic-border);
    padding-top: 12px;
}

/* Línea de dato dentro de un panel */
.re-linea {
    display: flex;
    gap: 9px;
    align-items: flex-start;
    font-size: var(--ic-text-md);
    color: var(--ic-muted);
    line-height: 1.45;
}

.re-linea__ico { flex-shrink: 0; margin-top: 2px; color: var(--ic-icon-muted); font-size: 1.1rem !important; }
.re-linea--aviso .re-linea__ico { color: var(--lc-warn); }
.re-linea__nota { font-style: normal; font-size: var(--ic-text-sm); color: var(--lc-warn); }

/* Procedencia de una cifra ("salieron 40, dejaste 10"). Deliberadamente NO usa .re-linea__nota:
   aquélla es ámbar porque señala avisos, y esto es trazabilidad neutra — teñirla de ámbar haría
   leer un problema donde sólo se está explicando de dónde sale el número. */
.re-linea__origen {
    font-style: normal;
    font-size: var(--ic-text-sm);
    color: var(--ic-text-tertiary);
}

/* ── Botones ─────────────────────────────────────────────────────────── */
.re-btn {
    min-height: 52px;
    border-radius: var(--ic-radius-md);
    font-family: inherit;
    font-size: var(--ic-text-md);
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 14px;
    cursor: pointer;
    text-decoration: none;
    border: 0;
    background: transparent;
}

.re-btn .mud-icon-root { font-size: 1.25rem; }
.re-btn:disabled { opacity: .6; cursor: default; }

.re-btn--ghost {
    border: 1px solid var(--ic-border);
    color: var(--ic-muted);
}

.re-btn--ghost:hover:not(:disabled) { background: var(--ic-interactive-hover); }

.re-btn--peligro {
    border: 1px solid rgba(var(--lc-err-rgb), .4);
    color: var(--lc-err);
}

.re-btn--peligro:hover { background: rgba(var(--lc-err-rgb), .1); }

.re-btn--firmar {
    width: 100%;
    min-height: 64px;
    border: 1px dashed rgba(var(--lc-purple-rgb), .55);
    background: rgba(var(--lc-purple-rgb), .08);
    color: var(--lc-purple);
    font-size: var(--ic-text-base);
}

.re-btn--firmar:hover { background: rgba(var(--lc-purple-rgb), .16); }

.re-btn--cobrar {
    width: 100%;
    min-height: 54px;
    border: 1px solid rgba(var(--lc-warn-rgb), .45);
    background: rgba(var(--lc-warn-rgb), .12);
    color: var(--lc-warn);
    font-size: var(--ic-text-base);
}

.re-btn--cobrar:hover { background: rgba(var(--lc-warn-rgb), .2); }

/* Dos botones a lo ancho; con uno solo, ocupa toda la fila */
.re-duo {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    gap: 8px;
}

/* ── Banners ─────────────────────────────────────────────────────────── */
.re-banner {
    display: flex;
    align-items: center;
    gap: 9px;
    border-radius: var(--ic-radius-md);
    padding: 10px 12px;
    font-size: var(--ic-text-sm);
    line-height: 1.4;
}

.re-banner .mud-icon-root { flex-shrink: 0; font-size: 1.1rem; }
.re-banner--ok    { background: rgba(var(--lc-ok-rgb), .1);  border: 1px solid rgba(var(--lc-ok-rgb), .28);  color: var(--lc-ok); }
.re-banner--error { background: rgba(var(--lc-err-rgb), .1); border: 1px solid rgba(var(--lc-err-rgb), .28); color: var(--lc-err); }

.re-hint {
    font-size: var(--ic-text-sm);
    color: var(--ic-text-tertiary);
    margin: 0 0 10px;
    line-height: 1.45;
}

.re-field-full { width: 100% !important; max-width: 100% !important; }

/* ── Barra de progreso del checklist ─────────────────────────────────── */
.re-progress-bar {
    height: 5px;
    background: rgba(var(--lc-neutral-rgb), .2);
    margin: 0 13px 10px;
    border-radius: 4px;
    overflow: hidden;
}

.re-progress-bar__fill { height: 100%; background: var(--lc-accent); transition: width .25s ease; }
.re-progress-bar__fill--purple { background: var(--lc-purple); }

/* ── Lavado: una fila por producto con segmentado ────────────────────── */
.re-lav { display: flex; flex-direction: column; gap: 6px; }
.re-lav__nombre { font-size: var(--ic-text-md); font-weight: 700; color: var(--ic-text); }
.re-seg { display: flex; gap: 6px; flex-wrap: wrap; }

.re-seg__opt {
    flex: 1 1 0;
    min-width: 96px;
    min-height: 44px;
    padding: 0 10px;
    border-radius: 10px;
    border: 1px solid var(--ic-border);
    background: var(--ic-surface-2);
    color: var(--ic-muted);
    font-family: inherit;
    font-size: var(--ic-text-sm);
    font-weight: 700;
    cursor: pointer;
}

.re-seg__opt--on {
    border-color: rgba(var(--lc-accent-rgb), .6);
    background: rgba(var(--lc-accent-rgb), .16);
    color: var(--lc-accent);
}

/* ── Acordeón «Opcional» ─────────────────────────────────────────────── */
.re-acc + .re-acc,
.re-card__seccion + .re-acc { border-top: 1px solid var(--ic-border); }

.re-acc__estado {
    flex-shrink: 0;
    font-size: var(--ic-text-sm);
    font-weight: 600;
    color: var(--ic-text-tertiary);
}

.re-acc__estado--ok { color: var(--lc-ok); }

/* ── Cobro ───────────────────────────────────────────────────────────── */
.re-money {
    display: flex;
    flex-direction: column;
    gap: 1px;
    border-radius: var(--ic-radius-md);
    overflow: hidden;
    border: 1px solid var(--ic-border);
}

.re-money__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 11px 13px;
    background: var(--ic-surface-2);
}

.re-money__row--total { padding: 13px; }
.re-money__row--warn { background: rgba(var(--lc-warn-rgb), .1); }
.re-money__label { font-size: var(--ic-text-md); color: var(--ic-muted); }

.re-money__val {
    font-size: var(--ic-text-base);
    font-weight: 700;
    /* 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(--ic-text);
}

.re-money__val--grande { font-size: var(--ic-text-xl); font-weight: 800; }
.re-money__val--ok   { color: var(--lc-ok); }
.re-money__val--warn { color: var(--lc-warn); }

/* ── Firma ───────────────────────────────────────────────────────────── */
/* Fondo blanco fijo a propósito: es papel, no superficie de la app. */
.re-firma-preview {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    border-radius: var(--ic-radius-md);
    background: #fff;
}

.re-firma-preview img { height: 64px; width: auto; max-width: 100%; object-fit: contain; }

/* ── Barra fija de confirmación ──────────────────────────────────────── */
/* La superficie y la posición de .re-sticky-confirm viven en app.css (junto
   a la regla que oculta la BottomNav); aquí sólo el contenido. No hace falta
   spacer: al ser sticky ocupa su sitio en el flujo y su margen superior ya
   separa la última tarjeta. */
/* Aviso de piezas sin marcar. Es un botón y no un texto: decía cuántas
   faltan pero no CUÁLES, y encontrarlas en una lista de catorce era el
   trabajo. Ahora enseña las miniaturas reales del catálogo y al tocarlo
   desplaza a la primera. Una línea más de alto, no cuatro: esta barra es
   sticky y oculta la BottomNav, así que el alto aquí es caro. */
.re-faltan {
    display: flex;
    align-items: center;
    gap: var(--ic-space-2);
    width: 100%;
    min-height: var(--ic-touch-min);
    margin-bottom: var(--ic-space-2);
    padding: var(--ic-space-2) var(--ic-space-3);
    border-radius: var(--ic-radius-md);
    background: rgba(var(--lc-warn-rgb), .10);
    border: 1px solid rgba(var(--lc-warn-rgb), .45);
    color: var(--lc-warn);
    font-family: inherit;
    text-align: left;
    cursor: pointer;
}

.re-faltan:hover { background: rgba(var(--lc-warn-rgb), .16); }

.re-faltan__thumbs { display: flex; align-items: center; flex-shrink: 0; }

/* Solapadas: cuatro miniaturas sueltas se comen el ancho del texto. */
.re-faltan__thumb + .re-faltan__thumb { margin-left: -8px; }

.re-faltan__thumb {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--ic-surface-2);
    border: 1px solid rgba(var(--lc-warn-rgb), .45);
}

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

.re-faltan__thumb--mas {
    font-size: var(--ic-text-xs);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    background: rgba(var(--lc-warn-rgb), .18);
    width: auto;
    min-width: 28px;
    padding: 0 5px;
}

/* La cuenta no se solapa: encima de una miniatura clara deja de leerse. Va después
   y con la misma especificidad que la regla de solape, que si no gana por orden. */
.re-faltan__thumb + .re-faltan__thumb--mas { margin-left: var(--ic-space-1); }

.re-faltan__dot { width: 20px; height: 20px; border-radius: 50%; display: block; }
.re-faltan__dot--claro { border: 1px solid var(--ic-border); }

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

.re-faltan__n { font-size: var(--ic-text-sm); font-weight: 700; }

/* Los nombres, que es lo que el aviso viejo nunca dijo. Una línea: si no
   caben, el "y N más" ya lleva la cuenta. */
.re-faltan__sub {
    font-size: var(--ic-text-xs);
    font-weight: 500;
    color: var(--ic-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.re-faltan__ir { flex-shrink: 0; font-size: 1.1rem; }


.re-action-row { display: flex; gap: 10px; align-items: stretch; }

/* Mismo alto que la fila del encabezado, por los mismos tokens: así las dos
   barras miden lo mismo por construcción y no por coincidencia. */
.re-btn--cancelar,
.re-btn--confirmar { min-height: var(--ic-page-header-touch-min-desktop); }

.re-btn--cancelar { width: 110px; flex-shrink: 0; }

/* Verde de acción, no el --lc-ok de estado: ese es claro en tema oscuro y
   dejaba el texto blanco del CTA por debajo del contraste mínimo. Este par
   se lee igual en ambos temas, por eso es el mismo valor en los dos. */
.re-btn--confirmar {
    flex: 1;
    border-radius: 13px;
    background: var(--re-confirmar-bg);
    color: var(--re-confirmar-fg);
    font-size: var(--ic-text-lg);
    font-weight: 800;
}

.re-btn--confirmar:hover:not(:disabled) { background: var(--re-confirmar-bg-hover); }
.re-btn--confirmar:disabled { opacity: .7; }

/* ── Checklist: look nuevo sólo dentro de esta pantalla ──────────────── */
/* Opt-in por contenedor .re-cl: ChecklistItemCard lo comparte el Checklist
   de carga en almacén, que no se redisena aquí. */
.re-cl .cl-card {
    border-radius: var(--ic-radius-md);
    padding: 10px 11px;
}

.re-cl .cl-card__check {
    width: 34px;
    height: 34px;
    border-radius: 9px;
}

.re-cl .cl-stepper__btn,
.re-cl .cl-stepper__val {
    min-width: 46px;
    min-height: 46px;
    border-radius: 11px;
}

.re-cl .cl-stepper__val { min-width: 52px; }

/* Entrega: bloque inline de instalación dentro del card */
.re-entrega-inst {
    margin-top: 6px;
    padding: 8px 10px;
    border-radius: 10px;
    background: rgba(var(--lc-accent-rgb), .07);
    border: 1px solid rgba(var(--lc-accent-rgb), .22);
}

.re-entrega-inst__row { display: flex; align-items: center; gap: 8px; margin-top: 4px; flex-wrap: wrap; }
.re-entrega-inst__row + .re-entrega-inst__row { margin-top: 6px; }

/* Tipo que queda en 0: se ve de un vistazo cuál no se dejó / no se recogió. */
.re-entrega-inst__row--pendiente {
    background: rgba(var(--lc-warn-rgb), .09);
    border: 1px solid rgba(var(--lc-warn-rgb), .45);
    border-radius: 10px;
    padding: 4px 8px;
    margin-left: -8px;
    margin-right: -8px;
}

.re-entrega-inst__tipo { font-size: var(--ic-text-md); font-weight: 600; flex: 1; min-width: 80px; }
.re-entrega-inst__max { font-size: var(--ic-text-md); color: var(--ic-text-tertiary); font-variant-numeric: tabular-nums; }

/* Stepper compacto por-tipo (recolección): a la derecha y a la medida del celular */
.re-entrega-inst__row .cl-stepper--inline { margin-left: auto; margin-top: 0; gap: 4px; flex-wrap: nowrap; }

.re-entrega-inst__row .cl-stepper--inline .cl-stepper__btn,
.re-entrega-inst__row .cl-stepper--inline .cl-stepper__val {
    min-width: 42px;
    min-height: 42px;
    border-radius: 10px;
    padding: 0 6px;
}

.re-entrega-inst__row .cl-stepper--inline .cl-stepper__val { min-width: 52px; font-size: 1rem; }

.re-entrega-inst__thumb {
    width: 32px; height: 32px;
    border-radius: 6px;
    object-fit: cover;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--ic-surface-2);
    flex-shrink: 0;
    color: var(--lc-warn);
}

.re-entrega-inst__thumb--placeholder { border: 1px dashed var(--ic-border); }

/* Desglose por color (manteles): dot circular en lugar del thumbnail */
.re-color-dot {
    border-radius: 50% !important;
    border: 1px solid rgba(var(--lc-neutral-rgb), .5);
}

.re-color-dot--claro { border-color: rgba(var(--lc-neutral-rgb), .7); }
.re-color-dot__inicial { font-size: .72rem; font-weight: 700; color: var(--re-swatch-ink); }

@media (max-width: 959px) {
    .re-btn--cancelar,
    .re-btn--confirmar { min-height: var(--ic-page-header-touch-min); }
}

@media (max-width: 480px) {
    /* «Confirmar entrega» debe caber en una línea junto a Cancelar. */
    .re-btn--cancelar { width: 88px; padding: 0 8px; }
    .re-btn--confirmar { font-size: var(--ic-text-base); padding: 0 10px; }
    .re-seg__opt { min-width: 84px; }
}

/* ── Aviso ilustrado de piezas sin cerrar (FaltantesChecklistDialog) ──────
   Prefijo propio `fx-` para no chocar con `re-` (esta pantalla), `cl-` (la
   tarjeta del checklist) ni `cc-`/`cruta-` (los diálogos de carga). Vive en
   esta hoja —y no en un <style> del .razor— porque el banco solo reproduce
   lo que está en una hoja, y porque un selector suelto ahí restilaría los
   demás diálogos que la pantalla abre.
   El ámbar entra UNA vez, en .fx-escena, y el SVG lo hereda por
   currentColor: así el dibujo voltea con el tema sin duplicar el token. */
.fx-dlg-content { padding-top: var(--ic-space-2); }

.fx-escena {
    display: flex;
    justify-content: center;
    color: var(--lc-warn);
    margin-bottom: var(--ic-space-3);
}

.fx-escena__svg {
    width: 100%;
    max-width: 210px;
    height: auto;
}

.fx-explica {
    margin: 0 0 var(--ic-space-3);
    font-size: var(--ic-text-md);
    line-height: 1.45;
    color: var(--ic-text);
    text-wrap: pretty;
}

.fx-lista {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--ic-space-2);
    /* Seis filas caben en un celular; a partir de ahí la lista rueda por
       dentro en vez de empujar los botones fuera de pantalla. */
    max-height: 46vh;
    overflow-y: auto;
}

.fx-item {
    display: flex;
    align-items: center;
    gap: var(--ic-space-3);
    padding: var(--ic-space-2) var(--ic-space-3);
    border-radius: var(--ic-radius-md);
    background: rgba(var(--lc-warn-rgb), .09);
    border: 1px solid rgba(var(--lc-warn-rgb), .3);
}

.fx-item__thumb {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: var(--ic-radius-sm);
    overflow: hidden;
    background: var(--ic-surface-2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

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

.fx-item__dot {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Un blanco o un beige sobre superficie clara desaparece sin contorno. */
.fx-item__dot--claro { border: 1px solid var(--ic-border); }

.fx-item__inicial { font-size: var(--ic-text-xs); font-weight: 700; color: var(--re-swatch-ink); }

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

.fx-item__nombre {
    font-size: var(--ic-text-md);
    font-weight: 600;
    color: var(--ic-text);
    overflow-wrap: anywhere;
}

.fx-item__detalle { font-size: var(--ic-text-sm); color: var(--lc-warn); font-weight: 600; }

.fx-mas {
    margin: var(--ic-space-2) 0 0;
    font-size: var(--ic-text-sm);
    color: var(--ic-muted);
}

/* Botones propios y no MudButton: aquí el que manda es "Revisar", y el orden
   y el peso tienen que decirlo sin depender de la jerarquía de Mud. */
.fx-btn {
    min-height: var(--ic-touch-min);
    padding: 0 var(--ic-space-4);
    border-radius: var(--ic-radius-md);
    font-size: var(--ic-text-md);
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ic-space-2);
}

.fx-btn--revisar {
    background: transparent;
    color: var(--ic-text);
    border: 1px solid var(--ic-border-strong, var(--ic-border));
}

.fx-btn--revisar:hover { background: var(--ic-surface-2); }

/* El camino de riesgo va en ámbar y sin relleno sólido: se ve, pero no es el
   botón que la mano toma por inercia. */
.fx-btn--seguir {
    background: rgba(var(--lc-warn-rgb), .16);
    color: var(--lc-warn);
    border: 1px solid rgba(var(--lc-warn-rgb), .55);
}

.fx-btn--seguir:hover { background: rgba(var(--lc-warn-rgb), .26); }

/* Selector de motivo por fila (recolección). Sin motivo se lee neutro —«sigue con
   el cliente» es lo de siempre—; un motivo que cierra el pendiente se tiñe de ámbar
   porque cambia lo que pasa con la renta. */
.fx-motivo {
    align-self: flex-start;
    margin-top: var(--ic-space-1);
    min-height: var(--ic-touch-min);
    padding: 0 var(--ic-space-2) 0 var(--ic-space-3);
    border-radius: var(--ic-radius-md);
    border: 1px solid var(--ic-border);
    background: var(--ic-surface);
    color: var(--ic-text);
    font: inherit;
    font-size: var(--ic-text-sm);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: var(--ic-space-1);
    cursor: pointer;
}

.fx-motivo:hover { background: var(--ic-surface-2); }

.fx-motivo--cierra {
    color: var(--lc-warn);
    border-color: rgba(var(--lc-warn-rgb), .55);
    background: rgba(var(--lc-warn-rgb), .12);
}

/* ── Motivo del faltante (MotivoFaltanteRecogidaDialog) ────────────────── */
.mfr-detalle {
    margin: 0 0 var(--ic-space-3);
    font-size: var(--ic-text-md);
    color: var(--ic-muted);
}

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

.mfr-opcion {
    display: flex;
    align-items: center;
    gap: var(--ic-space-3);
    width: 100%;
    min-height: var(--ic-touch-min);
    padding: var(--ic-space-2) var(--ic-space-3);
    border-radius: var(--ic-radius-md);
    border: 1px solid var(--ic-border);
    background: var(--ic-surface);
    color: var(--ic-text);
    font: inherit;
    text-align: left;
    /* Un <button> centra su contenido flex: sin esto los radios no se alinean entre opciones. */
    justify-content: flex-start;
    cursor: pointer;
}

.mfr-opcion:hover { background: var(--ic-surface-2); }
/* Sólo lectura (quien no puede editar) o guardando: que no parezca un control vivo. */
.mfr-opcion:disabled,
.fx-btn:disabled { opacity: .55; cursor: default; }
.mfr-opcion:disabled:hover { background: var(--ic-surface); }

.mfr-opcion--on {
    border-color: rgba(var(--lc-warn-rgb), .65);
    background: rgba(var(--lc-warn-rgb), .12);
}

.mfr-opcion__radio {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    border-radius: 50%;
    border: 2px solid var(--ic-border-strong, var(--ic-border));
}

.mfr-opcion--on .mfr-opcion__radio {
    border-color: var(--lc-warn);
    box-shadow: inset 0 0 0 4px var(--ic-surface);
    background: var(--lc-warn);
}

.mfr-opcion__txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mfr-opcion__titulo { font-size: var(--ic-text-md); font-weight: 600; }
.mfr-opcion__ayuda { font-size: var(--ic-text-sm); color: var(--ic-muted); }

.mfr-aviso {
    margin: var(--ic-space-3) 0 0;
    font-size: var(--ic-text-sm);
    color: var(--lc-warn);
    font-weight: 600;
}

.mfr-btn--guardar {
    background: var(--ic-primary);
    color: var(--ic-on-primary);
    border: 1px solid var(--ic-primary);
}

@media (max-width: 599px) {
    /* Apilados: dos botones de 48px lado a lado dejan el texto en dos líneas. */
    .fx-dlg-root .mud-dialog-actions,
    .mfr-dlg-root .mud-dialog-actions { flex-direction: column-reverse; align-items: stretch; }
    .fx-dlg-root .mud-dialog-actions .fx-btn,
    .mfr-dlg-root .mud-dialog-actions .fx-btn { width: 100%; }
}

/* ── «No había nadie» ─────────────────────────────────────────────────
   El hecho que hasta ahora no se registraba en ningún lado (0 asignaciones canceladas sobre 440 en
   producción). Va debajo de Llamar/Navegar porque ése es el momento: el chofer parado frente a la
   puerta. Ancho completo y no dentro del .re-duo a propósito — compartir fila con «Llamar» lo
   convertiría en un gemelo visual de la acción que se intenta ANTES, y se tocaría por error. */
.re-nohabia__btn {
    width: 100%;
    margin-top: 8px;
    /* Un <button> no hereda la alineación de contenido de un <a>: el navegador le centra el
       contenido flex. Aquí SÍ se quiere centrado, como el resto de .re-btn, así que no se toca;
       queda anotado para que nadie lo "corrija" al copiar este bloque a un contenedor alineado. */
}

/* Ya anotado: el botón desaparece y queda el hecho, en la misma línea de aviso que el resto de la
   pantalla. Sin rojo: no es un error del chofer, es información de la parada. */
.re-nohabia .re-linea__ico { color: var(--lc-neutral); }
.re-nohabia .re-linea__nota { color: var(--ic-muted); }