/* ============================================================
   RODIA Gym — sistema de diseño
   Basado en las referencias de /design, con naranja en lugar
   del amarillo original.

   Reglas de la casa:
     - Las cards NO llevan borde. La separación se logra con
       fondo y sombra suave.
     - Iconos outline, de un solo color, heredando currentColor.
     - Botones y chips en forma de píldora.
   ============================================================ */

@import url('../vendor/fonts/poppins.css');

/* ---------- Tokens ---------- */
:root {
    /* Naranja de referencia (design/naranja.jpg) */
    --rg-orange:        #FF5023;
    --rg-orange-dark:   #E84015;
    --rg-orange-soft:   #FFE9E2;
    --rg-orange-glow:   rgba(255, 80, 35, .28);

    /* Grises de la interfaz */
    --rg-sidebar:       #2B3038;
    --rg-sidebar-hover: #363C46;
    --rg-ink:           #2B3038;
    --rg-ink-soft:      #6B7280;
    --rg-ink-faint:     #9CA3AF;
    --rg-bg:            #F4F5F7;
    --rg-card:          #FFFFFF;
    --rg-line:          #EDEFF2;

    /* Semáforo de membresías */
    --rg-green:         #1FA97A;
    --rg-green-soft:    #E4F7F0;
    --rg-amber:         #F5A524;
    --rg-amber-soft:    #FEF3DE;
    --rg-red:           #E5484D;
    --rg-red-soft:      #FDE8E8;
    --rg-blue:          #3B82F6;
    --rg-blue-soft:     #E8F1FE;

    /* Formas */
    --rg-radius:        18px;
    --rg-radius-sm:     12px;
    --rg-radius-lg:     26px;
    --rg-pill:          999px;

    /* Sombras: reemplazan a los bordes */
    --rg-shadow:        0 1px 2px rgba(43, 48, 56, .04),
                        0 6px 20px rgba(43, 48, 56, .06);
    --rg-shadow-lg:     0 4px 12px rgba(43, 48, 56, .06),
                        0 18px 48px rgba(43, 48, 56, .10);

    --rg-sidebar-w:     248px;
    --rg-sidebar-mini:  84px;

    --rg-ease:          cubic-bezier(.4, 0, .2, 1);
}

