/* Hallmark · pre-emit critique: P5 H5 E5 S5 R5 V4 */
/* Hallmark · genre: modern-minimal · macrostructure: Workbench destructive checkpoint · design-system: design.md · designed-as-app */
/* Hallmark · knobs: consequence-led + typed gate · contrast: pass (40–41) · nav: existing application rail · footer: none · slop: pass (42–45) */
/* Hallmark · honest: pass (46) · chrome: pass (47) · tokens: pass (48) · responsive: pass (49) · icons: pass (30) · mobile: pass (34, 49, 50–57) */
/* Page-specific dashboard CSS extracted from templates. */

[data-distributor-section][hidden] {
    display: none;
}

[data-admin-payout-panel][hidden] {
    display: none !important;
}

.partner-plan-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 30rem), 1fr));
    gap: var(--space-m);
}

.partner-plan-card {
    min-width: 0;
    padding: var(--space-m);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    background: var(--color-surface);
}

.partner-plan-card__heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-s);
}

.partner-plan-card__family {
    display: block;
    margin-bottom: var(--space-xs);
    color: var(--color-text-muted);
    font-family: var(--font-label);
    font-size: var(--txt-xs);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.partner-plan-card__title {
    margin: 0;
    color: var(--color-text-main);
    font-family: var(--font-display);
    font-size: var(--h4);
    font-style: normal;
    overflow-wrap: anywhere;
}

.partner-plan-card__copy {
    margin: var(--space-s) 0 var(--space-m);
    color: var(--color-text-muted);
    font-size: var(--txt-s);
}

.partner-plan-card .form-control {
    min-width: 0;
    width: 100%;
}

/* Hallmark · component: share link · genre: modern-minimal · theme: Kavto
 * states: default · hover · focus · active · disabled · loading · error · success
 * contrast: pass
 */
.partner-share-link {
    display: grid;
    gap: var(--space-xs);
}

.partner-share-link__label {
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
    color: var(--color-text-main);
    font-size: var(--txt-s);
    font-weight: 650;
    line-height: 1;
}

.partner-share-link__label .material-symbols-outlined {
    color: var(--color-primary);
    font-size: var(--txt-l);
}

.partner-share-link__control {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-xs);
}

