/* =============================================================================
   Fiderly UI -- sistema de diseno del rediseno visual.

   Se carga DESPUES de app.css en todos los layouts y NO reemplaza ninguna de
   sus reglas: solo agrega una capa encima, siempre acotada a un ambito:

     body.fx                 Panel admin, panel de empleado, login, paginas
                             publicas y de error (tokens + componentes).
     main.fx-client-content  Pantallas del Portal del Cliente que NO son el
                             Wallet (recompensas, historial, promociones,
                             notificaciones, perfil).
     body.fx-client          Solo el "cromo" del portal del cliente (barra
                             superior y navegacion), nunca su contenido.

   ZONA PROTEGIDA -- WALLET DEL CLIENTE: en /clientes/tarjetas y
   /clientes/tarjeta/{id} el <main> lleva [data-wallet-zone] y ninguno de los
   ambitos de arriba lo alcanza, asi que el Wallet se sigue pintando
   exclusivamente con app.css, exactamente igual que antes. No agregar aqui
   selectores sin ambito (salvo SweetAlert2 e impresion, que viven fuera de
   <main>).

   Los colores de MARCA (--color-primary / --color-secondary y derivados)
   siguen viniendo de _branding_style.php; aqui nunca se redefinen.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   1. Tokens
   ----------------------------------------------------------------------------- */
.fx {
    /* Superficies neutras (oscuro calido), independientes de la marca */
    --color-bg: #111111;
    --color-surface: #191919;
    --fx-surface-2: #202020;
    --fx-surface-3: #2a2a2a;
    --color-border: rgba(255, 255, 255, .08);
    --fx-border-strong: rgba(255, 255, 255, .14);

    --color-ink: #f3f0ea;
    --color-ink-muted: #a29e96;
    --color-ink-disabled: #6c6862;

    --color-sidebar-from: #141414;
    --color-sidebar-to: #141414;

    /* Bootstrap: mismas variables que app.css reasigna en :root */
    --bs-body-bg: var(--color-bg);
    --bs-body-color: var(--color-ink);
    --bs-border-color: var(--color-border);
    --bs-border-color-translucent: var(--color-border);
    --bs-secondary-color: var(--color-ink-muted);
    --bs-secondary-color-rgb: 162, 158, 150;
    --bs-tertiary-color: var(--color-ink-disabled);
    --bs-tertiary-color-rgb: 108, 104, 98;
    --bs-emphasis-color: var(--color-ink);
    --bs-emphasis-color-rgb: 243, 240, 234;
    --bs-light-rgb: 32, 32, 32;
    --bs-light-bg-subtle: rgba(255, 255, 255, .04);
    --bs-light-text-emphasis: var(--color-ink);
    --bs-light-border-subtle: var(--color-border);
    --bs-dark-bg-subtle: rgba(0, 0, 0, .3);
    --bs-dark-text-emphasis: var(--color-ink);
    --bs-dark-border-subtle: var(--color-border);
    --bs-heading-color: var(--color-ink);
    --bs-link-color-rgb: var(--bs-primary-rgb);

    --fx-font: 'Inter', 'Inter Fallback', 'Segoe UI', system-ui, -apple-system, sans-serif;
    color-scheme: dark;
}

.fx,
.fx-client-content {
    /* Estados: tintes translucidos (los de app.css son pastel claro,
       pensados para fondo blanco) */
    --color-success: #22c55e;
    --color-success-tint: rgba(34, 197, 94, .13);
    --color-warning: #f59e0b;
    --color-warning-tint: rgba(245, 158, 11, .14);
    --color-danger: #ef4444;
    --color-danger-tint: rgba(239, 68, 68, .13);
    --fx-info: #38bdf8;
    --fx-info-tint: rgba(56, 189, 248, .13);

    --radius-lg: 1rem;
    --radius-md: .75rem;
    --radius-sm: .55rem;
    --radius-pill: 999px;

    /* Anillo de 1px + sombra corta: tarjetas definidas sin sombras pesadas */
    --shadow-soft: 0 0 0 1px var(--color-border), 0 1px 2px rgba(0, 0, 0, .25), 0 10px 28px -18px rgba(0, 0, 0, .6);
    --shadow-lift: 0 0 0 1px var(--fx-border-strong, var(--color-border)), 0 18px 40px -16px rgba(0, 0, 0, .65);
    --fx-ring: 0 0 0 3px rgba(var(--bs-primary-rgb), .28);
    --fx-ease: cubic-bezier(.2, .8, .2, 1);
}

.fx-client-content {
    --fx-surface-2: rgba(255, 255, 255, .04);
    --fx-surface-3: rgba(255, 255, 255, .07);
    --fx-border-strong: rgba(246, 221, 176, .26);
    color-scheme: dark;
}

/* -----------------------------------------------------------------------------
   2. Base
   ----------------------------------------------------------------------------- */
body.fx {
    font-family: var(--fx-font);
    font-feature-settings: 'cv11', 'ss01';
    font-size: .9375rem;
    line-height: 1.55;
    background-color: var(--color-bg);
    color: var(--color-ink);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

.fx ::selection { background: rgba(var(--bs-primary-rgb), .35); color: var(--color-ink); }

.fx * { scrollbar-color: #3a3a3a transparent; }
.fx ::-webkit-scrollbar-thumb { background: #3a3a3a; }

.fx :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6) {
    color: var(--color-ink);
    font-weight: 650;
    letter-spacing: -.018em;
}

.fx :is(h1, .h4):where(.mb-0, .mb-1, .mb-3) { line-height: 1.25; }

.fx .text-muted { color: var(--color-ink-muted) !important; }
.fx .small, .fx small { font-size: .8125rem; }

/* Solo enlaces de texto: los componentes con clase conservan su color */
.fx a:not([class]) { color: var(--color-primary); text-underline-offset: 2px; }
.fx a:not([class]):hover { color: var(--color-primary-dark); }

.fx hr { border-color: var(--color-border); opacity: 1; }

.fx :focus-visible,
.fx-client-content :focus-visible {
    outline: 2px solid rgba(var(--bs-primary-rgb), .7);
    outline-offset: 2px;
}

/* Campos y botones ya muestran su propio anillo de foco */
:is(.fx, .fx-client-content) :is(.form-control, .form-select, .form-check-input, .btn, .btn-close):focus-visible { outline: none; }

/* Cifras alineadas en tablas, estadisticas y totales */
.fx :is(.table, .stat-card-value, .stat-row-value, .display-6, .badge),
.fx-client-content :is(.stat-tile-value, .fw-bold.small) {
    font-variant-numeric: tabular-nums;
}

/* -----------------------------------------------------------------------------
   3. Botones
   ----------------------------------------------------------------------------- */
:is(.fx, .fx-client-content) .btn {
    --bs-btn-padding-x: 1rem;
    --bs-btn-padding-y: .5rem;
    --bs-btn-font-size: .875rem;
    --bs-btn-font-weight: 600;
    --bs-btn-border-radius: .625rem;
    --bs-btn-focus-box-shadow: var(--fx-ring);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    min-height: 2.5rem;
    line-height: 1.2;
    letter-spacing: -.005em;
    box-shadow: none;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease, transform .1s ease;
}

:is(.fx, .fx-client-content) .btn > .bi { font-size: 1em; line-height: 1; }
:is(.fx, .fx-client-content) .btn > .bi.me-1,
:is(.fx, .fx-client-content) .btn > .bi.me-2 { margin-right: 0 !important; }

:is(.fx, .fx-client-content) .btn:hover,
:is(.fx, .fx-client-content) .btn:focus { transform: none; }
:is(.fx, .fx-client-content) .btn:active { transform: scale(.98) !important; }

:is(.fx, .fx-client-content) .btn-sm {
    --bs-btn-padding-x: .7rem;
    --bs-btn-padding-y: .3rem;
    --bs-btn-font-size: .8125rem;
    --bs-btn-border-radius: .5rem;
    min-height: 2rem;
}

:is(.fx, .fx-client-content) .btn-lg {
    --bs-btn-padding-x: 1.4rem;
    --bs-btn-padding-y: .75rem;
    --bs-btn-font-size: 1rem;
    --bs-btn-border-radius: .75rem;
    min-height: 3rem;
}

:is(.fx, .fx-client-content) :is(.btn-lg, .btn.py-3) { box-shadow: none; }

/* Primaria: color de marca, con un brillo interior sutil */
:is(.fx, .fx-client-content) .btn-primary,
:is(.fx, .fx-client-content) .btn-primary:focus {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-primary-contrast);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 1px 2px rgba(0, 0, 0, .3);
}

:is(.fx, .fx-client-content) .btn-primary:hover {
    background-color: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
    color: var(--color-primary-contrast);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 4px 14px -6px rgba(var(--bs-primary-rgb), .55);
}

/* Secundarias / neutras: superficie elevada con borde */
:is(.fx, .fx-client-content) :is(.btn-outline-secondary, .btn-light) {
    --bs-btn-color: var(--color-ink);
    --bs-btn-bg: var(--fx-surface-2);
    --bs-btn-border-color: var(--color-border);
    --bs-btn-hover-color: var(--color-ink);
    --bs-btn-hover-bg: var(--fx-surface-3);
    --bs-btn-hover-border-color: var(--fx-border-strong);
    --bs-btn-active-color: var(--color-ink);
    --bs-btn-active-bg: var(--fx-surface-3);
    --bs-btn-active-border-color: var(--fx-border-strong);
    --bs-btn-disabled-color: var(--color-ink-disabled);
    --bs-btn-disabled-bg: var(--fx-surface-2);
    --bs-btn-disabled-border-color: var(--color-border);
}

:is(.fx, .fx-client-content) .btn-outline-primary {
    --bs-btn-bg: rgba(var(--bs-primary-rgb), .06);
    --bs-btn-border-color: rgba(var(--bs-primary-rgb), .45);
    border-color: rgba(var(--bs-primary-rgb), .45);
    background-color: rgba(var(--bs-primary-rgb), .06);
}

:is(.fx, .fx-client-content) .btn-outline-primary:hover {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-primary-contrast);
}

/* Destructiva */
:is(.fx, .fx-client-content) .btn-danger {
    --bs-btn-bg: #dc2626;
    --bs-btn-border-color: #dc2626;
    --bs-btn-hover-bg: #b91c1c;
    --bs-btn-hover-border-color: #b91c1c;
    --bs-btn-active-bg: #991b1b;
    --bs-btn-active-border-color: #991b1b;
    --bs-btn-color: #fff;
    --bs-btn-hover-color: #fff;
}

:is(.fx, .fx-client-content) .btn-outline-danger {
    --bs-btn-color: #f87171;
    --bs-btn-bg: transparent;
    --bs-btn-border-color: rgba(239, 68, 68, .35);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #dc2626;
    --bs-btn-hover-border-color: #dc2626;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #b91c1c;
    --bs-btn-active-border-color: #b91c1c;
}

/* Exito (exportaciones, restaurar) */
:is(.fx, .fx-client-content) .btn-success {
    --bs-btn-bg: #16a34a;
    --bs-btn-border-color: #16a34a;
    --bs-btn-hover-bg: #15803d;
    --bs-btn-hover-border-color: #15803d;
    --bs-btn-active-bg: #166534;
    --bs-btn-active-border-color: #166534;
    --bs-btn-color: #fff;
    --bs-btn-hover-color: #fff;
}

:is(.fx, .fx-client-content) .btn-outline-success {
    --bs-btn-color: #4ade80;
    --bs-btn-bg: transparent;
    --bs-btn-border-color: rgba(34, 197, 94, .35);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #16a34a;
    --bs-btn-hover-border-color: #16a34a;
}

:is(.fx, .fx-client-content) .btn:disabled,
:is(.fx, .fx-client-content) .btn.disabled {
    opacity: .5;
    box-shadow: none;
}

/* Estado "procesando": lo agrega fiderly-ui.js al enviar un formulario */
:is(.fx, .fx-client-content) .is-loading {
    position: relative;
    color: transparent !important;
    pointer-events: none;
}

:is(.fx, .fx-client-content) .is-loading > * { visibility: hidden; }

:is(.fx, .fx-client-content) .is-loading::after {
    content: '';
    position: absolute;
    inset: 0;
    margin: auto;
    width: 1.05rem;
    height: 1.05rem;
    border-radius: 50%;
    border: 2px solid currentColor;
    border-color: var(--fx-spinner, rgba(255, 255, 255, .85)) var(--fx-spinner, rgba(255, 255, 255, .85)) transparent transparent;
    animation: fx-spin .6s linear infinite;
}

:is(.fx, .fx-client-content) :is(.btn-primary, .fx-auth-submit, .reward-cta).is-loading { --fx-spinner: var(--color-primary-contrast); }
:is(.fx, .fx-client-content) :is(.btn-outline-secondary, .btn-outline-primary).is-loading { --fx-spinner: var(--color-ink); }

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

/* Grupos de acciones en tablas/tarjetas: botones sueltos con separacion
   (los <form class="d-inline"> rompian las esquinas del grupo unido) */
.fx .btn-group {
    display: inline-flex;
    flex-wrap: wrap;
    gap: .35rem;
}

.fx .btn-group > .btn,
.fx .btn-group > form > .btn {
    border-radius: var(--bs-btn-border-radius) !important;
    margin-left: 0 !important;
}

.fx .btn-group-sm > .btn,
.fx .btn-group-sm > form > .btn {
    min-height: 2rem;
    min-width: 2rem;
    padding: .3rem .55rem;
    font-size: .8125rem;
}

.fx .card .btn-group.w-100 { display: flex; flex-wrap: nowrap; }
.fx .card .btn-group.w-100 > :first-child { flex: 1; }

/* -----------------------------------------------------------------------------
   4. Tarjetas / superficies
   ----------------------------------------------------------------------------- */
.fx .card {
    --bs-card-bg: var(--color-surface);
    --bs-card-cap-bg: transparent;
    --bs-card-border-color: var(--color-border);
    --bs-card-border-radius: var(--radius-lg);
    --bs-card-inner-border-radius: calc(var(--radius-lg) - 1px);
    --bs-card-spacer-y: 1.25rem;
    --bs-card-spacer-x: 1.25rem;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft);
}

.fx .card.border-0 { box-shadow: var(--shadow-soft) !important; }

.fx a.card:hover,
.fx .card-hover:hover {
    transform: none;
    box-shadow: var(--shadow-lift) !important;
}