/* Bootstrap usa estas variables; se alinean con la paleta. */
:root {
    --bs-primary:       #FF5023;
    --bs-primary-rgb:   255, 80, 35;
    --bs-body-color:    #2B3038;
    --bs-body-bg:       #F4F5F7;
    --bs-border-radius: 18px;
    --bs-font-sans-serif: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* ---------- Base ---------- */
* {
    -webkit-tap-highlight-color: transparent;
}

body {
    font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    background: var(--rg-bg);
    color: var(--rg-ink);
    font-size: .9375rem;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    color: var(--rg-ink);
    letter-spacing: -.015em;
}

a {
    color: var(--rg-orange);
    text-decoration: none;
    transition: color .15s var(--rg-ease);
}

a:hover {
    color: var(--rg-orange-dark);
}

/* Foco visible solo para teclado: accesible sin ensuciar el mouse. */
:focus-visible {
    outline: 3px solid var(--rg-orange-glow);
    outline-offset: 2px;
    border-radius: 6px;
}

::selection {
    background: var(--rg-orange);
    color: #fff;
}

/* Bootstrap pinta <code> de rosa; aquí va como una etiqueta gris discreta. */
code {
    background: #F1F3F5;
    color: var(--rg-ink-soft);
    padding: 2px 8px;
    border-radius: 6px;
    font-size: .82em;
    font-weight: 500;
}

/* Scrollbar discreta */
* {
    scrollbar-width: thin;
    scrollbar-color: #D3D7DE transparent;
}

*::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

*::-webkit-scrollbar-thumb {
    background: #D3D7DE;
    border-radius: var(--rg-pill);
}

*::-webkit-scrollbar-track {
    background: transparent;
}

/* ---------- Iconos ---------- */
/* Todos los iconos son outline y heredan el color del texto. */
.rg-icon {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
    vertical-align: -.2em;
}

.rg-icon--sm { width: 16px; height: 16px; }
.rg-icon--lg { width: 26px; height: 26px; }
.rg-icon--xl { width: 40px; height: 40px; stroke-width: 1.5; }

/* Para los glifos de marca (WhatsApp): rellenos, no de trazo. */
.rg-icon--fill { fill: currentColor; stroke: none; }

/* ============================================================
   Layout con sidebar
   ============================================================ */
.rg-shell {
    display: flex;
    min-height: 100vh;
}

/* ---------- Sidebar ---------- */
.rg-sidebar {
    width: var(--rg-sidebar-w);
    flex: 0 0 var(--rg-sidebar-w);
    background: var(--rg-sidebar);
    color: #fff;
    display: flex;
    flex-direction: column;
    padding: 18px 14px;
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100dvh;
    z-index: 1030;
    transition: width .22s var(--rg-ease), flex-basis .22s var(--rg-ease);
}

.rg-sidebar__brand {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 4px 10px 16px;
    color: #fff;
    min-height: 44px;
}

.rg-sidebar__brand:hover {
    color: #fff;
}

.rg-sidebar__logo {
    width: 40px;
    height: 40px;
    border-radius: var(--rg-radius-sm);
    background: var(--rg-orange);
    display: grid;
    place-items: center;
    flex: 0 0 40px;
    overflow: hidden;
    color: #fff;
}

.rg-sidebar__logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Un flex item no se encoge por debajo de su contenido salvo que se le diga
   (min-width: auto es el default). Sin esto, el nombre de abajo crece hasta
   lo que mida y su ellipsis no llega a dispararse nunca: se desborda de la
   barra y la última letra queda cortada. Se veía bien solo porque "Muscle
   Gym" cabía; "Bulls Gym Cerro Gordo" ya no. */
.rg-sidebar__meta {
    min-width: 0;
}

/* Hasta dos renglones antes de recortar: el nombre del gimnasio es del dueño
   y lo quiere ver entero. Un solo renglón dejaba "Bulls Gym Cerro Go…"; con
   dos cabe completo y el menú no se mueve. Pasando de dos sí recorta, para
   que un nombre kilométrico no empuje la navegación. */
.rg-sidebar__name {
    font-weight: 600;
    font-size: .95rem;
    line-height: 1.2;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.rg-sidebar__role {
    font-size: .72rem;
    color: rgba(255, 255, 255, .5);
    white-space: nowrap;
}

.rg-nav {
    display: flex;
    flex-direction: column;
    gap: 3px;
    overflow-y: auto;
    overflow-x: hidden;
    flex: 1;
    margin: 0 -4px;
    padding: 0 4px;
}

.rg-nav__label {
    font-size: .66rem;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: rgba(255, 255, 255, .35);
    /* Apretado a propósito: son 12 entradas y 4 encabezados, y el menú
       completo debe caber sin scroll en una pantalla de portátil. */
    padding: 11px 12px 3px;
    white-space: nowrap;
}

.rg-nav__label:first-child { padding-top: 0; }

.rg-nav__item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    border-radius: var(--rg-radius-sm);
    color: rgba(255, 255, 255, .72);
    font-size: .875rem;
    font-weight: 500;
    white-space: nowrap;
    transition: background .15s var(--rg-ease), color .15s var(--rg-ease);
}

.rg-nav__item:hover {
    background: var(--rg-sidebar-hover);
    color: #fff;
}

.rg-nav__item.is-active {
    background: var(--rg-orange);
    color: #fff;
    box-shadow: 0 6px 16px var(--rg-orange-glow);
}

.rg-nav__text {
    overflow: hidden;
    text-overflow: ellipsis;
}

.rg-sidebar__footer {
    padding-top: 10px;
    margin-top: 4px;
}

.rg-sidebar__version {
    font-size: .66rem;
    color: rgba(255, 255, 255, .3);
    text-align: center;
    padding-top: 8px;
    white-space: nowrap;
}

/* Sidebar colapsado: solo iconos. */
.rg-shell.is-collapsed .rg-sidebar {
    width: var(--rg-sidebar-mini);
    flex-basis: var(--rg-sidebar-mini);
}

.rg-shell.is-collapsed .rg-nav__text,
.rg-shell.is-collapsed .rg-sidebar__meta,
.rg-shell.is-collapsed .rg-nav__label,
.rg-shell.is-collapsed .rg-sidebar__version {
    display: none;
}

.rg-shell.is-collapsed .rg-nav__item,
.rg-shell.is-collapsed .rg-sidebar__brand {
    justify-content: center;
    padding-inline: 0;
}

/* ---------- Área principal ---------- */
.rg-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.rg-topbar {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 28px;
    background: var(--rg-bg);
    position: sticky;
    top: 0;
    z-index: 1020;
}

.rg-topbar__title {
    font-size: 1.35rem;
    font-weight: 600;
    margin: 0;
    line-height: 1.2;
}

.rg-topbar__subtitle {
    font-size: .8rem;
    color: var(--rg-ink-soft);
    margin: 0;
}

.rg-content {
    padding: 4px 28px 40px;
    flex: 1;
}

/* Botón redondo para acciones sueltas (menú, cerrar sesión...). */
.rg-iconbtn {
    width: 42px;
    height: 42px;
    border-radius: var(--rg-radius-sm);
    border: 0;
    background: var(--rg-card);
    color: var(--rg-ink);
    display: grid;
    place-items: center;
    box-shadow: var(--rg-shadow);
    cursor: pointer;
    transition: transform .12s var(--rg-ease), color .15s var(--rg-ease);
}

.rg-iconbtn:hover {
    color: var(--rg-orange);
    transform: translateY(-1px);
}

.rg-iconbtn--ghost {
    background: transparent;
    box-shadow: none;
}

/* ============================================================
   Cards — sin bordes, nunca
   ============================================================ */
.rg-card {
    background: var(--rg-card);
    border: 0;
    border-radius: var(--rg-radius);
    box-shadow: var(--rg-shadow);
    padding: 22px;
}

.rg-card--flush { padding: 0; overflow: hidden; }
.rg-card--dark  { background: var(--rg-sidebar); color: #fff; }
.rg-card--dark .rg-card__title { color: #fff; }

.rg-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
}

.rg-card__title {
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
}

.rg-card__hint {
    font-size: .78rem;
    color: var(--rg-ink-soft);
    margin: 0;
}

/* ---------- Tarjetas de indicador (dashboard) ---------- */
.rg-stat {
    background: var(--rg-card);
    border-radius: var(--rg-radius);
    box-shadow: var(--rg-shadow);
    padding: 20px;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    height: 100%;
    transition: transform .15s var(--rg-ease), box-shadow .15s var(--rg-ease);
}

.rg-stat:hover {
    transform: translateY(-2px);
    box-shadow: var(--rg-shadow-lg);
}

.rg-stat__icon {
    width: 46px;
    height: 46px;
    border-radius: var(--rg-radius-sm);
    display: grid;
    place-items: center;
    flex: 0 0 46px;
    background: var(--rg-orange-soft);
    color: var(--rg-orange);
}

.rg-stat__icon--green { background: var(--rg-green-soft); color: var(--rg-green); }
.rg-stat__icon--amber { background: var(--rg-amber-soft); color: var(--rg-amber); }
.rg-stat__icon--red   { background: var(--rg-red-soft);   color: var(--rg-red); }
.rg-stat__icon--blue  { background: var(--rg-blue-soft);  color: var(--rg-blue); }
.rg-stat__icon--dark  { background: #EEF0F3;              color: var(--rg-sidebar); }

.rg-stat__label {
    font-size: .78rem;
    color: var(--rg-ink-soft);
    margin: 0 0 2px;
    line-height: 1.3;
}

.rg-stat__value {
    font-size: 1.7rem;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -.02em;
    margin: 0;
}

.rg-stat__delta {
    font-size: .74rem;
    font-weight: 500;
    color: var(--rg-ink-faint);
    margin: 2px 0 0;
}

/* ============================================================
   Botones
   ============================================================ */
.rg-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 0;
    border-radius: var(--rg-pill);
    padding: 10px 22px;
    font-size: .875rem;
    font-weight: 600;
    font-family: inherit;
    line-height: 1.4;
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s var(--rg-ease),
                color .15s var(--rg-ease),
                transform .12s var(--rg-ease),
                box-shadow .15s var(--rg-ease);
}

.rg-btn:active { transform: translateY(1px); }

.rg-btn:disabled,
.rg-btn.is-disabled {
    opacity: .5;
    pointer-events: none;
}

.rg-btn--primary {
    background: var(--rg-orange);
    color: #fff;
    box-shadow: 0 6px 16px var(--rg-orange-glow);
}

.rg-btn--primary:hover {
    background: var(--rg-orange-dark);
    color: #fff;
    box-shadow: 0 8px 22px var(--rg-orange-glow);
}

/* El "outline" de la referencia: contorno naranja, fondo transparente. */
.rg-btn--outline {
    background: transparent;
    color: var(--rg-orange);
    box-shadow: inset 0 0 0 2px var(--rg-orange);
}

.rg-btn--outline:hover {
    background: var(--rg-orange);
    color: #fff;
}

.rg-btn--dark {
    background: var(--rg-sidebar);
    color: #fff;
}

.rg-btn--dark:hover {
    background: #1F242B;
    color: #fff;
}

.rg-btn--light {
    background: #fff;
    color: var(--rg-ink);
    box-shadow: var(--rg-shadow);
}

.rg-btn--light:hover {
    color: var(--rg-orange);
}

.rg-btn--ghost {
    background: transparent;
    color: var(--rg-ink-soft);
}

.rg-btn--ghost:hover {
    background: #EDEFF2;
    color: var(--rg-ink);
}

/* Botón de WhatsApp: el verde de la marca, para que se reconozca al vuelo. */
.rg-btn--wa {
    background: #25D366;
    color: #fff;
}

.rg-btn--wa:hover {
    background: #1EBE5D;
    color: #fff;
}

.rg-btn--danger {
    background: var(--rg-red);
    color: #fff;
}

.rg-btn--danger:hover {
    background: #C93B3F;
    color: #fff;
}

.rg-btn--sm  { padding: 6px 16px;  font-size: .8rem; }
.rg-btn--lg  { padding: 14px 32px; font-size: 1rem; }
.rg-btn--block { width: 100%; }

/* ============================================================
   Chips / badges
   ============================================================ */
.rg-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: var(--rg-pill);
    font-size: .74rem;
    font-weight: 600;
    background: #EEF0F3;
    color: var(--rg-ink-soft);
    white-space: nowrap;
}

/* La foto del usuario en el chip de la barra superior. El chip mide 4px de
   padding: 20px la deja del alto del texto, sin estirarlo. */
.rg-chip__photo {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    object-fit: cover;
    flex: 0 0 20px;
    margin-left: -4px;
}

.rg-chip--green  { background: var(--rg-green-soft); color: var(--rg-green); }
.rg-chip--amber  { background: var(--rg-amber-soft); color: #B8770D; }
.rg-chip--red    { background: var(--rg-red-soft);   color: var(--rg-red); }
.rg-chip--orange { background: var(--rg-orange-soft); color: var(--rg-orange); }
.rg-chip--blue   { background: var(--rg-blue-soft);  color: var(--rg-blue); }

/* Punto de estado */
.rg-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
    flex: 0 0 8px;
}

/* ============================================================
   Formularios
   ============================================================ */
.rg-field {
    margin-bottom: 16px;
}

.rg-label {
    display: block;
    font-size: .78rem;
    font-weight: 500;
    color: var(--rg-ink-soft);
    margin-bottom: 6px;
}

.rg-input,
.rg-select,
.rg-textarea {
    width: 100%;
    border: 0;
    background: #F1F3F5;
    border-radius: var(--rg-radius-sm);
    padding: 12px 16px;
    font-family: inherit;
    font-size: .9rem;
    color: var(--rg-ink);
    transition: background .15s var(--rg-ease), box-shadow .15s var(--rg-ease);
}

/* Para teclear dinero: el fondo de caja y el conteo del arqueo son las
   cifras que más importa no equivocar, así que se ven grandes. */
.rg-input--lg {
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: -.02em;
    padding: 14px 16px;
}

.rg-input::placeholder,
.rg-textarea::placeholder {
    color: var(--rg-ink-faint);
}

.rg-input:focus,
.rg-select:focus,
.rg-textarea:focus {
    outline: 0;
    background: #fff;
    box-shadow: 0 0 0 2px var(--rg-orange), 0 6px 18px var(--rg-orange-glow);
}

.rg-textarea { min-height: 96px; resize: vertical; }

.rg-select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 16px;
    padding-right: 40px;
}

