/* ============================================================================
   LISTADO DE RENTAS — /rentas
   ============================================================================
   Prefijo .rr-*. Portado del mock de Claude Design «/rentas · rediseño» con el
   sustrato de docs/design-substrate.md pegado encima, así que las medidas de
   este archivo son las de la tabla 05 del mock y se pueden comprobar en
   wwwroot/_bench/comparar.html.

   Estaba todo en un <style> dentro de Rentas.razor. Ese bloque no tiene scope:
   se filtraba a toda la app mientras la página estuviera montada (así es como
   Subarriendos acabó dependiendo de .rentas-filters sin declararla en ningún
   sitio) y el banco no podía reproducir la pantalla para medirla.

   Una sola tarjeta sirve a móvil y a escritorio: .rr-list es una rejilla que se
   colapsa sola a una columna. NO hay media queries en este archivo, a propósito
   — la rejilla responde al ANCHO DEL CONTENEDOR, así que el marco de 390px del
   banco se comporta igual que un teléfono de verdad, que es justo lo que las
   media queries no podían hacer.

   Los fondos tintados salen de --rr-tint-* / --rr-wash-* / --rr-line-*, no
   directamente de rgba(var(--lc-*-rgb)). Ver el bloque de tokens de abajo: es la
   única forma de que los dos temas se vean bien sin repintar media app.
   ========================================================================== */

/* ── Tintes ──────────────────────────────────────────────────────────────────
   lista-cards.css voltea --lc-warn/info/ok/err/neutral/purple en tema claro,
   pero NO sus pares -rgb (sólo --lc-accent-rgb). Así que:

   · en oscuro se usa el par -rgb, que es exactamente lo que dibuja el mock;
   · en claro se deriva con color-mix() del --lc-* YA volteado.

   La alternativa —declarar los -rgb claros en lista-cards.css— repintaría
   .lc-chip--*, .lc-stat__icon--* y .lc-row__avatar--* de más de veinte páginas
   en producción, y el tinte pasaría del ámbar Material a un marrón sucio
   derivado del hex oscuro de texto. Es un cambio global, no cabe en este porte.
   Cuando esos pares existan en claro, este bloque sobra y se borra entero. */
:root {
    --rr-tint-info:    rgba(var(--lc-info-rgb), 0.18);
    --rr-tint-accent:  rgba(var(--lc-accent-rgb), 0.18);
    --rr-tint-purple:  rgba(var(--lc-purple-rgb), 0.18);
    --rr-tint-ok:      rgba(var(--lc-ok-rgb), 0.18);
    --rr-tint-warn:    rgba(var(--lc-warn-rgb), 0.18);
    --rr-tint-err:     rgba(var(--lc-err-rgb), 0.18);
    --rr-tint-neutral: rgba(var(--lc-neutral-rgb), 0.18);

    --rr-wash-warn:    rgba(var(--lc-warn-rgb), 0.10);
    --rr-wash-err:     rgba(var(--lc-err-rgb), 0.10);

    --rr-line-ok:      rgba(var(--lc-ok-rgb), 0.45);
    --rr-line-info:    rgba(var(--lc-info-rgb), 0.45);
    --rr-line-accent:  rgba(var(--lc-accent-rgb), 0.45);
}

html[data-theme="light"] {
    --rr-tint-info:    color-mix(in srgb, var(--lc-info) 18%, transparent);
    --rr-tint-accent:  color-mix(in srgb, var(--lc-accent) 18%, transparent);
    --rr-tint-purple:  color-mix(in srgb, var(--lc-purple) 18%, transparent);
    --rr-tint-ok:      color-mix(in srgb, var(--lc-ok) 18%, transparent);
    --rr-tint-warn:    color-mix(in srgb, var(--lc-warn) 18%, transparent);
    --rr-tint-err:     color-mix(in srgb, var(--lc-err) 18%, transparent);
    --rr-tint-neutral: color-mix(in srgb, var(--lc-neutral) 18%, transparent);

    --rr-wash-warn:    color-mix(in srgb, var(--lc-warn) 10%, transparent);
    --rr-wash-err:     color-mix(in srgb, var(--lc-err) 10%, transparent);

    --rr-line-ok:      color-mix(in srgb, var(--lc-ok) 45%, transparent);
    --rr-line-info:    color-mix(in srgb, var(--lc-info) 45%, transparent);
    --rr-line-accent:  color-mix(in srgb, var(--lc-accent) 45%, transparent);
}

