/* renta-form: UI compartida (nueva renta / modificar renta). No editar a mano duplicando en .razor. */

    /* ── Tokens ──
       Superficies SÓLIDAS, no rgba(255,255,255,.04): esa translucidez sólo se lee
       sobre fondo oscuro y dejaba las tarjetas invisibles en tema claro. Los valores
       de aquí sirven en los dos temas; el claro sólo redefine la paleta más abajo. */
    .renta-form,
    .rq-dialog,
    /* El catálogo global reusa las clases rq-catacc/rq-prodcard de este archivo. */
    .cg-shell {
        --rq-surface:        var(--ic-surface, #1A282E);
        --rq-surface-2:      var(--ic-surface-2, #243640);
        --rq-card-bg:        var(--rq-surface);
        --rq-card-border:    var(--ic-border, rgba(148, 163, 184, 0.20));
        --rq-border-strong:  var(--ic-border, rgba(148, 163, 184, 0.32));
        --rq-text:           var(--ic-text, #E2E8F0);
        --rq-muted:          var(--ic-muted, #B8C4D6);
        --rq-subtle:         var(--ic-icon-muted, #8FA0AA);
        --rq-primary:        var(--ic-primary, #6C7DFF);
        --rq-primary-soft:   color-mix(in srgb, var(--rq-primary) 14%, transparent);
        --rq-flow-out:       var(--rq-primary);
        --rq-flow-in:        var(--ic-icon-muted, #A4B0C4);
        --rq-override-bar:   #F4B740;
        --rq-done:           #56D6A0;
        --rq-danger:         var(--mud-palette-error, #F44336);
        /* Tarjetas de énfasis (hero del parser, total). En claro son tinta sobre
           blanco; en oscuro NO pueden ser #0F172A —se perderían contra el fondo—,
           así que suben a la superficie elevada, como en la pantalla 1e del mockup. */
        --rq-ink:            var(--ic-surface-2, #243640);
        --rq-ink-border:     var(--ic-border, rgba(148, 163, 184, 0.20));
        --rq-radius:         14px;

        /* ── Avisos: cuatro alias, uno por significado (rediseño 2026-08-21) ──
           Salen de los --lc-*, que ya voltean solos con html[data-theme="light"];
           --rq-done (#56D6A0 crudo) y --rq-danger (--mud-palette-error) no lo hacían.
           El ámbar --rq-override-bar deja de avisar: se queda para el dinero. */
        --rq-sigue: var(--lc-neutral, #B0BEC5);  /* «lo que sigue» — al abrir, sin culpa */
        --rq-falta: var(--lc-err, #EF9A9A);      /* rojo — SÓLO tras intentar guardar o abandonar */
        --rq-listo: var(--lc-ok, #81C784);
        --rq-wa:    var(--lc-info, #64B5F6);     /* «lo saqué del mensaje» — mirada, no bloqueo */
        --rq-hair:  color-mix(in srgb, var(--rq-card-border) 70%, transparent);
    }

    /* Tema claro: mismas variables, paleta legible sobre blanco (AA). */
    html[data-theme="light"] .renta-form,
    html[data-theme="light"] .rq-dialog,
    html[data-theme="light"] .cg-shell {
        --rq-surface:       #FFFFFF;
        --rq-surface-2:     #F8FAFD;
        --rq-card-border:   #DDE3EE;
        --rq-border-strong: #C9D2E3;
        --rq-text:          #0F172A;
        --rq-muted:         #475569;
        --rq-subtle:        #64748B;
        --rq-primary:       var(--ic-primary);
        --rq-done:          #0B7A4B;
        --rq-override-bar:  #8A5A00;
        --rq-danger:        #B4231F;
        --rq-ink:           #0F172A;
        --rq-ink-border:    transparent;
    }

    /* ── Diálogo base ── */
    .rq-dialog .mud-dialog {
        max-width: 620px !important;
        width: 100% !important;
        border-radius: 20px !important;
    }

    .rq-dialog .mud-dialog-content {
        padding: 0 !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    .rq-dialog .mud-dialog-actions {
        padding: 12px 16px 16px !important;
        border-top: 1px solid rgba(148,163,184,0.1);
        gap: 8px;
        display: flex;
        align-items: center;
    }

    /*
      Barra de acciones «Nueva renta»: una sola fila (misma idea que edit-renta-bottombar).
      Columnas: izquierda · centro (copiar mensaje) · Cancelar · CTA.
    */
    .rq-dialog-actions {
        display: grid;
        width: 100%;
        min-width: 0;
        align-items: center;
        gap: 6px;
        flex: 1;
        grid-template-columns: auto 1fr auto auto;
    }

    .rq-dialog-actions__left {
        grid-column: 1;
        min-width: 0;
        justify-self: start;
    }

    .rq-dialog-actions__center {
        grid-column: 2;
        justify-self: center;
        min-width: 0;
        max-width: 100%;
    }

    .rq-dialog-actions__center .rq-action-btn {
        max-width: 100%;
    }

    .rq-dialog-actions__cancel {
        grid-column: 3;
        justify-self: end;
        min-width: 0;
    }

    .rq-dialog-actions__primary {
        grid-column: 4;
        justify-self: end;
        min-width: 0;
    }

    .rq-dialog-actions .rq-action-btn .mud-button-label {
        display: inline-flex !important;
        align-items: center;
        gap: 6px;
    }

    .rq-dialog-actions__ico {
        font-size: 1.25rem !important;
        flex-shrink: 0;
    }

    .rq-dialog-actions__ico--end {
        font-size: 1.125rem !important;
    }

    .rq-dialog-actions__spin {
        flex-shrink: 0;
    }

    @media (max-width: 959px) {
        .rq-dialog .mud-dialog-actions {
            padding-bottom: max(16px, calc(12px + env(safe-area-inset-bottom, 0px))) !important;
        }

        /* Que ningún botón fuerce overflow horizontal */
        .rq-dialog-actions .rq-action-btn {
            min-width: 0 !important;
            max-width: 100%;
        }

        /* CTA puede encogerse un poco; prioridad táctil igual que borde derecho del grid */
        .rq-dialog-actions__primary .rq-action-btn--next,
        .rq-dialog-actions__primary .rq-action-btn--submit {
            min-width: 0 !important;
        }
    }

    /* Muy estrecho: igual que modificar renta — solo iconos (aria-label en los botones). */
    @media (max-width: 599px) {
        .rq-dialog-actions .rq-dialog-actions__txt {
            display: none !important;
        }

        /* El botón central puede seguir mostrando texto corto sin romper el grid */
        .rq-dialog-actions__center .rq-dialog-actions__txt {
            display: inline !important;
        }

        .rq-dialog-actions__center .rq-action-btn {
            min-width: 0 !important;
            padding-left: 10px !important;
            padding-right: 10px !important;
            font-size: 0.8125rem !important;
        }

        .rq-dialog-actions .rq-action-btn {
            min-height: 48px !important;
            padding-left: 12px !important;
            padding-right: 12px !important;
        }

        .rq-dialog-actions__primary .rq-action-btn--next,
        .rq-dialog-actions__primary .rq-action-btn--submit {
            padding-left: 14px !important;
            padding-right: 14px !important;
        }
    }

    /* ── Tipografía: labels e inputs grandes (para legibilidad máxima) ── */
    .renta-form .mud-input-label,
    .rq-dialog .mud-input-label {
        font-size: 1rem !important;
        line-height: 1.4 !important;
    }

    .renta-form .mud-input-outlined input,
    .renta-form .mud-input-outlined textarea,
    .rq-dialog .mud-input-outlined input,
    .rq-dialog .mud-input-outlined textarea {
        font-size: 1.0625rem !important;
    }

    .renta-form .mud-select-input .mud-input-slot,
    .rq-dialog .mud-select-input .mud-input-slot {
        font-size: 1.0625rem !important;
    }

    .renta-form .mud-autocomplete .mud-input-outlined input,
    .rq-dialog .mud-autocomplete .mud-input-outlined input {
        font-size: 1.0625rem !important;
    }

    .renta-form .mud-input-helper-text,
    .rq-dialog .mud-input-helper-text {
        font-size: 0.875rem !important;
    }

    .renta-form .mud-checkbox .mud-button-label,
    .rq-dialog .mud-checkbox .mud-button-label {
        font-size: 1rem !important;
    }

    /* ── Barra de título del diálogo ── */
    .rq-title-bar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        gap: 8px;
    }

    .rq-title-bar__left {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .rq-title-bar__icon {
        font-size: 1.25rem !important;
        color: var(--rq-primary) !important;
    }

    .rq-title-bar__text {
        font-size: 1.125rem;
        font-weight: 700;
        color: var(--rq-text);
    }

    .rq-title-bar__step {
        font-size: 0.875rem;
        font-weight: 600;
        color: var(--rq-muted);
        background: var(--rq-card-bg);
        border: 1px solid var(--rq-card-border);
        border-radius: 20px;
        padding: 4px 12px;
        flex-shrink: 0;
    }

    /* ── Stepper ── */
    .rq-stepper {
        display: flex;
        align-items: flex-start;
        padding: 16px 20px 14px;
        gap: 0;
        border-bottom: 1px solid var(--rq-card-border);
    }

    .rq-step {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 6px;
        flex-shrink: 0;
    }

    .rq-step__circle {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        border: 2px solid var(--rq-card-border);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1rem;
        font-weight: 700;
        color: var(--rq-muted);
        background: transparent;
        transition: all 0.2s ease;
    }

    .rq-step--active .rq-step__circle {
        border-color: var(--rq-primary);
        background: var(--rq-primary);
        color: #fff;
    }

    .rq-step--done .rq-step__circle {
        border-color: var(--rq-done);
        background: rgba(74, 222, 128, 0.12);
        color: var(--rq-done);
    }

    .rq-step__label {
        font-size: 0.75rem;
        font-weight: 600;
        color: var(--rq-muted);
        text-align: center;
        white-space: nowrap;
        transition: color 0.2s ease;
    }

    .rq-step--active .rq-step__label {
        color: var(--rq-primary);
        font-weight: 700;
    }

    .rq-step--done .rq-step__label {
        color: var(--rq-done);
    }

    .rq-step-line {
        flex: 1;
        height: 2px;
        background: var(--rq-card-border);
        margin-top: 19px; /* alinear con centro del círculo de 40px */
        transition: background 0.2s ease;
    }

    .rq-step-line--done {
        background: var(--rq-done);
    }

    /* ── Contenedor del contenido por paso ── */
    .rq-step-content {
        min-height: 420px;
    }

    /* ── Contenedor de secciones ── */
    .rq-sections {
        display: flex;
        flex-direction: column;
        gap: 0;
        padding: 8px 0 4px;
    }

    /* .rq-section y el wrapper --step2 los sustituye .rq-card (bloque REDISEÑO
       2026-08): la tarjeta ya no depende de en qué contenedor esté. */

    .rq-horarios-toggle-row--step2 {
        margin-top: 2px;
        padding-top: 14px;
        border-top: 1px solid var(--rq-card-border);
    }

    /* Recolección programada colapsable (paso 2 nueva renta) */
    .rq-recoleccion-collapsed {
        display: flex;
        flex-direction: column;
        gap: 8px;
        margin-top: 4px;
    }

    .rq-recoleccion-add-btn {
        margin-top: 2px !important;
    }

    .rq-caption--recoleccion-hint {
        margin: 0;
        font-size: 0.8125rem;
        line-height: 1.45;
        color: var(--rq-muted);
    }

    .rq-recoleccion-quitar-btn {
        align-self: flex-start;
        margin-top: 4px !important;
        text-transform: none;
        letter-spacing: normal;
    }

    /* Switch horarios por producto: debajo de la lista (paso 2) */
    .rq-horarios-toggle-row--after-products {
        margin-top: 14px;
        padding-top: 14px;
        border-top: 1px solid var(--rq-card-border);
    }

    .rq-horarios-toggle-icon {
        font-size: 1.125rem !important;
        color: var(--rq-muted) !important;
        vertical-align: middle;
        margin-right: 6px;
    }

    .rq-horarios-exceptions-editor {
        margin-top: 4px;
    }

    .rq-horarios-exceptions-table-wrap {
        margin-top: 12px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        border-radius: 10px;
        border: 1px solid rgba(148, 163, 184, 0.12);
    }

    .rq-horarios-exceptions-table-wrap .rq-horarios-table {
        min-width: 520px;
        margin-bottom: 0;
    }

    .rq-bulk-checklist--scroll {
        max-height: 168px;
        margin-bottom: 0;
    }

    .rq-empty-products--step2 {
        padding: 20px 0 6px;
        min-height: 64px;
        justify-content: center;
    }

    .rq-empty-products__icon {
        font-size: 2.5rem !important;
        color: var(--rq-muted) !important;
        opacity: 0.35;
    }

    .rq-field {
        width: 100%;
    }

    /* Campo de búsqueda de producto: más grande */
    .rq-field--search .mud-input-outlined {
        min-height: 58px !important;
    }

    /* ── Texto de ayuda / caption ── */
    .rq-caption {
        font-size: 0.875rem;
        color: var(--mud-palette-text-secondary);
        margin: 0 0 4px;
        line-height: 1.5;
    }

    .rq-field-error {
        display: flex;
        align-items: center;
        gap: 5px;
        color: var(--mud-palette-error);
        font-size: 0.875rem;
        font-weight: 600;
        margin: 5px 0 0;
    }
    .rq-field-error .rq-field-error__ico {
        font-size: 1rem !important;
        width: 1rem !important;
        height: 1rem !important;
        flex: 0 0 auto;
    }

    /* El bloque fecha+hora con flecha (.rq-dt-block) lo sustituyó .rq-dt-split
       en el bloque REDISEÑO 2026-08. */

    /* ── Duración ── */
    .rq-duration-pill {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-size: 0.875rem;
        font-weight: 600;
        color: var(--rq-muted);
        background: var(--rq-card-bg);
        border: 1px solid var(--rq-card-border);
        border-radius: 20px;
        padding: 6px 14px;
        align-self: flex-start;
        margin-top: 4px;
    }

    /* ── Badges ── */
    .rq-count-badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 24px;
        height: 24px;
        border-radius: 12px;
        background: var(--rq-primary);
        color: #fff;
        font-size: 0.8125rem;
        font-weight: 700;
        padding: 0 8px;
        margin-left: 6px;
    }

    .rq-required-dot {
        color: #F87171;
        font-weight: 700;
        font-size: 1rem;
        line-height: 1;
    }

    .rq-optional-tag {
        font-size: 0.6875rem;
        font-weight: 600;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--ic-muted);
        background: rgba(148,163,184,0.1);
        border-radius: 6px;
        padding: 2px 7px;
    }

    .rq-optional-tag--inline { margin-left: 4px; }

    /* ── «Lo saqué del mensaje» por campo (CampoEstado) ──
       Rediseño 2026-08-21: otro idioma a propósito. Riel de 3px a la izquierda del campo
       + una línea escrita debajo, en el azul de información (--rq-wa). Ya NO es cápsula,
       ya no es ámbar y ya no está en la esquina de la tarjeta: «falta» y «no ratificado»
       dejan de compartir forma, sitio y color. Y no cuenta en el resumen de pendientes,
       porque no impide crear la renta.

       La versión anterior (cápsula ámbar «Sin confirmar», align-self:flex-end) tenía dos
       problemas: compartía el ámbar con los avisos de dinero y repetía palabra por palabra
       el sello de la cabecera de la tarjeta, que este rediseño retira. */
    .rq-fx {
        display: flex;
        flex-direction: column;
        min-width: 0;
        position: relative;
    }
    /* La sangría va SÓLO con el riel: CampoEstado envuelve el campo siempre, y un
       padding incondicional desalinearía los campos sin marca respecto al resto. */
    .rq-fx--wa { padding-left: 11px; }
    .rq-fx--wa::before {
        content: "";
        position: absolute;
        left: 0;
        top: 2px;
        bottom: 22px;
        width: 3px;
        border-radius: 2px;
        background: var(--rq-wa);
    }
    /* No borrar: un hijo flex tiene min-width:auto y desbordaría en vez de encoger. */
    .rq-fx__input { min-width: 0; }

    .rq-fx__note {
        display: flex;
        align-items: center;
        gap: 6px;
        min-height: 20px;
        margin-top: 6px;
        font-size: var(--ic-text-xs, 0.75rem);
        font-weight: 700;
        color: var(--rq-wa);
    }
    .rq-fx__note .mud-icon-root { font-size: 1rem !important; flex: none; }

    /* ── Chip de pendiente ──
       Del bloque .rq-pendientes original sólo sobrevive el chip: lo usa la barra
       inferior de las dos páginas. Su paleta vive en el bloque REDISEÑO 2026-08. */
    .rq-pendientes__chip {
        display: inline-flex;
        align-items: center;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
        transition: background 0.15s ease;
    }
    .rq-pendientes__chips {
        display: flex;
        gap: 6px;
        min-width: 0;
    }

    /* ── Tipo de evento: opciones segmentadas de un toque (Fase D) ── */
    .rq-seg {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }
    .rq-seg__opt {
        display: flex;
        flex-direction: column;
        gap: 2px;
        text-align: left;
        padding: 11px 14px;
        min-height: 56px;
        border-radius: 12px;
        border: 1px solid var(--rq-card-border);
        background: var(--rq-card-bg);
        color: var(--rq-text);
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
        transition: border-color 0.15s ease, background 0.15s ease;
    }
    .rq-seg__opt:hover { border-color: var(--rq-border-strong); }
    .rq-seg__opt--on {
        border-color: var(--rq-primary);
        background: rgba(var(--lc-accent-rgb), 0.10);
        box-shadow: inset 0 0 0 1px var(--rq-primary);
    }
    .rq-seg__opt-title { font-size: 1rem; font-weight: 700; line-height: 1.25; }
    .rq-seg__opt-sub { font-size: 0.8125rem; color: var(--rq-muted); line-height: 1.3; }

    /* ── Horas frecuentes: chips de un toque (Fase D) ── */
    .rq-quick-times {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        margin-top: 10px;
    }
    .rq-quick-time {
        min-height: 36px;
        padding: 6px 13px;
        border-radius: 999px;
        border: 1px solid var(--rq-border-strong);
        background: var(--ic-glass-surface);
        color: var(--rq-text);
        font-size: 0.9375rem;
        font-weight: 600;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
        transition: background 0.15s ease, border-color 0.15s ease;
    }
    .rq-quick-time:active { background: rgba(var(--lc-accent-rgb), 0.12); }
    .rq-quick-time--on {
        border-color: var(--rq-primary);
        background: rgba(var(--lc-accent-rgb), 0.16);
        color: #C7D2FE;
    }

    /* ── Chips de una fila con etiqueta encima ──
       Nacieron para "Agregar rápido" (chips de producto); esa función la tomó la hoja
       de catálogo por categorías (.rq-catsheet, al final del archivo). Siguen VIVOS:
       los usan las "Direcciones recientes" del alta. No borrar. */
    .rq-quick-prods {
        display: flex;
        flex-direction: column;
        gap: 6px;
        margin-top: 4px;
    }
    .rq-quick-prods__label {
        font-size: 0.75rem;
        font-weight: 700;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: var(--rq-muted);
    }
    .rq-quick-prods__chips {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
    }
    .rq-quick-prod {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        min-height: 44px;
        padding: 6px 12px 6px 8px;
        border-radius: 999px;
        border: 1px solid var(--rq-border-strong);
        background: var(--ic-glass-surface);
        color: var(--rq-text);
        font-size: 0.9375rem;
        font-weight: 600;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
        transition: background 0.15s ease, border-color 0.15s ease;
        max-width: 100%;
    }
    .rq-quick-prod:active { background: rgba(var(--lc-accent-rgb), 0.12); border-color: var(--rq-primary); }
    .rq-quick-prod__ico { font-size: 1rem !important; color: var(--rq-primary) !important; flex-shrink: 0; }
    .rq-quick-prod__txt {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 52vw;
    }

/* ═══════════════════════════════════════════════════════════════════════
   REDISEÑO v2 — "Nueva renta" como UNA SOLA PÁGINA PLANA.
   TODO se scopea bajo .rq-dialog (exclusivo del diálogo). EditarRenta usa
   .renta-form.edit-renta y NO se ve afectado.
   ═══════════════════════════════════════════════════════════════════════ */

/* Las secciones son tarjetas (.rq-card, bloque REDISEÑO 2026-08); el aplanado
   de la v2 ya no aplica. */

/* Contactos: sin caja, integrados al flujo */
.rq-dialog .rq-contact-row {
    background: none !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
}
.rq-dialog .rq-contacts { gap: 14px; }

/* Productos: filas planas separadas por hairline (sin caja con borde fuerte) */
.rq-dialog .rq-product-list { gap: 0; }
.rq-dialog .rq-product-row {
    background: none !important;
    border: none !important;
    border-left: none !important;
    border-top: 1px solid var(--rq-card-border) !important;
    border-radius: 0 !important;
    padding: 14px 0 !important;
}
.rq-dialog .rq-product-list > .rq-product-row:first-child { border-top: none !important; padding-top: 4px !important; }

/* Precio por línea: claramente EDITABLE (borde + fondo tintado de primario) */
.rq-dialog .rq-price-field .mud-input-control,
.rq-dialog .rq-price-field .mud-input-outlined {
    border-radius: 11px;
}
.rq-dialog .rq-price-field .mud-input-outlined-border {
    border-color: color-mix(in srgb, var(--rq-primary) 55%, transparent) !important;
}
.rq-dialog .rq-price-field .mud-input-slot {
    background: color-mix(in srgb, var(--rq-primary) 7%, transparent);
}

/* Subtotal y "resta por cobrar": SÍ conservan fondo (son resultados, no campos) */
.rq-dialog .rq-products-total { border-radius: 12px; }

/* Checkbox de selección de producto (entregas parciales) */
.rq-dialog .rq-pl-cbx {
    width: 24px; height: 24px; border-radius: 7px;
    border: 2px solid var(--rq-muted); flex-shrink: 0; cursor: pointer;
    position: relative; align-self: flex-start; margin-top: 1px;
    -webkit-tap-highlight-color: transparent;
}
/* Caja visual de 24px pero área táctil ≥44px (WCAG 2.5.8): el ::before extiende el hit-area. */
.rq-dialog .rq-pl-cbx::before { content: ""; position: absolute; inset: -10px; }
.rq-dialog .rq-pl-cbx--on { background: var(--rq-primary); border-color: var(--rq-primary); }
.rq-dialog .rq-pl-cbx--on::after {
    content: ""; position: absolute; left: 7px; top: 3px;
    width: 6px; height: 11px; border: solid #fff; border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* Chip de horario por producto (excepción al horario global).
   El COLOR ya no vive aquí: viene de .lc-chip--primary (entrega) y .lc-chip--purple
   (recolección) de lista-cards.css, que sí se voltean con html[data-theme="light"].
   Antes era `color: #C7D0FF` fijo sobre un fondo del MISMO tono al 13%: texto y fondo
   salían del mismo lila y no había contraste en ningún tema. */
.rq-dialog .rq-sched-chip { margin-top: 6px; }
.rq-dialog .rq-sched-chip + .rq-sched-chip { margin-left: 6px; }
.rq-dialog .rq-sched-chip .mud-icon-root { font-size: 0.95rem !important; }

/* Toggle "Entregas parciales" */
.rq-dialog .rq-parcial-row {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--rq-card-border);
}
.rq-dialog .rq-parcial-row__l {
    display: flex; align-items: center; gap: 9px;
    font-size: 0.9375rem; font-weight: 700; color: var(--rq-text);
}
.rq-dialog .rq-parcial-row__ic { font-size: 1.125rem !important; color: var(--rq-muted) !important; }

/* Botón "Asignar horario (N)" */
.rq-dialog .rq-asignar-btn {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; min-height: 48px; margin-top: 10px; border-radius: 12px;
    border: 1px solid color-mix(in srgb, var(--rq-primary) 45%, transparent);
    /* Se mezcla contra la SUPERFICIE, no contra transparent: sobre una fila sin fondo
       propio, un 7% translúcido no daba cuerpo y el botón parecía un fantasma. */
    background: color-mix(in srgb, var(--rq-primary) 16%, var(--rq-surface));
    /* El acento puro se queda corto de contraste sobre su propio tinte (4.2:1 en claro).
       Empujarlo un 15% hacia el color de TEXTO lo oscurece en tema claro y lo aclara en
       oscuro — una sola regla que mejora en ambas direcciones, sin hex fijos. */
    color: color-mix(in srgb, var(--rq-primary) 85%, var(--rq-text));
    font-size: 0.9375rem; font-weight: 800; cursor: pointer;
    -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
/* Deshabilitado es el estado NORMAL hasta que se marca un producto, así que tiene que
   seguir siendo legible: se apaga el acento, no la opacidad de todo el botón. */
.rq-dialog .rq-asignar-btn:disabled {
    border-style: dashed;
    border-color: var(--rq-card-border);
    background: var(--rq-surface-2);
    color: var(--rq-muted);
    cursor: not-allowed;
}
.rq-dialog .rq-asignar-btn:disabled .rq-asignar-btn__cnt {
    background: var(--rq-card-border); color: var(--rq-muted);
}
/* Pista de por qué está apagado: sin esto el botón no dice qué falta para usarlo. */
.rq-dialog .rq-asignar-hint {
    margin-top: 6px; font-size: 0.8125rem; color: var(--rq-muted); text-align: center;
}
.rq-dialog .rq-asignar-btn__ic { font-size: 1.125rem !important; }
.rq-dialog .rq-asignar-btn__cnt {
    background: var(--rq-primary); color: #fff; border-radius: 999px;
    padding: 1px 9px; font-size: 0.8125rem; font-weight: 800;
}

/* ── Ventana emergente (bottom-sheet) "Asignar horario" ── */
.rq-sheet .rq-sheet__title { display: flex; align-items: center; gap: 8px; font-size: 1.125rem; font-weight: 800; }
.rq-sheet .rq-sheet__title-ic { font-size: 1.25rem !important; color: var(--rq-primary) !important; }
.rq-sheet .rq-sheet__body { padding: 4px 4px 0; }
.rq-sheet .rq-sheet__names { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 4px; }
.rq-sheet .rq-sheet__name {
    font-size: 0.8125rem; font-weight: 700; background: var(--rq-card-bg);
    border: 1px solid var(--rq-card-border); border-radius: 999px; padding: 5px 12px; color: var(--rq-text);
}
.rq-sheet .rq-sheet__grp {
    font-size: 0.75rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--rq-muted); margin: 16px 0 9px;
}
.rq-sheet .rq-sheet__row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.rq-sheet .rq-sheet__act { display: flex; gap: 11px; width: 100%; }
.rq-sheet .rq-sheet__btn { min-height: 48px; border-radius: 12px !important; flex: 1; }
.rq-sheet .rq-sheet__btn--primary { flex: 1.4; }
@media (max-width: 480px) {
    .rq-sheet .rq-sheet__row { grid-template-columns: 1fr; }
}

/* ── Responsive: sin overflow ni 2-columnas apretadas en pantallas chicas ── */
@media (max-width: 480px) {
    .rq-dialog .rq-contact-row__fields { grid-template-columns: 1fr; }
}
@media (max-width: 360px) {
}

/* ── Barra de título: acciones secundarias (menú ⋯ + cerrar) ── */
.rq-title-bar__right { display: flex; align-items: center; gap: 2px; flex-shrink: 0; }

/* ── Barra inferior: "Faltan: X" + Guardar renta (una sola fila) ──
   Scope .renta-form: cubre alta (root tiene rq-dialog + renta-form) y edición (renta-form). */
.renta-form .rq-save-bar {
    display: flex; align-items: center; gap: 12px; width: 100%; min-width: 0;
}
.renta-form .rq-save-bar__status {
    flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.renta-form .rq-save-bar__lab {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 0.8125rem; font-weight: 800; color: var(--rq-override-bar); flex-shrink: 0;
}
.renta-form .rq-save-bar__lab--ok { color: var(--rq-done); }
.renta-form .rq-save-bar__ico { font-size: 1rem !important; }
.renta-form .rq-save-bar__chips { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.renta-form .rq-save-btn {
    min-height: 50px !important; border-radius: 13px !important;
    font-size: 1rem !important; font-weight: 800 !important;
    padding-left: 22px !important; padding-right: 22px !important; flex-shrink: 0;
    box-shadow: 0 4px 14px color-mix(in srgb, var(--rq-primary) 38%, transparent);
}
/* La salida secundaria: cotizar sin agendar (o agendar lo cotizado). De texto y no rellena
   a propósito — el primario ya se lleva el ancho de la barra— pero con los 48px de área
   táctil que exige el panel, que es más de lo que un MudButton de texto trae por defecto. */
.renta-form .rq-save-alt {
    min-height: var(--dr-touch-min, 48px) !important;
    min-width: var(--dr-touch-min, 48px) !important;
    border-radius: 13px !important;
    font-weight: 700 !important;
    color: var(--mud-palette-text-secondary) !important;
    flex-shrink: 0;
}
.renta-form .rq-save-alt:hover {
    background: var(--ic-surface-2, var(--mud-palette-action-default-hover)) !important;
    color: var(--mud-palette-text-primary) !important;
}

@media (max-width: 480px) {
    /* Hasta 2026-09-17 este bloque escondía el texto («Cotizar») y dejaba un icono de documento
       que nadie tenía por qué reconocer. Ahora el texto se ve en todos los anchos: lo que pagó
       ese ancho fue acortar el primario de «Registrar renta» a «Agendar», unos 88px. Queda el
       padding estrecho, que es el resto del ahorro. */
    .renta-form .rq-save-alt { padding-left: 12px !important; padding-right: 12px !important; }
    /* Y aquí se cae el término del primario. Sólo lo tiene la rama de COTIZACIÓN («Guardar
       cotización»): en el alta el primario ya es un verbo solo. Medido a 390px con un total de
       $18,450, ese par —«Guardar cotización» + «Agendar» con su icono— se salía de la barra;
       con «Guardar» sobra sitio. El nombre completo sigue en el aria-label. */
    .renta-form .rq-save-btn__term { display: none; }
}

@media (max-width: 380px) {
    .renta-form .rq-save-btn { padding-left: 15px !important; padding-right: 15px !important; }
    .renta-form .rq-save-bar { gap: 8px; }
    /* Medido a 320px con un total de $18,450: los tres bloques se pasaban de la barra por un pelo.
       Lo que se cae es el ICONO del secundario, no su palabra —28px entre el glifo y su margen—,
       que es justo al revés de lo que se hacía hasta 2026-09-17. Una palabra se lee; un icono de
       documento se adivina, y adivinar si esto cotiza o agenda es caro. El botón conserva sus
       48px táctiles porque el min-width no depende del icono. */
    .renta-form .rq-save-alt .mud-button-icon-start { display: none; }
}

    /* ── Contactos ── */
    .rq-contact-row__badge {
        font-size: 0.875rem;
        font-weight: 600;
        color: var(--mud-palette-text-secondary);
    }

    .rq-contacts { display: grid; gap: 12px; }

    .rq-contact-row {
        border: 1px solid var(--rq-card-border);
        border-radius: 14px;
        padding: 12px;
        background: var(--rq-card-bg);
    }

    .rq-contact-row__top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        margin-bottom: 10px;
    }

    .rq-contact-row__fields {
        display: grid;
        gap: 10px;
        grid-template-columns: 1fr 1fr;
    }

    .rq-contact-row__fields--primary {
        align-items: center;
    }

    .rq-contact-row__readonly-name {
        display: flex;
        align-items: center;
        font-size: 1rem;
        font-weight: 500;
        color: var(--mud-palette-text-primary);
        padding: 0 8px;
    }

    .rq-contact-row__readonly-name--empty {
        color: var(--mud-palette-text-secondary);
        font-style: italic;
    }

    .rq-add-contact-btn { width: fit-content; }

    /* ── Lista de productos ── */
    .rq-product-list {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    /* .rq-product-row y sus dos renglones (__header / __title-block / __pricing)
       viven en el bloque REDISEÑO 2026-08, al final del archivo. */

    .rq-product-row__badges {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        align-items: center;
    }

    .rq-product-row__price-tools {
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .rq-product-row__price-meta {
        display: flex;
        align-items: center;
        gap: 8px;
        flex-wrap: wrap;
    }

    .rq-price-field--compact .mud-input-outlined {
        min-height: 48px !important;
    }

    .rq-product-row__extras {
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
        align-items: end;
    }

    @media (min-width: 480px) {
        .rq-product-row__extras {
            grid-template-columns: 1fr 1fr;
        }
    }

    .rq-product-row__extra-field {
        width: 100%;
        max-width: 100%;
    }

    .rq-product-row__extra-field--wide {
        max-width: 100%;
    }

    .rq-product-row__name {
        font-size: 1.0625rem;
        font-weight: 700;
        color: var(--rq-text);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        min-width: 0;
        flex: 1;
    }

    .rq-avail-chip {
        display: inline-block;
        padding: 3px 9px;
        border-radius: 10px;
        font-size: 0.72rem;
        font-weight: 600;
        line-height: 1.25;
        margin-left: 6px;
        vertical-align: middle;
        white-space: nowrap;
        flex-shrink: 0;
        border: 1px solid transparent;
    }
    /* Las VARIANTES de color de .rq-avail-chip viven más abajo, sobre tokens --rq-*.
       Aquí había una copia con hex fijos que la cascada ya pisaba (misma especificidad,
       definida antes): color muerto que solo confundía a quien leyera el archivo. */

    .rq-product-row__breakdown {
        font-size: 0.8125rem;
        color: var(--ic-muted);
        line-height: 1.4;
    }

    .rq-breakdown-calc {
        color: var(--ic-muted);
        font-weight: 600;
    }

    .rq-price-field-wrap { flex: 1; min-width: 0; }
    .rq-price-field { width: 100%; }

    /* Horarios por línea (visible solo con toggle ON) */
    .rq-product-row__horarios {
        padding-top: 10px;
        border-top: 1px dashed var(--mud-palette-divider);
        margin-top: 4px;
    }

    .rq-horarios-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }

    .rq-horarios-col {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .rq-horarios-col__label {
        font-size: 0.875rem;
        font-weight: 700;
        color: var(--rq-muted);
        display: flex;
        align-items: center;
        gap: 4px;
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }

    /* ── Toggle horarios por producto ── */
    .rq-horarios-toggle-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
    }

    .rq-horarios-toggle-info {
        display: flex;
        flex-direction: column;
        gap: 4px;
        flex: 1;
        min-width: 0;
    }

    .rq-horarios-toggle-title {
        font-size: 1rem;
        font-weight: 700;
        color: var(--rq-text);
    }

    .rq-horarios-toggle-desc {
        font-size: 0.875rem;
        color: var(--rq-muted);
        line-height: 1.4;
    }

    /* ── Estado vacío de productos ── */
    .rq-empty-products {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
        padding: 32px 0;
    }

    .rq-empty-products__text {
        font-size: 1rem;
        color: var(--rq-muted);
        margin: 0;
    }

    .rq-catalog-loading {
        display: flex;
        flex-direction: column;
        gap: 6px;
        margin-top: 4px;
    }

    .rq-catalog-loading__text {
        font-size: 0.875rem;
        color: var(--rq-muted);
    }

    /* ── Subtotal inline ── */
    .rq-products-total {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 10px 14px;
        background: var(--rq-card-bg);
        border: 1px solid var(--rq-border-strong);
        border-radius: 12px;
        margin-top: 4px;
    }

    .rq-products-total__label {
        font-size: 0.9375rem;
        color: var(--rq-muted);
        font-weight: 500;
    }

    .rq-products-total__value {
        font-size: 1.0625rem;
        font-weight: 700;
        color: var(--rq-text);
    }

    .rq-cur {
        font-size: 0.8125rem;
        font-weight: 500;
        color: var(--ic-muted);
    }

    /* ── Controles cantidad ── */
    .rq-product-row__controls {
        display: flex;
        align-items: center;
        gap: 4px;
        flex-shrink: 0;
    }

    .rq-qty-btn {
        /* Target táctil senior-friendly (WCAG 2.5.8 / HIG 44pt): antes 38px. */
        width: 44px;
        height: 44px;
        border-radius: 10px;
        border: 1px solid rgba(148,163,184,0.18);
        background: var(--ic-glass-surface);
        color: var(--ic-text);
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
        transition: background 0.15s ease, border-color 0.15s ease;
        flex-shrink: 0;
    }

    .rq-qty-btn:active { background: rgba(255,255,255,0.1); border-color: var(--rq-border-strong); }
    .rq-qty-btn:disabled { opacity: 0.35; cursor: not-allowed; }

    .rq-qty-btn--del {
        border-color: rgba(244,67,54,0.2);
        color: #EF9A9A;
        margin-left: 4px;
    }

    .rq-qty-btn--del:active { background: rgba(244,67,54,0.12); border-color: rgba(244,67,54,0.35); }

    .rq-qty-val {
        min-width: 28px;
        text-align: center;
        font-size: 1.0625rem;
        font-weight: 700;
        color: var(--rq-text);
    }

    /* ── Reset btn ── */
    .rq-reset-btn {
        width: 40px;
        height: 40px;
        border-radius: 10px;
        border: 1px solid rgba(148,163,184,0.2);
        background: var(--ic-glass-surface);
        color: var(--ic-muted);
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        transition: background 0.15s ease, color 0.15s ease;
        -webkit-tap-highlight-color: transparent;
    }

    .rq-reset-btn:hover { background: rgba(255,255,255,0.08); color: var(--rq-text); border-color: var(--rq-border-strong); }

    /* ── Delta de precio ── */
    .rq-delta { font-size: 0.875rem; font-weight: 700; white-space: nowrap; flex-shrink: 0; }
    .rq-delta--desc { color: #4ADE80; }
    .rq-delta--cargo { color: #F87171; }
    /* IVA sumado al total: lectura admin — componente fiscal habitual (verde). */
    .rq-delta--iva-add { color: #4ADE80; }
    /* Retención ISR: reduce lo cobrado (rojo, como cargo efectivo para el negocio). */
    .rq-delta--retencion { color: #F87171; }

    /* ── Resumen paso 3: tarjeta ── */
    .rq-summary-card {
        background: var(--rq-card-bg);
        border: 1px solid var(--rq-border-strong);
        border-radius: 16px;
        padding: 16px;
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    .rq-summary-item {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        padding: 8px 0;
    }

    .rq-summary-item--col { flex-direction: column; gap: 4px; }

    .rq-summary-item__text {
        display: flex;
        flex-direction: column;
        gap: 2px;
        min-width: 0;
    }

    .rq-summary-item__label {
        font-size: 0.8125rem;
        color: var(--rq-muted);
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }

    .rq-summary-item__value {
        font-size: 1.0625rem;
        font-weight: 700;
        color: var(--rq-text);
    }

    .rq-summary-item__value--addr {
        font-size: 0.9375rem;
        font-weight: 500;
        white-space: normal;
        word-break: break-word;
    }

    .rq-summary-item__sub {
        font-size: 0.875rem;
        color: var(--rq-muted);
    }

    .rq-summary-divider {
        height: 1px;
        background: var(--rq-card-border);
        margin: 4px 0;
    }

    /* Productos en resumen */
    .rq-summary-prods { padding: 6px 0 4px; }

    .rq-summary-prod-row {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 6px 0;
        border-bottom: 1px solid rgba(148,163,184,0.06);
    }

    .rq-summary-prod-row:last-child { border-bottom: none; }

    .rq-summary-prod-name {
        flex: 1;
        font-size: 1rem;
        font-weight: 600;
        color: var(--rq-text);
        min-width: 0;
    }

    .rq-summary-prod-qty {
        font-size: 0.9375rem;
        color: var(--rq-muted);
        font-weight: 600;
        flex-shrink: 0;
    }

    .rq-summary-prod-price {
        font-size: 1rem;
        font-weight: 700;
        color: var(--rq-text);
        flex-shrink: 0;
        min-width: 80px;
        text-align: right;
    }

    /* ── Total mini rows (paso 3) ── */
    .rq-total-mini-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        padding: 4px 0;
    }

    .rq-total-mini-row__label {
        font-size: 0.9375rem;
        color: var(--rq-muted);
        font-weight: 500;
    }

    .rq-total-mini-row__val {
        font-size: 1rem;
        font-weight: 700;
        color: var(--rq-text);
    }

    /* ── Pago diff ── */
    .rq-pago-diff {
        margin-top: 12px;
        padding: 12px 14px;
        border-radius: 12px;
        font-size: 0.9375rem;
        line-height: 1.5;
        color: var(--rq-muted);
        background: var(--rq-card-bg);
        border: 1px solid var(--rq-card-border);
    }

    .rq-pago-diff--cargo { border-color: rgba(248,113,113,0.25); background: rgba(248,113,113,0.06); color: #FCA5A5; }
    .rq-pago-diff--desc  { border-color: rgba(74,222,128,0.22);  background: rgba(74,222,128,0.06);  color: #86EFAC; }

    /* ── Resta total ── */
    .rq-resta-total {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 12px;
        padding: 12px 14px;
        background: rgba(var(--lc-accent-rgb),0.07);
        border: 1px solid rgba(var(--lc-accent-rgb),0.18);
        border-radius: 12px;
        gap: 8px;
    }

    .rq-resta-total__label {
        font-size: 0.9375rem;
        color: var(--rq-muted);
        font-weight: 500;
    }

    .rq-resta-total__val {
        font-size: 1.125rem;
        font-weight: 800;
        color: var(--rq-text);
        letter-spacing: -0.01em;
    }

    /* ── Botones de acción del wizard ── */
    .rq-action-btn {
        min-height: 48px !important;
        border-radius: 12px !important;
        font-size: 1rem !important;
        font-weight: 600 !important;
        padding-left: 18px !important;
        padding-right: 18px !important;
    }

    .rq-action-btn--next {
        min-width: 140px !important;
    }

    .rq-action-btn--submit {
        min-width: 160px !important;
        font-size: 1.0625rem !important;
    }

    /* ── Sugerencias de dirección (UbicacionPicker dropdown) ── */
    .rq-places-list {
        display: flex;
        flex-direction: column;
        gap: 2px;
        background: rgba(var(--ic-bg-rgb),0.85);
        border: 1px solid rgba(148,163,184,0.14);
        border-radius: 12px;
        overflow: hidden;
        max-height: 220px;
        overflow-y: auto;
    }

    .rq-place-row {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        padding: 12px 14px;
        background: transparent;
        border: none;
        cursor: pointer;
        text-align: left;
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
        border-bottom: 1px solid rgba(148,163,184,0.06);
        transition: background 0.12s ease;
        width: 100%;
    }

    .rq-place-row:last-child { border-bottom: none; }
    .rq-place-row:active { background: var(--ic-glass-surface-hover); }

    .rq-place-row__icon { font-size: 1.125rem !important; color: var(--rq-primary) !important; flex-shrink: 0; margin-top: 2px; }

    .rq-place-row__text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }

    .rq-place-row__main {
        font-size: 1rem;
        font-weight: 600;
        color: var(--rq-text);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .rq-place-row__sub {
        font-size: 0.875rem;
        color: var(--ic-muted);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Link "cambiar fecha" por producto */
    .rq-fecha-override-link {
        background: none;
        border: none;
        padding: 8px 2px;
        min-height: 36px;
        cursor: pointer;
        color: var(--rq-muted);
        font-size: 0.8125rem;
        display: inline-flex;
        align-items: center;
        gap: 4px;
        margin-top: 6px;
        text-decoration: underline;
        text-decoration-style: dotted;
        opacity: 0.7;
        transition: opacity 0.15s;
        -webkit-tap-highlight-color: transparent;
    }
    .rq-fecha-override-link:hover { opacity: 1; }

    /* ── Aplicar horarios a varios (estilo asignación parcial) ── */
    .rq-bulk-horarios-section {
        background: rgba(236, 72, 153, 0.05);
        border-top: 1px solid rgba(236, 72, 153, 0.12);
    }

    .rq-bulk-desc {
        font-size: 0.875rem;
        color: var(--rq-muted);
        margin: 0 0 12px;
        line-height: 1.45;
    }

    .rq-bulk-times {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        margin-bottom: 12px;
    }

    .rq-bulk-actions {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 10px 14px;
        margin-bottom: 14px;
    }

    .rq-bulk-link-btn {
        background: none;
        border: none;
        padding: 0;
        font-size: 0.875rem;
        font-weight: 600;
        color: var(--rq-primary);
        cursor: pointer;
        text-decoration: underline;
        -webkit-tap-highlight-color: transparent;
    }
    .rq-bulk-link-btn:hover { opacity: 0.85; }

    .rq-bulk-checklist {
        display: flex;
        flex-direction: column;
        gap: 6px;
        max-height: 200px;
        overflow-y: auto;
        padding: 8px 10px;
        border: 1px solid rgba(148, 163, 184, 0.15);
        border-radius: 10px;
        background: rgba(0, 0, 0, 0.12);
    }

    .rq-bulk-check-row {
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 0.9375rem;
        cursor: pointer;
        padding: 4px 0;
    }

    .rq-bulk-check-row input[type="checkbox"] {
        width: 18px;
        height: 18px;
        accent-color: var(--rq-primary);
        flex-shrink: 0;
    }

    .rq-bulk-check-name { flex: 1; min-width: 0; color: var(--rq-text); }

    .rq-bulk-check-qty {
        font-size: 0.8125rem;
        color: var(--rq-muted);
        font-weight: 600;
    }

    /* ── Móvil ── */
    @media (max-width: 599px) {
        .rq-dialog .mud-dialog {
            border-radius: 20px 20px 0 0 !important;
            margin: 0 !important;
            max-height: 96dvh !important;
        }

        .rq-dialog .mud-dialog-content {
            max-height: calc(96dvh - 140px) !important;
        }


        /* El stepper mantiene su tamaño del mockup (34×32 dentro de 38px); el área
           táctil de 44px la da el ::after del bloque REDISEÑO 2026-08. */

        .rq-contact-row__fields { grid-template-columns: 1fr; gap: 8px; }
        .rq-contact-row__readonly-name { padding: 4px 8px 8px 8px; }

        .rq-horarios-grid { grid-template-columns: 1fr; gap: 10px; }

        .rq-stepper { padding: 12px 14px 12px; }

        .rq-step__circle { width: 34px; height: 34px; font-size: 0.9375rem; }

        .rq-step__label { font-size: 0.6875rem; }

        .rq-step-line { margin-top: 16px; }

        .rq-bulk-times { grid-template-columns: 1fr; }
    }

/* Página modificar renta: sin host MudDialog */
.renta-form.edit-renta {
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 2rem;
}

.renta-form.edit-renta .rq-step-content {
    min-height: 0;
}

/* Stepper solo guía en edición: tres pasos como completados */
.renta-form.edit-renta .rq-stepper--all-done .rq-step__circle {
    border-color: var(--rq-done);
    background: rgba(74, 222, 128, 0.12);
    color: var(--rq-done);
}
.renta-form.edit-renta .rq-stepper--all-done .rq-step__label {
    color: var(--rq-done);
    font-weight: 600;
}
.renta-form.edit-renta .rq-stepper--all-done .rq-step-line {
    background: var(--rq-done);
}

/* Página editar-renta: estados fuera del formulario principal */
.edit-renta-page {
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
    padding: 12px 12px 0;
}

.edit-renta-page--edit {
    padding-top: max(8px, env(safe-area-inset-top, 0px));
}

@keyframes edit-renta-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.55; }
}

.edit-renta-skeleton {
    background: var(--rq-card-bg);
    border: 1px solid var(--rq-card-border);
    border-radius: 14px;
    height: 300px;
    animation: edit-renta-pulse 1.5s ease-in-out infinite;
}

.edit-renta-alert {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 0.8125rem;
    line-height: 1.4;
    margin-bottom: 12px;
}

.edit-renta-alert--error {
    background: rgba(244, 67, 54, 0.1);
    border: 1px solid rgba(244, 67, 54, 0.25);
    color: #ef9a9a;
}

.edit-renta-alert--warning {
    background: rgba(255, 193, 7, 0.08);
    border: 1px solid rgba(255, 193, 7, 0.2);
    color: #ffd54f;
}

/* ── Barra superior fija: modificar renta (móvil / tablet / escritorio) ── */
.edit-renta-topbar {
    position: fixed;
    top: var(--ic-appbar-height, 72px);
    left: 0;
    right: 0;
    z-index: 1240;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 52px;
    padding: 0 max(12px, env(safe-area-inset-right)) 0 max(12px, env(safe-area-inset-left));
    background: var(--ic-surface, #1A282E);
    /* Sin sombra: la línea de 1px basta para separar del contenido y una franja oscura
       cantaba en un formulario que por lo demás ya es plano. */
    border-bottom: 1px solid var(--rq-card-border);
}

/* Escritorio: ocupar el contenido; el drawer lateral se superpone por z-index global. */
@media (min-width: 960px) {
    .edit-renta-topbar {
        left: var(--ic-chrome-rail-w, 72px);
        transition: left 0.2s ease;
    }
}

/* Ancla que ocupa el espacio del topbar fijo para que el contenido no quede tapado */
.edit-renta-topbar-anchor {
    height: 52px;
    flex-shrink: 0;
}

@media (min-width: 480px) {
    .edit-renta-topbar { min-height: 56px; }
    .edit-renta-topbar-anchor { height: 56px; }
}

.edit-renta-topbar__back {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    border-radius: 12px;
    border: 1px solid var(--rq-border-strong);
    background: transparent;
    color: var(--rq-text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    -webkit-tap-highlight-color: transparent;
}

.edit-renta-topbar__back:hover,
.edit-renta-topbar__back:focus-visible {
    background: rgba(148, 163, 184, 0.12);
    outline: none;
}

.edit-renta-topbar__back:focus-visible {
    box-shadow: 0 0 0 2px var(--rq-primary);
}

.edit-renta-topbar__back-icon {
    font-size: 1.25rem !important;
}

/* Centro: título + pill de paso en una sola fila */
.edit-renta-topbar__center {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.edit-renta-topbar__title {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--rq-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.edit-renta-topbar__step-pill {
    flex-shrink: 0;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    padding: 4px 9px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--rq-primary) 18%, transparent);
    color: var(--rq-primary);
    border: 1px solid color-mix(in srgb, var(--rq-primary) 35%, transparent);
    line-height: 1.3;
}

/* Badge "Edición" */
.edit-renta-topbar__badge {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--rq-primary);
    background: color-mix(in srgb, var(--rq-primary) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--rq-primary) 28%, transparent);
}

.edit-renta-topbar__badge-icon {
    font-size: 0.95rem !important;
    flex-shrink: 0;
}

.edit-renta-topbar__badge-text {
    white-space: nowrap;
}

/* Pantallas muy estrechas: ocultar texto "Edición" del badge */
@media (max-width: 359px) {
    .edit-renta-topbar__badge-text { display: none; }
    .edit-renta-topbar__badge { padding: 8px; }
}

/*
  Espacio bajo el scroll: solo esta barra. En móvil el BottomNav se OCULTA mientras
  el formulario está abierto (ver ":has(.edit-renta-bottombar)" en app.css, mismo
  criterio que DetalleRenta), así que ya no se reservan sus 72px.
*/
.renta-form.edit-renta.edit-renta--with-bottombar {
    padding-bottom: calc(var(--dr-action-bar-spacer-desktop, 88px) + env(safe-area-inset-bottom, 0px));
}

@media (max-width: 959px) {
    .renta-form.edit-renta.edit-renta--with-bottombar {
        padding-bottom: calc(
            var(--dr-action-bar-h, 68px) + max(12px, env(safe-area-inset-bottom, 0px))
        );
    }
}

/* Toque fantasma: el "+" del calendario ocupa esta misma franja y esta misma esquina, así
   que el segundo toque de un doble-toque cae sobre "Guardar" nada más montar la página.
   La barra nace inerte 350 ms (ver ArmarBarraTrasToqueFantasmaAsync en RentaQuickDialog). */
.edit-renta-bottombar--desarmada {
    pointer-events: none;
}

/* ── Barra inferior fija: navegación, salir, guardar, siguiente ── */
/* Por encima del BottomNav (z-index 1200); mismo patrón que .dr-action-bar */
.edit-renta-bottombar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1280;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: rgba(var(--ic-bg-rgb), 0.97);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    /* Sin sombra hacia arriba, por lo mismo que el encabezado: la línea de 1px separa y el
       velo con blur ya deja claro que el contenido pasa por debajo. */
    border-top: 1px solid var(--rq-card-border);
    transition: left 0.2s ease;
}

/* Móvil: al fondo. El nav principal (Calendario / Mapa / …) se oculta mientras el
   formulario está abierto —ver ":has(.edit-renta-bottombar)" en app.css—, así que ya
   NO hay que anclar por encima de él: eso dejaba la barra flotando a 72px del borde. */
@media (max-width: 959px) {
    .edit-renta-bottombar {
        bottom: 0;
    }
}

/* Escritorio / tablet con rail: la barra cubre el contenido y queda por debajo del drawer global. */
@media (min-width: 960px) {
    .edit-renta-bottombar {
        left: var(--ic-chrome-rail-w, 72px);
        right: 0;
        bottom: 0;
    }
}

.edit-renta-bottombar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 640px;
    margin: 0 auto;
    padding: 10px max(16px, env(safe-area-inset-left)) 10px max(16px, env(safe-area-inset-right));
    gap: 8px;
}

/* Cada grupo toma la mitad del espacio disponible */
.edit-renta-bottombar__start {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 6px;
    justify-content: flex-start;
}

.edit-renta-bottombar__end {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: flex-end;
}

/* Editar (página única): barra inferior = "Salir" (ancho natural) + barra Faltan/Guardar (resto). */
.renta-form.edit-renta .edit-renta-bottombar__start { flex: 0 0 auto; }
.renta-form.edit-renta .edit-renta-bottombar__inner > .rq-save-bar { flex: 1 1 auto; width: auto; min-width: 0; }

.renta-form.edit-renta .edit-renta-bar-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px;
    min-height: 48px;
    padding-left: 14px !important;
    padding-right: 14px !important;
    border-radius: 12px !important;
    font-weight: 600 !important;
    -webkit-tap-highlight-color: transparent;
}

.renta-form.edit-renta .edit-renta-bar-btn .mud-button-label {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    letter-spacing: 0.01em;
}

.renta-form.edit-renta .edit-renta-bar-btn__ico {
    font-size: 1.25rem !important;
    flex-shrink: 0;
}

.renta-form.edit-renta .edit-renta-bar-btn__ico--end {
    font-size: 1.25rem !important;
}

.renta-form.edit-renta .edit-renta-bar-btn__spin {
    flex-shrink: 0;
}

.renta-form.edit-renta .edit-renta-bar-btn--ghost {
    opacity: 0.92;
}

.renta-form.edit-renta .edit-renta-bar-btn--primary {
    padding-left: 18px !important;
    padding-right: 18px !important;
    box-shadow: 0 2px 8px color-mix(in srgb, var(--rq-primary) 35%, transparent);
}

/* Móvil: solo iconos (tooltips y aria-label mantienen el significado) */
@media (max-width: 599px) {
    .renta-form.edit-renta .edit-renta-bar-btn__txt {
        display: none !important;
    }

    .renta-form.edit-renta .edit-renta-bar-btn {
        min-width: 48px;
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .renta-form.edit-renta .edit-renta-bar-btn--primary {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    .edit-renta-bottombar__inner {
        gap: 6px;
        padding-top: 8px;
    }
}

/* Táctil (Chrome Android / MIUI): barra inferior fija sin blur */
@media (hover: none) and (pointer: coarse) {
    .edit-renta-bottombar {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        background: rgba(var(--ic-bg-rgb), 0.99) !important;
    }
}

/* Tablet / escritorio: ya se muestran textos junto a iconos */

/* ═══════════════════════════════════════════════════════════════════════
   v3 — IGUALAR AL MOCKUP: label ARRIBA (externo) + caja de input limpia.
   Solo bajo .rq-dialog (EditarRenta intacto).
   ═══════════════════════════════════════════════════════════════════════ */

/* Label de MudBlazor: sacarlo del borde y ponerlo ARRIBA (externo), muted.
   El label vive dentro de .mud-input-control-input-container (junto a la caja).
   15px = --ic-text-md, el piso legible senior del proyecto (antes 13px).
   OJO: phone-field.css reserva el alto de este label con un padding-top en .pf-row
   (su label va absoluto sobre la bandera); si cambia el tamaño, hay que ajustarlo allá. */
.rq-dialog .mud-input-control-input-container { display: flex !important; flex-direction: column !important; }
.rq-dialog .mud-input-control-input-container > .mud-input-label {
    order: -1 !important;
    position: static !important;
    transform: none !important;
    -webkit-transform: none !important;
    transform-origin: left top !important;
    font-size: var(--ic-text-md, 0.9375rem) !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    color: var(--rq-muted) !important;
    margin: 0 0 6px 2px !important;
    max-width: 100% !important;
    height: auto !important;
    width: auto !important;
    pointer-events: none;
}

/* Caja del input: radio 13, alto 52, sin notch */
.rq-dialog .mud-input.mud-input-outlined { margin-top: 0 !important; min-height: 52px !important; border-radius: 13px !important; }
.rq-dialog .mud-input-outlined .mud-input-outlined-border { border-radius: 13px !important; border-width: 1px !important; top: 0 !important; }
.rq-dialog .mud-input-outlined-border legend { width: 0 !important; max-width: 0 !important; padding: 0 !important; }
.rq-dialog .mud-input-outlined input,
.rq-dialog .mud-input-outlined textarea,
.rq-dialog .mud-input-outlined .mud-input-slot { font-size: 16px !important; }
.rq-dialog .mud-input.mud-input-outlined.mud-focused .mud-input-outlined-border { border-width: 2px !important; border-color: var(--rq-primary) !important; }

/* Sin helper text (todo por diseño) */
.rq-dialog .mud-input-helper-text { display: none !important; }

/* Botones sin MAYÚSCULAS (mockup usa Title Case) */
.rq-dialog .mud-button-root { text-transform: none !important; }
.renta-form .rq-save-btn { letter-spacing: 0 !important; }

/* Enlaces de "progressive disclosure" como texto, no botón con borde */
.rq-dialog .rq-add-contact-btn.mud-button-root,
.rq-dialog .rq-recoleccion-add-btn.mud-button-root {
    border: none !important;
    background: none !important;
    color: var(--rq-primary) !important;
    justify-content: flex-start !important;
    padding-left: 2px !important;
    font-weight: 700 !important;
    min-height: 40px !important;
}

/* Tipo de evento → filas de radio (como el mockup) */
.rq-dialog .rq-opts { display: flex; flex-direction: column; gap: 8px; }
.rq-dialog .rq-opt {
    display: flex; align-items: center; gap: 11px;
    padding: 12px 13px; border-radius: 13px;
    border: 1px solid transparent; background: none;
    color: var(--rq-text); cursor: pointer; text-align: left;
    -webkit-tap-highlight-color: transparent;
}
.rq-dialog .rq-opt__rad {
    width: 20px; height: 20px; border-radius: 50%;
    border: 2px solid var(--rq-muted); flex-shrink: 0; position: relative;
}
.rq-dialog .rq-opt--on { background: color-mix(in srgb, var(--rq-primary) 12%, transparent); }
.rq-dialog .rq-opt--on .rq-opt__rad { border-color: var(--rq-primary); }
.rq-dialog .rq-opt--on .rq-opt__rad::after {
    content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--rq-primary);
}
.rq-dialog .rq-opt__t { font-size: 15px; font-weight: 700; }

/* Limpiar ruido: nombre readonly duplicado del contacto principal + tags "OPCIONAL" */
.rq-dialog .rq-contact-row__badge,
.rq-dialog .rq-contact-row__readonly-name,
.rq-dialog .rq-optional-tag { display: none !important; }

/* Precio por producto: píldora editable (radio 11, tinte primario) */
.rq-dialog .rq-price-field .mud-input.mud-input-outlined { min-height: 46px !important; border-radius: 11px !important; }

/* El parser ya no es un chip primary-soft: vive dentro de .rq-hero (ver el
   bloque REDISEÑO 2026-08 al final), que lo pinta sobre fondo --rq-ink. */

/* Radios alineados a la izquierda; nombre de producto sin truncar */
.rq-dialog .rq-opt { justify-content: flex-start !important; }
.rq-dialog .rq-product-row__name { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; }
/* Duración "Indefinida" no aporta cuando no hay recolección: ocultar */
.rq-dialog .rq-duration-pill { display: none !important; }

/* ── Página "Nueva renta": chrome (reusa topbar/bottombar de EditarRenta) ── */
.nueva-renta-page .rq-step-content { min-height: 0; }
.renta-form.nueva-renta.nueva-renta--with-bottombar {
    padding-bottom: calc(var(--dr-action-bar-spacer-desktop, 88px) + env(safe-area-inset-bottom, 0px));
}
@media (max-width: 959px) {
    /* Sin --dr-bn-h: el BottomNav se oculta mientras esta página está abierta. */
    .renta-form.nueva-renta.nueva-renta--with-bottombar {
        padding-bottom: calc(var(--dr-action-bar-h, 68px) + max(12px, env(safe-area-inset-bottom, 0px)));
    }
}
/* La barra inferior de la página contiene la save-bar centrada */
.nueva-renta-page .edit-renta-bottombar__inner { display: block; }

/* La fila de producto se rehízo en dos renglones: ver el bloque REDISEÑO
   2026-08 al final. Los overrides compactos de aquí la aplastaban de vuelta a
   una sola fila y escondían el desglose. */
.rq-dialog .rq-price-field .mud-input-control-input-container > .mud-input-label { display: none !important; }  /* sin label vacío */

/* ── Afinar al mockup: quitar el espacio reservado del helper-text (compacta el ritmo) ── */
.rq-dialog .mud-input-control-helper-container { display: none !important; }
/* Las tarjetas ya traen su propio ritmo (.rq-card); el contenedor sólo separa. */
.rq-dialog .rq-sections { gap: 12px; }

/* ════════════════════════════════════════════════════════════════════════
   AFINADO AL MOCKUP (_uxmock): header título-izquierda + X, dots de sección,
   secciones agrupadas (Cliente/Evento/Productos/Pago), acentos verde/ámbar.
   Todo scopeado a .rq-dialog / .nueva-renta-page → no afecta EditarRenta.
   ════════════════════════════════════════════════════════════════════════ */

/* — Header: "Nueva renta" a la izquierda + X (cerrar) + ⋮ discreto — */
.nueva-renta-page .edit-renta-topbar__center--lead { justify-content: flex-start; }
.nueva-renta-page .edit-renta-topbar__title { font-size: 1.1875rem; font-weight: 800; letter-spacing: -0.01em; }
.nueva-renta-page .rq-title-bar__right { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.edit-renta-topbar__close {
    width: 38px; height: 38px; flex-shrink: 0;
    border-radius: 11px; border: 1px solid var(--rq-card-border);
    background: transparent; color: var(--rq-muted);
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer; transition: background 0.15s, border-color 0.15s;
    -webkit-tap-highlight-color: transparent;
}
.edit-renta-topbar__close:hover,
.edit-renta-topbar__close:focus-visible { background: rgba(148, 163, 184, 0.12); color: var(--rq-text); outline: none; }

/* — El encabezado numerado 1..5 y el bloque de fecha con flechas los sustituyen
     .rq-card__head y .rq-dt-split (bloque REDISEÑO 2026-08, al final). — */
.rq-dialog .rq-field--search { margin-top: 0; }

/* — Fila de producto: meta bajo el nombre. El filo superior del pricing lo quita
     el rediseño: los dos renglones ya se leen como un bloque. — */
.rq-dialog .rq-product-row__meta {
    display: flex; flex-wrap: wrap; gap: 4px 12px;
    font-size: 0.8125rem; color: var(--rq-muted);
}

/* — Hint del switch "Horarios por producto" — */
.rq-dialog .rq-parcial-row__l { flex-wrap: wrap; }
.rq-dialog .rq-parcial-row__hint {
    flex-basis: 100%;
    font-size: 0.8125rem; font-weight: 400; color: var(--rq-muted);
}

/* — Pago: el total en lectura pasó a .rq-pay-total (tarjeta --rq-ink). Aquí sólo
     queda el hint del método deshabilitado. — */
.rq-dialog .rq-metodo-hint {
    margin: 2px 2px 0; font-size: 0.8125rem; color: var(--rq-muted);
}

/* — Bottombar: total vivo entre el estado y el CTA (solo Nueva renta).
     Con el total ocupando ancho, los chips de "Faltan" se apilaban en 3 filas y la barra
     se comía la pantalla: aquí van en UNA fila con scroll-x (mismo patrón que .lc-toolbar). — */
.rq-dialog .rq-save-bar__status { flex-wrap: nowrap; }
.rq-dialog .rq-save-bar__chips { flex-wrap: nowrap; min-width: 0; }
.rq-dialog .rq-pendientes__chip {
    min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rq-dialog .rq-save-bar__total {
    display: flex; flex-direction: column; align-items: flex-end; justify-content: center;
    flex-shrink: 0; min-width: 0; gap: 1px;
    background: none; border: none; cursor: pointer; font-family: inherit;
    padding: 4px 8px; border-radius: 10px;
    -webkit-tap-highlight-color: transparent;
}
.rq-dialog .rq-save-bar__total:hover,
.rq-dialog .rq-save-bar__total:focus-visible { background: var(--ic-interactive-hover, rgba(148,163,184,0.12)); outline: none; }
.rq-dialog .rq-save-bar__total-val { font-size: 1.0625rem; font-weight: 800; color: var(--rq-text); line-height: 1.1; }
.rq-dialog .rq-save-bar__total-sub { font-size: 0.75rem; font-weight: 600; color: var(--rq-muted); }
@media (max-width: 380px) {
    .rq-dialog .rq-save-bar__total-sub { display: none; }
}

/* — Sublabel de campo interno (Tipo de evento / Dirección de entrega) — */
.rq-dialog .rq-field-sublabel {
    display: block; font-size: var(--ic-text-md, 0.9375rem); font-weight: 600;
    color: var(--rq-muted); margin: 0 0 6px 2px;
}

/* — Secciones-continuación (sin header): fluyen dentro del grupo, sin doble espacio — */

/* — Links de disclosure "+ Agregar …" (factura / nota), como el mockup .more a — */
.rq-dialog .rq-disclosure-link {
    display: inline-flex; align-items: center; gap: 6px;
    background: none; border: none; cursor: pointer;
    /* 15px = piso senior (--ic-text-md) y min-height 44px = target táctil. */
    padding: 6px 2px; font-family: inherit; min-height: 44px;
    color: var(--rq-primary); font-size: 15px; font-weight: 700;
    -webkit-tap-highlight-color: transparent;
}
.rq-dialog .rq-disclosure-link__plus { font-size: 16px; line-height: 1; }
.rq-dialog .rq-disclosure-link--remove { color: var(--rq-muted); margin-top: 10px; font-weight: 600; }
/* Links "+" en una sola fila (factura + nota), como el mockup .more */
.rq-dialog .rq-disclosure-row { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; margin-top: 2px; }
/* Total de la renta: campo prominente (mockup .pay-total: alto 58, 22px/800) */
.rq-dialog .rq-field--total .mud-input.mud-input-outlined { min-height: 58px !important; }
.rq-dialog .rq-field--total .mud-input-outlined input { font-size: 22px !important; font-weight: 800 !important; }
.rq-dialog .rq-field--total .mud-input-adornment-start { font-size: 20px !important; }

/* ── Guía de errores: resaltado del campo obligatorio que falta ──
   El resaltado en rojo es PERSISTENTE (hasta corregir); la sacudida es one-shot.
   Globales (no scope) porque se usan tanto en el alta (.rq-dialog) como en editar (.edit-renta-page). */
.rq-invalid {
    border-radius: 12px;
    box-shadow: 0 0 0 1.5px var(--lc-err, var(--mud-palette-error, #F44336));
    transition: box-shadow .2s ease;
}
/* Envoltura de un solo campo Mud: el aro lo pone el borde del propio input (abajo), y
   duplicarlo alrededor de la caja dibuja dos rectángulos concéntricos. */
.rq-dialog .rq-card__body > .rq-invalid,
.rq-dialog .rq-contact-row__fields > .rq-invalid { box-shadow: none; }
/* Resalta el control mismo dentro de la sección marcada para que destaque sobre MudBlazor.
   Rediseño 2026-08-21: el aro baja a 1.5px y se van el halo de 6px y el fondo tintado que
   llevaba la envoltura. Con la línea escrita debajo del campo (.rq-need) y el resumen
   arriba, el bloque rojo entero era la tercera vez que se decía lo mismo. La sacudida
   one-shot (.ic-shake, ic-form-validation.js) se queda: esa sí dice «aquí», no «mal».
   --lc-err y no --mud-palette-error: la clase es global y --lc-err voltea con el tema. */
.rq-invalid .mud-input-outlined .mud-input-outlined-border {
    border-color: var(--lc-err, var(--mud-palette-error, #F44336)) !important;
    border-width: 1.5px !important;
}

@keyframes ic-shake {
    0%, 100% { transform: translateX(0); }
    15%, 75% { transform: translateX(-5px); }
    35%, 55% { transform: translateX(5px); }
}
.ic-shake {
    animation: ic-shake .42s cubic-bezier(.36, .07, .19, .97) both;
}
@media (prefers-reduced-motion: reduce) {
    .ic-shake {
        animation: none;
    }
}

/* ── Botón "×" para quitar tarjeta (factura / nota): afordancia clara en la esquina ── */
.rq-dialog .rq-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}
.rq-dialog .rq-card-head .rq-card-head__title {
    font-weight: 700;
    font-size: 13.5px;
    color: var(--rq-text);
}
.rq-dialog .rq-card-dismiss {
    color: var(--rq-muted) !important;
    transition: color .15s ease, background .15s ease;
}
.rq-dialog .rq-card-dismiss:hover {
    color: var(--rq-danger) !important;
    background: rgba(244, 67, 54, 0.12) !important; /* fallback */
    background: color-mix(in srgb, var(--rq-danger) 12%, transparent) !important;
}

/* ════════════════════════════════════════════════════════════════════════════
   REDISEÑO 2026-08 — mockup «Nueva Renta - Rediseño.dc.html»
   ────────────────────────────────────────────────────────────────────────────
   Bloques compartidos por Nueva renta (.rq-dialog) y Modificar renta
   (.edit-renta-page): un solo lenguaje visual para el mismo formulario.
   Lo que NO comparten es el flujo del alta —hero del parser, barra de
   pendientes y chips «＋»—, que sólo tiene sentido cuando capturas de cero.
   Va al final del archivo a propósito: gana en cascada a los bloques que
   sustituye sin necesidad de subir especificidad.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Hero del parser: la entrada principal del alta ──────────────────────────
   Contraste alto para que sea lo primero que ve el pulgar, igual que el hero
   de la landing. Tras analizar colapsa a una barra de una línea.
   SIN sombra (2026-09-18): el relleno oscuro sobre el fondo de la página ya
   lo separa de sobra, y el halo de 28px le ponía un cerco sucio al borde. Es
   la misma regla que el topbar, que también renuncia a la suya. Al irse, el
   `box-shadow: none` del colapsado sobraba: sólo existía para apagar ésta. */
.rq-hero {
    background: var(--rq-ink);
    border: 1px solid var(--rq-ink-border);
    border-radius: 16px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;

    /* Escala de «sobre tinta». NO va en el bloque de tokens de arriba ni en el
       override de tema claro, y eso es el punto: el fondo del hero es oscuro en
       AMBOS temas, así que un token que voltee con el tema aquí miente. Ese fue
       exactamente el bug del CTA — ver .mwpp-cta:disabled más abajo. */
    --rq-on-ink-disabled-bg: rgba(255, 255, 255, 0.14);
    --rq-on-ink-disabled-fg: rgba(255, 255, 255, 0.78);

    /* El acento del hero, por el mismo motivo: sobre tinta oscura sólo sirve el tono
       claro de la familia. Con var(--ic-nav-accent) el tema claro traería #5563E0 y
       caería a 2.6:1. Este es el lila pastel de --lc-accent oscuro, fijo en ambos temas. */
    --rq-on-ink-accent:    #A6B2FF;
    --rq-on-ink-accent-bg: rgba(166, 178, 255, 0.16);
}
.rq-hero__head { display: flex; align-items: center; gap: 9px; }
.rq-hero__ico {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: 9px; flex: none;
    background: var(--rq-on-ink-accent-bg); color: var(--rq-on-ink-accent);
}
.rq-hero__ico .mud-icon-root { font-size: 1.0625rem !important; }
.rq-hero__text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.rq-hero__t   { font-size: 0.9375rem; font-weight: 800; color: #fff; letter-spacing: -0.01em; }
.rq-hero__sub { font-size: 0.75rem; font-weight: 500; color: rgba(255, 255, 255, 0.62); }

/* El textarea vive dentro del hero oscuro: MudBlazor pinta borde y texto con la
   paleta del tema, que aquí queda invisible sobre #0F172A. */
.rq-hero .mud-input-outlined-border { border-color: rgba(255, 255, 255, 0.18) !important; }
.rq-hero .mud-input-root,
.rq-hero textarea { color: #fff !important; font-size: 0.875rem !important; }
.rq-hero .mud-input-root::placeholder,
.rq-hero textarea::placeholder { color: rgba(255, 255, 255, 0.42) !important; }
.rq-hero .mud-input-label { color: rgba(255, 255, 255, 0.62) !important; }

/* El textarea se deshabilita mientras se analiza, y ahí MudBlazor gana con su
   propio :disabled: el mensaje que el usuario acaba de pegar se vuelve ilegible
   justo cuando quiere releerlo. -webkit-text-fill-color no es opcional: WebKit
   lo aplica a :disabled y pisa `color` (importa en el WebView de Android). */
.rq-hero .mud-input.mud-disabled .mud-input-slot,
.rq-hero .mud-input-root.mud-disabled,
.rq-hero .mud-input-root:disabled,
.rq-hero textarea:disabled {
    color: rgba(255, 255, 255, 0.72) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.72) !important;
}

.rq-hero__actions { display: flex; gap: 9px; }
.rq-hero__cta {
    flex: 1; min-height: 48px; border-radius: 11px !important;
    font-weight: 700 !important; text-transform: none !important; font-size: 0.9375rem !important;
}
.rq-hero__ghost {
    min-height: 48px; padding: 0 15px; border-radius: 11px !important;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.26) !important; color: #fff !important;
    text-transform: none !important; font-weight: 600 !important;
}

/* Colapsado: tras analizar, una sola línea que resume y ofrece «Ver texto». */
.rq-hero--done {
    flex-direction: row; align-items: center; gap: 10px;
    padding: 10px 12px; border-radius: 12px;
}
.rq-hero--done .rq-hero__ico { width: 26px; height: 26px; border-radius: 8px; }
.rq-hero--done .rq-hero__t {
    flex: 1; min-width: 0; font-size: 0.78125rem; font-weight: 600;
    color: rgba(255, 255, 255, 0.82); line-height: 1.35;
}
.rq-hero__link {
    font-size: 0.75rem; font-weight: 700; color: var(--rq-on-ink-accent); white-space: nowrap;
    background: none; border: 0; cursor: pointer; padding: 6px 2px; min-height: 34px;
    font-family: inherit; -webkit-tap-highlight-color: transparent;
}

/* MensajeWhatsAppParserPanel dentro del hero: el MudExpansionPanel aporta la
   mecánica (abrir/cerrar) pero no debe aportar chrome — la tarjeta es el hero. */
.rq-hero .mwpp-panel { margin: 0; }
.rq-hero .mud-expansion-panels,
.rq-hero .mud-expand-panel {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}
.rq-hero .mud-expand-panel-header {
    padding: 0 !important;
    min-height: 0 !important;
    color: #fff !important;
}
.rq-hero .mud-expand-panel-text { padding: 0 !important; }
.rq-hero .mud-expand-panel-header .mud-expand-panel-icon { color: rgba(255, 255, 255, 0.62) !important; }

.rq-hero .mwpp-title { gap: 9px; }
.rq-hero .mwpp-title__ico {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: 9px; flex: none;
    background: var(--rq-on-ink-accent-bg);
}
.rq-hero .mwpp-title__ico .mud-icon-root { font-size: 1.0625rem !important; color: var(--rq-on-ink-accent) !important; }
.rq-hero .mwpp-title__t { font-size: 0.9375rem; font-weight: 800; color: #fff; letter-spacing: -0.01em; }
.rq-hero .mwpp-title__sub { font-size: 0.75rem; font-weight: 500; color: rgba(255, 255, 255, 0.62); }

.rq-hero .mwpp-body { padding: 12px 0 0; gap: 12px; }
.rq-hero .mwpp-actions { gap: 9px; flex-wrap: nowrap; }
.rq-hero .mwpp-cta {
    flex: 1; min-height: 48px; border-radius: 11px !important;
    font-weight: 700 !important; text-transform: none !important; font-size: 0.9375rem !important;
}
/* El botón principal del alta desaparecía. No era un fallo de render: este bloque
   define tamaño y tipografía pero no color ni fondo, así que al deshabilitarse
   ganaba MudBlazor con --mud-palette-action-disabled-background = rgba(15,23,42,.10),
   que compuesto sobre el --rq-ink del hero (#0F172A en claro) da EL MISMO PÍXEL.
   Contraste 1.00:1: el botón seguía ahí, ocupando su hueco, invisible. Y como el
   «Limpiar» de al lado sí forzaba su color a mano, parecía que este se esfumaba.

   Va en la escala de sobre-tinta, no en tokens de tema (ver .rq-hero). El
   !important es obligatorio: MudBlazor lo lleva en .mud-button-root:disabled, y
   entre dos !important decide la especificidad — (0,3,0) gana a (0,2,0). Mismo
   remedio que .rq-save-btn:disabled, que ya lo tenía y este nunca. */
.rq-hero .mwpp-cta:disabled,
.rq-hero .mwpp-cta.mud-button-disabled {
    background-color: var(--rq-on-ink-disabled-bg) !important;
    color: var(--rq-on-ink-disabled-fg) !important;
    box-shadow: none !important;
}
.rq-hero .mwpp-cta:disabled .mud-icon-root,
.rq-hero .mwpp-cta:disabled .mud-progress-circular { color: inherit !important; }

/* Pista bajo el textarea cuando se pulsa «Analizar» sin haber pegado nada. */
.rq-hero .mwpp-hint {
    display: block; margin-top: 6px;
    font-size: 0.75rem; font-weight: 600;
    color: var(--rq-on-ink-disabled-fg);
}
.rq-hero .mwpp-ghost {
    min-height: 48px; padding: 0 15px !important; border-radius: 11px !important;
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.26) !important; color: #fff !important;
    text-transform: none !important; font-weight: 600 !important;
}
.rq-hero .mwpp-resumen,
.rq-hero .mwpp-warnings { border-top-color: rgba(255, 255, 255, 0.16) !important; }
.rq-hero .mwpp-resumen__label { color: rgba(255, 255, 255, 0.62) !important; }
.rq-hero .mwpp-resumen .mud-chip { border-color: rgba(255, 255, 255, 0.26) !important; }

/* Colapsado: la cabecera ES la barra de una línea; el cuerpo no se pinta. */
.rq-hero--done .mwpp-title__ico { width: 26px; height: 26px; border-radius: 8px; }
.rq-hero--done .mwpp-title__ico .mud-icon-root { font-size: 0.9375rem !important; }
.rq-hero--done .mwpp-title { width: 100%; }
.rq-hero--done .mwpp-title__text { flex: 1; }
.rq-hero--done .mwpp-title__t {
    font-size: 0.78125rem; font-weight: 600;
    color: rgba(255, 255, 255, 0.82); line-height: 1.35;
}

/* Separador «o captura a mano»: sólo mientras el hero está expandido. */
.rq-or { display: flex; align-items: center; gap: 12px; }
.rq-or > span { flex: 1; height: 1px; background: var(--rq-card-border); }
.rq-or__t {
    flex: none !important; height: auto !important; background: none !important;
    font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--rq-subtle);
}

/* ═══════════════════════════════════════════════════════════════════════════
   RESUMEN DE PENDIENTES — mockup «Nueva renta · una sola voz» (2026-08-21)
   ═══════════════════════════════════════════════════════════════════════════
   Sustituye a las CUATRO superficies que decían lo mismo:
     · .rq-checklist / .rq-check*   (4 chips en el topbar)   → borradas aquí
     · .rq-card__state              (sello por tarjeta)      → borrado abajo
     · .rq-save-bar__status         (estado del pie)         → el alta deja de usarlo
       (las reglas siguen vivas: las usa EditarRenta, que no entra en este rediseño)
     · .rq-invalid                  (aro + halo + fondo)     → rebajado a aro de 1.5px
   Quedan DOS, con reparto explícito: ARRIBA SE CUENTA (.rq-pend), ABAJO SE NOMBRA
   (.rq-need, junto al campo). Ninguna repite a la otra palabra por palabra.

   Tono progresivo: al abrir, todo va en --rq-sigue (neutro). El rojo --rq-falta
   entra en dos momentos y sólo en dos: al pulsar «Registrar renta» con faltantes,
   y en un campo que se tocó y se dejó vacío. Es el MISMO componente con las mismas
   palabras cambiando de piel. */

/* El resumen es el SEGUNDO RENGLÓN del topbar fijo del alta (2026-09-17), no una banda
   pegajosa dentro del scroll. Antes era `position: sticky` con un `top` calculado a mano
   para colgar del topbar, y al abrirse renunciaba a la pegajosidad (`.rq-sticky--open`),
   así que la única superficie que cuenta lo que falta se iba con el scroll justo mientras
   se recorría el formulario para llenarlo. Ahora vive dentro del <header>: reserva su
   renglón siempre y, abierta, crece hacia abajo sobre el contenido, que no se mueve.

   Los dos renglones del topbar se miden con tokens en vez de repetir el 52/56 en cuatro
   sitios. --nr-pend-h son los 56px de .rq-pend__bar más la línea de 1px que la separa
   del renglón del título. */
.nueva-renta-page {
    --nr-row-h: 52px;
    --nr-pend-h: 57px;
}
@media (min-width: 480px) {
    .nueva-renta-page { --nr-row-h: 56px; }
}

/* El ancla en flujo compensa el topbar fijo: ahora tiene que valer por los DOS renglones.
   La regla base (52/56) se queda como está para EditarRenta; esto sólo la sube aquí.
   El +1px es el `border-bottom` del propio topbar, que cuenta para su alto medido y que
   la regla base nunca sumó: medido, el header son 114px y los tokens dicen 113. */
.nueva-renta-page .edit-renta-topbar-anchor {
    height: calc(var(--nr-row-h) + var(--nr-pend-h) + 1px);
}

.rq-pend {
    border: 1px solid var(--rq-card-border);
    border-radius: var(--rq-radius);
    background: var(--rq-surface);
    overflow: hidden;
}

/* Cabecera tocable. 56px reales: no hay ::after invisible que la agrande. */
.rq-pend__bar {
    display: flex; align-items: center; gap: 10px;
    width: 100%; min-height: 56px;
    padding: 0 var(--ic-space-3, 12px);
    border: 0; background: none; color: var(--rq-text);
    font-family: inherit; text-align: left; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.rq-pend__bar[disabled] { cursor: default; }
.rq-pend__ico { display: flex; flex: none; color: var(--rq-sigue); }
.rq-pend__ico .mud-icon-root { font-size: 1.5rem !important; color: inherit !important; }
.rq-pend__txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; margin-right: auto; }
.rq-pend__t {
    font-size: var(--ic-text-md, 0.9375rem); font-weight: 800;
    letter-spacing: -0.01em; color: var(--rq-text);
}
.rq-pend__s { font-size: var(--ic-text-xs, 0.75rem); font-weight: 600; color: var(--rq-subtle); }
.rq-pend__chev { display: flex; flex: none; color: var(--rq-subtle); }
.rq-pend__chev .mud-icon-root { font-size: 1.375rem !important; color: inherit !important; }

/* Cara de error: MISMO componente, MISMAS palabras, otra piel. */
.rq-pend--err {
    border-color: var(--rq-falta);
    background: color-mix(in srgb, var(--rq-falta) 10%, var(--rq-surface));
}
.rq-pend--err .rq-pend__ico { color: var(--rq-falta); }
.rq-pend--err .rq-pend__t   { color: var(--rq-falta); }
.rq-pend--err .rq-pend__s   { color: color-mix(in srgb, var(--rq-falta) 78%, var(--rq-text)); }

/* Cara de listo. Misma altura: la barra no se va nunca, cambia de piel. */
.rq-pend--ok .rq-pend__ico { color: var(--rq-listo); }
.rq-pend--ok .rq-pend__t   { color: var(--rq-listo); }

.rq-pend__list { display: flex; flex-direction: column; border-top: 1px solid var(--rq-hair); }

/* Renglón = un dato que falta. 48px, el mínimo de la casa, sin trampa. Un toque
   lleva al campo, lo centra y lo enfoca (el gesto que ya funcionaba). */
.rq-pend__row {
    display: flex; align-items: center; gap: 10px;
    min-height: var(--ic-touch-min, 48px);
    padding: 0 var(--ic-space-3, 12px);
    border: 0; border-top: 1px solid var(--rq-hair);
    background: none; color: var(--rq-text);
    font-family: inherit; text-align: left; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.rq-pend__row:first-child { border-top: 0; }
.rq-pend__row-ico { display: flex; flex: none; color: var(--rq-sigue); }
.rq-pend__row-ico .mud-icon-root { font-size: 1.125rem !important; color: inherit !important; }
.rq-pend__row-t {
    flex: 1; min-width: 0;
    font-size: var(--ic-text-sm, 0.875rem); font-weight: 700; color: var(--rq-text);
}
.rq-pend__row-k {
    flex: none; font-size: var(--ic-text-xs, 0.75rem); font-weight: 700; color: var(--rq-subtle);
}
.rq-pend--err .rq-pend__row-ico { color: var(--rq-falta); }

/* ── El resumen como renglón del topbar — .rq-pend--barra ───────────────────────
   A sangre: sin tarjeta, sin esquinas y sin canalón lateral. Lo que separa los dos
   renglones es una línea de 1px, la misma gramática que el borde inferior del topbar.
   El relleno lo pone el <header>: aquí va transparente en vez de var(--rq-surface) para
   que el renglón siga a la barra sea cual sea su superficie, sin dos tokens que hoy
   coinciden (--rq-surface es var(--ic-surface) en oscuro y #FFFFFF en claro, igual que
   --ic-surface) y mañana pueden separarse. */
.rq-pend--barra {
    border: 0;
    border-top: 1px solid var(--rq-card-border);
    border-radius: 0;
    background: transparent;
    overflow: visible;
}
/* Alineados con el renglón del título, safe-area incluida. */
.rq-pend--barra .rq-pend__bar,
.rq-pend--barra .rq-pend__row {
    padding: 0 max(12px, env(safe-area-inset-right)) 0 max(12px, env(safe-area-inset-left));
}
/* La piel de error pintaba `border-color`, que con `border: 0` es declaración muerta:
   en el renglón el rojo entra por la línea de arriba y por el relleno, y el relleno tiene
   que ser OPACO —la lista flota sobre el formulario— así que mezcla sobre la superficie
   del header, no sobre la de la tarjeta. */
.rq-pend--barra.rq-pend--err {
    border-top-color: var(--rq-falta);
    background: color-mix(in srgb, var(--rq-falta) 10%, var(--ic-surface));
}
/* Seis pendientes son ~290px de lista: en un teléfono corto se come la pantalla. */
.rq-pend--barra .rq-pend__list {
    max-height: min(48vh, 320px);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}
/* La única sombra del topbar, y sólo mientras la lista está abierta: cerrada, la línea
   de 1px basta (ver el comentario de .edit-renta-topbar); abierta, el contenido scrollea
   por debajo del panel y una línea no lo despega de nada. */
.edit-renta-topbar--nr:has(.rq-pend__list) {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}

/* ── La marca junto al campo — .rq-need ──────────────────────────────────────
   Una línea escrita bajo el campo. Es la SEGUNDA superficie y la última: el
   resumen dice cuántos y cuáles, el campo dice «este». */
.rq-need {
    display: flex; align-items: center; gap: 6px;
    min-height: 20px; margin-top: 6px;
    font-size: var(--ic-text-xs, 0.75rem); font-weight: 700;
    color: var(--rq-subtle);          /* neutro: «lo que sigue» */
}
.rq-need .mud-icon-root { font-size: 1rem !important; flex: none; color: inherit !important; }
.rq-need--err { color: var(--rq-falta); }

/* El topbar del alta apila DOS renglones: el del título (.edit-renta-topbar__row) y el
   resumen de pendientes (.rq-pend--barra). Llevó en su día una tercera fila de 4 chips
   que subía el ancla a 90px; el resumen la sustituyó, y desde 2026-09-17 el resumen
   mismo subió aquí desde el formulario. El alto de cada renglón sale de --nr-row-h /
   --nr-pend-h, que también miden el ancla. */
.edit-renta-topbar--nr { flex-direction: column; align-items: stretch; gap: 0; padding-left: 0; padding-right: 0; }
.edit-renta-topbar__row {
    display: flex; align-items: center; gap: 12px;
    min-height: var(--nr-row-h, 52px);
    padding: 0 max(12px, env(safe-area-inset-right)) 0 max(12px, env(safe-area-inset-left));
}

/* ── Tarjeta de sección (sucesor de .rq-section) ─────────────────────────────
   Fuera los números 1…5: la tarjeta se identifica por icono + título, y su
   lado derecho es el estado (Listo / Revisar). */
.rq-card {
    background: var(--rq-surface);
    border: 1px solid var(--rq-card-border);
    border-radius: var(--rq-radius);
    overflow: hidden;
}
.rq-card + .rq-card { margin-top: 12px; }
.rq-card__head {
    display: flex; align-items: center; gap: 9px;
    padding: 11px 13px;
    border-bottom: 1px solid color-mix(in srgb, var(--rq-card-border) 60%, transparent);
}
.rq-card__ico {
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; border-radius: 8px; flex: none;
    background: var(--rq-primary-soft); color: var(--rq-primary);
}
.rq-card__ico .mud-icon-root { font-size: 0.9375rem !important; color: inherit !important; }
.rq-card__t {
    font-size: 0.90625rem; font-weight: 800; letter-spacing: -0.01em;
    margin-right: auto; color: var(--rq-text); min-width: 0;
}
.rq-card__body { padding: 12px 13px; display: flex; flex-direction: column; gap: 10px; }
/* Acción secundaria en la cabecera (p. ej. «Ver desglose»). */
.rq-card__act {
    background: none; border: 0; cursor: pointer; font-family: inherit;
    font-size: 0.75rem; font-weight: 700; color: var(--rq-primary);
    padding: 6px 2px; min-height: 34px; white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
}
/* Acción de cabecera que destruye lo capturado («Vaciar»): apagada hasta que se toca, para que
   no compita con el contador ni se pulse de pasada. */
.rq-card__act--danger { color: var(--rq-muted); }
.rq-card__act--danger:hover, .rq-card__act--danger:active { color: var(--rq-danger); }

/* El sello de la esquina derecha («Corregir» / «Por llenar» / «Sin confirmar» / «Listo»)
   se retiró en el rediseño 2026-08-21: era la tercera voz del mismo cálculo, y sus dos
   últimas palabras significaban cosas distintas turnándose el mismo pixel. Lo cubren el
   resumen (.rq-pend) y la línea bajo el campo (.rq-need), que es más precisa que un
   sello por bloque. La cabecera de la tarjeta queda vacía a la derecha. */
.rq-card__count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px;
    background: var(--rq-primary); color: #fff; font-size: 0.75rem; font-weight: 800;
}
/* Sección con error: aro suave, no borde rojo grueso.
   El alta dejó de emitir esta clase en el rediseño 2026-08-21 —pintaba en rojo un bloque
   entero para señalar un campo, y con el resumen arriba y la línea bajo el campo era la
   cuarta vez que se decía lo mismo—. La regla sigue viva porque la usa EditarRenta, que
   no entra en este rediseño; cuando se rediseñe, se va con ella. */
.rq-card--error {
    border-color: color-mix(in srgb, var(--rq-danger) 45%, var(--rq-card-border));
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--rq-danger) 8%, transparent);
}
.rq-card--error .rq-card__ico { background: color-mix(in srgb, var(--rq-danger) 14%, transparent); color: var(--rq-danger); }
/* Tarjeta apagada: existe pero aún no aplica (p. ej. Pago sin total). */
.rq-card--muted .rq-card__ico { background: var(--rq-surface-2); color: var(--rq-subtle); }

/* ── Campo opcional abierto: el «✕» que lo vuelve a cerrar ─────────────────── */
/* Alineado ABAJO a propósito: en este formulario la etiqueta va encima de la caja
   (ver .mud-input-control-input-container arriba), así que alinear arriba dejaría el
   «✕» junto al texto de la etiqueta y no junto al campo que cierra. Con flex-end
   queda pegado a la caja del input aunque la etiqueta ocupe una o dos líneas. */
.rq-optfield { display: flex; align-items: flex-end; gap: 4px; }
.rq-optfield .rq-field { flex: 1; min-width: 0; }
.rq-optfield__x { flex: none; margin-bottom: 11px; }

/* ── Chips «＋» para todo lo opcional (sucesor de .rq-disclosure-link) ─────── */
.rq-more { display: flex; gap: 8px; flex-wrap: wrap; }
.rq-more__btn {
    display: inline-flex; align-items: center; gap: 5px;
    height: 34px; padding: 0 12px; border-radius: 9px;
    border: 1px dashed var(--rq-card-border); background: transparent;
    color: var(--rq-primary); font-size: 0.8125rem; font-weight: 700;
    font-family: inherit; cursor: pointer; position: relative;
    -webkit-tap-highlight-color: transparent;
}
.rq-more__btn::after { content: ""; position: absolute; inset: -5px 0; }
.rq-more__btn:active { background: var(--rq-primary-soft); }

/* ── Fecha y hora: un solo control partido (sucesor de .rq-dt-block) ───────── */
.rq-dt-split {
    display: flex; align-items: stretch;
    border: 1px solid var(--rq-card-border); border-radius: 12px;
    overflow: hidden; background: var(--rq-surface-2);
}
.rq-dt-split__cell { flex: 1; display: flex; flex-direction: column; gap: 2px; padding: 9px 12px; min-width: 0; }
.rq-dt-split__cell--date { flex: 1.35; }
.rq-dt-split__cell + .rq-dt-split__cell { border-left: 1px solid var(--rq-card-border); }
.rq-dt-split__lab {
    font-size: 0.625rem; font-weight: 800; letter-spacing: 0.05em;
    text-transform: uppercase; color: var(--rq-subtle);
}
.rq-dt-split__val { font-size: 0.96875rem; font-weight: 700; letter-spacing: -0.01em; color: var(--rq-text); }
/* Los pickers de siempre, sin su caja: la caja es la celda. */
.rq-dt-split .mud-input-outlined-border { border: 0 !important; }
.rq-dt-split .mud-input-control { margin-bottom: 0 !important; }
.rq-dt-split .mud-input.mud-input-outlined { min-height: 0 !important; }
.rq-dt-split .mud-input-root {
    padding: 0 !important; font-weight: 700 !important;
    font-size: 0.96875rem !important; letter-spacing: -0.01em;
}
.rq-dt-split .mud-input-slot-nopadding,
.rq-dt-split .mud-input > input { padding: 0 !important; }

/* Recogida: chips en la misma línea; «Otro…» abre los pickers de fin. */
.rq-pickup { display: flex; gap: 7px; align-items: center; flex-wrap: wrap; }
.rq-pickup__lab {
    font-size: 0.65625rem; font-weight: 800; letter-spacing: 0.05em;
    text-transform: uppercase; color: var(--rq-subtle); white-space: nowrap;
}
.rq-pickup__chip {
    display: inline-flex; align-items: center; height: 32px; padding: 0 12px;
    border-radius: 999px; border: 1px solid var(--rq-card-border);
    background: var(--rq-surface); color: var(--rq-muted);
    font-size: 0.78125rem; font-weight: 600; font-family: inherit; cursor: pointer;
    position: relative; -webkit-tap-highlight-color: transparent;
}
.rq-pickup__chip::after { content: ""; position: absolute; inset: -6px 0; }
.rq-pickup__chip--on { background: var(--rq-primary); border-color: var(--rq-primary); color: #fff; font-weight: 700; }
.rq-pickup__chip--more { border-style: dashed; color: var(--rq-primary); font-weight: 700; background: transparent; }

/* Píldora de duración: informativa, no compite con los controles. */
.rq-duration-pill {
    display: flex; align-items: center; gap: 7px;
    font-size: 0.78125rem; font-weight: 600; color: var(--rq-muted);
    background: var(--rq-surface-2); border-radius: 9px; padding: 7px 11px;
    border: 0;
}

/* ── Fila de producto en dos renglones ───────────────────────────────────────
   El apretujón venía de meter stepper + desglose + precio en un solo
   flex-nowrap. Ahora: renglón 1 nombre+importe, renglón 2 controles. */
.rq-product-row {
    border: 1px solid var(--rq-card-border); border-left-width: 1px;
    border-radius: 12px; padding: 11px 12px;
    display: flex; flex-direction: column; gap: 9px;
    background: transparent;
}
.rq-product-row--overridden { border-color: var(--rq-override-bar); border-left-color: var(--rq-override-bar); }

/* Línea sin precio: un producto que el catálogo no tiene tarifado entraba en cero
   y sumaba cero al total sin decir nada. Reusa el ámbar del override porque es lo
   mismo que dice: «este importe no es el de siempre, míralo». Nada de rojo, que
   aquí está reservado a lo que impide guardar — y esto no lo impide. */
.rq-product-row--sinprecio { border-color: var(--rq-override-bar); border-left-color: var(--rq-override-bar); }

/* Ocupa el hueco del desglose, y es el mismo destino que tocar el importe. */
.rq-product-row__sinprecio {
    display: inline-flex; align-items: center; gap: 5px;
    min-height: var(--ic-touch-min, 48px);
    font-family: inherit; font-size: 0.78125rem; font-weight: 700;
    color: var(--rq-override-bar);
    background: none; border: 0; padding: 0 2px;
    cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.rq-product-row__sinprecio:hover,
.rq-product-row__sinprecio:focus-visible { text-decoration: underline; outline: none; }

/* En Modificar renta el campo de precio ya está siempre a la vista, así que el
   aviso no necesita ser un botón: ahí sólo nombra lo que falta. */
.rq-product-row__sinprecio-txt { font-weight: 700; color: var(--rq-override-bar); }

.rq-product-row__header { display: flex; align-items: flex-start; gap: 8px; margin: 0; padding: 0; border: 0; }
.rq-product-row__title-block { display: flex; flex-direction: column; gap: 3px; min-width: 0; margin-right: auto; }
.rq-product-row__name { font-size: 0.90625rem; font-weight: 700; letter-spacing: -0.01em; color: var(--rq-text); }
.rq-product-row__amount {
    font-size: 0.96875rem; font-weight: 800; letter-spacing: -0.01em; white-space: nowrap;
    background: none; border: 0; padding: 4px 2px; color: var(--rq-text);
    font-family: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.rq-product-row__amount:hover,
.rq-product-row__amount:focus-visible { color: var(--rq-primary); outline: none; }

.rq-product-row__pricing {
    display: flex; align-items: center; gap: 10px; flex-wrap: nowrap;
    border-top: 0 !important; padding-top: 0 !important;
}
.rq-product-row__controls {
    display: flex; align-items: center; gap: 2px;
    border: 1px solid var(--rq-card-border); border-radius: 10px;
    background: var(--rq-surface-2); height: 38px; padding: 0 3px; flex: none;
}
.rq-qty-btn {
    width: 34px; height: 32px; border-radius: 8px; border: 0;
    background: none; color: var(--rq-muted); cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    position: relative; -webkit-tap-highlight-color: transparent;
}
/* 34×32 visual, 44px de área táctil: el ::after no participa en el layout. */
.rq-qty-btn::after { content: ""; position: absolute; inset: -6px -5px; }
.rq-qty-btn:disabled { opacity: .4; }
.rq-qty-btn:disabled::after { content: none; }
.rq-qty-val { min-width: 24px; text-align: center; font-size: 0.9375rem; font-weight: 800; color: var(--rq-text); }
.rq-product-row__breakdown {
    font-size: 0.71875rem; font-weight: 600; color: var(--rq-subtle);
    margin-right: auto; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rq-qty-btn--del { color: var(--rq-danger); width: 34px; height: 34px; background: none; border: 0; }

/* El campo de precio editable ya NO vive en la fila: aparece al tocar el importe. */
.rq-price-field--compact { max-width: 130px; }

/* ── Miniatura de la línea ────────────────────────────────────────────────────
   La foto es la confirmación de "sí agregué el que quería": el nombre solo no
   distingue Tormenta de Tornado, y la hoja «Agregar rápido» sí las muestra.
   Grid en vez de flex-column porque envolver el contenido en un wrapper obligaba
   a re-indentar toda la fila; con `> *` en la columna 2 el markup existente no se
   toca. Modificador propio para no arrastrar a pantallas que no pintan foto. */
.rq-product-row--thumb {
    display: grid;
    grid-template-columns: var(--rq-thumb-size, 56px) minmax(0, 1fr);
    column-gap: 12px;
    row-gap: 9px;
    align-items: start;
}
.rq-product-row--thumb > * { grid-column: 2; }
.rq-product-row__thumb {
    grid-column: 1;
    /* span 2 y no `1 / -1`: con filas implícitas -1 no resuelve. Siempre hay
       ≥2 hijos (__header y __pricing), así que el span nunca se sale. */
    grid-row: 1 / span 2;
    align-self: start;
    width: var(--rq-thumb-size, 56px);
    height: var(--rq-thumb-size, 56px);
    border-radius: 10px;
    overflow: hidden;
    background: var(--rq-surface-2);
    /* Hairline interior: sin él un producto blanco se derrite en el fondo claro. */
    box-shadow: inset 0 0 0 1px var(--rq-card-border);
    display: flex; align-items: center; justify-content: center;
}
.rq-product-row__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rq-product-row__thumb .mud-icon-root { font-size: 1.5rem !important; color: var(--rq-subtle); opacity: .55; }

/* Reconocer un inflable en 48px no se puede: la foto crece con la pantalla. */
@media (min-width: 600px) { .rq-product-row--thumb { --rq-thumb-size: 64px; } }
@media (max-width: 359px) { .rq-product-row--thumb { --rq-thumb-size: 48px; } }

/* En celular el desglose baja a su propio renglón COMPLETO en vez de competir
   con el stepper: la columna de la foto le quitó ~68px y con puntos suspensivos
   el "= $3,000.00" —el dato que importa— era lo primero en desaparecer. */
@media (max-width: 419px) {
    .rq-product-row--thumb .rq-product-row__pricing { flex-wrap: wrap; }
    .rq-product-row--thumb .rq-product-row__controls { margin-right: auto; }
    .rq-product-row--thumb .rq-product-row__breakdown {
        flex-basis: 100%; order: 3; margin-right: 0;
        white-space: normal; overflow: visible; text-overflow: clip;
    }
}

.rq-avail-chip {
    display: inline-flex; align-items: center; gap: 5px; align-self: flex-start;
    font-size: 0.6875rem; font-weight: 700; border-radius: 999px; padding: 3px 8px;
    border: 0; white-space: nowrap;
}
.rq-avail-chip--ok      { color: var(--rq-done);         background: color-mix(in srgb, var(--rq-done) 15%, transparent); }
.rq-avail-chip--warn    { color: var(--rq-override-bar); background: color-mix(in srgb, var(--rq-override-bar) 16%, transparent); }
.rq-avail-chip--err     { color: var(--rq-danger);       background: color-mix(in srgb, var(--rq-danger) 14%, transparent); }
.rq-avail-chip--loading { color: var(--rq-subtle);       background: var(--rq-surface-2); }
.rq-avail-chip--ext     { color: var(--rq-primary);      background: var(--rq-primary-soft); }
.rq-avail-chip--unknown { color: var(--rq-muted);        background: var(--rq-surface-2); }

/* ── Pago ────────────────────────────────────────────────────────────────── */
.rq-pay-total {
    display: flex; align-items: center; gap: 10px;
    background: var(--rq-ink); border-radius: 12px; padding: 13px 14px; color: #fff;
    border: 1px solid var(--rq-ink-border);
}
.rq-pay-total__text { display: flex; flex-direction: column; gap: 2px; margin-right: auto; min-width: 0; }
.rq-pay-total__lab {
    font-size: 0.65625rem; font-weight: 800; letter-spacing: 0.05em;
    text-transform: uppercase; color: rgba(255, 255, 255, 0.6);
}
.rq-pay-total__val { font-size: 1.5rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; color: #fff; }
.rq-pay-total__val .rq-cur { font-size: 0.75rem; font-weight: 700; color: rgba(255, 255, 255, 0.6); }
.rq-pay-total__edit {
    height: 34px; padding: 0 13px; border-radius: 9px; flex: none;
    border: 1px solid rgba(255, 255, 255, 0.28); background: none;
    font-size: 0.8125rem; font-weight: 700; color: #fff;
    font-family: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent;
}

/* Anticipo: campo + 3 chips de % en la misma fila (46px = target táctil). */
.rq-advance { display: flex; gap: 8px; align-items: flex-start; }
.rq-advance__field { flex: 1; min-width: 0; }
.rq-advance__pcts { display: flex; gap: 5px; flex: none; }
.rq-advance__pct {
    width: 46px; height: 46px; border-radius: 10px;
    border: 1px solid var(--rq-card-border); background: var(--rq-surface-2);
    color: var(--rq-muted); font-size: 0.8125rem; font-weight: 700;
    font-family: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.rq-advance__pct--on { background: var(--rq-primary); border-color: var(--rq-primary); color: #fff; font-weight: 800; }

/* Método: segmentado de 3, sustituye el MudSelect. */
.rq-method { display: flex; gap: 6px; }
.rq-method__opt {
    flex: 1; height: 42px; border-radius: 10px;
    border: 1px solid var(--rq-card-border); background: var(--rq-surface-2);
    color: var(--rq-muted); font-size: 0.84375rem; font-weight: 600;
    font-family: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.rq-method__opt--on {
    background: var(--rq-primary-soft); color: var(--rq-primary); font-weight: 800;
    border-color: color-mix(in srgb, var(--rq-primary) 40%, transparent);
}
.rq-method__opt:disabled { cursor: default; }
.rq-method:has(.rq-method__opt:disabled) { opacity: .55; }

.rq-resta-total {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    background: var(--rq-surface-2); border-radius: 10px; padding: 10px 12px;
    border: 0;
}
.rq-resta-total__label { font-size: 0.78125rem; font-weight: 700; color: var(--rq-muted); }
.rq-resta-total__val { font-size: 0.9375rem; font-weight: 800; letter-spacing: -0.01em; color: var(--rq-text); }

/* ── Barra inferior ──────────────────────────────────────────────────────── */
.renta-form .rq-save-bar { display: flex; align-items: center; gap: 10px; width: 100%; }
.renta-form .rq-save-bar__status { display: flex; flex-direction: column; gap: 3px; margin-right: auto; min-width: 0; }
.renta-form .rq-save-bar__lab {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.04em;
    text-transform: uppercase; color: var(--rq-danger);
}
.renta-form .rq-save-bar__lab--ok {
    color: var(--rq-done); text-transform: none; font-size: 0.78125rem; letter-spacing: 0;
}
.renta-form .rq-save-bar__ico { font-size: 1rem !important; }
.renta-form .rq-pendientes__chip {
    height: 26px; padding: 0 10px; border-radius: 999px;
    background: color-mix(in srgb, var(--rq-danger) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--rq-danger) 34%, transparent);
    color: var(--rq-danger); font-size: 0.78125rem; font-weight: 700;
    font-family: inherit; cursor: pointer;
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
}
/* Rediseño 2026-08-21: el pie del alta pierde el estado —quién cuenta lo que falta es
   el resumen, y sólo él— y el total pasa a la izquierda, con su etiqueta. Sólo el alta:
   EditarRenta no usa .rq-save-bar__total y conserva su bloque de «Faltan». */
.renta-form .rq-save-bar__total {
    display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
    background: none; border: 0; cursor: pointer; color: inherit;
    margin-right: auto; min-width: 0;
    padding: 4px 8px 4px 0; border-radius: 10px; font-family: inherit; text-align: left;
    -webkit-tap-highlight-color: transparent;
}
.renta-form .rq-save-bar__total-lab { font-size: var(--ic-text-xs, 0.75rem); font-weight: 700; color: var(--rq-subtle); }
.renta-form .rq-save-bar__total-val { font-size: var(--ic-text-xl, 1.25rem); font-weight: 800; letter-spacing: -0.02em; color: var(--rq-text); line-height: 1.1; }
.renta-form .rq-save-bar__total-sub { font-size: 0.6875rem; font-weight: 600; color: var(--rq-subtle); }
.renta-form .rq-save-btn {
    min-height: 50px; padding: 0 20px; border-radius: 12px !important;
    font-size: 0.96875rem !important; font-weight: 800 !important; text-transform: none !important;
}
.renta-form .rq-save-btn:disabled {
    background: var(--rq-border-strong) !important; color: #fff !important; box-shadow: none !important;
}
@media (max-width: 380px) {
    .renta-form .rq-save-bar__total-sub { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   CATÁLOGO POR CATEGORÍAS — mockup «09 Acordeón con fotos» (390×900)
   Hoja a pantalla completa que sustituye a los chips de "Agregar rápido": quien no
   quiere teclear abre categorías y ve foto, precio y cuántos quedan libres.
   (Los .rq-quick-prod* de arriba siguen vivos: los usan las direcciones recientes.)
   Compartida por /nueva-renta, EditarRenta y el diálogo de la ficha, así que
   TODO el color sale de los tokens --rq-* (nunca --rq-ink como color de texto:
   en oscuro vale --ic-surface-2 y desaparecería).
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Disparador: sustituye a la tira de chips ── */
.renta-form .rq-catbtn {
    display: flex; align-items: center; gap: 11px; width: 100%;
    min-height: 56px; padding: 8px 12px;
    border: 1px dashed var(--rq-border-strong); border-radius: 12px;
    background: var(--rq-surface-2); color: var(--rq-text);
    font-family: inherit; text-align: left; cursor: pointer;
    -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.renta-form .rq-catbtn:active { background: var(--rq-primary-soft); border-color: var(--rq-primary); }
.renta-form .rq-catbtn:disabled { opacity: .55; cursor: default; }
.renta-form .rq-catbtn__ico {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; border-radius: 10px; flex: none;
    background: var(--rq-primary-soft); color: var(--rq-primary) !important;
}
.renta-form .rq-catbtn__text { display: flex; flex-direction: column; gap: 1px; margin-right: auto; min-width: 0; }
.renta-form .rq-catbtn__txt { font-size: 0.9375rem; font-weight: 800; letter-spacing: -0.01em; }
.renta-form .rq-catbtn__sub { font-size: 0.75rem; font-weight: 600; color: var(--rq-subtle); }
.renta-form .rq-catbtn__chev { color: var(--rq-subtle) !important; flex: none; }

/* ── Hoja ──
   z-index 6150: por encima del topbar (1240), del bottombar (1280) y de un
   MudDialog (6100) —uno de los tres consumidores ES un diálogo—, y por debajo
   del snackbar (6200), que tiene que poder avisar encima de todo. */
.rq-catsheet {
    position: fixed; inset: 0; z-index: 6150;
    display: flex; align-items: stretch; justify-content: center;
}

/* Mientras la hoja está abierta, cualquier diálogo tiene que quedar POR ENCIMA de ella.
   Sin esto, el aviso de «va dentro de Tormenta» sale detrás de la hoja y parece que el ＋
   no hizo nada. 6180: encima de la hoja (6150) y debajo del snackbar (6200). */
body:has(.rq-catsheet) .mud-dialog-container,
body:has(.rq-catsheet) .mud-overlay { z-index: 6180; }
.rq-catsheet__scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.55); }
.rq-catsheet__panel {
    position: relative; display: flex; flex-direction: column;
    width: 100%; height: 100dvh; min-height: 0;
    background: var(--rq-surface); color: var(--rq-text);
    outline: none;
}

/* ── Encabezado ── */
.rq-catsheet__head {
    display: flex; align-items: center; gap: 10px; flex: none;
    padding: 14px 12px 12px 14px;
    border-bottom: 1px solid var(--rq-card-border);
}
.rq-catsheet__head-text { display: flex; flex-direction: column; gap: 2px; margin-right: auto; min-width: 0; }
.rq-catsheet__title { font-size: 1.1875rem; font-weight: 800; letter-spacing: -0.02em; }
.rq-catsheet__sub { font-size: 0.8125rem; font-weight: 600; color: var(--rq-subtle); }
.rq-catsheet__close {
    display: inline-flex; align-items: center; justify-content: center;
    width: var(--dr-touch-min, 48px); height: var(--dr-touch-min, 48px); flex: none;
    border: 0; border-radius: 12px; background: var(--rq-surface-2); color: var(--rq-text);
    cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.rq-catsheet__close:active { background: var(--rq-border-strong); }

/* ── Franja de estado ──
   Verde/ámbar/rojo, pero el estado se dice con PALABRAS: el color sólo refuerza. */
.rq-catsheet__band {
    display: flex; align-items: center; gap: 11px; flex: none;
    padding: 10px 14px; border-bottom: 1px solid var(--rq-card-border);
}
.rq-catsheet__band-ico {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: 9px; flex: none;
    background: var(--rq-surface); 
}
.rq-catsheet__band-text { display: flex; flex-direction: column; gap: 1px; margin-right: auto; min-width: 0; }
.rq-catsheet__band-l1 { font-size: 0.84375rem; font-weight: 800; letter-spacing: -0.01em; }
.rq-catsheet__band-l2 { font-size: 0.75rem; font-weight: 600; opacity: .85; }
.rq-catsheet__band-cta {
    min-height: 36px; padding: 0 14px; flex: none;
    border-radius: 9px; border: 1px solid currentColor; background: none;
    color: inherit; font-family: inherit; font-size: 0.8125rem; font-weight: 800;
    cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.rq-catsheet__band--ok {
    background: color-mix(in srgb, var(--rq-done) 15%, transparent);
    color: var(--rq-done);
    border-bottom-color: color-mix(in srgb, var(--rq-done) 30%, transparent);
}
.rq-catsheet__band--falta {
    background: color-mix(in srgb, var(--rq-override-bar) 16%, transparent);
    color: var(--rq-override-bar);
    border-bottom-color: color-mix(in srgb, var(--rq-override-bar) 32%, transparent);
}
.rq-catsheet__band--neutro {
    background: var(--rq-surface-2);
    color: var(--rq-muted);
}
.rq-catsheet__band--error {
    background: color-mix(in srgb, var(--rq-danger) 14%, transparent);
    color: var(--rq-danger);
    border-bottom-color: color-mix(in srgb, var(--rq-danger) 30%, transparent);
}

/* Interruptor del filtro: 52×30 con blanco de 44 px por el padding del contenedor. */
.rq-catsheet__toggle {
    display: inline-flex; align-items: center; flex: none;
    width: 52px; height: 30px; padding: 3px;
    border: 0; border-radius: 999px; background: var(--rq-border-strong);
    cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.rq-catsheet__toggle-dot { width: 24px; height: 24px; border-radius: 50%; background: var(--ic-on-primary); }
.rq-catsheet__toggle--on { background: var(--rq-done); }
.rq-catsheet__toggle--on .rq-catsheet__toggle-dot { margin-left: auto; }

/* ── Buscador ── */
.rq-catsheet__search {
    display: flex; align-items: center; gap: 9px; flex: none;
    /* El margen de abajo separa el buscador del encabezado pegado. Va AQUÍ y no dentro del
       cuerpo porque ese hueco tiene que quedar fuera de la zona de scroll: por dentro se
       consumiría al scrollear y dejaría desfilar tarjetas por encima del encabezado. */
    margin: 12px 14px; padding: 0 12px; height: 52px;
    border: 1px solid var(--rq-card-border); border-radius: 12px; background: var(--rq-surface-2);
}
.rq-catsheet__search-ico { color: var(--rq-subtle) !important; flex: none; }
.rq-catsheet__search-input {
    flex: 1; min-width: 0; height: 100%;
    border: 0; background: none; outline: none;
    color: var(--rq-text); font-family: inherit; font-size: 0.96875rem; font-weight: 500;
}
.rq-catsheet__search-input::placeholder { color: var(--rq-subtle); }
.rq-catsheet__search-input::-webkit-search-cancel-button { display: none; }
.rq-catsheet__search-clear {
    display: inline-flex; align-items: center; justify-content: center;
    width: var(--dr-touch-min, 48px); height: var(--dr-touch-min, 48px); flex: none;
    border: 0; border-radius: 8px; background: none; color: var(--rq-subtle); cursor: pointer;
}

/* ── Cuerpo con scroll ── */
.rq-catsheet__body {
    flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 0 14px 16px; display: flex; flex-direction: column; gap: 10px;
}
/* Sin respiro propio arriba: el hueco con el buscador lo pone su margin-bottom, fuera del
   scroll. Cualquier padding-top o margen de primer hijo aquí dentro sería zona de scroll,
   y por ahí se vería desfilar una franja de tarjetas por encima del encabezado pegado. */
/* Sin esto, los hijos del flex se ENCOGEN para caber en el alto del cuerpo y el segundo
   renglón de tarjetas queda aplastado. El cuerpo tiene scroll: lo que sobra se baja.
   Este cuerpo es además el contenedor de scroll al que se pegan los encabezados de
   categoría, así que ningún ancestro suyo puede tener overflow distinto de visible. */
.rq-catsheet__body > * { flex: none; }
.rq-catsheet__empty {
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    padding: 40px 20px; text-align: center; color: var(--rq-subtle);
}
.rq-catsheet__empty-ico { font-size: 2rem !important; opacity: .6; }
.rq-catsheet__empty-txt { margin: 0; font-size: 0.90625rem; font-weight: 600; }
.rq-catsheet__skel { display: flex; flex-direction: column; gap: 10px; }
.rq-catsheet__skel-row {
    height: 62px; border-radius: 14px;
    background: var(--rq-surface-2); border: 1px solid var(--rq-card-border);
    animation: rq-catskel 1.4s ease-in-out infinite;
}
@keyframes rq-catskel { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }

/* ── Acordeón de categorías ── */
/* Alto aproximado de una fila de tarjetas (foto 96 + cuerpo + separación). Es la carrera que
   se le deja al encabezado pegado para que se despegue ANTES de tapar la última fila. Si se
   queda corto sólo se tapa un pedazo; no rompe nada. */
/* El catálogo global reusa el acordeón, así que necesita la misma medida: sin ella la
   declaración de margen es inválida y el encabezado pegajoso NO se suelta antes de la
   última tarjeta (que es justo para lo que existe). */
.rq-catsheet,
.cg-shell { --rq-catacc-margen-fila: 216px; }

/* Sin overflow: el recorte convertiría a la tarjeta en el contenedor de scroll más cercano
   y su encabezado se "pegaría" a sí misma, o sea a nada. El redondeo se resuelve en el
   encabezado (única pieza que pinta hasta el borde). `overflow: clip` no sirve de atajo:
   pide Safari 16 y el objetivo declarado de la app es iOS 15. */
.rq-catacc {
    border: 1px solid var(--rq-card-border); border-radius: 14px;
    background: var(--rq-surface);
}
/* Sin marco propio: el encabezado pegado tapa la línea de arriba y las de los costados
   quedaban colgando junto a los productos que pasan por debajo. El marco lo lleva la banda
   del encabezado, que es lo que de verdad marca la categoría abierta; el resplandor cierra
   el conjunto. `transparent` y no `border: 0`: el borde sigue ocupando su pixel y nada se
   recorre. */
.rq-catacc--open {
    border-color: transparent;
    /* Sombra neutra, no halo de marca: separa la categoría abierta sin meter más color.
       --ic-shadow ya viene resuelta por tema (negra en oscuro, tinta en claro). */
    box-shadow: var(--ic-shadow, 0 4px 24px rgba(0, 0, 0, 0.4));
}
/* Pegado al tope del cuerpo mientras su categoría esté en pantalla: así el dueño sabe qué
   está mirando y tiene el botón de minimizar siempre a mano. El siguiente encabezado lo
   empuja al llegar, porque cada uno sólo se mueve dentro de su propia tarjeta.
   z-index bajo (5, como .mes-sticky-wrap): aquí sólo compite con las tarjetas que pasan
   por debajo — la hoja entera ya está en 6150. */
.rq-catacc__row {
    display: flex; align-items: center; gap: 11px; width: 100%;
    min-height: 62px; padding: 0 13px;
    border: 0; background: none; color: inherit; font-family: inherit;
    text-align: left; cursor: pointer;
    -webkit-tap-highlight-color: transparent; touch-action: manipulation;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 5;
}
/* Sin tinte: el lavado de marca a todo lo ancho pesaba junto a las categorías cerradas, que
   son lisas. El color se reserva para el cuadrito del ícono — la misma lógica del control
   segmentado del panel (.lc-segtab--active), donde el activo sube de superficie y la marca
   vive en una pieza chica.
   El fondo SIGUE siendo opaco por obligación, no por estética: la fila va pegada y las
   tarjetas le pasan por debajo (un --rq-primary-soft, que mezcla contra transparent, las
   dejaría verse a través del texto).
   Marco: sólo la línea de abajo, que es la que marca dónde acaba el encabezado y empiezan
   los productos. Los márgenes laterales de -1px lo llevan a todo lo ancho de la tarjeta.
   El cerrado se queda transparente: ocupa toda su tarjeta y taparía las esquinas de abajo. */
.rq-catacc--open .rq-catacc__row {
    background: var(--rq-surface);
    /* El margen de abajo NO abre hueco: se anula con el margen negativo del panel (márgenes
       adyacentes que se colapsan). Está ahí porque `sticky` confina la CAJA DE MARGEN, así
       que un margen inferior del alto de una tarjeta despega el encabezado una fila antes:
       sin él, la última fila de productos terminaba entera detrás del encabezado y ya no
       había forma de sacarla. Medido: se suelta 216px antes y la última tarjeta queda
       completa por debajo. Si el panel mide menos que eso, el encabezado simplemente no se
       pega — que es lo correcto: con una fila no hay nada que fijar. */
    margin: -1px -1px var(--rq-catacc-margen-fila);
    width: calc(100% + 2px);
    border-bottom: 1px solid var(--rq-card-border);
    border-radius: 14px 14px 0 0;
}
.rq-catacc__tile {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; border-radius: 10px; flex: none;
    background: var(--rq-surface-2); color: var(--rq-primary) !important;
}
/* Único portador del color de marca en la fila abierta. El !important es obligado: la regla
   base fija el color del glifo con !important y sin esto quedaría azul sobre azul. */
.rq-catacc--open .rq-catacc__tile {
    background: var(--rq-primary);
    color: var(--ic-on-primary) !important;
}
.rq-catacc__text { display: flex; flex-direction: column; gap: 1px; margin-right: auto; min-width: 0; }
.rq-catacc__name { font-size: 1.0625rem; font-weight: 800; letter-spacing: -0.01em; }
.rq-catacc__sub { font-size: 0.78125rem; font-weight: 700; color: var(--rq-subtle); }
.rq-catacc__sub--ok    { color: var(--rq-done); }
.rq-catacc__sub--warn  { color: var(--rq-override-bar); }
.rq-catacc__sub--none  { color: var(--rq-danger); }
.rq-catacc__sub--muted { color: var(--rq-subtle); }
.rq-catacc__pill {
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    min-width: 24px; height: 24px; padding: 0 7px; border-radius: 999px;
    background: var(--rq-primary); color: var(--ic-on-primary); font-size: 0.78125rem; font-weight: 800;
}
.rq-catacc__chev { color: var(--rq-subtle) !important; flex: none; }
.rq-catacc--open .rq-catacc__chev { color: var(--rq-primary) !important; }
/* Cancela el margen inferior del encabezado (ver ahí el porqué): los dos márgenes son
   adyacentes y se colapsan a 0, así que el panel sigue pegado al encabezado. */
.rq-catacc--open .rq-catacc__panel { margin-top: calc(-1 * var(--rq-catacc-margen-fila)); }
.rq-catacc__panel { padding-bottom: 4px; }
.rq-catacc__vacio {
    margin: 0; padding: 16px 13px; text-align: center;
    font-size: 0.84375rem; font-weight: 600; color: var(--rq-subtle);
}
.rq-catacc__ocupados {
    display: flex; align-items: center; gap: 8px; width: 100%;
    min-height: 44px; padding: 0 13px 10px;
    border: 0; background: none; color: var(--rq-primary);
    font-family: inherit; font-size: 0.84375rem; font-weight: 700;
    cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.rq-catacc__ocupados-ico { font-size: 1rem !important; }

/* ── Cuadrícula de productos ── */
.rq-catgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; padding: 12px; }

.rq-prodcard {
    display: flex; flex-direction: column; min-width: 0;
    background: var(--rq-surface-2);
    border: 1px solid var(--rq-card-border); border-radius: 13px; overflow: hidden;
}
.rq-prodcard--on { border: 1.5px solid var(--rq-primary); }
.rq-prodcard--ocupado { opacity: .62; }
/* Bloqueada NO es agotada: la pieza existe y está libre, sólo que ya va dentro de otro
   producto de esta misma renta. Por eso se marca, no se atenúa: sigue siendo elegible
   (tocar el ＋ ofrece cambiar una por otra). */
.rq-prodcard--bloqueado {
    border-color: color-mix(in srgb, var(--rq-primary) 45%, var(--rq-card-border));
    background: color-mix(in srgb, var(--rq-primary) 5%, var(--rq-surface-2));
}

.rq-prodcard__media {
    position: relative; height: 96px; flex: none;
    background: var(--rq-surface);
    display: flex; align-items: center; justify-content: center;
}
.rq-prodcard__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rq-prodcard__ph { display: inline-flex; color: var(--rq-subtle); opacity: .55; }
.rq-prodcard__ph .mud-icon-root { font-size: 1.75rem !important; }

.rq-prodcard__free {
    position: absolute; top: 7px; left: 7px;
    display: inline-flex; align-items: center; gap: 3px;
    min-height: 23px; padding: 0 8px; border-radius: 999px;
    font-size: 0.71875rem; font-weight: 800; white-space: nowrap;
    /* Red de seguridad: ninguna píldora puede desbordar la foto. Ojo, dentro de un flex el
       recorte con puntos suspensivos NO funciona, así que los textos se mantienen cortos. */
    max-width: calc(100% - 14px); overflow: hidden;
}
.rq-prodcard__free-ico { font-size: 0.8125rem !important; }
.rq-prodcard__free--ok      { color: var(--rq-done);         background: color-mix(in srgb, var(--rq-done) 22%, var(--rq-surface)); }
.rq-prodcard__free--warn    { color: var(--rq-override-bar); background: color-mix(in srgb, var(--rq-override-bar) 22%, var(--rq-surface)); }
.rq-prodcard__free--err     { color: var(--rq-danger);       background: color-mix(in srgb, var(--rq-danger) 20%, var(--rq-surface)); }
.rq-prodcard__free--ext     { color: var(--rq-primary);      background: color-mix(in srgb, var(--rq-primary) 20%, var(--rq-surface)); }
.rq-prodcard__free--unknown,
.rq-prodcard__free--loading { color: var(--rq-subtle);       background: var(--rq-surface-2); }
/* En uso por esta misma renta. Ni verde (no se puede agregar) ni rojo (no está ocupada
   esa fecha): el color del propio panel, que es el que dice «esto lo hiciste tú». */
.rq-prodcard__free--enuso   { color: var(--rq-primary);      background: color-mix(in srgb, var(--rq-primary) 20%, var(--rq-surface)); }

.rq-prodcard__qty {
    position: absolute; top: 6px; right: 6px;
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 30px; height: 30px; padding: 0 8px; border-radius: 999px;
    background: var(--rq-primary); color: var(--ic-on-primary); font-size: 0.8125rem; font-weight: 800;
}

.rq-prodcard__body { padding: 9px 10px 11px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.rq-prodcard__name {
    font-size: 0.9375rem; font-weight: 700; letter-spacing: -0.01em; line-height: 1.25;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* Envuelve a propósito: en 390 px la tarjeta mide ~136 px por dentro y el control
   −N＋ (102 px) no cabe junto al precio. Con wrap el precio se queda arriba y el
   control baja a renglón completo, en vez de desbordar la tarjeta. */
.rq-prodcard__row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rq-prodcard__price { font-size: 0.9375rem; font-weight: 800; margin-right: auto; white-space: nowrap; }
/* 12.5px: el mismo tamaño de metadato que .rq-catacc__sub en esta hoja. A 11px quedaba por
   debajo del piso legible que el proyecto declara en app.css. */
.rq-prodcard__tope { font-size: 0.78125rem; font-weight: 700; color: var(--rq-override-bar); line-height: 1.3; }
/* Aquí sí cabe el nombre completo del compuesto: envuelve en dos renglones sin romper nada. */
.rq-prodcard__tope--enuso { color: var(--rq-primary); }

/* Equipo auxiliar que no alcanza ese día (el motor de un inflable). Va en RENGLÓN PROPIO y no
   como sufijo del tope: son dos cosas distintas —cuántos caben y qué le falta al que quepa— y
   pueden aparecer juntas. No apaga el botón de agregar: quien agenda decide.
   Sin prefijo de bloque porque se usa en los dos sitios donde se agenda: la tarjeta de la hoja
   de catálogo y la fila de una línea ya agregada. */
.rq-aviso-equipo {
    display: block; margin-top: 2px;
    font-size: 0.78125rem; font-weight: 700; line-height: 1.3;
    color: var(--rq-override-bar);
}

/* De quién es la pieza, al lado del chip de disponibilidad y nunca dentro: «está libre» y «es
   prestado» son dos hechos, y el chip sólo puede decir uno. Mismo renglón suelto que el aviso de
   equipo, distinto color para que no se lean como lo mismo. */
.rq-aviso-prestado { color: var(--lc-warn); }

.rq-prodcard__add {
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: 44px; height: 44px; border-radius: 12px;
    border: 0; background: var(--rq-primary-soft); color: var(--rq-primary);
    cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.rq-prodcard__add:active { background: var(--rq-primary); color: var(--ic-on-primary); }
.rq-prodcard__add:disabled { opacity: .4; cursor: default; }
.rq-prodcard__add .mud-icon-root { font-size: 1.375rem !important; }

.rq-prodcard__step {
    display: flex; align-items: center; justify-content: space-between;
    flex: 1 0 100%;
    border: 1px solid var(--rq-card-border); border-radius: 12px; background: var(--rq-surface);
}
.rq-prodcard__stepbtn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border: 0; border-radius: 11px;
    background: none; color: var(--rq-primary); cursor: pointer;
    -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.rq-prodcard__stepbtn:active { background: var(--rq-primary-soft); }
.rq-prodcard__stepbtn:disabled { color: var(--rq-subtle); opacity: .45; cursor: default; }
.rq-prodcard__stepval { min-width: 22px; text-align: center; font-size: 0.9375rem; font-weight: 800; }

/* ── Pie ── */
.rq-catsheet__foot {
    display: flex; align-items: center; gap: 11px; flex: none;
    padding: 11px 14px calc(11px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--rq-card-border); background: var(--rq-surface);
}
.rq-catsheet__foot-text { display: flex; flex-direction: column; gap: 2px; margin-right: auto; min-width: 0; }
.rq-catsheet__foot-count {
    font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.05em;
    text-transform: uppercase; color: var(--rq-subtle);
}
.rq-catsheet__foot-total { font-size: 1.0625rem; font-weight: 800; letter-spacing: -0.02em; }
.rq-catsheet__cta {
    min-height: 52px; padding: 0 26px; flex: none;
    border: 0; border-radius: 12px; background: var(--rq-primary); color: var(--ic-on-primary);
    font-family: inherit; font-size: 1rem; font-weight: 800;
    cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}

/* Escritorio: la misma hoja, centrada y con una columna más. */
@media (min-width: 720px) {
    .rq-catsheet { align-items: center; padding: 24px; }
    .rq-catsheet__panel {
        width: min(720px, 100%); height: auto; max-height: 88dvh;
        border-radius: 20px; border: 1px solid var(--rq-card-border);
        box-shadow: 0 26px 60px rgba(15, 23, 42, 0.35);
    }
    .rq-catgrid { grid-template-columns: repeat(3, 1fr); }
}