.rg-input.is-invalid,
.rg-select.is-invalid {
    box-shadow: 0 0 0 2px var(--rg-red);
}

.rg-error {
    font-size: .76rem;
    color: var(--rg-red);
    margin-top: 5px;
}

/* Campo con icono al frente */
.rg-inputgroup {
    position: relative;
}

.rg-inputgroup .rg-icon {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--rg-ink-faint);
    pointer-events: none;
}

.rg-inputgroup .rg-input {
    padding-left: 46px;
}

.rg-inputgroup .rg-input:focus + .rg-icon {
    color: var(--rg-orange);
}

/* Switch */
.rg-switch {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    user-select: none;
}

/* Varios interruptores en lista, uno por renglón.
   .rg-switch es inline-flex a propósito (así se puede poner junto a otra
   cosa), pero eso hace que en lista se acomoden en columnas según quepan,
   que es justo lo que no se quiere cuando son opciones que se comparan. */
.rg-switches {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
}

.rg-switch input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.rg-switch__track {
    width: 44px;
    height: 25px;
    border-radius: var(--rg-pill);
    background: #D4D8DE;
    position: relative;
    transition: background .2s var(--rg-ease);
    flex: 0 0 44px;
}

.rg-switch__track::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 19px;
    height: 19px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .2);
    transition: transform .2s var(--rg-ease);
}