/* Sin canalón propio: lo pone .ic-viewport-page (app.css) desde
   --ic-page-pad-x, igual que el resto del panel. Estos 12px se declararon aquí
   cuando el shell traía 8px fijos y el mock pedía 12; ahora los dos salen del
   mismo token, y repetirlos aquí sólo servía para que /rentas dejara de seguir
   al sistema la próxima vez que el sistema cambiara —que es justo lo que pasó:
   con el canalón ya en 24px, esta regla lo devolvía a 12 por llegar después. */

/* Botones del encabezado. El mock no toca el PageHeader, así que esta regla se
   conserva tal cual estaba en el <style> que desapareció. */
.rentas-header__btn {
    border-radius: 10px !important;
    flex-shrink: 0;
}

/* Pila vertical común a la cabecera y al cuerpo. .rr-page es la misma pila con
   el canalón incluido: la usa el banco, donde no existe el shell de la app. */
.rr-stack {
    display: flex;
    flex-direction: column;
    gap: var(--ic-space-3);
}

/* OperativaHoyResumen se dibuja vacío cuando el día no tiene movimientos, pero
   sigue siendo un hijo con margen: dentro de una pila con gap eso son 34px de
   aire entre el encabezado y el buscador. Acotado a .rr-stack para no cambiar
   las otras páginas que montan el mismo componente. */
.rr-stack > .ohr-root:empty { display: none; }

.rr-page {
    display: flex;
    flex-direction: column;
    gap: var(--ic-space-3);
    padding: var(--ic-space-3) var(--ic-space-3) var(--ic-space-6);
    background: var(--ic-bg);
    color: var(--ic-text);
}

.rr-body {
    padding-bottom: var(--ic-space-6);
}

/* ── Buscador ─────────────────────────────────────────────────────────────
   Input nativo, no MudTextField: el Mud trae wrapper, notch de borde y label
   flotante que había que neutralizar uno a uno para llegar a los 48px. */
.rr-search {
    position: relative;
    display: flex;
    align-items: center;
}

.rr-search__ico {
    position: absolute;
    left: 14px;
    display: flex;
    color: var(--ic-icon-muted);
    pointer-events: none;
}

.rr-search__in {
    width: 100%;
    min-height: var(--ic-touch-min);
    height: var(--ic-touch-min);
    padding: 0 var(--ic-space-3) 0 44px;
    border-radius: var(--ic-radius-md);
    border: 1px solid var(--ic-border);
    background: var(--ic-surface);
    color: var(--ic-text);
    font-family: inherit;
    font-size: var(--ic-text-md);
    letter-spacing: 0.01em;
    appearance: none;
}

.rr-search__in::placeholder { color: var(--ic-text-tertiary); }

.rr-search__in:focus-visible {
    outline: 2px solid var(--lc-accent);
    outline-offset: 1px;
}

/* ── Fila de filtros ─────────────────────────────────────────────────────── */
.rr-filtros {
    display: flex;
    align-items: center;
    gap: var(--ic-space-2);
}

.rr-chips {
    flex: 1;
    min-width: 0;
    display: flex;
    gap: var(--ic-space-2);
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: none;
}

.rr-chips::-webkit-scrollbar { display: none; }

.rr-fchip {
    flex: 0 0 auto;
    min-height: var(--ic-touch-min);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 var(--ic-space-4);
    border-radius: 999px;
    border: 1px solid var(--ic-border);
    background: var(--ic-surface);
    color: var(--ic-muted);
    font-family: inherit;
    font-size: var(--ic-text-md);
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    appearance: none;
}

.rr-fchip--on {
    background: var(--ic-primary-dim);
    border-color: var(--lc-accent);
    color: var(--lc-accent);
    font-weight: 700;
}

.rr-fchip__n {
    font-size: var(--ic-text-sm);
    font-weight: 700;
    color: var(--ic-text-tertiary);
}

.rr-fchip--on .rr-fchip__n { color: var(--lc-accent); }

.rr-iconbtn {
    flex: 0 0 auto;
    width: var(--ic-touch-min);
    height: var(--ic-touch-min);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--ic-radius-md);
    border: 1px solid var(--ic-border);
    background: var(--ic-surface);
    color: var(--ic-muted);
    cursor: pointer;
    appearance: none;
}

.rr-iconbtn[disabled] {
    opacity: 0.5;
    cursor: default;
}

