@keyframes flexxus-spin {
    to { transform: rotate(360deg); }
}

.flexxus-pdf-btn .flexxus-spinner,
.flexxus-refresh-article .flexxus-spinner,
[data-flexxus-refresh-movements] .flexxus-spinner {
    animation: flexxus-spin .8s linear infinite;
    font-size: 14px;
    width: 14px;
    height: 14px;
    line-height: 1;
    vertical-align: middle;
}

.flexxus-pagination {
    margin-top: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
}

.flexxus-pagination--frontend {
    margin-top: 12px;
    gap: 8px;
}

.flexxus-card-wrap {
    max-width: none;
}

.flexxus-hero {
    display: flex;
    align-items: center;
    gap: 20px;
    margin: 16px 0 24px;
    padding: 20px 24px;
    background: #fff;
    border: 1px solid #c3c4c7;
    border-radius: 4px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .04);
}

.flexxus-hero__avatar {
    flex-shrink: 0;
    border-radius: 50%;
    overflow: hidden;
    width: 64px;
    height: 64px;
}

.flexxus-hero__body {
    flex: 1;
    min-width: 0;
}

.flexxus-hero__title {
    margin: 0 0 4px;
    font-size: 22px;
    line-height: 1.3;
}

.flexxus-hero__meta {
    margin: 0;
    color: #646970;
    font-size: 13px;
}

.flexxus-hero__meta a {
    color: #646970;
    text-decoration: none;
}

.flexxus-hero__meta a:hover {
    text-decoration: underline;
}

.flexxus-hero__badges {
    flex-shrink: 0;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.flexxus-hero__actions {
    margin-top: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.flexxus-hero__actions .button {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    line-height: 1;
}

.flexxus-hero__actions .button .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
    line-height: 1;
    margin: 0;
}

.flexxus-hero__sync-meta {
    color: #646970;
    font-size: 12px;
}

.flexxus-hero__log:empty {
    display: none;
}

/* -----------------------------------------------------------------------
   Frontend "Sincronizar" widget — usado en My Account
   (Cuenta corriente / Movimientos / Comprobantes).
   -------------------------------------------------------------------- */

.flexxus-refresh-widget {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
    margin: 0 0 16px;
    padding: 10px 14px;
    background: #f6f7f7;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
}

.flexxus-refresh-widget .flexxus-refresh-log {
    flex-basis: 100%;
}

.flexxus-refresh-widget .flexxus-refresh-log:empty {
    display: none;
}

.flexxus-refresh-widget .flexxus-refresh-btn .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
    line-height: 1;
    margin: 0 4px 0 0;
    vertical-align: middle;
}

.flexxus-refresh-meta {
    color: #646970;
    font-size: 13px;
}

.flexxus-refresh-meta--warning {
    color: #996800;
    font-weight: 600;
}

.flexxus-refresh-meta--blocked {
    color: #8c8f94;
    font-style: italic;
}

.flexxus-refresh-meta__quota {
    color: #996800;
}