.rg-switch input:checked + .rg-switch__track {
    background: var(--rg-orange);
}

.rg-switch input:checked + .rg-switch__track::after {
    transform: translateX(19px);
}

.rg-switch input:focus-visible + .rg-switch__track {
    box-shadow: 0 0 0 3px var(--rg-orange-glow);
}

/* ============================================================
   Tablas
   ============================================================ */
.rg-tablewrap {
    overflow-x: auto;
    border-radius: var(--rg-radius);
}

.rg-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: .875rem;
}

.rg-table th {
    text-align: left;
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--rg-ink-faint);
    padding: 12px 16px;
    white-space: nowrap;
    background: var(--rg-card);
}

.rg-table td {
    padding: 14px 16px;
    background: var(--rg-card);
    /* Línea divisoria tenue: no es un borde de card. */
    border-top: 1px solid var(--rg-line);
    vertical-align: middle;
}

.rg-table tbody tr:hover td {
    background: #FAFBFC;
}

.rg-table td:first-child, .rg-table th:first-child { padding-left: 22px; }
.rg-table td:last-child,  .rg-table th:last-child  { padding-right: 22px; }

.rg-table__empty {
    text-align: center;
    padding: 48px 20px;
    color: var(--rg-ink-faint);
}

/* ---------- Avatar ---------- */
.rg-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #EEF0F3;
    color: var(--rg-ink-faint);
    display: grid;
    place-items: center;
    flex: 0 0 38px;
    overflow: hidden;
}

