/* TodoPinga · Los estados de TodoPinga (reservas, pagos y devoluciones) y su insignia: a qué familia de color de
   la marca va cada uno (branding.css: .badge.pending, .on, .info, .neutral, .muted y .off). Así un mismo estado se
   ve igual en todas partes: en el panel, en «Mi cuenta», en el calendario y en su leyenda. La cargan la web
   (layouts/site.php) y el panel (layouts/panel.php), después de su hoja: aquí no hay ni medidas ni colores
   nuevos, solo las variables de la marca. El marcado: <span class="badge rent-status is-pendiente">Pendiente</span>. */

/* Pendiente (sin pagar) y lo que espera una decisión: en blanco con el contorno naranja. */
.badge.rent-status.is-pendiente,
.badge.pay-status.is-pending, .badge.pay-status.is-review,
.badge.refund-status.is-pending, .badge.refund-status.is-review {
  color: var(--badge-pending-text-color); background-color: var(--form-surface-color); box-shadow: inset 0 0 0 1px var(--brand-color-low-contrast);
}

/* Confirmada (pagada), «En curso» (para el cliente), pago hecho o devolución hecha: verde. */
.badge.rent-status.is-confirmada, .badge.rent-status.is-encurso,
.badge.pay-status.is-paid, .badge.pay-status.is-partial,
.badge.refund-status.is-done {
  color: var(--badge-on-text-color); background-color: var(--badge-on-surface-color); box-shadow: inset 0 0 0 1px var(--badge-on-border-color);
}

/* Finalizada: pizarra. */
.badge.rent-status.is-finalizada {
  color: var(--badge-neutral-text-color); background-color: var(--badge-neutral-surface-color); box-shadow: inset 0 0 0 1px var(--badge-neutral-border-color);
}

/* Cancelada, pago cancelado o devuelto, devolución que no se hace: gris apagado. */
.badge.rent-status.is-cancelada,
.badge.pay-status.is-cancelled, .badge.pay-status.is-refunded,
.badge.refund-status.is-declined {
  color: var(--badge-muted-text-color); background-color: var(--badge-muted-surface-color); box-shadow: inset 0 0 0 1px var(--badge-muted-border-color);
}

/* Rechazada: rojo. */
.badge.rent-status.is-rechazada {
  color: var(--badge-off-text-color); background-color: var(--badge-off-surface-color); box-shadow: inset 0 0 0 1px var(--badge-off-border-color);
}

/* Devolviendo el pago: azul. */
.badge.pay-status.is-refunding {
  color: var(--badge-info-text-color); background-color: var(--badge-info-surface-color); box-shadow: inset 0 0 0 1px var(--badge-info-border-color);
}

/* El texto de un estado nunca se parte en dos líneas. */
.badge.rent-status, .badge.pay-status, .badge.refund-status { white-space: nowrap; }