/* ── Banner de capacidad operativa ───────────────────────────────────────── */
.rr-banner {
    display: flex;
    gap: var(--ic-space-3);
    padding: var(--ic-space-3) var(--ic-space-4);
    border: 1px solid var(--lc-warn);
    border-radius: var(--ic-radius-md);
    background: var(--rr-wash-warn);
}

.rr-banner--alta {
    border-color: var(--lc-err);
    background: var(--rr-wash-err);
}

.rr-banner__ico {
    flex: 0 0 auto;
    color: var(--lc-warn);
    display: flex;
    padding-top: 2px;
}

.rr-banner--alta .rr-banner__ico { color: var(--lc-err); }

.rr-banner__bd {
    display: flex;
    flex-direction: column;
    gap: var(--ic-space-2);
    min-width: 0;
}

.rr-banner__tx {
    font-size: var(--ic-text-md);
    line-height: 1.45;
    color: var(--ic-text);
}

.rr-banner__ln {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ic-space-2);
}

/* El margen negativo devuelve el enlace a la sangría del texto: la caja de 48px
   es para el dedo, no para el ojo. */
.rr-link {
    min-height: var(--ic-touch-min);
    display: inline-flex;
    align-items: center;
    padding: 0 var(--ic-space-3);
    margin-left: calc(var(--ic-space-3) * -1);
    border-radius: var(--ic-radius-sm);
    color: var(--lc-accent);
    font-size: var(--ic-text-md);
    font-weight: 700;
    text-decoration: none;
}

/* ── Rejilla ─────────────────────────────────────────────────────────────
   minmax(min(360px, 100%), …): sin el min() un teléfono de 360px con canalones
   deja la pista más ancha que el contenedor y desborda en horizontal.
   align-items:start para que dos tarjetas de la misma fila no se estiren a la
   altura de la más alta. */
.rr-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(360px, 100%), 1fr));
    gap: var(--ic-space-3);
    align-items: start;
}

/* ── Tarjeta ─────────────────────────────────────────────────────────────
   El borde izquierdo de 4px es lo que deja leer la fase de un vistazo en una
   rejilla de tres columnas. Los estados parciales NO lo cambian (sólo puntean
   su chip): la columna de color agrupa la fase, no el detalle. */
.rr-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--ic-space-3);
    padding: var(--ic-space-4);
    background: var(--ic-surface);
    border: 1px solid var(--ic-border);
    border-left: 4px solid var(--lc-neutral);
    border-radius: var(--ic-radius-md);
}

.rr-card--info    { border-left-color: var(--lc-info); }
.rr-card--accent  { border-left-color: var(--lc-accent); }
.rr-card--purple  { border-left-color: var(--lc-purple); }
.rr-card--ok      { border-left-color: var(--lc-ok); }
.rr-card--neutral { border-left-color: var(--lc-neutral); }
.rr-card--err     { border-left-color: var(--lc-err); }
.rr-card--cancel  { opacity: 0.72; }

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

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

/* El titular es el CLIENTE. overflow-wrap:anywhere porque los nombres de razón
   social llegan sin espacios ("Comercializadora...S.A.deC.V."). */
.rr-cliente {
    font-size: var(--ic-text-xl);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.01em;
    overflow-wrap: anywhere;
    text-wrap: pretty;
}

.rr-prod {
    font-size: var(--ic-text-md);
    color: var(--ic-muted);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.rr-folio {
    flex: 0 0 auto;
    font-size: var(--ic-text-sm);
    font-weight: 700;
    color: var(--ic-text-tertiary);
    padding-top: 3px;
}

/* ── Chips ───────────────────────────────────────────────────────────────── */
.rr-chipwrap {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ic-space-2);
}

.rr-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding: 0 var(--ic-space-3);
    border-radius: 999px;
    font-size: var(--ic-text-sm);
    font-weight: 700;
    white-space: nowrap;
}

.rr-chip--info    { color: var(--lc-info);    background: var(--rr-tint-info); }
.rr-chip--accent  { color: var(--lc-accent);  background: var(--rr-tint-accent); }
.rr-chip--purple  { color: var(--lc-purple);  background: var(--rr-tint-purple); }
.rr-chip--ok      { color: var(--lc-ok);      background: var(--rr-tint-ok); }
.rr-chip--warn    { color: var(--lc-warn);    background: var(--rr-tint-warn); }
.rr-chip--err     { color: var(--lc-err);     background: var(--rr-tint-err); }
.rr-chip--neutral { color: var(--lc-neutral); background: var(--rr-tint-neutral); }