/* La foto llena el círculo y se recorta centrada, como en la ficha: object-fit
   solo vale sobre el <img>, no sobre el <span> que lo envuelve. Sin esto la
   foto salía a tamaño natural y no se veía la cara. */
.rg-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.rg-avatar--lg { width: 56px; height: 56px; flex-basis: 56px; }

/* ============================================================
   Mensajes flash
   ============================================================ */
.rg-flash {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    border-radius: var(--rg-radius-sm);
    font-size: .875rem;
    font-weight: 500;
    margin-bottom: 16px;
    background: var(--rg-blue-soft);
    color: var(--rg-blue);
}

.rg-flash--success { background: var(--rg-green-soft); color: var(--rg-green); }
.rg-flash--error   { background: var(--rg-red-soft);   color: var(--rg-red); }
.rg-flash--warning { background: var(--rg-amber-soft); color: #B8770D; }

.rg-flash__close {
    margin-left: auto;
    background: 0;
    border: 0;
    color: inherit;
    opacity: .6;
    cursor: pointer;
    padding: 0;
    display: grid;
    place-items: center;
}

.rg-flash__close:hover { opacity: 1; }

/* ============================================================
   Estado vacío
   ============================================================ */
.rg-empty {
    text-align: center;
    padding: 56px 24px;
    color: var(--rg-ink-soft);
}

.rg-empty__icon {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: #F1F3F5;
    color: var(--rg-ink-faint);
    display: grid;
    place-items: center;
    margin: 0 auto 16px;
}

.rg-empty__title {
    font-weight: 600;
    color: var(--rg-ink);
    margin-bottom: 4px;
}

/* ============================================================
   Subida de foto (Dropzone)
   ============================================================ */
.rg-photobox {
    text-align: center;
}

.rg-photobox__preview {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    margin: 0 auto 16px;
    background: #F1F3F5;
    color: #C0C6CE;
    display: grid;
    place-items: center;
    overflow: hidden;
}

.rg-photobox__preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.rg-photobox__hint {
    font-size: .72rem;
    margin-top: 10px;
}

/* La zona de arrastre sigue el lenguaje de los campos: fondo gris relleno
   y sin borde, en vez del marco punteado que trae Dropzone de fábrica. */
.rg-dropzone.dropzone {
    background: #F1F3F5;
    border: 0;
    border-radius: var(--rg-radius-sm);
    padding: 22px 16px;
    min-height: 0;
    cursor: pointer;
    transition: background .15s var(--rg-ease), box-shadow .15s var(--rg-ease);
}

.rg-dropzone.dropzone:hover {
    background: #E9ECF0;
}

.rg-dropzone.dropzone.dz-drag-hover {
    background: var(--rg-orange-soft);
    box-shadow: inset 0 0 0 2px var(--rg-orange);
}

.rg-dropzone.dropzone .dz-message {
    margin: 0;
    color: var(--rg-ink-soft);
    font-size: .84rem;
    font-weight: 500;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.rg-dropzone.dropzone .dz-message .rg-icon {
    color: var(--rg-ink-faint);
}

.rg-dropzone.dropzone.is-busy {
    opacity: .6;
    pointer-events: none;
}

/* Las miniaturas de Dropzone se ocultan: la vista previa la maneja el
   formulario, que muestra la foto ya recortada en círculo. */
.rg-dropzone.dropzone .dz-preview {
    display: none;
}

/* ============================================================
   Línea de tiempo del cliente
   ============================================================ */
.rg-timeline {
    position: relative;
    padding-left: 34px;
}

/* Riel vertical que une los eventos. */
.rg-timeline::before {
    content: '';
    position: absolute;
    left: 15px;
    top: 6px;
    bottom: 6px;
    width: 2px;
    background: var(--rg-line);
    border-radius: var(--rg-pill);
}

.rg-timeline__item {
    position: relative;
    padding-bottom: 22px;
}

.rg-timeline__item:last-child {
    padding-bottom: 0;
}

.rg-timeline__dot {
    position: absolute;
    left: -34px;
    top: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #fff;
    color: var(--rg-ink-faint);
    display: grid;
    place-items: center;
    box-shadow: 0 0 0 4px #fff;
}

.rg-timeline__dot--orange { background: var(--rg-orange-soft); color: var(--rg-orange); }
.rg-timeline__dot--green  { background: var(--rg-green-soft);  color: var(--rg-green); }
.rg-timeline__dot--blue   { background: var(--rg-blue-soft);   color: var(--rg-blue); }
.rg-timeline__dot--gray   { background: #F1F3F5;               color: var(--rg-ink-faint); }

.rg-timeline__date {
    font-size: .72rem;
    font-weight: 600;
    color: var(--rg-ink-faint);
    text-transform: uppercase;
    letter-spacing: .06em;
}

.rg-timeline__text {
    font-size: .9rem;
    font-weight: 500;
    margin: 1px 0 0;
}

.rg-timeline__meta {
    font-size: .74rem;
    color: var(--rg-ink-faint);
}

/* ============================================================
   Ficha del cliente
   ============================================================ */
.rg-profile {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}

.rg-profile__photo {
    width: 92px;
    height: 92px;
    border-radius: 50%;
    background: #F1F3F5;
    color: #C0C6CE;
    display: grid;
    place-items: center;
    overflow: hidden;
    flex: 0 0 92px;
}

.rg-profile__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.rg-profile__name {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -.025em;
    margin: 0;
    line-height: 1.15;
}

/* Pares etiqueta/valor de la ficha. */
.rg-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 18px 20px;
}

.rg-fact__label {
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--rg-ink-faint);
    margin-bottom: 2px;
}

.rg-fact__value {
    font-size: .95rem;
    font-weight: 500;
    margin: 0;
    word-break: break-word;
}

/* ============================================================
   Tarjeta de plan (catálogo de membresías)
   ============================================================ */
.rg-plan {
    position: relative;
    background: var(--rg-card);
    border: 1px solid var(--rg-line);
    border-radius: var(--rg-radius);
    box-shadow: var(--rg-shadow);
    padding: 22px;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: transform .15s var(--rg-ease), box-shadow .15s var(--rg-ease),
                border-color .15s var(--rg-ease);
}

.rg-plan:hover {
    transform: translateY(-2px);
    box-shadow: var(--rg-shadow-lg);
}

/* El color del plan, cuando lo tiene, tiñe el borde completo (se pone inline
   en la tarjeta). Antes era una franja a la izquierda; ahora es el borde. */

.rg-plan.is-inactive {
    opacity: .62;
}

.rg-plan__name {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0 0 6px;
    letter-spacing: -.02em;
}

.rg-plan__price {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -.03em;
    line-height: 1.1;
    white-space: nowrap;
}

.rg-plan__meta {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: .84rem;
    color: var(--rg-ink-soft);
    font-weight: 500;
    margin: 10px 0 0;
}

.rg-plan__desc {
    font-size: .8rem;
    color: var(--rg-ink-faint);
    margin: 8px 0 0;
}

.rg-plan__stats {
    display: flex;
    gap: 18px;
    font-size: .78rem;
    color: var(--rg-ink-soft);
    margin: 14px 0 16px;
    padding-top: 14px;
    border-top: 1px solid var(--rg-line);
}

.rg-plan__actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: auto;
}

