/**
 * Ingresos (verde) / gastos (rojo) y paneles de cuotas.
 * CSS plano para cargar vía asset().
 */

.movement-amount {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.movement-amount--income {
  color: #15803d !important;
}

.movement-amount--expense {
  color: #b91c1c !important;
}

.badge-movement {
  display: inline-block;
  font-weight: 600;
  font-size: 0.75rem;
  padding: 0.35em 0.7em;
  border-radius: 0.375rem;
  line-height: 1.2;
}

.badge-movement--income {
  background: linear-gradient(135deg, #bbf7d0 0%, #86efac 100%);
  color: #14532d !important;
  border: 1px solid rgba(34, 197, 94, 0.55);
}

.badge-movement--expense {
  background: linear-gradient(135deg, #fecaca 0%, #fca5a5 100%);
  color: #450a0a !important;
  border: 1px solid rgba(239, 68, 68, 0.55);
}

/* Balance: resumen del mes (totales) */
body#balance_page .balance-summary-card--income {
  background: linear-gradient(180deg, rgba(220, 252, 231, 0.65) 0%, #fff 100%);
  border: 1px solid rgba(34, 197, 94, 0.25) !important;
}

body#balance_page .balance-summary-card--expense {
  background: linear-gradient(180deg, rgba(254, 226, 226, 0.65) 0%, #fff 100%);
  border: 1px solid rgba(239, 68, 68, 0.25) !important;
}

body#balance_page .balance-summary-card--net {
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
}

body#balance_page .balance-summary-card--net-positive {
  background: linear-gradient(180deg, rgba(220, 252, 231, 0.5) 0%, #fff 100%);
}

body#balance_page .balance-summary-card--net-positive .balance-summary-net {
  color: #15803d !important;
}

body#balance_page .balance-summary-card--net-negative {
  background: linear-gradient(180deg, rgba(254, 226, 226, 0.5) 0%, #fff 100%);
}

body#balance_page .balance-summary-card--net-negative .balance-summary-net {
  color: #b91c1c !important;
}

body#balance_page .balance-summary-card--net-zero .balance-summary-net {
  color: #525252 !important;
}

.fees-panel {
  border-radius: 0.5rem;
  overflow: hidden;
  border-width: 1px;
  border-style: solid;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.fees-panel--pending {
  border-color: rgba(220, 38, 38, 0.4);
}

.fees-panel--settled {
  border-color: rgba(22, 163, 74, 0.4);
}

.fees-panel__header {
  border: none !important;
  padding: 0.85rem 1.1rem;
}

.fees-panel--pending .fees-panel__header {
  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%) !important;
  color: #fff !important;
}

.fees-panel--settled .fees-panel__header {
  background: linear-gradient(135deg, #16a34a 0%, #15803d 100%) !important;
  color: #fff !important;
}

.fees-panel__total {
  margin-bottom: 0;
  font-weight: 600;
}

.fees-panel__total--pending {
  background: rgba(254, 226, 226, 0.95) !important;
  color: #7f1d1d !important;
  border-top: 1px solid rgba(248, 113, 113, 0.55) !important;
}

.fees-panel__total--settled {
  background: rgba(220, 252, 231, 0.95) !important;
  color: #14532d !important;
  border-top: 1px solid rgba(74, 222, 128, 0.55) !important;
}

/* Administración: botones de acción (WhatsApp, eliminar, anular) */
body#administration_fees_page .admin-fee-action-btn--whatsapp,
body#clu_expirations_page .admin-fee-action-btn--whatsapp {
  background-color: #25d366 !important;
  border: 1px solid #20bd5a !important;
  color: #fff !important;
}

body#administration_fees_page .admin-fee-action-btn--whatsapp:hover,
body#administration_fees_page .admin-fee-action-btn--whatsapp:focus,
body#clu_expirations_page .admin-fee-action-btn--whatsapp:hover,
body#clu_expirations_page .admin-fee-action-btn--whatsapp:focus {
  background-color: #1ebe57 !important;
  border-color: #1aa34a !important;
  color: #fff !important;
}

body#administration_fees_page .admin-fee-action-btn--delete {
  background-color: #dc2626 !important;
  border: 1px solid #b91c1c !important;
  color: #fff !important;
}