.fx .card-header {
    padding: 1rem 1.25rem;
    font-weight: 600;
    border-bottom-color: var(--color-border);
}

.fx .card-footer,
.fx .card-footer.bg-white {
    background-color: transparent !important;
    border-top: 1px solid var(--color-border);
    padding: .85rem 1.25rem;
    gap: .75rem;
    flex-wrap: wrap;
}

.fx .card > .rounded-top:first-child {
    border-radius: calc(var(--radius-lg) - 1px) calc(var(--radius-lg) - 1px) 0 0 !important;
}

.fx .card-body > h2.h6,
.fx .card-body > .h6 {
    font-size: .9375rem;
    font-weight: 650;
    letter-spacing: -.01em;
}

:is(.fx, .fx-client-content) .surface-card {
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft);
}

/* -----------------------------------------------------------------------------
   5. Formularios
   ----------------------------------------------------------------------------- */
:is(.fx, .fx-client-content) .form-label {
    font-size: .8125rem;
    font-weight: 550;
    color: var(--color-ink);
    margin-bottom: .4rem;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}

.fx .form-label.text-muted { color: var(--color-ink-muted) !important; }

:is(.fx, .fx-client-content) :is(.form-control, .form-select) {
    background-color: var(--fx-surface-2);
    border: 1px solid var(--color-border);
    border-radius: .625rem;
    color: var(--color-ink);
    font-size: .9rem;
    min-height: 2.625rem;
    padding: .55rem .85rem;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .12);
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