/* ============================================================
   Selector de plan al vender
   ============================================================ */
.rg-pick {
    display: block;
    cursor: pointer;
    height: 100%;
}

.rg-pick input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

/* Es un <span>: sin display propio quedaría inline y el alto, el relleno
   y el precio se le saldrían de la caja. */
.rg-pick__box {
    display: block;
    background: #F1F3F5;
    border-radius: var(--rg-radius-sm);
    padding: 16px;
    height: 100%;
    transition: background .15s var(--rg-ease), box-shadow .15s var(--rg-ease);
}

.rg-pick:hover .rg-pick__box {
    background: #E9ECF0;
}

/* El seleccionado se marca con un anillo naranja, no con un borde. */
.rg-pick input:checked + .rg-pick__box {
    background: var(--rg-orange-soft);
    box-shadow: inset 0 0 0 2px var(--rg-orange);
}

.rg-pick input:focus-visible + .rg-pick__box {
    box-shadow: inset 0 0 0 2px var(--rg-orange), 0 0 0 3px var(--rg-orange-glow);
}

.rg-pick__name {
    display: block;
    font-weight: 600;
    font-size: .95rem;
    margin: 0;
}

.rg-pick__meta {
    font-size: .76rem;
    color: var(--rg-ink-soft);
    margin: 2px 0 0;
}

.rg-pick__price {
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: -.02em;
    margin: 8px 0 0;
}

.rg-pick input:checked + .rg-pick__box .rg-pick__price {
    color: var(--rg-orange);
}