body#administration_fees_page .admin-fee-action-btn--delete:hover,
body#administration_fees_page .admin-fee-action-btn--delete:focus {
  background-color: #b91c1c !important;
  border-color: #991b1b !important;
  color: #fff !important;
}

body#administration_fees_page .admin-fee-action-btn--void {
  background-color: #f59e0b !important;
  border: 1px solid #d97706 !important;
  color: #422006 !important;
}

body#administration_fees_page .admin-fee-action-btn--void:hover,
body#administration_fees_page .admin-fee-action-btn--void:focus {
  background-color: #ea580c !important;
  border-color: #c2410c !important;
  color: #fff !important;
}

/* CLU expirations list: rojo (vencido) y warning (≤30 días) */
body#clu_expirations_page .table tbody tr.clu-row--expired td,
body#clu_expirations_page .table tbody tr.clu-row--expired th {
  background-color: rgba(220, 38, 38, 0.16) !important;
}

body#clu_expirations_page .table tbody tr.clu-row--expired td:first-child,
body#clu_expirations_page .table tbody tr.clu-row--expired th:first-child {
  border-left: 4px solid #dc2626 !important;
}

body#clu_expirations_page .table tbody tr.clu-row--soon td,
body#clu_expirations_page .table tbody tr.clu-row--soon th {
  background-color: rgba(234, 179, 8, 0.28) !important;
}

body#clu_expirations_page .table tbody tr.clu-row--soon td:first-child,
body#clu_expirations_page .table tbody tr.clu-row--soon th:first-child {
  border-left: 4px solid #ca8a04 !important;
}

body#clu_expirations_page .clu-expirations-member-link:hover,
body#clu_expirations_page .clu-expirations-member-link:focus-visible {
  text-decoration: underline !important;
  color: var(--bs-primary, #0d6efd) !important;
}