.partner-share-link__input {
    min-width: 0;
    min-height: var(--control-height);
    overflow: hidden;
    color: var(--color-text-main);
    font-family: var(--font-label);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.partner-share-link__copy {
    display: inline-flex;
    min-height: var(--control-height);
    align-items: center;
    justify-content: center;
    gap: var(--space-2xs);
    padding-inline: var(--space-m);
    border: var(--border-width) solid var(--color-primary);
    border-radius: var(--radius-control);
    outline: 2px solid transparent;
    background: var(--color-primary);
    color: var(--color-text-on-primary);
    cursor: pointer;
    font: inherit;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}

.partner-share-link__copy:hover,
.partner-share-link__copy.is-hover {
    background: var(--color-primary-hover);
    color: var(--color-surface);
}

.partner-share-link__copy:focus-visible,
.partner-share-link__copy.is-focus {
    outline-color: var(--color-focus);
    outline-offset: 2px;
}

.partner-share-link__copy:active,
.partner-share-link__copy.is-active {
    background: var(--color-primary-hover);
    color: var(--color-surface);
}

.partner-share-link__copy:disabled,
.partner-share-link__copy.is-disabled {
    cursor: not-allowed;
    opacity: var(--opacity-disabled);
}

.partner-share-link__copy[data-state="loading"],
.partner-share-link__copy.is-loading {
    background: var(--color-primary-light);
    color: var(--color-text-main);
}

.partner-share-link__copy[data-state="error"],
.partner-share-link__copy.is-error {
    border-color: var(--color-error);
    background: var(--color-error-light);
    color: var(--color-error);
}

.partner-share-link__copy[data-state="success"],
.partner-share-link__copy.is-success {
    border-color: var(--color-success);
    background: var(--color-success-light);
    color: var(--color-success);
}

.partner-share-link__copy-icon {
    font-size: var(--txt-l);
}

.partner-share-link__status {
    min-height: 1lh;
    color: var(--color-text-muted);
    font-size: var(--txt-xs);
}

.partner-plan-grid__empty {
    grid-column: 1 / -1;
    display: grid;
    gap: var(--space-xs);
}

@media (max-width: 47.99rem) {
    .partner-plan-card__heading {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
    }

    .partner-share-link__control {
        grid-template-columns: minmax(0, 1fr);
    }

    .partner-share-link__copy {
        width: 100%;
    }
}

/* customers/list.html */
.customer-directory__action-icon {
    display: none;
    width: 2rem;
    height: 2rem;
    flex: 0 0 2rem;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.dashboard-app .customer-directory__action--disabled {
    position: relative;
    color: var(--color-text-muted);
    background: var(--color-surface-soft);
    cursor: not-allowed;
    opacity: 0.55;
}

.dashboard-app .customer-directory__action--disabled::after {
    content: attr(data-tooltip);
    position: absolute;
    right: 0;
    bottom: calc(100% + var(--space-2xs));
    z-index: var(--z-dropdown);
    width: max-content;
    max-width: 22rem;
    padding: var(--space-2xs) var(--space-xs);
    border-radius: var(--radius-sm);
    color: var(--color-surface);
    background: var(--color-text-main);
    font-size: var(--txt-xs);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-normal);
    white-space: normal;
    pointer-events: none;
    opacity: 0;
    transform: translateY(var(--space-2xs));
    transition: opacity var(--transition-fast), transform var(--transition-fast);
}

.dashboard-app .customer-directory__action--disabled:hover::after,
.dashboard-app .customer-directory__action--disabled:focus-visible::after {
    opacity: 1;
    transform: translateY(0);
}

.dashboard-app .customer-directory__action--disabled:hover,
.dashboard-app .customer-directory__action--disabled:focus-visible,
.dashboard-app .customer-directory__action--disabled:active {
    color: var(--color-text-muted);
    background: var(--color-surface-soft);
    transform: none;
}

@media (max-width: 47.99rem) {
    .customer-directory__table-wrap {
        overflow-x: clip;
    }

    .customer-directory__table {
        table-layout: fixed;
    }

    .customer-directory__secondary {
        display: none;
    }

    .customer-directory__name {
        width: auto;
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .customer-directory__actions {
        width: 13.2rem;
        padding-inline: 0;
    }

    .customer-directory__action-list {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 0;
        white-space: nowrap;
    }

    .customer-directory__actions .table-action-link {
        min-width: var(--touch-target-min);
        padding-inline: 0;
    }

    .customer-directory__action-icon {
        display: block;
    }

    .customer-directory__action-label {
        display: none;
    }
}

/* automations/form.html */
.automation-form {
    display: grid;
    grid-template-columns: minmax(26rem, 32rem) minmax(0, 1fr);
    gap: var(--space-m);
    align-items: start;
  }

  .automation-form__aside,
  .automation-form__panel {
    display: grid;
    gap: var(--space-s);
    padding: var(--space-m);
    border: 1px solid var(--color-border, #e2e8f0);
    border-radius: 2.2rem;
    background: #fff;
    box-shadow: var(--shadow-card, 0 12px 24px rgba(15, 23, 42, 0.06));
  }

  .automation-form__heading {
    margin: 0;
    font-size: var(--h3);
    color: var(--color-text-main);
  }

  .automation-form__text {
    margin: 0;
    font-size: var(--txt-s);
    color: var(--color-text-muted, #64748b);
    line-height: var(--line-height-normal, 1.6);
  }

  .automation-trigger-list {
    display: grid;
    gap: 1rem;
  }

  .automation-trigger-list__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
    min-height: 5.2rem;
    padding: 0 1.6rem;
    border: 1px solid var(--color-border, #dbe4ee);
    border-radius: 1.4rem;
    background: #fff;
    color: var(--color-text-main);
    text-align: left;
    cursor: pointer;
    transition: border-color 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
  }

  .automation-trigger-list__item:hover,
  .automation-trigger-list__item.is-active {
    border-color: var(--color-primary, #0d9488);
    background: #f0fdfa;
    transform: translateY(-1px);
  }

  .automation-trigger-list__item.is-hidden {
    display: none;
  }

  .automation-form__fields {
    display: grid;
    gap: var(--space-m);
  }

  .automation-form__section {
    display: grid;
    gap: var(--space-s);
  }

  .automation-form__section-title {
    margin: 0;
    font-size: var(--h4);
    color: var(--color-text-main);
  }

  .automation-form__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-s);
  }

  .automation-form__group {
    display: grid;
    gap: 0.6rem;
  }

  .automation-form__group--full {
    grid-column: 1 / -1;
  }

  .automation-form__label {
    font-size: var(--txt-xs);
    font-weight: 700;
    color: var(--color-text-muted, #64748b);
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }

  .automation-form__help {
    margin: 0;
    font-size: var(--txt-xs);
    color: var(--color-text-muted, #64748b);
  }

  .automation-form .form-control,
  .automation-form textarea,
  .automation-form select {
    width: 100%;
    min-height: 4.8rem;
    padding: 1rem 1.4rem;
    border: 1px solid var(--color-border, #dbe4ee);
    border-radius: 1.4rem;
    font-size: var(--txt-s);
    background: #fff;
    box-sizing: border-box;
  }

  .automation-form .form-check-input {
    width: 1.8rem;
    height: 1.8rem;
  }

  .automation-form__checkbox {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-height: 4.8rem;
    padding: 0 1.4rem;
    border: 1px solid var(--color-border, #dbe4ee);
    border-radius: 1.4rem;
    background: #fff;
  }

  .automation-form__error,
  .automation-form__errors {
    margin: 0;
    font-size: var(--txt-xs);
    color: #b91c1c;
  }

  .automation-form__errors {
    display: grid;
    gap: 0.6rem;
    padding: 1.2rem 1.4rem;
    border: 1px solid #fecaca;
    border-radius: 1.4rem;
    background: #fef2f2;
  }

  .automation-form__actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-s);
    padding-top: var(--space-s);
    border-top: 1px solid var(--color-border, #e2e8f0);
  }

  .automation-form__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 4.8rem;
    padding: 0 var(--space-m);
    border-radius: 1.4rem;
    border: 1px solid var(--color-border, #cbd5e1);
    background: #fff;
    color: var(--color-text-main);
    font-size: var(--txt-s);
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
  }

  .automation-form__button--primary {
    border-color: var(--color-primary, #0d9488);
    background: var(--color-primary, #0d9488);
    color: var(--color-text-on-primary, #fff);
  }

  .automation-form__conditional.is-hidden {
    display: none;
  }

  .automation-workflow {
    display: grid;
    gap: 1rem;
    margin-top: 1rem;
  }

  .automation-workflow__heading,
  .automation-workflow__step-head,
  .automation-workflow__edges {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
  }

  .automation-workflow__step {
    border: 1px solid var(--border-color, #dfe3ea);
    border-radius: 12px;
    padding: 1rem;
    background: var(--surface-color, #fff);
  }

  .automation-workflow__step-head button {
    border: 0;
    background: transparent;
    color: #b42318;
    cursor: pointer;
  }

  .automation-workflow__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
    margin: .75rem 0;
  }

  .automation-workflow label {
    display: grid;
    gap: .35rem;
    font-size: .85rem;
  }

  .automation-workflow input,
  .automation-workflow select,
  .automation-workflow textarea {
    width: 100%;
    border: 1px solid var(--border-color, #dfe3ea);
    border-radius: 8px;
    padding: .65rem .75rem;
  }

  .automation-run-dialog {
    width: min(680px, calc(100vw - 2rem));
    border: 0;
    border-radius: 16px;
    padding: 1.5rem;
    box-shadow: 0 20px 60px rgba(15, 23, 42, .25);
  }

  .automation-run-dialog::backdrop {
    background: rgba(15, 23, 42, .55);
  }

  .automation-run-dialog__close {
    float: right;
    border: 0;
    background: transparent;
    font-size: 1.5rem;
    cursor: pointer;
  }

  .automation-target-results {
    display: grid;
    gap: .5rem;
    max-height: 260px;
    overflow: auto;
    margin: 1rem 0;
  }

  .automation-target-results button {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    border: 1px solid var(--border-color, #dfe3ea);
    border-radius: 10px;
    background: #fff;
    padding: .75rem;
    text-align: left;
    cursor: pointer;
  }

  .automation-target-results button.is-active {
    border-color: #111827;
    box-shadow: 0 0 0 2px rgba(17, 24, 39, .1);
  }

  .automation-preview {
    max-height: 260px;
    overflow: auto;
    padding: 1rem;
    border-radius: 10px;
    background: #111827;
    color: #e5e7eb;
  }

  @media (max-width: 980px) {
    .automation-form {
      grid-template-columns: 1fr;
    }
  }

  @media (max-width: 760px) {
    .automation-form__grid {
      grid-template-columns: 1fr;
    }
  }

/* automations/index.html */
.automations-page {
    display: grid;
    gap: var(--space-l);
  }

  .automations-page__hero {
    display: flex;
    align-items: end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-m);
  }

  .automations-page__header {
    display: grid;
    gap: var(--space-xs);
    max-width: 72rem;
  }

  .automations-page__title {
    margin: 0;
    font-size: var(--h2);
    color: var(--color-text-main);
  }

  .automations-page__subtitle {
    margin: 0;
    max-width: 64rem;
    font-size: var(--txt-s);
    color: var(--color-text-muted, #64748b);
    line-height: var(--line-height-normal, 1.6);
  }

  .automations-page__actions {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
  }

  .automations-page__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 4.8rem;
    padding: 0 var(--space-m);
    border-radius: 1.4rem;
    background: var(--color-primary, #0d9488);
    color: var(--color-text-on-primary, #fff);
    font-size: var(--txt-s);
    font-weight: 700;
    text-decoration: none;
  }

  .automations-page__hint {
    margin: 0;
    font-size: var(--txt-xs);
    color: var(--color-text-muted, #64748b);
  }

  .automations-list {
    display: grid;
    gap: var(--space-s);
  }

  .automations-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-s);
    flex-wrap: wrap;
  }

  .automations-toolbar__search {
    width: min(42rem, 100%);
  }

  .automations-search {
    width: 100%;
    min-height: 4.8rem;
    padding: 0 1.6rem;
    border: 1px solid var(--color-border, #e2e8f0);
    border-radius: 1.4rem;
    background: #fff;
    font-size: var(--txt-s);
  }

  .automations-table {
    overflow: hidden;
    border: 1px solid var(--color-border, #e2e8f0);
    border-radius: 2rem;
    background: #fff;
  }

  .automations-table__header,
  .automations-table__row {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1.2fr) minmax(0, 1.2fr) 1.1fr 0.8fr 1fr;
    gap: var(--space-s);
    align-items: center;
    padding: 1.6rem var(--space-s);
  }

  .automations-table__header {
    border-bottom: 1px solid var(--color-border, #e2e8f0);
    background: var(--color-surface-soft, #f8fafc);
    font-size: var(--txt-xs);
    font-weight: 700;
    color: var(--color-text-muted, #64748b);
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }

  .automations-table__row + .automations-table__row {
    border-top: 1px solid var(--color-border, #eef2f7);
  }

  .automations-table__name {
    display: grid;
    gap: 0.4rem;
  }

  .automations-table__title {
    margin: 0;
    font-size: var(--txt-s);
    font-weight: 700;
    color: var(--color-text-main);
  }

  .automations-table__meta {
    font-size: var(--txt-xs);
    color: var(--color-text-muted, #64748b);
  }

  .automations-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 3.2rem;
    padding: 0 1.2rem;
    border-radius: 999px;
    background: #ecfeff;
    color: var(--color-primary, #0d9488);
    font-size: var(--txt-xs);
    font-weight: 700;
  }

  .automations-pill--muted {
    background: #f1f5f9;
    color: var(--color-text-muted, #64748b);
  }

  .automations-pill--inactive {
    background: #fef2f2;
    color: #b91c1c;
  }

  .automations-table__actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.8rem;
    flex-wrap: wrap;
  }

  .automations-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 3.8rem;
    padding: 0 1.4rem;
    border: 1px solid var(--color-border, #cbd5e1);
    border-radius: 1.2rem;
    background: #fff;
    color: var(--color-text-main);
    font-size: var(--txt-xs);
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
  }

  .automations-button--primary {
    border-color: var(--color-primary, #0d9488);
    color: var(--color-primary, #0d9488);
  }

  .automations-empty {
    display: grid;
    gap: var(--space-s);
    justify-items: start;
    padding: var(--space-l);
    border: 1px dashed var(--color-border, #cbd5e1);
    border-radius: 2rem;
    background: #fff;
  }

  .automations-empty__title {
    margin: 0;
    font-size: var(--h4);
    color: var(--color-text-main);
  }

  .automations-empty__text {
    margin: 0;
    max-width: 54rem;
    font-size: var(--txt-s);
    color: var(--color-text-muted, #64748b);
    line-height: var(--line-height-normal, 1.6);
  }

  @media (max-width: 1080px) {
    .automations-page__hero {
      align-items: start;
    }
  }

  @media (max-width: 920px) {
    .automations-table__header {
      display: none;
    }

    .automations-table__row {
      grid-template-columns: 1fr;
      justify-items: start;
    }

    .automations-table__actions {
      justify-content: flex-start;
    }

    .automations-page__actions {
      width: 100%;
    }

    .automations-page__button {
      width: 100%;
    }
  }

/* base_dashboard.html */
html {
            font-size: 62.5%;
        }

        html.dashboard-ssr-boot body {
            display: block;
        }
        html.dashboard-ssr-boot .js-content--ssr {
            display: none;
            visibility: hidden;
            opacity: 0;
        }
        html.dashboard-ssr-boot .js-skeleton-wrapper--ssr {
            display: block;
            visibility: visible;
            opacity: 1;
        }

/* base_dashboard.html */
:root {
            --sidebar-width: 260px;
            --sidebar-collapsed-width: 76px;
            --topbar-height: 64px;
        }

/* base_dashboard.html */
* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        /* --------------------------
           MOBILE NAV
           -------------------------- */
        /* Overlay */
        .mobile-nav-overlay {
            display: none;
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.45);
            z-index: 1099;
            opacity: 0;
            transition: opacity 0.3s ease;
        }
        .mobile-nav-overlay.active {
            opacity: 1;
        }

        /* Mobile drawer (hidden by default on all sizes, only used on mobile) */
        .mobile-drawer {
            position: fixed;
            top: 0;
            left: 0;
            height: 100dvh;
            width: 280px;
            background-color: var(--color-sidebar-bg, #F0FDFA);
            border-right: 1px solid var(--color-border, #CFFAFE);
            z-index: 1100;
            display: flex;
            flex-direction: column;
            transform: translateX(-100%);
            transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            overflow-y: auto;
        }
        .mobile-drawer.open {
            transform: translateX(0);
        }

        @media (prefers-reduced-motion: reduce) {
            .mobile-drawer,
            .mobile-nav-overlay {
                transition: none;
            }
        }

        /* Mobile drawer header */
        .mobile-drawer__header {
            height: var(--topbar-height);
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 var(--space-m);
            border-bottom: 1px solid var(--color-border, #E2E8F0);
            flex-shrink: 0;
        }
        .mobile-drawer__close {
            background: none;
            border: none;
            cursor: pointer;
            color: var(--color-text-muted, #64748B);
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 6px;
            border-radius: 6px;
            transition: background 0.2s;
        }
        .mobile-drawer__close:hover {
            background: var(--color-primary-light, #CCFBF1);
            color: var(--color-primary, #0D9488);
        }

        /* Hamburger button (inside topbar, only visible on mobile) */
        .mobile-menu-btn {
            display: none;
            background: none;
            border: none;
            cursor: pointer;
            color: var(--color-header-text, #1E293B);
            padding: 6px;
            border-radius: 6px;
            align-items: center;
            justify-content: center;
            transition: background 0.2s;
            margin-right: 8px;
        }
        .mobile-menu-btn:hover {
            background: var(--color-primary-light, #CCFBF1);
            color: var(--color-primary, #0D9488);
        }



        body {
            font-family: var(--font-body, 'Manrope', sans-serif);
            background-color: var(--color-bg, #FFFFFF);
            color: var(--color-text-main, #1E293B);
            min-height: 100dvh;
            display: flex;
        }

        /* --------------------------
           SIDEBAR 
           -------------------------- */
        .sidebar {
            position: fixed;
            left: 0;
            top: 0;
            height: 100dvh;
            width: var(--sidebar-width);
            background-color: var(--color-sidebar-bg, #F0FDFA);
            border-right: 1px solid var(--color-border, #CFFAFE);
            transition: width var(--transition-base);
            z-index: 1000;
            display: flex;
            flex-direction: column;
            overflow: visible;
        }

        .sidebar.collapsed {
            width: var(--sidebar-collapsed-width);
        }

        /* Collapsed: hide text labels */
        .sidebar.collapsed .sidebar__logo-text,
        .sidebar.collapsed .nav-section__label,
        .sidebar.collapsed .nav-item__text,
        .sidebar.collapsed .user-profile__info {
            display: none;
        }

        /* Collapsed nav items: rounded left, flat right, border accent on right */
        .sidebar.collapsed .nav-item {
            justify-content: center;
            padding: 0.75rem;
            width: calc(100% - 8px);
            margin: 2px 0 2px 8px;
            border-radius: var(--radius-control, 8px) 0 0 var(--radius-control, 8px);
            border-right: 3px solid transparent;
        }

        .sidebar.collapsed .nav-item:hover {
            border-right-color: var(--color-primary, #0D9488);
        }

        .sidebar.collapsed .nav-item .material-symbols-outlined {
            margin: 0;
        }

        .sidebar.collapsed .sidebar__logo-brand {
            justify-content: center;
        }

        .sidebar.collapsed .sidebar__logo-img {
            display: none; /* Hide large logo */
        }

        .sidebar.collapsed .sidebar__logo-icon {
            display: block; /* Show small icon */
        }

        .sidebar.collapsed span.sidebar__logo-initial {
            display: flex; /* Show initials fallback */
        }

        .sidebar.collapsed .sidebar__header {
            padding: 0;
            justify-content: center;
        }

        .sidebar__header {
            height: var(--topbar-height);
            display: flex;
            align-items: center;
            padding: 0 var(--space-m);
            border-bottom: 1px solid var(--color-border, #E2E8F0);
            position: relative;
        }

        .sidebar__logo-brand {
            display: flex;
            align-items: center;
            text-decoration: none;
            color: var(--color-sidebar-text, #1E293B);
            font-weight: 700;
            font-size: var(--txt-m, 1.5rem);
            width: 100%;
            overflow: hidden;
            white-space: nowrap;
        }

        .sidebar__logo-img {
            height: 28px;
            max-width: 100%;
            width: auto;
            margin-right: 0.75rem;
            object-fit: contain;
            display: block;
        }

        .sidebar__logo-icon {
            display: none;
            width: 32px;
            height: 32px;
            min-width: 32px;
            object-fit: contain;
            border-radius: var(--radius-control, 4px);
        }

        span.sidebar__logo-initial {
            display: none;
            width: 32px;
            height: 32px;
            min-width: 32px;
            background-color: var(--color-primary, #0D9488);
            color: var(--color-text-on-primary, #fff);
            border-radius: var(--radius-control, 6px);
            font-weight: 700;
            font-size: var(--txt-m, 1.5rem);
            align-items: center;
            justify-content: center;
            text-transform: uppercase;
        }

        .sidebar__toggle {
            position: absolute;
            right: -14px;
            top: 50%;
            transform: translateY(-50%);
            background: var(--color-surface, #F0FDFA);
            border: 1px solid var(--color-border, #CFFAFE);
            border-radius: 50%;
            width: 28px;
            height: 28px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            color: var(--color-text-muted, #64748B);
            box-shadow: var(--shadow-card);
            z-index: 1100;
            transition: all 0.2s;
        }

        .sidebar__toggle:hover {
            color: var(--color-primary, #0D9488);
            border-color: var(--color-primary, #0D9488);
            background-color: var(--color-primary-light, #CCFBF1);
        }

        /* --------------------------
           NAV 
           -------------------------- */
        .sidebar__nav {
            padding: var(--space-s) 0;
            flex: 1;
            overflow-y: auto;
        }

        .nav-section {
            margin-bottom: var(--space-s);
        }

        .nav-section__label {
            display: block;
            font-size: var(--txt-xs, 1.2rem);
            text-transform: uppercase;
            letter-spacing: 0.07em;
            color: var(--color-sidebar-text, #64748B);
            padding: 1rem 1.5rem 0.5rem;
            font-weight: 700;
        }

        .nav-item {
            display: flex;
            align-items: center;
            padding: 10px 1.5rem;
            margin: 2px 0.5rem;
            gap: 12px;
            color: var(--color-sidebar-text, #64748B);
            text-decoration: none;
            font-size: var(--txt-s, 1.4rem);
            font-weight: 500;
            border-radius: var(--radius-control, 8px);
            transition: all var(--transition-base, 0.25s ease);
            white-space: nowrap;
            overflow: hidden;
            min-height: 44px;
        }

        .nav-item:hover {
            background-color: var(--color-primary-light, #CCFBF1);
            color: var(--color-primary, #0D9488);
        }

        .nav-item.active {
            background-color: var(--color-primary, #0D9488);
            color: #ffffff !important;
            font-weight: 600;
        }
        
        .nav-item.active .material-symbols-outlined {
            color: #ffffff !important;
        }

        /* --------------------------
           MAIN CONTENT & TOPBAR
           -------------------------- */
        .main-content {
            flex: 1;
            margin-left: var(--sidebar-width);
            transition: margin-left var(--transition-base);
            display: flex;
            flex-direction: column;
            min-width: 0;
        }

        .sidebar.collapsed ~ .main-content {
            margin-left: var(--sidebar-collapsed-width);
        }

        .content {
            padding: var(--dashboard-page-padding);
            flex: 1;
            width: 100%;
            max-width: 136.6rem;
            margin-right: auto;
            box-sizing: border-box;
        }

        .mobile-menu-fab {
            display: none;
        }

        input[type="color"].form-control {
            padding: 2px;
            height: 48px;
            cursor: pointer;
        }

        /* Hover Tooltip */
        .info-tooltip-container {
            position: relative;
            display: inline-flex;
            align-items: center;
            margin-left: 6px;
            cursor: help;
            color: var(--color-text-muted, #94A3B8);
        }
        .info-tooltip-container svg {
            width: 15px;
            height: 15px;
            min-width: 15px;
            min-height: 15px;
            max-width: 15px;
            max-height: 15px;
            flex: 0 0 15px;
            display: block;
            transition: color 0.2s ease;
        }
        .info-tooltip-container:hover svg {
            color: var(--color-primary, #0D9488);
        }
        
        .info-tooltip-container:hover {
            z-index: 10000;
        }
        
        .info-tooltip-container .tooltip-content {
            position: absolute;
            bottom: calc(100% + 8px);
            left: 50%;
            transform: translateX(-50%) translateY(10px);
            background-color: #1E293B;
            color: #F8FAFC;
            padding: 8px 12px;
            border-radius: var(--radius-control, 8px);
            font-size: var(--txt-xs, 1.2rem);
            font-weight: 500;
            line-height: 1.4;
            white-space: normal;
            width: max-content;
            max-width: 250px;
            text-align: center;
            opacity: 0;
            pointer-events: none;
            transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
            z-index: 9999;
        }
        
        /* Arrow */
        .info-tooltip-container .tooltip-content::after {
            content: '';
            position: absolute;
            top: 100%;
            left: 50%;
            transform: translateX(-50%);
            border-width: 5px;
            border-style: solid;
            border-color: #1E293B transparent transparent transparent;
        }
        
        .info-tooltip-container:hover .tooltip-content {
            opacity: 1;
            transform: translateX(-50%) translateY(0);
        }

        /* Global Page Loader */
        #page-loader {
            position: fixed;
            inset: 0;
            z-index: 9999;
            background: rgba(255, 255, 255, 0.75);
            backdrop-filter: blur(3px);
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.2s ease;
        }
        #page-loader.visible {
            opacity: 1;
            pointer-events: all;
        }
        .loader-ring {
            width: 44px;
            height: 44px;
            border: 3px solid var(--color-border, #E2E8F0);
            border-top-color: var(--color-primary, #0D9488);
            border-radius: 50%;
            animation: spin 0.7s linear infinite;
        }
        @keyframes spin { to { transform: rotate(360deg); } }

        /* Sidebar Footer & Profile card (BEM) */
        .sidebar__footer {
            padding: var(--space-s);
            border-top: 1px solid var(--color-border);
            background: var(--color-surface);
            margin-top: auto;
            position: relative;
        }
        .sidebar__profile {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            padding: 0.6rem 0.5rem;
            border: none;
            background: transparent;
            cursor: pointer;
            border-radius: var(--radius-control, 8px);
            transition: background 0.2s;
        }
        .sidebar__profile:hover {
            background: var(--color-bg);
        }
        .sidebar__profile-identity {
            display: flex;
            align-items: center;
            gap: 10px;
            overflow: hidden;
            min-width: 0;
        }
        .sidebar__profile-logo {
            width: 38px;
            height: 38px;
            border-radius: 6px;
            object-fit: contain;
            flex-shrink: 0;
            border: 1px solid var(--color-border);
        }
        .sidebar__profile-avatar {
            width: 38px;
            height: 38px;
            border-radius: 50%;
            object-fit: cover;
            flex-shrink: 0;
        }
        .sidebar__profile-initials {
            background-color: var(--color-primary, #0D9488);
            color: var(--color-text-on-primary, #fff);
            border-radius: 50%;
            width: 38px;
            height: 38px;
            min-width: 38px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 700;
            font-size: var(--txt-m, 1.5rem);
            flex-shrink: 0;
        }
        .sidebar__profile-info {
            overflow: hidden;
            min-width: 0;
            text-align: left;
            display: flex;
            flex-direction: column;
            gap: 1px;
        }
        .sidebar__profile-name {
            font-weight: 600;
            font-size: var(--txt-s, 1.4rem);
            color: var(--color-sidebar-text, #1E293B);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .sidebar__profile-email {
            font-size: var(--txt-xs, 1.2rem);
            color: var(--color-text-muted, #64748B);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .sidebar__profile-chevron {
            color: var(--color-text-muted, #64748B);
            transition: transform 0.2s;
            flex-shrink: 0;
        }
        .sidebar__dropdown {
            display: none;
            position: absolute;
            bottom: calc(100% + 5px);
            left: var(--space-s);
            width: calc(100% - 2 * var(--space-s));
            background: var(--color-surface, #fff);
            border: 1px solid var(--color-border, #E2E8F0);
            border-radius: var(--radius-card, 8px);
            box-shadow: var(--shadow-card);
            padding: 0.5rem;
            z-index: 100;
        }
        .sidebar__dropdown-item {
            padding: 8px 12px;
            min-height: 36px;
            margin: 0;
            border-radius: 6px;
            font-size: var(--txt-s, 1.4rem);
        }
        .sidebar__dropdown-item--danger {
            color: var(--color-error, #ef4444);
            width: 100%;
            border: none;
            background: transparent;
            cursor: pointer;
        }
        .sidebar__dropdown-divider {
            height: 1px;
            background: var(--color-border);
            border: none;
            margin: 6px 0;
        }
        .sidebar__logout-form {
            width: 100%;
            margin: 0;
        }

        .impersonation-banner {
            background-color: var(--color-warning, #ebc396);
            color: rgb(75, 73, 73);
            padding: var(--space-xs, 0.8rem) calc(var(--space-l, 2rem) * 1.6);
            font-size: var(--txt-s, 1.4rem);
            font-weight: 600;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: var(--space-s, 1rem);
        }

        .impersonation-banner__link {
            color: var(--color-text-on-primary, #FFFFFF);
            text-decoration: underline;
            background: rgba(0, 0, 0, 0.1);
            padding: 0.4rem 1.2rem;
            border-radius: var(--radius-control, 4px);
        }

        .dashboard-flash {
            padding: var(--space-m, 1.5rem);
            margin-bottom: var(--space-l, 2rem);
            border-radius: var(--radius-card, 8px);
            background-color: var(--color-surface);
            border: 1px solid var(--color-primary);
            display: flex;
            align-items: center;
            gap: var(--space-xs, 0.8rem);
            font-size: var(--txt-s, 1.4rem);
        }

        .mobile-drawer__brand {
            font-size: var(--txt-m, 1.5rem);
        }

        .mobile-profile-footer {
            padding: var(--space-s, 1rem);
            border-top: 1px solid var(--color-border);
            background: var(--color-surface);
            margin-top: auto;
            position: relative;
        }

        .mobile-profile-button {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            padding: 0.5rem;
            border: none;
            background: transparent;
            cursor: pointer;
            border-radius: var(--radius-control, 8px);
            transition: background 0.2s;
        }

        .mobile-profile-button__identity {
            display: flex;
            align-items: center;
            gap: 12px;
            overflow: hidden;
        }

        .mobile-profile-button__avatar {
            width: 40px;
            height: 40px;
            flex-shrink: 0;
            object-fit: cover;
        }

        .mobile-profile-button__avatar--logo {
            border-radius: 6px;
            border: 1px solid var(--color-border);
        }

        .mobile-profile-button__avatar--photo {
            border-radius: 50%;
        }

        .mobile-profile-button__initial {
            background-color: var(--color-primary, #0D9488);
            color: var(--color-text-on-primary, #fff);
            border-radius: 50%;
            width: 40px;
            height: 40px;
            min-width: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 700;
            font-size: var(--txt-m, 1.5rem);
            flex-shrink: 0;
        }

        .mobile-profile-button__text {
            overflow: hidden;
            text-align: left;
        }

        .mobile-profile-button__name {
            font-weight: 600;
            font-size: var(--txt-s, 1.4rem);
            color: var(--color-text-main, #1E293B);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .mobile-profile-button__email {
            font-size: var(--txt-xs, 1.2rem);
            color: var(--color-text-muted, #64748B);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .mobile-profile-button__chevron {
            color: var(--color-text-muted, #64748B);
            transition: transform 0.2s;
            flex-shrink: 0;
        }

        .mobile-profile-menu {
            display: none;
            position: absolute;
            bottom: calc(100% + 5px);
            left: 1rem;
            width: calc(100% - 2rem);
            background: var(--color-surface, #fff);
            border: 1px solid var(--color-border, #E2E8F0);
            border-radius: var(--radius-card, 8px);
            box-shadow: var(--shadow-card);
            padding: 0.5rem;
            z-index: 100;
        }

        .mobile-profile-menu__divider {
            height: 1px;
            background: var(--color-border);
            margin: 6px 0;
        }

        .mobile-profile-menu__form {
            width: 100%;
            margin: 0;
        }

        /* Mobile Base Adjustments */
        @media (min-width: 1024px) {
            .hide-on-desktop {
                display: none !important;
            }
        }
        
        @media (max-width: 1023px) {
            .sidebar {
                display: none !important;
            }
            .main-content {
                margin-left: 0 !important;
            }
            .mobile-menu-btn {
                display: flex;
            }
            .mobile-menu-fab {
                position: fixed;
                top: 1.2rem;
                left: 1.2rem;
                width: 4.2rem;
                height: 4.2rem;
                align-items: center;
                justify-content: center;
                border: 1px solid var(--color-border, #CFFAFE);
                border-radius: 999px;
                background: var(--color-surface, #FFFFFF);
                color: var(--color-text-main, #1E293B);
                box-shadow: var(--shadow-soft);
                z-index: 960;
            }
            .content {
                padding: calc(var(--space-s) + 4.8rem) var(--space-s) var(--space-s);
            }
        }

/* billing/checkout_cancel.html */
.billing-result {
        text-align: center;
        padding: 6rem 2.4rem;
        max-width: 54rem;
        margin: 4rem auto;
    }

    .billing-result__emoji {
        font-size: var(--h1, 4.8rem);
        margin-bottom: var(--space-m, 1.5rem);
    }

    .billing-result__title {
        margin: 0 0 1.2rem;
        font-weight: 700;
    }

    .billing-result__text {
        color: var(--color-text-muted);
        font-size: var(--txt-s, 1.4rem);
        margin: 0 0 2.8rem;
        line-height: 1.6;
    }

    .billing-result__link {
        display: inline-flex;
        align-items: center;
        gap: var(--space-xs, 0.8rem);
        background: var(--color-primary);
        color: #fff;
        padding: 1.2rem 2.8rem;
        border-radius: 1rem;
        font-weight: 600;
        text-decoration: none;
        font-size: var(--txt-s, 1.4rem);
    }

/* billing/checkout_success.html */
.billing-result {
        text-align: center;
        padding: 6rem 2.4rem;
        max-width: 54rem;
        margin: 4rem auto;
    }

    .billing-result__emoji {
        font-size: var(--h1, 4.8rem);
        margin-bottom: var(--space-m, 1.5rem);
    }

    .billing-result__title {
        margin: 0 0 1.2rem;
        font-weight: 700;
    }

    .billing-result__text {
        color: var(--color-text-muted);
        font-size: var(--txt-s, 1.4rem);
        margin: 0 0 2.8rem;
        line-height: 1.6;
    }

    .billing-result__link {
        display: inline-flex;
        align-items: center;
        gap: var(--space-xs, 0.8rem);
        background: var(--color-primary);
        color: #fff;
        padding: 1.2rem 2.8rem;
        border-radius: 1rem;
        font-weight: 600;
        text-decoration: none;
        font-size: var(--txt-s, 1.4rem);
    }

/* billing/checkout_wompi.html */
.billing-wompi {
    max-width: 78rem;
    display: grid;
    gap: var(--space-m);
  }

  .billing-wompi__card {
    display: grid;
    gap: var(--space-l);
    padding: var(--space-l);
    border: 1px solid rgba(207, 228, 238, 0.9);
    border-radius: 2.4rem;
    background:
      radial-gradient(circle at top left, rgba(13, 148, 136, 0.08), transparent 32%),
      linear-gradient(180deg, #ffffff 0%, #fbfeff 100%);
    box-shadow:
      0 20px 50px rgba(15, 23, 42, 0.08),
      inset 0 1px 0 rgba(255, 255, 255, 0.9);
  }

  .billing-wompi__header {
    display: grid;
    gap: var(--space-s);
  }

  .billing-wompi__eyebrow {
    margin: 0;
    color: var(--color-primary, #0d9488);
    font-size: var(--txt-xs);
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .billing-wompi__title {
    margin: 0;
    color: var(--color-text-main, #0f172a);
    font-size: var(--h2);
    line-height: 1;
    letter-spacing: -0.04em;
  }

  .billing-wompi__intro,
  .billing-wompi__hint {
    margin: 0;
    color: var(--color-text-muted, #64748b);
    font-size: var(--txt-s);
    line-height: 1.65;
    max-width: 58rem;
  }

  .billing-wompi__summary {
    display: grid;
    gap: var(--space-m);
    padding: var(--space-m);
    border-radius: 2rem;
    background: linear-gradient(180deg, rgba(13, 148, 136, 0.08), rgba(207, 250, 254, 0.52));
    border: 1px solid rgba(13, 148, 136, 0.14);
  }

  .billing-wompi__summary-meta {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-m);
    flex-wrap: wrap;
  }

  .billing-wompi__summary-label {
    margin: 0 0 var(--space-2xs, 0.4rem);
    color: var(--color-text-muted, #64748b);
    font-size: var(--txt-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }

  .billing-wompi__summary-plan {
    margin: 0;
    color: var(--color-text-main, #0f172a);
    font-size: var(--txt-l);
    font-weight: 800;
  }

  .billing-wompi__summary-amount {
    display: grid;
    gap: var(--space-2xs, 0.4rem);
    justify-items: end;
    text-align: right;
  }

  .billing-wompi__summary-price {
    margin: 0;
    color: var(--color-text-main, #0f172a);
    font-size: var(--h3);
    line-height: 1;
    font-weight: 900;
    letter-spacing: -0.04em;
  }

  .billing-wompi__summary-copy {
    margin: 0;
    color: var(--color-text-muted, #64748b);
    font-size: var(--txt-s);
    max-width: 48rem;
  }

  .billing-wompi__trial-note {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2xs, 0.6rem);
    width: fit-content;
    padding: var(--space-2xs, 0.55rem) var(--space-s);
    border-radius: 999px;
    background: rgba(13, 148, 136, 0.12);
    color: #0f766e;
    font-size: var(--txt-xs);
    font-weight: 800;
  }

  .billing-wompi__widget {
    display: grid;
    justify-items: start;
    gap: var(--space-xs);
    padding: var(--space-m);
    border-radius: 2rem;
    border: 1px solid rgba(226, 232, 240, 0.95);
    background: #ffffff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
  }

  .billing-wompi__widget-title {
    margin: 0;
    color: var(--color-text-main, #0f172a);
    font-size: var(--txt-m);
    font-weight: 800;
  }

  .billing-wompi__widget-host {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-height: 5.6rem;
  }

  .billing-wompi__notice {
    display: grid;
    gap: var(--space-2xs, 0.45rem);
    padding: var(--space-s) var(--space-m);
    border-radius: 1.6rem;
    background: rgba(248, 250, 252, 0.95);
    border: 1px solid rgba(226, 232, 240, 0.9);
  }

  .billing-wompi__notice-title {
    margin: 0;
    color: var(--color-text-main, #0f172a);
    font-size: var(--txt-s);
    font-weight: 800;
  }

  @media (max-width: 720px) {
    .billing-wompi__card {
      gap: var(--space-m);
      padding: var(--space-m);
      border-radius: 2rem;
    }

    .billing-wompi__summary-meta {
      display: grid;
      gap: var(--space-s);
    }

    .billing-wompi__summary-amount {
      justify-items: start;
      text-align: left;
    }
  }

/* billing/index.html */
/* ── Billing Page ─────────────────────────────────────────────────── */
.billing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-m, 1.5rem);
    margin-bottom: var(--space-l, 2rem);
}
.billing-stat {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 1.2rem;
    padding: var(--space-m, 1.5rem);
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.billing-stat__value { font-size: var(--txt-xl, 2rem); font-weight: 700; margin: 0; color: var(--color-primary); line-height: 1.15; }
.billing-stat__label { font-size: var(--txt-xs, 1.2rem); color: var(--color-text-muted); margin: 0; }
.billing-stat__subvalue { font-size: var(--txt-s, 1.4rem); color: var(--color-text-muted); margin: 0; line-height: 1.5; }
.billing-stat__currency { display: block; font-size: var(--txt-s, 1.4rem); line-height: 1.2; }
.billing-stat__amount { display: block; font-size: var(--txt-m, 1.6rem); line-height: 1.2; }
.billing-stat--warning .billing-stat__value { color: #F59E0B; }
.billing-stat--danger  .billing-stat__value { color: #EF4444; }
.billing-stat--success .billing-stat__value { color: #10B981; }

/* Badge de estado */
.sub-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 99px;
    font-size: var(--txt-xs, 1.2rem);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.sub-badge--ACTIVE   { background: #DCFCE7; color: #16A34A; }
.sub-badge--TRIAL    { background: #FEF9C3; color: #A16207; }
.sub-badge--PAST_DUE { background: #FEE2E2; color: #DC2626; }
.sub-badge--CANCELLED { background: var(--color-border); color: var(--color-text-muted); }

/* Tabla estándar */
.bt { width: 100%; border-collapse: collapse; font-size: var(--txt-s, 1.4rem); }
.bt th { padding: 10px 12px; text-align: left; color: var(--color-text-muted); font-size: var(--txt-xs, 1.2rem); text-transform: uppercase; letter-spacing: .05em; border-bottom: 1px solid var(--color-border); }
.bt td { padding: 12px; border-bottom: 1px solid var(--color-border); color: var(--color-text-main); vertical-align: middle; }
.bt tr:last-child td { border: none; }
.bt tr:hover td { background: var(--color-border); }

/* Banner de días restantes */
.days-ring {
    width: 80px; height: 80px;
    border-radius: 50%;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    font-weight: 700;
    border: 3px solid var(--color-primary);
    color: var(--color-primary);
    flex-shrink: 0;
}
.days-ring--warning { border-color: #F59E0B; color: #F59E0B; }
.days-ring--danger  { border-color: #EF4444; color: #EF4444; }
.days-ring__num  { font-size: var(--txt-xl, 2rem); line-height: 1; }
.days-ring__text { font-size: var(--txt-xs, 1.2rem); text-transform: uppercase; letter-spacing: .04em; color: inherit; }

/* Info card de periodo de gracia */
.grace-card {
    display: flex;
    align-items: center;
    gap: var(--space-l, 2rem);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 1.6rem;
    padding: var(--space-l, 2rem);
    margin-bottom: var(--space-l, 2rem);
}
.grace-card__body { flex: 1; }
.grace-card__title { font-size: var(--h4, 1.7rem); font-weight: 700; margin: 0 0 6px; }
.grace-card__sub { color: var(--color-text-muted); font-size: var(--txt-s, 1.4rem); margin: 0; }
.grace-card__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--color-primary);
    color: white;
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: 600;
    font-size: var(--txt-s, 1.4rem);
    text-decoration: none;
    white-space: nowrap;
    opacity: .5;
    cursor: not-allowed;
    pointer-events: none;
}
.grace-card--active   .grace-card__cta { opacity: 1; pointer-events: auto; }
.grace-card--warning { border-color: #F59E0B; }
.grace-card--danger  { border-color: #EF4444; }

/* Section header */
.section-header { display: flex; justify-content: space-between; align-items: center; margin: 0 0 16px; }
.section-header h3 { margin: 0; font-size: var(--txt-m, 1.5rem); font-weight: 600; }

/* Tip de plataforma settings */
.admin-tip {
    background: #EFF6FF;
    border: 1px solid #BFDBFE;
    border-radius: 1rem;
    padding: 1.4rem 1.8rem;
    margin-bottom: var(--space-m, 1.5rem);
    font-size: var(--txt-xs, 1.2rem);
    color: #1E40AF;
    display: flex;
    align-items: center;
    gap: 10px;
}

.billing-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-s, 1rem);
    margin-bottom: var(--space-m, 1.5rem);
    flex-wrap: wrap;
}

.billing-toolbar__title {
    margin: 0;
    font-size: var(--txt-m, 1.5rem);
    font-weight: 700;
    color: var(--color-text-main);
}

.billing-toolbar__meta {
    margin: 0.4rem 0 0;
    color: var(--color-text-muted);
    font-size: var(--txt-s, 1.4rem);
}

.billing-periods {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.4rem;
    border-radius: 999px;
    background: var(--color-surface, #F8FAFC);
    border: 1px solid var(--color-border);
}

.billing-periods__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 7.2rem;
    padding: 0.8rem 1.2rem;
    border-radius: 999px;
    text-decoration: none;
    color: var(--color-text-main);
    font-size: var(--txt-s, 1.4rem);
    font-weight: 700;
}

.billing-periods__link.is-active {
    background: var(--color-primary);
    color: #fff;
}

.partner-billing__toolbar {
    padding: var(--space-m);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    background: var(--color-surface);
    box-shadow: var(--shadow-soft);
}

.partner-billing__kpis {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.partner-billing__kpis .billing-stat {
    min-width: 0;
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-soft);
}

.partner-billing__kpis .billing-stat:first-child {
    border-color: var(--color-text-main);
    background: var(--color-text-main);
}

.partner-billing__kpis .billing-stat:first-child .billing-stat__label,
.partner-billing__kpis .billing-stat:first-child .billing-stat__subvalue,
.partner-billing__kpis .billing-stat:first-child .billing-stat__value {
    color: var(--color-bg);
}

.billing-stat__money {
    display: block;
}

.partner-billing__section {
    margin-bottom: var(--space-m);
}

.partner-billing__section .admin-form__section-title {
    margin-bottom: var(--space-3xs);
}

@media (max-width: 75rem) {
    .partner-billing__kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 36rem) {
    .partner-billing__toolbar {
        align-items: stretch;
        padding: var(--space-s);
    }

    .partner-billing__toolbar .billing-periods {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        width: 100%;
    }

    .partner-billing__toolbar .billing-periods__link {
        min-width: 0;
        padding-inline: var(--space-xs);
    }

    .partner-billing__kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-xs);
    }

    .partner-billing__kpis .billing-stat {
        padding: var(--space-s);
    }
}

@media (min-width: 1200px) {
    .billing-grid--superadmin {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }
}
.admin-tip__link { color: var(--color-info); font-weight: var(--font-weight-semibold); }
.billing-card--spaced { margin-bottom: var(--space-s); }
.billing-card--warning { border-left: 3px solid var(--color-warning); }
.billing-meta { color: var(--color-text-muted); font-size: var(--txt-xs); }
.billing-code { font-size: var(--txt-xs); }
.billing-days--danger { color: var(--color-error); font-weight: var(--font-weight-semibold); }
.billing-days--warning { color: var(--color-warning); font-weight: var(--font-weight-semibold); }
.days-ring--status { font-size: var(--txt-xl); }
.grace-card__cta--disabled { opacity: var(--opacity-disabled); cursor: not-allowed; pointer-events: none; }
.usage-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
    gap: var(--space-s);
}
.usage-item {
    min-width: 0;
    padding-top: var(--space-xs);
    border-top: var(--border-width) solid var(--color-border);
}
.usage-item__header {
    display: flex;
    align-items: baseline;
    justify-content: flex-start;
    gap: var(--space-xs);
    margin-bottom: var(--space-xs);
    font-size: var(--txt-xs);
}
.usage-item__label {
    min-width: 0;
    color: var(--color-text-main);
    font-weight: var(--font-weight-semibold);
}
.usage-item__value {
    flex: 0 0 auto;
    color: var(--color-text-muted);
    font-family: var(--font-label);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.usage-progress { width: 100%; height: 6px; border: 0; border-radius: var(--radius-pill); overflow: hidden; appearance: none; }
.usage-progress::-webkit-progress-bar { background: var(--color-border); }
.usage-progress::-webkit-progress-value { background: var(--color-primary); border-radius: var(--radius-pill); }
.usage-progress--warning::-webkit-progress-value { background: var(--color-warning); }
.usage-progress::-moz-progress-bar { background: var(--color-primary); border-radius: var(--radius-pill); }
.usage-progress--warning::-moz-progress-bar { background: var(--color-warning); }
.billing-empty-icon { margin-bottom: var(--space-xs); font-size: var(--txt-xl); }
.billing-card--centered { padding: var(--space-xl); text-align: center; }

/* Hallmark · pre-emit critique: P5 H5 E5 S5 R5 V4 */
/* Hallmark · genre: modern-minimal · macrostructure: Workbench · design-system: design.md
 * scope: merchant subscription · nav: existing application rail · footer: n/a
 * contrast: pass (40–41) · slop: pass (42–45) · responsive: pass (34, 49–57)
 */
.subscription-page {
    display: grid;
    gap: var(--space-m);
    min-width: 0;
}

.subscription-header {
    min-width: 0;
}

.subscription-header .page-title {
    margin: 0;
    overflow-wrap: anywhere;
}

.subscription-header__status {
    margin: var(--space-xs) 0 0;
    color: var(--color-text-muted);
    font-size: var(--txt-m);
}

/* Hallmark · component: trial notice · genre: modern-minimal · theme: Kavto design.md
 * states: default · hover · focus · active · disabled · loading · error · success
 * contrast: pass (46–50)
 */
.trial-notice {
    display: flex;
    align-items: center;
    gap: var(--space-s);
    min-width: 0;
    padding: var(--space-s) var(--space-m);
    color: var(--color-text-main);
    background: var(--color-trial-light);
    border: 1px solid color-mix(in oklab, var(--color-trial) 52%, transparent);
    border-radius: var(--radius-card);
}

.trial-notice--urgent {
    background: var(--color-error-light);
    border-color: color-mix(in oklab, var(--color-error) 44%, var(--color-border));
}

.trial-notice__icon {
    flex: 0 0 auto;
    color: var(--color-warning);
    font-size: var(--txt-l);
}

.trial-notice--urgent .trial-notice__icon {
    color: var(--color-error);
}

.trial-notice__copy {
    display: flex;
    align-items: baseline;
    gap: var(--space-xs);
    min-width: 0;
    font-size: var(--txt-s);
}

.trial-notice__copy strong {
    flex: 0 0 auto;
}

.trial-notice__copy span {
    min-width: 0;
    color: var(--color-text-muted);
}

.sidebar-trial-notice,
.mobile-trial-notice {
    color: var(--color-text-main);
    background: var(--color-trial-light);
    border: 1px solid color-mix(in oklab, var(--color-trial) 52%, transparent);
    text-decoration: none;
    transition:
        transform var(--transition-fast),
        border-color var(--transition-fast),
        background-color var(--transition-fast);
}

.sidebar-trial-notice {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-xs);
    margin-bottom: var(--space-xs);
    padding: var(--space-xs) var(--space-s);
    border-radius: 1rem;
}

.sidebar-trial-notice__icon {
    color: var(--color-warning);
    font-size: var(--txt-m);
}

.sidebar-trial-notice__copy {
    display: flex;
    align-items: baseline;
    gap: var(--space-2xs);
    min-width: 0;
    line-height: var(--line-height-tight);
    white-space: nowrap;
}

.sidebar-trial-notice__copy strong,
.sidebar-trial-notice__copy span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar-trial-notice__copy strong {
    flex: 0 0 auto;
    font-size: var(--txt-xs);
}

.sidebar-trial-notice__copy span {
    flex: 1 1 auto;
    color: var(--color-text-muted);
    font-size: var(--txt-xs);
}

.sidebar-trial-notice__chevron {
    color: var(--color-text-muted);
    font-size: var(--txt-m);
}

.sidebar-trial-notice:hover,
.mobile-trial-notice:hover,
.sidebar-trial-notice.is-hover,
.mobile-trial-notice.is-hover {
    border-color: var(--color-trial);
    transform: translateY(-1px);
}

.sidebar-trial-notice:focus-visible,
.mobile-trial-notice:focus-visible,
.sidebar-trial-notice.is-focus,
.mobile-trial-notice.is-focus {
    outline: 2px solid var(--color-focus);
    outline-offset: 2px;
}

.sidebar-trial-notice:active,
.mobile-trial-notice:active,
.sidebar-trial-notice.is-active,
.mobile-trial-notice.is-active {
    transform: translateY(0);
}

.sidebar-trial-notice[aria-disabled="true"],
.mobile-trial-notice[aria-disabled="true"],
.sidebar-trial-notice.is-disabled,
.mobile-trial-notice.is-disabled,
.sidebar-trial-notice[data-state="loading"],
.mobile-trial-notice[data-state="loading"] {
    opacity: var(--opacity-disabled);
    pointer-events: none;
}

.sidebar-trial-notice[data-state="error"],
.mobile-trial-notice[data-state="error"],
.sidebar-trial-notice--urgent,
.mobile-trial-notice--urgent {
    background: var(--color-error-light);
    border-color: color-mix(in oklab, var(--color-error) 44%, var(--color-border));
}

.sidebar-trial-notice[data-state="success"],
.mobile-trial-notice[data-state="success"] {
    background: var(--color-success-light);
    border-color: var(--color-success);
}

.sidebar.collapsed .sidebar-trial-notice {
    display: flex;
    justify-content: center;
    padding: var(--space-xs);
}

.sidebar.collapsed .sidebar-trial-notice__copy,
.sidebar.collapsed .sidebar-trial-notice__chevron {
    display: none;
}

.mobile-trial-notice {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-xs);
    margin-bottom: var(--space-xs);
    padding: var(--space-s);
    border-radius: 1rem;
}

.mobile-trial-notice > span:nth-child(2) {
    display: flex;
    align-items: baseline;
    gap: var(--space-2xs);
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
}

.mobile-trial-notice strong,
.mobile-trial-notice small {
    overflow: hidden;
    text-overflow: ellipsis;
}

.mobile-trial-notice strong {
    flex: 0 0 auto;
    font-size: var(--txt-s);
}

.mobile-trial-notice small {
    color: var(--color-text-muted);
    font-size: var(--txt-xs);
}

@media (max-width: 480px) {
    .trial-notice__copy {
        display: grid;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sidebar-trial-notice,
    .mobile-trial-notice {
        transition-duration: var(--duration-micro);
        transform: none;
    }
}

.subscription-plans {
    display: grid;
    gap: var(--space-m);
    min-width: 0;
    padding-block: var(--space-xs) var(--space-s);
}

.subscription-plans__heading {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-m);
    align-items: end;
}

.subscription-plans__heading h2 {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--txt-xl);
    line-height: var(--line-height-tight);
}

.subscription-plans__heading p {
    max-width: 62ch;
    margin: var(--space-xs) 0 0;
    color: var(--color-text-muted);
    font-size: var(--txt-s);
    line-height: var(--line-height-normal);
}

.subscription-cycle {
    display: inline-flex;
    justify-self: end;
    align-items: center;
    gap: var(--space-2xs);
    padding: var(--space-2xs);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-pill);
    background: var(--color-surface);
}

.subscription-cycle__button {
    min-height: var(--control-height);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    padding-inline: var(--space-s);
    border: 0;
    border-radius: var(--radius-pill);
    color: var(--color-text-muted);
    background: transparent;
    font: inherit;
    font-size: var(--txt-s);
    font-weight: var(--font-weight-semibold);
    white-space: nowrap;
    cursor: pointer;
    transition:
        color var(--transition-fast),
        background var(--transition-fast),
        transform var(--transition-fast);
}

.subscription-cycle__button span {
    padding: var(--space-2xs) var(--space-xs);
    border-radius: var(--radius-pill);
    color: var(--color-text-on-primary);
    background: var(--color-primary);
    font-family: var(--font-label);
    font-size: var(--txt-xs);
    line-height: 1;
    white-space: nowrap;
}

.subscription-cycle__button:hover,
.subscription-cycle__button.is-hover {
    color: var(--color-text-main);
    background: var(--color-surface-soft);
}

.subscription-cycle__button.is-active,
.subscription-cycle__button[data-state="success"] {
    color: var(--color-text-main);
    background: var(--color-surface-soft);
}

.subscription-cycle__button:focus-visible,
.subscription-cycle__button.is-focus {
    outline: var(--border-width) solid var(--color-focus);
    box-shadow: var(--shadow-focus);
}

.subscription-cycle__button:active,
.subscription-cycle__button.is-active-state {
    transform: translateY(var(--interaction-lift));
}

.subscription-cycle__button:disabled,
.subscription-cycle__button[data-state="loading"] {
    opacity: var(--opacity-disabled);
    cursor: wait;
}

.subscription-cycle__button[data-state="error"] {
    color: var(--color-error);
}

.subscription-plan-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 27rem), 1fr));
    gap: var(--space-s);
    align-items: stretch;
}

.subscription-plan-card {
    min-width: 0;
    display: flex;
    flex-direction: column;
    padding: var(--space-m);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-card);
    background: var(--color-surface);
    box-shadow: var(--shadow-soft);
}

.subscription-plan-card--current {
    border-color: var(--color-primary-hover);
}

.subscription-plan-card__topline {
    display: flex;
    justify-content: space-between;
    gap: var(--space-xs);
    align-items: flex-start;
}

.subscription-plan-card__topline h3 {
    min-width: 0;
    margin: 0;
    overflow-wrap: anywhere;
    font-family: var(--font-display);
    font-size: var(--txt-xl);
    line-height: var(--line-height-tight);
}

.subscription-plan-card__current {
    flex: 0 0 auto;
    padding: var(--space-2xs) var(--space-xs);
    border-radius: var(--radius-pill);
    color: var(--color-primary-hover);
    background: var(--color-primary-light);
    font-family: var(--font-label);
    font-size: var(--txt-xs);
    font-weight: var(--font-weight-semibold);
    white-space: nowrap;
}

.subscription-plan-card__description {
    min-height: 4.8em;
    margin: var(--space-s) 0 0;
    color: var(--color-text-muted);
    font-size: var(--txt-s);
    line-height: var(--line-height-normal);
}

.subscription-plan-card__price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-2xs);
    margin-top: var(--space-m);
    font-variant-numeric: tabular-nums;
}

.subscription-plan-card__price[hidden] {
    display: none;
}

.subscription-plan-card__price strong {
    color: var(--color-text-main);
    font-family: var(--font-display);
    font-size: var(--txt-2xl);
    line-height: 1;
    letter-spacing: -0.03em;
}

.subscription-plan-card__price > span:not(.subscription-plan-card__currency) {
    color: var(--color-text-muted);
    font-size: var(--txt-s);
}

.subscription-plan-card__currency {
    color: var(--color-text-muted);
    font-family: var(--font-label);
    font-size: var(--txt-xs);
    font-weight: var(--font-weight-semibold);
}

.subscription-plan-card__price small {
    flex-basis: 100%;
    margin-top: var(--space-xs);
    color: var(--color-text-muted);
    font-size: var(--txt-xs);
    line-height: var(--line-height-normal);
}

.subscription-plan-card__benefits {
    margin-top: var(--space-m);
    padding-top: var(--space-s);
    border-top: var(--border-width) solid var(--color-border);
}

.subscription-plan-card__benefits p {
    margin: 0;
    font-size: var(--txt-s);
    font-weight: var(--font-weight-bold);
}

.subscription-plan-card__benefits ul {
    display: grid;
    gap: var(--space-xs);
    margin: var(--space-s) 0 0;
    padding: 0;
    list-style: none;
}

.subscription-plan-card__benefits li {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--space-xs);
    color: var(--color-text-muted);
    font-size: var(--txt-s);
    line-height: var(--line-height-normal);
}

.subscription-plan-card__benefits li span {
    color: var(--color-primary-hover);
    font-weight: var(--font-weight-bold);
}

.subscription-plan-card__action {
    margin-top: auto;
    padding-top: var(--space-m);
}

.subscription-plan-card__button {
    width: 100%;
    min-height: var(--control-height);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-inline: var(--space-s);
    border: var(--border-width) solid var(--color-text-main);
    border-radius: var(--radius-pill);
    color: var(--color-text-main);
    background: transparent;
    font: inherit;
    font-size: var(--txt-s);
    font-weight: var(--font-weight-bold);
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition:
        background var(--transition-fast),
        color var(--transition-fast),
        transform var(--transition-fast),
        opacity var(--transition-fast);
}

.subscription-plan-card__button.is-hover {
    border-color: var(--color-primary);
    color: var(--color-text-on-primary);
    background: var(--color-primary);
}

@media (hover: hover) and (pointer: fine) {
    .subscription-plan-card__button:hover {
        border-color: var(--color-primary);
        color: var(--color-text-on-primary);
        background: var(--color-primary);
    }
}

.subscription-plan-card__button:focus-visible,
.subscription-plan-card__button.is-focus {
    outline: var(--border-width) solid var(--color-focus);
    box-shadow: var(--shadow-focus);
}

.subscription-plan-card__button:active,
.subscription-plan-card__button.is-active {
    transform: translateY(var(--interaction-lift));
}

.subscription-plan-card__button:disabled,
.subscription-plan-card__button[data-state="loading"] {
    border-color: var(--color-border);
    color: var(--color-text-muted);
    background: var(--color-surface-soft);
    opacity: var(--opacity-disabled);
    cursor: not-allowed;
}

.subscription-plan-card__button[data-state="error"] {
    border-color: var(--color-error);
    color: var(--color-error);
    background: var(--color-error-light);
}

.subscription-plan-card__button[data-state="success"] {
    border-color: var(--color-success);
    color: var(--color-success);
    background: var(--color-success-light);
}

.subscription-plans__empty {
    padding: var(--space-l);
    border: var(--border-width) dashed var(--color-border);
    border-radius: var(--radius-card);
    color: var(--color-text-muted);
    text-align: center;
}

.subscription-plans__empty p {
    margin: 0;
}

@media (max-width: 48rem) {
    .subscription-plans__heading {
        grid-template-columns: minmax(0, 1fr);
        align-items: stretch;
    }

    .subscription-cycle {
        width: 100%;
        justify-self: stretch;
    }

    .subscription-cycle__button {
        flex: 1 1 0;
        min-width: 0;
    }

    .subscription-plan-card__description {
        min-height: 0;
    }
}

@media (max-width: 36rem) {
    .subscription-cycle__button span {
        display: none;
    }

    .subscription-plan-card {
        padding: var(--space-s);
    }
}

@media (prefers-reduced-motion: reduce) {
    .subscription-cycle__button,
    .subscription-plan-card__button {
        transition-duration: var(--duration-micro);
    }
}

/* billing/manual_payment_form.html */
.billing-manual {
      max-width: 72rem;
      display: grid;
      gap: var(--space-m, 1.5rem);
  }
  .billing-manual__card {
      background: var(--color-surface, #FFFFFF);
      border: 1px solid var(--color-border, #D9E2EC);
      border-radius: 1.6rem;
      padding: var(--space-l, 2rem);
      display: grid;
      gap: var(--space-m, 1.5rem);
  }
  .billing-manual__eyebrow {
      margin: 0;
      color: var(--color-primary, #0D9488);
      font-size: var(--txt-xs, 1.2rem);
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.08em;
  }
  .billing-manual__title {
      margin: 0;
      font-size: var(--h3, 2rem);
      font-weight: 700;
      color: var(--color-text-main, #0F172A);
  }
  .billing-manual__meta {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
      gap: var(--space-s, 1rem);
      padding: var(--space-m, 1.5rem);
      border-radius: 1.2rem;
      background: var(--color-surface-soft, #F8FAFC);
      border: 1px solid var(--color-border, #D9E2EC);
  }
  .billing-manual__meta-label {
      display: block;
      margin-bottom: 0.4rem;
      font-size: var(--txt-xs, 1.2rem);
      color: var(--color-text-muted, #64748B);
  }
  .billing-manual__meta-value {
      font-size: var(--txt-s, 1.4rem);
      color: var(--color-text-main, #0F172A);
      font-weight: 700;
  }
  .billing-manual__grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: var(--space-m, 1.5rem);
  }
  .billing-manual__field {
      display: grid;
      gap: 0.6rem;
  }
  .billing-manual__field--full {
      grid-column: 1 / -1;
  }
  .billing-manual__label {
      font-size: var(--txt-s, 1.4rem);
      font-weight: 700;
      color: var(--color-text-main, #0F172A);
  }
  .billing-manual__help {
      font-size: var(--txt-xs, 1.2rem);
      color: var(--color-text-muted, #64748B);
      margin: 0;
  }
  .billing-manual .form-control {
      width: 100%;
      padding: 1.2rem 1.4rem;
      border-radius: 1rem;
      border: 1px solid var(--color-border, #D9E2EC);
      font-size: var(--txt-s, 1.4rem);
      color: var(--color-text-main, #0F172A);
      background: #fff;
  }
  .billing-manual__error {
      font-size: var(--txt-xs, 1.2rem);
      color: #DC2626;
      margin: 0;
  }
  .billing-manual__actions {
      display: flex;
      gap: var(--space-s, 1rem);
      flex-wrap: wrap;
  }
  .billing-manual__btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 16rem;
      padding: 1.2rem 1.8rem;
      border-radius: 1rem;
      border: 1px solid var(--color-border, #D9E2EC);
      text-decoration: none;
      font-size: var(--txt-s, 1.4rem);
      font-weight: 700;
      cursor: pointer;
  }
  .billing-manual__btn--primary {
      background: var(--color-primary, #0D9488);
      color: #fff;
      border-color: var(--color-primary, #0D9488);
  }
  .billing-manual__btn--secondary {
      background: #fff;
      color: var(--color-text-main, #0F172A);
  }
  @media (max-width: 768px) {
      .billing-manual__grid {
          grid-template-columns: 1fr;
      }
  }

/* campaigns/index.html */
/* Hallmark · pre-emit critique: P5 H5 E5 S5 R5 V5 · genre: modern-minimal · macrostructure: Workbench · design-system: design.md · contrast: pass (40–41) · mobile: pass (34, 49–57) */
.campaigns-hub {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-m);
    max-width: 76rem;
}

.campaign-type-card {
    position: relative;
    display: grid;
    gap: var(--space-s);
    min-height: 18rem;
    padding: var(--space-xl);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-shell);
    background: var(--color-surface);
    cursor: pointer;
    transition: border-color var(--transition-fast), background-color var(--transition-fast);
}

.campaign-type-card > div:first-child {
    display: grid;
    width: 4.4rem;
    height: 4.4rem;
    place-items: center;
    border-radius: var(--radius-control);
    background: var(--color-surface-soft);
    color: var(--color-primary-hover);
}

.campaign-type-card h3,
.campaign-type-card p { margin: 0; }
.campaign-type-card h3 { color: var(--color-text-main); font-family: var(--font-display); font-size: var(--txt-l); }
.campaign-type-card p { max-width: 34ch; color: var(--color-text-muted); line-height: var(--line-height-relaxed); }
.campaign-type-card:focus-visible { outline: calc(var(--border-width) * 2) solid var(--color-focus); outline-offset: var(--space-3xs); }
.campaign-type-card:active { background: var(--color-surface-soft); }
.campaign-type-card--disabled,
.campaign-type-card--disabled:active {
    border-color: var(--color-border);
    background: var(--color-surface-soft);
    cursor: default;
    opacity: 0.58;
}
.campaign-type-card--disabled > div:first-child,
.campaign-type-card--disabled h3,
.campaign-type-card--disabled p {
    color: var(--color-text-muted);
}

.campaigns-workbench { max-width: 82rem; }
.campaigns-workbench__panel {
    padding: var(--space-l);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-shell);
    box-shadow: none;
}
.campaigns-workbench__toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(24rem, 28rem);
    gap: var(--space-m);
    align-items: end;
    padding-bottom: var(--space-m);
    margin-bottom: 0;
    border-bottom: var(--border-width) solid var(--color-border);
}
.campaigns-workbench__select label { display: block; margin-bottom: var(--space-xs); color: var(--color-text-main); font-family: var(--font-label); font-size: var(--txt-xs); font-weight: var(--font-weight-semibold); letter-spacing: var(--letter-spacing-wide); text-transform: uppercase; }
.campaigns-workbench__select { max-width: none; }
.campaigns-workbench__select select {
    width: 100%;
    max-width: none;
    min-height: var(--control-height);
    border-radius: var(--radius-sm);
}
.campaigns-workbench__audience {
    position: static;
    inset: auto;
    display: block;
    align-self: end;
    pointer-events: auto;
}
.campaigns-workbench__audience .subtabs-container { margin: 0; }
/* Hallmark · component: campaign audience toggle · genre: modern-minimal · theme: Kavto
 * states: default · hover · focus · active · disabled · selected
 * contrast: pass
 */
.campaigns-workbench .subtabs-container {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: min(28rem, 100%);
    max-width: none;
    min-height: var(--control-height);
    padding: var(--space-3xs);
    gap: 0;
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface-soft);
}
.campaigns-workbench .subtab {
    min-height: calc(var(--control-height) - (var(--space-3xs) * 2) - (var(--border-width) * 2));
    padding: 0 var(--space-s);
    border: 0;
    border-radius: var(--radius-sm);
    appearance: none;
    color: var(--color-text-muted);
    background: transparent;
    box-shadow: none;
    font-family: var(--font-body);
    white-space: nowrap;
    transition:
        background-color var(--transition-fast),
        color var(--transition-fast),
        transform var(--transition-fast);
}
.campaigns-workbench .subtab.active {
    color: var(--color-text-on-primary);
    background: var(--color-primary);
    box-shadow: none;
}
.campaigns-workbench .subtab:focus-visible {
    outline: calc(var(--border-width) * 2) solid var(--color-focus);
    outline-offset: var(--space-2xs);
}
.campaigns-workbench .subtab:active {
    transform: translateY(var(--border-width));
}
.campaigns-workbench .subtab:disabled,
.campaigns-workbench .subtab[aria-disabled="true"] {
    opacity: 0.55;
    cursor: not-allowed;
}
.campaigns-workbench__scope { margin: var(--space-s) 0 0; }
.campaigns-workbench__scope p { margin: 0; }
.campaign-composer { width: 100%; min-width: 0; max-width: none; padding: var(--space-l) 0 0; border: 0; border-radius: 0; box-shadow: none; }
.campaign-composer > div { max-width: none; }
.campaign-composer label { color: var(--color-text-main); }
.campaign-composer textarea { width: 100%; max-width: none; min-height: 12rem; border-radius: var(--radius-sm); resize: vertical; }
.campaign-composer .campaign-button { min-width: 14rem; }
.campaign-composer .ex-campaigns-index-29,
.campaign-composer .ex-campaigns-index-47 { max-width: none; }
.campaign-toast[hidden] { display: none !important; }
.campaign-toast {
    position: fixed;
    top: max(var(--space-m), env(safe-area-inset-top));
    right: max(var(--space-m), env(safe-area-inset-right));
    z-index: 1200;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: start;
    gap: var(--space-s);
    width: min(24rem, calc(100vw - (2 * var(--space-m))));
    padding: var(--space-s) var(--space-m);
    color: var(--color-text-main);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-float);
    opacity: 0;
    transform: translateY(-0.5rem);
    transition: opacity var(--transition-fast), transform var(--transition-fast);
}
.campaign-toast--visible { opacity: 1; transform: translateY(0); }
.campaign-toast--success { border-inline-start: 3px solid var(--color-success); }
.campaign-toast--error { border-inline-start: 3px solid var(--color-error); }
.campaign-toast__icon { width: 1.25rem; height: 1.25rem; color: var(--color-success); }
.campaign-toast--error .campaign-toast__icon { color: var(--color-error); }
.campaign-toast__text { min-width: 0; font-size: var(--txt-s); line-height: var(--line-height-normal); }
.campaign-toast__meta {
    display: block;
    margin-top: var(--space-2xs);
    font-size: var(--txt-xs);
    color: var(--color-text-muted);
}
.campaign-toast__close {
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
    color: var(--color-text-muted);
    background: transparent;
    border: 0;
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
}
.campaigns-workbench .client-list-item.is-hidden { display: none; }
.campaign-helper { margin: var(--space-xs) 0 0; color: var(--color-text-muted); font-size: var(--txt-s); line-height: var(--line-height-normal); }
.campaign-composer .seg-filters {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: end;
    padding: var(--space-s);
    background: var(--color-surface-soft);
    border-radius: var(--radius-sm);
}
.campaign-composer .client-list { margin-bottom: 0; border-radius: var(--radius-sm); }
.campaigns-workbench .btn-clear-filters {
    min-height: var(--control-height);
    border-radius: var(--radius-sm);
    transition: background-color var(--transition-fast), color var(--transition-fast);
}
.campaigns-workbench .seg-filter-group select,
.campaigns-workbench .seg-filter-group input[type="number"] {
    min-height: var(--control-height);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
}
.campaigns-workbench .campaign-button {
    min-height: var(--control-height);
    white-space: nowrap;
}
.campaigns-hub .campaign-type-card:hover {
    box-shadow: none;
    transform: none;
}

@media (hover: hover) and (pointer: fine) {
    .campaigns-hub .campaign-type-card:not(.campaign-type-card--disabled):hover {
        border-color: var(--color-primary);
        background: var(--color-surface-soft);
        box-shadow: none;
        transform: none;
    }
    .campaigns-workbench .subtab:hover:not(.active),
    .campaigns-workbench .btn-clear-filters:hover {
        color: var(--color-text-main);
        background: var(--color-surface);
    }
}

@media (max-width: 48rem) {
    .campaigns-hub { grid-template-columns: minmax(0, 1fr); }
    .campaign-type-card { min-height: 0; padding: var(--space-l); }
    .campaigns-workbench__toolbar { grid-template-columns: minmax(0, 1fr); align-items: start; }
    .campaigns-workbench__audience .subtabs-container { width: 100%; }
    .campaigns-workbench__audience .subtab { flex: 1 1 0; white-space: nowrap; }
    .campaigns-workbench__panel { padding: var(--space-s); }
    .campaign-composer { padding: var(--space-m) 0 0; }
    .campaign-composer .ex-campaigns-index-29,
    .campaign-composer .ex-campaigns-index-47 {
        align-items: stretch;
        flex-direction: column;
        gap: var(--space-s);
    }
    .campaign-composer .campaign-button { width: 100%; }
    .campaign-composer .seg-filters {
        grid-template-columns: minmax(0, 1fr);
        align-items: stretch;
        padding: var(--space-s);
    }
    .campaigns-workbench .seg-filter-group,
    .campaigns-workbench .seg-activity-row,
    .campaigns-workbench .seg-filter-group select {
        width: 100%;
        min-width: 0;
    }
    .campaigns-workbench .seg-activity-row { flex-wrap: wrap; }
    .campaigns-workbench .seg-filter-group input[type="number"] { width: min(12rem, 100%); }
    .campaigns-workbench .seg-count { margin-inline-start: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .campaign-type-card,
    .campaigns-workbench .subtab { transition-duration: 0ms; }
}

.campaign-type-card:hover {
        border-color: var(--color-primary, #0D9488) !important;
        box-shadow: 0 4px 12px rgba(13,148,136,0.1);
        transform: translateY(-2px);
    }
    
    .btn-back:hover {
        background: #E2E8F0 !important;
        color: var(--color-text-main) !important;
    }

    /* Sub-Tabs Notificaciones */
    .subtabs-container {
        display: inline-flex;
        background-color: var(--color-surface, #F1F5F9);
        padding: 0.25rem;
        border-radius: var(--radius-control, 8px);
        margin-bottom: 2rem;
        gap: 0.25rem;
    }

    .subtab {
        padding: 0.5rem 1.25rem;
        border-radius: var(--radius-control, 6px);
        font-size: var(--txt-s, 1.5rem);
        font-weight: 600;
        color: var(--color-text-muted, #64748B);
        cursor: pointer;
        transition: all 0.2s;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .subtab:hover:not(.active) {
        color: var(--color-text-main, #1E293B);
        background-color: rgba(0, 0, 0, 0.02);
    }

    .subtab.active {
        background-color: var(--color-primary, #0D9488);
        color: var(--color-text-on-primary, #FFFFFF);
        box-shadow: var(--shadow-soft, 0 1px 2px rgba(0,0,0,0.05));
    }

    .subcontent {
        display: none;
    }
    
    .subcontent.active {
        display: block;
    }

    /* Layout Notificaciones */
    .notif-layout {
        display: grid;
        grid-template-columns: 1fr 320px;
        gap: 2rem;
        align-items: start;
    }
    
    @media (max-width: 900px) {
        .notif-layout {
            grid-template-columns: 1fr;
        }
    }

    /* Smartphone Preview replaced with Card Preview */
    .pvw-card { width: 270px; margin: 0 auto; border-radius: 24px; position: sticky; top: 2rem; overflow: hidden; color: white; font-family: 'Roboto', 'Google Sans', sans-serif; background-color: #4285f4; box-shadow: 0 4px 7px 1px rgba(0,0,0,0.14), 0 3px 9px 2px rgba(0,0,0,0.12), 0 4px 4px -3px rgba(0,0,0,0.2); display: flex; flex-direction: column; transition: all 0.3s ease; }
    .pvw-header-top { display: flex; align-items: center; height: 48px; padding: 3px 6px 0; }
    .pvw-logo { width: 24px; height: 24px; border-radius: 50%; background: transparent; display: flex; align-items: center; justify-content: center; font-size: var(--txt-xs, 1.4rem); font-weight: 500; color: #444; overflow: hidden; flex-shrink: 0; margin-left: 6px; }
    .pvw-logo img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
    .pvw-card-title { font-size: var(--txt-s, 1.5rem); font-weight: 500; color: #ffffff; margin-left: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .pvw-divider { height: 1px; background-color: rgba(255, 255, 255, 0.08); margin: 0; }
    .pvw-identity { padding: 4px 12px 12px; }
    .pvw-program-name { font-size: var(--h3, 2.6rem); font-weight: 700; color: #ffffff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 8px; line-height: 1.2; }
    .pvw-subheader { font-size: var(--txt-xs, 1.4rem); color: rgba(255,255,255,0.85); font-weight: 400; line-height: 1.3; }
    .pvw-headerLabel { font-size: var(--txt-l, 2.1rem); font-weight: 500; color: white; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.3; }
    .pvw-qr-section { padding: 10px 0 24px 0; display: flex; flex-direction: column; align-items: center; background: transparent; border: none; margin: 0; position: relative; }
    .pvw-qr-container { background-color: #ffffff; border-radius: 12px; width: 138px; height: 138px; display: flex; align-items: center; justify-content: center; overflow: hidden; position: relative; }
    .pvw-qr-container img { width: 110px; height: 110px; object-fit: contain; opacity: 0.2; }
    .pvw-barcode-value { text-align: center; font-size: var(--txt-s, 1.5rem); color: #ffffff; margin-top: 8px; min-height: 14px; }
    
    /* Notification Overlay on Card */
    .pvw-notification-overlay {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(4px);
        z-index: 10;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 20px;
        text-align: center;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s ease;
    }
    .pvw-notification-overlay.active {
        opacity: 1;
    }
    .notif-bubble {
        background: white;
        border-radius: 16px;
        padding: 16px;
        box-shadow: 0 10px 25px rgba(0,0,0,0.1);
        width: 100%;
        max-width: 230px;
        text-align: left;
    }
    .notif-header {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 8px;
    }
    .notif-header-icon {
        width: 20px;
        height: 20px;
        border-radius: 4px;
        object-fit: cover;
    }
    .notif-header-title {
        font-size: var(--txt-xs, 1.4rem);
        font-weight: 600;
        color: #1E293B;
        flex: 1;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .notif-header-time {
        font-size: var(--txt-xs, 1.4rem);
        color: #64748B;
    }
    .notif-body-text {
        font-size: var(--txt-s, 1.5rem);
        color: #334155;
        line-height: 1.4;
        word-wrap: break-word;
    }
    
    /* Scrollable Client List */
    .client-list {
        border: 1px solid var(--color-border, #E2E8F0);
        border-radius: var(--radius-control, 8px);
        max-height: 250px;
        overflow-y: auto;
        margin-bottom: 1.5rem;
    }
    
    .client-list-item {
        padding: 10px 14px;
        display: flex;
        align-items: center;
        gap: 12px;
        border-bottom: 1px solid var(--color-border, #F1F5F9);
    }
    
    .client-list-item:last-child {
        border-bottom: none;
    }
    
    .client-list-item:hover {
        background-color: var(--color-surface, #F8FAFC);
    }
    
    .client-list-item label {
        cursor: pointer;
        flex: 1;
        font-size: var(--txt-s, 1.5rem);
        color: var(--color-text-main, #1E293B);
        display: flex;
        flex-direction: column;
    }

    .client-list-item label span.email {
        font-size: var(--txt-xs, 1.4rem);
        color: var(--color-text-muted, #64748B);
    }

    textarea.form-control {
        resize: vertical;
        min-height: 100px;
    }

    /* Filtros de segmentación */
    .seg-filters {
        background: var(--color-surface, #F8FAFC);
        border: 1px solid var(--color-border, #E2E8F0);
        border-radius: var(--radius-control, 8px);
        padding: 14px 16px;
        margin-bottom: 1rem;
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        align-items: flex-end;
    }
    .seg-filter-group {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }
    .seg-filter-group label {
        font-size: var(--txt-xs, 1.4rem);
        font-weight: 600;
        color: var(--color-text-muted, #64748B);
    }
    .seg-filter-group select,
    .seg-filter-group input[type="number"] {
        height: 34px;
        font-size: var(--txt-s, 1.5rem);
        border: 1px solid var(--color-border, #E2E8F0);
        border-radius: var(--radius-control, 6px);
        padding: 0 10px;
        background: white;
        color: var(--color-text-main, #1E293B);
        outline: none;
    }
    .seg-filter-group input[type="number"] {
        width: 72px;
    }
    .seg-activity-row {
        display: flex;
        align-items: center;
        gap: 6px;
    }
    .seg-count {
        font-size: var(--txt-xs, 1.4rem);
        color: var(--color-text-muted, #64748B);
        margin-left: auto;
        align-self: flex-end;
        padding-bottom: 2px;
        white-space: nowrap;
    }
    .btn-clear-filters {
        height: 34px;
        padding: 0 12px;
        font-size: var(--txt-xs, 1.4rem);
        font-weight: 600;
        border: 1px solid var(--color-border, #E2E8F0);
        border-radius: var(--radius-control, 6px);
        background: white;
        color: var(--color-text-muted, #64748B);
        cursor: pointer;
        transition: all 0.15s;
        align-self: flex-end;
    }
    .btn-clear-filters:hover {
        background: #F1F5F9;
        color: var(--color-text-main, #1E293B);
    }

    /* Chips de información en cada cliente */
    .client-chips {
        display: flex;
        gap: 6px;
        margin-top: 3px;
        flex-wrap: wrap;
    }
    .client-chip {
        display: inline-flex;
        align-items: center;
        gap: 3px;
        font-size: 1.15rem;
        color: var(--color-text-muted, #64748B);
        background: var(--color-surface, #F1F5F9);
        border-radius: 100px;
        padding: 1px 7px;
        font-weight: 500;
        line-height: 1.6;
    }
    .client-chip svg {
        flex-shrink: 0;
        opacity: 0.7;
    }

/* cards/builder.html */
/* ── Wizard Nav ── */
.field-tooltip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #e2e8f0;
    color: #64748b;
    font-size: var(--txt-xs, 1.4rem);
    font-weight: bold;
    cursor: help;
    margin-left: 6px;
    vertical-align: middle;
}
.form-wizard-card {
    padding: 0 !important;
    overflow: visible; /* Fixed tooltip overflow issue */
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05), 0 2px 4px -2px rgba(0,0,0,0.05);
}
.step-wizard-nav {
    display: flex;
    background: #fafaf9;
    border-bottom: 1px solid var(--color-border);
}
.step-tab {
    flex: 1;
    padding: 16px 8px;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    font-size: var(--txt-s, 1.5rem);
    font-weight: 500;
    color: var(--color-text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s;
    outline: none;
}
.step-tab:hover {
    color: var(--color-text-main);
    background: rgba(0,0,0,0.02);
}
.step-tab.active {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
    background: #fff;
}
.wizard-step {
    display: none;
    animation: fadeIn 0.3s ease-out;
}
.wizard-step.active {
    display: block;
}
.wizard-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid var(--color-border);
}

/* ── Toggle buttons ── */
.preview-toggle-container {
    display: flex; justify-content: center; gap: 1rem;
}
.preview-toggle-btn {
    padding: 0.5rem 1rem;
    border: 1px solid var(--color-border);
    background: var(--color-bg, #fff);
    border-radius: 20px; cursor: pointer;
    font-size: var(--txt-s, 1.5rem); font-weight: 500;
    transition: all 0.2s;
    display: flex; align-items: center; gap: 0.5rem;
}
.preview-toggle-btn.active {
    background: var(--color-primary, #0D9488);
    color: white; border-color: var(--color-primary, #0D9488);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* ── Containers ── */
.preview-container { display: none; justify-content: center; overflow: visible; padding-bottom: 24px; }
.preview-container.active {
    display: flex;
    animation: fadeIn 0.3s ease-out;
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

/*
 * ─────────────────────────────────────────
 * PHONE SHELL TOKENS  (native sizing, no transform:scale)
 * Original Android body: 360 × 740px
 * Original iPhone  body: 340 × 700px
 * ─────────────────────────────────────────
 */
:root {
    /* Android shell */
    --sh-and-w:  162px;   /* 360 × 0.45 */
    --sh-and-h:  333px;   /* 740 × 0.45 */
    --sh-and-r:   19px;   /*  42 × 0.45 */
    --sh-and-scr-r: 16px; /*  36 × 0.45 */
    --sh-and-inset:  3px; /*   6 × 0.45 */
    /* Android buttons */
    --sh-and-btn-w: 2px;
    --sh-and-pwr-top:  63px;  --sh-and-pwr-h:  31px;
    --sh-and-vup-top:  45px;  --sh-and-vup-h:  22px;
    --sh-and-vdn-top:  72px;  --sh-and-vdn-h:  22px;
    /* Android screen internals */
    --sh-and-cam-top:  6px;  --sh-and-cam-sz:   5px;
    --sh-and-sb-pt:    7px;  /* status-bar padding-top */

    /* iPhone shell */
    --sh-iph-w:  153px;   /* 340 × 0.45 */
    --sh-iph-h:  315px;   /* 700 × 0.45 */
    --sh-iph-r:   24px;   /*  54 × 0.45 */
    --sh-iph-scr-r: 21px; /*  46 × 0.45 */
    --sh-iph-inset:  4px; /*   8 × 0.45 */
    /* iPhone buttons */
    --sh-iph-btn-w: 2px;
    --sh-iph-vup-top: 50px;  --sh-iph-vup-h:  13px;
    --sh-iph-vdn-top: 72px;  --sh-iph-vdn-h:  25px;
    --sh-iph-mut-top: 101px; --sh-iph-mut-h:  25px;
    --sh-iph-pwr-top:  79px; --sh-iph-pwr-h:  43px;
    /* iPhone screen internals */
    --sh-iph-di-w:  50px; --sh-iph-di-h: 14px; /* Dynamic Island */
    --sh-iph-sb-h:  22px; /* status-bar height */
    --sh-iph-hi-w:  59px; --sh-iph-hi-h:  2px; /* home indicator */
}

/* ── Card frame (no phone shell) ── */
.card-frame {
    width: 100%;
    padding: 8px;
    border-radius: 20px;
    background: transparent;
    display: flex;
    flex-direction: column;
    align-items: center;
}
/* Card fills the frame */
.card-frame .pvw-card {
    /* Eliminado para evitar estirar la tarjeta verticalmente en monitores anchos */
}

/* ══════════════════════════════════
   ANDROID — native tokenized
══════════════════════════════════ */
.preview-android .android {
    position: relative; z-index: 10; display: inline-block;
}
.preview-android .android__body {
    position: relative;
    width: var(--sh-and-w); height: var(--sh-and-h);
    background-color: #1a1a1a;
    border-radius: var(--sh-and-r);
    box-shadow:
        inset 0 0 0 1px #333, inset 0 0 0 4px #0a0a0a,
        0 0 0 1px #000, 10px 10px 30px rgba(0,0,0,0.4);
}
.preview-android .android__gloss {
    position: absolute; inset: 0;
    border-radius: var(--sh-and-r);
    border: 0.5px solid rgba(255,255,255,0.05); pointer-events: none;
}
.preview-android .android__button {
    position: absolute; width: var(--sh-and-btn-w);
    background: linear-gradient(90deg, #0a0a0a, #1a1a1a);
    border-top: 0.5px solid #000; border-bottom: 0.5px solid #000;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.6);
}
.preview-android .android__button--power {
    top: var(--sh-and-pwr-top); right: calc(-1 * var(--sh-and-btn-w));
    height: var(--sh-and-pwr-h); border-radius: 0 2px 2px 0;
}
.preview-android .android__button--volume-up {
    top: var(--sh-and-vup-top); left: calc(-1 * var(--sh-and-btn-w));
    height: var(--sh-and-vup-h); border-radius: 2px 0 0 2px;
}
.preview-android .android__button--volume-down {
    top: var(--sh-and-vdn-top); left: calc(-1 * var(--sh-and-btn-w));
    height: var(--sh-and-vdn-h); border-radius: 2px 0 0 2px;
}
.preview-android .android__screen-wrapper {
    position: absolute; inset: var(--sh-and-inset);
    background-color: #000; border-radius: var(--sh-and-scr-r); overflow: hidden;
}
.preview-android .android__screen {
    width: 100%; height: 100%;
    background-color: #f5f5f5; position: relative;
    overflow: hidden; font-family: 'Roboto', sans-serif;
}
.preview-android .status-bar {
    position: absolute; top: 0; width: 100%;
    background: linear-gradient(180deg, rgba(0,0,0,0.35) 0%, transparent 100%);
    z-index: 30; display: flex; justify-content: space-between;
    align-items: center; padding: var(--sh-and-sb-pt) 7px 0; pointer-events: none;
}
.preview-android .status-bar__time { font-size: calc(var(--txt-xs, 1.4rem) * 0.43); font-weight: 600; color: #1a1a1a; }
.preview-android .status-bar__battery {
    width: 9px; height: 5px; border: 1px solid #1a1a1a;
    border-radius: 1px; padding: 1px; opacity: 0.8;
}
.preview-android .status-bar__battery-level {
    width: 100%; height: 100%; background-color: #1a1a1a; border-radius: 0.5px;
}
.preview-android .camera-cutout {
    position: absolute; top: var(--sh-and-cam-top);
    left: 50%; transform: translateX(-50%);
    width: var(--sh-and-cam-sz); height: var(--sh-and-cam-sz);
    background-color: #000; border-radius: 50%; z-index: 40;
    box-shadow: 0 0 0 0.5px rgba(255,255,255,0.1), inset 0 0.5px 1px rgba(0,0,0,0.8);
}
.preview-android .camera-cutout__lens {
    width: 100%; height: 100%;
    background: radial-gradient(circle, #1a1a2e 0%, #0a0a0a 100%); border-radius: 50%;
}
.preview-android .screen-content {
    width: 100%; height: 100%; overflow-y: auto;
    padding-top: 18px; padding-bottom: 10px;
}
.preview-android .screen-content::-webkit-scrollbar { display: none; }
.preview-android .screen-content__inner {
    width: 100%; min-height: 100%;
    background-color: #f5f5f5; display: flex;
    flex-direction: column; align-items: center;
    padding-top: 10px; position: relative; overflow: hidden;
}

/* ══════════════════════════════════
   IPHONE — native tokenized
══════════════════════════════════ */
.preview-iphone .iphone {
    position: relative; z-index: 10; display: inline-block;
}
.preview-iphone .iphone__body {
    position: relative;
    width: var(--sh-iph-w); height: var(--sh-iph-h);
    background-color: #292524;
    border-radius: var(--sh-iph-r);
    box-shadow:
        inset 0 0 1px 1px #444, inset 0 0 0 3px #1c1c1c,
        0 0 0 1px #000, 10px 10px 25px rgba(0,0,0,0.3);
}
.preview-iphone .iphone__gloss {
    position: absolute; inset: 0; border-radius: var(--sh-iph-r);
    border: 0.5px solid rgba(255,255,255,0.1); pointer-events: none;
}
.preview-iphone .iphone__button {
    position: absolute; width: var(--sh-iph-btn-w); background-color: #57534e;
    border-top: 0.5px solid #1c1917; border-bottom: 0.5px solid #1c1917;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.5);
}
.preview-iphone .iphone__button--volume-up {
    top: var(--sh-iph-vup-top); left: calc(-1 * var(--sh-iph-btn-w));
    height: var(--sh-iph-vup-h); border-radius: 1px 0 0 1px;
}
.preview-iphone .iphone__button--volume-down {
    top: var(--sh-iph-vdn-top); left: calc(-1 * var(--sh-iph-btn-w));
    height: var(--sh-iph-vdn-h); border-radius: 1px 0 0 1px;
}
.preview-iphone .iphone__button--mute {
    top: var(--sh-iph-mut-top); left: calc(-1 * var(--sh-iph-btn-w));
    height: var(--sh-iph-mut-h); border-radius: 1px 0 0 1px;
}
.preview-iphone .iphone__button--power {
    top: var(--sh-iph-pwr-top); right: calc(-1 * var(--sh-iph-btn-w));
    height: var(--sh-iph-pwr-h); border-radius: 0 1px 1px 0;
}
.preview-iphone .iphone__screen-wrapper {
    position: absolute; inset: var(--sh-iph-inset);
    background-color: #000; border-radius: var(--sh-iph-scr-r); overflow: hidden;
}
.preview-iphone .iphone__screen {
    width: 100%; height: 100%; background-color: #F2F2F7;
    position: relative; overflow: hidden;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.preview-iphone .status-bar {
    position: absolute; top: 0; width: 100%; height: var(--sh-iph-sb-h);
    z-index: 30; display: flex; justify-content: space-between;
    align-items: center; padding: 0 14px; pointer-events: none;
}
.preview-iphone .status-bar__time { font-size: calc(var(--txt-xs, 1.4rem) * 0.43); font-weight: 700; color: #000; padding-top: 2px; }
.preview-iphone .status-bar__battery {
    width: 10px; height: 5px; border: 1px solid rgba(0,0,0,0.3);
    border-radius: 1.5px; padding: 1px; position: relative; margin-top: 2px;
}
.preview-iphone .status-bar__battery-level {
    width: 7px; height: 100%; background-color: #000; border-radius: 0.5px;
}
.preview-iphone .dynamic-island {
    position: absolute; top: 5px; left: 50%; transform: translateX(-50%);
    width: var(--sh-iph-di-w); height: var(--sh-iph-di-h);
    background-color: #000; border-radius: 9999px; z-index: 40;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}
.preview-iphone .dynamic-island__camera {
    width: 5px; height: 5px; background-color: #0a0a0a;
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
}
.preview-iphone .dynamic-island__camera-lens {
    width: 2px; height: 2px; background-color: #1a1a2e;
    border-radius: 50%; filter: blur(0.5px);
}
.preview-iphone .screen-content {
    width: 100%; height: 100%; overflow-y: auto;
    padding-top: var(--sh-iph-sb-h); padding-bottom: 14px;
}
.preview-iphone .screen-content::-webkit-scrollbar { display: none; }
.preview-iphone .screen-content__inner {
    width: 100%; min-height: 100%; background-color: #F2F2F7;
    display: flex; flex-direction: column;
    align-items: center; padding-top: 14px;
    position: relative; overflow: hidden;
}
.preview-iphone .home-indicator {
    position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%);
    width: var(--sh-iph-hi-w); height: var(--sh-iph-hi-h);
    background-color: rgba(0,0,0,0.9); border-radius: 9999px; z-index: 30;
}

/* ── Preview Card (Google Wallet Generic Match) ── */
.pvw-card {
    width: 270px;
    margin: 0 auto;
    border-radius: 24px;
    position: relative;
    overflow: hidden;
    color: white;
    font-family: 'Roboto', 'Google Sans', sans-serif;
    background-color: #4285f4;
    box-shadow: 0 4px 7px 1px rgba(0,0,0,0.14), 0 3px 9px 2px rgba(0,0,0,0.12), 0 4px 4px -3px rgba(0,0,0,0.2);
    display: flex;
    flex-direction: column;
}

/* Header Area (Logo + Card Title) */
.pvw-header-top {
    display: flex;
    align-items: center;
    height: 44px;
    padding: 5px 8px 0;
}
.pvw-logo {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--txt-xs, 1.4rem);
    font-weight: 500;
    color: #444;
    overflow: hidden;
    flex-shrink: 0;
    margin-left: 6px;
}
.pvw-logo img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.pvw-card-title {
    font-size: 1.28rem;
    font-weight: 500;
    color: #ffffff;
    margin-left: 11px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* programName: Campaign name, shown as large text right below the divider */
.pvw-program-name {
    font-size: var(--h3, 2.6rem);
    font-weight: 500;
    color: #ffffff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 18px;
    line-height: 1.2;
}

/* Divider */
.pvw-divider {
    height: 1px;
    background-color: rgb(255 255 255 / 15%);
    margin: 0;
}

/* User Identity Area (Subheader + Header) */
.pvw-identity {
    padding: 12px 12px 12px;
}
.pvw-subheader {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.85);
    font-weight: 400;
    line-height: 1.3;
}
.pvw-headerLabel {
    font-size: 15px;
    font-weight: 400;
    color: white;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

/* Modules Area (Sellos / Puntos) */
.pvw-modules {
    display: flex;
    justify-content: space-between;
    padding: 6px 12px;
}
.pvw-module-item {
    display: flex;
    flex-direction: column;
}
.pvw-module-label {
    font-size: var(--txt-xs, 1.4rem);
    font-weight: 500;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.9);
    padding: 6px 0 0;
}
.pvw-module-value {
    font-size: var(--txt-s, 1.5rem);
    font-weight: 500;
    color: #ffffff;
    padding: 0 0 6px;
}

/* QR Code Section */
.pvw-qr-section {
    padding: 5px 0 15px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: transparent;
    border: none;
    margin: 0;
}
.pvw-qr-container {
    background-color: #ffffff;
    border-radius: 11px;
    width: 124px;
    height: 124px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.pvw-qr-container img {
    width: 102px;
    height: 102px;
    object-fit: contain;
}
.pvw-barcode-value {
    text-align: center;
    font-size: 1.18rem;
    font-weight: 600;
    color: #ffffff;
    margin-top: 10px;
    min-height: 14px;
}

/* Hero Image Bottom */
.pvw-hero-container {
    width: 100%;
    display: flex;
    justify-content: center;
}
.pvw-hero-container img, .pvw-hero-container canvas {
    width: 100%;
    border-radius: 0 0 24px 24px;
    margin-top: -1px;
    object-fit: cover;
    display: block;
}
.preview-iphone .pvw-card {
    background-color: #fff;
    border-radius: 20px;
    box-shadow: none;
    transform: scale(1.01) translateX(-1px) translateY(-12px);
    color: #1c1917;
}
.preview-iphone .pvw-card__head {
    background-color: #fff;
    border-bottom: 1px solid #fafaf9;
}
.preview-iphone .pvw-card__logo {
    background-color: #fafaf9;
    border: 1px dashed #d6d3d1;
}
.preview-iphone .pvw-card__brand { color: #1c1917; font-size: var(--txt-s, 1.5rem); font-weight: 700; }
.preview-iphone .pvw-card__program { color: #a8a29e; font-size: var(--txt-xs, 1.4rem); opacity: 1; }
.preview-iphone .pvw-card__body   { background: #fff; padding: 16px; }
.preview-iphone .pvw-points__val   { color: #1c1917; }
.preview-iphone .pvw-points__label { color: #a8a29e; opacity: 1; }
.preview-iphone .pvw-discount__pct { color: #1c1917; }
.preview-iphone .pvw-discount__label { color: #a8a29e; opacity: 1; }
.preview-iphone .pvw-stamp--filled { background: linear-gradient(135deg, #fb923c 0%, #f97316 100%); color: #fff; }
.preview-iphone .pvw-stamp--empty  { background: #F2F2F7; border: 1px solid rgba(0,0,0,0.08); }
.preview-iphone .pvw-qr__bg { background: #fafaf9; border: 1px solid #f5f5f4; }

/* form-control */

/* cards/list.html */
/* ─── Page layout ─── */
    .cards-page { display: flex; flex-direction: column; gap: 0; }

    .cards-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .cards-header h2 {
        font-size: var(--h4, 2rem);
        font-weight: 700;
        color: var(--color-text-main, #1E293B);
        margin: 0;
    }
    .cards-header p {
        font-size: var(--txt-s, 1.5rem);
        color: var(--color-text-muted, #64748B);
        margin: 4px 0 0;
    }

    /* ── Card grid ── */
    .card-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        gap: 2rem;
        align-items: start;
    }

    /* ─── Preview Card (Google Wallet Generic Match) ─── */
    .pvw-card {
        width: 100%;
        max-width: 290px;
        margin: 0 auto;
        border-radius: 24px;
        position: relative;
        overflow: hidden;
        color: white;
        font-family: 'Roboto', 'Google Sans', sans-serif;
        background-color: #4285f4;
        box-shadow: 0 4px 7px 1px rgba(0,0,0,0.14), 0 3px 9px 2px rgba(0,0,0,0.12), 0 4px 4px -3px rgba(0,0,0,0.2);
        display: flex;
        flex-direction: column;
        transition: transform 0.2s, box-shadow 0.2s;
        cursor: pointer;
        text-decoration: none;
    }
    .pvw-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 8px 15px 2px rgba(0,0,0,0.15), 0 6px 20px 5px rgba(0,0,0,0.1), 0 8px 8px -4px rgba(0,0,0,0.2);
    }

    /* Header Area (Logo + Card Title) */
    .pvw-header-top {
        display: flex;
        align-items: center;
        height: 48px;
        padding: 3px 6px 0;
    }
    .pvw-logo {
        width: 24px;
        height: 24px;
        border-radius: 50%;
        background: transparent;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: var(--txt-xs, 1.4rem);
        font-weight: 500;
        color: #444;
        overflow: hidden;
        flex-shrink: 0;
        margin-left: 6px;
    }
    .pvw-logo img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
    .pvw-card-title {
        font-size: var(--txt-s, 1.5rem);
        font-weight: 500;
        color: #ffffff;
        margin-left: 12px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Divider */
    .pvw-divider {
        height: 1px;
        background-color: rgba(255, 255, 255, 0.08);
        margin: 0;
    }

    /* User Identity Area (programName + Subheader + Header) */
    .pvw-identity {
        padding: 4px 12px 12px;
    }
    .pvw-program-name {
        font-size: var(--h3, 2.6rem);
        font-weight: 700;
        color: #ffffff;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        margin-bottom: 8px;
        line-height: 1.2;
    }
    .pvw-subheader {
        font-size: var(--txt-xs, 1.4rem);
        color: rgba(255,255,255,0.85);
        font-weight: 400;
        line-height: 1.3;
    }
    .pvw-headerLabel {
        font-size: var(--txt-s, 1.6rem);
        font-weight: 500;
        color: white;
        margin-top: 2px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        line-height: 1.3;
    }

    /* Modules Area (Sellos / Puntos) */
    .pvw-modules {
        display: flex;
        justify-content: space-between;
        padding: 6px 12px;
    }
    .pvw-module-item {
        display: flex;
        flex-direction: column;
    }
    .pvw-module-label {
        font-size: var(--txt-xs, 1.4rem);
        font-weight: 500;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.9);
        padding: 6px 0 0;
    }
    .pvw-module-value {
        font-size: var(--txt-s, 1.5rem);
        font-weight: 500;
        color: #ffffff;
        padding: 0 0 6px;
    }

    /* QR Code Section */
    .pvw-qr-section {
        padding: 10px 0 24px 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        background: transparent;
        border: none;
        margin: 0;
    }
    .pvw-qr-container {
        background-color: #ffffff;
        border-radius: 12px;
        width: 138px;
        height: 138px;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
    }
    .pvw-qr-container img {
        width: 110px;
        height: 110px;
        object-fit: contain;
    }
    .pvw-barcode-value {
        text-align: center;
        font-size: var(--txt-s, 1.5rem);
        color: #ffffff;
        margin-top: 8px;
        min-height: 14px;
    }

    /* Hero Image Bottom */
    .pvw-hero-container {
        width: 100%;
        display: flex;
        justify-content: center;
    }
    .pvw-hero-container img, .pvw-hero-container canvas {
        width: 100%;
        border-radius: 0 0 24px 24px;
        margin-top: -1px;
        object-fit: cover;
        display: block;
    }

    /* Meta row (status + links) */
    .card-wrap {
        display: flex;
        flex-direction: column;
        gap: 12px;
        width: 100%;
        max-width: calc(var(--width-s) + var(--space-s));
        margin-inline: auto;
    }
    .loyalty-card__actions {
        display: flex;
        gap: 8px;
    }
    .card-meta-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        min-height: 4.4rem;
        margin-top: var(--space-xs);
        padding: var(--space-2xs) 0 0;
    }
    .card-meta-links {
        display: flex;
        gap: 12px;
        align-items: center;
    }
    .card-meta-delete,
    .cards-table__link-btn {
        background: none;
        border: none;
        padding: 0;
        margin: 0;
        color: var(--color-text-main, #1E293B);
        font-size: var(--txt-xs, 1.4rem);
        font-family: inherit;
        font-weight: 600;
        line-height: 1;
        cursor: pointer;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 1.6rem;
    }
    .card-meta-delete {
        color: var(--color-error, #EF4444);
    }
    .card-meta-delete:hover,
    .cards-table__link-btn:hover,
    .loyalty-card__edit-link:hover {
        text-decoration: underline;
    }
    .loyalty-card__meta-status {
        font-size: var(--txt-xs, 1.4rem);
        font-weight: 600;
        display: flex;
        align-items: center;
        gap: 5px;
    }
    .loyalty-card__meta-status .dot {
        width: 7px;
        height: 7px;
        border-radius: 50%;
    }
    .loyalty-card__edit-link {
        font-size: var(--txt-xs, 1.4rem);
        font-weight: 600;
        color: var(--color-primary, #0D9488);
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 1.6rem;
        line-height: 1;
    }

    .cards-table__actions-form,
    .card-meta-links form {
        margin: 0;
        display: inline-flex;
        align-items: center;
    }

    /* Action Buttons */
    .loyalty-card__actions {
        display: flex;
        gap: 8px;
    }
    
    .btn-wallet-share {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        flex: 1; /* Allow stretching alongside the icon icon */
        background-color: var(--color-primary-hover, #0f172a);
        color: #fff;
        border: none;
        padding: 8px 12px;
        border-radius: 8px;
        font-size: var(--txt-s, 1.5rem);
        font-weight: 600;
        cursor: pointer;
        text-decoration: none;
        transition: background 0.2s, transform 0.1s;
    }
    .btn-wallet-share:hover {
        background-color: #1e293b;
        color: #fff;
    }
    .btn-wallet-share:active {
        transform: scale(0.98);
    }

    .btn-copy-link {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        padding: 0;
        background-color: var(--color-surface, #f8fafc);
        color: var(--color-text-main, #334155);
        border: 1px solid var(--color-border, #e2e8f0);
        border-radius: 8px;
        cursor: pointer;
        transition: all 0.2s;
        flex-shrink: 0;
    }
    .btn-copy-link:hover {
        background-color: #e2e8f0;
        color: #0f172a;
    }
    .btn-copy-link:active {
        transform: scale(0.95);
    }
    
    /* Loading Spinner */
    .spinner {
        display: none;
        width: 14px;
        height: 14px;
        border: 2px solid rgba(255,255,255,0.3);
        border-radius: 50%;
        border-top-color: #fff;
        animation: spin 1s ease-in-out infinite;
    }
    @keyframes spin {
        to { transform: rotate(360deg); }
    }

    /* ─── Empty state — Type picker ─── */
    .type-picker {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap: 1.5rem;
        margin-top: 1rem;
    }

    .type-card {
        border: 2px solid var(--color-border, #CFFAFE);
        border-radius: var(--outer-border, 20px);
        overflow: hidden;
        cursor: pointer;
        text-decoration: none;
        display: block;
        transition: border-color var(--transition-base), box-shadow var(--transition-base), transform var(--transition-base);
        background: var(--color-surface, #F0FDFA);
    }
    .type-card:hover {
        border-color: var(--color-primary, #0D9488);
        box-shadow: var(--shadow-teal, 0 8px 24px rgba(13,148,136,0.35));
        transform: translateY(-3px);
    }

    .type-card__preview {
        height: 130px;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        overflow: hidden;
    }
    .type-card__preview svg.bg-icon {
        position: absolute;
        opacity: 0.12;
        width: 120px;
        height: 120px;
    }
    .type-card__preview .main-icon {
        position: relative;
        z-index: 1;
    }

    .type-card__body {
        padding: 1.25rem;
        border-top: 1px solid var(--color-border, #CFFAFE);
    }
    .type-card__body h3 {
        margin: 0 0 6px;
        font-size: var(--txt-m, 1.7rem);
        font-weight: 700;
        color: var(--color-text-main, #1E293B);
    }
    .type-card__body p {
        margin: 0;
        font-size: var(--txt-s, 1.5rem);
        color: var(--color-text-muted, #64748B);
        line-height: 1.5;
    }

    .empty-headline {
        text-align: center;
        margin-bottom: 2rem;
    }
    .empty-headline h3 {
        font-size: var(--h3, 2.6rem);
        font-weight: 700;
        color: var(--color-text-main, #1E293B);
        margin: 0 0 8px;
    }
    .empty-headline p {
        font-size: var(--txt-s, 1.5rem);
        color: var(--color-text-muted, #64748B);
        margin: 0;
    }

    .btn-add {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        background: var(--color-primary, #0D9488);
        color: var(--color-text-on-primary, #FFFFFF);
        font-weight: 600;
        font-size: var(--txt-s, 0.875rem);
        padding: 10px 20px;
        border-radius: var(--radius-pill, 9999px);
        text-decoration: none;
        transition: background var(--transition-base);
        box-shadow: var(--shadow-teal);
    }
    .btn-add:hover { background: var(--color-primary-hover, #0F766E); }

    /* ─── Coming soon ribbon ─── */
    .type-card--soon {
        position: relative;
        pointer-events: none;
        opacity: 0.72;
        filter: grayscale(1);
    }
    .type-card--soon:hover {
        transform: none;
        box-shadow: none;
        border-color: var(--color-border, #CFFAFE);
    }
    .ribbon {
        position: absolute;
        top: 18px;
        right: -38px;
        width: 150px;
        text-align: center;
        background: #1E293B;
        color: #fff;
        font-size: var(--txt-xs, 1.4rem);
        font-weight: 700;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        padding: 5px 0;
        transform: rotate(35deg);
        z-index: 10;
        box-shadow: 0 2px 6px rgba(0,0,0,0.3);
    }

    /* ─── Modal de tipo de campaña ─── */
    .modal-overlay {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(15, 23, 42, 0.55);
        backdrop-filter: blur(4px);
        z-index: 1000;
        align-items: center;
        justify-content: center;
        padding: 1rem;
    }
    .modal-overlay.is-open {
        display: flex;
    }
    .modal-box {
        background: var(--color-bg, #ffffff);
        border-radius: 20px;
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18);
        width: 100%;
        max-width: 680px;
        padding: 2rem;
        position: relative;
        animation: modalIn 0.22s ease;
    }
    @keyframes modalIn {
        from { opacity: 0; transform: scale(0.95) translateY(10px); }
        to   { opacity: 1; transform: scale(1) translateY(0); }
    }
    .modal-header {
        text-align: center;
        margin-bottom: 1.75rem;
    }
    .modal-header h3 {
        font-size: var(--h4, 2rem);
        font-weight: 700;
        color: var(--color-text-main, #1E293B);
        margin: 0 0 6px;
    }
    .modal-header p {
        font-size: var(--txt-s, 1.5rem);
        color: var(--color-text-muted, #64748B);
        margin: 0;
    }
    .cards-table {
        width: 100%;
        text-align: left;
        border-collapse: collapse;
        margin-top: 16px;
    }
    .cards-table__row {
        border-bottom: 1px solid var(--color-border);
        transition: background-color 0.2s;
    }
    .cards-table__row:hover {
        background-color: var(--color-surface-soft);
    }
    .cards-table__cell {
        padding: 12px 0;
    }
    .cards-table__actions {
        text-align: right;
        padding-right: 12px;
    }
    .cards-table__actions-inner {
        display: flex;
        justify-content: flex-end;
        gap: 8px;
        align-items: center;
    }
    .cards-table__link {
        color: var(--color-text-muted);
        text-decoration: none;
        font-weight: 500;
        font-size: var(--txt-s, 1.5rem);
        margin-left: 8px;
    }
    .cards-table__delete {
        color: #ef4444;
        background: none;
        border: none;
        padding: 0;
        font-weight: 500;
        font-size: var(--txt-s, 1.5rem);
        cursor: pointer;
    }
    .cards-table__status-pill {
        display: inline-block;
        font-size: var(--txt-xs, 1.4rem);
        padding: 2px 6px;
        border-radius: 99px;
        transition: opacity 0.2s;
    }
    .cards-table__status-pill--active {
        color: var(--color-success);
        border: 1px solid var(--color-success);
    }
    .cards-table__status-pill--inactive {
        color: var(--color-text-muted);
        border: 1px solid var(--color-text-muted);
    }
    .type-card__preview-copy {
        text-align: center;
    }
    .type-card__preview-value {
        font-size: var(--h1, 4.8rem);
        font-weight: 800;
        color: white;
        text-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
    }
    .type-card__preview-value--modal {
        font-size: var(--titulo, 5.6rem);
    }
    .type-card__preview-label {
        font-size: var(--txt-xs, 1.4rem);
        color: rgba(255, 255, 255, 0.9);
        margin-top: 4px;
        font-weight: 600;
        letter-spacing: 0.04em;
    }
    .modal-close {
        position: absolute;
        top: 1rem;
        right: 1rem;
        background: none;
        border: none;
        cursor: pointer;
        color: var(--color-text-muted, #64748B);
        padding: 4px;
        border-radius: 6px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: background 0.15s, color 0.15s;
    }
    .modal-close:hover {
        background: var(--color-border, #e2e8f0);
        color: var(--color-text-main, #1E293B);
    }
    .modal-type-picker {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
        gap: 1.25rem;
    }
    .cards-table__head-row { border-bottom: 1px solid var(--color-border); color: var(--color-text-muted); }
    .cards-table__head-actions { text-align: right; }
    .card-toggle-form { margin: 0; display: inline-flex; }
    .card-toggle-button { background: none; border: none; padding: 0; cursor: pointer; }
    .btn-copy-link--compact { width: 32px; height: 32px; }
    .pvw-logo__placeholder { width: 100%; height: 100%; border-radius: 50%; }
    .pvw-module-item--right { text-align: right; }
    .pvw-hero-image { height: 120px; width: 100%; object-fit: cover; border-radius: 0 0 24px 24px; display: block; margin-top: -1px; }
    .pvw-hero-empty { height: 120px; width: 100%; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.1); color: white; border-radius: 0 0 24px 24px; margin-top: -1px; }
    .loyalty-card__meta-status { display: inline-flex; padding: 4px 8px; border-radius: 99px; border: 1px solid; transition: opacity 0.2s; }
    .loyalty-card__meta-status:hover { opacity: 0.7; }
    .loyalty-card__meta-status--active { color: #16a34a; background: #f0fdf4; border-color: #bbf7d0; }
    .loyalty-card__meta-status--inactive { color: #dc2626; background: #fef2f2; border-color: #fecaca; }
    .loyalty-card__meta-status .dot { background: currentColor; }
    .loyalty-card__meta-status-text { color: currentColor; font-weight: 500; }
    .type-card__preview--stamps { background: linear-gradient(135deg, #F97316 0%, #FBBF24 100%); }
    .type-card__preview--discount { background: linear-gradient(135deg, #7c3aed 0%, #a78bfa 100%); }
    .type-card__preview--points { background: linear-gradient(135deg, #0891b2 0%, #38bdf8 100%); }
    .main-icon--stamp-grid { display: flex; gap: 6px; flex-wrap: wrap; width: 100px; justify-content: center; }
    .main-icon--stamp-grid-modal { width: 90px; }
    .pvw-hero-canvas { width: 100%; display: block; }
    .spinner--visible { display: inline-block; margin-right: 6px; }
    .download-status { font-size: var(--txt-xs, 1.4rem); }
    .download-link-hidden { display: none; }

/* cards/test_scan.html */
.scan-page { max-width: 620px; margin: 0 auto; display: flex; flex-direction: column; gap: 20px; }
.scan-title { text-align: center; }
.scan-title h1 { font-size: var(--h3, 2.6rem); font-weight: 700; margin: 0 0 4px; color: var(--color-text-main); }
.scan-title p  { font-size: var(--txt-s, 1.5rem); color: var(--color-text-muted); margin: 0; }

/* search box */
.scan-search { background: #fff; border-radius: 14px; padding: 20px; border: 1px solid var(--color-border); box-shadow: 0 1px 4px rgba(0,0,0,0.05); }
.scan-search form { display: flex; gap: 10px; }
.scan-search input { flex: 1; padding: 12px 14px; font-size: var(--txt-m, 1.7rem); border-radius: 10px; border: 1px solid var(--color-border); outline: none; font-family: monospace; }
.scan-search input:focus { border-color: var(--color-primary); box-shadow: 0 0 0 2px rgba(13,148,136,0.15); }
.btn-scan { padding: 12px 22px; border-radius: 10px; background: var(--color-primary); color: #fff; font-weight: 600; font-size: var(--txt-s, 1.5rem); border: none; cursor: pointer; transition: background 0.2s; white-space: nowrap; }
.btn-scan:hover { background: var(--color-primary-hover, #0f766e); }

/* card info */
.card-info { background: #fff; border-radius: 14px; border: 1px solid var(--color-border); box-shadow: 0 1px 4px rgba(0,0,0,0.05); overflow: hidden; }
.card-info__header { display: flex; align-items: center; gap: 14px; padding: 18px 20px; border-bottom: 1px solid var(--color-border); }
.avatar { width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: var(--txt-l, 2.1rem); font-weight: 700; flex-shrink: 0; background: var(--color-primary-light, #ccfbf1); color: var(--color-primary); }
.card-info__meta { display: grid; grid-template-columns: 1fr 1fr; gap: 0; padding: 12px 20px 16px; }
.meta-item { display: flex; flex-direction: column; padding: 8px 0; }
.meta-item:not(:last-child) { border-bottom: 1px dashed var(--color-border); }
.meta-item + .meta-item { padding-left: 14px; border-left: 1px dashed var(--color-border); border-bottom: none; }
.meta-label { font-size: var(--txt-xs, 1.4rem); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-muted); margin-bottom: 4px; }
.meta-value { font-size: var(--txt-m, 1.7rem); font-weight: 600; color: var(--color-text-main); }
.badge { display: inline-block; padding: 2px 10px; border-radius: 20px; font-size: var(--txt-xs, 1.4rem); font-weight: 700; }
.badge--active   { background: #dcfce7; color: #166534; }
.badge--inactive { background: #fef2f2; color: #991b1b; }
.badge--stamps   { background: #fef3c7; color: #92400e; }
.badge--points   { background: #e0f2fe; color: #075985; }
.badge--discount { background: #f3e8ff; color: #6b21a8; }

/* action panel */
.action-panel { background: #fff; border-radius: 14px; border: 1px solid var(--color-border); box-shadow: 0 1px 4px rgba(0,0,0,0.05); overflow: hidden; }
.action-panel__header { padding: 16px 20px; border-bottom: 1px solid var(--color-border); display: flex; align-items: center; gap: 10px; }
.action-panel__header .type-icon { font-size: var(--h3, 2.6rem); }
.action-panel__header h3 { margin: 0; font-size: var(--txt-m, 1.7rem); font-weight: 700; color: var(--color-text-main); }
.action-panel__header p  { margin: 0; font-size: var(--txt-xs, 1.4rem); color: var(--color-text-muted); }
.action-panel__body { padding: 20px; }

/* progress bar */
.progress-bar-wrap { margin: 12px 0; }
.progress-bar-track { height: 10px; border-radius: 6px; background: #f1f5f9; overflow: hidden; }
.progress-bar-fill  { height: 100%; border-radius: 6px; background: var(--color-primary); transition: width 0.5s cubic-bezier(.4,0,.2,1); }

/* action buttons */
.btn-action { width: 100%; padding: 14px; border-radius: 10px; font-size: var(--txt-m, 1.7rem); font-weight: 600; border: none; cursor: pointer; transition: all 0.2s; margin-top: 6px; display: flex; align-items: center; justify-content: center; gap: 8px; }
.btn-action--stamp    { background: #f59e0b; color: #fff; }
.btn-action--stamp:hover { background: #d97706; }
.btn-action--points   { background: #0ea5e9; color: #fff; }
.btn-action--points:hover { background: #0284c7; }
.btn-action--redeem-pts { background: #0d9488; color: #fff; }
.btn-action--redeem-pts:hover { background: #0f766e; }
.btn-action--discount { background: #8b5cf6; color: #fff; }
.btn-action--discount:hover { background: #7c3aed; }
.btn-action:disabled  { background: #cbd5e1 !important; color: #94a3b8 !important; cursor: not-allowed; }

/* amount input row */
.amount-row { display: flex; gap: 10px; align-items: center; margin-top: 12px; }
.amount-row input { width: 100px; padding: 10px; text-align: center; font-size: var(--txt-l, 2.1rem); font-weight: 700; border: 1px solid var(--color-border); border-radius: 8px; }
.amount-row input:focus { outline: none; border-color: var(--color-primary); }

/* feedback */
.feedback { padding: 12px 16px; border-radius: 10px; font-weight: 500; font-size: var(--txt-s, 1.5rem); margin-top: 12px; }
.feedback--success { background: #dcfce7; color: #166534; }
.feedback--error   { background: #fef2f2; color: #991b1b; }

/* geolocations/form.html */
.geo-form {
        max-width: 65rem;
        margin: 0 auto;
    }
    
    .geo-form__title {
        margin-top: 0;
        margin-bottom: var(--space-l, 24px);
        color: var(--color-text-main, #1E293B);
    }
    
    .geo-alert {
        background-color: #FEF2F2;
        color: var(--color-error, #EF4444);
        padding: var(--space-m, 12px) var(--space-m, 16px);
        border-radius: var(--radius-md, 8px);
        margin-bottom: var(--space-l, 24px);
        border: 1px solid #FECACA;
    }
    
    .geo-alert__text {
        margin: 0;
        font-size: var(--txt-s, 1.5rem);
        font-weight: 500;
    }
    
    .geo-group {
        margin-bottom: var(--space-l, 24px);
    }
    
    .geo-group__label {
        display: block;
        font-weight: 500;
        margin-bottom: var(--space-xs, 8px);
        font-size: var(--txt-s, 1.5rem);
        color: var(--color-text-main, #1E293B);
    }
    
    .geo-group__hint {
        margin: 6px 0 0 0;
        font-size: var(--txt-xs, 1.4rem);
        color: var(--color-text-muted, #64748B);
    }
    
    .geo-group__hint--warning {
        color: #F59E0B;
    }

    .geo-group__label--muted {
        color: var(--color-text-muted, #64748B);
    }
    
    .geo-map-section {
        margin-bottom: var(--space-l, 24px);
    }
    
    .geo-map-section__title {
        margin: 0 0 var(--space-s, 12px) 0;
        font-size: var(--txt-s, 1.5rem);
        color: var(--color-text-main, #1E293B);
    }
    
    .geo-map-section__desc {
        margin: 0 0 var(--space-m, 16px) 0;
        font-size: var(--txt-s, 1.5rem);
        color: var(--color-text-muted, #64748B);
    }
    
    .map-search-container {
        position: relative;
        margin-bottom: var(--space-s, 12px);
    }

    .map-search-container__controls {
        display: flex;
        gap: var(--space-xs, 8px);
        width: 100%;
    }
    
    .map-search-input {
        flex: 1;
        padding: 10px 12px;
        border: 1px solid var(--color-border, #CFFAFE);
        border-radius: var(--radius-sm, 6px);
        font-size: var(--txt-s, 1.5rem);
        color: var(--color-text-main, #1E293B);
        font-family: inherit;
    }
    
    .map-search-input:focus {
        outline: none;
        border-color: var(--color-primary, #0D9488);
        box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.1);
    }
    
    .map-search-btn {
        padding: 10px 16px;
        background-color: var(--color-primary, #0D9488);
        color: var(--color-text-on-primary, #FFFFFF);
        border: none;
        border-radius: var(--radius-sm, 6px);
        cursor: pointer;
        font-weight: 500;
        font-size: var(--txt-s, 1.5rem);
        transition: opacity 0.2s;
        font-family: inherit;
    }
    
    .map-search-btn:hover {
        opacity: 0.9;
    }
    
    #map {
        height: 350px;
        width: 100%;
        border-radius: var(--radius-md, 8px);
        border: 1px solid var(--color-border, #CFFAFE);
        margin-bottom: var(--space-m, 16px);
        z-index: 1;
    }
    
    .geo-map__error {
        color: var(--color-error, #EF4444);
        font-size: var(--txt-s, 1.5rem);
        margin-top: -16px;
        margin-bottom: var(--space-m, 16px);
        display: none;
    }
    
    .geo-coords {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--space-m, 16px);
        margin-bottom: var(--space-s, 12px);
        padding: var(--space-m, 16px);
        background-color: var(--color-surface, #F0FDFA);
        border-radius: var(--radius-md, 8px);
        border: 1px dashed var(--color-border, #CFFAFE);
    }
    
    .readonly-input {
        background-color: var(--color-surface-soft, #F8FFFE);
        cursor: not-allowed;
        color: var(--color-text-muted, #64748B);
    }

    .geo-hidden-field {
        display: none;
    }
    
    .geo-actions {
        display: flex;
        justify-content: flex-end;
        gap: var(--space-s, 12px);
        padding-top: var(--space-m, 16px);
        border-top: 1px solid var(--color-border, #CFFAFE);
    }

    .geo-map-results {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--color-surface-soft, #FFFFFF);
        border: 1px solid var(--color-border, #CFFAFE);
        border-radius: var(--radius-sm, 6px);
        box-shadow: var(--shadow-card);
        max-height: 20rem;
        overflow-y: auto;
        list-style: none;
        margin: var(--space-2xs, 4px) 0 0 0;
        padding: 0;
        z-index: 1001;
    }

    .geo-map-results__item {
        padding: var(--space-xs, 8px) var(--space-s, 12px);
        border-bottom: 1px solid var(--color-border, #CFFAFE);
        cursor: pointer;
        font-size: var(--txt-xs, 1.4rem);
        transition: background-color 0.2s ease;
    }

    .geo-map-results__item:hover {
        background-color: var(--color-surface, #F0FDFA);
    }
    
    .geo-form .btn-secondary {
        background-color: transparent;
        border: 1px solid var(--color-border, #CFFAFE);
        color: var(--color-text-main, #1E293B);
        padding: var(--space-xs, 8px) var(--space-m, 16px);
        border-radius: var(--radius-pill, 9999px);
        font-weight: 600;
        font-size: var(--txt-s, 1.5rem);
        cursor: pointer;
        text-decoration: none;
        transition: all 0.2s ease;
    }
    
    .geo-form .btn-secondary:hover {
        background-color: var(--color-surface, #F0FDFA);
    }

    @media (max-width: 767px) {
        .geo-form {
            max-width: none;
        }

        .map-search-container__controls,
        .geo-coords,
        .geo-actions {
            grid-template-columns: 1fr;
            flex-direction: column;
        }

        .geo-actions > * {
            width: 100%;
            text-align: center;
        }

        #map {
            height: 30rem;
        }
    }

/* merchants/form_profile.html */
.form-check-input { width: 18px; height: 18px; accent-color: var(--color-primary); }
    .ex-merchants-form-profile-1 input[type="text"],
    .ex-merchants-form-profile-1 input[type="email"],
    .ex-merchants-form-profile-1 input[type="url"],
    .ex-merchants-form-profile-1 input[type="number"],
    .ex-merchants-form-profile-1 input[type="tel"],
    .ex-merchants-form-profile-1 select,
    .ex-merchants-form-profile-1 textarea {
        width: 100%; padding: 10px 12px; border: 1px solid var(--color-border); border-radius: 8px;
        font-family: inherit; font-size: var(--txt-s, 1.5rem); background: var(--color-surface); color: var(--color-text-main);
        box-sizing: border-box;
    }
    .ex-merchants-form-profile-1 input:focus,
    .ex-merchants-form-profile-1 select:focus,
    .ex-merchants-form-profile-1 textarea:focus {
        outline: none; border-color: var(--color-primary);
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 15%, transparent);
    }

/* microlanding/settings.html */
/* ─── Layout: Split View ─── */
.microlanding-split {
    display: flex;
    gap: 2rem;
    align-items: flex-start;
}
.microlanding-editor {
    flex: 1;
    min-width: 0; 
}
.microlanding-preview-wrapper {
    width: 380px;
    flex-shrink: 0;
    position: sticky;
    top: 2rem;
}

/* ─── Mock Smartphone Shell ─── */
.phone-mockup {
    width: 100%;
    height: 750px;
    border: 12px solid #111;
    border-radius: 40px;
    background: #fff;
    position: relative;
    box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    overflow: hidden;
}
.phone-notch {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 150px;
    height: 25px;
    background: #111;
    border-bottom-left-radius: 16px;
    border-bottom-right-radius: 16px;
    z-index: 10;
}
.phone-screen {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    background-color: #f8fafc; /* Default fallback */
    position: relative;
    padding-bottom: 2rem;
}
.phone-screen::-webkit-scrollbar {
    width: 4px;
}

/* ─── Contenedor de Formset Dinámico ─── */
.formset-item {
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1rem;
    position: relative;
    background: #fafafa;
}
.remove-formset {
    position: absolute;
    top: -10px;
    right: -10px;
    background: #fee2e2;
    color: #ef4444;
    border: none;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: var(--txt-s, 1.5rem);
}

/* ─── Clases Dinámicas de la Vista Previa (Simulación CSS) ─── */
#preview-root {
    min-height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 3rem 1.5rem 2rem;
    transition: all 0.3s ease;
}

#preview-logo {
    width: 104px;
    height: 104px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 1.25rem;
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    background-color: #fff;
    border: 4px solid #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

#preview-name {
    font-size: var(--h4, 2rem);
    font-weight: 600;
    margin-bottom: 0.5rem;
    text-align: center;
}

#preview-bio {
    font-size: var(--txt-s, 1.5rem);
    text-align: center;
    margin-bottom: 2rem;
    opacity: 0.8;
}

.preview-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.125rem 1.5rem;
    margin-bottom: 1rem;
    text-decoration: none;
    transition: all 0.25s ease;
    font-size: var(--txt-m, 1.7rem);
    font-weight: 500;
    box-sizing: border-box;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}
.preview-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    opacity: 0.95;
}
.preview-btn i {
    margin-right: 0.75rem;
    font-size: var(--txt-l, 2.1rem);
}

/* ── Builder Form Controls ── */
.form-control:not([type="color"]), .form-select {
    width: 100%; padding: 10px 14px; border: 1.5px solid var(--color-border); border-radius: 8px; font-size: var(--txt-s, 1.5rem); color: var(--color-text-main); transition: all 0.2s; box-sizing: border-box; background-color: #fff;
    -webkit-appearance: none; appearance: none;
}
select.form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right 0.75rem center; background-size: 16px 12px;
}
.form-control:focus, .form-select:focus {
    border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-light); outline: none;
}
.input-group-text { border: 1.5px solid var(--color-border); border-right: none; border-radius: 8px 0 0 8px; background-color: var(--color-sidebar-bg, #F0FDFA); color: var(--color-text-muted); padding: 10px 14px; font-size: var(--txt-s, 1.5rem); }
.input-group .form-control { border-radius: 0; }
.input-group .btn { border-radius: 0 8px 8px 0; border: 1.5px solid var(--color-border); border-left: none; }

/* ── Botones de navegación (Builder style) ── */
.btn-outline { background: transparent; border: 1.5px solid var(--color-border); color: var(--color-text-muted); padding: 8px 16px; border-radius: 8px; font-size: var(--txt-s, 1.5rem); cursor: pointer; display: inline-block; text-decoration: none; transition: background 0.15s; font-weight: 500; }
.btn-outline:hover { background: var(--color-surface-soft, #f1f5f9); color: var(--color-text-main); }

/* ── Builder Sections Ported Styles ── */
.builder-section { margin-bottom: 24px; border: 1px solid var(--color-border); border-radius: 12px; background: var(--color-surface, #fff); box-shadow: 0 1px 3px rgba(0,0,0,0.05); }
.builder-section__header { display: flex; align-items: center; gap: 12px; padding: 14px 18px; background: var(--color-sidebar-bg, #F0FDFA); border-bottom: 1px solid var(--color-border); border-top-left-radius: 12px; border-top-right-radius: 12px; }
.builder-section__icon { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 8px; background: var(--color-primary-light, #CCFBF1); color: var(--color-primary, #0D9488); flex-shrink: 0; font-size: var(--txt-m, 1.7rem); }
.builder-section__title { font-size: var(--txt-m, 1.7rem); font-weight: 600; color: var(--color-text-main, #1E293B); line-height: 1.3; }
.builder-section__desc { font-size: var(--txt-s, 1.5rem); color: var(--color-text-muted, #64748B); margin-top: 2px; line-height: 1.4; }
.builder-section__body { padding: 20px; }
.builder-label { display: flex; align-items: center; gap: 4px; margin-bottom: 8px; font-weight: 600; font-size: var(--txt-s, 1.5rem); color: var(--color-text-main, #1E293B); text-transform: none; letter-spacing: normal; }

/* Layout Responsivo para Paneles */
@media (max-width: 1024px) {
    .microlanding-split {
        flex-direction: column;
    }
    .microlanding-preview-wrapper {
        margin: 0 auto;
        position: static;
    }
}

/* Hallmark · pre-emit critique: P5 H5 E4 S5 R5 V4
 * macrostructure: Workbench · genre: modern-minimal · tone: technical-warm · anchor hue: mint-petroleum
 * design-system: design.md · contrast: pass (40–41) · chrome: pass (47) · tokens: pass (48)
 * responsive: pass (34, 49, 50–57) · icons: pass (30)
 * target: dashboard/microlanding/distributor_settings.html
 */
.distributor-link-builder {
    --distributor-editor-radius: var(--radius-md);
    --distributor-editor-card-radius: var(--radius-card);
    --distributor-preview-button-radius: var(--radius-pill);
    --distributor-profile-control-height: 12rem;
    --distributor-row-inactive-bg: color-mix(in oklab, var(--color-surface) 92%, var(--color-text-muted) 8%);
    display: grid;
    gap: var(--space-l);
    min-width: 0;
}

.distributor-link-builder__hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(28rem, 44rem);
    align-items: end;
    gap: var(--space-l);
}

.distributor-link-builder__eyebrow {
    margin: 0 0 var(--space-xs);
    color: var(--color-primary-hover);
    font-family: var(--font-label);
    font-size: var(--txt-xs);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.public-link-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-xs) var(--space-s);
    min-width: 0;
    padding: var(--space-s);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-card);
    background: var(--color-surface);
    box-shadow: var(--shadow-soft);
}

.public-link-card__label {
    color: var(--color-text-muted);
    font-family: var(--font-label);
    font-size: var(--txt-xs);
    font-weight: 700;
}

.public-link-card__url {
    grid-column: 1;
    min-width: 0;
    overflow: hidden;
    color: var(--color-text-main);
    font-size: var(--txt-s);
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.public-link-card__actions {
    grid-row: 1 / span 2;
    grid-column: 2;
    display: flex;
    gap: var(--space-2xs);
}

.public-link-card__actions .btn-outline {
    display: inline-flex;
    align-items: center;
    min-height: var(--control-height);
    gap: var(--space-2xs);
    white-space: nowrap;
}

.public-link-card__actions .material-symbols-outlined {
    font-size: var(--txt-m);
}

.public-link-card__status {
    grid-column: 1 / -1;
    min-height: 1.5em;
    color: var(--color-primary-hover);
    font-size: var(--txt-xs);
}

.public-link-card__status:empty {
    display: none;
}

.public-link-card__toggle,
.public-link-card__toggle-error {
    grid-column: 1 / -1;
}

.public-link-card__toggle {
    align-items: center;
    padding: var(--space-xs) var(--space-s);
    border-radius: var(--distributor-editor-radius);
}

.public-link-card__toggle input {
    margin-top: 0;
}

.public-link-card__toggle:has(input:not(:checked)) {
    border-color: var(--color-error);
    background: var(--color-error-light);
}

.public-link-card [data-state="error"] {
    border-color: var(--color-error);
    color: var(--color-error);
}

.public-link-card [data-state="success"] {
    border-color: var(--color-success);
    color: var(--color-success);
}

.distributor-link-builder__workspace {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(32rem, 42rem);
    align-items: start;
    gap: var(--space-l);
}

.distributor-link-builder__editor {
    min-width: 0;
}

.distributor-link-builder .builder-section {
    overflow: clip;
    border-radius: var(--distributor-editor-card-radius);
    background: var(--color-surface);
    box-shadow: var(--shadow-soft);
}

.distributor-link-builder .builder-section__header {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    background: var(--color-surface);
}

.distributor-link-builder .builder-section__header--with-action {
    grid-template-columns: auto minmax(0, 1fr) auto;
}

.distributor-link-builder .builder-section__title,
.distributor-link-builder .builder-section__desc {
    margin: 0;
}

.distributor-link-builder .builder-section__action {
    display: inline-flex;
    align-items: center;
    align-self: center;
    gap: var(--space-2xs);
    white-space: nowrap;
}

.builder-switch {
    display: flex;
    align-items: flex-start;
    gap: var(--space-xs);
    padding: var(--space-s);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-control);
    cursor: pointer;
    background: var(--color-surface-soft);
}

.builder-switch input {
    flex: 0 0 auto;
    width: 2rem;
    height: 2rem;
    margin-top: var(--space-3xs);
    accent-color: var(--color-primary);
}

.builder-switch span {
    display: grid;
    gap: var(--space-3xs);
    min-width: 0;
}

.builder-switch strong {
    color: var(--color-text-main);
    font-size: var(--txt-s);
}

.builder-switch small,
.builder-field-hint {
    color: var(--color-text-muted);
    font-size: var(--txt-xs);
    line-height: 1.5;
}

.builder-field-hint {
    margin: 0 0 var(--space-xs);
}

.distributor-profile-grid {
    display: grid;
    grid-template-columns: minmax(18rem, 24rem) minmax(0, 1fr);
    gap: var(--space-m);
    margin-top: 0;
}

.distributor-logo-field {
    min-width: 0;
}

.distributor-logo-field .cropper-widget-wrapper {
    width: var(--distributor-profile-control-height);
    max-width: 100%;
}

.distributor-logo-field .cropper-preview-container {
    width: var(--distributor-profile-control-height);
    max-width: 100%;
    height: var(--distributor-profile-control-height);
    min-height: var(--distributor-profile-control-height);
    margin-bottom: 0;
}

.distributor-logo-field .cropper-preview-image {
    width: 100%;
    height: 100%;
    max-height: none;
    object-fit: cover;
}

.distributor-profile-grid textarea {
    height: var(--distributor-profile-control-height);
    min-height: var(--distributor-profile-control-height);
}

.distributor-profile-grid .builder-field-hint {
    margin-top: var(--space-xs);
}

.distributor-profile-copy {
    display: grid;
    gap: var(--space-s);
    min-width: 0;
}

.builder-color-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-s);
    margin-top: var(--space-m);
}

.builder-color-control {
    display: grid;
    grid-template-columns: var(--control-height) minmax(0, 1fr);
    align-items: center;
    gap: var(--space-xs);
    min-width: 0;
    padding: var(--space-xs);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-pill);
    color: var(--color-text-main);
    font-size: var(--txt-s);
    font-weight: 700;
    background: var(--color-surface);
}

.builder-color-control input.form-control[type="color"] {
    width: var(--control-height);
    height: var(--control-height);
    padding: 0;
    overflow: hidden;
    border: var(--border-width) solid var(--color-border);
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
}

.builder-color-control input[type="color"]::-webkit-color-swatch-wrapper {
    padding: 0;
}

.builder-color-control input[type="color"]::-webkit-color-swatch {
    border: 0;
    border-radius: 50%;
}

.builder-color-control input[type="color"]::-moz-color-swatch {
    border: 0;
    border-radius: 50%;
}

.builder-plan-selector > div {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-xs);
}

.builder-plan-selector label {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    min-width: 0;
    min-height: var(--control-height);
    padding: var(--space-xs) var(--space-s);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-control);
    color: var(--color-text-main);
    cursor: pointer;
    background: var(--color-surface);
}

.builder-plan-selector label:has(input:checked) {
    border-color: var(--color-primary);
    background: var(--color-primary-light);
}

.builder-plan-selector input {
    width: 1.8rem;
    height: 1.8rem;
    accent-color: var(--color-primary);
}

.distributor-links {
    display: grid;
    gap: var(--space-s);
}

.distributor-link-row {
    display: grid;
    gap: var(--space-s);
    padding: var(--space-s);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--distributor-editor-radius);
    background: var(--color-surface-soft);
}

.distributor-link-row:has([name$="-is_active"]:not(:checked)) {
    background: var(--distributor-row-inactive-bg);
}

.distributor-link-row[hidden] {
    display: none;
}

.distributor-link-row__fields {
    display: grid;
    grid-template-columns:
        var(--control-height)
        minmax(13rem, 0.75fr)
        minmax(18rem, 1.25fr)
        minmax(7rem, 0.25fr)
        auto
        auto;
    align-items: end;
    gap: var(--space-s);
}

.distributor-link-builder .builder-section--links {
    overflow: visible;
}

.distributor-icon-picker {
    position: relative;
    min-width: 0;
    border-radius: var(--distributor-editor-radius);
}

.distributor-icon-picker:not(.is-ready) {
    width: 100%;
}

.distributor-icon-picker.is-ready {
    width: var(--control-height);
    height: var(--control-height);
}

.distributor-icon-picker.is-ready .form-select {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

.distributor-icon-picker__trigger {
    position: relative;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 0;
    border: var(--border-width) solid var(--color-border);
    border-radius: inherit;
    color: var(--color-primary-hover);
    background: var(--color-surface);
    cursor: pointer;
}

.distributor-icon-picker.is-ready .distributor-icon-picker__trigger {
    display: inline-flex;
}

.distributor-icon-picker__menu {
    position: absolute;
    z-index: 40;
    top: calc(100% + var(--space-2xs));
    left: 0;
    display: grid;
    grid-template-columns: repeat(4, var(--control-height));
    gap: var(--space-2xs);
    width: max-content;
    padding: var(--space-xs);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--distributor-editor-radius);
    background: var(--color-surface);
    box-shadow: var(--shadow-card);
}

.distributor-icon-picker:not(.is-ready) .distributor-icon-picker__menu,
.distributor-icon-picker__menu[hidden] {
    display: none;
}

.distributor-icon-picker__option {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--control-height);
    height: var(--control-height);
    padding: 0;
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--distributor-editor-radius);
    color: var(--color-text-main);
    background: var(--color-surface);
    cursor: pointer;
}

.distributor-icon-picker__option.is-selected {
    border-color: var(--color-primary);
    color: var(--color-primary-hover);
    background: var(--color-primary-light);
}

.distributor-link-field.has-error :is(.form-control, .form-select),
.distributor-link-field :is(.form-control, .form-select):user-invalid,
.distributor-link-field.has-error .distributor-icon-picker__trigger,
.distributor-icon-picker:has(.form-select:user-invalid) .distributor-icon-picker__trigger {
    border-color: var(--color-error);
}

.builder-field-error--sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.builder-switch--compact {
    align-items: center;
    align-self: end;
    min-height: var(--control-height);
    padding: var(--space-xs);
    border: 0;
    background: transparent;
}

.icon-button--danger {
    align-self: end;
    width: var(--control-height);
    height: var(--control-height);
    color: var(--color-error);
    border-color: var(--color-error);
}

.distributor-link-builder .icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-control);
    background: var(--color-surface);
}

.distributor-link-builder .icon-button:active,
.distributor-link-builder .btn-outline:active,
.distributor-link-builder .btn-primary:active {
    transform: translateY(var(--space-3xs));
}

.distributor-link-builder :is(button, a, input, select, textarea, summary) {
    outline: var(--border-width) solid transparent;
    outline-offset: var(--space-3xs);
}

.distributor-link-builder :is(button, input, select, textarea):disabled,
.distributor-link-builder [aria-disabled="true"] {
    opacity: var(--opacity-disabled);
    cursor: not-allowed;
}

.builder-advanced {
    margin-bottom: var(--space-m);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--distributor-editor-radius);
    background: var(--color-surface);
}

.builder-advanced summary {
    min-height: var(--control-height);
    padding: var(--space-s);
    color: var(--color-text-main);
    cursor: pointer;
    font-weight: 700;
}

.builder-advanced__body {
    padding: 0 var(--space-s) var(--space-s);
}

.builder-save-row {
    display: flex;
    justify-content: flex-end;
    padding-block: var(--space-xs) var(--space-l);
}

.builder-save-row .btn-primary {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    white-space: nowrap;
}

.distributor-link-preview {
    position: sticky;
    top: var(--space-m);
    min-width: 0;
    overflow: clip;
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-card);
    background: var(--color-surface);
    box-shadow: var(--shadow-card);
}

.distributor-link-preview__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-s);
    padding: var(--space-s);
    border-bottom: var(--border-width) solid var(--color-border);
}

.distributor-link-preview__header > div {
    display: grid;
    gap: var(--space-3xs);
}

.distributor-link-preview__header span:first-child {
    color: var(--color-text-muted);
    font-family: var(--font-label);
    font-size: var(--txt-xs);
}

.distributor-link-preview__header strong {
    color: var(--color-text-main);
    font-size: var(--txt-m);
}

.distributor-link-preview__canvas {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 56rem;
    padding: var(--space-xl) var(--space-m);
    color: var(--color-text-main);
    text-align: center;
    transition:
        background-color var(--duration-short) var(--ease-out),
        color var(--duration-short) var(--ease-out);
}

.distributor-link-preview__logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 10.4rem;
    height: 10.4rem;
    object-fit: cover;
    overflow: hidden;
    border: var(--border-width) solid var(--color-border);
    border-radius: 50%;
    background: var(--color-surface);
    box-shadow: var(--shadow-soft);
}

.distributor-link-preview__logo--empty {
    color: var(--color-text-muted);
}

.distributor-link-preview__logo .material-symbols-outlined {
    font-size: var(--txt-3xl);
}

.distributor-link-preview__canvas h2 {
    max-width: 16ch;
    margin: var(--space-m) 0 var(--space-xs);
    overflow-wrap: anywhere;
    font-size: var(--h3);
    font-style: normal;
}

.distributor-link-preview__canvas > p {
    max-width: 34ch;
    margin: 0 0 var(--space-m);
    line-height: 1.55;
}

.distributor-link-preview__buttons {
    display: grid;
    gap: var(--space-xs);
    width: 100%;
}

.distributor-link-preview__button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    width: 100%;
    padding: var(--space-s);
    overflow: hidden;
    border-radius: var(--distributor-preview-button-radius);
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.distributor-link-preview__plans {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-xs);
    margin-top: var(--space-m);
}

.distributor-link-preview__plans span {
    max-width: 100%;
    padding: var(--space-2xs) var(--space-xs);
    overflow: hidden;
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-pill);
    background: var(--color-surface);
    color: var(--color-text-main);
    font-size: var(--txt-xs);
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.distributor-link-builder :is(button, a, input, select, textarea, summary):focus-visible {
    outline: var(--border-width) solid var(--color-focus);
    outline-offset: var(--space-3xs);
    box-shadow: var(--shadow-focus);
}

@media (hover: hover) and (pointer: fine) {
    .builder-plan-selector label:hover,
    .distributor-link-row:hover {
        border-color: var(--color-primary);
    }

    .distributor-icon-picker__trigger:hover,
    .distributor-icon-picker__option:hover {
        background: var(--color-surface-soft);
    }
}

@media (max-width: 74rem) {
    .distributor-link-builder__hero,
    .distributor-link-builder__workspace {
        grid-template-columns: minmax(0, 1fr);
    }

    .distributor-link-preview {
        position: static;
        max-width: 52rem;
        margin-inline: auto;
    }
}

@media (max-width: 47.99rem) {
    .public-link-card,
    .distributor-profile-grid,
    .builder-color-grid,
    .builder-plan-selector > div,
    .distributor-link-row__fields {
        grid-template-columns: minmax(0, 1fr);
    }

    .public-link-card__actions {
        grid-row: auto;
        grid-column: 1;
    }

    .public-link-card__actions > * {
        flex: 1;
    }

    .distributor-link-builder .builder-section__header--with-action {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .distributor-link-builder .builder-section__action {
        grid-column: 1 / -1;
        justify-content: center;
        width: 100%;
    }

    .distributor-link-row__fields {
        align-items: stretch;
    }

    .icon-button--danger {
        justify-self: end;
    }

    .distributor-link-preview__canvas {
        min-height: 48rem;
        padding: var(--space-l) var(--space-s);
    }
}

@media (prefers-reduced-motion: reduce) {
    .distributor-link-builder .icon-button:active,
    .distributor-link-builder .btn-outline:active,
    .distributor-link-builder .btn-primary:active {
        transform: none;
    }

    .distributor-link-preview__canvas {
        transition-duration: var(--duration-micro);
    }
}

/* overview.html */
.overview-shell {
        display: grid;
        gap: var(--space-l, 2rem);
    }

    .overview-hero {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: var(--space-m, 1.5rem);
        flex-wrap: wrap;
    }

    .overview-hero__title {
        margin: 0;
        font-size: var(--h2, 3.6rem);
        line-height: 1.05;
        color: var(--color-text-main, #0F172A);
    }

    .overview-hero__meta {
        margin: var(--space-xs, 0.8rem) 0 0;
        color: var(--color-text-muted, #64748B);
        font-size: var(--txt-m, 1.5rem);
    }

    .overview-toolbar {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: var(--space-s, 1rem);
        flex-wrap: wrap;
    }

    .dashboard-period-selector,
    .dashboard-date-navigator {
        display: inline-flex;
        align-items: center;
        gap: var(--space-xs, 0.8rem);
        padding: 0.35rem;
        background: var(--color-surface, #F8FAFC);
        border: 1px solid var(--color-border, #E2E8F0);
        border-radius: 999px;
    }

    .overview-toolbar__link,
    .overview-toolbar__icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 42px;
        padding: var(--space-xs, 0.8rem) var(--space-s, 1rem);
        border-radius: 999px;
        color: var(--color-text-main, #0F172A);
        text-decoration: none;
        font-weight: 700;
        font-size: var(--txt-s, 1.4rem);
        transition: background-color var(--transition-base, 0.25s ease), color var(--transition-base, 0.25s ease), transform var(--transition-base, 0.25s ease);
    }

    .overview-toolbar__link.is-active {
        background: var(--color-primary, #0D9488);
        color: var(--color-text-on-primary, #FFFFFF);
    }

    .overview-toolbar__icon {
        min-width: 44px;
        padding-inline: 0.8rem;
        border: 1px solid var(--color-border, #E2E8F0);
        background: var(--color-bg, #FFFFFF);
    }

    .overview-toolbar__icon:hover,
    .overview-toolbar__link:hover {
        transform: translateY(-1px);
    }

    .dashboard-date-navigator {
        display: inline-flex;
        align-items: center;
        gap: var(--space-s, 1rem);
    }

    .dashboard-date-navigator__label {
        min-width: 12rem;
        text-align: center;
        font-size: var(--txt-m, 1.5rem);
        font-weight: 700;
        color: var(--color-text-main, #0F172A);
    }

    .overview-grid {
        display: grid;
        grid-template-columns: repeat(12, minmax(0, 1fr));
        gap: var(--space-m, 1.5rem);
    }

    .metric-card {
        grid-column: span 3;
        padding: var(--space-m, 1.5rem);
        background: linear-gradient(180deg, var(--color-bg, #FFFFFF), var(--color-surface, #F8FAFC));
        border: 1px solid var(--color-border, #E2E8F0);
        border-radius: 1.4rem;
        box-shadow: var(--shadow-soft, 0 1px 2px 0 rgb(0 0 0 / 0.05));
        display: grid;
        gap: var(--space-xs, 0.8rem);
    }

    .metric-card--wide {
        grid-column: span 4;
    }

    .metric-card--primary {
        grid-column: span 3;
        min-height: clamp(13rem, 11vw, 16rem);
    }

    .metric-card--primary .metric-card__value {
        font-size: clamp(2.2rem, 2.4vw, 3.6rem);
        overflow-wrap: anywhere;
    }

    .metric-card--secondary {
        grid-column: span 3;
        min-height: clamp(10rem, 9vw, 13rem);
        background: var(--color-bg, #FFFFFF);
        box-shadow: none;
    }

    .metric-card--secondary .metric-card__value {
        font-size: clamp(2rem, 2vw, 3rem);
    }

    .metric-card__value-row {
        display: flex;
        align-items: baseline;
        gap: 0.65rem;
        flex-wrap: wrap;
    }

    .metric-card__value {
        font-size: var(--h2, 3.6rem);
        line-height: 0.95;
        font-weight: 800;
        color: var(--color-text-main, #0F172A);
    }

    .metric-card__previous {
        color: var(--color-text-muted, #94A3B8);
        font-size: var(--txt-m, 1.5rem);
        font-weight: 700;
    }

    .metric-card__label {
        margin: 0;
        font-size: var(--txt-m, 1.5rem);
        font-weight: 700;
        color: var(--color-text-main, #0F172A);
    }

    .metric-card__label-row {
        display: flex;
        align-items: center;
        gap: 0.6rem;
    }

    .metric-card__tooltip {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 1.8rem;
        height: 1.8rem;
        border-radius: 999px;
        background: var(--color-surface, #E2E8F0);
        color: var(--color-text-muted, #64748B);
        border: 1px solid var(--color-text-muted, #64748B);
        font-size: var(--txt-xs, 1.4rem);
        font-weight: 700;
        cursor: help;
        flex-shrink: 0;
    }

    .metric-card__tooltip-content {
        position: absolute;
        left: 50%;
        bottom: calc(100% + 1rem);
        transform: translateX(-50%) translateY(0.4rem);
        width: min(24rem, 72vw);
        padding: 1rem 1.2rem;
        border-radius: 1rem;
        background: var(--color-text-main, #0F172A);
        color: var(--color-text-on-primary, #FFFFFF);
        font-size: var(--txt-s, 1.5rem);
        font-weight: 500;
        line-height: 1.45;
        box-shadow: var(--shadow-card, 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1));
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity var(--transition-base, 0.25s ease), transform var(--transition-base, 0.25s ease), visibility var(--transition-base, 0.25s ease);
        z-index: 20;
    }

    .metric-card__tooltip-content::after {
        content: "";
        position: absolute;
        left: 50%;
        top: 100%;
        transform: translateX(-50%);
        border-width: 0.7rem 0.7rem 0;
        border-style: solid;
        border-color: var(--color-text-main, #0F172A) transparent transparent;
    }

    .metric-card__tooltip:hover .metric-card__tooltip-content,
    .metric-card__tooltip:focus-visible .metric-card__tooltip-content {
        opacity: 1;
        visibility: visible;
        transform: translateX(-50%) translateY(0);
    }

    .metric-card__delta {
        display: inline-flex;
        align-items: center;
        width: fit-content;
        padding: 0.35rem 0.65rem;
        border-radius: 999px;
        font-size: var(--txt-s, 1.4rem);
        font-weight: 700;
        background: rgba(13, 148, 136, 0.1);
        color: #0F766E;
    }

    .metric-card__delta.is-negative {
        background: rgba(239, 68, 68, 0.1);
        color: #B91C1C;
    }

    .analytics-card {
        grid-column: 1 / -1;
        padding: var(--space-m, 1.5rem);
        background: var(--color-bg, #FFFFFF);
        border: 1px solid var(--color-border, #E2E8F0);
        border-radius: 1.6rem;
        box-shadow: var(--shadow-card, 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1));
    }

    .analytics-card--half {
        grid-column: span 6;
    }

    .analytics-card__header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: var(--space-s, 1rem);
        margin-bottom: var(--space-m, 1.5rem);
        flex-wrap: wrap;
    }

    .analytics-card__title {
        margin: 0;
        font-size: var(--h4, 1.7rem);
        color: var(--color-text-main, #0F172A);
    }

    .analytics-card__description {
        margin: var(--space-2xs) 0 0;
        color: var(--color-text-muted, #64748B);
        font-size: var(--txt-s, 1.4rem);
        line-height: var(--line-height-normal, 1.5);
    }

    .analytics-card__tabs {
        display: inline-flex;
        gap: var(--space-xs, 0.8rem);
        flex-wrap: wrap;
    }

    .analytics-card__tab {
        border: 0;
        background: transparent;
        color: var(--color-text-main, #0F172A);
        font-size: var(--txt-s, 1.4rem);
        font-weight: 700;
        border-radius: 999px;
        padding: 0.55rem 0.95rem;
        cursor: pointer;
    }

    .analytics-card__tab.is-active {
        background: rgba(13, 148, 136, 0.14);
        color: #0F766E;
    }

    .chart-shell {
        display: grid;
        gap: var(--space-s, 1rem);
    }

    .chart-shell__canvas {
        width: 100%;
        min-height: 320px;
    }

    .chart-shell__legend {
        display: flex;
        gap: var(--space-s, 1rem);
        flex-wrap: wrap;
        color: var(--color-text-muted, #64748B);
        font-size: var(--txt-s, 1.4rem);
    }

    .chart-shell__legend-dot {
        width: 10px;
        height: 10px;
        border-radius: 999px;
        display: inline-block;
        margin-right: 0.45rem;
    }
    .chart-shell__legend-dot--visits { background: var(--color-primary); }
    .chart-shell__legend-dot--stamps { background: var(--color-info); }
    .chart-shell__legend-dot--redeems { background: var(--color-warning); }
    .overview-hero__meta--flush { margin-top: 0; }
    .analytics-card__title--compact { font-size: var(--txt-m); margin-bottom: var(--space-s); }

    .top-grid {
        display: grid;
        grid-template-columns: 1.2fr 0.8fr;
        gap: var(--space-m, 1.5rem);
    }

    .bar-list {
        display: grid;
        gap: var(--space-xs, 0.8rem);
    }

    .bar-list__item {
        display: grid;
        grid-template-columns: 84px 1fr auto;
        align-items: center;
        gap: var(--space-xs, 0.8rem);
    }

    .bar-list__label,
    .bar-list__value {
        font-weight: 700;
        color: var(--color-text-main, #0F172A);
    }

    .bar-list__track {
        height: 10px;
        background: var(--color-surface, #F8FAFC);
        border-radius: 999px;
        overflow: hidden;
        border: 1px solid var(--color-border, #E2E8F0);
    }

    .bar-list__fill {
        height: 100%;
        width: 0;
        border-radius: 999px;
        background: linear-gradient(90deg, var(--color-primary, #0D9488), #34D399);
    }
    .bar-list__progress {
        width: 100%;
        height: 10px;
        border: 1px solid var(--color-border);
        border-radius: var(--radius-pill);
        overflow: hidden;
        appearance: none;
    }
    .bar-list__progress::-webkit-progress-bar { background: var(--color-surface); }
    .bar-list__progress::-webkit-progress-value { background: var(--color-primary); border-radius: var(--radius-pill); }
    .bar-list__progress::-moz-progress-bar { background: var(--color-primary); border-radius: var(--radius-pill); }

    .recent-table {
        width: 100%;
        border-collapse: collapse;
    }

    .recent-table th,
    .recent-table td {
        padding: var(--space-xs, 0.8rem) 0.4rem;
        text-align: left;
        border-bottom: 1px solid var(--color-border, #E2E8F0);
    }

    .recent-table th {
        color: var(--color-text-muted, #64748B);
        font-size: var(--txt-xs, 1.2rem);
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }

    .recent-table td {
        color: var(--color-text-main, #0F172A);
    }

    .recent-table__empty {
        padding: var(--space-l, 2rem) 0;
        text-align: center;
        color: var(--color-text-muted, #64748B);
    }

    .overview-section-heading {
        grid-column: 1 / -1;
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        gap: var(--space-s);
        padding-top: var(--space-s);
    }

    .overview-section-heading h2,
    .overview-section-heading p {
        margin: 0;
    }

    .overview-section-heading h2 {
        font-size: var(--h4);
        color: var(--color-text-main);
    }

    .overview-section-heading p {
        margin-top: var(--space-2xs);
        color: var(--color-text-muted);
        font-size: var(--txt-s);
    }

    .overview-country-list {
        display: grid;
        gap: var(--space-xs);
    }

    .overview-revenue-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-s);
    }

    .overview-revenue-block {
        min-width: 0;
        padding: var(--space-m);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-card);
        background: var(--color-surface);
        display: grid;
        gap: var(--space-xs);
    }

    .overview-revenue-block span {
        color: var(--color-text-muted);
        font-size: var(--txt-s);
        font-weight: var(--font-weight-semibold);
    }

    .overview-revenue-block strong {
        color: var(--color-text-main);
        font-size: clamp(1.8rem, 2vw, 2.8rem);
        overflow-wrap: anywhere;
    }

    .overview-country-list__item {
        min-height: var(--touch-target-min);
        padding: var(--space-xs) var(--space-s);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-control);
        background: var(--color-surface);
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-s);
        color: var(--color-text-main);
    }

    @media (max-width: 1200px) {
        .metric-card,
        .metric-card--wide,
        .metric-card--primary,
        .metric-card--secondary {
            grid-column: span 6;
        }

        .top-grid {
            grid-template-columns: 1fr;
        }
    }

    @media (max-width: 760px) {
        .metric-card,
        .metric-card--wide,
        .metric-card--primary,
        .metric-card--secondary,
        .analytics-card--half {
            grid-column: 1 / -1;
        }

        .overview-toolbar {
            width: 100%;
            justify-content: stretch;
        }

        .dashboard-period-selector,
        .dashboard-date-navigator {
            width: 100%;
            justify-content: center;
        }

        .dashboard-date-navigator__label {
            min-width: auto;
            flex: 1;
        }

        .bar-list__item {
            grid-template-columns: 68px 1fr auto;
        }

        .overview-revenue-grid {
            grid-template-columns: 1fr;
        }
    }

/* payloads/index.html */
/* ── Layout ────────────────────────────────────────────────────── */
.payloads-tool { max-width: 1400px; margin: 0 auto; padding: 0 0 40px; display: flex; flex-direction: column; gap: 16px; }

.payloads-header { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.payloads-title { font-size: var(--h3, 2.6rem); font-weight: 700; color: var(--color-text-main); display: flex; align-items: center; gap: 10px; margin: 0; }

.dry-run-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--txt-xs, 1.4rem); font-weight: 600; padding: 5px 12px;
  border-radius: 20px;
  background: rgba(245,158,11,0.15); color: #b45309;
  border: 1px solid rgba(245,158,11,0.3);
}
.dry-run-off { background: rgba(16,185,129,0.1); color: #059669; border-color: rgba(16,185,129,0.25); }

/* ── Search card ───────────────────────────────────────────────── */
.payloads-search-card { background: var(--color-card, #fff); border: 1px solid var(--color-border); border-radius: 12px; padding: 20px; display: flex; flex-direction: column; gap: 16px; }
.search-row { display: flex; gap: 12px; align-items: center; }
.search-input-wrap { position: relative; flex: 1; }
.search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--color-text-muted); pointer-events: none; }
.search-input { width: 100%; padding: 10px 14px 10px 38px; border: 1px solid var(--color-border); border-radius: 8px; font-size: var(--txt-s, 1.5rem); background: var(--color-bg); color: var(--color-text-main); outline: none; transition: border 0.2s; }
.search-input:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(13,148,136,0.1); }
.btn-generate { padding: 10px 22px; background: var(--color-primary); color: white; border: none; border-radius: 8px; font-size: var(--txt-s, 1.5rem); font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 8px; white-space: nowrap; transition: background 0.2s; }
.btn-generate:hover { background: var(--color-primary-hover, #0a7a6f); }

/* ── Operation tabs ─────────────────────────────────────────────── */
.op-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.op-tab {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px; border-radius: 20px; border: 1px solid var(--color-border);
  background: var(--color-bg); color: var(--color-text-muted);
  font-size: var(--txt-xs, 1.4rem); font-weight: 500; cursor: pointer; transition: all 0.15s;
}
.op-tab:hover { border-color: var(--color-primary); color: var(--color-primary); }
.op-tab.active { background: var(--color-primary); color: white; border-color: var(--color-primary); }

/* ── Info strips ────────────────────────────────────────────────── */
.template-info {
  padding: 10px 16px; background: rgba(13,148,136,0.07);
  border: 1px solid rgba(13,148,136,0.2); border-radius: 8px;
  font-size: var(--txt-s, 1.5rem); color: var(--color-text-main); display: flex; gap: 20px; flex-wrap: wrap;
}
.template-info strong { color: var(--color-primary); }

.endpoint-info {
  padding: 10px 16px;
  background: rgba(99,102,241,0.07); border: 1px solid rgba(99,102,241,0.2);
  border-radius: 8px; font-size: var(--txt-xs, 1.4rem); display: flex; gap: 10px; flex-wrap: wrap;
}
.ep-pill {
  display: inline-flex; align-items: center; gap: 5px;
  background: rgba(99,102,241,0.12); color: #4f46e5;
  padding: 3px 10px; border-radius: 12px; font-weight: 600; font-family: monospace;
}

/* ── Error banner ───────────────────────────────────────────────── */
.error-banner {
  padding: 12px 16px; background: rgba(239,68,68,0.1); border: 1px solid rgba(239,68,68,0.3);
  border-radius: 8px; color: #b91c1c; font-size: var(--txt-s, 1.5rem);
}

/* ── Results grid ───────────────────────────────────────────────── */
.results-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(460px, 1fr)); gap: 16px; }
.payload-panel { background: var(--color-card, #fff); border: 1px solid var(--color-border); border-radius: 12px; display: flex; flex-direction: column; overflow: hidden; }
.panel-header { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--color-border); }
.panel-title { font-size: var(--txt-s, 1.5rem); font-weight: 700; color: var(--color-text-main); display: flex; align-items: center; gap: 8px; }
.panel-title span { font-size: var(--txt-xs, 1.4rem); font-weight: 500; color: var(--color-text-muted); }
.copy-btn {
  padding: 5px 12px; border-radius: 6px; border: 1px solid var(--color-border);
  background: var(--color-bg); color: var(--color-text-muted); font-size: var(--txt-xs, 1.4rem);
  cursor: pointer; display: flex; align-items: center; gap: 5px; transition: all 0.15s;
}
.copy-btn:hover { border-color: var(--color-primary); color: var(--color-primary); }
.copy-btn.copied { background: rgba(16,185,129,0.1); color: #059669; border-color: rgba(16,185,129,0.3); }

/* ── JSON viewer ────────────────────────────────────────────────── */
.json-box {
  margin: 0; padding: 16px; overflow: auto; max-height: 560px;
  font-size: var(--txt-xs, 1.4rem); line-height: 1.6; font-family: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
  background: #0d1117; color: #e6edf3; tab-size: 2; white-space: pre;
}
.json-key    { color: #79c0ff; }
.json-str    { color: #a5d6ff; }
.json-num    { color: #f0883e; }
.json-bool   { color: #ff7b72; }
.json-null   { color: #8b949e; }

/* ── Spinner ────────────────────────────────────────────────────── */
.spinner { width: 14px; height: 14px; border: 2px solid rgba(255,255,255,0.4); border-top-color: white; border-radius: 50%; animation: spin 0.7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.hidden { display: none !important; }

/* ── Recent Cards Table ─────────────────────────────────────────── */
.table-container {
    background: var(--color-card, #fff);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    overflow: hidden;
}
.table-container table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--txt-s, 1.5rem);
    margin-top: 1rem;
}
.table-container th, .table-container td {
    padding: 0.85rem 1rem;
    text-align: left;
    border-bottom: 1px solid var(--color-border);
}
.table-container th {
    background: rgba(0,0,0,0.02);
    font-weight: 600;
    color: var(--color-text-main);
}
.table-container tr:last-child td { border-bottom: none; }
.table-container--spaced { margin-top: var(--space-m); }
.table-container__title { padding: var(--space-s) var(--space-s) 0; margin: 0; font-size: var(--txt-l); }
.table-container__description { padding: 0 var(--space-s); color: var(--color-text-muted); font-size: var(--txt-s); }
.table-container__meta { color: var(--color-text-muted); }
.template-id { font-size: var(--txt-xs); }
.template-warning { color: var(--color-warning); font-weight: var(--font-weight-semibold); }
.template-dummy { font-weight: var(--font-weight-bold); }
.payload-panel--note { padding: var(--space-s); font-size: var(--txt-s); color: var(--color-text-muted); }

/* settings/branding.html */
.branding-form { max-width: 90rem; margin-inline: auto; }
    .branding-form__title { margin: 0 0 var(--space-xs); color: var(--color-text-main); }
    .branding-form__description { margin: 0 0 var(--space-xl); color: var(--color-text-muted); }
    .branding-grid { display: grid; gap: var(--space-l); margin-bottom: var(--space-xl); }
    .branding-grid--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .branding-grid--colors { grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); gap: var(--space-m); }
    .branding-grid--shape { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .branding-grid__wide { grid-column: 1 / -1; }
    .branding-section-title { margin: 0 0 var(--space-m); padding-bottom: var(--space-xs); border-bottom: var(--border-width) solid var(--color-border); }
    .branding-preview { min-height: 4rem; margin-top: var(--space-xs); padding: var(--space-xs); background: var(--color-bg); border: var(--border-width) dashed var(--color-border); border-radius: var(--radius-control); display: flex; align-items: center; justify-content: center; }
    .branding-preview__logo { max-width: 100%; max-height: 4rem; object-fit: contain; }
    .branding-preview__favicon { width: 3.2rem; height: 3.2rem; object-fit: contain; }
    .branding-preview__placeholder { color: var(--color-text-muted); font-size: var(--txt-xs); }
    .form-input {
        width: 100%;
        padding: 10px;
        border: 1px solid var(--color-border);
        border-radius: 6px;
        box-sizing: border-box;
        font-family: inherit;
        background-color: var(--color-surface);
        color: var(--color-text-main);
    }
    .form-input:focus {
        outline: none;
        border-color: var(--color-primary);
        box-shadow: 0 0 0 2px rgba(13, 148, 136, 0.2);
    }
    .form-input[type="color"] {
        padding: 4px;
        height: 40px;
        cursor: pointer;
    }
    .form-label {
        display: block;
        margin-bottom: 8px;
        font-weight: 500;
        font-size: var(--txt-s, 1.5rem);
        color: var(--color-text-main);
    }
    .form-error {
        color: var(--color-warning);
        font-size: var(--txt-xs, 1.4rem);
        margin-top: 4px;
    }
    .form-help {
        color: var(--color-text-muted);
        display: block;
        margin-top: 4px;
        font-size: var(--txt-xs, 1.4rem);
    }
    @media (max-width: 767px) {
        .branding-grid--two,
        .branding-grid--shape { grid-template-columns: 1fr; }
        .branding-grid__wide { grid-column: auto; }
    }

/* settings/email_provider.html */
.email-provider {
        max-width: 84rem;
        margin: 0 auto;
        display: grid;
        gap: 1.8rem;
    }

    .email-provider__card {
        background: var(--color-surface, #fff);
        border: 1px solid var(--color-border, #e2e8f0);
        border-radius: 16px;
        padding: 2rem;
    }

    .email-provider__title {
        margin: 0 0 .6rem;
        font-size: 2rem;
        color: var(--color-text-main, #0f172a);
    }

    .email-provider__text {
        margin: 0;
        color: var(--color-text-muted, #64748b);
        font-size: 1.4rem;
        line-height: 1.6;
    }

    .email-provider__grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.2rem;
    }

    .email-provider__field {
        display: grid;
        gap: .6rem;
    }

    .email-provider__field--full {
        grid-column: 1 / -1;
    }

    .email-provider__label {
        font-size: 1.3rem;
        font-weight: 600;
        color: var(--color-text-main, #0f172a);
    }

    .email-provider__help {
        font-size: 1.2rem;
        color: var(--color-text-muted, #64748b);
    }

    .email-provider__status {
        display: flex;
        flex-wrap: wrap;
        gap: .8rem;
        margin-top: 1.2rem;
    }

    .email-provider__badge {
        border-radius: 999px;
        padding: .6rem 1rem;
        font-size: 1.2rem;
        font-weight: 600;
        background: #e2e8f0;
        color: #334155;
    }

    .email-provider__badge--ok {
        background: #dcfce7;
        color: #166534;
    }

    .email-provider__actions {
        display: flex;
        justify-content: flex-end;
        margin-top: 1.6rem;
    }

    .email-provider__ops-note {
        margin-top: 1.2rem;
        padding: 1.2rem 1.4rem;
        border-radius: 12px;
        background: #fff7ed;
        border: 1px solid #fdba74;
        color: #9a3412;
        font-size: 1.25rem;
        line-height: 1.55;
    }
    .email-provider__actions--start { justify-content: flex-start; margin-top: 1.2rem; }
    .email-provider__logs { display: grid; gap: .8rem; margin-top: 1.2rem; }
    .email-provider__log { display: grid; grid-template-columns: 1.2fr 1fr .8fr .8fr; gap: 1rem; padding: .9rem 0; border-bottom: 1px solid var(--color-border); font-size: 1.3rem; }
    .email-provider__log-retry { color: #9a3412; font-size: 1.15rem; }
    .email-provider__log-error { color: var(--color-text-muted); font-size: 1.15rem; }
    .email-provider__form-errors { margin-top: 1rem; }

    @media (max-width: 820px) {
        .email-provider__grid {
            grid-template-columns: 1fr;
        }
    }

/* settings/index.html */
.settings-home {
        max-width: 80rem;
        margin: 0 auto;
    }

    .settings-home__title {
        margin-top: 0;
        margin-bottom: var(--space-l, 2rem);
        color: var(--color-text-main);
        font-size: var(--h4, 1.7rem);
    }

    .settings-home__grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-l, 2rem);
    }

    .settings-home__item {
        border: 1px solid var(--color-border);
        border-radius: var(--radius-card, 8px);
        padding: var(--space-l, 2rem);
        text-align: center;
    }

    .settings-home__emoji {
        font-size: var(--h1, 4.8rem);
        margin-bottom: var(--space-m, 1.5rem);
    }

    .settings-home__item-title {
        margin: 0 0 var(--space-xs, 0.8rem);
        color: var(--color-text-main);
        font-size: var(--txt-l, 1.7rem);
    }

    .settings-home__item-text {
        color: var(--color-text-muted);
        margin: 0 0 var(--space-l, 2rem);
        font-size: var(--txt-s, 1.4rem);
        line-height: 1.6;
    }

    .settings-home__link {
        background-color: transparent;
        color: var(--color-primary);
        border: 1px solid var(--color-primary);
        display: inline-block;
    }

    @media (max-width: 760px) {
        .settings-home__grid {
            grid-template-columns: 1fr;
        }
    }

/* settings/profile_merchant.html */
.settings-content {
        display: flex;
        flex-direction: column;
        gap: var(--space-l);
        max-width: 1000px;
        margin: 0 auto;
    }

    .settings-section {
        background: var(--color-surface, #FFFFFF);
        border: 1px solid var(--color-border, #E2E8F0);
        border-radius: var(--radius-card, 12px);
    }

    .settings-section__header {
        padding: var(--space-m) var(--space-l);
        border-bottom: 1px solid var(--color-border, #E2E8F0);
    }

    .settings-section__title {
        font-size: var(--h4, 1.7rem);
        font-weight: 600;
        color: var(--color-text-main, #1E293B);
        margin-bottom: 4px;
    }

    .settings-section__desc {
        font-size: var(--txt-s, 1.4rem);
        color: var(--color-text-muted, #64748B);
    }

    .settings-section__body {
        padding: var(--space-l);
        display: flex;
        flex-direction: column;
        gap: var(--space-m);
    }

    /* Form Fields Grid */
    .form-row {
        display: grid;
        grid-template-columns: 200px 1fr;
        gap: var(--space-m);
        align-items: start;
    }

    .form-row--stack {
        grid-template-columns: 1fr;
    }

    .form-row__label {
        font-weight: 500;
        font-size: var(--txt-s, 1.4rem);
        color: var(--color-text-main, #1E293B);
        padding-top: 10px;
    }

    .form-row__input-group {
        display: flex;
        flex-direction: column;
        gap: 6px;
    }

    .form-help {
        font-size: var(--txt-xs, 1.2rem);
        color: var(--color-text-muted, #64748B);
    }

    /* Fixed Actions Footer */
    .settings-actions {
        position: sticky;
        bottom: 0;
        background: var(--color-surface, #FFFFFF);
        padding: var(--space-m) var(--space-l);
        border-top: 1px solid var(--color-border, #E2E8F0);
        display: flex;
        justify-content: flex-end;
        gap: var(--space-m);
        border-bottom-left-radius: var(--radius-card, 12px);
        border-bottom-right-radius: var(--radius-card, 12px);
    }

    .btn-ghost {
        background: transparent;
        color: var(--color-text-muted, #64748B);
        padding: 10px 20px;
        border-radius: var(--radius-card, 8px);
        border: 1px solid transparent;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.2s;
    }

    .btn-ghost:hover {
        background: var(--color-bg, #F8FAFC);
        color: var(--color-text-main, #1E293B);
    }

    /* Image Upload Widgets */
    .image-preview-widget {
        display: flex;
        align-items: center;
        gap: var(--space-m);
        padding: var(--space-m);
        border: 1px dashed var(--color-border, #CBD5E1);
        border-radius: var(--radius-card, 8px);
        background: var(--color-bg, #F8FAFC);
    }

    .image-preview-widget--vertical {
        flex-direction: column;
        align-items: flex-start;
    }

    .image-preview__box {
        width: 80px;
        height: 80px;
        border-radius: var(--radius-sm, 6px);
        border: 1px solid var(--color-border, #E2E8F0);
        background: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        cursor: pointer;
    }

    .image-preview__box--wide {
        width: 100%;
        height: 140px;
        background-color: var(--color-bg, #F1F5F9);
        background-size: cover;
        background-position: center;
    }

    .image-preview__icon {
        font-size: var(--h1, 4.8rem);
        color: var(--color-text-muted, #94A3B8);
    }

    .color-picker-wrapper {
        display: flex;
        align-items: center;
        gap: var(--space-s);
    }

    .settings-error { margin-bottom: var(--space-l); border-left-width: 4px; }
    .settings-error__title { font-weight: 600; font-size: var(--txt-s); }
    .settings-error__list { margin: var(--space-2xs) 0 0 var(--space-l); font-size: var(--txt-s); }
    .settings-section--spaced { margin-bottom: 6rem; }
    .settings-section__header--icon { display: flex; align-items: center; gap: var(--space-s); }
    .settings-section__icon { width: 4rem; height: 4rem; color: var(--color-primary); background: var(--color-primary-light); border-radius: var(--radius-control); flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
    .settings-section__title--compact { margin-bottom: var(--space-2xs); }
    .settings-section__desc--flush { margin: 0; }
    .brand-grid { display: grid; grid-template-columns: 5fr 2fr 2fr; gap: var(--space-m); align-items: start; }
    .form-row__label--inline { display: flex; align-items: center; gap: var(--space-2xs); }
    .settings-action__icon { font-size: var(--txt-l); }

    @media (max-width: 768px) {
        .form-row { grid-template-columns: 1fr; }
        .form-row__label { padding-top: 0; }
        .brand-grid {
            grid-template-columns: 1fr !important;
        }
    }

/* settings/profile_user.html */
/* Settings View Pattern 05 - Dashboard Creator */
    .settings-layout {
        display: grid;
        grid-template-columns: 240px 1fr;
        gap: var(--space-l);
        max-width: 1000px;
        align-items: start;
    }

    .settings-nav {
        position: sticky;
        top: calc(var(--topbar-height) + var(--space-m));
        display: flex;
        flex-direction: column;
        gap: var(--space-xs);
    }

    .settings-nav__link {
        padding: var(--space-s) var(--space-m);
        color: var(--color-text-muted, #64748B);
        text-decoration: none;
        border-radius: var(--radius-card, 8px);
        font-weight: 500;
        font-size: var(--txt-s, 1.4rem);
        transition: all 0.2s ease;
    }

    .settings-nav__link:hover, .settings-nav__link--active {
        background: var(--color-bg, #F8FAFC);
        color: var(--color-primary, #0D9488);
    }

    .settings-content {
        display: flex;
        flex-direction: column;
        gap: var(--space-l);
    }

    .settings-section {
        background: var(--color-surface, #FFFFFF);
        border: 1px solid var(--color-border, #E2E8F0);
        border-radius: var(--radius-card, 12px);
        overflow: visible;
    }

    .settings-section__header {
        padding: var(--space-m) var(--space-l);
        border-bottom: 1px solid var(--color-border, #E2E8F0);
    }

    .settings-section__title {
        font-size: var(--h4, 1.7rem);
        font-weight: 600;
        color: var(--color-text-main, #1E293B);
        margin-bottom: 4px;
    }

    .settings-section__desc {
        font-size: var(--txt-s, 1.4rem);
        color: var(--color-text-muted, #64748B);
    }

    .settings-section__body {
        padding: var(--space-l);
        display: flex;
        flex-direction: column;
        gap: var(--space-m);
    }

    /* Form Fields Grid */
    .form-row {
        display: grid;
        grid-template-columns: 200px 1fr;
        gap: var(--space-m);
        align-items: start;
    }

    .form-row--stack {
        grid-template-columns: 1fr;
    }

    .form-row__label {
        font-weight: 500;
        font-size: var(--txt-s, 1.4rem);
        color: var(--color-text-main, #1E293B);
        padding-top: 10px;
    }

    .form-row__input-group {
        display: flex;
        flex-direction: column;
        gap: 6px;
    }

    .form-help {
        font-size: var(--txt-xs, 1.2rem);
        color: var(--color-text-muted, #64748B);
    }

    /* Fixed Actions Footer */
    .settings-actions {
        position: sticky;
        bottom: 0;
        background: var(--color-surface, #FFFFFF);
        padding: var(--space-m) var(--space-l);
        border-top: 1px solid var(--color-border, #E2E8F0);
        display: flex;
        justify-content: flex-end;
        gap: var(--space-m);
        border-bottom-left-radius: var(--radius-card, 12px);
        border-bottom-right-radius: var(--radius-card, 12px);
    }

    .btn-ghost {
        background: transparent;
        color: var(--color-text-muted, #64748B);
        padding: 10px 20px;
        border-radius: var(--radius-card, 8px);
        border: 1px solid transparent;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.2s;
    }

    .btn-ghost:hover {
        background: var(--color-bg, #F8FAFC);
        color: var(--color-text-main, #1E293B);
    }

    .settings-error {
        margin-bottom: var(--space-l);
        border-left-width: 4px;
    }
    .settings-error__title { font-weight: 600; font-size: var(--txt-s); }
    .settings-error__list { margin: var(--space-2xs) 0 0 var(--space-l); font-size: var(--txt-s); }
    .settings-section--spaced { margin-bottom: 6rem; }
    .settings-action__icon { font-size: var(--txt-l); }

    @media (max-width: 768px) {
        .settings-layout { grid-template-columns: 1fr; }
        .settings-nav { display: none; }
        .form-row { grid-template-columns: 1fr; }
        .form-row__label { padding-top: 0; }
    }

/* staff/form.html */
.staff-form-page {
        max-width: 72rem;
        margin: 0 auto;
    }

    .staff-form-card {
        padding: var(--space-l, 2.4rem);
    }

    .staff-form-card__header {
        display: flex;
        flex-direction: column;
        gap: var(--space-xs, 0.8rem);
        margin-bottom: var(--space-l, 2.4rem);
    }

    .staff-form-card__eyebrow {
        margin: 0;
        color: var(--color-primary, #0D9488);
        font-size: var(--txt-xs, 1.4rem);
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }

    .staff-form-card__title {
        margin: 0;
        color: var(--color-text-main, #0F172A);
        font-size: var(--h3, 4.2rem);
        line-height: 1.05;
    }

    .staff-form-card__subtitle {
        margin: 0;
        max-width: 52rem;
        color: var(--color-text-muted, #64748B);
        font-size: var(--txt-m, 1.8rem);
        line-height: 1.6;
    }

    .staff-form {
        display: flex;
        flex-direction: column;
        gap: var(--space-m, 1.6rem);
    }

    .staff-form__alert {
        padding: var(--space-s, 1.2rem) var(--space-m, 1.6rem);
        border: 1px solid #FECACA;
        border-radius: var(--radius-md, 1.6rem);
        background: #FEF2F2;
        color: #B91C1C;
        font-size: var(--txt-s, 1.5rem);
        line-height: 1.6;
    }

    .staff-form__fields {
        display: grid;
        gap: var(--space-m, 1.6rem);
    }

    .staff-form__group {
        display: flex;
        flex-direction: column;
        gap: var(--space-2xs, 0.4rem);
    }

    .staff-form__group input[type="text"],
    .staff-form__group input[type="email"],
    .staff-form__group input[type="password"],
    .staff-form__group input[type="url"],
    .staff-form__group input[type="number"],
    .staff-form__group input[type="tel"],
    .staff-form__group select,
    .staff-form__group textarea {
        width: 100%;
        min-height: 4.8rem;
        padding: 1.1rem 1.4rem;
        border: 1px solid var(--color-border, #CFFAFE);
        border-radius: var(--radius-control, 0.8rem);
        background: var(--color-bg, #FFFFFF);
        color: var(--color-text-main, #1E293B);
        font-family: inherit;
        font-size: var(--txt-s, 1.5rem);
        line-height: 1.4;
        box-sizing: border-box;
        transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
    }

    .staff-form__group input::placeholder,
    .staff-form__group textarea::placeholder {
        color: var(--color-text-muted, #94A3B8);
    }

    .staff-form__group input[type="text"]:focus,
    .staff-form__group input[type="email"]:focus,
    .staff-form__group input[type="password"]:focus,
    .staff-form__group input[type="url"]:focus,
    .staff-form__group input[type="number"]:focus,
    .staff-form__group input[type="tel"]:focus,
    .staff-form__group select:focus,
    .staff-form__group textarea:focus {
        outline: none;
        border-color: var(--color-primary, #0D9488);
        box-shadow: 0 0 0 0.3rem color-mix(in srgb, var(--color-primary, #0D9488) 14%, transparent);
        background: #FFFFFF;
    }

    .staff-form__group input[type="checkbox"] {
        width: 1.8rem;
        height: 1.8rem;
        margin: 0;
        accent-color: var(--color-primary, #0D9488);
        flex-shrink: 0;
    }

    .staff-form__group--checkbox {
        padding: var(--space-s, 1.2rem) var(--space-m, 1.6rem);
        border: 1px solid var(--color-border, #CFFAFE);
        border-radius: var(--radius-control, 0.8rem);
        background: var(--color-surface, #F0FDFA);
    }

    .staff-form__label {
        margin: 0;
        color: var(--color-text-main, #0F172A);
        font-size: var(--txt-s, 1.5rem);
        font-weight: 600;
        line-height: 1.4;
    }

    .staff-form__checkbox-row {
        display: flex;
        align-items: flex-start;
        gap: var(--space-s, 1.2rem);
    }

    .staff-form__checkbox-copy {
        display: flex;
        flex-direction: column;
        gap: var(--space-2xs, 0.4rem);
    }

    .staff-form__help {
        margin: 0;
        color: var(--color-text-muted, #64748B);
        font-size: var(--txt-xs, 1.4rem);
        line-height: 1.6;
    }

    .staff-form__group--checkbox .staff-form__help {
        max-width: 48rem;
    }

    .staff-form__errors {
        margin: 0;
        color: #DC2626;
        font-size: var(--txt-xs, 1.4rem);
        line-height: 1.5;
    }

    .staff-form__errors ul {
        margin: 0;
        padding-left: var(--space-m, 1.6rem);
    }

    .staff-form__actions {
        display: flex;
        justify-content: flex-end;
        gap: var(--space-s, 1.2rem);
        padding-top: var(--space-m, 1.6rem);
        border-top: 1px solid var(--color-border, #CFFAFE);
    }

    .staff-form__action {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 16rem;
        min-height: 4.8rem;
        padding: var(--space-s, 1.2rem) var(--space-m, 1.6rem);
        border-radius: var(--radius-control, 0.8rem);
        border: 1px solid var(--color-border, #CFFAFE);
        font-size: var(--txt-s, 1.5rem);
        font-weight: 600;
        line-height: 1;
        text-decoration: none;
        transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
        cursor: pointer;
    }

    .staff-form__action:hover {
        transform: translateY(-0.1rem);
    }

    .staff-form__action--secondary {
        background: var(--color-bg, #FFFFFF);
        color: var(--color-text-muted, #64748B);
    }

    .staff-form__action--secondary:hover {
        background: var(--color-surface, #F0FDFA);
        border-color: var(--color-primary, #0D9488);
        color: var(--color-text-main, #1E293B);
    }

    .staff-form__action--primary {
        border-color: var(--color-primary, #0D9488);
        background: var(--color-primary, #0D9488);
        color: var(--color-text-on-primary, #FFFFFF);
        box-shadow: 0 1.2rem 2.4rem rgba(13, 148, 136, 0.16);
    }

    .staff-form__action--primary:hover {
        box-shadow: 0 1.6rem 3.2rem rgba(13, 148, 136, 0.22);
    }

    @media (max-width: 767px) {
        .staff-form-card {
            padding: var(--space-m, 1.6rem);
        }

        .staff-form-card__title {
            font-size: var(--h4, 3.4rem);
        }

        .staff-form__actions {
            flex-direction: column-reverse;
        }

        .staff-form__action {
            width: 100%;
        }
    }

/* test_facebook_scraper.html */
/* 
 * BEM & Brand Identity Kavto CSS 
 * Exclusivo para esta vista, sin pisar estilos globales
 */
:root {
    --k-primary: #0D9488;
    --k-primary-hover: #0F766E;
    --k-primary-light: #CCFBF1;
    --k-bg: #FFFFFF;
    --k-surface: #F0FDFA;
    --k-border: #CFFAFE;
    --k-text-main: #1E293B;
    --k-text-muted: #64748B;
    --k-danger: #EF4444;
    --k-danger-light: #FEE2E2;
}

.kavto-scraper {
    max-width: 540px;
    margin: 60px auto;
    font-family: 'Manrope', sans-serif;
}

.kavto-scraper__header {
    text-align: center;
    margin-bottom: 40px;
}

.kavto-scraper__title {
    color: var(--k-text-main);
    font-weight: 800;
    font-size: 32px;
    margin-bottom: 12px;
    letter-spacing: -0.8px;
}

.kavto-scraper__subtitle {
    color: var(--k-text-muted);
    font-size: var(--txt-m, 1.7rem);
    line-height: 1.6;
    max-width: 400px;
    margin: 0 auto;
}

.kavto-scraper__form {
    margin-bottom: 40px;
}

.kavto-scraper__input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    background: var(--k-bg);
    border: 2px solid var(--k-border);
    border-radius: 999px;
    padding: 8px;
    padding-left: 24px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 20px rgba(13, 148, 136, 0.05);
}

.kavto-scraper__input-wrapper:focus-within {
    border-color: var(--k-primary);
    box-shadow: 0 0 0 4px var(--k-primary-light);
}

.kavto-scraper__icon {
    color: var(--k-text-muted);
    margin-right: 12px;
    flex-shrink: 0;
}

.kavto-scraper__input {
    flex-grow: 1;
    border: none;
    background: transparent;
    font-size: var(--txt-m, 1.7rem);
    font-weight: 500;
    color: var(--k-text-main);
    outline: none;
    font-family: inherit;
    width: 100%;
}

.kavto-scraper__input::placeholder {
    color: #94A3B8;
    font-weight: 400;
}

.kavto-btn {
    border: none;
    outline: none;
    cursor: pointer;
    font-family: inherit;
    font-weight: 700;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.kavto-btn--primary {
    background: var(--k-primary);
    color: #FFF;
    border-radius: 999px;
    padding: 14px 32px;
    font-size: var(--txt-m, 1.7rem);
    box-shadow: 0 4px 12px rgba(13, 148, 136, 0.25);
}

.kavto-btn--primary:hover {
    background: var(--k-primary-hover);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(13, 148, 136, 0.35);
}

.kavto-alert {
    margin-top: 20px;
    border-radius: 20px;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: var(--txt-s, 1.5rem);
    font-weight: 600;
}

.kavto-alert--error {
    background: var(--k-danger-light);
    color: var(--k-danger);
    border: 1px solid rgba(239, 68, 68, 0.15);
}

.kavto-card {
    background: var(--k-bg);
    border-radius: 28px;
    border: 1px solid var(--k-border);
    box-shadow: 0 12px 32px rgba(13, 148, 136, 0.08);
    overflow: hidden;
    position: relative;
    padding-bottom: 28px;
}

.kavto-card__cover {
    height: 200px;
    background: var(--k-surface);
    position: relative;
}

.kavto-card__cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.kavto-card__avatar-container {
    display: flex;
    justify-content: center;
    margin-top: -75px;
    position: relative;
    z-index: 2;
}

.kavto-card__avatar {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    border: 6px solid var(--k-bg);
    background: var(--k-surface);
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
    object-fit: cover;
}

.kavto-card__info {
    text-align: center;
    padding: 20px 24px 0;
}

.kavto-card__name {
    margin: 0 0 12px;
    color: var(--k-text-main);
    font-weight: 800;
    font-size: 24px;
    letter-spacing: -0.4px;
}

.kavto-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--k-primary-light);
    color: var(--k-primary);
    padding: 6px 14px;
    border-radius: 999px;
    font-size: var(--txt-s, 1.5rem);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.skeleton-anim {
    background: linear-gradient(90deg, var(--k-surface) 25%, #E2FCF8 50%, var(--k-surface) 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s infinite;
}

@keyframes skeleton-loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.skeleton-text {
    height: 20px;
    border-radius: 10px;
    margin: 0 auto;
    background: var(--k-surface);
}

.skeleton-title {
    width: 60%;
    height: 28px;
    margin-bottom: 16px;
}

.skeleton-subtitle {
    width: 40%;
}

/* ---------- LIST VIEW STYLES ---------- */
.kavto-list {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.kavto-list-item {
    display: flex;
    align-items: center;
    padding: 16px;
    background: var(--k-surface);
    border: 1px solid var(--k-border);
    border-radius: 16px;
    text-decoration: none;
    transition: all 0.2s ease;
}
.kavto-list-item:hover {
    background: var(--k-primary-light);
    border-color: var(--k-primary);
    transform: translateY(-2px);
}
.kavto-list-item__icon {
    width: 48px;
    height: 48px;
    background: var(--k-bg);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 16px;
    flex-shrink: 0;
    color: var(--k-primary);
}
.kavto-list-item__info {
    flex-grow: 1;
}
.kavto-list-item__name {
    color: var(--k-text-main);
    font-size: var(--txt-m, 1.7rem);
    font-weight: 700;
    margin: 0 0 4px;
}
.kavto-list-item__url {
    color: var(--k-text-muted);
    font-size: var(--txt-s, 1.5rem);
    margin: 0;
    word-break: break-all;
}
.kavto-list-item__action {
    color: var(--k-primary);
    background: var(--k-bg);
    padding: 8px 16px;
    border-radius: 999px;
    font-size: var(--txt-s, 1.5rem);
    font-weight: 700;
}

/* Modificadores estado oculto nativo puro o bootstrap d-none heredado */
.kl-hidden {
    display: none !important;
}

/* test_tools.html */
/* ── Layout general ─────────────────────────────────────────────────────── */
.tt-wrap {
    max-width: 820px;
    margin: 0 auto;
    padding: 1.5rem 2rem 4rem;
}
.tt-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}
.tt-header h1 {
    font-size: var(--h4, 2rem);
    font-weight: 700;
    color: #1e293b;
    margin: 0;
}
.tt-badge {
    font-size: var(--txt-xs, 1.4rem);
    font-weight: 700;
    background: #fef3c7;
    color: #92400e;
    border: 1px solid #f59e0b;
    border-radius: 4px;
    padding: 0.1rem 0.5rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

/* ── Tabs ───────────────────────────────────────────────────────────────── */
.tt-tabs {
    display: flex;
    gap: 0;
    border-bottom: 2px solid #e2e8f0;
    margin-bottom: 1.5rem;
}
.tt-tab {
    padding: 0.6rem 1.25rem;
    font-size: var(--txt-xs, 1.4rem);
    font-weight: 600;
    color: #64748b;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: color 0.2s, border-color 0.2s;
    background: none;
    border-top: none;
    border-left: none;
    border-right: none;
}
.tt-tab:hover { color: #0d9488; }
.tt-tab.active { color: #0d9488; border-bottom-color: #0d9488; }
.tt-panel { display: none; }
.tt-panel.active { display: block; }

/* ── Cards recientes ────────────────────────────────────────────────────── */
.tt-table-wrap {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 1.25rem;
}
.tt-table-wrap table { width: 100%; border-collapse: collapse; font-size: var(--txt-xs, 1.4rem); }
.tt-table-wrap th, .tt-table-wrap td { padding: 0.6rem 0.9rem; text-align: left; border-bottom: 1px solid #f1f5f9; }
.tt-table-wrap th { background: #f8fafc; font-weight: 600; color: #475569; font-size: var(--txt-xs, 1.4rem); text-transform: uppercase; letter-spacing: 0.04em; }
.tt-table-wrap tr:last-child td { border-bottom: none; }
.tt-table-wrap tr:hover td { background: #f8fafc; }
.mono { font-family: 'JetBrains Mono', 'Cascadia Code', monospace; font-size: 0.8em; font-weight: 700; }
.pill {
    display: inline-block;
    font-size: var(--txt-xs, 1.4rem);
    font-weight: 700;
    padding: 0.15rem 0.5rem;
    border-radius: 99px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.pill-stamps { background: #dbeafe; color: #1e40af; }
.pill-points { background: #d1fae5; color: #065f46; }
.pill-discount { background: #fce7f3; color: #9d174d; }

/* ── Form elements ──────────────────────────────────────────────────────── */
.tt-field { margin-bottom: 1rem; }
.tt-field label { display: block; font-size: var(--txt-xs, 1.4rem); font-weight: 600; color: #334155; margin-bottom: 0.35rem; }
.tt-field input,
.tt-field select,
.tt-field textarea {
    width: 100%;
    padding: 0.65rem 0.9rem;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: var(--txt-s, 1.5rem);
    background: white;
    color: #1e293b;
    box-sizing: border-box;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.tt-field input:focus,
.tt-field select:focus,
.tt-field textarea:focus {
    outline: none;
    border-color: #0d9488;
    box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.1);
}
.tt-field textarea { resize: vertical; }

/* ── Buttons ────────────────────────────────────────────────────────────── */
.tt-wrap .btn-row { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }
.tt-wrap .btn {
    padding: 0.6rem 1.25rem;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    font-size: var(--txt-xs, 1.4rem);
    transition: all 0.15s;
    white-space: nowrap;
    line-height: 1;
}
.tt-wrap .btn:disabled { opacity: 0.5; cursor: not-allowed; }
.tt-wrap .btn-primary { background: #0d9488; color: white; }
.tt-wrap .btn-primary:hover:not(:disabled) { background: #0f766e; }
.tt-wrap .btn-secondary { background: #f1f5f9; color: #334155; border: 1px solid #e2e8f0; }
.tt-wrap .btn-secondary:hover:not(:disabled) { background: #e2e8f0; }
.tt-wrap .btn-danger { background: #ef4444; color: white; }
.tt-wrap .btn-danger:hover:not(:disabled) { background: #dc2626; }
.tt-wrap .btn-warning { background: #f59e0b; color: white; }
.tt-wrap .btn-warning:hover:not(:disabled) { background: #d97706; }
.tt-wrap .btn-sm { padding: 0.3rem 0.65rem; font-size: 0.72rem; border-radius: 6px; }
.tt-wrap .btn-copy { background: #e2e8f0; border: none; padding: 0.2rem 0.5rem; border-radius: 4px; font-size: 0.72rem; cursor: pointer; color: #475569; }
.tt-wrap .btn-copy:hover { background: #cbd5e1; }

/* ── Card Info Panel ────────────────────────────────────────────────────── */
.tt-card-panel {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 1.25rem;
    margin: 1rem 0;
    display: none;
}
.tt-card-panel.visible { display: block; }
.tt-card-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.tt-card-panel-header h3 { font-size: var(--txt-s, 1.5rem); font-weight: 700; color: #1e293b; margin: 0; }
.tt-card-meta { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.6rem; margin-bottom: 1rem; }
.tt-card-meta-item { font-size: var(--txt-xs, 1.4rem); }
.tt-card-meta-item .label { color: #64748b; font-weight: 500; display: block; font-size: 0.73rem; margin-bottom: 0.1rem; }
.tt-card-meta-item .value { color: #1e293b; font-weight: 600; }
.tt-card-meta-item .value.mono-sm { font-family: monospace; font-size: 0.78em; }
.tt-class-id { grid-column: 1 / -1; }

/* ── Action sections dentro del card panel ──────────────────────────────── */
.tt-action-block {
    border-top: 1px solid #e2e8f0;
    padding-top: 1rem;
    margin-top: 1rem;
    display: none;
}
.tt-action-block.visible { display: block; }
.tt-action-block h4 { font-size: var(--txt-xs, 1.4rem); font-weight: 700; color: #334155; margin: 0 0 0.75rem 0; }
.tt-action-row { display: flex; gap: 0.5rem; align-items: center; margin-bottom: 0.5rem; }
.tt-action-row input[type="number"] { width: 75px; padding: 0.55rem 0.75rem; border: 1px solid #e2e8f0; border-radius: 7px; font-size: var(--txt-s, 1.5rem); }

/* ── Result box ─────────────────────────────────────────────────────────── */
.tt-result {
    margin-top: 1rem;
    padding: 0.85rem 1rem;
    border-radius: 8px;
    font-size: var(--txt-xs, 1.4rem);
    font-weight: 500;
    display: none;
}
.tt-result.success { background: #d1fae5; border: 1px solid #10b981; color: #065f46; }
.tt-result.error   { background: #fee2e2; border: 1px solid #ef4444; color: #991b1b; }
.tt-result.info    { background: #dbeafe; border: 1px solid #3b82f6; color: #1e40af; }
.tt-result.warning { background: #fef3c7; border: 1px solid #f59e0b; color: #92400e; }

/* ── Template selector (Tab 2) ──────────────────────────────────────────── */
.tt-template-card {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 1.25rem;
    margin-bottom: 1rem;
}
.tt-template-card h3 { font-size: var(--txt-s, 1.5rem); font-weight: 700; color: #1e293b; margin: 0 0 0.25rem 0; }
.tt-template-card .sub { font-size: var(--txt-xs, 1.4rem); color: #64748b; margin: 0 0 0.75rem 0; font-family: monospace; }

/* ── JSON Viewer Modal ──────────────────────────────────────────────────── */
.tt-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    z-index: 9000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}
.tt-modal-backdrop.open { display: flex; }
.tt-modal {
    background: white;
    border-radius: 12px;
    box-shadow: 0 25px 60px rgba(0,0,0,0.25);
    width: 100%;
    max-width: 680px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.tt-modal-header {
    padding: 1rem 1.25rem 0.75rem;
    border-bottom: 1px solid #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.tt-modal-header h4 { font-size: var(--txt-s, 1.5rem); font-weight: 700; color: #1e293b; margin: 0; }
.tt-modal-close { background: none; border: none; cursor: pointer; font-size: var(--h4, 2rem); color: #94a3b8; line-height: 1; padding: 0; }
.tt-modal-close:hover { color: #ef4444; }
.tt-modal-body {
    overflow-y: auto;
    padding: 1rem 1.25rem;
}
.tt-modal-meta { font-size: var(--txt-xs, 1.4rem); color: #64748b; margin-bottom: 0.75rem; }
.tt-json-pre {
    background: #0f172a;
    color: #e2e8f0;
    border-radius: 8px;
    padding: 1rem;
    font-family: 'JetBrains Mono', 'Cascadia Code', monospace;
    font-size: 0.72rem;
    line-height: 1.6;
    overflow-x: auto;
    white-space: pre;
    max-height: 50vh;
}

/* ── Diagnóstico ─────────────────────────────────────────────────────────── */
.tt-diag-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; margin-bottom: 1rem; }
.tt-diag-item {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 0.9rem 1rem;
}
.tt-diag-item .diag-label { font-size: var(--txt-xs, 1.4rem); font-weight: 600; color: #64748b; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.3rem; }
.tt-diag-item .diag-value { font-size: var(--txt-s, 1.5rem); font-weight: 700; color: #1e293b; word-break: break-all; }
.tt-diag-item .diag-value.ok  { color: #059669; }
.tt-diag-item .diag-value.err { color: #dc2626; }
.tt-diag-item .diag-value.warn { color: #d97706; }
.tt-diag-item.span-2 { grid-column: 1 / -1; }

/* ── Push header field ───────────────────────────────────────────────────── */
.tt-push-header-row { display: flex; gap: 0.5rem; margin-bottom: 0.5rem; }
.tt-push-header-row input { flex: 1; padding: 0.55rem 0.9rem; border: 1px solid #e2e8f0; border-radius: 8px; font-size: var(--txt-s, 1.5rem); }

/* ── Loading spinner ─────────────────────────────────────────────────────── */
.spinner {
    display: inline-block;
    width: 14px; height: 14px;
    border: 2px solid rgba(255,255,255,0.4);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
    vertical-align: middle;
    margin-right: 0.3rem;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Section dividers ────────────────────────────────────────────────────── */
.tt-section { margin-bottom: 1.25rem; }
.tt-section-title { font-size: var(--txt-xs, 1.4rem); font-weight: 700; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.07em; margin-bottom: 0.75rem; }

/* widgets/image_cropper.html */
/* Scope styles to the widget wrapper */
    .cropper-widget-wrapper {
        font-family: inherit;
        position: relative;
    }

    /* Preview Box Styles */
    .cropper-preview-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background-color: var(--color-surface, #f8fafc);
        border: 2px dashed var(--color-border, #cbd5e1);
        border-radius: 12px;
        overflow: hidden;
        position: relative;
        cursor: pointer;
        transition: all 0.2s;
        margin-bottom: 8px;
    }

    .cropper-preview-container.cropper-size-small {
        width: 75px;
        height: 75px;
        min-height: 75px;
        border-radius: 8px;
    }

    .cropper-preview-container.cropper-size-large {
        width: 100%;
        max-width: 100%;
    }

    .cropper-preview-container:hover {
        border-color: var(--color-primary, #0D9488);
        background-color: var(--color-primary-light, #CCFBF1);
    }

    .cropper-preview-image {
        display: block;
        max-width: 100%;
        object-fit: cover;
    }

    .cropper-preview-image[hidden] {
        display: none;
    }

    .cropper-size-small .cropper-preview-image {
        width: 65px;
        height: 65px;
        object-fit: contain;
        padding: 5px;
    }

    .cropper-size-large .cropper-preview-image {
        width: 100%;
        height: auto;
        max-height: 150px;
        object-fit: cover;
    }

    .cropper-placeholder {
        display: flex;
        flex-direction: column;
        align-items: center;
        color: var(--color-text-muted, #94a3b8);
        padding: 12px;
        text-align: center;
    }

    .cropper-size-small .cropper-placeholder {
        padding: 4px;
    }

    .cropper-size-small .cropper-placeholder span {
        display: none;
    }

    .cropper-size-small .cropper-actions {
        top: 2px;
        right: 2px;
        gap: 2px;
    }

    .cropper-size-small .cropper-btn-action {
        width: 20px;
        height: 20px;
    }

    .cropper-size-small .cropper-btn-action svg {
        width: 10px;
        height: 10px;
    }

    /* Acciones: Clear & Upload */
    .cropper-actions {
        position: absolute;
        top: 8px;
        right: 8px;
        display: flex;
        gap: 8px;
        z-index: 10;
        opacity: 0;
        transition: opacity 0.2s;
    }
    
    .cropper-preview-container:hover .cropper-actions {
        opacity: 1;
    }

    /* FIX: When circular AND large, center the actions so they don't clip at the rounded edges */
    .cropper-size-large.cropper-is-circular .cropper-actions {
        top: 50% !important;
        left: 50% !important;
        right: auto !important;
        transform: translate(-50%, -50%) !important;
        width: 100%;
        justify-content: center;
    }

    .cropper-btn-action {
        width: 28px;
        height: 28px;
        border-radius: 50%;
        background: rgba(0,0,0,0.6);
        border: none;
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        padding: 0;
    }

    .cropper-btn-action:hover {
        background: rgba(0,0,0,0.8);
    }

    /* Real File Input (Hidden natively) */
    .cropper-file-input {
        display: none !important;
    }

    /* ─── Modal Styles ─── */
    .k-cropper-modal-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.7);
        backdrop-filter: blur(4px);
        z-index: 9999;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.2s ease;
    }

    .k-cropper-modal-overlay.active {
        opacity: 1;
        pointer-events: auto;
    }

    .k-cropper-modal {
        background: #fff;
        border-radius: 12px;
        width: 95%;
        max-width: 800px;
        max-height: 92vh;
        display: flex;
        flex-direction: column;
        box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        transform: scale(0.95);
        transition: transform 0.2s ease;
        overflow: hidden;
    }

    .k-cropper-modal-overlay.active .k-cropper-modal {
        transform: scale(1);
    }

    .k-cropper-modal-header {
        padding: 16px 20px;
        border-bottom: 1px solid #e2e8f0;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .k-cropper-modal-header h3 {
        margin: 0;
        font-family: var(--bs-body-font-family, "Nunito", sans-serif);
        font-size: var(--h4, 2rem);
        font-weight: 700;
        letter-spacing: -0.01em;
        color: #0f172a;
    }

    .k-cropper-modal-close {
        background: transparent;
        border: none;
        color: #64748b;
        cursor: pointer;
        padding: 4px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 4px;
    }

    .k-cropper-modal-close:hover {
        background: #f1f5f9;
        color: #0f172a;
    }

    .k-cropper-modal-body {
        padding: 16px;
        background-color: #f1f5f9;
        display: flex;
        flex: 1 1 auto;
        min-height: 0;
        overflow: auto;
    }

    .k-cropper-image-wrapper {
        width: 100%;
        height: min(56vh, 620px);
        min-height: 280px;
        max-height: 100%;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .k-cropper-image-wrapper img {
        display: block;
        max-width: 100%;
        max-height: 100%;
    }

    .k-cropper-modal-footer {
        padding: 16px 20px;
        border-top: 1px solid #e2e8f0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: #fff;
    }

    .cropper-toolbar {
        display: flex;
        gap: 8px;
    }

    .cropper-tool-btn {
        background: #f1f5f9;
        border: 1px solid #cbd5e1;
        border-radius: 6px;
        padding: 6px 10px;
        color: #475569;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: var(--txt-s, 1.5rem);
        transition: all 0.2s;
    }

    .cropper-tool-btn:hover {
        background: #e2e8f0;
        color: #1e293b;
    }

    .cropper-action-btns {
        display: flex;
        gap: 12px;
    }

    .cropper-btn-cancel {
        background: transparent;
        border: 1px solid #cbd5e1;
        padding: 8px 16px;
        border-radius: 8px;
        color: #475569;
        font-weight: 500;
        cursor: pointer;
    }

    .cropper-btn-confirm {
        background: var(--color-primary, #0D9488);
        border: none;
        padding: 8px 16px;
        border-radius: 8px;
        color: white;
        font-weight: 500;
        cursor: pointer;
    }

    /* ─── CropperJS Overrides (Bordes más gruesos) ─── */
    .cropper-view-box {
        outline: 3px solid #0D9488;
        outline-color: rgba(13, 148, 136, 0.85); /* Primary color */
    }
    
    /* Circular Mode Support */
    .k-cropper-modal-overlay.is-circular .cropper-view-box,
    .k-cropper-modal-overlay.is-circular .cropper-face {
        border-radius: 50%;
    }
    
    .cropper-line {
        background-color: #0D9488;
    }
    .cropper-line.line-e { width: 4px; }
    .cropper-line.line-n { height: 4px; }
    .cropper-line.line-w { width: 4px; }
    .cropper-line.line-s { height: 4px; }
    
    .cropper-point {
        background-color: #0D9488;
        width: 12px;
        height: 12px;
        opacity: 0.9;
    }
    .cropper-point.point-e { width: 8px; margin-top: -4px; }
    .cropper-point.point-n { height: 8px; margin-left: -4px; }
    .cropper-point.point-w { width: 8px; margin-top: -4px; }
    .cropper-point.point-s { height: 8px; margin-left: -4px; }
    .cropper-point.point-ne, .cropper-point.point-nw, .cropper-point.point-sw, .cropper-point.point-se {
        width: 14px;
        height: 14px;
    }
    /* Añadir algo de sombra para mejorar el contraste sobre imágenes blancas */
    .cropper-view-box, .cropper-point, .cropper-line {
        box-shadow: 0 0 2px rgba(0,0,0,0.5);
    }
    
    /* ─── Mobile Adjustments ─── */
    @media (max-width: 767px) {
        .k-cropper-modal {
            width: 95%;
            height: 86vh;
            border-radius: 12px;
            margin: auto;
            display: flex;
            flex-direction: column;
        }
        .k-cropper-modal-body {
            max-height: none;
            flex: 1;
            display: flex;
            flex-direction: column;
            padding: 8px;
            min-height: 0;
            overflow: auto;
        }
        .k-cropper-image-wrapper {
            flex: 1;
            min-height: 0;
            height: min(48vh, 480px);
            max-height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .k-cropper-image-wrapper img {
            max-height: 100%;
            object-fit: contain;
        }
        .k-cropper-modal-footer {
            flex-shrink: 0; /* Impide que el footer colapse */
            flex-direction: column;
            gap: 12px;
            padding: 12px;
        }
        .cropper-toolbar {
            width: 100%;
            justify-content: space-between;
        }
        .cropper-action-btns {
            width: 100%;
            display: flex;
            gap: 8px;
        }
        .cropper-action-btns button {
            flex: 1;
        }
        .cropper-btn-change-image {
            margin-right: 0 !important;
        }
    }

/* widgets/onboarding_banner.html */
.sidebar-setup,
.mobile-setup-link {
    text-decoration: none;
}

.sidebar-setup {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: clamp(0.65rem, 1vw, 1rem);
    padding: clamp(0.75rem, 1vw, 0.95rem);
    color: #0f766e;
    background: linear-gradient(135deg, #ecfdf5, #cffafe);
    border: 1px solid #99f6e4;
    border-radius: 1rem;
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}

.sidebar-setup:hover,
.sidebar-setup.is-active {
    border-color: var(--color-primary, #0d9488);
    box-shadow: 0 8px 20px rgba(13, 148, 136, 0.12);
    transform: translateY(-1px);
}

.sidebar-setup__icon {
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    color: #fff;
    background: var(--color-primary, #0d9488);
    border-radius: 0.7rem;
    font-size: 1.3rem;
}

.sidebar-setup__copy {
    display: grid;
    min-width: 0;
}

.sidebar-setup__copy strong {
    overflow: hidden;
    font-size: clamp(1.15rem, 0.8vw, 1.3rem);
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar-setup__copy span {
    margin-top: 0.15rem;
    font-size: clamp(1rem, 0.7vw, 1.1rem);
    line-height: 1.3;
    color: #52716e;
}

.sidebar-setup__pct {
    font-size: clamp(1.05rem, 0.72vw, 1.15rem);
    font-weight: 800;
}

.sidebar.collapsed .sidebar-setup {
    display: flex;
    justify-content: center;
    padding: 0.65rem;
}

.sidebar.collapsed .sidebar-setup__copy,
.sidebar.collapsed .sidebar-setup__pct {
    display: none;
}

.ob-reminder {
    display: grid;
    grid-template-columns: auto minmax(14rem, 1fr) minmax(8rem, 12rem) auto;
    align-items: center;
    gap: clamp(0.75rem, 1.5vw, 1.35rem);
    margin-bottom: clamp(1rem, 2vw, 1.5rem);
    padding: clamp(0.9rem, 1.7vw, 1.25rem) clamp(1rem, 2vw, 1.5rem);
    background: linear-gradient(135deg, #f0fdfa 0%, #ecfeff 100%);
    border: 1px solid #bae6e2;
    border-radius: clamp(1rem, 1.5vw, 1.35rem);
}

.ob-reminder__icon {
    display: grid;
    place-items: center;
    width: clamp(2.75rem, 4vw, 3.4rem);
    height: clamp(2.75rem, 4vw, 3.4rem);
    color: #fff;
    background: var(--color-primary, #0d9488);
    border-radius: 1rem;
}

.ob-reminder__copy {
    display: grid;
    gap: 0.18rem;
}

.ob-reminder__copy strong {
    font-size: clamp(1.4rem, 1.15vw, 1.65rem);
    line-height: 1.3;
}

.ob-reminder__copy span {
    font-size: clamp(1.2rem, 1vw, 1.4rem);
    line-height: 1.45;
    color: var(--color-text-muted, #64748b);
}

.ob-reminder__progress {
    display: grid;
    gap: 0.35rem;
    color: #0f766e;
    font-size: clamp(1.05rem, 0.8vw, 1.2rem);
    font-weight: 800;
}

.ob-reminder__track,
.getting-started__track {
    height: 0.45rem;
    overflow: hidden;
    background: rgba(13, 148, 136, 0.14);
    border-radius: 999px;
}

.ob-reminder__track span,
.getting-started__track span {
    display: block;
    width: 0;
    height: 100%;
    background: var(--color-primary, #0d9488);
    border-radius: inherit;
}

.ob-reminder__action,
.setup-step__action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    color: #fff;
    background: var(--color-primary, #0d9488);
    border-radius: 0.8rem;
    padding: 0.75rem 1rem;
    font-size: var(--txt-s);
    font-weight: 750;
    text-decoration: none;
    white-space: nowrap;
}

.ob-reminder__action .material-symbols-outlined,
.setup-step__action .material-symbols-outlined {
    font-size: 1.7rem;
}

.getting-started {
    display: grid;
    gap: clamp(1.25rem, 2.5vw, 2rem);
    max-width: 68rem;
    margin-inline: auto;
}

.getting-started__hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: clamp(1rem, 2.5vw, 2rem);
    padding: clamp(1.4rem, 3vw, 2.5rem);
    background: linear-gradient(135deg, #f0fdfa 0%, #cffafe 100%);
    border: 1px solid #bae6e2;
    border-radius: clamp(1.25rem, 2vw, 1.75rem);
}

.getting-started__eyebrow {
    color: #0f766e;
    font-size: var(--txt-xs);
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.getting-started__hero h1 {
    margin: 0.35rem 0 0.5rem;
    font-size: var(--h2);
    font-weight: var(--font-weight-bold);
    line-height: 1.12;
}

.getting-started__hero p {
    max-width: 48rem;
    margin: 0;
    color: var(--color-text-muted, #64748b);
    font-size: var(--txt-m);
    line-height: 1.6;
}

.getting-started__score {
    display: grid;
    align-content: center;
    justify-items: end;
}

.getting-started__score strong {
    color: var(--color-primary, #0d9488);
    font-size: var(--h1);
    line-height: 1;
}

.getting-started__score span {
    margin-top: 0.4rem;
    color: #52716e;
    font-size: var(--txt-xs);
}

.getting-started__track {
    grid-column: 1 / -1;
    height: 0.65rem;
}

.getting-started__list {
    display: grid;
    gap: clamp(0.75rem, 1.5vw, 1rem);
}

.setup-step {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr) auto;
    align-items: center;
    gap: clamp(0.75rem, 1.6vw, 1.25rem);
    padding: clamp(1rem, 2vw, 1.4rem);
    background: #fff;
    border: 1px solid var(--color-border, #dce4e8);
    border-radius: clamp(1rem, 1.5vw, 1.25rem);
}

.setup-step.is-complete {
    background: #f8fffd;
    border-color: #a7f3d0;
}

.setup-step__status,
.setup-step__icon {
    display: grid;
    place-items: center;
    flex: none;
    border-radius: 999px;
}

.setup-step__status {
    width: 2.8rem;
    height: 2.8rem;
    color: #fff;
    background: var(--color-primary, #0d9488);
    font-size: var(--txt-xs);
    font-weight: 800;
}

.setup-step__status .material-symbols-outlined {
    font-size: var(--icon-size-s);
}

.setup-step__icon {
    width: var(--icon-size-l);
    height: var(--icon-size-l);
    color: #0f766e;
    background: #ccfbf1;
}

.setup-step__copy h2 {
    margin: 0;
    font-size: var(--txt-m);
    line-height: var(--line-height-tight);
}

.setup-step__copy p {
    margin: 0.25rem 0 0;
    color: var(--color-text-muted, #64748b);
    font-size: var(--txt-s);
    line-height: var(--line-height-normal);
}

.setup-step__done {
    color: #047857;
    font-size: var(--txt-s);
    font-weight: 750;
}

.getting-started__complete {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem;
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    border-radius: 1.25rem;
}

.getting-started__complete > .material-symbols-outlined {
    color: #059669;
    font-size: 2rem;
}

.getting-started__complete p {
    margin: 0.2rem 0 0;
    color: #52716e;
}

.mobile-setup-link {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
    padding: 0.85rem;
    color: #0f766e;
    background: linear-gradient(135deg, #ecfdf5, #cffafe);
    border: 1px solid #99f6e4;
    border-radius: 1rem;
}

.mobile-setup-link__icon {
    padding: 0.5rem;
    color: #fff;
    background: var(--color-primary, #0d9488);
    border-radius: 0.7rem;
}

.mobile-setup-link span:nth-child(2) {
    display: grid;
}

.mobile-setup-link strong {
    font-size: 1.3rem;
}

.mobile-setup-link small {
    margin-top: 0.12rem;
    color: #52716e;
    font-size: 1.1rem;
}

@media (max-width: 760px) {
    .ob-reminder {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .ob-reminder__progress {
        grid-column: 1 / -1;
    }

    .ob-reminder__action {
        grid-column: 1 / -1;
    }

    .getting-started__hero,
    .setup-step,
    .getting-started__complete {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .getting-started__score {
        grid-column: 1 / -1;
        justify-items: start;
    }

    .setup-step__copy {
        grid-column: 2;
    }

    .setup-step__action,
    .setup-step__done {
        grid-column: 2;
        justify-self: start;
    }

    .getting-started__complete .btn-primary {
        grid-column: 1 / -1;
    }
}

.ob-banner {
    display: grid;
    gap: var(--space-m, 1.5rem);
    background: linear-gradient(135deg, #F0FDFA 0%, #CFFAFE 100%);
    border: 1px solid var(--color-border, #CFFAFE);
    border-radius: 1.6rem;
    padding: var(--space-m, 1.5rem) var(--space-l, 2rem);
    margin-bottom: var(--space-m, 1.5rem);
}

.ob-banner__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-s, 1rem);
    flex-wrap: wrap;
}

.ob-banner__title {
    margin: 0;
    font-size: var(--h4, 1.7rem);
    font-weight: 800;
    color: var(--color-text-main, #1E293B);
}

.ob-banner__subtitle {
    margin: 0.3rem 0 0;
    font-size: var(--txt-m, 1.5rem);
    color: var(--color-text-muted, #64748B);
}

.ob-banner__pct {
    font-size: var(--h3, 2.4rem);
    font-weight: 800;
    color: var(--color-primary, #0D9488);
    white-space: nowrap;
}

.ob-banner__track {
    height: 10px;
    background: rgba(13, 148, 136, 0.12);
    border-radius: 999px;
    overflow: hidden;
}

.ob-banner__fill {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--color-primary, #0D9488), #34D399);
    transition: width 0.6s cubic-bezier(.4,0,.2,1);
    width: 0;
}

    .ob-banner__steps {
        display: flex;
        gap: var(--space-s, 1rem);
        flex-wrap: wrap;
}

.ob-banner__step {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 1rem;
    border-radius: 999px;
    font-size: var(--txt-s, 1.4rem);
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.2s, transform 0.2s;
}

.ob-banner__step--done {
    background: rgba(13, 148, 136, 0.12);
    color: #0F766E;
    pointer-events: none;
}

.ob-banner__step--pending {
    background: #FFFFFF;
    border: 1px solid var(--color-border, #CFFAFE);
    color: var(--color-text-main, #1E293B);
}

.ob-banner__step--pending:hover {
    background: var(--color-primary, #0D9488);
    color: #FFFFFF;
    transform: translateY(-1px);
}

.ob-banner__step-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: "Material Symbols Outlined";
    font-size: 1.8rem;
    line-height: 1;
    font-style: normal;
    font-weight: normal;
    letter-spacing: normal;
    text-transform: none;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: "liga";
}

/* widgets/subscription_status.html */
.sub-status-banner {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: var(--space-m);
    align-items: center;
    padding: var(--space-m);
    margin-bottom: var(--space-l);
    border: 1px solid var(--color-border, #dbe4ee);
    border-radius: var(--radius-card, 1.6rem);
    background:
      radial-gradient(circle at top left, rgba(13, 148, 136, 0.08), transparent 36%),
      linear-gradient(180deg, #ffffff 0%, #f8fbfd 100%);
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.05);
  }

  .sub-status-banner--trial {
    border-color: rgba(13, 148, 136, 0.18);
  }

  .sub-status-banner--blocked {
    border-color: rgba(239, 68, 68, 0.2);
    background:
      radial-gradient(circle at top left, rgba(239, 68, 68, 0.08), transparent 34%),
      linear-gradient(180deg, #ffffff 0%, #fef7f7 100%);
  }

  .sub-status-banner--active {
    border-color: rgba(34, 197, 94, 0.18);
    background:
      radial-gradient(circle at top left, rgba(34, 197, 94, 0.08), transparent 34%),
      linear-gradient(180deg, #ffffff 0%, #f6fef9 100%);
  }

  .sub-status-banner__icon {
    width: 4.6rem;
    height: 4.6rem;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-surface, #f8fafc);
    border: 1px solid rgba(148, 163, 184, 0.18);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
  }

  .sub-status-banner__icon .material-symbols-outlined {
    font-size: 2.4rem;
    line-height: 1;
  }

  .sub-status-banner--blocked .sub-status-banner__icon {
    background: rgba(239, 68, 68, 0.08);
    border-color: rgba(239, 68, 68, 0.18);
    color: #DC2626;
  }

  .sub-status-banner--trial .sub-status-banner__icon {
    background: rgba(13, 148, 136, 0.1);
    border-color: rgba(13, 148, 136, 0.18);
    color: var(--color-primary, #0d9488);
  }

  .sub-status-banner--active .sub-status-banner__icon {
    background: rgba(34, 197, 94, 0.08);
    border-color: rgba(34, 197, 94, 0.18);
    color: #16A34A;
  }

  .sub-status-banner__content {
    display: grid;
    gap: var(--space-xs);
    min-width: 0;
  }

  .sub-status-banner__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    flex-wrap: wrap;
  }

  .sub-status-banner__badge {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 1rem;
    border-radius: 999px;
    font-size: var(--txt-xs);
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--color-primary, #0d9488);
    background: rgba(13, 148, 136, 0.1);
  }

  .sub-status-banner__title {
    font-size: var(--h4);
    font-weight: 700;
    color: var(--color-text-main, #1e293b);
    line-height: 1.2;
  }

  .sub-status-banner__meta {
    font-size: var(--txt-s);
    color: var(--color-text-muted, #64748b);
    line-height: 1.5;
    max-width: 84ch;
  }

  .sub-status-banner__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 4.4rem;
    padding: 0 1.6rem;
    border-radius: var(--radius-control, 1rem);
    border: 1px solid rgba(13, 148, 136, 0.14);
    background: rgba(13, 148, 136, 0.08);
    color: var(--color-primary, #0d9488);
    text-decoration: none;
    font-size: var(--txt-s);
    font-weight: 700;
    white-space: nowrap;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
  }

  .sub-status-banner__cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 20px rgba(13, 148, 136, 0.12);
    background: rgba(13, 148, 136, 0.12);
  }

  .sub-status-banner__cta--disabled {
    opacity: 0.55;
    cursor: not-allowed;
    pointer-events: none;
  }

  @media (max-width: 900px) {
    .sub-status-banner {
      grid-template-columns: 1fr;
      align-items: start;
    }

    .sub-status-banner__icon {
      width: 4.2rem;
      height: 4.2rem;
    }
  }


/* cards/_builder_base.html */
/* ── Builder Sections ── */
.builder-section { margin-bottom: 20px; border: 1px solid var(--color-border); border-radius: 12px; background: var(--color-sidebar-bg, #F0FDFA); }
.builder-section__header { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: var(--color-surface, #F0FDFA); border-bottom: 1px solid var(--color-border); }
.builder-section__icon { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 8px; background: var(--color-primary-light, #CCFBF1); color: var(--color-primary, #0D9488); flex-shrink: 0; }
.builder-section__title { font-size: var(--txt-s, 1.5rem); font-weight: 600; color: var(--color-text-main, #1E293B); line-height: 1.3; }
.builder-section__desc { font-size: var(--txt-xs, 1.4rem); color: var(--color-text-muted, #64748B); margin-top: 2px; line-height: 1.4; }
.builder-section__body { padding: 16px; }
.builder-section__badge { font-size: var(--txt-xs, 11px); color: var(--color-text-muted); font-weight: 400; }
.builder-label { display: flex; align-items: center; gap: 4px; margin-bottom: 8px; font-weight: 500; font-size: var(--txt-s, 1.5rem); color: var(--color-text-main, #1E293B); }
.builder-field-error { color: var(--color-warning, #d97706); font-size: var(--txt-xs, 1.4rem); margin-top: 4px; }
.builder-field-help { margin: var(--space-xs) 0 0; color: var(--color-text-muted); font-size: var(--txt-xs, 1.4rem); }

/* ── Layout global del builder ── */
.builder-mobile-grid { display: grid; grid-template-columns: minmax(auto, 800px) auto; justify-content: flex-start; gap: 24px; }
.form-wizard-card { width: 100%; max-width: 800px; padding: 0 !important; overflow: visible !important; border-radius: 16px; background: #fff; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05), 0 2px 4px -2px rgba(0,0,0,0.05); }
.step-wizard-nav { display: flex; background: #fafaf9; border-bottom: 1px solid var(--color-border); }
.step-tab { flex: 1; padding: 16px 8px; background: transparent; border: none; border-bottom: 2px solid transparent; font-size: var(--txt-s, 1.4rem); font-weight: 500; color: var(--color-text-muted); cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; transition: all 0.2s; outline: none; }
.step-tab:hover { color: var(--color-text-main); background: rgba(0,0,0,0.02); }
.step-tab.active { color: var(--color-primary); border-bottom-color: var(--color-primary); background: #fff; }
.wizard-step { display: none; }
.wizard-step.active { display: block; }
.wizard-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--color-border); }

/* ── Toggle buttons ── */
.preview-toggle-container { display: flex; justify-content: center; gap: 1rem; }
.preview-toggle-btn { padding: 0.5rem 1rem; border: 1px solid var(--color-border); background: var(--color-bg, #fff); border-radius: 20px; cursor: pointer; font-size: var(--txt-s, 1.4rem); font-weight: 500; transition: all 0.2s; display: flex; align-items: center; gap: 0.5rem; }
.preview-toggle-btn.active { background: var(--color-primary, #0D9488); color: white; border-color: var(--color-primary, #0D9488); box-shadow: 0 2px 4px rgba(0,0,0,0.1); }

/* ── Containers ── */
.preview-container { display: none; justify-content: center; overflow: visible; padding-bottom: 24px; }
.preview-container.active { display: flex; animation: fadeIn 0.3s ease-out; }
.preview-container--padded { padding: 0 var(--space-m, 16px) var(--space-m, 16px); }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* ── Preview Card ── */
/*
 * NOTA: Los valores px, rgba y hex en esta sección son INTENCIONALES.
 * Replican el aspecto visual de Google Wallet y Apple Wallet.
 * NO deben reemplazarse por tokens del sistema Kavto.
 */
.pvw-card { width: 270px; margin: 0 auto; border-radius: 24px; position: relative; overflow: hidden; color: white; font-family: 'Roboto', 'Google Sans', sans-serif; background-color: #4285f4; box-shadow: 0 4px 7px 1px rgba(0,0,0,0.14), 0 3px 9px 2px rgba(0,0,0,0.12), 0 4px 4px -3px rgba(0,0,0,0.2); display: flex; flex-direction: column; }
.pvw-header-top { display: flex; align-items: center; height: 48px; padding: 3px 6px 0; }
.pvw-logo { width: 24px; height: 24px; border-radius: 50%; background: transparent; display: flex; align-items: center; justify-content: center; font-size: var(--txt-xs, 1.4rem); font-weight: 500; color: #444; overflow: hidden; flex-shrink: 0; margin-left: 6px; }
.pvw-logo img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.pvw-card-title { font-size: var(--txt-s, 1.5rem); font-weight: 500; color: #ffffff; margin-left: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pvw-divider { height: 1px; background-color: rgb(255 255 255 / 15%); margin: 0; }
.pvw-identity { padding: 12px 12px 12px; }
.pvw-program-name { font-size: var(--h3, 2.6rem); font-weight: 500; color: #ffffff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 18px; line-height: 1.2; }
.pvw-subheader { font-size: 12px; color: rgba(255, 255, 255, 0.85); font-weight: 400; line-height: 1.3; }
.pvw-headerLabel { font-size: 15px; font-weight: 400; color: white; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.3; }
.pvw-modules { display: flex; justify-content: space-between; padding: 6px 12px; }
.pvw-module-item { display: flex; flex-direction: column; }
.pvw-module-label { font-size: var(--txt-xs, 1.4rem); font-weight: 500; text-transform: uppercase; color: rgba(255, 255, 255, 0.9); padding: 6px 0 0; }
.pvw-module-value { font-size: var(--txt-s, 1.5rem); font-weight: 500; color: #ffffff; padding: 0 0 6px; }
.pvw-qr-section { padding: 5px 0 15px 0; display: flex; flex-direction: column; align-items: center; background: transparent; border: none; margin: 0; }
.pvw-qr-container { background-color: #ffffff; border-radius: 12px; width: 138px; height: 138px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.pvw-qr-container img { width: 110px; height: 110px; object-fit: contain; }
.pvw-barcode-value { text-align: center; font-size: var(--txt-s, 1.5rem); color: #ffffff; margin-top: 8px; min-height: 14px; }
.pvw-hero-container { width: 100%; display: flex; justify-content: center; }
.pvw-hero-container img, .pvw-hero-container canvas, .pvw-hero-container > div { width: 100%; border-radius: 0 0 24px 24px; object-fit: cover; display: block; aspect-ratio: 1032 / 336; position: relative; overflow: hidden; }
/* Apple Wallet: hero sin border-radius */
.pvw-card--apple .pvw-hero-container img,
.pvw-card--apple .pvw-hero-container canvas,
.pvw-card--apple .pvw-hero-container > div { border-radius: 0 !important; margin-top: 0; }

/* Desktop: ocultar elementos mobile-only, mostrar step-content siempre */
@media (min-width: 768px) {
    .accordion-header { display: none !important; }
    .step-content { max-height: none !important; overflow: visible !important; display: block !important; }
    .mobile-preview-wrap { display: none !important; }
}

/* ── Layout global del builder (borrado por redundancia) ── */
.builder-form { padding: 24px; }
.builder-form-errors { background-color: var(--color-warning); color: white; padding: 12px; border-radius: 6px; margin-bottom: 16px; }

/* ── Utilidades ── */
.visually-hidden { display: none !important; }
.col-2-grid { display: flex; flex-direction: row; flex-wrap: wrap; gap: 24px; }
.col-2-grid > * { flex: 0 0 auto; }
.field-group { margin-bottom: 16px; }
.stamp-col-centered { display: flex; flex-direction: column; align-items: center; }
.stamp-col-centered .builder-label { text-align: center; justify-content: center; }

/* Limitar ancho del input color de fondo y del cropper de logo */
#id_background_color { max-width: 100px !important; height: 48px !important; border-radius: 8px; cursor: pointer; }
#cropper-wrapper-logo, #cropper-preview-img-logo { max-width: 100px !important; height: auto !important; }

/* Global sizes for Cropper image previews */
.cropper-size-large .cropper-preview-img-wrap { max-height: 150px; overflow: hidden; }
/* Fijamos un max-width únicamente al cuadro subido para no expandirse a full-width en pantallas grandes */
#cropper-wrapper-hero_image .cropper-preview-img-wrap { max-width: 460px; border-radius: 8px; border: 1px solid var(--color-border); aspect-ratio: 1032 / 336; object-fit: cover; background: var(--color-bg, #f8fafc); }
.cropper-size-large .cropper-preview-img-wrap img { width: 100%; height: 100%; max-height: 150px; object-fit: cover; }
.cropper-size-small .cropper-preview-img-wrap img { object-fit: contain; padding: 5px; }

/* ── Stamps & Shared: Grid de imágenes ── */
.stamp-images-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 16px;
}
.stamp-images-grid__hero { grid-column: 1 / -1; }
@media (min-width: 768px) {
    .stamp-images-grid {
        grid-template-columns: 2fr 1fr 1fr;
        grid-template-rows: auto;
    }
    .stamp-images-grid__hero {
        grid-column: 1;
    }
}

/* ── Identidad de la Campaña Reorder para Desktop ── */
@media (min-width: 768px) {
    .cid-qr { order: 3; }
    .cid-title { order: 4; }
}

/* ── Mobile save footer (solo visible en mobile) ── */
.mobile-save-footer { display: none; }

/* ── Admin fields ── */
.admin-fields-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px dashed var(--color-border); }

/* ── Utilidades de layout ── */
.field-group--spaced { margin-bottom: var(--space-m, 16px); }
.builder-modules-add { display: flex; justify-content: center; padding-bottom: var(--space-xs, 4px); }
.builder-modules-empty { text-align: center; padding: var(--space-m, 16px) var(--space-l, 20px) var(--space-s, 12px); color: var(--color-text-muted); font-size: var(--txt-s, 13px); }
.preview-note { text-align: center; font-size: var(--txt-xs, 11px); color: var(--color-text-muted, #94a3b8); margin-top: var(--space-m, 16px); padding-bottom: var(--space-xs, 8px); }

/* ── Card frames (wrapper around card-android / card-iphone) ── */
.card-frame { width: 270px; }

/* ── Botones de navegación ── */
.btn-outline { background: transparent; border: 1px solid var(--color-border); color: var(--color-text-muted); padding: 8px 16px; border-radius: 6px; font-size: var(--txt-s, 1.4rem); cursor: pointer; display: inline-block; text-decoration: none; transition: background 0.15s; }
.btn-outline:hover { background: var(--color-surface-soft, #f1f5f9); }
.btn-cancel { color: var(--color-text-muted); }
.js-prev-step { color: var(--color-text-main); }

/* ── Agregar módulo ── */
.btn-add-module { display: flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 8px; border: 1px dashed var(--color-primary); background: var(--color-primary-light, #CCFBF1); color: var(--color-primary); font-size: var(--txt-s, 1.5rem); font-weight: 500; cursor: pointer; white-space: nowrap; transition: all 0.2s; }
.btn-add-module:hover { opacity: 0.85; }
.btn-add-module:disabled { opacity: 0.4; cursor: not-allowed; }

.builder-form .form-control { width: 100%; padding: 10px 14px; border: 1.5px solid var(--color-border); border-radius: 8px; font-size: var(--txt-s, 1.5rem); color: var(--color-text-main); transition: all 0.2s; box-sizing: border-box; }
.builder-form .form-control:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-light); outline: none; }

/* Limitar ancho de inputs texto/select en Paso 1 en Desktop */
@media (min-width: 768px) {
    .wizard-step[data-step="1"] input[type="text"].form-control,
    .wizard-step[data-step="1"] select.form-control {
        max-width: 300px;
    }
}

/* ── Info box ── */
.builder-info-box { background: var(--color-surface, #F0FDFA); border: 1px solid var(--color-border); border-radius: 8px; padding: 12px 14px; margin-bottom: 16px; font-size: var(--txt-s, 1.5rem); color: var(--color-text-muted); line-height: 1.5; }
.builder-info-box__title { color: var(--color-primary); display: block; margin-bottom: 4px; }

/* ── Desktop preview col sticky ── */
.desktop-preview-col { position: sticky; top: var(--space-s, 12px); align-self: flex-start; }
.desktop-preview-col .card { background: var(--color-surface); }
.desktop-preview-col .preview-toggle-container { margin-bottom: 1.5rem; }
.mobile-preview-wrap .preview-toggle-container { margin: 16px 0 8px; padding: 0 16px; }

/* ══════════════════════════════════════════
   MOBILE: Acordeón + Preview expandible
   ══════════════════════════════════════════ */
@media (max-width: 767px) {
    .builder-mobile-grid { display: flex !important; flex-direction: column !important; gap: 0 !important; margin-bottom: 170px; }
    .step-wizard-nav { display: none !important; }
    .desktop-preview-col { display: none !important; }
    .wizard-step { display: block !important; }
    .builder-form { padding: var(--space-s) }
    .builder-section { margin-bottom: 12px; border-radius: 8px; }
    .builder-section__body { padding: 12px; }
    .col-2-grid { gap: 12px; }
    .admin-fields-grid { grid-template-columns: 1fr; gap: 12px; padding-bottom: 12px; }
    .wizard-footer { display: none !important; }
    .mobile-save-footer { display: flex; justify-content: space-between; align-items: center; padding: 16px var(--space-s); margin-top: 8px; border-top: 1px solid var(--color-border); background: var(--color-surface, #fff); border-radius: 0 0 16px 16px; }
    .accordion-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; background: var(--color-surface, #fff); border-bottom: 1px solid var(--color-border); cursor: pointer; user-select: none; border-top: 2px solid var(--color-primary, #0D9488); margin-top: 8px; }
    .accordion-header:first-child { margin-top: 0; }
    .accordion-header__left { display: flex; align-items: center; gap: 10px; }
    .accordion-header__icon-wrap { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; background: var(--color-primary-light, #CCFBF1); color: var(--color-primary, #0D9488); border-radius: 8px; }
    .accordion-header__title { font-weight: 700; font-size: var(--txt-m, 1.6rem); color: var(--color-text-main, #1E293B); }
    .accordion-chevron { color: var(--color-text-muted, #94a3b8); transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
    .accordion-chevron.open { transform: rotate(180deg); color: var(--color-primary, #0D9488); }
    .step-content { max-height: 0; overflow: hidden; transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), padding 0.4s; background: var(--color-surface, #fff); }
    .step-content.open { max-height: 9999px; }
    .mobile-preview-wrap { display: block !important; position: fixed; bottom: 0; left: 0; right: 0; background: var(--color-surface, #fff); box-shadow: 0 -4px 20px rgba(0,0,0,0.1); z-index: 1000; border-radius: 20px 20px 0 0; transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); transform: translateY(0); }
    .mobile-preview-header { display: flex; align-items: center; justify-content: space-between; padding: 16px; cursor: pointer; background: var(--color-surface, #fff); border-radius: 16px 16px 0 0; border-bottom: none; }
    .mobile-preview-wrap.expanded .mobile-preview-header { border-bottom: 1px solid var(--color-border); }
    .mobile-preview-header__left { display: flex; align-items: center; gap: 8px; font-size: var(--txt-m, 1.6rem); font-weight: 600; color: var(--color-text-main, #1E293B); }
    .mobile-preview-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--color-primary, #0D9488); animation: pulse-dot 2s infinite; }
    @keyframes pulse-dot { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.6; transform: scale(1.2); } }
    .mobile-preview-body { overflow-y: hidden; max-height: 120px; transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1); background: var(--color-bg, #f8fafc); }
    .mobile-preview-wrap.expanded .mobile-preview-body { overflow-y: auto; max-height: 70vh; overscroll-behavior: contain; }
    .mobile-preview-toggle-inline-btn { background: var(--color-primary-light, #CCFBF1); color: var(--color-primary, #0D9488); border: none; padding: 4px 12px; border-radius: 12px; font-size: var(--txt-xs, 1.2rem); font-weight: 600; cursor: pointer; transition: all 0.2s; text-transform: uppercase; letter-spacing: 0.5px; }
    .mobile-preview-toggle-inline-btn:hover { background: var(--color-primary, #0D9488); color: #fff; }
}
/* Hallmark · component: reference drawer · genre: modern-minimal · theme: Kavto
 * states: default · hover · focus · active · disabled · loading · error · success
 * contrast: pass
 */
.country-code-help__trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2xs);
    min-height: var(--control-height);
    white-space: nowrap;
}

.country-code-help__trigger .material-symbols-outlined {
    font-size: var(--txt-m);
}

.country-code-drawer {
    position: fixed;
    z-index: 1200;
    inset: 0 0 0 auto;
    width: min(42rem, 100%);
    padding: 0;
    overflow: hidden;
    border: 0;
    border-left: var(--border-width) solid var(--color-border);
    border-radius: 0;
    background: var(--color-surface);
    color: var(--color-text-main);
    box-shadow: var(--shadow-float);
    transform: translateX(100%);
    pointer-events: none;
    transition: transform var(--transition-base);
}

.country-code-drawer.is-open {
    transform: translateX(0);
    pointer-events: auto;
}

.country-code-drawer__header {
    position: sticky;
    z-index: 1;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-s);
    padding: var(--space-s) var(--space-m);
    background: var(--color-surface);
    color: var(--color-text-main);
    border-bottom: var(--border-width) solid var(--color-border);
}

.country-code-drawer__header h2 {
    margin: var(--space-3xs) 0 0;
    color: var(--color-text-main);
    font-size: var(--txt-xl);
    line-height: 1.15;
}

.country-code-drawer__eyebrow {
    color: var(--color-primary-hover);
    font-size: var(--txt-xs);
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.country-code-drawer__body {
    display: grid;
    gap: var(--space-s);
    height: calc(100dvh - 8.4rem);
    padding: var(--space-m);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.country-code-drawer__hint {
    margin: 0;
    color: var(--color-text-muted);
    font-size: var(--txt-s);
    line-height: 1.55;
}

.country-code-drawer__table-wrap {
    overflow-x: auto;
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-sm);
}

.country-code-drawer__table {
    width: 100%;
    border-collapse: collapse;
    background: var(--color-surface);
    color: var(--color-text-main);
}

.country-code-drawer__table th,
.country-code-drawer__table td {
    padding: var(--space-xs) var(--space-s);
    border-bottom: var(--border-width) solid var(--color-border);
    text-align: left;
}

.country-code-drawer__table thead th {
    color: var(--color-text-muted);
    font-size: var(--txt-xs);
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.country-code-drawer__code {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2xs);
}

.country-code-drawer__flag {
    width: 2.4rem;
    height: 1.8rem;
    object-fit: cover;
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface-soft);
}

.country-code-drawer__table code {
    color: var(--color-primary-hover);
    font-family: var(--font-label);
    font-weight: 800;
}

.country-code-drawer__region th {
    background: var(--color-surface-soft);
    color: var(--color-text-main);
    font-size: var(--txt-xs);
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

@media (min-width: 64.01rem) {
    body.country-code-drawer-visible .main-content {
        margin-right: 42rem;
    }
}

@media (max-width: 35rem) {
    .country-code-drawer__header,
    .country-code-drawer__body {
        padding: var(--space-s);
    }

    .country-code-drawer__table th,
    .country-code-drawer__table td {
        padding-inline: var(--space-xs);
    }
}

@media (prefers-reduced-motion: reduce) {
    .country-code-drawer {
        transition: none;
    }
}

/* Hallmark · component: country select · genre: modern-minimal · theme: Kavto
 * states: default · hover · focus · active · disabled · loading · error · success
 * contrast: pass
 */
.profile-country-select {
    position: relative;
    width: 100%;
}

.profile-country-select__visual {
    position: absolute;
    z-index: 1;
    top: 50%;
    left: var(--space-s);
    display: grid;
    width: 2.4rem;
    height: 2.4rem;
    place-items: center;
    color: var(--color-text-muted);
    pointer-events: none;
    transform: translateY(-50%);
}

.profile-country-select__flag {
    width: 2.4rem;
    height: 1.8rem;
    object-fit: cover;
}

.profile-country-select__empty {
    color: var(--color-text-muted);
    font-size: var(--txt-l);
}

.profile-country-select :is(.profile-country-select__flag, .profile-country-select__empty)[hidden] {
    display: none;
}

.profile-country-select > select.form-control {
    width: 100%;
    min-height: var(--control-height);
    padding-inline-start: calc(var(--space-s) + 3.6rem);
}

.profile-country-select:has(select:disabled) {
    cursor: not-allowed;
    opacity: var(--opacity-disabled);
}

.profile-country-select select:disabled {
    cursor: not-allowed;
}

.distributor-profile-form {
    width: 100%;
}

/* Hallmark · pre-emit critique: P5 H5 E4 S5 R5 V4 */
.partner-payout__panel[hidden] {
    display: none;
}

.partner-payout__panel:not([hidden]) {
    display: flex;
    flex-direction: column;
    gap: var(--space-m);
}

.settings-section--actions .settings-actions {
    border-top: 0;
    border-radius: inherit;
}

@media (prefers-reduced-motion: reduce) {
    .profile-country-select__visual {
        transform: translateY(-50%);
    }
}

.merchant-delete-modal[hidden] { display: none; }
.merchant-delete-trigger {
    border: 0;
    padding: 0;
    background: transparent;
    font-size: inherit;
    cursor: pointer;
}
.merchant-delete-modal {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: grid;
    place-items: center;
    padding: 24px;
}
.merchant-delete-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.62);
    backdrop-filter: blur(3px);
}
.merchant-delete-modal__panel {
    position: relative;
    z-index: 1;
    width: min(760px, 100%);
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    border-radius: 24px;
    padding: 32px;
    background: #fff;
    box-shadow: 0 24px 70px rgba(15, 23, 42, 0.28);
}
.merchant-delete-modal__panel h2 { margin: 0 42px 8px 0; }
.merchant-delete-modal__intro {
    margin: 0 0 24px;
    color: var(--color-text-muted, #64748b);
}
.merchant-delete-modal__close {
    position: absolute;
    top: 18px;
    right: 22px;
    border: 0;
    background: transparent;
    color: #64748b;
    font-size: 30px;
    line-height: 1;
    cursor: pointer;
}
.merchant-delete-modal__loading {
    padding: 32px 0;
    text-align: center;
    color: #64748b;
}
.merchant-delete-impact-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}
.merchant-delete-impact {
    padding: 20px;
    border: 1px solid;
    border-radius: 16px;
}
.merchant-delete-impact--danger {
    border-color: #fecaca;
    background: #fff7f7;
}
.merchant-delete-impact--safe {
    border-color: #a7f3d0;
    background: #f0fdf9;
}
.merchant-delete-impact h3 {
    margin: 0 0 14px;
    font-size: 1.05rem;
}
.merchant-delete-impact ul {
    display: grid;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.merchant-delete-impact li {
    display: grid;
    grid-template-columns: 36px 1fr;
    align-items: baseline;
    gap: 8px;
}
.merchant-delete-impact li strong { font-size: 1.15rem; }
.merchant-delete-impact li small {
    grid-column: 2;
    color: #64748b;
}
.merchant-delete-impact .merchant-delete-impact__empty {
    display: block;
    color: #64748b;
}
.merchant-delete-confirmation {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 22px 0;
    padding: 16px;
    border-radius: 14px;
    background: #f8fafc;
    cursor: pointer;
}
.merchant-delete-confirmation input {
    width: 18px;
    height: 18px;
    margin-top: 2px;
}
.merchant-delete-modal__actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}
.merchant-delete-modal .btn-danger {
    border: 0;
    border-radius: 999px;
    padding: 12px 20px;
    background: #dc2626;
    color: #fff;
    font-weight: 700;
    cursor: pointer;
}
.merchant-delete-modal .btn-danger:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}
.merchant-delete-modal-open { overflow: hidden; }

@media (max-width: 680px) {
    .merchant-delete-modal { padding: 12px; }
    .merchant-delete-modal__panel {
        padding: 24px 18px;
        border-radius: 18px;
    }
    .merchant-delete-impact-grid { grid-template-columns: 1fr; }
}

/*
 * Hallmark · pre-emit critique: P5 H5 E5 S5 R5 V4
 * genre: modern-minimal · tone: technical/warm · anchor: tenant green
 * macrostructure: Workbench detail form · contrast: pass (40–41)
 * nav: existing application rail · footer: none · slop: pass (42–45)
 * honest: pass (46) · chrome: pass (47) · tokens: pass (48)
 * responsive: pass (49) · icons: pass (30) · mobile: pass (34, 49, 50–57)
 */
.customer-form-card {
    width: min(100%, 68rem);
    padding: var(--space-l);
}

.customer-form-card__header {
    margin-bottom: var(--space-m);
}

.customer-form {
    gap: var(--space-s);
}

.customer-form__field {
    flex: none;
}

.customer-form__notes {
    min-height: calc(var(--control-height) * 2.5);
    resize: vertical;
}

.customer-form__actions {
    margin-top: var(--space-xs);
}

@media (max-width: 767px) {
    .customer-form-card {
        padding: var(--space-m);
    }

    .customer-form-card__header {
        margin-bottom: var(--space-s);
    }

    .customer-form__actions {
        gap: var(--space-xs);
        padding-top: var(--space-s);
    }
}

@media (max-width: 359px) {
    .customer-form-card {
        padding-inline: var(--space-s);
    }
}

.customer-delete {
    width: min(100%, 84rem);
    padding: var(--space-l);
    text-align: left;
    border-top: 0.4rem solid var(--color-error);
}

.customer-delete__header {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    align-items: start;
}

.customer-delete__eyebrow {
    color: var(--color-error);
    font-family: var(--font-label);
    font-size: var(--txt-xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-wide);
    line-height: var(--line-height-normal);
    text-transform: uppercase;
}

.customer-delete__icon {
    width: 5.6rem;
    height: 5.6rem;
    margin: 0;
    border: var(--border-width) solid color-mix(in oklab, var(--color-error) 24%, var(--color-border));
}

.customer-delete__icon svg {
    width: 2.8rem;
    height: 2.8rem;
}

.customer-delete__title {
    min-width: 0;
    margin: var(--space-2xs) 0 0;
    font-family: var(--font-display);
    font-size: var(--h2);
    letter-spacing: -0.025em;
    overflow-wrap: anywhere;
    text-wrap: balance;
}

.customer-delete__lead {
    max-width: 62ch;
    margin: 0;
}

.customer-delete__subject {
    display: grid;
    grid-template-columns: minmax(8rem, auto) minmax(0, 1fr) auto;
    gap: var(--space-xs) var(--space-s);
    align-items: baseline;
    margin-top: var(--space-l);
    padding-block: var(--space-s);
    border-block: var(--border-width) solid var(--color-border);
}

.customer-delete__subject-label,
.customer-delete__section-title {
    margin: 0;
    color: var(--color-text-muted);
    font-family: var(--font-body);
    font-size: var(--txt-xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-wide);
    line-height: var(--line-height-normal);
    text-transform: uppercase;
}

.customer-delete__subject-name {
    min-width: 0;
    color: var(--color-text-main);
    font-family: var(--font-display);
    font-size: var(--txt-l);
    line-height: var(--line-height-tight);
    overflow-wrap: anywhere;
}

.customer-delete__subject-meta {
    color: var(--color-text-muted);
    font-family: var(--font-body);
    font-size: var(--txt-s);
    white-space: nowrap;
}

.customer-delete__impact {
    margin-top: var(--space-m);
}

.customer-delete__impact-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-s);
    margin: var(--space-s) 0 0;
    padding: 0;
    list-style: none;
}

.customer-delete__impact-list li {
    display: grid;
    grid-template-columns: 2rem minmax(0, 1fr);
    gap: var(--space-xs);
    align-items: start;
    color: var(--color-text-main);
    font-size: var(--txt-s);
    line-height: var(--line-height-normal);
}

.customer-delete__impact-list svg {
    width: 2rem;
    height: 2rem;
    color: var(--color-error);
}

.customer-delete__scope-note {
    margin: var(--space-s) 0 0;
    padding-left: var(--space-s);
    border-left: 0.3rem solid var(--color-border);
    color: var(--color-text-muted);
    font-size: var(--txt-s);
    line-height: var(--line-height-normal);
}

.customer-delete__wallet-alert {
    margin-top: var(--space-m);
    text-align: left;
}

.customer-delete__form {
    gap: var(--space-s);
    margin-top: var(--space-m);
    padding-top: var(--space-m);
    border-top: var(--border-width) solid var(--color-border);
}

.customer-delete__field {
    max-width: 48rem;
}

.customer-delete__label {
    margin-bottom: var(--space-2xs);
}

.customer-delete__hint,
.customer-delete__field-error {
    margin: 0 0 var(--space-xs);
    color: var(--color-text-muted);
    font-size: var(--txt-xs);
    line-height: var(--line-height-normal);
}

.customer-delete__field-error {
    min-height: 1lh;
    margin: var(--space-xs) 0 0;
    color: var(--color-error);
    font-weight: var(--font-weight-semibold);
}

.customer-delete__field-error[hidden] {
    display: block;
    visibility: hidden;
}

.customer-delete__input {
    font-family: var(--font-label);
    letter-spacing: var(--letter-spacing-wide);
    outline: 0.2rem solid transparent;
    outline-offset: 0.1rem;
    text-transform: uppercase;
    transition: border-color var(--transition-fast), background-color var(--transition-fast);
}

.customer-delete__input:hover:not(:disabled) {
    border-color: color-mix(in oklab, var(--color-text-muted) 60%, var(--color-border));
}

.customer-delete__input:focus-visible {
    border-color: var(--color-focus);
    outline-color: var(--color-focus);
    box-shadow: none;
}

.customer-delete__input[data-state="error"] {
    border-color: var(--color-error);
    background-color: var(--color-error-light);
}

.customer-delete__input[data-state="success"] {
    border-color: var(--color-success);
    background-color: var(--color-success-light);
}

.customer-delete__input:disabled {
    cursor: not-allowed;
    opacity: var(--opacity-disabled);
}

.customer-delete__actions {
    justify-content: flex-end;
    flex-wrap: nowrap;
}

.customer-delete__cancel,
.customer-delete__submit {
    white-space: nowrap;
}

.customer-delete__submit,
.customer-delete__submit:hover,
.customer-delete__submit:focus-visible {
    color: var(--color-surface);
}

.customer-delete__cancel:active {
    box-shadow: none;
    transform: translateY(0);
}

.customer-delete__cancel[aria-disabled="true"] {
    cursor: not-allowed;
    opacity: var(--opacity-disabled);
    pointer-events: none;
}

.customer-delete__submit:active:not(:disabled) {
    box-shadow: none;
    transform: translateY(0);
}

.customer-delete__submit[data-state="loading"] {
    display: inline-flex;
    gap: var(--space-xs);
    align-items: center;
    opacity: var(--opacity-disabled);
}

.customer-delete__submit[data-state="loading"]::after {
    width: 1.4rem;
    height: 1.4rem;
    border: 0.2rem solid color-mix(in oklab, var(--color-surface) 32%, transparent);
    border-top-color: var(--color-surface);
    border-radius: 50%;
    content: "";
    animation: customer-delete-spin 800ms linear infinite;
}

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

@media (max-width: 767px) {
    .customer-delete {
        padding: var(--space-m);
    }

    .customer-delete__impact-list {
        grid-template-columns: 1fr;
    }

    .customer-delete__actions {
        gap: var(--space-xs);
    }
}

@media (max-width: 479px) {
    .customer-delete__subject {
        grid-template-columns: 1fr;
    }

    .customer-delete__subject-meta {
        white-space: normal;
    }
}

@media (max-width: 359px) {
    .customer-delete {
        padding-inline: var(--space-s);
    }
}

@media (prefers-reduced-motion: reduce) {
    .customer-delete__cancel,
    .customer-delete__submit,
    .customer-delete__submit:hover,
    .customer-delete__submit:active {
        transform: none;
    }

    .customer-delete__submit[data-state="loading"]::after {
        animation: none;
    }
}