.rg-pick__saving {
    font-size: .7rem;
    font-weight: 600;
    color: var(--rg-green);
    white-space: nowrap;
}

/* ---------- Acompañantes de una promoción de grupo ---------- */

.rg-partner__search {
    position: relative;
}

/* Los resultados flotan sobre lo que sigue, como cualquier autocompletado. */
.rg-partner__results {
    position: absolute;
    z-index: 20;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: #FFF;
    border-radius: var(--rg-radius-sm);
    box-shadow: var(--rg-shadow-lg);
    overflow: hidden;
    max-height: 260px;
    overflow-y: auto;
}

.rg-partner__hit {
    display: block;
    width: 100%;
    text-align: left;
    padding: 10px 14px;
    background: none;
    border: 0;
    font-size: .88rem;
    cursor: pointer;
}

.rg-partner__hit:hover {
    background: #F1F3F5;
}

.rg-partner__hit small {
    color: var(--rg-ink-soft);
}

/* El de "darlo de alta" cierra la lista: se separa con fondo, no con borde. */
.rg-partner__hit--new {
    background: var(--rg-orange-soft);
    color: var(--rg-orange);
    font-weight: 600;
}

.rg-partner__hit--new:hover {
    background: #FFD9CE;
}

.rg-partner__chosen {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: var(--rg-orange-soft);
    border-radius: var(--rg-radius-sm);
    padding: 10px 14px;
    font-size: .9rem;
    font-weight: 500;
}

/* Resumen del cobro */
.rg-summary {
    background: var(--rg-sidebar);
    color: #fff;
    border-radius: var(--rg-radius);
    padding: 22px;
}

.rg-summary__row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: .86rem;
    padding: 7px 0;
    color: rgba(255, 255, 255, .7);
}

.rg-summary__row--total {
    color: #fff;
    font-size: 1.05rem;
    font-weight: 600;
    padding-top: 14px;
    margin-top: 7px;
    border-top: 1px solid rgba(255, 255, 255, .12);
}

.rg-summary__total {
    font-size: 1.7rem;
    font-weight: 700;
    letter-spacing: -.03em;
    color: var(--rg-orange);
}

/* Cuentas sobre fondo claro (la vista previa de una promoción). Es lo mismo
   que rg-summary__row pero fuera del panel oscuro, donde el texto blanco
   sería invisible. */
.rg-calc__row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: .86rem;
    padding: 7px 0;
    color: var(--rg-ink-soft);
}

/* ============================================================
   Punto de venta
   ============================================================ */

/* La tira del arqueo: la caja del turno vive arriba del catálogo. A la
   izquierda, en qué anda el cajón; a la derecha, los botones del turno. En
   pantallas chicas se apila y los botones se van al ancho completo. */
.rg-cashbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px 24px;
}

.rg-cashbar__stats {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 28px;
}

.rg-cashbar__item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.rg-cashbar__label {
    font-size: .78rem;
    color: var(--rg-ink-soft);
}

.rg-cashbar__value {
    font-weight: 700;
    font-size: 1.05rem;
}

.rg-cashbar__item--total .rg-cashbar__value {
    color: var(--rg-orange);
}

.rg-cashbar__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* Filtros de categoría: chips que se pueden picar. El .rg-chip normal es una
   etiqueta que no se toca; este además responde. */
.rg-pos__cats {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.rg-chip--tap {
    background: #F1F3F5;
    color: var(--rg-ink-soft);
    border: 0;
    cursor: pointer;
    transition: background .15s var(--rg-ease), color .15s var(--rg-ease);
}

.rg-chip--tap:hover {
    background: #E6E9EC;
}

.rg-chip--tap.is-on {
    background: var(--rg-orange);
    color: #FFF;
}

/* La rejilla se acomoda sola: en una tablet de mostrador caben 3, en un
   monitor caben 5, sin media queries que adivinen el equipo del gimnasio. */
.rg-pos__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
}

/* Botón de producto. Sin borde, como toda card: el relieve lo da la sombra. */
.rg-prod {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 100%;
    text-align: left;
    background: var(--rg-card);
    border: 0;
    border-radius: var(--rg-radius-sm);
    box-shadow: var(--rg-shadow);
    padding: 14px;
    cursor: pointer;
    transition: transform .12s var(--rg-ease), box-shadow .15s var(--rg-ease);
}

.rg-prod:hover {
    transform: translateY(-2px);
    box-shadow: var(--rg-shadow-lg);
}

.rg-prod:active { transform: translateY(0); }

.rg-prod:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 3px var(--rg-orange-glow);
}

/* Toque naranja al agregarlo: el mostrador necesita saber que sí lo tomó. */
.rg-prod.is-added {
    box-shadow: inset 0 0 0 2px var(--rg-orange);
}