/* CLU listado: viewport < lg — carril “etiqueta | valor” + scroll-snap (un socio por pantalla) */
@media (max-width: 991.98px) {
  body#clu_expirations_page .clu-expirations-summary {
    flex-direction: column;
    align-items: stretch !important;
  }

  body#clu_expirations_page .clu-expirations-summary .badge {
    width: 100%;
    text-align: center;
    font-size: 0.9rem !important;
  }

  body#clu_expirations_page .clu-expirations-mobile-hint {
    line-height: 1.35;
  }

  body#clu_expirations_page .clu-expirations-mobile-feed {
    height: calc(100dvh - 14.5rem);
    max-height: calc(100dvh - 14.5rem);
    overflow-y: auto;
    overflow-x: hidden;
    scroll-snap-type: y mandatory;
    -webkit-overflow-scrolling: touch;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 0.85rem;
    background: linear-gradient(180deg, rgba(248, 249, 250, 0.95) 0%, #fff 12%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
  }

  /* Sin min-height tipo “pantalla completa”: si no, queda un hueco enorme debajo de Acciones hasta el próximo socio */
  body#clu_expirations_page .clu-expirations-mobile-slide {
    scroll-snap-align: start;
    padding: 0.65rem 0.7rem 0.75rem;
    margin-bottom: 0.75rem;
    border-radius: 0.65rem;
    border: 1px solid rgba(0, 0, 0, 0.1);
    background-color: #fff;
  }

  body#clu_expirations_page .clu-expirations-mobile-slide:last-child {
    margin-bottom: 0;
  }

  body#clu_expirations_page .clu-expirations-mobile-slide.clu-row--expired {
    background: linear-gradient(135deg, rgba(254, 242, 242, 0.92) 0%, #fff 45%);
    border-left: 5px solid #dc2626;
  }

  body#clu_expirations_page .clu-expirations-mobile-slide.clu-row--soon {
    background: linear-gradient(135deg, rgba(254, 252, 232, 0.92) 0%, #fff 45%);
    border-left: 5px solid #ca8a04;
  }

  body#clu_expirations_page .clu-expirations-mobile-slide__inner {
    max-width: 36rem;
    margin: 0 auto;
  }

  body#clu_expirations_page .clu-expirations-mobile-slide__row {
    display: grid;
    grid-template-columns: minmax(10.25rem, 44%) 1fr;
    gap: 0.4rem 0.75rem;
    align-items: start;
    padding: 0.6rem 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.07);
  }

  body#clu_expirations_page .clu-expirations-mobile-slide__row:last-child {
    border-bottom: 0;
    padding-bottom: 0.25rem;
  }

  body#clu_expirations_page .clu-expirations-mobile-slide__label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.045em;
    font-weight: 700;
    color: var(--bs-secondary-color, #6c757d);
    line-height: 1.4;
    padding-top: 0.2rem;
  }

  body#clu_expirations_page .clu-expirations-mobile-slide__value {
    font-size: 1.02rem;
    line-height: 1.45;
    text-align: right;
    word-break: break-word;
    overflow-wrap: anywhere;
    min-width: 0;
  }

  body#clu_expirations_page .clu-expirations-mobile-slide__value--actions {
    text-align: left;
  }

  body#clu_expirations_page .clu-expirations-mobile-slide__value--actions .d-flex {
    justify-content: flex-end;
  }

  body#clu_expirations_page .clu-expirations-mobile-slide .admin-fee-action-btn {
    min-height: 2.75rem;
    min-width: 2.75rem;
  }

  /* Recuadro general de la lista (no parece tabla suelta) */
  body#clu_expirations_page .clu-expirations-table-wrap {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0.75rem 0.65rem 1rem;
    border-radius: 0.875rem;
    border: 1px solid rgba(0, 0, 0, 0.08);
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0.02) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
  }

  body#clu_expirations_page .table.clu-expirations-table.table-mobile-cards {
    margin-bottom: 0;
    border-collapse: separate;
    border-spacing: 0;
    --clu-card-radius: 0.9rem;
    --clu-card-pad-x: 1rem;
    --clu-card-pad-y: 0.85rem;
  }

  body#clu_expirations_page .table.clu-expirations-table.table-mobile-cards thead {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }

  body#clu_expirations_page .table.clu-expirations-table.table-mobile-cards tbody {
    display: block;
  }

  body#clu_expirations_page .table.clu-expirations-table.table-mobile-cards tbody tr {
    display: block;
    margin-bottom: 1.35rem;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: var(--clu-card-radius);
    background-color: var(--bs-body-bg, #fff);
    overflow: hidden;
    box-shadow:
      0 4px 14px rgba(0, 0, 0, 0.08),
      0 1px 3px rgba(0, 0, 0, 0.06);
  }

  body#clu_expirations_page .table.clu-expirations-table.table-mobile-cards tbody tr:last-child {
    margin-bottom: 0;
  }

  body#clu_expirations_page .table.clu-expirations-table.table-mobile-cards tbody tr.clu-row--expired {
    border-color: rgba(220, 38, 38, 0.35);
    border-left: 5px solid #dc2626;
    background: linear-gradient(135deg, rgba(254, 242, 242, 0.95) 0%, rgba(255, 255, 255, 0.98) 55%);
  }

  body#clu_expirations_page .table.clu-expirations-table.table-mobile-cards tbody tr.clu-row--soon {
    border-color: rgba(202, 138, 4, 0.35);
    border-left: 5px solid #ca8a04;
    background: linear-gradient(135deg, rgba(254, 252, 232, 0.95) 0%, rgba(255, 255, 255, 0.98) 55%);
  }

  body#clu_expirations_page .table.clu-expirations-table.table-mobile-cards tbody tr:not(.clu-row--expired):not(.clu-row--soon) {
    background: linear-gradient(180deg, #fff 0%, rgba(248, 249, 250, 0.65) 100%);
  }

  body#clu_expirations_page .table.clu-expirations-table.table-mobile-cards tbody tr.clu-row--expired td,
  body#clu_expirations_page .table.clu-expirations-table.table-mobile-cards tbody tr.clu-row--soon td {
    background-color: transparent !important;
  }

  body#clu_expirations_page .table.clu-expirations-table.table-mobile-cards tbody tr.clu-row--expired td:first-child,
  body#clu_expirations_page .table.clu-expirations-table.table-mobile-cards tbody tr.clu-row--soon td:first-child {
    border-left: 0 !important;
  }

  /* Cabecera de tarjeta: nombre del socio (sin etiqueta "Socio" duplicada) */
  body#clu_expirations_page .table.clu-expirations-table.table-mobile-cards tbody tr td:first-child {
    display: block !important;
    padding: 1.05rem var(--clu-card-pad-x) 0.9rem !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
    text-align: left !important;
    font-size: 1.08rem;
    line-height: 1.35;
  }

  body#clu_expirations_page .table.clu-expirations-table.table-mobile-cards tbody tr td:first-child::before {
    display: none !important;
    content: none !important;
  }

  body#clu_expirations_page .table.clu-expirations-table.table-mobile-cards tbody tr td:first-child strong {
    font-weight: 700;
    font-size: 1.06rem;
  }

  body#clu_expirations_page .table.clu-expirations-table.table-mobile-cards tbody td:first-child .clu-expirations-member-link {
    display: block;
    color: inherit;
    border-radius: 0.4rem;
    margin: -0.2rem -0.35rem;
    padding: 0.2rem 0.35rem;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.08);
  }

  body#clu_expirations_page .table.clu-expirations-table.table-mobile-cards tbody td:first-child .clu-expirations-member-link:active {
    background-color: rgba(0, 0, 0, 0.06);
  }

  body#clu_expirations_page .table.clu-expirations-table.table-mobile-cards thead th.clu-expirations-col--desktop-only,
  body#clu_expirations_page .table.clu-expirations-table.table-mobile-cards tbody td.clu-expirations-col--desktop-only {
    display: none !important;
  }

  body#clu_expirations_page .table.clu-expirations-table.table-mobile-cards tbody td:not(:first-child):not(.clu-expirations-col--desktop-only) {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.45rem 0.65rem;
    width: 100% !important;
    max-width: 100%;
    min-width: 0;
    overflow-wrap: break-word;
    word-break: break-word;
    box-sizing: border-box;
    border: 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.07);
    padding: var(--clu-card-pad-y) var(--clu-card-pad-x);
    text-align: right !important;
    font-size: 1rem;
    line-height: 1.45;
  }

  body#clu_expirations_page .table.clu-expirations-table.table-mobile-cards tbody td:last-child {
    border-bottom: 0;
    padding-top: 1rem;
    padding-bottom: 1.1rem;
  }

  body#clu_expirations_page .table.clu-expirations-table.table-mobile-cards tbody td:not(:first-child):not(.clu-expirations-col--desktop-only)::before {
    content: attr(data-label);
    font-weight: 700;
    text-align: left;
    flex: 1 1 38%;
    min-width: 6rem;
    padding-right: 0.5rem;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--bs-secondary-color, #6c757d);
  }

  body#clu_expirations_page .table.clu-expirations-table.table-mobile-cards tbody td:not([data-label])::before {
    content: none !important;
    display: none !important;
  }

  body#clu_expirations_page .table.clu-expirations-table.table-mobile-cards tbody td:has(.btn, form) {
    flex-direction: column;
    align-items: stretch !important;
    text-align: left !important;
  }

  body#clu_expirations_page .table.clu-expirations-table.table-mobile-cards tbody td:has(.btn, form)::before {
    flex: none;
    width: 100%;
    min-width: 0;
    padding-right: 0;
    margin-bottom: 0.5rem;
    font-size: 0.82rem;
  }

  /* Última columna: el <th> mezcla "WhatsApp" + "Acciones" en textContent del JS; fijamos etiqueta en móvil */
  body#clu_expirations_page .table.clu-expirations-table.table-mobile-cards tbody td:last-child::before {
    content: "WhatsApp" !important;
  }

  body#clu_expirations_page .table.clu-expirations-table.table-mobile-cards tbody td .btn {
    width: 100%;
    max-width: 100%;
    min-height: 2.75rem;
    padding-top: 0.55rem;
    padding-bottom: 0.55rem;
  }

  body#clu_expirations_page .table.clu-expirations-table.table-mobile-cards tbody td form {
    display: block !important;
    width: 100%;
  }

  body#clu_expirations_page .table.clu-expirations-table.table-mobile-cards tbody td form .btn {
    width: 100%;
    min-height: 2.75rem;
  }

  body#clu_expirations_page .table.clu-expirations-table.table-mobile-cards .admin-fee-action-btn {
    min-height: 2.85rem;
    min-width: 2.85rem;
  }
}