/* ============================================================================
   lista-cards.css — Sistema compartido de páginas de listado (lc-) y skin de
   diálogos (lcd-). Lo usan Solicitudes, Asignaciones, Mis asignaciones,
   Empleados, Asistencias y Centro de lavado. Todo el color sale de los tokens
   --ic-* (app.css) para heredar tema claro/oscuro automáticamente.
   No duplicar estas clases en <style> inline de páginas.
   ============================================================================ */

/* ── Acentos semánticos ──────────────────────────────────────────────────────
   Cada chip, píldora, avatar e icono de estado del panel pinta el MISMO token como texto
   y, entre el 6% y el 18%, como relleno: `color: var(--lc-X)` sobre un fondo derivado de
   `--lc-X`. El relleno tira del respaldo hacia el propio color, así que el contraste del
   par sale más bajo que el del token sobre la superficie pelada, y baja más cuanto más
   alto es el relleno y más oscuro (en claro) el panel de debajo.
   Para medirlo: wwwroot/_bench/contraste-chips.html, que barre estas hojas y mide cada par
   contra los tres respaldos del tema. Se carga con ?tema=light / ?tema=dark, nunca con el
   conmutador: el navegador no repinta el background-color de un <button> en caliente.

   En oscuro, --lc-info va un escalón por encima de su origen (#64B5F6): el chip «Entrega»
   daba 3.98 sobre --ic-surface-2, que aquí es el panel más CLARO y por tanto el peor
   respaldo. Los gemelos -rgb NO se mueven: en oscuro el tinte es la variante saturada a
   propósito, y aclararlo borraría el contraste en vez de darlo.

   --lc-accent es la excepción desde 2026-09-23: en OSCURO vale lo mismo que --ic-nav-accent
   (#A6B2FF). Ya no hace falta separarlos —el lila pastel da 7.59 sobre --ic-surface-2 y 11.43
   sobre el chrome, ambos con margen— y que coincidan es deliberado, no un descuido. En CLARO
   sí siguen separados; ver el bloque de abajo. */
:root {
    --lc-warn: #FF9F0A;      --lc-warn-rgb: 255, 149, 0;
    --lc-info: #64D2FF;      --lc-info-rgb: 50, 173, 230;
    --lc-ok: #30D158;        --lc-ok-rgb: 52, 199, 89;
    --lc-err: #FF9089;       --lc-err-rgb: 255, 59, 48;
    --lc-neutral: #B0B0B3;   --lc-neutral-rgb: 142, 142, 147;
    --lc-purple: #D797F7;    --lc-purple-rgb: 175, 82, 222;
    --lc-teal: #40C8E0;      --lc-teal-rgb: 48, 176, 199;
    --lc-accent: #A6B2FF;    --lc-accent-rgb: 85, 99, 224;
}

/* Los gemelos -rgb TAMBIÉN voltean: son la base de todos los tintes (badges «Ya es tuyo»,
   «Falta precio», «No se pudo guardar»…). Sin ellos el texto cambiaba a su tono claro sobre
   un tinte construido con la saturación del tema oscuro. En claro el gemelo es el MISMO color
   (lo exige SustratoVisualTests); sólo en oscuro divergen a propósito.

   Calibrados para 4.5:1 (AA, texto normal) con el par completo —texto sobre su propio relleno—
   al 18%, que es el relleno MÁS ALTO con que el panel usa este patrón, y apoyado en
   --ic-surface-2 (entonces #EEF1F8; hoy #ECECF1, 4.52 con el par completo), la superficie más
   oscura del tema claro. NO bajarla a #E5E5EA sin recalibrar: ahí caen a 4.27. Con esos dos peores casos
   a la vez, las 127 reglas que hoy pintan un --lc-* sobre su propio tinte pasan en los tres
   respaldos sin excepción; calibrar sólo al 14% dejaba cuatro en 4.45-4.47 (banco
   _bench/contraste-chips.html). Con los tonos anteriores el chip daba 3.37-4.50 sobre #FFFFFF:
   ninguno llegaba con margen y cinco no llegaban. Las otras dos salidas están medidas y NO
   sirven: el peso no mueve la razón de contraste (y a 13px un chip en negrita sigue sin ser
   «texto grande», así que el umbral sigue siendo 4.5, no 3.0), y bajar el relleno topa en el
   techo del token pelado —teal daba 4.00 sobre #EEF1F8 aun con relleno CERO—.
   El tono y el croma OKLCH son los de antes; lo único que baja es la luminosidad, para que el
   chip siga siendo el mismo ámbar/verde/rojo y no cambie de carácter.
   --lc-accent queda deliberadamente un escalón por debajo de --ic-primary (#5563E0): con el
   índigo viejo coincidían por casualidad y le faltaban 0.8 puntos de contraste. No volver a
   igualarlos. El lila #3A44BC da 4.94 con el par completo al 18%; el #4453D4 que se barajó
   primero se quedaba en 4.35 y por eso NO se usó. El 28% también cuenta: mapa.css:1141 rellena
   a esa alfa y ahí da 4.18. */
html[data-theme="light"] {
    --lc-warn: #824C00;      --lc-warn-rgb: 130, 76, 0;
    --lc-info: #105F83;      --lc-info-rgb: 16, 95, 131;
    --lc-ok: #1B662E;        --lc-ok-rgb: 27, 102, 46;
    --lc-err: #AD0900;       --lc-err-rgb: 173, 9, 0;
    --lc-neutral: #5A5A5E;   --lc-neutral-rgb: 90, 90, 94;
    --lc-purple: #8623B9;    --lc-purple-rgb: 134, 35, 185;
    --lc-teal: #1B626F;      --lc-teal-rgb: 27, 98, 111;
    --lc-accent: #3A44BC;    --lc-accent-rgb: 58, 68, 188;
}

/* ── Toolbar de filtros (búsqueda + selects + botones) ─────────────────────── */
.lc-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.lc-toolbar__search {
    flex: 1 1 240px;
    min-width: 180px;
}

.lc-toolbar__select {
    flex: 0 1 190px;
    min-width: 150px;
}

@media (max-width: 959px) {
    /* Igual que las páginas actuales: una fila con scroll horizontal. */
    .lc-toolbar {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 2px;
        scrollbar-width: none;
    }

    .lc-toolbar::-webkit-scrollbar {
        display: none;
    }
}

/* ── Chips-filtro horizontales (vistas / toggles) ──────────────────────────── */
.lc-filter-chips {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 2px 2px 4px;
    margin-bottom: 10px;
    scrollbar-width: none;
}

.lc-filter-chips::-webkit-scrollbar {
    display: none;
}