.rg-prod__name {
    font-weight: 600;
    font-size: .9rem;
    line-height: 1.25;
    color: var(--rg-ink);
}

.rg-prod__price {
    font-weight: 700;
    color: var(--rg-orange);
    letter-spacing: -.02em;
}

.rg-prod__stock {
    font-size: .74rem;
    color: var(--rg-ink-faint);
}

/* El carrito sigue a la vista mientras se recorre el catálogo. */
.rg-pos__side {
    position: sticky;
    top: 16px;
}

.rg-cart__row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
}

.rg-cart__row + .rg-cart__row {
    /* Los renglones se separan con fondo, no con línea: es una card. */
    box-shadow: inset 0 1px 0 var(--rg-line);
}

.rg-cart__name {
    flex: 1;
    min-width: 0;
    font-size: .86rem;
    font-weight: 500;
    line-height: 1.3;
}

.rg-cart__unit {
    display: block;
    font-size: .74rem;
    font-weight: 400;
    color: var(--rg-ink-faint);
}

.rg-cart__qty {
    width: 58px;
    text-align: center;
    padding: 6px 4px;
    font-size: .86rem;
    font-weight: 600;
}

.rg-cart__total {
    width: 76px;
    text-align: right;
    font-size: .86rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* ============================================================
   Utilidades
   ============================================================ */
.rg-muted     { color: var(--rg-ink-soft); }
.rg-faint     { color: var(--rg-ink-faint); }
.rg-orange    { color: var(--rg-orange); }
/* Para las cifras que hay que leer de un vistazo: un faltante de caja en
   rojo, un turno cuadrado en verde. */
.rg-red       { color: var(--rg-red); }
.rg-green     { color: var(--rg-green); }
.rg-strong    { font-weight: 600; }
.rg-nowrap    { white-space: nowrap; }
.rg-mono      { font-variant-numeric: tabular-nums; }

/* ============================================================
   Responsive
   ============================================================ */
/* En pantallas bajitas (portátiles de 768px) el menú completo no cabe con
   el espaciado cómodo. En vez de apretarlo para todos, se aprieta solo
   aquí: así el menú nunca queda con entradas escondidas bajo el scroll. */
@media (max-height: 820px) {
    .rg-nav__item  { padding-top: 6px; padding-bottom: 6px; }
    .rg-nav__label { padding-top: 8px; }
    .rg-sidebar__version { display: none; }
}

@media (max-width: 991.98px) {
    .rg-sidebar {
        position: fixed;
        left: 0;
        top: 0;
        transform: translateX(-100%);
        transition: transform .25s var(--rg-ease);
        box-shadow: var(--rg-shadow-lg);
    }

    .rg-shell.is-open .rg-sidebar {
        transform: translateX(0);
    }

    /* Fondo oscuro al abrir el menú en móvil. */
    .rg-shell.is-open::after {
        content: '';
        position: fixed;
        inset: 0;
        background: rgba(43, 48, 56, .5);
        z-index: 1029;
    }

    .rg-topbar  { padding: 16px; }
    .rg-content { padding: 0 16px 32px; }
}

/* ==========================================================================
   Reportes: la gráfica y las barras de proporción
   ========================================================================== */

/* La altura incluye la banda de las etiquetas del eje: si se dimensiona solo
   el área de trazo, la tarjeta acaba con su propio scroll vertical. */
.rg-chart {
    position: relative;
    height: 260px;
}

/* Las tres del dashboard van una junto a otra: más bajitas para que las seis
   tarjetas de arriba y las gráficas quepan sin scroll en una pantalla. */
.rg-chart--sm {
    height: 180px;
}

@media (max-width: 575.98px) {
    .rg-chart { height: 200px; }
}

/* Cada fila es una categoría: nombre, importe y una barra de proporción.
   Todas del mismo color a propósito — la barra ya dice cuál es mayor con el
   largo, y teñirlas por tamaño sería pintar dos veces el mismo dato. */
.rg-bars__row + .rg-bars__row {
    margin-top: 14px;
}

.rg-bars__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 6px;
}

.rg-bars__name {
    font-size: .86rem;
    color: var(--rg-ink);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rg-bars__name a {
    color: inherit;
    text-decoration: none;
}

.rg-bars__name a:hover {
    color: var(--rg-orange);
}

.rg-bars__value {
    font-size: .86rem;
    font-weight: 600;
    color: var(--rg-ink);
    white-space: nowrap;
}

.rg-bars__track {
    height: 8px;
    border-radius: 999px;
    background: var(--rg-line);
    overflow: hidden;
}

.rg-bars__fill {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--rg-orange);
    min-width: 2px;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

@media print {
    .rg-sidebar, .rg-topbar, .rg-btn { display: none !important; }
    .rg-card { box-shadow: none; }
}