/* Cards de listado de rentas (Rentas, diálogo de asignación, etc.) */
.rentas-cards-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.rentas-cards-list--scroll {
    max-height: 400px;
    overflow-y: auto;
    padding-right: 2px;
}

.renta-card {
    background: var(--ic-surface, #1A282E);
    border: 1px solid var(--ic-border, rgba(148, 163, 184, 0.1));
    border-radius: 14px;
    padding: 14px 14px 12px;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}

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

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

.renta-card--no-click {
    cursor: default;
}

.renta-card--no-click:hover,
.renta-card--no-click:active {
    border-color: var(--ic-border, rgba(148, 163, 184, 0.1));
    background: var(--ic-surface, #1A282E);
}

.renta-card__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 6px;
}

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

.renta-card__nombre {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--ic-text, #E2E8F0);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.renta-card__id {
    font-size: 0.75rem;
    color: var(--ic-muted, #94A3B8);
}

.renta-card__productos {
    font-size: 0.8125rem;
    color: var(--ic-muted, #94A3B8);
    margin-bottom: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.renta-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
}

.renta-card__meta-item {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.75rem;
    color: var(--ic-muted, #94A3B8);
}

.renta-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.renta-card__footer-left {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.renta-card__monto {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--ic-text, #E2E8F0);
}

.renta-card__actions {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.renta-card__empleado {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.75rem;
    color: var(--ic-muted, #94A3B8);
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--ic-border, rgba(148, 163, 184, 0.08));
}

.renta-card__chip {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 20px;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Los tonos salen de los tokens --lc-* (lista-cards.css), no de hex fijos.
   Esta hoja no tenía NI UN data-theme: los doce chips llevaban la paleta de tema oscuro clavada,
   así que en claro el ámbar sobre su propio tinte daba 1.54:1 — prácticamente invisible. Con los
   tokens voltean solos y heredan la calibración AA de lista-cards.css, que está medida al 18 % de
   relleno; aquí el relleno es 12-15 %, o sea con más margen todavía.
   Los tokens se declaran en lista-cards.css, que ambos index.html cargan siempre. */
.renta-chip--agendada {
    background: rgba(var(--lc-warn-rgb), 0.15);
    color: var(--lc-warn);
    border: 1px solid rgba(var(--lc-warn-rgb), 0.25);
}

.renta-chip--asignadaparaentrega {
    background: rgba(var(--lc-teal-rgb), 0.15);
    color: var(--lc-teal);
    border: 1px solid rgba(var(--lc-teal-rgb), 0.25);
}

.renta-chip--asignadapararecoleccion {
    background: rgba(var(--lc-accent-rgb), 0.15);
    color: var(--lc-accent);
    border: 1px solid rgba(var(--lc-accent-rgb), 0.25);
}

.renta-chip--entregada {
    background: rgba(var(--lc-ok-rgb), 0.15);
    color: var(--lc-ok);
    border: 1px solid rgba(var(--lc-ok-rgb), 0.25);
}

.renta-chip--recogida {
    background: rgba(var(--lc-purple-rgb), 0.15);
    color: var(--lc-purple);
    border: 1px solid rgba(var(--lc-purple-rgb), 0.25);
}

/* Parciales: misma paleta que el estado completo pero con borde punteado
   para distinguir de un vistazo "algo entregado/recogido, falta el resto". */
.renta-chip--entregadaparcial {
    background: rgba(var(--lc-ok-rgb), 0.15);
    color: var(--lc-ok);
    border: 1px dashed rgba(var(--lc-ok-rgb), 0.55);
}

.renta-chip--recogidaparcial {
    background: rgba(var(--lc-purple-rgb), 0.15);
    color: var(--lc-purple);
    border: 1px dashed rgba(var(--lc-purple-rgb), 0.55);
}

.renta-chip--cancelada {
    background: rgba(var(--lc-err-rgb), 0.15);
    color: var(--lc-err);
    border: 1px solid rgba(var(--lc-err-rgb), 0.25);
}

.renta-chip--encurso {
    background: rgba(var(--lc-warn-rgb), 0.15);
    color: var(--lc-warn);
    border: 1px solid rgba(var(--lc-warn-rgb), 0.25);
}

.renta-chip--pago-pagado {
    background: rgba(var(--lc-ok-rgb), 0.12);
    color: var(--lc-ok);
    border: 1px solid rgba(var(--lc-ok-rgb), 0.2);
}

.renta-chip--pago-pago-parcial {
    background: rgba(var(--lc-warn-rgb), 0.12);
    color: var(--lc-warn);
    border: 1px solid rgba(var(--lc-warn-rgb), 0.2);
}

.renta-chip--pago-sin-apartado {
    background: rgba(var(--lc-info-rgb), 0.12);
    color: var(--lc-info);
    border: 1px solid rgba(var(--lc-info-rgb), 0.2);
}

.renta-chip--pago-pendiente {
    background: rgba(var(--lc-err-rgb), 0.12);
    color: var(--lc-err);
    border: 1px solid rgba(var(--lc-err-rgb), 0.2);
}