:is(.fx, .fx-client-content) .form-select {
    padding-right: 2.25rem;
    background-position: right .8rem center;
    background-size: 14px 10px;
    --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23a29e96' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}

:is(.fx, .fx-client-content) .form-control-sm,
:is(.fx, .fx-client-content) .form-select-sm { min-height: 2.125rem; font-size: .8125rem; }

:is(.fx, .fx-client-content) textarea.form-control { min-height: 5.5rem; }

:is(.fx, .fx-client-content) :is(.form-control, .form-select):hover:not(:disabled):not(:focus) {
    border-color: var(--fx-border-strong);
}

:is(.fx, .fx-client-content) :is(.form-control, .form-select):focus {
    background-color: var(--fx-surface-2);
    color: var(--color-ink);
    border-color: rgba(var(--bs-primary-rgb), .75);
    box-shadow: var(--fx-ring);
}

:is(.fx, .fx-client-content) .form-control::placeholder { color: var(--color-ink-disabled); }

:is(.fx, .fx-client-content) :is(.form-control, .form-select):disabled,
:is(.fx, .fx-client-content) .form-control[readonly] {
    background-color: rgba(255, 255, 255, .02);
    color: var(--color-ink-muted);
    border-style: dashed;
    box-shadow: none;
}

:is(.fx, .fx-client-content) .form-control-color {
    min-height: 2.625rem;
    width: 3.25rem;
    padding: .3rem;
    cursor: pointer;
}

:is(.fx, .fx-client-content) .form-control::file-selector-button {
    background: var(--fx-surface-3);
    color: var(--color-ink);
    border: 0;
    border-right: 1px solid var(--color-border);
    padding: .55rem .85rem;
    margin: -.55rem .85rem -.55rem -.85rem;
}

:is(.fx, .fx-client-content) .form-text {
    color: var(--color-ink-muted);
    font-size: .78rem;
    margin-top: .35rem;
}

:is(.fx, .fx-client-content) :is(.is-invalid, .was-validated :invalid).form-control {
    border-color: rgba(239, 68, 68, .7);
}

:is(.fx, .fx-client-content) .invalid-feedback { color: #f87171; font-size: .78rem; }

:is(.fx, .fx-client-content) .form-check { min-height: 1.5rem; }

:is(.fx, .fx-client-content) .form-check-input {
    background-color: var(--fx-surface-2);
    border: 1px solid var(--fx-border-strong);
    width: 1.1em;
    height: 1.1em;
    margin-top: .2em;
}

:is(.fx, .fx-client-content) .form-check-input:checked {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

:is(.fx, .fx-client-content) .form-check-input:focus { box-shadow: var(--fx-ring); border-color: var(--color-primary); }

:is(.fx, .fx-client-content) .form-check-label { font-size: .875rem; cursor: pointer; }

:is(.fx, .fx-client-content) .input-group-text,
:is(.fx, .fx-client-content) .input-group-text:is(.bg-white, .bg-light) {
    background-color: var(--fx-surface-3) !important;
    border-color: var(--color-border);
    color: var(--color-ink-muted) !important;
    font-size: .875rem;
    border-radius: .625rem;
}

/* Campo de contrasena con ojo integrado (fiderly-ui.js lo envuelve) */
.fx-password {
    position: relative;
    display: block;
    width: 100%;
}

.fx-password > input { padding-right: 2.9rem !important; }

.fx-password-toggle {
    position: absolute;
    top: 50%;
    right: .35rem;
    transform: translateY(-50%);
    width: 2.25rem;
    height: 2.25rem;
    border: 0;
    border-radius: .5rem;
    background: transparent;
    color: var(--color-ink-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    cursor: pointer;
    transition: color .15s ease, background-color .15s ease;
}

.fx-password-toggle:hover { color: var(--color-ink); background: rgba(255, 255, 255, .06); }

/* -----------------------------------------------------------------------------
   6. Tablas
   ----------------------------------------------------------------------------- */
.fx .table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--color-ink);
    --bs-table-border-color: var(--color-border);
    --bs-table-hover-bg: rgba(255, 255, 255, .025);
    --bs-table-hover-color: var(--color-ink);
    --bs-table-striped-bg: rgba(255, 255, 255, .02);
    font-size: .875rem;
}

.fx .table-light {
    --bs-table-bg: var(--fx-surface-2);
    --bs-table-color: var(--color-ink-muted);
    --bs-table-border-color: var(--color-border);
}

.fx .table thead th {
    background-color: var(--fx-surface-2);
    color: var(--color-ink-muted);
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .06em;
    padding: .7rem 1rem;
    border-bottom: 1px solid var(--color-border);
    white-space: nowrap;
}

.fx .table > :not(caption) > * > * {
    padding: .8rem 1rem;
    border-bottom-color: var(--color-border);
}

.fx .table tbody tr:last-child > * { border-bottom: 0; }

.fx .table td { color: var(--color-ink); }

.fx .table-responsive {
    border-radius: inherit;
    -webkit-overflow-scrolling: touch;
}

.fx .card > .table-responsive:first-child .table thead th:first-child { border-top-left-radius: calc(var(--radius-lg) - 1px); }
.fx .card > .table-responsive:first-child .table thead th:last-child { border-top-right-radius: calc(var(--radius-lg) - 1px); }

/* Fila de "sin resultados" (fiderly-ui.js agrega el icono) */
.fx .table td.fx-empty-cell {
    padding: 2.75rem 1rem !important;
    text-align: center;
    color: var(--color-ink-muted);
    font-size: .875rem;
}

.fx .fx-empty-icon {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto .65rem;
    background: var(--fx-surface-2);
    box-shadow: 0 0 0 1px var(--color-border);
    color: var(--color-ink-muted);
    font-size: 1.15rem;
}

/* Tablas en movil: cada fila se convierte en una ficha con pares
   etiqueta/valor (fiderly-ui.js copia los <th> a data-label). */
@media (max-width: 767.98px) {
    .fx .table.fx-table-stack thead { display: none; }

    .fx .table.fx-table-stack,
    .fx .table.fx-table-stack tbody,
    .fx .table.fx-table-stack tr,
    .fx .table.fx-table-stack td { display: block; width: 100%; }

    .fx .table.fx-table-stack tr {
        padding: .65rem 1rem;
        border-bottom: 1px solid var(--color-border);
    }

    .fx .table.fx-table-stack tbody tr:last-child { border-bottom: 0; }

    .fx .table.fx-table-stack > :not(caption) > * > * {
        border: 0;
        padding: .3rem 0;
        background: transparent;
        box-shadow: none;
    }

    .fx .table.fx-table-stack td[data-label] {
        display: grid;
        grid-template-columns: minmax(0, 38%) minmax(0, 1fr);
        column-gap: 1rem;
        align-items: start;
        justify-items: end;
        text-align: right !important;
        overflow-wrap: anywhere;
    }

    .fx .table.fx-table-stack td[data-label] > * { grid-column: 2; }

    .fx .table.fx-table-stack td[data-label]::before {
        content: attr(data-label);
        flex-shrink: 0;
        max-width: 45%;
        text-align: left;
        color: var(--color-ink-muted);
        font-size: .72rem;
        font-weight: 600;
        letter-spacing: .04em;
        text-transform: uppercase;
        padding-top: .15rem;
        grid-column: 1;
        grid-row: 1 / span 6;
        justify-self: start;
        max-width: none;
    }

    .fx .table.fx-table-stack td[data-label] > * { min-width: 0; max-width: 100%; }
    .fx .table.fx-table-stack td[data-label=""]::before { content: none; }
    .fx .table.fx-table-stack td[data-label=""] { grid-template-columns: 1fr; }
    .fx .table.fx-table-stack td[data-label=""] > * { grid-column: 1; }

    .fx .table.fx-table-stack td.fx-cell-actions {
        align-items: center;
        padding-top: .6rem !important;
        margin-top: .3rem;
        border-top: 1px dashed var(--color-border) !important;
    }

    .fx .table.fx-table-stack td.fx-cell-actions::before { align-self: center; grid-row: 1; }

    .fx .table.fx-table-stack td.fx-empty-cell { display: block; text-align: center !important; }
    .fx .table.fx-table-stack td.fx-empty-cell::before { content: none; }

    .fx .table-responsive:has(.fx-table-stack) { overflow-x: visible; }
}

/* -----------------------------------------------------------------------------
   7. Badges, alertas, progreso, paginacion, listas
   ----------------------------------------------------------------------------- */
:is(.fx, .fx-client-content) .badge {
    --bs-badge-padding-x: .6em;
    --bs-badge-padding-y: .38em;
    --bs-badge-font-size: .72rem;
    --bs-badge-font-weight: 600;
    --bs-badge-border-radius: 999px;
    letter-spacing: .01em;
}

.fx .badge.bg-success { background-color: rgba(34, 197, 94, .14) !important; color: #4ade80 !important; box-shadow: inset 0 0 0 1px rgba(34, 197, 94, .25); }
.fx .badge.bg-warning { background-color: rgba(245, 158, 11, .14) !important; color: #fbbf24 !important; box-shadow: inset 0 0 0 1px rgba(245, 158, 11, .25); }
.fx .badge.bg-danger { background-color: rgba(239, 68, 68, .14) !important; color: #f87171 !important; box-shadow: inset 0 0 0 1px rgba(239, 68, 68, .25); }
.fx .badge.bg-info { background-color: var(--fx-info-tint) !important; color: var(--fx-info) !important; box-shadow: inset 0 0 0 1px rgba(56, 189, 248, .25); }
.fx .badge.bg-secondary { background-color: rgba(255, 255, 255, .06) !important; color: var(--color-ink-muted) !important; box-shadow: inset 0 0 0 1px var(--color-border); }
.fx .badge.bg-primary { background-color: rgba(var(--bs-primary-rgb), .14) !important; color: var(--color-primary) !important; box-shadow: inset 0 0 0 1px rgba(var(--bs-primary-rgb), .3); }

.fx .badge.bg-light.text-dark {
    background-color: var(--fx-surface-3) !important;
    color: var(--color-ink) !important;
    font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
    font-weight: 500;
    font-size: .7rem;
    letter-spacing: 0;
    border: 0 !important;
    box-shadow: inset 0 0 0 1px var(--color-border);
}

/* Chip sobre el color de un programa (encabezado de tarjeta en admin) */
.fx .text-white .badge.bg-light.text-dark {
    background-color: rgba(255, 255, 255, .22) !important;
    color: #fff !important;
    font-family: var(--fx-font);
    box-shadow: none;
}

:is(.fx, .fx-client-content) .alert {
    --bs-alert-border-radius: var(--radius-md);
    --bs-alert-padding-x: 1rem;
    --bs-alert-padding-y: .85rem;
    border: 1px solid transparent;
    font-size: .875rem;
    line-height: 1.5;
}

:is(.fx, .fx-client-content) .alert-primary { background: rgba(var(--bs-primary-rgb), .08); border-color: rgba(var(--bs-primary-rgb), .22); color: var(--color-ink); }
:is(.fx, .fx-client-content) .alert-primary > .bi { color: var(--color-primary); }
:is(.fx, .fx-client-content) .alert-warning { background: var(--color-warning-tint); border-color: rgba(245, 158, 11, .28); color: #fcd34d; }
:is(.fx, .fx-client-content) .alert-danger { background: var(--color-danger-tint); border-color: rgba(239, 68, 68, .28); color: #fca5a5; }
:is(.fx, .fx-client-content) .alert-success { background: var(--color-success-tint); border-color: rgba(34, 197, 94, .28); color: #86efac; }
:is(.fx, .fx-client-content) .alert-info { background: var(--fx-info-tint); border-color: rgba(56, 189, 248, .28); color: #7dd3fc; }

:is(.fx, .fx-client-content) .progress {
    background-color: var(--fx-surface-3);
    border-radius: 999px;
}

.fx .pagination {
    --bs-pagination-bg: transparent;
    --bs-pagination-border-color: transparent;
    gap: .25rem;
    flex-wrap: wrap;
}

.fx .pagination .page-link {
    min-width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: .5rem !important;
    border: 1px solid transparent;
    color: var(--color-ink-muted);
    font-size: .8125rem;
    font-weight: 500;
    padding: 0 .5rem;
    background: transparent;
}

.fx .pagination .page-link:hover { background: var(--fx-surface-3); color: var(--color-ink); border-color: var(--color-border); }

.fx .pagination .page-item.active .page-link {
    background: var(--fx-surface-3);
    color: var(--color-ink);
    border-color: var(--fx-border-strong);
    box-shadow: none;
}

.fx .pagination .page-item.disabled .page-link { color: var(--color-ink-disabled); background: transparent; }

:is(.fx, .fx-client-content) .list-group-item {
    background: transparent;
    border-color: var(--color-border);
    color: var(--color-ink);
    padding-top: .85rem;
    padding-bottom: .85rem;
}

/* -----------------------------------------------------------------------------
   8. Modales, menus desplegables, offcanvas
   ----------------------------------------------------------------------------- */
:is(.fx, .fx-client-content) .modal-content {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 1.1rem;
    box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .75);
}

:is(.fx, .fx-client-content) .modal-header {
    padding: 1.15rem 1.35rem .5rem;
    border-bottom: 0;
}

:is(.fx, .fx-client-content) .modal-title { font-size: 1.05rem; font-weight: 650; letter-spacing: -.01em; }
:is(.fx, .fx-client-content) .modal-body { padding: .75rem 1.35rem 1rem; }

:is(.fx, .fx-client-content) .modal-footer {
    padding: .85rem 1.35rem 1.15rem;
    border-top: 0;
    gap: .5rem;
}

:is(.fx, .fx-client-content) .modal-footer > * { margin: 0; }

:is(.fx, .fx-client-content) .btn-close {
    width: 2rem;
    height: 2rem;
    padding: 0;
    border-radius: .5rem;
    background-size: .75rem;
    opacity: .6;
    transition: opacity .15s ease, background-color .15s ease;
}

:is(.fx, .fx-client-content) .btn-close:hover { opacity: 1; background-color: rgba(0, 0, 0, .12); }
:is(.fx, .fx-client-content) .btn-close:focus { box-shadow: var(--fx-ring); }

body.fx .modal-backdrop,
body:has(.fx-client-content) .modal-backdrop { --bs-backdrop-bg: #050505; --bs-backdrop-opacity: .7; }

@media (max-width: 575.98px) {
    :is(.fx, .fx-client-content) .modal-dialog { margin: .75rem; }
    :is(.fx, .fx-client-content) .modal-footer > .btn { flex: 1; }
}

.fx .dropdown-menu {
    --bs-dropdown-bg: var(--fx-surface-2);
    --bs-dropdown-border-color: var(--color-border);
    --bs-dropdown-link-color: var(--color-ink);
    --bs-dropdown-link-hover-color: var(--color-ink);
    --bs-dropdown-link-hover-bg: rgba(255, 255, 255, .05);
    --bs-dropdown-divider-bg: var(--color-border);
    --bs-dropdown-header-color: var(--color-ink-muted);
    border-radius: .85rem;
    padding: .4rem;
    box-shadow: 0 20px 50px -12px rgba(0, 0, 0, .7);
    font-size: .875rem;
}

.fx .dropdown-item {
    border-radius: .5rem;
    padding: .5rem .65rem;
    display: flex;
    align-items: center;
    gap: .55rem;
}

.fx .dropdown-item:hover,
.fx .dropdown-item:focus { background-color: rgba(255, 255, 255, .05); color: var(--color-ink); }
.fx .dropdown-item > .bi { color: var(--color-ink-muted); }
.fx .dropdown-divider { margin: .35rem .25rem; }

.fx .offcanvas {
    --bs-offcanvas-bg: var(--color-surface);
    --bs-offcanvas-color: var(--color-ink);
    --bs-offcanvas-border-color: var(--color-border);
}

/* -----------------------------------------------------------------------------
   9. Componentes compartidos del sistema (estadisticas, vacios, iconos)
   ----------------------------------------------------------------------------- */
.fx .stat-card {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
        "label icon"
        "value value"
        "trend trend";
    align-items: start;
    row-gap: .35rem;
    padding: 1.15rem 1.25rem;
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    box-shadow: var(--shadow-soft);
    transition: box-shadow .2s ease;
}

.fx .stat-card::before { content: none; }

.fx .stat-card:hover { box-shadow: var(--shadow-lift); }

.fx .stat-card .stat-card-icon {
    grid-area: icon;
    width: 2.25rem;
    height: 2.25rem;
    margin: 0;
    font-size: 1rem;
    border-radius: .65rem;
    background: color-mix(in srgb, var(--stat-accent, var(--color-primary)) 14%, transparent);
    color: var(--stat-accent, var(--color-primary));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--stat-accent, var(--color-primary)) 22%, transparent);
}

.fx .stat-card .stat-card-label {
    grid-area: label;
    order: -1;
    color: var(--color-ink-muted);
    font-size: .8125rem;
    font-weight: 500;
    align-self: center;
}

.fx .stat-card .stat-card-value {
    grid-area: value;
    font-size: 1.85rem;
    font-weight: 650;
    letter-spacing: -.03em;
    line-height: 1.15;
    margin-top: .35rem;
}

.fx .stat-card .stat-card-trend {
    grid-area: trend;
    font-size: .78rem;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: .3rem;
}

.fx .stat-card .stat-card-trend.text-success { color: #4ade80 !important; }

:is(.fx, .fx-client-content) .empty-state { padding: 3rem 1.5rem; }

:is(.fx, .fx-client-content) .empty-state .empty-state-icon {
    width: 3.5rem;
    height: 3.5rem;
    font-size: 1.4rem;
    background: var(--fx-surface-2);
    color: var(--color-ink-muted);
    box-shadow: 0 0 0 1px var(--color-border), 0 0 0 8px rgba(255, 255, 255, .015);
    margin-bottom: 1.1rem;
}

:is(.fx, .fx-client-content) .empty-state p:first-of-type { color: var(--color-ink); font-weight: 550; }

:is(.fx, .fx-client-content) .icon-badge { border-radius: .7rem; }
:is(.fx, .fx-client-content) .icon-badge-primary { background: rgba(var(--bs-primary-rgb), .12); }

:is(.fx, .fx-client-content) .badge-pill {
    white-space: nowrap;
    padding: .3rem .7rem;
    font-size: .76rem;
    gap: .3rem;
}

:is(.fx, .fx-client-content) .badge-pill-success { box-shadow: inset 0 0 0 1px rgba(34, 197, 94, .25); color: #4ade80; }
:is(.fx, .fx-client-content) .badge-pill-warning { box-shadow: inset 0 0 0 1px rgba(245, 158, 11, .25); color: #fbbf24; }
:is(.fx, .fx-client-content) .badge-pill-muted { background: var(--fx-surface-2); box-shadow: inset 0 0 0 1px var(--color-border); }

:is(.fx, .fx-client-content) .list-tile .list-tile-title { font-weight: 600; }

:is(.fx, .fx-client-content) .client-section-title h2 {
    font-size: .8125rem;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--color-ink-muted);
}

/* Pie legal dentro de los paneles */
:is(.fx, .fx-client-content) .app-legal-footer {
    gap: .35rem .9rem;
    font-size: .75rem;
    margin-top: 3rem;
    padding: 1.25rem 0 .25rem;
}

:is(.fx, .fx-client-content) .app-legal-footer > span[aria-hidden] { display: none; }

/* -----------------------------------------------------------------------------
   10. Shell del panel administrativo (layouts/app.php)
   ----------------------------------------------------------------------------- */
.fx-admin { --fx-sidebar-w: 264px; --fx-topbar-h: 64px; }

.fx-shell { min-height: 100vh; }

.fx-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: var(--fx-sidebar-w);
    z-index: 1045;
    display: flex;
    flex-direction: column;
    background: #141414;
    border-right: 1px solid var(--color-border);
}

.fx-sidebar-brand {
    height: var(--fx-topbar-h);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: 0 1rem 0 1.25rem;
    border-bottom: 1px solid var(--color-border);
}

.fx-brand {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    min-width: 0;
    color: var(--color-ink);
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: -.02em;
    text-decoration: none;
}

.fx-brand:hover { color: var(--color-ink); }

.fx-brand-mark {
    width: 2rem;
    height: 2rem;
    flex-shrink: 0;
    border-radius: .6rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--color-primary);
    color: var(--color-primary-contrast);
    font-size: 1rem;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25);
}

.fx-brand-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.fx-sidebar .brand-logo--sidebar { max-height: 36px; max-width: 180px; }

.fx-sidebar-close {
    display: none;
    width: 2rem;
    height: 2rem;
    border: 0;
    border-radius: .5rem;
    background: transparent;
    color: var(--color-ink-disabled);
    font-size: 1.4rem;
    align-items: center;
    justify-content: center;
}

.fx-sidebar-close:hover { background: rgba(255, 255, 255, .06); color: var(--color-ink); }

.fx-nav {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: .75rem .75rem 1rem;
    display: flex;
    flex-direction: column;
    gap: .1rem;
}

.fx-nav-section {
    padding: 1rem .75rem .4rem;
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--color-ink-disabled);
}

.fx-nav-section:first-child { padding-top: .35rem; }

.fx-nav-link {
    position: relative;
    display: flex;
    align-items: center;
    gap: .7rem;
    min-height: 2.4rem;
    padding: .45rem .75rem;
    border-radius: .6rem;
    color: var(--color-ink-muted);
    font-size: .875rem;
    font-weight: 500;
    text-decoration: none;
    transition: background-color .15s ease, color .15s ease;
}

.fx-nav-link > .bi {
    font-size: 1.05rem;
    width: 1.15rem;
    text-align: center;
    flex-shrink: 0;
    color: var(--color-ink-disabled);
    transition: color .15s ease;
}

.fx-nav-link:hover { background: rgba(255, 255, 255, .04); color: var(--color-ink); }
.fx-nav-link:hover > .bi { color: var(--color-ink-muted); }

.fx-nav-link.active {
    background: rgba(var(--bs-primary-rgb), .1);
    color: var(--color-ink);
    font-weight: 600;
}

.fx-nav-link.active > .bi { color: var(--color-primary); }

.fx-nav-link.active::before {
    content: '';
    position: absolute;
    left: -.75rem;
    top: .55rem;
    bottom: .55rem;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--color-primary);
}

.fx-sidebar-footer {
    flex-shrink: 0;
    padding: .75rem .75rem calc(.75rem + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--color-border);
}

.fx-user-card {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .5rem;
    border-radius: .7rem;
    color: var(--color-ink);
    text-decoration: none;
    transition: background-color .15s ease;
}

a.fx-user-card:hover { background: rgba(255, 255, 255, .04); color: var(--color-ink); }
.fx-user-card > .bi { color: var(--color-ink-disabled); font-size: 1rem; }
a.fx-user-card:hover > .bi { color: var(--color-ink-muted); }

/* Accion "Cerrar sesion" del menu lateral: siempre visible al pie, con
   icono de salida; no tiene relacion con mostrar/ocultar el menu. */
.fx-logout-btn {
    width: 100%;
    min-height: 2.6rem;
    margin-top: .5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    border-radius: .65rem;
    border: 1px solid rgba(239, 68, 68, .28);
    background: rgba(239, 68, 68, .06);
    color: #fca5a5;
    font-size: .875rem;
    font-weight: 600;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.fx-logout-btn > .bi { font-size: 1.05rem; }
.fx-logout-btn:hover { background: #dc2626; border-color: #dc2626; color: #fff; }
.fx-logout-btn:focus-visible { outline: 2px solid rgba(239, 68, 68, .6); outline-offset: 2px; }
.fx-logout-btn.is-loading { --fx-spinner: #fca5a5; }

.fx-avatar {
    width: 2.1rem;
    height: 2.1rem;
    flex-shrink: 0;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(var(--bs-primary-rgb), .3), rgba(var(--color-secondary-rgb), .18));
    color: var(--color-ink);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .02em;
    box-shadow: inset 0 0 0 1px rgba(var(--bs-primary-rgb), .3);
}

.fx-user-meta { min-width: 0; line-height: 1.25; flex: 1; }
.fx-user-name { font-size: .8125rem; font-weight: 600; color: var(--color-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fx-user-role { font-size: .72rem; color: var(--color-ink-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.fx-maker {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    margin-top: .5rem;
    font-size: .68rem;
    color: var(--color-ink-disabled);
    text-decoration: none;
    opacity: .85;
}

.fx-maker:hover { color: var(--color-ink-muted); opacity: 1; }
.fx-maker img { height: 14px; width: auto; }

.fx-main {
    margin-left: var(--fx-sidebar-w);
    min-width: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.fx-topbar {
    position: sticky;
    top: 0;
    z-index: 1030;
    height: var(--fx-topbar-h);
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: 0 2rem;
    background: rgba(17, 17, 17, .82);
    -webkit-backdrop-filter: saturate(160%) blur(12px);
    backdrop-filter: saturate(160%) blur(12px);
    border-bottom: 1px solid var(--color-border);
}

.fx-topbar-title { min-width: 0; line-height: 1.2; }

.fx-topbar-eyebrow {
    font-size: .72rem;
    color: var(--color-ink-muted);
    font-weight: 500;
}

.fx-topbar-heading {
    font-size: .975rem;
    font-weight: 650;
    letter-spacing: -.01em;
    color: var(--color-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fx-topbar-actions { margin-left: auto; display: flex; align-items: center; gap: .5rem; }

.fx-icon-btn {
    width: 2.375rem;
    height: 2.375rem;
    flex-shrink: 0;
    border-radius: .65rem;
    border: 1px solid var(--color-border);
    background: var(--fx-surface-2);
    color: var(--color-ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    text-decoration: none;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.fx-icon-btn:hover { background: var(--fx-surface-3); border-color: var(--fx-border-strong); color: var(--color-ink); }

/* Barras superiores de Admin y Empleado: solo icono, sin circulo/fondo */
.fx-topbar .fx-icon-btn,
.fx-emp-topbar .fx-icon-btn,
.fx-employee .employee-icon-btn {
    width: 2.75rem;
    height: 2.75rem;
    background: transparent;
    border-color: transparent;
    border-radius: .7rem;
    font-size: 1.3rem;
    color: var(--color-ink);
}

.fx-topbar .fx-icon-btn:hover,
.fx-emp-topbar .fx-icon-btn:hover,
.fx-employee .employee-icon-btn:hover,
.fx-topbar .fx-icon-btn:focus-visible,
.fx-emp-topbar .fx-icon-btn:focus-visible { background: rgba(255, 255, 255, .06); border-color: transparent; color: var(--color-primary); }

.fx-emp-topbar .fx-icon-btn.active { color: var(--color-primary); }

.fx-user-btn { background: transparent !important; border-color: transparent !important; }
.fx-user-btn:hover, .fx-user-btn[aria-expanded="true"] { background: rgba(255, 255, 255, .05) !important; }


.fx-user-btn {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    padding: .25rem .6rem .25rem .25rem;
    border-radius: 999px;
    border: 1px solid var(--color-border);
    background: var(--fx-surface-2);
    color: var(--color-ink);
    font-size: .8125rem;
    font-weight: 550;
    transition: background-color .15s ease, border-color .15s ease;
}

.fx-user-btn:hover,
.fx-user-btn[aria-expanded="true"] { background: var(--fx-surface-3); border-color: var(--fx-border-strong); }
.fx-user-btn .fx-avatar { width: 1.85rem; height: 1.85rem; font-size: .68rem; }
.fx-user-btn .bi-chevron-down { font-size: .7rem; color: var(--color-ink-muted); }

.fx-dropdown-head {
    padding: .55rem .65rem .65rem;
    line-height: 1.3;
}

.fx-dropdown-head strong { display: block; font-size: .875rem; }
.fx-dropdown-head span { font-size: .75rem; color: var(--color-ink-muted); }

.fx .dropdown-item.fx-dropdown-danger { color: #f87171; }
.fx .dropdown-item.fx-dropdown-danger > .bi { color: #f87171; }
.fx .dropdown-item.fx-dropdown-danger:hover { background: rgba(239, 68, 68, .1); color: #fca5a5; }

.fx-content {
    flex: 1;
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 1.75rem 2rem 1.5rem;
}

/* Encabezados de pagina: el primer bloque de cada vista (titulo + accion) */
.fx-content > h1.h4:first-child,
.fx-content > .d-flex:first-child h1.h4,
.fx-content > .mb-4:first-child h1.h4 {
    font-size: 1.4rem;
    font-weight: 650;
    letter-spacing: -.025em;
}

.fx-content > .d-flex.justify-content-between:first-child,
.fx-content > .d-flex.align-items-center:first-child {
    flex-wrap: wrap;
    gap: .75rem 1rem;
    margin-bottom: 1.5rem !important;
}

.fx-content > h1.h4:first-child { margin-bottom: 1.5rem !important; }

.fx-content > .d-flex:first-child > .d-flex { flex-wrap: wrap; }

/* Botones "volver" (btn-sm outline + flecha) junto al titulo */
.fx-content > .d-flex:first-child .btn-sm:has(> .bi-arrow-left:only-child) {
    width: 2.25rem;
    height: 2.25rem;
    min-height: 2.25rem;
    padding: 0;
    border-radius: .6rem;
}

/* Boton "Ocultar menu" (escritorio) en la cabecera del menu lateral */
.fx-sidebar-collapse {
    width: 2.25rem;
    height: 2.25rem;
    flex-shrink: 0;
    border: 0;
    border-radius: .55rem;
    background: transparent;
    color: var(--color-ink-muted);
    font-size: 1.15rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color .15s ease, color .15s ease;
}

.fx-sidebar-collapse:hover { background: rgba(255, 255, 255, .06); color: var(--color-ink); }

/* Transicion suave del ancho del menu y del contenido */
@media (min-width: 992px) {
    .fx-sidebar { transition: width .22s var(--fx-ease); }
    .fx-main { transition: margin-left .22s var(--fx-ease); }

    /* Menu contraido: solo iconos (con tooltip nativo por title) */
    .fx-sb-collapsed .fx-admin { --fx-sidebar-w: 76px; }
    .fx-sb-collapsed .fx-sidebar-brand { justify-content: center; padding: 0; }
    .fx-sb-collapsed .fx-sidebar-brand .fx-brand { display: none; }
    .fx-sb-collapsed .fx-sidebar .fx-nav { padding: .75rem .65rem 1rem; }
    .fx-sb-collapsed .fx-sidebar .fx-nav-section { height: 1px; padding: 0; margin: .6rem .4rem; overflow: hidden; color: transparent; background: var(--color-border); }
    .fx-sb-collapsed .fx-sidebar .fx-nav-section:first-child { margin-top: .1rem; }
    .fx-sb-collapsed .fx-sidebar .fx-nav-link { justify-content: center; padding: .55rem 0; min-height: 2.6rem; }
    .fx-sb-collapsed .fx-sidebar .fx-nav-link > span { display: none; }
    .fx-sb-collapsed .fx-sidebar .fx-nav-link > .bi { font-size: 1.15rem; width: auto; }
    .fx-sb-collapsed .fx-sidebar .fx-nav-link.active::before { left: -.65rem; }
    .fx-sb-collapsed .fx-sidebar .fx-sidebar-footer { padding-left: .65rem; padding-right: .65rem; }
    .fx-sb-collapsed .fx-sidebar .fx-user-card { justify-content: center; padding: .35rem 0; }
    .fx-sb-collapsed .fx-sidebar .fx-user-card > .fx-user-meta, .fx-sb-collapsed .fx-sidebar .fx-user-card > .bi, .fx-sb-collapsed .fx-sidebar .fx-maker { display: none; }
    .fx-sb-collapsed .fx-sidebar .fx-logout-btn { padding: 0; }
    .fx-sb-collapsed .fx-sidebar .fx-logout-btn > span { display: none; }
    .fx-sb-collapsed .fx-sidebar .fx-logout-btn > .bi { font-size: 1.15rem; }
}

.fx-sidebar-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1040;
    background: rgba(0, 0, 0, .6);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s ease, visibility .2s;
}

/* Celular / tablet: sin boton externo. El menu queda como barra fina de
   iconos fija a la izquierda; su boton interno lo despliega encima del
   contenido (no lo empuja) y Esc, el fondo o elegir una opcion lo cierran. */
@media (max-width: 991.98px) {
    .fx-admin { --fx-rail-w: 60px; }

    .fx-sidebar {
        height: 100vh;
        height: 100dvh;
        bottom: auto;
        width: var(--fx-rail-w);
        transition: width .22s var(--fx-ease), box-shadow .22s ease;
    }

    .fx-sidebar.is-open {
        width: min(84vw, 264px);
        box-shadow: 24px 0 60px -20px rgba(0, 0, 0, .8);
    }

    .fx-sidebar-backdrop.is-open { opacity: 1; visibility: visible; }
    .fx-main { margin-left: var(--fx-rail-w); }
    .fx-topbar { padding: 0 1.25rem; }
    .fx-content { padding: 1.5rem 1.25rem 1.25rem; }
    body.fx-nav-open { overflow: hidden; }

    .fx-sidebar.is-open .fx-sidebar-brand { padding: 0 .75rem 0 1rem; }

    .fx-sidebar:not(.is-open) .fx-sidebar-brand { justify-content: center; padding: 0; }
    .fx-sidebar:not(.is-open) .fx-sidebar-brand .fx-brand { display: none; }
    .fx-sidebar:not(.is-open) .fx-nav { padding: .75rem .5rem 1rem; }
    .fx-sidebar:not(.is-open) .fx-nav-section { height: 1px; padding: 0; margin: .6rem .4rem; overflow: hidden; color: transparent; background: var(--color-border); }
    .fx-sidebar:not(.is-open) .fx-nav-section:first-child { margin-top: .1rem; }
    .fx-sidebar:not(.is-open) .fx-nav-link { justify-content: center; padding: .55rem 0; min-height: 2.6rem; }
    .fx-sidebar:not(.is-open) .fx-nav-link > span { display: none; }
    .fx-sidebar:not(.is-open) .fx-nav-link > .bi { font-size: 1.15rem; width: auto; }
    .fx-sidebar:not(.is-open) .fx-nav-link.active::before { left: -.5rem; }
    .fx-sidebar:not(.is-open) .fx-sidebar-footer { padding-left: .5rem; padding-right: .5rem; }
    .fx-sidebar:not(.is-open) .fx-user-card { justify-content: center; padding: .35rem 0; }
    .fx-sidebar:not(.is-open) .fx-user-card > .fx-user-meta, .fx-sidebar:not(.is-open) .fx-user-card > .bi, .fx-sidebar:not(.is-open) .fx-maker { display: none; }
    .fx-sidebar:not(.is-open) .fx-logout-btn { padding: 0; }
    .fx-sidebar:not(.is-open) .fx-logout-btn > span { display: none; }
    .fx-sidebar:not(.is-open) .fx-logout-btn > .bi { font-size: 1.15rem; }
    .fx-sidebar:not(.is-open) .fx-nav-link { min-height: 2.75rem; }
    .fx-sidebar:not(.is-open) .fx-logout-btn { min-height: 2.75rem; }
}

@media (max-width: 575.98px) {
    .fx-admin { --fx-topbar-h: 58px; }
    .fx-topbar { padding: 0 1rem; gap: .6rem; }
    .fx-content { padding: 1.15rem 1rem 1rem; }
    .fx-user-btn { padding: .2rem; }
    .fx-user-btn > .fx-user-btn-name,
    .fx-user-btn > .bi-chevron-down { display: none; }
    .fx-content > h1.h4:first-child,
    .fx-content > .d-flex:first-child h1.h4 { font-size: 1.2rem; }

    /* Acciones del encabezado a todo lo ancho en telefono */
    .fx-content > .d-flex.justify-content-between:first-child > .btn,
    .fx-content > .d-flex.justify-content-between:first-child > div:last-child:not(:first-child) { width: 100%; }
    .fx-content > .d-flex.justify-content-between:first-child > div:last-child:not(:first-child) > .btn { flex: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .fx-sidebar, .fx-sidebar-backdrop { transition: none; }
}

/* -----------------------------------------------------------------------------
   11. Dashboard del administrador
   ----------------------------------------------------------------------------- */
.fx-page-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem 1.5rem;
    margin-bottom: 1.5rem;
}

.fx-page-head h1 { font-size: 1.5rem; font-weight: 650; letter-spacing: -.025em; margin: 0 0 .2rem; }
.fx-page-head p { color: var(--color-ink-muted); margin: 0; font-size: .9rem; }

.fx-quick-actions { display: flex; flex-wrap: wrap; gap: .5rem; }

.fx-chart-card .card-body { display: flex; flex-direction: column; }

.fx-card-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: 1rem;
}

.fx-card-title h2 { font-size: .9375rem; font-weight: 650; margin: 0; letter-spacing: -.01em; }
.fx-card-title span { font-size: .75rem; color: var(--color-ink-muted); }

.fx-chart-wrap { position: relative; height: 280px; }

.fx-shortcuts { display: grid; gap: .5rem; }

.fx-shortcuts-grid { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }

@media (max-width: 575.98px) {
    .fx-shortcuts-grid { grid-template-columns: 1fr 1fr; gap: .5rem; }
    .fx-shortcuts-grid .fx-shortcut { flex-direction: column; align-items: flex-start; gap: .55rem; padding: .8rem; }
    .fx-shortcuts-grid .fx-shortcut > .bi-chevron-right { display: none; }
    .fx-shortcuts-grid .fx-shortcut small { display: none; }
}

.fx-shortcut {
    display: flex;
    align-items: center;
    gap: .8rem;
    padding: .75rem .85rem;
    border-radius: .75rem;
    border: 1px solid var(--color-border);
    background: var(--fx-surface-2);
    color: var(--color-ink);
    text-decoration: none;
    transition: background-color .15s ease, border-color .15s ease;
}

.fx-shortcut:hover { background: var(--fx-surface-3); border-color: var(--fx-border-strong); color: var(--color-ink); }

.fx-shortcut-icon {
    width: 2.1rem;
    height: 2.1rem;
    flex-shrink: 0;
    border-radius: .6rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--bs-primary-rgb), .12);
    color: var(--color-primary);
}

.fx-shortcut strong { display: block; font-size: .85rem; font-weight: 600; }
.fx-shortcut small { display: block; color: var(--color-ink-muted); font-size: .75rem; }
.fx-shortcut > .bi-chevron-right { margin-left: auto; color: var(--color-ink-disabled); font-size: .8rem; }

@media (max-width: 575.98px) {
    .fx-page-head h1 { font-size: 1.25rem; }
    .fx-quick-actions { width: 100%; }
    .fx-quick-actions > .btn { flex: 1 1 calc(50% - .25rem); }
    .fx .stat-card { padding: 1rem; }
    .fx .stat-card .stat-card-value { font-size: 1.5rem; }
    .fx .stat-card .stat-card-icon { width: 2rem; height: 2rem; font-size: .9rem; }
}

/* Tarjetas de la portada de Reportes (icono grande + texto + boton) */
.fx .card-body > .bi.fs-1.text-primary:first-child {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: .75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem !important;
    background: rgba(var(--bs-primary-rgb), .12);
    box-shadow: inset 0 0 0 1px rgba(var(--bs-primary-rgb), .2);
}

.fx .card-body > .bi.fs-1.text-primary:first-child + h2 { margin-top: 1rem !important; }

/* Codigos QR del negocio (Configuracion) */
.fx-qr-card .card-body { padding: 1.25rem; }

.fx-qr-image {
    display: flex;
    justify-content: center;
    padding: .9rem;
    border-radius: .9rem;
    background: #fff;
    margin: 0 auto;
    width: 100%;
    max-width: 220px;
}

.fx-qr-image img { width: 100%; height: auto; display: block; image-rendering: pixelated; }
.fx-qr-image-lg { max-width: 340px; }

/* Reportes configurables */
.fx-report-periods,
.fx-active-filters { display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; }

.fx-chip {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    min-height: 2.25rem;
    padding: .35rem .85rem;
    border-radius: 999px;
    background: var(--fx-surface-2);
    box-shadow: inset 0 0 0 1px var(--color-border);
    color: var(--color-ink-muted);
    font-size: .82rem;
    font-weight: 550;
    text-decoration: none;
    transition: background-color .15s ease, color .15s ease;
}

.fx-chip:hover { background: var(--fx-surface-3); color: var(--color-ink); }
.fx-chip.is-active { background: rgba(var(--bs-primary-rgb), .14); box-shadow: inset 0 0 0 1px rgba(var(--bs-primary-rgb), .35); color: var(--color-ink); }
.fx-chip.is-filter { color: var(--color-ink); background: rgba(var(--bs-primary-rgb), .08); box-shadow: inset 0 0 0 1px rgba(var(--bs-primary-rgb), .25); }
.fx-chip.is-filter .bi { font-size: 1rem; color: var(--color-ink-muted); }
.fx-chip-clear { font-size: .8rem; color: var(--color-ink-muted); padding: .35rem .25rem; }

.fx-filters-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    min-height: 3.25rem;
    padding: .75rem 1.25rem;
    border: 0;
    border-radius: var(--radius-lg);
    background: transparent;
    color: var(--color-ink);
    font-weight: 650;
    font-size: .92rem;
    text-align: left;
}

.fx-filters-toggle > span:first-child { display: inline-flex; align-items: center; gap: .5rem; }
.fx-filters-count { font-size: .8rem; font-weight: 500; color: var(--color-ink-muted); display: inline-flex; align-items: center; gap: .4rem; }
.fx-filters-toggle[aria-expanded="true"] .bi-chevron-down { transform: rotate(180deg); }
.fx-filters-toggle .bi-chevron-down { transition: transform .2s ease; }
.fx-filters-body .card-body { border-top: 1px solid var(--color-border); }

/* En pantallas amplias el panel de configuracion siempre esta abierto */
@media (min-width: 992px) {
    .fx-filters-body.collapse:not(.show) { display: block; }
    .fx-filters-toggle { pointer-events: none; }
    .fx-filters-toggle .bi-chevron-down { display: none; }
}

/* Ajustes de pantallas angostas (desbordes que ya existian antes del
   rediseno y que la verificacion de 320 px detecto) */
.fx .selectable-card { position: relative; } /* el checkbox oculto (absoluto) no escapa del carrusel */
.fx .card-body .d-flex.gap-2:has(> .btn) { flex-wrap: wrap; }
.fx .stat-card { grid-template-columns: minmax(0, 1fr) auto; min-width: 0; }
.fx .stat-card .stat-card-label { min-width: 0; overflow-wrap: anywhere; }
.fx .stat-card .stat-card-value { overflow-wrap: anywhere; }

@media (max-width: 575.98px) {
    .fx .legalv-deflist { grid-template-columns: minmax(0, 1fr); gap: .1rem; }
    .fx .legalv-deflist dd { margin-bottom: .6rem; overflow-wrap: anywhere; }
    .fx .stat-card .stat-card-value { font-size: 1.35rem; }
}

@media (max-width: 379.98px) {
    .fx-admin { --fx-rail-w: 56px; }
    .fx-content { padding-left: .85rem !important; padding-right: .85rem !important; }
    .fx .stat-card { padding: .85rem; }
    .fx .stat-card .stat-card-icon { display: none; }
    .fx .stat-card { grid-template-areas: "label label" "value value" "trend trend"; }
}

/* -----------------------------------------------------------------------------
   12. Panel del empleado (layouts/employee.php)
   ----------------------------------------------------------------------------- */
.fx-employee { --fx-topbar-h: 62px; }

.fx-emp-topbar {
    position: sticky;
    top: 0;
    z-index: 1030;
    height: var(--fx-topbar-h);
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0 1.25rem;
    background: rgba(17, 17, 17, .82);
    -webkit-backdrop-filter: saturate(160%) blur(12px);
    backdrop-filter: saturate(160%) blur(12px);
    border-bottom: 1px solid var(--color-border);
}

.fx-emp-topbar .brand-logo--topbar { max-height: 30px; }

.fx-emp-nav { display: none; align-items: center; gap: .25rem; margin-left: 1rem; }

.fx-emp-nav a {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .45rem .8rem;
    border-radius: .6rem;
    color: var(--color-ink-muted);
    font-size: .85rem;
    font-weight: 500;
    text-decoration: none;
    transition: background-color .15s ease, color .15s ease;
}

.fx-emp-nav a:hover { color: var(--color-ink); background: rgba(255, 255, 255, .04); }
.fx-emp-nav a.active { color: var(--color-ink); background: rgba(var(--bs-primary-rgb), .1); }
.fx-emp-nav a.active > .bi { color: var(--color-primary); }

.fx-emp-actions { margin-left: auto; display: flex; align-items: center; gap: .5rem; }
.fx-emp-user { display: flex; align-items: center; gap: .55rem; margin-right: .25rem; }
.fx-emp-user .fx-user-name { max-width: 160px; }

.fx-employee .employee-main {
    max-width: 760px;
    padding: 1.5rem 1.1rem calc(7.5rem + env(safe-area-inset-bottom, 0px));
}

/* Menu flotante inferior (solo celular): capsula separada de los bordes,
   respeta el area segura inferior (env(safe-area-inset-bottom)). */
.fx-emp-bottomnav {
    position: fixed;
    left: max(.75rem, env(safe-area-inset-left, 0px));
    right: max(.75rem, env(safe-area-inset-right, 0px));
    bottom: calc(.75rem + env(safe-area-inset-bottom, 0px));
    z-index: 1030;
    max-width: 480px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .15rem;
    padding: .35rem;
    border-radius: 1.35rem;
    background: rgba(26, 26, 26, .88);
    -webkit-backdrop-filter: saturate(170%) blur(16px);
    backdrop-filter: saturate(170%) blur(16px);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 16px 40px -12px rgba(0, 0, 0, .85);
}

.fx-emp-bottomnav a {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .15rem;
    min-height: 3.25rem;
    padding: .3rem .1rem;
    border-radius: 1rem;
    color: var(--color-ink-muted);
    font-size: .68rem;
    font-weight: 600;
    line-height: 1.1;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .15s ease, color .15s ease;
}

.fx-emp-bottomnav a > .bi { font-size: 1.3rem; line-height: 1; }
.fx-emp-bottomnav a:active { background: rgba(255, 255, 255, .06); }

.fx-emp-bottomnav a.active {
    color: var(--color-ink);
    background: rgba(var(--bs-primary-rgb), .12);
}

.fx-emp-bottomnav a.active > .bi { color: var(--color-primary); }

/* Escanear: accion principal, al centro y en color de marca */
.fx-emp-bottomnav a.fx-emp-scan {
    flex: 0 0 auto;
    width: 3.6rem;
    min-height: 3.25rem;
    margin: 0 .15rem;
    border-radius: 1.05rem;
    background: var(--color-primary);
    color: var(--color-primary-contrast);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 6px 16px -6px rgba(var(--bs-primary-rgb), .7);
}

.fx-emp-bottomnav a.fx-emp-scan > .bi { color: var(--color-primary-contrast); font-size: 1.35rem; }
.fx-emp-bottomnav a.fx-emp-scan.active { background: var(--color-primary-dark); color: var(--color-primary-contrast); }

@media (max-width: 359.98px) {
    .fx-emp-bottomnav { left: .5rem; right: .5rem; padding: .3rem; }
    .fx-emp-bottomnav a { font-size: .62rem; }
    .fx-emp-bottomnav a.fx-emp-scan { width: 3.2rem; }
}

@media (min-width: 768px) {
    .fx-emp-nav { display: flex; }
    .fx-emp-bottomnav { display: none; }
    .fx-employee .employee-main { padding-bottom: 2.5rem; padding-top: 2rem; }
    .fx-emp-topbar { padding: 0 2rem; }
}

@media (max-width: 380px) {
    .fx-emp-user { display: none; }
}

/* Componentes tipo POS */
.fx-employee .employee-icon-btn {
    width: 2.375rem;
    height: 2.375rem;
    border-radius: .65rem;
    border: 1px solid var(--color-border);
    background: var(--fx-surface-2);
    color: var(--color-ink);
}

.fx-employee .employee-icon-btn:hover { background: var(--fx-surface-3); }

.fx .pos-scan-cta {
    border-radius: 1.1rem;
    padding: 1.25rem 1.35rem;
    background:
        radial-gradient(120% 140% at 100% 0%, rgba(255, 255, 255, .18), transparent 55%),
        var(--color-primary);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 14px 34px -16px rgba(var(--bs-primary-rgb), .7);
}

.fx .pos-scan-cta:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 18px 40px -16px rgba(var(--bs-primary-rgb), .85); }

.fx .pos-scan-cta .pos-scan-icon { border-radius: .85rem; width: 3.1rem; height: 3.1rem; font-size: 1.45rem; }
.fx .pos-scan-cta .pos-scan-title { font-weight: 700; font-size: 1.1rem; }

.fx .pos-action-grid { gap: .65rem; }

.fx .pos-action-btn {
    flex-direction: row;
    justify-content: flex-start;
    gap: .8rem;
    padding: 1rem 1.1rem;
    border-radius: 1rem;
    border: 0;
    font-weight: 600;
    font-size: .9rem;
    text-align: left;
    box-shadow: var(--shadow-soft);
}

.fx .pos-action-btn i {
    width: 2.4rem;
    height: 2.4rem;
    flex-shrink: 0;
    border-radius: .7rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    background: rgba(var(--bs-primary-rgb), .12);
}

.fx .pos-action-btn:hover { transform: none; box-shadow: var(--shadow-lift); }

.fx .pos-card-action { text-align: center; border-radius: 1rem; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2); font-weight: 650; }
.fx .pos-card-action.pos-card-action-outline { box-shadow: var(--shadow-soft); border: 0; }
.fx .pos-stop-scan-btn { border-radius: .85rem; box-shadow: none; }

.fx .selectable-card-body { border-radius: 1rem; }

#reader { border-radius: .85rem; overflow: hidden; }
#reader video { border-radius: .85rem; }

/* Inicio del empleado: saludo, buscador directo y acciones */
.fx-emp-hello { margin-bottom: 1.15rem; }
.fx-emp-hello h1 { font-size: 1.35rem; font-weight: 650; letter-spacing: -.025em; margin: 0 0 .2rem; }
.fx-emp-hello p { margin: 0; color: var(--color-ink-muted); font-size: .9rem; }

.fx .pos-scan-cta { margin-bottom: .75rem; min-height: 5.25rem; }

.fx-emp-search {
    position: relative;
    display: flex;
    gap: .5rem;
    margin-bottom: .75rem;
}

.fx-emp-search > .bi {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-ink-disabled);
    pointer-events: none;
}

.fx-emp-search .form-control { min-height: 3.1rem; padding-left: 2.6rem; border-radius: .85rem; font-size: 1rem; }
.fx-emp-search .btn { width: 3.1rem; min-height: 3.1rem; padding: 0; border-radius: .85rem; flex-shrink: 0; font-size: 1.1rem; }
.fx-emp-search input[type="search"]::-webkit-search-cancel-button { filter: invert(.7); }

.fx .pos-action-btn { min-height: 4.25rem; }
.fx .pos-action-btn > span { line-height: 1.25; }

/* Escaner */
.fx-scan-shell { max-width: 520px; display: grid; gap: .85rem; }

.fx-scan-steps {
    display: grid;
    gap: .45rem;
    padding: .85rem 1rem;
    border-radius: 1rem;
    background: rgba(var(--bs-primary-rgb), .06);
    box-shadow: inset 0 0 0 1px rgba(var(--bs-primary-rgb), .16);
    font-size: .875rem;
    color: var(--color-ink);
}

.fx-scan-steps > div { display: flex; align-items: flex-start; gap: .6rem; line-height: 1.4; }

.fx-scan-steps span {
    width: 1.35rem;
    height: 1.35rem;
    flex-shrink: 0;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--color-primary);
    color: var(--color-primary-contrast);
    font-size: .72rem;
    font-weight: 700;
}

.fx-scan-card { padding: .85rem; }

.fx-scan-viewport {
    position: relative;
    min-height: 240px;
    border-radius: .85rem;
    overflow: hidden;
    background:
        radial-gradient(60% 60% at 50% 50%, rgba(var(--bs-primary-rgb), .07), transparent 70%),
        #0b0b0b;
    box-shadow: inset 0 0 0 1px var(--color-border);
}

/* Esquinas del visor (decorativas, no bloquean la camara) */
.fx-scan-viewport::before,
.fx-scan-viewport::after {
    content: '';
    position: absolute;
    width: 2.25rem;
    height: 2.25rem;
    border: 3px solid var(--color-primary);
    z-index: 2;
    pointer-events: none;
}

.fx-scan-viewport::before { top: .75rem; left: .75rem; border-right: 0; border-bottom: 0; border-top-left-radius: .6rem; }
.fx-scan-viewport::after { bottom: .75rem; right: .75rem; border-left: 0; border-top: 0; border-bottom-right-radius: .6rem; }

.fx-scan-viewport #reader { border: 0 !important; }
.fx-scan-viewport #reader video { width: 100% !important; display: block; }

.fx-scan-status {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    margin-top: .75rem;
    font-size: .85rem;
    color: var(--color-ink-muted);
}

.fx-scan-dot {
    width: .55rem;
    height: .55rem;
    border-radius: 50%;
    background: var(--color-success);
    box-shadow: 0 0 0 0 rgba(34, 197, 94, .5);
    animation: fx-pulse 1.6s ease-out infinite;
}

@keyframes fx-pulse { 70% { box-shadow: 0 0 0 .55rem rgba(34, 197, 94, 0); } 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); } }

/* Si la camara no esta disponible, el estado "buscando" se oculta */
.fx-scan-card:has(#readerError:not(.d-none)) .fx-scan-status { display: none; }

.fx .pos-stop-scan-btn { min-height: 3.25rem; margin-top: .85rem; font-size: 1rem; }
.fx .pos-stop-scan-btn:disabled { opacity: .6; }

/* Resultado del escaner / operacion sobre una tarjeta */
.fx-op-wrap { max-width: 560px; }
.fx-op-wrap > .surface-card + .surface-card { margin-top: .75rem; }
.fx-op-wrap .min-w-0 { min-width: 0; }

.fx-op-client {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: 1rem;
}

.fx-op-avatar {
    width: 2.9rem;
    height: 2.9rem;
    flex-shrink: 0;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--bs-primary-rgb), .14);
    color: var(--color-primary);
    font-weight: 700;
    font-size: 1.15rem;
    box-shadow: inset 0 0 0 1px rgba(var(--bs-primary-rgb), .25);
}

.fx-op-name { font-size: 1.15rem; font-weight: 650; letter-spacing: -.015em; line-height: 1.25; overflow-wrap: anywhere; }
.fx-op-meta { display: flex; flex-wrap: wrap; gap: .1rem .85rem; font-size: .82rem; color: var(--color-ink-muted); margin-top: .15rem; }
.fx-op-meta span { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fx-op-meta span > .bi { margin-right: .3rem; }
.fx-op-client .badge-pill { white-space: nowrap; flex-shrink: 0; align-self: flex-start; }

.fx-op-card { padding: 1rem; position: relative; overflow: hidden; }

.fx-op-card::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: var(--program-color, var(--color-primary));
}

.fx-op-card-head { display: flex; align-items: center; gap: .7rem; }

.fx-op-swatch {
    width: 2.25rem;
    height: 2.25rem;
    flex-shrink: 0;
    border-radius: .6rem;
    background: var(--program-color, var(--color-primary));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25);
}

.fx-op-balance { margin-top: 1rem; }
.fx-op-balance-label { font-size: .78rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--color-ink-muted); }
.fx-op-balance-value { font-size: 2.25rem; font-weight: 700; letter-spacing: -.035em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.fx-op-balance-value small { font-size: 1rem; font-weight: 500; color: var(--color-ink-muted); letter-spacing: 0; }

.fx-op-actions { margin-top: .25rem; }
.fx-op-actions > .col-6 > *,
.fx-op-actions > .col-6 > form { height: 100%; }
.fx .fx-op-actions .pos-card-action { min-height: 6.25rem; height: 100%; font-size: .95rem; line-height: 1.25; }

/* Canje de recompensas */
.fx-redeem-list .surface-card strong { font-size: 1rem; }
.fx-redeem-cost {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    margin-bottom: .85rem;
    padding: .25rem .65rem;
    border-radius: 999px;
    background: var(--fx-surface-3);
    font-size: .8rem;
    font-weight: 600;
}

.fx .fx-redeem-btn {
    width: 100%;
    justify-content: center;
    min-height: 2.9rem;
    border-radius: .75rem;
    font-size: .95rem;
}

/* Listas tocables (busqueda, historial, interacciones) */
.fx .list-tile { min-height: 3.5rem; }
.fx a.list-tile { border-radius: .65rem; transition: background-color .15s ease; }
.fx a.list-tile:hover { background: rgba(255, 255, 255, .03); }
.fx .list-tile .list-tile-subtitle { font-size: .82rem; }

.fx-employee .input-group-lg > .form-control { min-height: 3.1rem; font-size: 1rem; }
.fx-employee .input-group-lg > .btn { min-height: 3.1rem; }

@media (max-width: 359.98px) {
    .fx .pos-action-grid { grid-template-columns: 1fr; }
    .fx-op-balance-value { font-size: 1.9rem; }
    .fx .fx-op-actions .pos-card-action { font-size: .85rem; padding: 1rem .5rem; }
}

/* -----------------------------------------------------------------------------
   13. Portal del cliente: cromo (barra superior y navegacion)
   Mismas dimensiones que app.css (no desplaza el contenido del Wallet);
   solo cambia su acabado visual.
   ----------------------------------------------------------------------------- */
.fx-client .client-topbar {
    background: linear-gradient(180deg, rgba(31, 31, 31, .96) 60%, rgba(31, 31, 31, 0) 100%);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.fx-client .client-topbar .client-brand { letter-spacing: -.02em; font-weight: 750; }

.fx-client .client-topbar .client-brand .client-brand-mark {
    background: var(--color-primary);
    color: var(--color-primary-contrast);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25);
}

/* Botones superiores: solo icono (sin circulo ni fondo). Mismo tamano
   de caja que antes (la barra no cambia de alto, el Wallet no se mueve);
   el ::after amplia el area tactil sin ocupar espacio. */
.fx-client .client-topbar .client-icon-btn {
    background: transparent;
    border-color: transparent;
    border-radius: .7rem;
    font-size: 1.3rem;
    color: var(--color-ink);
    transition: background-color .15s ease, color .15s ease;
}

.fx-client .client-topbar .client-icon-btn::after {
    content: '';
    position: absolute;
    inset: -4px;
}

.fx-client .client-topbar .client-icon-btn:hover,
.fx-client .client-topbar .client-icon-btn:focus-visible {
    background: rgba(255, 255, 255, .07);
    color: var(--color-primary);
}

/* Cuatro iconos (promociones, notificaciones, perfil, salir): en telefonos
   angostos solo se reduce el espacio horizontal, nunca el alto. */
@media (max-width: 389.98px) {
    .fx-client .client-topbar > .d-flex { gap: .2rem !important; }
    .fx-client .client-topbar .brand-logo--topbar { max-width: 96px; }
}

.fx-client .client-topbar .client-icon-btn:focus-visible { outline: 2px solid rgba(var(--bs-primary-rgb), .6); outline-offset: 1px; }
.fx-client .client-topbar .client-icon-btn.is-active { color: var(--color-primary); }
.fx-client .client-topbar .client-icon-btn .client-badge-dot { top: 2px; right: 1px; }

.fx-client .bottom-nav {
    background: rgba(40, 40, 40, .9);
    -webkit-backdrop-filter: saturate(160%) blur(14px);
    backdrop-filter: saturate(160%) blur(14px);
    border-top-color: rgba(246, 221, 176, .1);
}

.fx-client .bottom-nav a { position: relative; font-size: .72rem; min-height: 2.9rem; justify-content: center; }
.fx-client .bottom-nav a i { font-size: 1.3rem; }

.fx-client .bottom-nav a.active::before {
    content: '';
    position: absolute;
    top: -.5rem;
    left: 50%;
    width: 1.5rem;
    height: 2px;
    border-radius: 0 0 2px 2px;
    transform: translateX(-50%);
    background: var(--color-primary);
}

@media (min-width: 768px) {
    .fx-client .desktop-nav {
        /* El margen negativo compensa el relleno: la barra conserva su
           altura original y el Wallet no se desplaza ni un pixel. */
        padding: .25rem;
        margin: -.25rem 0;
        border-radius: 999px;
        background: rgba(255, 255, 255, .03);
        box-shadow: inset 0 0 0 1px rgba(246, 221, 176, .1);
    }
}

/* -----------------------------------------------------------------------------
   14. Portal del cliente: pantallas que NO son el Wallet
   ----------------------------------------------------------------------------- */
.fx-client-content .surface-card { box-shadow: var(--shadow-soft); }

.fx-client-content .client-row { border-radius: .85rem; }
.fx-client-content .client-row + .client-row { margin-top: .25rem; }

.fx-client-content .client-icon-btn { transition: background-color .15s ease; }
.fx-client-content .client-icon-btn:hover { background: rgba(255, 255, 255, .06); color: var(--color-ink); }

.fx-client-content .reward-cta {
    border-radius: .65rem;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2);
}

.fx-client-content .profile-action-btn {
    border-radius: .85rem;
    padding: .95rem 1rem;
    transition: background-color .15s ease, border-color .15s ease;
}

.fx-client-content a.profile-action-btn { text-decoration: none; color: var(--color-ink); }
.fx-client-content a.profile-action-btn > .bi:last-child { margin-left: auto; color: var(--color-ink-muted); font-size: .85rem; }

.fx-client-content .profile-action-btn:hover { background: rgba(255, 255, 255, .04); border-color: rgba(246, 221, 176, .26); }

.fx-client-content .profile-avatar {
    border-width: 1px;
    box-shadow: 0 0 0 6px rgba(var(--bs-primary-rgb), .06);
}

.fx-client-content .promo-card { border-radius: 1.1rem; }

.fx-client-content .timeline-item .timeline-marker { box-shadow: 0 0 0 4px var(--color-surface); }

/* Jerarquia de texto en listas del cliente (historial, notificaciones):
   titulo claro, datos secundarios atenuados. */
.fx-client-content .list-tile-title { font-weight: 650; font-size: .95rem; line-height: 1.3; }
.fx-client-content .list-tile-subtitle { color: var(--color-ink-muted); font-size: .84rem; line-height: 1.45; margin-top: .1rem; }

/* Encabezado de pagina: boton volver + titulo */
.fx-client-content > .d-flex.align-items-center.gap-2:first-child { margin-bottom: 1.1rem !important; min-height: 2.75rem; }
.fx-client-content > .d-flex.align-items-center.gap-2:first-child h1 { font-size: 1.25rem; letter-spacing: -.02em; }
.fx-client-content > h1:first-child { font-size: 1.35rem; letter-spacing: -.02em; margin-bottom: 1.1rem !important; }
.fx-client-content .client-icon-btn { width: 2.75rem; height: 2.75rem; flex-shrink: 0; }

.fx-client-content .client-row { align-items: flex-start; padding: .95rem .85rem; }
.fx-client-content .client-row > .small { flex-shrink: 0; text-align: right; font-size: .78rem; line-height: 1.35; }
.fx-client-content .surface-card.p-2 > .client-row + .client-row { border-top: 1px solid rgba(246, 221, 176, .08); border-radius: 0; }

.fx-client-content .timeline-item { padding-bottom: 1.25rem; }
.fx-client-content .timeline-body .fw-bold.small { font-size: .85rem; white-space: nowrap; }

/* Promociones */
.fx-client-content .promo-card { min-height: 8.5rem; padding: 1.15rem 1.25rem; }
.fx-client-content .promo-card .promo-card-footer { font-size: .76rem; gap: .75rem; flex-wrap: wrap; }

/* Recompensas en telefonos angostos: "Canjear" en su propia fila */
@media (max-width: 419.98px) {
    .fx-client-content .surface-card > .d-flex:has(> .reward-cta) { flex-wrap: wrap; }
    .fx-client-content .surface-card > .d-flex:has(> .reward-cta) > .flex-grow-1 { flex: 1 1 0; min-width: 0; }
    .fx-client-content .surface-card > .d-flex > .reward-cta { flex: 1 0 100%; justify-content: center; min-height: 2.75rem; }
}

/* Botones del cliente: area tactil comoda */
.fx-client-content .btn { min-height: 2.75rem; }
.fx-client-content .reward-cta { min-height: 2.6rem; padding: .55rem 1.1rem; }
.fx-client-content .quick-action { min-height: 4.75rem; }

/* -----------------------------------------------------------------------------
   14b. Inicio del cliente: secciones DESPUES del Wallet
   (partials/_home_extras.php). Contenedor propio; nada aqui toca el Wallet.
   ----------------------------------------------------------------------------- */
.fx-home-extras { margin-top: .25rem; }

.fx-home-section { margin-top: 1.6rem; }

.fx-home-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: .75rem;
}

.fx-home-head h2 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -.015em;
    color: var(--color-ink);
}

.fx-home-head > span { font-size: .8rem; color: var(--color-ink-muted); white-space: nowrap; }

.fx-home-head > a {
    font-size: .85rem;
    font-weight: 650;
    color: var(--color-primary);
    text-decoration: none;
    white-space: nowrap;
    padding: .35rem 0 .35rem .5rem;
}

.fx-home-head > a:hover { color: var(--color-primary-dark); }
.fx-home-sub { margin: -.4rem 0 .85rem; font-size: .85rem; color: var(--color-ink-muted); }

/* Progreso de recompensas: fila con icono, nombre, faltante, barra y flecha */
.fx-progress-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: .6rem; }

.fx-progress-item {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: .9rem;
    padding: .9rem 1rem;
    border-radius: 1rem;
    background: rgba(255, 255, 255, .03);
    box-shadow: inset 0 0 0 1px rgba(246, 221, 176, .12);
    color: var(--color-ink);
    text-decoration: none;
    transition: background-color .15s ease, box-shadow .15s ease, transform .1s ease;
}

.fx-progress-item:hover { color: var(--color-ink); background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(246, 221, 176, .22); }
.fx-progress-item:active { transform: scale(.99); }

.fx-progress-icon {
    width: 3rem;
    height: 3rem;
    flex-shrink: 0;
    border-radius: .85rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    color: var(--color-ink);
    background: rgba(255, 255, 255, .05);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
}

.fx-progress-item.is-ready .fx-progress-icon { color: #4ade80; background: rgba(34, 197, 94, .12); box-shadow: inset 0 0 0 1px rgba(34, 197, 94, .25); }

.fx-progress-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .2rem; }
.fx-progress-row { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; }

.fx-progress-reward {
    font-size: 1rem;
    font-weight: 650;
    line-height: 1.3;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fx-progress-percent { font-size: .82rem; font-weight: 700; color: var(--color-ink-muted); font-variant-numeric: tabular-nums; flex-shrink: 0; }
.fx-progress-item.is-ready .fx-progress-percent { color: #4ade80; }

.fx-progress-meta {
    display: flex;
    align-items: center;
    gap: .35rem;
    min-width: 0;
    font-size: .84rem;
    color: var(--color-ink-muted);
    white-space: nowrap;
    overflow: hidden;
}

.fx-progress-meta > span:last-child { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.fx-progress-sep { opacity: .6; }
.fx-progress-status.is-ready { color: #4ade80; font-weight: 600; display: inline-flex; align-items: center; gap: .3rem; flex-shrink: 0; }

.fx-progress-bar {
    display: block;
    height: .4rem;
    margin-top: .45rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, .08);
    overflow: hidden;
}

.fx-progress-bar > span {
    display: block;
    height: 100%;
    min-width: .4rem;
    border-radius: 999px;
    background: var(--color-primary);
    transition: width .6s var(--fx-ease);
}

.fx-progress-item.is-ready .fx-progress-bar > span { background: #22c55e; }

.fx-progress-count { font-size: .75rem; color: var(--color-ink-disabled); margin-top: .15rem; font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fx-progress-chevron { color: var(--color-ink-muted); font-size: 1rem; flex-shrink: 0; }

/* Nuevas tarjetas: carrusel horizontal (scroll solo dentro) */
.fx-discover-scroll {
    display: flex;
    gap: .75rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    margin: 0 -1.1rem;
    padding: .25rem 1.1rem 1rem;
    scroll-padding-inline: 1.1rem;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.fx-discover-scroll::-webkit-scrollbar { display: none; }
.fx-discover-scroll:focus-visible { outline-offset: -2px; }

.fx-discover-card {
    flex: 0 0 min(250px, 80%);
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    border-radius: 1.1rem;
    overflow: hidden;
    background: rgba(255, 255, 255, .03);
    box-shadow: inset 0 0 0 1px rgba(246, 221, 176, .12);
}

.fx-discover-cover {
    position: relative;
    min-height: 7.5rem;
    padding: .85rem 1rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: .75rem;
    color: #fff;
}

.fx-discover-cover-top { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }

.fx-discover-logo {
    width: 2.1rem;
    height: 2.1rem;
    border-radius: .55rem;
    object-fit: contain;
    background: rgba(255, 255, 255, .92);
    padding: .2rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
}

.fx-discover-type {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .22rem .6rem;
    border-radius: 999px;
    background: rgba(0, 0, 0, .3);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.fx-discover-name {
    font-size: 1.15rem;
    font-weight: 750;
    letter-spacing: -.015em;
    line-height: 1.2;
    text-shadow: 0 1px 8px rgba(0, 0, 0, .3);
    overflow-wrap: anywhere;
}

.fx-discover-body { flex: 1; display: flex; flex-direction: column; gap: .6rem; padding: .85rem 1rem 1rem; }

.fx-discover-desc {
    margin: 0;
    font-size: .84rem;
    line-height: 1.45;
    color: var(--color-ink-muted);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.fx-discover-reward { display: flex; align-items: center; gap: .4rem; font-size: .84rem; font-weight: 600; min-width: 0; }
.fx-discover-reward span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fx-discover-reward .bi { color: var(--color-primary); flex-shrink: 0; }

.fx-discover-form { margin-top: auto; }

.fx-discover-join {
    width: 100%;
    min-height: 2.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    border: 0;
    border-radius: .75rem;
    background: var(--color-primary);
    color: var(--color-primary-contrast);
    font-weight: 700;
    font-size: .9rem;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25);
    transition: background-color .15s ease, transform .1s ease;
}

.fx-discover-join:hover { background: var(--color-primary-dark); }
.fx-discover-join:active { transform: scale(.98); }
.fx-discover-join:disabled { opacity: .75; }

/* Agregar a Google / Apple Wallet (solo visible si esta configurado) */
.fx-pass-list { display: grid; gap: .5rem; }

.fx-pass-item {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .6rem .75rem;
    padding: .75rem .9rem;
    border-radius: .9rem;
    background: rgba(255, 255, 255, .03);
    box-shadow: inset 0 0 0 1px rgba(246, 221, 176, .12);
}

.fx-pass-swatch { width: .8rem; height: .8rem; border-radius: 50%; background: var(--program-color); flex-shrink: 0; }
.fx-pass-name { flex: 1; min-width: 8rem; font-weight: 650; font-size: .92rem; }
.fx-pass-actions { display: flex; gap: .4rem; flex-wrap: wrap; }

.fx-pass-btn {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    min-height: 2.5rem;
    padding: .4rem .8rem;
    border-radius: .65rem;
    background: #000;
    color: #fff;
    font-size: .8rem;
    font-weight: 650;
    text-decoration: none;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2);
}

.fx-pass-btn:hover { color: #fff; background: #111; }

@media (max-width: 379.98px) {
    .fx-progress-item { gap: .7rem; padding: .85rem .8rem; }
    .fx-progress-icon { width: 2.4rem; height: 2.4rem; font-size: 1.1rem; }
    .fx-progress-chevron { display: none; }
    .fx-progress-reward { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
    .fx-progress-meta { flex-wrap: wrap; white-space: normal; }
    .fx-progress-sep, .fx-progress-meta .fx-progress-program { display: none; }
}

@media (min-width: 768px) {
    .fx-progress-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .fx-discover-scroll { margin: 0; padding: .25rem 0 1rem; scroll-padding-inline: 0; }
    .fx-discover-card { flex-basis: 260px; }
}

/* -----------------------------------------------------------------------------
   14d. Recompensas e Historial del cliente (todas sus tarjetas)
   ----------------------------------------------------------------------------- */
.fx-client-content .min-w-0 { min-width: 0; }

.fx-group + .fx-group { margin-top: 1.4rem; }

.fx-group-head { display: flex; align-items: center; gap: .7rem; margin-bottom: .6rem; }
.fx-group-swatch { width: .85rem; height: 2.2rem; border-radius: .4rem; background: var(--program-color); flex-shrink: 0; }
.fx-group-title { margin: 0; font-size: 1rem; font-weight: 700; letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fx-group-sub { font-size: .82rem; color: var(--color-ink-muted); }
.fx-group-sub strong { color: var(--color-ink); font-weight: 650; }

.fx-group-link {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: .2rem;
    min-height: 2.5rem;
    padding: 0 .25rem 0 .5rem;
    font-size: .82rem;
    font-weight: 600;
    color: var(--color-primary);
    text-decoration: none;
}

.fx-group-empty { margin: 0; padding: .85rem 1rem; border-radius: .9rem; background: rgba(255, 255, 255, .03); font-size: .86rem; color: var(--color-ink-muted); }

.fx-reward-list { padding: .35rem 1rem; }

.fx-reward-row { display: flex; align-items: center; gap: .85rem; padding: .85rem 0; }
.fx-reward-row + .fx-reward-row { border-top: 1px solid rgba(246, 221, 176, .08); }

.fx-reward-img,
.fx-reward-icon {
    width: 3rem;
    height: 3rem;
    flex-shrink: 0;
    border-radius: .85rem;
    object-fit: cover;
}

.fx-reward-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    background: rgba(255, 255, 255, .05);
    color: var(--color-ink-muted);
}

.fx-reward-row.is-ready .fx-reward-icon { background: rgba(34, 197, 94, .12); color: #4ade80; }

.fx-reward-body { flex: 1; min-width: 0; }
.fx-reward-name { font-weight: 650; font-size: .96rem; line-height: 1.3; }
.fx-reward-desc { font-size: .82rem; color: var(--color-ink-muted); line-height: 1.4; }
.fx-reward-cost { font-size: .8rem; color: var(--color-ink-muted); margin-top: .15rem; }
.fx-reward-body .fx-progress-bar { margin: .45rem 0 .35rem; }
.fx-reward-row.is-ready .fx-progress-bar > span { background: #22c55e; }
.fx-reward-status { font-size: .8rem; font-weight: 600; }
.fx-reward-row .reward-cta { flex-shrink: 0; text-decoration: none; }

@media (max-width: 379.98px) {
    .fx-reward-row { flex-wrap: wrap; }
    .fx-reward-row .reward-cta { flex: 1 0 100%; justify-content: center; }
}

.fx-filter-chips {
    display: flex;
    gap: .4rem;
    overflow-x: auto;
    margin: 0 -1.1rem;
    padding: 0 1.1rem .25rem;
    scrollbar-width: none;
}

.fx-filter-chips::-webkit-scrollbar { display: none; }
.fx-filter-chips .fx-chip { flex-shrink: 0; white-space: nowrap; }
.fx-chip-dot { display: inline-block; width: .55rem; height: .55rem; border-radius: 50%; margin-right: .1rem; flex-shrink: 0; }

.fx-history-card { display: flex; align-items: center; gap: .3rem; font-size: .8rem; font-weight: 600; color: var(--color-ink); margin-top: .1rem; }

/* -----------------------------------------------------------------------------
   14c. Navegacion del cliente en celular: barra flotante inferior
   (cromo del portal; no toca el contenido del Wallet). Cabe dentro del
   espacio inferior que el portal ya reservaba, asi que nada queda oculto.
   ----------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    .fx-client .bottom-nav {
        left: max(.75rem, env(safe-area-inset-left, 0px));
        right: max(.75rem, env(safe-area-inset-right, 0px));
        bottom: calc(.6rem + env(safe-area-inset-bottom, 0px));
        width: auto;
        max-width: 456px;
        margin: 0 auto;
        transform: none;
        padding: .3rem;
        gap: .15rem;
        border: 0;
        border-radius: 1.3rem;
        background: rgba(34, 34, 34, .9);
        -webkit-backdrop-filter: saturate(170%) blur(16px);
        backdrop-filter: saturate(170%) blur(16px);
        box-shadow: 0 0 0 1px rgba(246, 221, 176, .1), 0 16px 40px -12px rgba(0, 0, 0, .85);
    }

    .fx-client .bottom-nav a {
        min-height: 3.2rem;
        padding: .3rem 0;
        border-radius: 1rem;
        gap: .15rem;
        transition: background-color .15s ease, color .15s ease;
    }

    .fx-client .bottom-nav a.active { background: rgba(var(--bs-primary-rgb), .12); color: var(--color-primary); }
    .fx-client .bottom-nav a.active::before { content: none; }
    .fx-client .bottom-nav a:active { background: rgba(255, 255, 255, .06); }
}

/* -----------------------------------------------------------------------------
   15. Acceso (login y cambio de contrasena obligatorio)
   ----------------------------------------------------------------------------- */
body.fx-auth {
    min-height: 100vh;
    margin: 0;
    background: var(--color-bg);
}

.fx-auth-layout {
    min-height: 100vh;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
}

.fx-auth-aside {
    display: none;
    position: relative;
    overflow: hidden;
    padding: 2.5rem 3rem;
    background:
        radial-gradient(80% 60% at 0% 0%, rgba(var(--bs-primary-rgb), .16), transparent 60%),
        radial-gradient(60% 50% at 100% 100%, rgba(var(--color-secondary-rgb), .12), transparent 60%),
        #151515;
    border-right: 1px solid var(--color-border);
    flex-direction: column;
    justify-content: space-between;
}

.fx-auth-aside::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, .025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .025) 1px, transparent 1px);
    background-size: 44px 44px;
    -webkit-mask-image: radial-gradient(70% 70% at 30% 40%, #000, transparent);
    mask-image: radial-gradient(70% 70% at 30% 40%, #000, transparent);
    pointer-events: none;
}

.fx-auth-aside > * { position: relative; z-index: 1; }

.fx-auth-aside .brand-logo { max-height: 44px; max-width: 200px; }

.fx-auth-pitch h2 {
    font-size: 2.1rem;
    font-weight: 650;
    letter-spacing: -.035em;
    line-height: 1.15;
    max-width: 22rem;
    margin-bottom: .85rem;
}

.fx-auth-pitch p { color: var(--color-ink-muted); max-width: 24rem; margin: 0; }

/* Ilustracion decorativa: tarjeta de fidelidad abstracta */
.fx-auth-art {
    position: relative;
    width: 300px;
    height: 180px;
    margin: 2.5rem 0;
}

.fx-auth-art-card {
    position: absolute;
    inset: 0;
    border-radius: 18px;
    padding: 1.25rem 1.35rem;
    background:
        radial-gradient(120% 120% at 100% 0%, rgba(255, 255, 255, .22), transparent 50%),
        linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    color: var(--color-primary-contrast);
    box-shadow: 0 30px 60px -25px rgba(0, 0, 0, .8), inset 0 1px 0 rgba(255, 255, 255, .3);
    transform: rotate(-4deg);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.fx-auth-art-card.is-back {
    transform: rotate(5deg) translate(26px, -14px);
    background: #262626;
    box-shadow: inset 0 0 0 1px var(--fx-border-strong);
}

.fx-auth-art-dots { display: flex; gap: .4rem; }

.fx-auth-art-dots span {
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 50%;
    border: 1.5px solid rgba(var(--color-primary-contrast-rgb), .45);
}

.fx-auth-art-dots span.is-on { background: rgba(var(--color-primary-contrast-rgb), .8); border-color: transparent; }

.fx-auth-art-label { font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; opacity: .75; }
.fx-auth-art-value { font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em; }

.fx-auth-foot { font-size: .75rem; color: var(--color-ink-disabled); display: flex; align-items: center; gap: .45rem; }
.fx-auth-foot a { color: var(--color-ink-muted); text-decoration: none; display: inline-flex; align-items: center; gap: .4rem; }
.fx-auth-foot a:hover { color: var(--color-ink); }
.fx-auth-foot img { height: 15px; width: auto; }

.fx-auth-main {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem 1.25rem calc(2rem + env(safe-area-inset-bottom, 0px));
    background:
        radial-gradient(60% 40% at 50% 0%, rgba(var(--bs-primary-rgb), .07), transparent 70%),
        var(--color-bg);
}

.fx-auth-card { width: 100%; max-width: 400px; }

.fx-auth-brand-mobile { display: flex; justify-content: center; margin-bottom: 2rem; }
.fx-auth-brand-mobile .brand-logo { max-height: 44px; max-width: 180px; }

.fx-auth-head { margin-bottom: 1.75rem; }

.fx-auth-head h1 {
    font-size: 1.6rem;
    font-weight: 650;
    letter-spacing: -.03em;
    margin: 0 0 .35rem;
}

.fx-auth-head p { color: var(--color-ink-muted); margin: 0; font-size: .9rem; }

.fx-auth-pill {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin-bottom: 1rem;
    padding: .3rem .7rem;
    border-radius: 999px;
    background: rgba(var(--bs-primary-rgb), .1);
    box-shadow: inset 0 0 0 1px rgba(var(--bs-primary-rgb), .22);
    color: var(--color-primary);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .02em;
}

.fx-field { margin-bottom: 1.1rem; }

.fx-input-icon { position: relative; }

.fx-input-icon > .bi {
    position: absolute;
    left: .9rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-ink-disabled);
    font-size: 1rem;
    pointer-events: none;
    z-index: 2;
}

.fx-input-icon .form-control { padding-left: 2.6rem; }

.fx-auth .form-control { min-height: 3rem; font-size: 1rem; border-radius: .75rem; }

.fx-auth-submit {
    width: 100%;
    min-height: 3rem !important;
    margin-top: .5rem;
    font-size: .95rem !important;
    border-radius: .75rem !important;
}

.fx-auth .pwa-install-btn {
    width: 100%;
    margin-top: .75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: 2.75rem;
    border-radius: .75rem;
    border: 1px solid var(--color-border);
    background: var(--fx-surface-2);
    color: var(--color-ink);
    font-weight: 600;
    font-size: .875rem;
}

.fx-auth .pwa-install-btn[hidden] { display: none; }
.fx-auth .pwa-install-btn:hover { background: var(--fx-surface-3); border-color: var(--fx-border-strong); }

.fx-auth .auth-legal-note {
    margin: 1.75rem 0 0;
    color: var(--color-ink-disabled);
    font-size: .75rem;
    line-height: 1.6;
    text-align: center;
}

.fx-auth .auth-legal-note a { color: var(--color-ink-muted); text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .2); }
.fx-auth .auth-legal-note a:hover { color: var(--color-ink); }

.fx-auth-maker-mobile {
    margin-top: 2.5rem;
    display: flex;
    justify-content: center;
}

.fx-auth-panel {
    width: 100%;
    max-width: 420px;
    padding: 2rem;
    border-radius: 1.25rem;
    background: var(--color-surface);
    box-shadow: var(--shadow-soft), 0 30px 80px -30px rgba(0, 0, 0, .7);
}

.fx-auth-panel .fx-auth-icon {
    width: 3rem;
    height: 3rem;
    border-radius: .85rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.25rem;
    background: rgba(var(--bs-primary-rgb), .12);
    color: var(--color-primary);
    font-size: 1.35rem;
    box-shadow: inset 0 0 0 1px rgba(var(--bs-primary-rgb), .22);
}

@media (min-width: 992px) {
    .fx-auth-layout { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
    .fx-auth-aside { display: flex; }
    .fx-auth-brand-mobile, .fx-auth-maker-mobile { display: none; }
}

@media (max-width: 575.98px) {
    .fx-auth-panel { padding: 1.5rem 1.25rem; }
}

/* -----------------------------------------------------------------------------
   16. Paginas publicas (documentos legales, autorregistro) y de error
   ----------------------------------------------------------------------------- */
body.fx-public.public-canvas {
    background:
        radial-gradient(50% 35% at 50% 0%, rgba(var(--bs-primary-rgb), .08), transparent 70%),
        var(--color-bg);
}

.fx .regwiz-shell {
    border-radius: 1.25rem;
    box-shadow: var(--shadow-soft), 0 30px 80px -30px rgba(0, 0, 0, .7);
}

.fx .regwiz-input {
    background: var(--fx-surface-2);
    border: 1px solid var(--color-border);
    border-radius: .7rem;
    min-height: 3rem;
}

.fx .regwiz-input:focus { border-color: rgba(var(--bs-primary-rgb), .75); box-shadow: var(--fx-ring); }
.fx .regwiz-label { color: var(--color-ink); font-weight: 550; font-size: .8125rem; }
.fx .regwiz-btn-primary { border-radius: .75rem; min-height: 3rem; background: var(--color-primary); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2); }
.fx .regwiz-btn-primary:hover { transform: none; background: var(--color-primary-dark); }
.fx .regwiz-btn-secondary { border-radius: .75rem; min-height: 3rem; }
.fx .regwiz-summary-card { background: var(--fx-surface-2); }

.fx .manualv-toc,
.fx .manualv-chapter,
.fx .legalv-intro,
.fx .legalv-pending-card,
.fx .helpcenter-card,
.fx .helpcenter-info-card { box-shadow: var(--shadow-soft); }

.fx .helpcenter-card:hover { transform: translateY(-2px); }
.fx .manualv-toc-nav .nav-link.active { background: rgba(var(--bs-primary-rgb), .12); color: var(--color-ink); }
.fx .manualv-toc-nav .nav-link.active i { color: var(--color-primary); }
.fx .legalv-action-btn,
.fx .helpcenter-card-btn { background: var(--color-primary); border-radius: .7rem; }
.fx .legalv-action-btn-outline { border-radius: .7rem; }
.fx .manualv-mobile-toggle { border-radius: .7rem; }

body.fx-blank {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem 1rem;
    background:
        radial-gradient(50% 35% at 50% 0%, rgba(var(--bs-primary-rgb), .08), transparent 70%),
        var(--color-bg);
}

.fx-error-card {
    width: 100%;
    max-width: 440px;
    padding: 2.5rem 2rem;
    text-align: center;
    border-radius: 1.25rem;
    background: var(--color-surface);
    box-shadow: var(--shadow-soft), 0 30px 80px -30px rgba(0, 0, 0, .7);
}

.fx-error-card .empty-state-icon {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    background: var(--fx-surface-2);
    color: var(--color-ink-muted);
    box-shadow: 0 0 0 1px var(--color-border), 0 0 0 8px rgba(255, 255, 255, .015);
    margin-bottom: 1.25rem;
}

.fx-error-card h1 {
    font-size: 3rem;
    font-weight: 700;
    letter-spacing: -.05em;
    line-height: 1;
    margin: 0 0 .5rem;
    background: linear-gradient(180deg, var(--color-ink), var(--color-ink-muted));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.fx-error-card .fx-error-title { font-size: 1.1rem; font-weight: 650; margin-bottom: .35rem; }
.fx-error-card p { color: var(--color-ink-muted); margin-bottom: 1.5rem; }

/* -----------------------------------------------------------------------------
   17. SweetAlert2 (alertas, confirmaciones, credenciales)
   Viven fuera de <main>, por eso son el unico bloque sin ambito .fx; no
   forman parte del Wallet (aparecen encima de cualquier pantalla).
   ----------------------------------------------------------------------------- */
.swal2-container.swal2-backdrop-show { background: rgba(5, 5, 5, .7) !important; }

.swal2-popup {
    background: #1a1a1a !important;
    color: #f3f0ea !important;
    border-radius: 1.1rem !important;
    border: 1px solid rgba(255, 255, 255, .08);
    box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .75);
    padding: 1.5rem 1.25rem 1.35rem !important;
    font-family: inherit;
}

.swal2-title { font-size: 1.2rem !important; font-weight: 650 !important; letter-spacing: -.015em; color: #f3f0ea !important; }
.swal2-html-container { font-size: .9rem !important; color: #b9b5ad !important; line-height: 1.55 !important; }
.swal2-html-container b { color: #f3f0ea; }

.swal2-actions { gap: .5rem; }

.swal2-styled {
    margin: 0 !important;
    min-height: 2.5rem;
    padding: .55rem 1.15rem !important;
    border-radius: .625rem !important;
    font-size: .875rem !important;
    font-weight: 600 !important;
}

.swal2-styled.swal2-cancel {
    background: #202020 !important;
    color: #f3f0ea !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1) !important;
}

.swal2-styled:focus { box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), .3) !important; }
.swal2-timer-progress-bar { background: var(--color-primary) !important; }
.swal2-icon { transform: scale(.82); margin: .5rem auto .25rem !important; }

/* -----------------------------------------------------------------------------
   18. Impresion (reportes): sin cromo de la aplicacion
   ----------------------------------------------------------------------------- */
@media print {
    .fx-sidebar, .fx-topbar, .fx-sidebar-backdrop, .fx-emp-topbar, .fx-emp-bottomnav { display: none !important; }
    .fx-main { margin-left: 0 !important; }
    .fx-content { padding: 0 !important; max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
    :is(.fx, .fx-client-content) * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* -----------------------------------------------------------------------------
   19. Icono oficial de Fiderly (icon-fiderly) en la marca "Fiderly"
   Mismo tamano de caja que antes; solo cambia el contenido del recuadro.
   ----------------------------------------------------------------------------- */
:is(.fx, .fx-client) :is(.fx-brand-mark, .client-brand-mark, .legalv-brand-mark).is-icon {
    padding: 0;
    overflow: hidden;
    background: #1f1f1f !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08) !important;
}

:is(.fx, .fx-client) .fx-brand-icon {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* -----------------------------------------------------------------------------
   20. Tarjetas de puntos: tipo de redondeo con ejemplos + ejemplo de calculo
   (admin/cards/_rounding.php)
   ----------------------------------------------------------------------------- */
.fx-rounding-options {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .65rem;
}

.fx-rounding-option { position: relative; margin: 0; cursor: pointer; min-width: 0; }

.fx-rounding-option > input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.fx-rounding-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: .45rem;
    padding: .9rem 1rem;
    border-radius: .85rem;
    background: var(--fx-surface-2);
    box-shadow: inset 0 0 0 1px var(--color-border);
    transition: box-shadow .15s ease, background-color .15s ease;
}

.fx-rounding-option:hover .fx-rounding-card { box-shadow: inset 0 0 0 1px var(--fx-border-strong); }

.fx-rounding-option > input:checked + .fx-rounding-card {
    background: rgba(var(--bs-primary-rgb), .07);
    box-shadow: inset 0 0 0 2px var(--color-primary);
}

.fx-rounding-option > input:focus-visible + .fx-rounding-card { outline: 2px solid rgba(var(--bs-primary-rgb), .7); outline-offset: 2px; }

.fx-rounding-title { display: flex; align-items: center; gap: .5rem; font-weight: 650; font-size: .92rem; }

.fx-rounding-radio {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
    border-radius: 50%;
    box-shadow: inset 0 0 0 2px var(--fx-border-strong);
    transition: box-shadow .15s ease;
}

.fx-rounding-option > input:checked + .fx-rounding-card .fx-rounding-radio { box-shadow: inset 0 0 0 5px var(--color-primary); }

.fx-rounding-desc { font-size: .8rem; line-height: 1.45; color: var(--color-ink-muted); }

.fx-rounding-examples { display: grid; gap: .3rem; margin-top: auto; }

.fx-rounding-example {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .2rem .4rem;
    padding: .4rem .55rem;
    border-radius: .5rem;
    background: rgba(255, 255, 255, .03);
    font-size: .78rem;
    color: var(--color-ink-muted);
    font-variant-numeric: tabular-nums;
}

.fx-rounding-example strong { color: var(--color-ink); font-weight: 650; }
.fx-rounding-example .bi { font-size: .75rem; }

.fx-calc-example {
    margin-top: .9rem;
    padding: 1rem;
    border-radius: .85rem;
    background: rgba(var(--bs-primary-rgb), .05);
    box-shadow: inset 0 0 0 1px rgba(var(--bs-primary-rgb), .2);
}

.fx-calc-head { display: flex; align-items: center; gap: .45rem; margin-bottom: .75rem; font-size: .9rem; }
.fx-calc-head .bi { color: var(--color-primary); }

.fx-calc-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem 1rem; align-items: start; }
.fx-calc-grid > div { min-width: 0; display: flex; flex-direction: column; gap: .2rem; }
.fx-calc-label { font-size: .72rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--color-ink-muted); margin: 0; }
.fx-calc-value { font-size: .95rem; font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.fx-calc-result { font-size: 1.15rem; font-weight: 700; color: var(--color-primary); }
.fx-calc-note { font-size: .75rem; color: var(--color-ink-muted); }
.fx-calc-input { max-width: 11rem; }
.fx-calc-input .form-control { min-height: 2.25rem; }

.fx-calc-compare { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .85rem; }

.fx-calc-chip {
    padding: .3rem .65rem;
    border-radius: 999px;
    background: var(--fx-surface-2);
    box-shadow: inset 0 0 0 1px var(--color-border);
    font-size: .78rem;
    color: var(--color-ink-muted);
    font-variant-numeric: tabular-nums;
}

.fx-calc-chip strong { color: var(--color-ink); }
.fx-calc-chip.is-active { background: rgba(var(--bs-primary-rgb), .12); box-shadow: inset 0 0 0 1px rgba(var(--bs-primary-rgb), .35); color: var(--color-ink); }
.fx-calc-foot { margin: .75rem 0 0; font-size: .75rem; color: var(--color-ink-muted); }

@media (max-width: 991.98px) {
    .fx-calc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767.98px) {
    .fx-rounding-options { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 379.98px) {
    .fx-calc-grid { grid-template-columns: minmax(0, 1fr); }
    .fx-calc-input { max-width: none; }
}


/* -----------------------------------------------------------------------------
   21. Manuales del Centro de Ayuda (admin/help/_manual.php)
   ----------------------------------------------------------------------------- */
.fx .fx-man-intro {
    display: flex;
    gap: .75rem;
    align-items: flex-start;
    margin-bottom: 1.25rem;
    padding: 1rem 1.15rem;
    border-radius: var(--radius-lg);
    background: rgba(var(--bs-primary-rgb), .06);
    box-shadow: inset 0 0 0 1px rgba(var(--bs-primary-rgb), .18);
}

.fx .fx-man-intro > .bi { color: var(--color-primary); font-size: 1.15rem; margin-top: .1rem; flex-shrink: 0; }
.fx .fx-man-intro p { margin: 0; line-height: 1.6; font-size: .92rem; }

.fx .fx-man-block { margin: 1rem 0 0; }

.fx .fx-man-label {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin-bottom: .45rem;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--color-primary);
}

.fx .fx-man-what { margin: 0; font-size: .97rem; line-height: 1.6; color: var(--color-ink); }

.fx .fx-man-points { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: .5rem; }
.fx .fx-man-points li { display: flex; gap: .55rem; align-items: flex-start; line-height: 1.55; font-size: .92rem; }
.fx .fx-man-points li > .bi { color: var(--color-primary); margin-top: .2rem; flex-shrink: 0; }

.fx .fx-man-steps { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; counter-reset: none; }

.fx .fx-man-steps li {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: .75rem;
    align-items: start;
    padding: .75rem .9rem;
    border-radius: .75rem;
    background: var(--fx-surface-2);
    box-shadow: inset 0 0 0 1px var(--color-border);
    line-height: 1.55;
    font-size: .92rem;
}

.fx .fx-man-step-n {
    padding: .15rem .55rem;
    border-radius: 999px;
    background: var(--color-primary);
    color: var(--color-primary-contrast);
    font-size: .72rem;
    font-weight: 700;
    white-space: nowrap;
    margin-top: .1rem;
}

.fx .fx-man-example {
    margin-top: 1rem;
    padding: .9rem 1rem;
    border-radius: .75rem;
    background: var(--fx-surface-2);
    border-left: 3px solid var(--color-primary);
    font-size: .9rem;
    line-height: 1.6;
}

.fx .fx-man-table-wrap { margin-top: 1rem; overflow-x: auto; border-radius: .75rem; box-shadow: inset 0 0 0 1px var(--color-border); }
.fx .fx-man-table { width: 100%; border-collapse: collapse; font-size: .86rem; font-variant-numeric: tabular-nums; min-width: 420px; }
.fx .fx-man-table caption { caption-side: top; padding: .65rem .9rem; font-size: .78rem; color: var(--color-ink-muted); }
.fx .fx-man-table th { padding: .55rem .9rem; background: var(--fx-surface-2); color: var(--color-ink-muted); font-size: .7rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; text-align: left; white-space: nowrap; }
.fx .fx-man-table td { padding: .55rem .9rem; border-top: 1px solid var(--color-border); }
.fx .fx-man-table td:first-child { font-weight: 600; }

.fx .manualv-chapter .manualv-callout { margin-top: 1rem; }

@media (max-width: 575.98px) {
    .fx .fx-man-table { min-width: 0; table-layout: fixed; font-size: .8rem; }
    .fx .fx-man-table th, .fx .fx-man-table td { padding: .5rem .4rem; }
    .fx .fx-man-col-opt, .fx .fx-man-long { display: none; }
    .fx .fx-man-table th { text-transform: none; letter-spacing: 0; font-size: .72rem; white-space: normal; overflow-wrap: anywhere; }
    .fx .manualv-chapter { padding: 1.25rem 1.05rem 1.4rem; }
    .fx .manualv-chapter-title { font-size: 1.12rem; }
    .fx .fx-man-steps li { grid-template-columns: minmax(0, 1fr); gap: .35rem; }
    .fx .fx-man-step-n { justify-self: start; }
    .fx .manualv-header { gap: .75rem; }
}

/* ---------------------------------------------------------------------------
   Rendimiento: el logo del negocio lleva width/height reales en el HTML para
   que el navegador conozca su proporcion antes de descargarlo. El tamano
   visible lo siguen definiendo max-width/max-height, por eso la altura se
   deja automatica (sin esto, el atributo height fijaria la altura natural).
   --------------------------------------------------------------------------- */
img.brand-logo { height: auto; }