.flexxus-log {
    margin: 10px 0 0;
    padding: 8px 12px;
    list-style: none;
    background: #f6f7f7;
    border-left: 3px solid #c3c4c7;
    border-radius: 3px;
    max-height: 180px;
    overflow-y: auto;
    font-size: 12px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.flexxus-log__entry {
    display: flex;
    gap: 8px;
    align-items: baseline;
    padding: 2px 0;
    margin: 0;
}

.flexxus-log__icon {
    flex-shrink: 0;
    width: 12px;
    text-align: center;
    color: #646970;
}

.flexxus-log__entry--success .flexxus-log__icon { color: #00a32a; }
.flexxus-log__entry--error   .flexxus-log__icon,
.flexxus-log__entry--error   .flexxus-log__msg  { color: #d63638; }

.flexxus-log__time {
    flex-shrink: 0;
    color: #8c8f94;
    width: 56px;
}

.flexxus-log__msg {
    color: #1d2327;
    word-break: break-word;
}

.flexxus-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    background: #f6f7f7;
    color: #646970;
    white-space: nowrap;
}

.flexxus-badge--info    { background: #e5f5fa; color: #006a96; }
.flexxus-badge--success { background: #edfaef; color: #00a32a; }
.flexxus-badge--warning { background: #fef8ee; color: #996800; }

.flexxus-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

@media (max-width: 782px) {
    .flexxus-cards {
        grid-template-columns: 1fr;
    }
}

.flexxus-postbox {
    margin: 0 0 16px;
}

.flexxus-postbox__header {
    padding: 0 16px;
}

.flexxus-postbox__title {
    font-size: 13px;
}

.flexxus-postbox__title .dashicons {
    color: #2271b1;
    margin-right: 6px;
    vertical-align: middle;
}

.flexxus-postbox__body {
    padding: 12px 16px;
}

.flexxus-postbox__body--flush {
    padding: 0;
}

.flexxus-card-row {
    display: flex;
    align-items: center;
    padding: 10px 16px;
    border-bottom: 1px solid #f0f0f1;
}

.flexxus-card-row__icon {
    color: #c3c4c7;
    font-size: 16px;
    width: 16px;
    height: 16px;
    margin-right: 10px;
    flex-shrink: 0;
}

.flexxus-card-row__label {
    color: #646970;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .04em;
    width: 130px;
    flex-shrink: 0;
}

.flexxus-card-row__value {
    font-size: 13px;
    color: #1d2327;
}

.flexxus-card-row__value--muted {
    color: #c3c4c7;
}

.flexxus-card-row__value--highlight {
    color: #00a32a;
    font-weight: 600;
}

.flexxus-summary {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
    margin-bottom: 16px;
    padding: 12px 16px;
    background: #f6f7f7;
    border-radius: 4px;
    font-size: 13px;
}

.flexxus-summary__label {
    color: #646970;
    display: block;
    margin-bottom: 2px;
}

.flexxus-error {
    color: #d63638;
    margin: 0;
}

.flexxus-empty {
    color: #646970;
    margin: 0;
}

.flexxus-section-table {
    font-size: 13px;
}

.flexxus-section-table th,
.flexxus-section-table td {
    padding: 12px 14px !important;
    vertical-align: middle;
    white-space: nowrap;
}

/* Tipo es siempre 2-4 chars (FA, FB, PAV, NCA…); que no robe ancho a las
   columnas de plata, que pueden llegar a "$ 1.246.134,29". */
.flexxus-section-table th:nth-child(2),
.flexxus-section-table td:nth-child(2) {
    width: 1%;
}

.flexxus-summary--accumulated {
    background: #eef6ff;
    border-left: 3px solid #2271b1;
}

.flexxus-date-filter {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 8px 12px;
    margin-bottom: 12px;
    background: #f6f7f7;
    border: 1px solid #e0e0e1;
    border-radius: 3px;
    font-size: 13px;
}

.flexxus-date-filter label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #1d2327;
}

.flexxus-date-filter input[type="date"] {
    padding: 4px 8px;
    font-size: 13px;
}

.flexxus-date-filter__shortcuts {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #646970;
    margin-left: auto;
}

.flexxus-date-filter__shortcuts .button-link {
    font-size: 12px;
}

.flexxus-section-scroll {
    max-height: 480px;
    overflow-y: auto;
    overflow-x: auto;
    border: 1px solid #e0e0e1;
    border-radius: 3px;
}

.flexxus-section-scroll thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: #f6f7f7;
    box-shadow: inset 0 -1px 0 #c3c4c7;
}

.flexxus-section__count {
    display: inline-block;
    margin-left: 8px;
    padding: 1px 8px;
    background: #e5f5fa;
    color: #006a96;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    vertical-align: middle;
}

/* PAV (pago) rows — visually distinct from facturas. */
.flexxus-section-table tr.flexxus-row-payment {
    background: #f5fbf5;
}

.flexxus-section-table tr.flexxus-row-payment:nth-child(even) {
    background: #ecf6ec;
}

/* Anulada — strikethrough + muted; survives running balance untouched. */
.flexxus-section-table tr.flexxus-row-anulada td {
    text-decoration: line-through;
    color: #888;
}

.flexxus-section-table tr.flexxus-row-anulada td:first-child,
.flexxus-section-table tr.flexxus-row-anulada td:nth-child(2) {
    text-decoration: none;
}

.flexxus-badge--anulada {
    display: inline-block;
    background: #f0c8c8;
    color: #842029;
    font-size: 10px;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 3px;
    margin-left: 6px;
    letter-spacing: 0.5px;
}

.flexxus-dash {
    color: #ccc;
}

.flexxus-clients-table th,
.flexxus-clients-table td {
    white-space: nowrap;
}

.flexxus-clients-table td:nth-child(3),
.flexxus-clients-table td:nth-child(4),
.flexxus-clients-table td:nth-child(6) {
    white-space: normal;
}

.flexxus-breadcrumb {
    margin: 12px 0 0;
    color: #646970;
    font-size: 13px;
}

.flexxus-breadcrumb a {
    color: #646970;
    text-decoration: none;
}

/* Woodmart My Account icons. The theme reads --wd-my-acc-nav-icon from the
 * <li class="wd-my-acc-{endpoint}"> and renders it via woodmart-font on
 * .wd-nav-icon::before. Setting the variable is all that's needed — font-family,
 * size, and color all come from the theme, so these look identical to the
 * built-in Orders/Downloads/Logout icons. */
.wd-my-acc-my-invoices     { --wd-my-acc-nav-icon: "\f104"; } /* paperclip */
.wd-my-acc-current-account { --wd-my-acc-nav-icon: "\f142"; } /* account-payment */
.wd-my-acc-my-debts        { --wd-my-acc-nav-icon: "\f100"; } /* warning-sign */

/* Detalle de Deuda — embebido en la card "Cuenta corriente" del admin
   y debajo de la tabla de saldos en el frontend. */
.flexxus-postbox__section--unpaid {
    padding: 0 16px 16px;
    border-top: 1px solid #e0e0e1;
    margin-top: 8px;
}

.flexxus-unpaid {
    margin-top: 12px;
    font-size: 12px;
}

.flexxus-unpaid__heading {
    margin: 6px 0 10px;
    font-size: 13px;
    font-weight: 600;
}

.flexxus-unpaid-table {
    font-size: 12px;
}

.flexxus-unpaid-table th,
.flexxus-unpaid-table td {
    padding: 8px 10px !important;
}

.flexxus-unpaid-table .flexxus-section__count {
    font-size: 10px;
    padding: 1px 6px;
}

.flexxus-unpaid-table tfoot tr.flexxus-unpaid-totals td {
    border-top: 2px solid #1d2327;
    background: #f6f7f7;
    padding: 8px 10px !important;
}

.flexxus-amount--negative {
    color: #b32d2e;
}

.flexxus-pdf-btn--pago {
    margin-left: 6px;
    padding: 0 6px !important;
    font-size: 10px !important;
    line-height: 18px !important;
    height: 18px !important;
    min-height: 18px !important;
    vertical-align: middle;
}