/* Parcial: sin gastar un color más. */
.rr-chip--out {
    background: transparent;
    border: 1px dashed currentColor;
}

/* ── Fechas ──────────────────────────────────────────────────────────────
   Dos columnas SIEMPRE, aunque falte el dato: si la celda desaparece cuando no
   hay fecha de recolección, la rejilla deja de poder recorrerse con la vista. */
.rr-fechas {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--ic-space-2) var(--ic-space-3);
}

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

.rr-fecha__lb {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: var(--ic-text-xs);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ic-text-tertiary);
}

.rr-fecha__vl {
    font-size: var(--ic-text-md);
    font-weight: 600;
    color: var(--ic-text);
    line-height: 1.35;
}

/* "Sin fecha" y el sufijo "(programada)": el dato no sale de la renta. */
.rr-fecha__vl--falta {
    color: var(--lc-warn);
    font-weight: 700;
}

/* ── Dirección ───────────────────────────────────────────────────────────
   Es el disparador de Google Maps y a la vez el texto. Cuando no hay dirección
   se dibuja como <span>, no como <a>: un enlace muerto en el sitio donde se
   espera abrir el mapa es peor que no tenerlo. */
.rr-dir {
    display: flex;
    align-items: center;
    gap: var(--ic-space-3);
    min-height: var(--ic-touch-min);
    width: 100%;
    text-align: left;
    padding: var(--ic-space-2) var(--ic-space-3);
    background: var(--ic-surface-2);
    border: 1px solid transparent;
    border-radius: var(--ic-radius-sm);
    color: var(--ic-text);
    font-family: inherit;
    font-size: var(--ic-text-md);
    text-decoration: none;
    appearance: none;
}

/* Sólo la variante con destino es pulsable; la vacía es un <span>. */
a.rr-dir,
button.rr-dir { cursor: pointer; }

.rr-dir__ico {
    flex: 0 0 auto;
    color: var(--lc-ok);
    display: flex;
}

.rr-dir__tx {
    flex: 1;
    min-width: 0;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.rr-dir--vacia { color: var(--ic-text-tertiary); }
.rr-dir--vacia .rr-dir__ico { color: var(--ic-icon-muted); }

/* ── Dinero ──────────────────────────────────────────────────────────────
   El saldo pesa más que el total a propósito: es el dato con el que se decide
   si hay que cobrar antes de salir. Con saldo 0 sólo queda «Total» a la
   izquierda y el chip «Pagada» lo dice arriba. */
.rr-money {
    display: flex;
    align-items: flex-end;
    gap: var(--ic-space-4);
    padding-top: var(--ic-space-3);
    border-top: 1px solid var(--ic-border);
}

.rr-money__col {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.rr-money__lb {
    font-size: var(--ic-text-xs);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ic-text-tertiary);
}

.rr-money__tot {
    font-size: var(--ic-text-lg);
    font-weight: 600;
    color: var(--ic-muted);
    /* 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». */
}

.rr-money__sal {
    font-size: var(--ic-text-2xl);
    font-weight: 800;
    line-height: 1.1;
    color: var(--lc-warn);
    letter-spacing: -0.01em;
}

.rr-money__end {
    margin-left: auto;
    padding-bottom: 2px;
}

/* ── Empleado ────────────────────────────────────────────────────────────── */
.rr-emp {
    display: flex;
    align-items: center;
    gap: var(--ic-space-2);
    font-size: var(--ic-text-md);
    color: var(--ic-muted);
}

.rr-emp .mud-icon-root { color: var(--ic-icon-muted); flex: 0 0 auto; }
.rr-emp b { color: var(--ic-text); font-weight: 600; }

.rr-emp--sin { color: var(--lc-warn); font-weight: 700; }
.rr-emp--sin .mud-icon-root { color: var(--lc-warn); }

/* ── Acciones ────────────────────────────────────────────────────────────── */
.rr-acts {
    display: flex;
    gap: var(--ic-space-2);
}

.rr-btn {
    flex: 1;
    min-width: 64px;
    min-height: var(--ic-touch-min);
    height: var(--ic-touch-min);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ic-space-2);
    border-radius: var(--ic-radius-sm);
    border: 1px solid var(--ic-border);
    background: var(--ic-surface-2);
    color: var(--ic-text);
    font-family: inherit;
    font-size: var(--ic-text-md);
    font-weight: 600;
    letter-spacing: 0.01em;
    text-decoration: none;
    cursor: pointer;
    appearance: none;
}