.lc-filter-chip {
    appearance: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    /* Que NO se encoja: en un carril flex los ítems se aprietan por defecto hasta su
       min-content, y con muchos filtros el padding se evapora y los chips quedan
       pegados. El carril ya tiene overflow-x para eso. */
    flex: 0 0 auto;
    /* El piso táctil del proyecto es 48, no 44 (CLAUDE.md). Estaba a 44 desde antes de que
       existiera el token; se alinea aquí y lo heredan los demás carriles de filtros. */
    min-height: var(--ic-touch-min, 48px);
    padding: 8px 16px;
    border-radius: 999px;
    border: 1px solid var(--ic-border, rgba(148, 163, 184, 0.2));
    background: var(--ic-surface, #1A282E);
    color: var(--ic-muted, #C5D0D6);
    font-size: 0.9375rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.lc-filter-chip:hover {
    border-color: rgba(var(--lc-accent-rgb), 0.35);
}

.lc-filter-chip--active {
    background: var(--ic-primary-dim, rgba(10, 132, 255, 0.15));
    border-color: rgba(var(--lc-accent-rgb), 0.5);
    color: var(--lc-accent);
}

/* Conteo dentro del chip. Va en tono terciario para que el número acompañe y no compita
   con la etiqueta, y toma el acento cuando el chip está activo. */
.lc-filter-chip__n {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--ic-text-tertiary);
}

.lc-filter-chip--active .lc-filter-chip__n {
    color: var(--lc-accent);
}

/* Chip-activador de MudMenu (picker de empleado en Asistencias): el wrapper
   .mud-menu es el ítem flex de la fila; que no se encoja en el scroll-x. */
.lc-filter-chips .mud-menu {
    flex: 0 0 auto;
}

/* Etiqueta del chip-menú: nombres largos con elipsis, no comerse la fila. */
.lc-filter-chip--menu .lc-filter-chip__lbl {
    max-width: 38vw;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ✕ redondo para limpiar el filtro (target 44px). */
.lc-filter-chip--clear {
    min-width: 44px;
    padding: 8px;
    justify-content: center;
    border-radius: 50%;
}

/* Ítems del menú del picker: piso táctil senior. GLOBAL (el popover se
   portala al MudPopoverProvider, fuera de la página); se aplica vía
   ListClass="lc-menu-lista". */
.lc-menu-lista .mud-menu-item {
    min-height: 48px;
    font-size: 1rem;
}

/* ── Segmented control (2–3 vistas fijas: Platillos/Paquetes, etc.) ─────────── */
.lc-segtabs {
    display: flex;
    gap: 4px;
    padding: 4px;
    border-radius: 14px;
    border: 1px solid var(--ic-border, rgba(148, 163, 184, 0.2));
    background: var(--ic-surface-2, #16242B);   /* pista recesada */
}

.lc-segtab {
    appearance: none;
    flex: 1 1 0;
    min-width: 0;
    min-height: 48px;                            /* senior-friendly */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 8px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--ic-muted, #C5D0D6);
    font-size: 0.9375rem;
    font-weight: 600;
    white-space: nowrap;                         /* la etiqueta nunca parte en 2 líneas */
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

/* Etiqueta flexible: se encoge/elipsa antes que empujar al contador o desbordar. */
.lc-segtab > span:not(.lc-segtab__count) {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lc-segtab__count {
    flex: 0 0 auto;                              /* el contador conserva su tamaño */
}

.lc-segtab--active {
    background: var(--ic-surface, #1A282E);       /* pastilla elevada */
    color: var(--ic-text, #F2F7FB);
    box-shadow: var(--ic-shadow-sm, 0 1px 4px rgba(0, 0, 0, 0.3));
}

.lc-segtab__count {
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
    padding: 2px 7px;
    border-radius: 10px;
    background: var(--ic-border, rgba(148, 163, 184, 0.25));
    color: var(--ic-muted, #C5D0D6);
}

.lc-segtab--active .lc-segtab__count {
    background: var(--ic-primary, #5563E0);
    color: #fff;
}

/* Variante compacta para controles de 3 vistas: en teléfono oculta el ícono
   (la etiqueta ya es clara) y ajusta tipografía/espaciados para que las 3
   etiquetas quepan en una línea en cualquier teléfono (evita el "Por pagar"
   partido en dos). Solo afecta a quien opta con --compact; en ≥600px el ícono
   vuelve. */
@media (max-width: 599px) {
    .lc-segtabs--compact {
        gap: 2px;
        padding: 3px;
    }
    .lc-segtabs--compact .lc-segtab {
        gap: 5px;
        padding: 0 6px;
        font-size: 0.8125rem;                    /* 13px */
    }
    .lc-segtabs--compact .lc-segtab .mud-icon-root {
        display: none;
    }
    .lc-segtabs--compact .lc-segtab__count {
        padding: 1px 6px;
        font-size: 0.6875rem;                    /* 11px */
    }
}

/* ── Stat pills tappables (contadores que filtran) ─────────────────────────── */
.lc-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
    margin-bottom: 12px;
}

@media (max-width: 599px) {
    .lc-stats {
        grid-template-columns: repeat(auto-fit, minmax(136px, 1fr));
        gap: 8px;
    }
}

.lc-stat {
    appearance: none;
    display: flex;
    align-items: center;
    gap: 10px;
    text-align: left;
    min-height: 66px;
    padding: 10px 12px;
    border-radius: var(--ic-radius-md, 12px);
    border: 1px solid var(--ic-border, rgba(148, 163, 184, 0.2));
    background: var(--ic-surface, #1A282E);
    color: var(--ic-text, #F2F7FB);
    cursor: pointer;
    /* Sombra suave: las hace leer como algo pulsable sin necesidad de texto. */
    box-shadow: var(--ic-shadow-sm, 0 1px 4px rgba(0, 0, 0, 0.3));
    transition: border-color 0.15s ease, background 0.15s ease, opacity 0.15s ease, transform 0.12s ease, box-shadow 0.12s ease;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    min-width: 0;
}

.lc-stat:not(.lc-stat--static):hover {
    border-color: rgba(var(--lc-accent-rgb), 0.35);
    transform: translateY(-1px);
}

.lc-stat--active {
    background: var(--ic-primary-dim, rgba(10, 132, 255, 0.15));
    border-color: rgba(var(--lc-accent-rgb), 0.6);
}

/* Grupo de filtro: al activar uno, los demás se atenúan → señal visual
   inequívoca de que las tarjetas son un filtro mutuamente excluyente. */
.lc-stats:has(.lc-stat--active) .lc-stat:not(.lc-stat--active) {
    opacity: 0.4;
}

.lc-stat--static {
    cursor: default;
    box-shadow: none;
}

.lc-stat--static:hover {
    border-color: var(--ic-border, rgba(148, 163, 184, 0.2));
}

.lc-stat__icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: var(--ic-surface-2, #243640);
    color: var(--ic-muted, #C5D0D6);
}

.lc-stat__icon .mud-icon-root {
    font-size: 1.25rem;
}

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

.lc-stat__val {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.1;
}

.lc-stat__lbl {
    font-size: 0.8125rem;
    color: var(--ic-muted, #C5D0D6);
    line-height: 1.2;
    /* Hasta 2 líneas para no truncar etiquetas largas ("En verificación"). */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.lc-stat--warn .lc-stat__val { color: var(--lc-warn); }
.lc-stat--warn .lc-stat__icon { background: rgba(var(--lc-warn-rgb), 0.14); color: var(--lc-warn); }
.lc-stat--info .lc-stat__val { color: var(--lc-info); }
.lc-stat--info .lc-stat__icon { background: rgba(var(--lc-info-rgb), 0.14); color: var(--lc-info); }
.lc-stat--ok .lc-stat__val { color: var(--lc-ok); }
.lc-stat--ok .lc-stat__icon { background: rgba(var(--lc-ok-rgb), 0.14); color: var(--lc-ok); }
.lc-stat--err .lc-stat__val { color: var(--lc-err); }
.lc-stat--err .lc-stat__icon { background: rgba(var(--lc-err-rgb), 0.14); color: var(--lc-err); }
.lc-stat--purple .lc-stat__val { color: var(--lc-purple); }
.lc-stat--purple .lc-stat__icon { background: rgba(var(--lc-purple-rgb), 0.14); color: var(--lc-purple); }
.lc-stat--accent .lc-stat__val { color: var(--lc-accent); }
.lc-stat--accent .lc-stat__icon { background: rgba(var(--lc-accent-rgb), 0.14); color: var(--lc-accent); }

/* ── Grid responsivo de cards (única vista: móvil y desktop) ───────────────── */
.lc-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    /* stretch → todas las cards de una misma fila comparten altura (retícula
       limpia, sin bordes inferiores desparejos). El footer se ancla abajo. */
    align-items: stretch;
}

/* 2 columnas desde tablet: evita filas kilométricas con el contenido pegado
   a los extremos y un vacío enorme en medio (longitud de línea legible). */
@media (min-width: 700px) {
    .lc-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }
}

@media (min-width: 1440px) {
    .lc-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    /* Cards altas (p. ej. Mis asignaciones): tope de 2 columnas. */
    .lc-grid--max2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Cola de prioridad (Centro de lavado): siempre una columna, centrada. */
.lc-grid--cola {
    grid-template-columns: 1fr !important;
    max-width: 760px;
    margin: 0 auto;
    width: 100%;
}

/* ── Card de listado ───────────────────────────────────────────────────────── */
.lc-card {
    background: var(--ic-surface, #1A282E);
    border: 1px solid var(--ic-border, rgba(148, 163, 184, 0.2));
    border-radius: var(--ic-radius-lg, 16px);
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    -webkit-tap-highlight-color: transparent;
}

.lc-card--clickable {
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.lc-card--clickable:hover {
    border-color: rgba(var(--lc-accent-rgb), 0.35);
    background: rgba(var(--lc-accent-rgb), 0.04);
}

.lc-card--clickable:active {
    background: rgba(var(--lc-accent-rgb), 0.08);
}

.lc-card__top {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    min-width: 0;
}

.lc-card__id {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--ic-text-tertiary, #9DB0B8);
    white-space: nowrap;
}

.lc-card__monto {
    margin-left: auto;
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--ic-text, #F2F7FB);
    white-space: nowrap;
}

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

.lc-card__title {
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--ic-text, #F2F7FB);
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.lc-card__sub {
    font-size: 0.9375rem;
    color: var(--ic-muted, #C5D0D6);
    line-height: 1.35;
}

.lc-card__meta {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

.lc-card__meta--row {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 6px 14px;
}

.lc-card__meta-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.875rem;
    color: var(--ic-muted, #C5D0D6);
    min-width: 0;
}

.lc-card__meta-item .mud-icon-root {
    font-size: 1.0625rem;
    opacity: 0.65;
    flex-shrink: 0;
}

.lc-card__meta-item--ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

.lc-card__meta-item--warn {
    color: var(--lc-warn);
}

.lc-card__link {
    color: var(--lc-accent);
    text-decoration: none;
    font-weight: 600;
}

.lc-card__link:hover {
    text-decoration: underline;
}

.lc-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding-top: 10px;
    /* auto → con cards de altura pareja (grid stretch) el footer se ancla
       abajo y todos los footers de la fila quedan alineados. */
    margin-top: auto;
    border-top: 1px solid var(--ic-border, rgba(148, 163, 184, 0.12));
}

.lc-card__footer-note {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.875rem;
    color: var(--ic-text-tertiary, #9DB0B8);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lc-card__footer-note .mud-icon-root {
    font-size: 1rem;
    opacity: 0.7;
    flex-shrink: 0;
}

.lc-card__actions {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    flex-shrink: 0;
}

/* Botones con texto dentro de cards: target táctil cómodo sin inflar la card. */
.lc-card__actions .mud-button-root {
    min-height: 44px;
    border-radius: 12px;
    text-transform: none;
    font-weight: 600;
}

.lc-card__actions .mud-icon-button {
    width: 44px;
    height: 44px;
}

/* ── Card-fila con avatar (Empleados, Asistencias) ─────────────────────────── */
.lc-row {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--ic-surface, #1A282E);
    border: 1px solid var(--ic-border, rgba(148, 163, 184, 0.2));
    border-radius: var(--ic-radius-lg, 16px);
    padding: 12px 14px;
    min-width: 0;
    -webkit-tap-highlight-color: transparent;
}

.lc-row__avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.0625rem;
    font-weight: 700;
    flex-shrink: 0;
    background: rgba(var(--lc-accent-rgb), 0.14);
    color: var(--lc-accent);
    user-select: none;
}

.lc-row__avatar--ok { background: rgba(var(--lc-ok-rgb), 0.14); color: var(--lc-ok); }
.lc-row__avatar--warn { background: rgba(var(--lc-warn-rgb), 0.14); color: var(--lc-warn); }
.lc-row__avatar--purple { background: rgba(var(--lc-purple-rgb), 0.14); color: var(--lc-purple); }
.lc-row__avatar--teal { background: rgba(var(--lc-teal-rgb), 0.14); color: var(--lc-teal); }
.lc-row__avatar--neutral { background: rgba(var(--lc-neutral-rgb), 0.14); color: var(--lc-neutral); }
.lc-row__avatar--err { background: rgba(var(--lc-err-rgb), 0.14); color: var(--lc-err); }
.lc-row__avatar--info { background: rgba(var(--lc-info-rgb), 0.14); color: var(--lc-info); }
.lc-row__avatar--accent { background: rgba(var(--lc-accent-rgb), 0.14); color: var(--lc-accent); }

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

.lc-row__name {
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--ic-text, #F2F7FB);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Nombre de respaldo (teléfono como apodo, o sin nombre): peso normal y atenuado
   para que no compita con los nombres reales. */
.lc-row__name--placeholder {
    font-weight: 500;
    color: var(--ic-text-tertiary, #9DB0B8);
}

.lc-row__detail {
    font-size: 0.875rem;
    color: var(--ic-muted, #C5D0D6);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lc-row__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
}

.lc-row__right {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.lc-row__right .mud-button-root {
    min-height: 44px;
    border-radius: 12px;
    text-transform: none;
    font-weight: 600;
}

.lc-row__right .mud-icon-button {
    width: 44px;
    height: 44px;
}

/* ── Chips de estado semánticos ────────────────────────────────────────────── */
.lc-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    white-space: nowrap;
    flex-shrink: 0;
    border: 1px solid transparent;
}

.lc-chip .mud-icon-root {
    font-size: 0.9375rem;
}

.lc-chip--warn { background: rgba(var(--lc-warn-rgb), 0.14); color: var(--lc-warn); border-color: rgba(var(--lc-warn-rgb), 0.3); }
.lc-chip--info { background: rgba(var(--lc-info-rgb), 0.14); color: var(--lc-info); border-color: rgba(var(--lc-info-rgb), 0.3); }
.lc-chip--ok { background: rgba(var(--lc-ok-rgb), 0.14); color: var(--lc-ok); border-color: rgba(var(--lc-ok-rgb), 0.3); }
.lc-chip--err { background: rgba(var(--lc-err-rgb), 0.14); color: var(--lc-err); border-color: rgba(var(--lc-err-rgb), 0.3); }
.lc-chip--neutral { background: rgba(var(--lc-neutral-rgb), 0.14); color: var(--lc-neutral); border-color: rgba(var(--lc-neutral-rgb), 0.3); }
.lc-chip--purple { background: rgba(var(--lc-purple-rgb), 0.14); color: var(--lc-purple); border-color: rgba(var(--lc-purple-rgb), 0.3); }
.lc-chip--teal { background: rgba(var(--lc-teal-rgb), 0.14); color: var(--lc-teal); border-color: rgba(var(--lc-teal-rgb), 0.3); }
.lc-chip--primary { background: rgba(var(--lc-accent-rgb), 0.14); color: var(--lc-accent); border-color: rgba(var(--lc-accent-rgb), 0.3); }

/* Parciales / secundarios: borde punteado (mismo recurso que renta-chip). */
.lc-chip--dashed {
    border-style: dashed;
    background: transparent;
}

/* ── Skeletons + empty state ───────────────────────────────────────────────── */
@keyframes lc-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.45; }
}

.lc-sk {
    background: var(--ic-surface-2, #243640);
    border-radius: 8px;
    animation: lc-pulse 1.4s ease-in-out infinite;
}

.lc-sk-card {
    background: var(--ic-surface, #1A282E);
    border: 1px solid var(--ic-border, rgba(148, 163, 184, 0.2));
    border-radius: var(--ic-radius-lg, 16px);
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.lc-sk-row {
    background: var(--ic-surface, #1A282E);
    border: 1px solid var(--ic-border, rgba(148, 163, 184, 0.2));
    border-radius: var(--ic-radius-lg, 16px);
    padding: 12px 14px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.lc-sk-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    flex-shrink: 0;
}

.lc-sk-line {
    height: 12px;
}

.lc-sk-line--wide { width: 78%; }
.lc-sk-line--mid { width: 55%; }
.lc-sk-line--narrow { width: 32%; }

.lc-sk-pill {
    height: 26px;
    width: 96px;
    border-radius: 20px;
}

.lc-sk-stat {
    height: 64px;
    border-radius: var(--ic-radius-md, 12px);
}

@media (prefers-reduced-motion: reduce) {
    .lc-sk,
    .lc-sk-avatar,
    .lc-sk-line,
    .lc-sk-pill,
    .lc-sk-stat {
        animation: none;
    }
}

.lc-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    padding: 48px 20px;
}

.lc-empty__icon {
    color: var(--ic-text-tertiary, #9DB0B8);
    opacity: 0.55;
}

.lc-empty__icon .mud-icon-root {
    font-size: 46px;
}

.lc-empty__title {
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--ic-text, #F2F7FB);
}

.lc-empty__sub {
    font-size: 0.9375rem;
    color: var(--ic-muted, #C5D0D6);
    max-width: 420px;
    line-height: 1.4;
}

/* Alias legado: la barra de filtros de Subarriendos. Estas clases NUNCA se
   declararon en una hoja: vivían en el <style> sin scope de Rentas.razor y se
   filtraban a toda la app mientras /rentas estuviera montada, así que
   Subarriendos sólo se veía bien si habías pasado antes por el listado. Al
   migrar /rentas a .rr-* el <style> desapareció y con él la barra ajena.
   Se conservan tal cual estaban; si Subarriendos se rediseña, migran a
   .lc-toolbar y este bloque se borra. */
.rentas-filters {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.rentas-filters__search {
    flex: 1;
    min-width: 200px;
}

.rentas-filters__field { width: 100%; }

.rentas-filters__selects {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.rentas-filters__select { min-width: 140px; }

.rentas-filters__icon-btn { border-radius: 10px !important; }

/* Alias legado: varias páginas (Subarriendos, Finanzas/Resumen, Ventas…) usan
   .rentas-empty; algunas sin definirlo inline. Definición global de respaldo. */
.rentas-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 8px;
    padding: 3rem 1rem;
}

.rentas-empty__icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(148, 163, 184, 0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 4px;
}

.rentas-empty__title {
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--ic-text, #F2F7FB);
}

.rentas-empty__sub {
    margin: 0;
    font-size: 0.9375rem;
    color: var(--ic-muted, #C5D0D6);
    max-width: 420px;
}

/* ── Separador de sección dentro de un listado (Hoy / Ayer / Anteriores…) ──── */
.lc-section-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 2px;
    margin: 14px 0 10px;
}

.lc-section-header:first-child {
    margin-top: 0;
}

.lc-section-header__label {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--ic-muted, #C5D0D6);
    white-space: nowrap;
    flex-shrink: 0;
}

.lc-section-header::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--ic-border, rgba(148, 163, 184, 0.2));
    opacity: 0.7;
}

/* ── "Cargar más" (sustituye la paginación de tabla) ───────────────────────── */
.lc-more {
    appearance: none;
    width: 100%;
    min-height: 48px;
    margin-top: 10px;
    border: 1px dashed var(--ic-border, rgba(148, 163, 184, 0.3));
    border-radius: var(--ic-radius-md, 12px);
    background: var(--ic-surface, #1A282E);
    color: var(--ic-muted, #C5D0D6);
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease;
    touch-action: manipulation;
}

.lc-more:hover {
    border-color: rgba(var(--lc-accent-rgb), 0.45);
    color: var(--lc-accent);
}

.lc-count {
    text-align: center;
    font-size: 0.8125rem;
    color: var(--ic-text-tertiary, #9DB0B8);
    margin-top: 8px;
}

/* ── Contador de unidades (− N +) ───────────────────────────────────────────
   Para las cosas de las que el negocio sólo lleva la cuenta: motores, extensiones,
   mangueras, lonas. Un toque por unidad, sin teclado ni formulario.

   Hereda el lenguaje visual del stepper del checklist (.cl-stepper, declarado inline
   en ChecklistItemCard) pero con targets de 52px y sin tope superior: el inventario
   es abierto y el piso lo marca lo comprometido en rentas, no un máximo.
   Se declara aquí en vez de refactorizar aquél porque el checklist es ruta operativa
   crítica y no vale la pena arriesgarla por deduplicar unas reglas.                */
.lc-stepper {
    display: inline-flex;
    align-items: stretch;
    gap: 8px;
    flex-shrink: 0;
}

.lc-stepper__btn,
.lc-stepper__val {
    min-width: 52px;
    min-height: 52px;
    border-radius: var(--ic-radius-md, 12px);
    border: 1px solid var(--ic-border, rgba(148, 163, 184, 0.2));
    background: var(--ic-surface-2, rgba(148, 163, 184, 0.08));
    color: var(--ic-text, #E8EEF1);
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
    transition: background .12s, border-color .12s, color .12s, transform .08s;
}

.lc-stepper__btn {
    cursor: pointer;
}

.lc-stepper__btn:hover:not(:disabled) {
    background: rgba(var(--lc-accent-rgb), 0.12);
    border-color: rgba(var(--lc-accent-rgb), 0.45);
}

.lc-stepper__btn:active:not(:disabled) {
    transform: scale(.96);
}

/* Tope alcanzado: gris tachado, no rojo. No es un error, es que ya no se puede. */
.lc-stepper__btn:disabled {
    cursor: not-allowed;
    background: rgba(148, 163, 184, 0.06);
    border-color: rgba(148, 163, 184, 0.18);
    color: var(--ic-text-tertiary, #9DB0B8);
    position: relative;
}

.lc-stepper__btn:disabled::after {
    content: '';
    position: absolute;
    left: 28%;
    right: 28%;
    top: 50%;
    border-top: 2px solid currentColor;
    transform: rotate(-22deg);
    opacity: .5;
    pointer-events: none;
}

.lc-stepper__val {
    font-size: 1.3rem;
    font-variant-numeric: tabular-nums;
    min-width: 72px;
    cursor: default;
}

/* Cantidad heredada de la plantilla, que el dueño nunca contó: borde discontinuo y
   número atenuado. Al primer toque en −/+ la clase desaparece y el número se
   solidifica — el gesto de tocar ES la confirmación, sin una sola palabra. */
.lc-stepper--sinconfirmar .lc-stepper__val {
    border-style: dashed;
    border-color: rgba(var(--lc-warn-rgb), 0.55);
    color: var(--lc-warn);
}

.lc-stepper--guardando .lc-stepper__val {
    opacity: .55;
}

/* Cuando la cifra es tecleable (CantidadEditable), el cursor tiene que decirlo: la
   regla base de arriba la deja en `default` y esta hoja carga DESPUÉS de app.css,
   así que el cursor del componente no llegaba. Y el campo abierto necesita su
   propia señal, porque el recuadro de la caja lo hereda igual que el botón. */
.lc-stepper__val.ic-cantedit--boton { cursor: text; }

.lc-stepper__val.ic-cantedit__input:focus {
    border-color: var(--ic-primary);
    outline: none;
}

/* Fila de conteo: foto/ícono + nombre + contador. */
.lc-conteo {
    display: flex;
    align-items: center;
    gap: var(--ic-space-3, 12px);
    padding: var(--ic-space-3, 12px);
    background: var(--ic-surface, #1A282E);
    border: 1px solid var(--ic-border, rgba(148, 163, 184, 0.2));
    border-radius: var(--ic-radius-lg, 16px);
}

.lc-conteo--sinconfirmar {
    border-left: 3px solid var(--lc-warn);
}

.lc-conteo__media {
    width: 48px;
    height: 48px;
    border-radius: var(--ic-radius-md, 12px);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--lc-accent-rgb), 0.12);
    color: var(--lc-accent);
    overflow: hidden;
}

.lc-conteo__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.lc-conteo__body {
    flex: 1;
    min-width: 0;
}

.lc-conteo__name {
    font-size: var(--ic-text-md, 0.9375rem);
    font-weight: 600;
    color: var(--ic-text, #E8EEF1);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lc-conteo__grupo {
    font-size: var(--ic-text-xs, 0.75rem);
    color: var(--ic-muted, #9DB0B8);
}

/* Editar la ficha (nombre, grupo, foto). Secundario frente al contador, que es lo que
   se toca todos los días; por eso va atenuado hasta que se apunta. */
.lc-conteo__editar {
    flex-shrink: 0;
    color: var(--ic-text-tertiary, #9DB0B8);
}

.lc-conteo__editar:hover {
    color: var(--lc-accent);
}

/* En teléfono el contador baja a su propia línea para no comprimir el nombre. */
@media (max-width: 480px) {
    .lc-conteo {
        flex-wrap: wrap;
    }

    .lc-conteo__body {
        flex: 1 1 calc(100% - 60px);
    }

    .lc-conteo .lc-stepper {
        margin-left: auto;
    }
}

/* ── Hoja/panel dentro de MudOverlay (Centro de lavado) ────────────────────── */
.lc-sheet {
    background: var(--ic-surface, #1A282E);
    border: 1px solid var(--ic-border, rgba(148, 163, 184, 0.2));
    border-radius: var(--ic-radius-lg, 16px);
    box-shadow: var(--ic-shadow, 0 4px 24px rgba(0, 0, 0, 0.4));
    width: min(560px, 94vw);
    max-height: 86dvh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.lc-sheet__header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 16px 10px;
    flex-shrink: 0;
}

.lc-sheet__icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: rgba(var(--lc-accent-rgb), 0.14);
    color: var(--lc-accent);
}

.lc-sheet__titles {
    min-width: 0;
}

.lc-sheet__title {
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--ic-text, #F2F7FB);
}

.lc-sheet__sub {
    font-size: 0.875rem;
    color: var(--ic-muted, #C5D0D6);
}

.lc-sheet__body {
    padding: 4px 16px 12px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    flex: 1;
    min-height: 0;
}

.lc-sheet__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--ic-border, rgba(148, 163, 184, 0.12));
    flex-shrink: 0;
}

/* ── Skin de diálogos (lcd) ────────────────────────────────────────────────
   Uso: <MudDialog Class="lcd"> (MudBlazor pone la clase en .mud-dialog) o un
   wrapper .lcd alrededor del contenido si el diálogo no es MudDialog. */
.mud-dialog.lcd,
.lcd .mud-dialog {
    border-radius: 20px;
    background: var(--ic-surface, #1A282E);
}

.mud-dialog.lcd .mud-dialog-title,
.lcd .mud-dialog-title {
    padding: 20px 20px 4px;
}

.mud-dialog.lcd .mud-dialog-content,
.lcd .mud-dialog-content {
    padding: 12px 20px;
}

.mud-dialog.lcd .mud-dialog-actions,
.lcd .mud-dialog-actions {
    padding: 12px 20px 16px;
    border-top: 1px solid var(--ic-border, rgba(148, 163, 184, 0.12));
    gap: 8px;
}

/* En teléfono, el diálogo se comporta como bottom-sheet. */
@media (max-width: 599px) {
    .mud-dialog.lcd:not(.mud-dialog-fullscreen) {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        margin: 0;
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 20px 20px 0 0;
        max-height: 92dvh;
        display: flex;
        flex-direction: column;
    }

    .mud-dialog.lcd:not(.mud-dialog-fullscreen) .mud-dialog-content {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        flex: 1;
        min-height: 0;
    }

    .mud-dialog.lcd:not(.mud-dialog-fullscreen) .mud-dialog-actions {
        padding-bottom: calc(16px + env(safe-area-inset-bottom));
    }
}

/* ── Módulo de inversionistas: diálogos senior-friendly ──
   La clase inv-dialog acompaña a lcd. Sube los inputs a piso senior (17px, evita
   zoom en iOS y es legible para adultos mayores; espejo de onboarding.css) y, en
   teléfono, CENTRA el diálogo en vez del bottom-sheet de .lcd (dirección más
   reciente del proyecto, ver ProductoWizardV2). No afecta a otros diálogos .lcd. */
.inv-dialog .mud-input > input.mud-input-slot,
.inv-dialog .mud-input > textarea.mud-input-slot,
.inv-dialog .mud-input .mud-select-input {
    font-size: 1.0625rem;
}
.inv-dialog .mud-input-label {
    font-size: 1.0625rem;
}

@media (max-width: 599px) {
    .mud-dialog-container:has(.mud-dialog.inv-dialog) {
        align-items: center;
    }
    .mud-dialog.lcd.inv-dialog:not(.mud-dialog-fullscreen) {
        position: static;
        left: auto;
        right: auto;
        bottom: auto;
        margin: 0 8px;
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 16px;
        max-height: 92vh;
    }
    .mud-dialog.lcd.inv-dialog:not(.mud-dialog-fullscreen) .mud-dialog-actions {
        padding-bottom: 16px;
    }
}

.lcd-header {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.lcd-header__icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: rgba(var(--lc-accent-rgb), 0.14);
    color: var(--lc-accent);
}

.lcd-header__icon--warn { background: rgba(var(--lc-warn-rgb), 0.14); color: var(--lc-warn); }
.lcd-header__icon--ok { background: rgba(var(--lc-ok-rgb), 0.14); color: var(--lc-ok); }
.lcd-header__icon--err { background: rgba(var(--lc-err-rgb), 0.14); color: var(--lc-err); }
.lcd-header__icon--info { background: rgba(var(--lc-info-rgb), 0.14); color: var(--lc-info); }

.lcd-header__titles {
    min-width: 0;
}

.lcd-header__title {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--ic-text, #F2F7FB);
    line-height: 1.25;
}

.lcd-header__sub {
    font-size: 0.875rem;
    color: var(--ic-muted, #C5D0D6);
    margin-top: 1px;
}

/* Card de resumen dentro del diálogo (quién/qué/cuánto). */
.lcd-summary {
    background: var(--ic-surface-2, #243640);
    border: 1px solid var(--ic-border, rgba(148, 163, 184, 0.12));
    border-radius: var(--ic-radius-md, 12px);
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin-bottom: 4px;
}

.lcd-summary__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    font-size: 0.9375rem;
    min-width: 0;
}

.lcd-summary__label {
    color: var(--ic-muted, #C5D0D6);
    flex-shrink: 0;
}

.lcd-summary__value {
    color: var(--ic-text, #F2F7FB);
    font-weight: 600;
    text-align: right;
    overflow-wrap: anywhere;
}

.lcd-summary__value--strong {
    font-size: 1.0625rem;
    font-weight: 700;
}

.lcd-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 14px;
}

.lcd-section__title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ic-text-tertiary, #9DB0B8);
}

/* Radio-cards de opciones (cambiar estado, rol, método de pago). */
.lcd-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.lcd-option {
    appearance: none;
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 52px;
    padding: 10px 14px;
    text-align: left;
    border: 1.5px solid var(--ic-border, rgba(148, 163, 184, 0.2));
    border-radius: var(--ic-radius-md, 12px);
    background: var(--ic-surface, #1A282E);
    color: var(--ic-text, #F2F7FB);
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.lcd-option:hover {
    border-color: rgba(var(--lc-accent-rgb), 0.4);
}

.lcd-option--selected {
    border-color: rgba(var(--lc-accent-rgb), 0.65);
    background: var(--ic-primary-dim, rgba(10, 132, 255, 0.15));
}

.lcd-option__icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: var(--ic-surface-2, #243640);
    color: var(--ic-muted, #C5D0D6);
}

.lcd-option__icon--warn { background: rgba(var(--lc-warn-rgb), 0.14); color: var(--lc-warn); }
.lcd-option__icon--ok { background: rgba(var(--lc-ok-rgb), 0.14); color: var(--lc-ok); }
.lcd-option__icon--err { background: rgba(var(--lc-err-rgb), 0.14); color: var(--lc-err); }
.lcd-option__icon--info { background: rgba(var(--lc-info-rgb), 0.14); color: var(--lc-info); }
.lcd-option__icon--purple { background: rgba(var(--lc-purple-rgb), 0.14); color: var(--lc-purple); }
.lcd-option__icon--accent { background: rgba(var(--lc-accent-rgb), 0.14); color: var(--lc-accent); }

.lcd-option__body {
    flex: 1;
    min-width: 0;
}

.lcd-option__title {
    display: block;
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.3;
}

.lcd-option__desc {
    display: block;
    font-size: 0.8125rem;
    color: var(--ic-muted, #C5D0D6);
    line-height: 1.35;
    margin-top: 1px;
}

.lcd-option__check {
    flex-shrink: 0;
    color: var(--lc-accent);
    opacity: 0;
    transition: opacity 0.15s ease;
}

.lcd-option--selected .lcd-option__check {
    opacity: 1;
}

/* Botones segmentados (porcentajes de apartado, etc.). */
.lcd-segmented {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.lcd-segment {
    appearance: none;
    flex: 1 1 0;
    min-height: 44px;
    min-width: 64px;
    padding: 0 10px;
    border: 1px solid var(--ic-border, rgba(148, 163, 184, 0.2));
    border-radius: 12px;
    background: var(--ic-surface, #1A282E);
    color: var(--ic-muted, #C5D0D6);
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    white-space: nowrap;
}

.lcd-segment:hover {
    border-color: rgba(var(--lc-accent-rgb), 0.4);
}

.lcd-segment--active {
    background: var(--ic-primary-dim, rgba(10, 132, 255, 0.15));
    border-color: rgba(var(--lc-accent-rgb), 0.55);
    color: var(--lc-accent);
}

/* CTA del diálogo: grande y sin mayúsculas gritonas. */
.lcd-cta {
    min-height: 48px !important;
    border-radius: 12px !important;
    font-weight: 700 !important;
    text-transform: none !important;
    padding: 0 20px !important;
}

.lcd-cancel {
    min-height: 48px !important;
    text-transform: none !important;
}

/* ── Gasto rápido (GastoRapidoSheet) ──
   Continuación del skin .lcd-* de arriba: ese diálogo es un `lcd`. Vive aquí y no en un
   bloque <style> del .razor porque ahí no tendría scope y el banco no podría reproducirlo. */

/* Acciones secundarias en texto: "Me dieron factura", "Cambiar fecha", "Deshacer".
   48px y no 32: se tocan con guantes de carga y a pleno sol (ver --ic-touch-min). */
.gr-link {
    background: none;
    border: none;
    padding: 4px 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--mud-palette-primary);
    min-height: var(--ic-touch-min);
}

/* --lc-err y no un rojo fijo: #F87171 está pensado para fondo oscuro y sobre la superficie
   clara da ~2.8:1, que reprueba AA justo en el aviso de que un gasto se perdió. */
.gr-link--danger {
    color: var(--lc-err);
}

.gr-lista {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.gr-fila {
    display: flex;
    align-items: center;
    gap: 8px;
    border-top: 1px solid var(--ic-border);
    padding-top: 4px;
}

.gr-fila--err .gr-fila__txt,
.gr-fila--err .gr-fila__monto {
    color: var(--lc-err);
}

.gr-fila__txt {
    flex: 1;
    min-width: 0;
    font-size: 0.85rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gr-fila__monto {
    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». */
    font-size: 0.9rem;
}

.gr-fila__aviso {
    font-size: 0.75rem;
    color: var(--lc-err);
    font-weight: 600;
}

/* ── Hoja de elección de período (PeriodoPickerSheet) ──
   GLOBAL, no scoped: MudDialog se portala al MudPopoverProvider, fuera del árbol del
   componente, así que un .razor.css nunca alcanzaría estas clases.
   Elegir un mes es UN toque aquí dentro: no hay botón "Aplicar". */

.ic-per-sheet__anio {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 12px;
}

.ic-per-sheet__anio-btn {
    appearance: none;
    width: 48px;
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--ic-border, rgba(148, 163, 184, 0.2));
    border-radius: var(--ic-radius-md, 12px);
    background: var(--ic-surface, #1A282E);
    color: var(--ic-text, #F2F7FB);
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.ic-per-sheet__anio-btn:disabled {
    opacity: 0.3;
    cursor: default;
}

.ic-per-sheet__anio-txt {
    min-width: 88px;
    text-align: center;
    font-size: var(--ic-text-xl, 1.25rem);
    font-weight: 700;
    color: var(--ic-text, #F2F7FB);
    font-variant-numeric: tabular-nums;
}

/* Rejilla de 12 meses: 3 columnas caben cómodas hasta en 320px, y con 4 filas la hoja no
   necesita scroll en un teléfono normal. */
.ic-per-sheet__meses {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.ic-per-sheet__mes {
    appearance: none;
    /* 56px: por encima del piso de 48px. Es el control que se toca para todo aquí dentro. */
    min-height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid var(--ic-border, rgba(148, 163, 184, 0.2));
    border-radius: var(--ic-radius-md, 12px);
    background: var(--ic-surface, #1A282E);
    color: var(--ic-text, #F2F7FB);
    font-size: var(--ic-text-md, 0.9375rem);
    font-weight: 600;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.ic-per-sheet__mes:hover:not(:disabled) {
    border-color: rgba(var(--lc-accent-rgb), 0.4);
}

.ic-per-sheet__mes.is-active {
    border-color: rgba(var(--lc-accent-rgb), 0.65);
    background: var(--ic-primary-dim, rgba(10, 132, 255, 0.15));
}

/* Meses que aún no ocurren: se dejan visibles (dan contexto del año) pero apagados. */
.ic-per-sheet__mes:disabled {
    opacity: 0.32;
    cursor: default;
}

.ic-per-sheet__otros {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--ic-border, rgba(148, 163, 184, 0.15));
}

/* Salida explícita. Tocar fuera funciona, pero ese gesto no se ve: sin una salida visible,
   quien no lo conoce se siente atrapado (mismo criterio que el selector de lada). */
.ic-per-sheet__volver {
    appearance: none;
    width: 100%;
    min-height: 48px;
    margin-top: 12px;
    border: 0;
    border-radius: var(--ic-radius-md, 12px);
    background: transparent;
    color: var(--ic-muted, #C5D0D6);
    font-size: var(--ic-text-md, 0.9375rem);
    font-weight: 600;
    cursor: pointer;
    touch-action: manipulation;
}

.ic-per-sheet__volver:hover {
    background: var(--ic-surface-2, #243640);
}

.ic-per-sheet__cal {
    width: 100%;
}

.ic-per-sheet__cal .mud-picker-container {
    margin: 0 auto;
}

.ic-per-sheet__anio-btn:focus-visible,
.ic-per-sheet__mes:focus-visible,
.ic-per-sheet__volver:focus-visible {
    outline: 2px solid var(--mud-palette-primary, #5563E0);
    outline-offset: 2px;
}

/* Timeline simple (auditoría de asistencias). */
.lcd-timeline {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.lcd-timeline__item {
    display: flex;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--ic-border, rgba(148, 163, 184, 0.1));
}

.lcd-timeline__item:last-child {
    border-bottom: none;
}

.lcd-timeline__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--lc-accent);
    margin-top: 6px;
    flex-shrink: 0;
}

.lcd-timeline__body {
    flex: 1;
    min-width: 0;
}

.lcd-timeline__when {
    font-size: 0.8125rem;
    color: var(--ic-text-tertiary, #9DB0B8);
}

.lcd-timeline__what {
    font-size: 0.9375rem;
    color: var(--ic-text, #F2F7FB);
    font-weight: 600;
    margin: 2px 0;
}

.lcd-timeline__detail {
    font-size: 0.875rem;
    color: var(--ic-muted, #C5D0D6);
    line-height: 1.35;
}

/* ── Accesibilidad: foco visible en todos los controles lc/lcd ─────────────── */
.lc-filter-chip:focus-visible,
.lc-stat:focus-visible,
.lc-card--clickable:focus-visible,
.lc-more:focus-visible,
.lcd-option:focus-visible,
.lcd-segment:focus-visible {
    outline: 2px solid rgba(var(--lc-accent-rgb), 0.75);
    outline-offset: 2px;
}

/* ── /gestion-asistencias: header compacto ──────────────────────────────────
   El header de viewport no scrollea; cada px fijo cuesta. La triple clase
   .gasis-page .ic-ph.ic-ph--list (0,3,0) le gana al scoped .ic-ph--list[b-…]. */
.gasis-page .ic-ph.ic-ph--list {
    margin-bottom: 8px;
}

/* ── Cierre de la renta recién agendada (.rcd-) ───────────────────────────────
   Un solo gesto con peso —escribirle al cliente— y el resto en voz baja. El
   verde es el de WhatsApp, no un estado del sistema: aquí SÍ identifica a la
   aplicación que se va a abrir, que es lo que hace reconocible el botón. */

/* Franja de estado del WhatsApp automático. Informativa, no interactiva: no reserva alto táctil
   —no se toca— pero sí se alinea con el resumen de arriba. El color entra por `color` y el punto
   lo hereda con currentColor, así que cada modificador es una sola línea. */
.rcd-estado {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: var(--ic-radius-md, 12px);
    border: 1px solid var(--ic-border);
    background: var(--ic-surface-2);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ic-text-tertiary);
}

.rcd-estado__punto {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
    flex: 0 0 auto;
}

/* Tinta primaria y no terciaria: el motivo es prosa que el dueño TIENE que leer para saber qué
   hacer, y medido en tema claro la terciaria sobre estos tintes daba 4.17-4.41 —por debajo del
   4.5 de AA a 14px—. De paso separa el qué pasó (en color de estado) del por qué (en tinta). */
.rcd-estado__motivo {
    flex: 1 1 100%;
    color: var(--ic-text);
    font-weight: 400;
}

.rcd-estado--espera { color: var(--lc-neutral); }
.rcd-estado--espera .rcd-estado__punto { animation: lc-pulse 1.4s ease-in-out infinite; }

.rcd-estado--ok {
    color: var(--lc-ok);
    border-color: rgba(var(--lc-ok-rgb), 0.35);
    background: rgba(var(--lc-ok-rgb), 0.10);
}

.rcd-estado--leido {
    color: var(--lc-info);
    border-color: rgba(var(--lc-info-rgb), 0.35);
    background: rgba(var(--lc-info-rgb), 0.10);
}

.rcd-estado--falla {
    color: var(--lc-err);
    border-color: rgba(var(--lc-err-rgb), 0.35);
    background: rgba(var(--lc-err-rgb), 0.10);
}

.rcd-estado--omitido {
    color: var(--lc-warn);
    border-color: rgba(var(--lc-warn-rgb), 0.35);
    background: rgba(var(--lc-warn-rgb), 0.10);
}

/* Sin color de estado porque no hay estado que reportar; tinta primaria porque el titular sigue
   siendo el mensaje principal de la franja (la terciaria daba 4.21 en claro). */
.rcd-estado--nosabemos { color: var(--ic-text); }

/* El bloque global de prefers-reduced-motion (arriba, ~:735) sólo lista los .lc-sk*, y aunque lo
   listara no bastaría: la regla del pulso es (0,2,0) y la de allí sería (0,1,0), así que ganaría
   el pulso por especificidad sin importar el orden. Por eso el apagado va aquí y con la misma. */
@media (prefers-reduced-motion: reduce) {
    .rcd-estado--espera .rcd-estado__punto { animation: none; }
}

/* Aviso de cupo del plan («Te quedan 2 rentas este mes…»). Ámbar de aviso, no rojo: la renta
   SÍ se guardó y todavía quedan; el rojo aquí se leería como que algo falló. Sin alto táctil en
   la franja —no se toca— pero el enlace sí lo reserva (--ic-touch-min): es el único gesto. */
.rcd-cupo {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: var(--ic-radius-md, 12px);
    border: 1px solid rgba(var(--lc-warn-rgb), 0.35);
    background: rgba(var(--lc-warn-rgb), 0.10);
    color: var(--ic-text);
    font-size: 0.875rem;
}

.rcd-cupo__icono {
    flex: 0 0 auto;
    color: var(--lc-warn);
    margin-top: 2px;
}

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

.rcd-cupo__texto {
    line-height: 1.4;
}

/* El enlace es un <button> y no un <a>: cierra el diálogo devolviendo la ruta (ver el .razor).
   Se dibuja como enlace porque eso es lo que es para el dueño. */
.rcd-cupo__enlace {
    appearance: none;
    align-self: flex-start;
    min-height: var(--ic-touch-min, 48px);
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--lc-warn);
    font: inherit;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.rcd-cupo__enlace:hover { color: var(--ic-text); }

.rcd-acciones {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
}

.rcd-wa {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 52px;
    padding: 0 20px;
    border-radius: var(--ic-radius-md, 12px);
    background: rgba(var(--lc-ok-rgb), 0.16);
    border: 1px solid rgba(var(--lc-ok-rgb), 0.55);
    color: var(--lc-ok);
    font-size: 1rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}

.rcd-wa:hover { background: rgba(var(--lc-ok-rgb), 0.26); }

/* Cuando el automático ya cubrió al cliente, el gesto humano deja de ser el rescate y pasa a ser
   un extra: mismo control y mismo alto —se sigue tocando igual—, menos peso visual. */
.rcd-wa--suave {
    background: transparent;
    border-color: var(--ic-border);
    /* El mismo tono que .rcd-secundaria: en modo suave este enlace es un hermano de las otras
       acciones en voz baja, no un botón de marca. (--ic-text-secondary no existe como token.) */
    color: var(--ic-text-tertiary);
    font-weight: 600;
}

.rcd-wa--suave:hover { background: var(--ic-interactive-hover); }

/* El recibo del anticipo. Comparte control con el enlace de WhatsApp —mismo alto, mismo radio—
   pero va SIEMPRE con --suave, incluso cuando el recibo automático no salió: el verde de .rcd-wa
   identifica a WhatsApp y marca el único gesto con peso del diálogo, que es escribirle al cliente.
   Con los dos en verde compiten y dejan de decir cuál es cuál; lo que cambia según el hecho es el
   texto del botón, no su color.

   Los <button> no heredan la tipografía del documento, así que la regla de .rcd-wa —escrita para
   un <a>— deja el texto en la fuente del sistema. Eso es lo que arregla este bloque. */
button.rcd-wa {
    font-family: inherit;
    width: 100%;
}

button.rcd-wa:disabled {
    opacity: 0.6;
    cursor: default;
}

.rcd-secundarias {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

.rcd-secundaria {
    min-height: var(--ic-touch-min, 48px);
    padding: 0 14px;
    border-radius: var(--ic-radius-md, 12px);
    border: 1px solid var(--ic-border);
    background: transparent;
    color: var(--ic-text-tertiary);
    font-family: inherit;
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
}

.rcd-secundaria:hover { background: var(--ic-interactive-hover); }