.rr-btn--ok   { color: var(--lc-ok);     border-color: var(--rr-line-ok); }
.rr-btn--info { color: var(--lc-info);   border-color: var(--rr-line-info); }

.rr-btn--main {
    color: var(--lc-accent);
    border-color: var(--rr-line-accent);
    background: var(--ic-primary-dim);
}

/* El botón de ⋮ es cuadrado: hay que ganarle al min-width de 64px de .rr-btn,
   que existe para los botones con texto. */
.rr-btn--icon {
    flex: 0 0 var(--ic-touch-min);
    width: var(--ic-touch-min);
    min-width: var(--ic-touch-min);
}

/* MudMenu envuelve el activador en .mud-menu > .mud-menu-activator, así que el
   <span class="rr-btn--icon"> es NIETO de .rr-acts y su flex no lo ve nadie: el
   menú se quedaba en 64px y le robaba 16 a «Llamar», que llegaba a cortarse por
   1px a 375px de ancho. El reparto se pone en el envoltorio. */
.rr-acts > .mud-menu {
    flex: 0 0 var(--ic-touch-min);
    display: flex;
}

.rr-acts > .mud-menu .mud-menu-activator {
    display: flex;
    width: 100%;
}

.rr-btn[aria-disabled="true"] {
    color: var(--ic-text-tertiary);
    opacity: 0.5;
    cursor: default;
}

/* ── Ver más / contador ──────────────────────────────────────────────────── */
.rr-more {
    width: 100%;
    min-height: var(--ic-touch-min);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--ic-space-2);
    border: 1px solid var(--ic-border);
    border-radius: var(--ic-radius-md);
    background: var(--ic-surface);
    color: var(--lc-accent);
    font-family: inherit;
    font-size: var(--ic-text-md);
    font-weight: 700;
    cursor: pointer;
    appearance: none;
}

.rr-count {
    margin: 0;
    text-align: center;
    font-size: var(--ic-text-sm);
    color: var(--ic-text-tertiary);
    padding: 0 var(--ic-space-1);
}

/* ── Vacío ───────────────────────────────────────────────────────────────── */
.rr-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--ic-space-3);
    padding: var(--ic-space-8) var(--ic-space-5);
    text-align: center;
    background: var(--ic-surface);
    border: 1px solid var(--ic-border);
    border-radius: var(--ic-radius-md);
}

.rr-empty__ico { color: var(--ic-icon-muted); display: flex; }
.rr-empty__ti  { font-size: var(--ic-text-lg); font-weight: 700; }

.rr-empty__sb {
    font-size: var(--ic-text-md);
    color: var(--ic-muted);
    max-width: 30ch;
    line-height: 1.45;
}

/* El botón de limpiar no se estira: dentro de .rr-empty no hay fila que repartir. */
.rr-empty .rr-btn {
    flex: 0 0 auto;
    padding: 0 var(--ic-space-5);
}

/* ── Esqueletos ─────────────────────────────────────────────────────────────
   El keyframe ic-pulse vive en app.css; lo comparten registrar-entrega y el
   centro de lavado. No declarar otro. */
.rr-sk {
    display: flex;
    flex-direction: column;
    gap: var(--ic-space-3);
    padding: var(--ic-space-4);
    background: var(--ic-surface);
    border: 1px solid var(--ic-border);
    border-left: 4px solid var(--ic-border);
    border-radius: var(--ic-radius-md);
}

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

.rr-sk__ln {
    height: 14px;
    border-radius: var(--ic-radius-sm);
    background: var(--ic-surface-2);
    animation: ic-pulse 1.5s ease-in-out infinite;
}

.rr-sk__ln--ti { height: 22px; width: 62%; flex: 1; }
.rr-sk__ln--sb { width: 84%; }
.rr-sk__ln--mo { height: 26px; width: 46%; }

.rr-sk__chip {
    height: 30px;
    width: 92px;
    flex: 0 0 auto;
    border-radius: 999px;
    background: var(--ic-surface-2);
    animation: ic-pulse 1.5s ease-in-out infinite;
}

/* ── Foco ────────────────────────────────────────────────────────────────── */
.rr-fchip:focus-visible,
.rr-iconbtn:focus-visible,
.rr-btn:focus-visible,
.rr-dir:focus-visible,
.rr-more:focus-visible,
.rr-link:focus-visible {
    outline: 2px solid var(--lc-accent);
    outline-offset: 2px;
}